Javascript

Documentation

• w3schools
• Fonctionnalités ES2015

Evenements

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);

• onclick

Changer d'url / redirection

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

// 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

// 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

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

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

Split

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

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

var objet_string = String(mon_objet);

StartsWith

// 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

// 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

// 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

parseInt("1");

• parseInt

Tableau / Array

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 // max value Math.max.apply(null, tableau);

• map
• find
• splice
• includes
• forEach

Dictionnaire / Map

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

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

Date

let today = new Date(); let lastMonth = new Date(); lastMonth = lastMonth.setMonth(lastMonth.getMonth() - 1); const formattedDate = `${today.getFullYear()-today.getMonth()-today.getDay()}`;

moment.js

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

// 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é

// 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)

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

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

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

// 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.

// 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

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

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

Falsy values

// 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

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

For

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

try { throw 'Error message'; } catch (e) { alert(e); }

catch possède toujours un argument.

• Throw

Opérateurs

// 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

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

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

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

Console API

alert, prompt, confirm

// 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é

<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

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() { // ... } })();

Héritage par prototype

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

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

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

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

// 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

// 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

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

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

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

balise_parent.replaceChild(nouvelle_balise, balise_à_remplacer);

Form / input

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

setCustomValidity

Focus

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

LINQ équivalent

// 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

<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

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

Convention de codage

// 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

• ProgressBar.js