Javascript

De Banane Atomic
Aller à la navigationAller à la recherche

Documentation

Evenements

Javascript.svg
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
    // ...
});

// associe la méthode MonHandler à l’événement mousemove
// écrase toutes les autres méthodes qui étaient associées à cet événement
document.mousemove = MonHandler;

// associe la méthode MonHandler à l’événement mousemove
// tout en conservant les méthodes précédement associées à cet événement
// ne fonctionne pas avec IE (voir attachEvent)
document.addEventListener("mousemove", MonHandler, false);

// supprime toutes les méthodes qui étaient associées à l’événement mousemove
document.mousemove = null;

// supprime l'association entre la méthode MonHandler et l’événement mousemove
// tout en conservant les méthodes précédement associées à cet événement
// ne fonctionne pas avec IE (voir detachEvent)
document.removeEventListener("mousemove", MonHandler, false);

Changer d'url / redirection

Javascript.svg
location = "http://domain.net";

// équivalent au clique sur un lien
window.location.href = "http://domain.net";

// HTTP redirect
window.location.replace("http://domain.net");

String

Javascript.svg
// concaténation
var concat = "string1" + "string2";
var interpolation = `variable = ${variable}`;

// multilignes
var multilignes = "ligne1\
ligne2";

var v = "0123465789";
// index of
v.indexOf("6");  // 6
v.indexOf("A"));  // -1
v.lastIndexOf("6"); // 6

// sous-string
var v = v.slice(3, 7); // 3456
var v = v.slice(3); // 3456789
var v = v.slice(-3); // 789

// replace
var v = v.replace("123", "xxx");  // 0xxx465789
// replace regex
var v = v.replace(/1\d3/, "xxx");  // 0xxx465789

// première lettre en majuscule
let wordWithUpperCaseFirstLetter = word.charAt(0).toUpperCase() + word.slice(1);

RegEx

Javascript.svg
// exec: première occurrence
var match = /[a-z]+/.exec("123abc456");  // [ 'abc', index: 3, input: '123abc456' ]

// avec des groupes
var match = /(\d+)([a-z]+)(\d+)/.exec('x123abc456x');  // [ '123abc456', '123', 'abc', '456', index: 0, input: 'x123abc456x' ]

// test
if (/[a-z]+/.test("123abc456")) { }  // true

Expression rationnelle

Javascript.svg
var regex = new RegExp("expression");
var regex = /expression/;

if (regex.test("texte")) // test renvoie true si une correspondance a été trouvée

var result = regex.exec("texte");
// result = null si aucune correspondance n'est trouvée

var group = "text 123 text".match(/text (\d+) text/);  // 123
Les parenthèses n'ont pas besoin d'être échappées

Si des parenthèses sont utilisées dans l'expression pour créer des groupes, result sera un tableau de taille égale au nombre de groupe + 1
result[0] : le resultat complet plus les groupes séparés par des ,

result[1] : le premier groupe

MDN Regular Expressions

Comparaison

Javascript.svg
if (s1 == s2)

if (s1.toLowerCase() == "jpg")

Split

Javascript.svg
var s = "deux mots";
s.split(" ")[0]; // deux
s.split(" ")[1]; // mots
s.split(" ")[2]; // undefined
s.split(",")[0]; // deux
s.split(",")[1]; // undefined

Path, FileName

Javascript.svg
var path = "/folder/filename.ext";
var fileName = path.split("/").pop(); //filename.ext
// The pop() method removes the last element of an array, and returns that element.

var fileName = path.substring(path.lastIndexOf('/') + 1);

Convert object to string

Javascript.svg
var objet_string = String(mon_objet);

StartsWith

Javascript.svg
// Méthode d'extension startsWith pour la classe String
if (typeof String.prototype.startsWith != "function") {
    String.prototype.startsWith = function (str){
        return this.slice(0, str.length) == str;
    };
}

var url = "https://www.truc.fr";
if (url.startsWith("https://")) { ... }

EndsWith

Javascript.svg
// Méthode d'extension endsWith pour la classe String
if (typeof String.prototype.endsWith != "function") {
    String.prototype.endsWith = function (str){
        return this.slice(-str.length) == str;
    };
}

var url = "https://www.truc.fr";
if (url.endsWith("fr")) { ... }

Contains

Javascript.svg
// Méthode d'extension contains pour la classe String
if (typeof String.prototype.contains != "function") {
    String.prototype.contains = function (str){
        return this.indexOf(str) !== -1;
    };
}

var url = "https://www.truc.fr";
if (url.contains("www")) { ... }

Parsing

Javascript.svg
parseInt("1");

Tableau / Array

Javascript.svg
var tableau = ['un', 'deux', 'trois'];
var un = tableau[0];

// méthodes
var length = tableau.length;
var index = tableau.indexOf('trois');
// -1 if not found

// add an element
tableau.push('quatre');
// insert an element
tableau.splice(2, 0, 'deux et demi');

// extrait et retire le dernier élément d'un tableau
var lastElement = tableau.pop(); // trois, ["un", "deux"]
// extrait et retire le premier élément d'un tableau
var firstElement = tableau.shift(); // un, ["deux", "trois"]
// extrait et retire le enième élément d'un tableau
var element = tableau.splice(1, 1); // deux, ["un", "trois"]

// supprimer le premier élément correspondant à une valeur
var index = tableau.indexOf("deux");
if (index !== -1) {
    tableau.splice(index, 1);
}
// supprimer tous les élément correspondant à une valeur
tableau = tableau.filter(x => x !== "deux");

// test if it contains an element
if (tableau.includes('un')) {}

// projection dans un nouveau tableau (select)
var nouveauTableau = tableau.map(x => `${x}!`);

// filtre les valeurs (where)
var nouveauTableau = tableau.filter(x => x.length > 2);

// find the first matching element (first)
var item = tableau.find(x => x.length > 2);

// forEach: parcourt de tableau
tableau.forEach(x => console.log(x + '?'));

tableau.forEach(function(element, index, array) {
    console.log(element + '?');
});

// to string
tableau.join(' - '); // un - deux - trois

Dictionnaire / Map

Javascript.svg
var myMap = new Map();

myMap.set('key1', 'value1');
myMap.get('key1');  // value1

myMap.keys(); // [ 'key1' ]
myMap.values(); // [ 'value1' ]

for (const [key, value] of myMap) {
  console.log(`${key} = ${value}`);
}

Nombres

Javascript.svg
// arrondi à l'entier
Math.round(myNumber);
// arrondi à la deuxième décimale
Math.round(myNumber * 100) / 100;

Date

Javascript.svg
let today = new Date();

let lastMonth = new Date();
lastMonth = lastMonth.setMonth(lastMonth.getMonth() - 1);

const formattedDate = `${today.getFullYear()-today.getMonth()-today.getDay()}`;

moment.js

Javascript.svg
import * as moment from 'moment';

var dateTime = new Date();  // datetime actuelle

var momentObject = moment(dateTime);  // Date → Moment
var dateTime = momentObject.toDate();  // Moment → Date

var stringObject = momentObject.format("YYYY-MM-DD HH:mm:ss");  // Moment → String
var momentObject = moment(stringObject);  // String → Moment

var previousMonth = moment().subtract(1, 'months');
var firstDay = moment().startOf('month');

Variables

Javascript.svg
// déclaration avec assignation
var v = "variable";

// ré-assignation
v = "autre chose";

// test si une variable a été assignée
if(typeof(v) === "undefined") { /* Non assignée */}

// test si une variable a une truthy value
if (v)
// faux si
// null
// undefined
// NaN
// empty sring
// 0
// false

Une variable déclarée mais non assignée a la valeur undefined.
L'utilisattion d'une variable non-déclarée cause une ReferenceError: v is not defined

var vs let vs const

  • var a une portée au niveau de la fonction
  • let et const ont une portée au niveau du block
  • const ne peut être mis à jour ou redéclaré
Javascript.svg
// au niveau global, en dehors d'une fonction, var et let sont équivalent: ils ont la même portée
let lll;
var vvv;

// dans une fonction var et let sont équivalent: ils ont la même portée
function ma_fonction() {
    let lll;
    var vvv;

// dans un block
for( let i = 0; i < 5; i++ ) {
    // let n'est visible qu'à l'intérieur du block

for( var i = 0; i < 5; i++ ) {
    // var est visible à l'intérieur du block mais aussi à l'extérieur

Accéder à une variable hors scope depuis une fonction asynchrone (Promise)

Javascript.svg
var myPromise = function () {
    return new Promise(function (resolve, reject) {
        resolve();
    });
};

for (var i = 0; i < 3; i++) {
    myPromise(i).then(function () {
        console.log(i);
    });
}
  • résultat 3 3 3
  • au lieu de 0 1 2

La boucle for s’exécute jusqu'au bout avant le premier appel asynchrone à myPromise.
Lors de l’exécution du premier appel asynchrone à myPromise i est égal à 3.
Solution: définir i avec let au lieu de var
Le scope de i se réduit donc à la boucle for

Fonctions

Javascript.svg
function maFonction(var1, var2, var3=30)
{
    var x = 5 + var1 + var2 + var3;
    return x;
}

var temp = maFonction(10, 20);

async / await

Understand promises before you start using async/await

Javascript.svg
function resolveAfterTwoSeconds() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('resolved');
        }, 2000);
    });
}

// avec then
function asyncCall() {
    console.log('calling');
    resolveAfter2Seconds().then((result) => console.log(result));
}

// avec async / await
async function asyncCall() {
    console.log('calling');
    var result = await resolveAfter2Seconds();
    console.log(result);
}

asyncCall();

(async () => {
    await asyncCall();
    console.log("end");
})();

const [result1, result2] = await Promise.all([
    promise1(),
    promise2()
]);

timeout, wait, sleep, pause

Javascript.svg
// wait 1000ms before starting my_function
setTimeout(my_function, 1000);

// create a sleep function
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
// wait 1000ms before executing the next line
await sleep(1000);

Objets

Dans JavaScript tout est objet: String, Number, Array ...
Un objet est une donnée, avec des propriétés et des méthodes.

Javascript.svg
// test si l'objet o à une propriété p (own property ou prototype property)
if ("p" in o) { ... }

// test si l'objet o à une propriété p (own property seulement)
if (o.hasOwnProperty("p")) { ... }

// test si une propriété existe pour un objet
if (typeof(objet.propriété) === 'undefined') { ... }

// lister les noms des propriétés et leurs valeurs
Object.keys(o);
Object.values(o);

function getClassName(obj) {
  return Object.prototype.toString.call(obj).slice(8, -1);
}

Determining if an object property exists

JSON

Javascript.svg
let jsonData = JSON.parse(jsonText);
console.log(JSON.stringify(jsonData));

for (property in jsonData) {
    console.log(property + ": " + jsonData[property]);

// add a new property with a value
jsonData['property'] = 'value';
// delete a property
delete jsonData['property'];

If Else

Javascript.svg
if (condition1 && condition2 || !(condition3)) {
  ...
}
else if (condition4) {
  ...
}
else {
  ...
}

Falsy values

Javascript.svg
// test si x est une truly value (true, {}, [], 42, "foo")
if (x) { ... }
// test si x est une falsy value (false, null, undefined, 0, NaN, '', "")
if (!x) { ... }
// pour combiner les tests des truly values utiliser !!
if (!!x && !!y) { ... }

switch

Javascript.svg
switch (choice) {
    case "1":
        ...
        break;
    case "2":
        ...
        break;
    default:
        ...
}

For

Javascript.svg
for (var i=0; i<5; i++)
{
    continue; // stop le traitement et passe directement à la valeur suivante
    break;    // stop le traitement et sort de la boucle for
}

Try - catch

Javascript.svg
try {
    throw 'Error message';
} catch (e) {
    alert(e);
}
catch possède toujours un argument.

Opérateurs

Javascript.svg
// assigne le première valeur vraie (qui n'est pas null, undefinied, 0, "", false) sinon la dernière valeur fausse
let o = obj1 || obj2 || obj3;

// représentation booléenne d'obj: false si null, undefinied, 0, "", false sinon true
let b = !!obj;

Types de données

Javascript.svg
var string = "String";

var number = 1;

var boolean = true;

var array = [1, 2];

var object = { property1:"value1", property:"value2" }
var property1 = object.property1;

// tester un type
if (typeof(string) === "string") { ... }
// types : array, boolean, function, object, string, number

Position de la sourie

Javascript.svg
function(event) {
	if (!event) var event = window.event;

	posX = event.pageX;
	posY = event.pageY;
}

Log

Afficher la console : Firefox → Outils → Développeur Web → Console Web

Javascript.svg
console.log("LOG: %o", myObj);

Console API

alert, prompt, confirm

Javascript.svg
// affiche une fenêtre contenant un message et un bouton Ok
alert("Hello world!");

// affiche une fenêtre contenant un message, un champs de saisie et deux boutons Ok et Cancel
let name = prompt("What's your name?");

// affiche une fenêtre contenant un message et deux boutons Ok et Cancel
if (window.confirm("Continue?"))

alert, prompt, confirm

Tester si Javascript est activé

Html.svg
<script type="text/javascript">
(function() {
  // masque le message si javascript est activé
  document.getElementById("error").css("display", "none");
})();
</script>

<p id="error">Il faut activer javascript pour naviguer sur ce site!</p>

Scope

Javascript.svg
var globalVariable;

function globalFunction() {
   var localVar;
   function localFunction() {
      // ...
   }
}

// wrapper le code dans un méthode anonyme permet de le rendre privé (non-globale)
(function() {
   var privateVar;

   function privateFunction() {
     // ...
   }
})();

Closure

Héritage par prototype

Javascript.svg
var Animal = function() {
    this.name = "";
    this.age = 0;
    // inutile d'implémenter eat dans Animal
    //this.eat = function() {
    //    console.log("Animal eats something");
    //};
};

var Cat = function() {
    this.eat = function() {
        console.log("Cat eats a mouse");
    };
};

// récupération des champs et fonctions d'Animal
Chat.prototype = new Animal();

Balise / Tag

Chargement d'un fichier Javascript depuis le code

Javascript.svg
document.write("<script src='" + url2file + "'></script>");

// cette solution peut poser problème si head à déjà été évalué
var newScriptTag = document.createElement('script');
newScriptTag.setAttribute("type", "text/javascript");
newScriptTag.setAttribute("src", url2file);
document.getElementsByTagName("head")[0].appendChild(newScriptTag);

JQuery

Afficher du texte

Javascript.svg
document.write("<h1>HELLO</h1>");

// avec un retour à la ligne
document.write("<b>HELLO</b><br />");

Récupérer un élément du document

Javascript.svg
// id
var monElement = document.getElementById("ElementId");

// nom de balise
var mesElements = document.getElementsByTagName("div");

// name : <div name="xxx">yyy</div>
var mesElements = document.getElementsByName("xxx");

// class name
var mesElements = document.getElementsByClassName("ccc");

// requête CSS
// recherche la première balise tag de classe class descendant de l'élément id
var monElement = document.querySelector('#id tag.class');
// recherche toutes les balises tag de classe class descendant de l'élément id
var mesElements = document.querySelectorAll('#id tag.class');
for (var elt of mesElements) { ... }  // fonctionne seulement avec Firefox
for (i = 0; i < mesElements.length; ++i) {
  mesElements[i]...
}

// afficher l'élément
alert(monElement.outerHTML);

// contenu texte de l'élément
monElement.textContent;

// accès au parent
monElement.parentNode;

XPath

Attributs d'une balise

Javascript.svg
// obtenir la valeur d'un attribut
var href = balise_a.getAttribute("href");

// Modifier la valeur d'un attribut, l'attribut est créé s'il n'existait pas
balise_a.setAttribute("href", "url");

Le contenu d'une balise

Javascript.svg
document.getElementById("DivId").innerHTML = "<p>Nouveau contenu</p>";

// avec innerText seul le texte brut est récupéré, sans aucunes balises HTML
document.getElementById("DivId").textContent = "Nouveau contenu";

Modifier le style CSS

Javascript.svg
document.getElementById("mybutton").style.color = "blue";
document.getElementById("mybutton").setAttribute('style', 'background-color: black !important');

// la valeur de background-color si elle est définit pour body
document.body.style.backgroundColor;
// la valeur calculée de background-color pour body
window.getComputedStyle(document.body).getPropertyValue("background-color");

Ajouter une nouvelle balise

Javascript.svg
var newTag = document.createElement('a');
newTag.id = "mon-id";
//newTag.setAttribute("id", "mon-id");
newTag.classList.add('MyClass');  // remove, contains, toggle
newTag.href = "#";
newTag.onclick = function() { doSomething(); }
document.getElementById('parentTag').appendChild(newTag);

Remplacer une balise

Javascript.svg
balise_parent.replaceChild(nouvelle_balise, balise_à_remplacer);

Form / input

Javascript.svg
// force un input dans l'état invalid (type HTMLSelectElement)
inputElement.setCustomValidity('invalid formula');

setCustomValidity

Focus

Javascript.svg
const element = <HTMLElement>document.getElementById('id');
element.focus();
element.blur();

LINQ équivalent

Javascript.svg
// filter is equivalent to Where
var itemsType1 = items.filter(item => item.type === 1);

// map is equivalent to Select
items.map(item => item.name);
items.map(item => ({
    id: item.id,
    name: item.name
}));

// flatMap is equivalent to SelectMany
items.flatMap(item => item.tags);

// every is equivalent to All
var allAreType1 = items.every(item => item.type === 1);

// some is equivalent to Any
var anyOfType1 = items.some(item => item.type === 1);

// reduce is "kinda" equivalent to Aggregate (and also can be used to Sum)
var sum = items.reduce((total, item2) => total + item2.price, 0);
// ,0 : gère les tableaux vides et force total en number plutôt qu'en item

// sort is "kinda" like OrderBy (but it sorts the array in place - eek!)
var orderedByName = items.sort((a, b) => a.name > b.name ? 1 : 0);

Exemples

Afficher la position de la sourie

Html.svg
<head>
<script>
document.onmousemove = function(event) {
	document.getElementById("posX").innerHTML = event.pageX;
	document.getElementById("posY").innerHTML = event.pageY;
}
</script>
</head>

<body>
X : <div id=posX>0</div><br>
Y : <div id=posY>0</div><br>
</body>

Activer / déscactiver un bouton si une textbox contient du texte

Javascript.svg
window.onload = function () {
    var myTextbox = document.getElementById("myTextbox");
    myTextbox.addEventListener("input", function (e) {
        document.getElementById("myButton").disabled = this.value == "";
    });
}

Convention de codage

Javascript.svg
// variables: pascalCase
var maVariable;

// fonctions: CamelCase
MaFonction: function() { }

// classes: CamelCase
MaClasse.prototype = { }

// méthodes: pascalCase
MaClasse.prototype = {
    maMéthode: function() { }
    // méthodes privées: commencent par un underscore
    // Elles ne sont pas vraiment privée. Cela sert à indiquer qu'on ne devrait pas avoir à l'appeler en dehors de la classe
    _méthodePrivée: function() { }

// constantes: snake_case majuscule
const MA_CONSTANTE = 1;
Noms de fichiers: pascalCase

Bibliothèques