Documentation

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

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")) { ... }

Tableau / Array

var tableau = ["un", "deux", "trois"];
var un = tableau[0];

// méthodes
var length = tableau.length;
var index = tableau.indexOf("trois");

// ajouter un élément
tableau.push("quatre");

// extrait et retire le dernier élément d'un tableau
var lastElement = tableau.pop();

// tableau associatif
var tableau_associatif = { "un" : 1, "deux" : 2, "trois": 3 };
for(var key in tableau_associatif)
{
    var value = tableau_associatif[key];
}

// map: projection de tableau dans nouveauTableau
var nouveauTableau = tableau.map(function(element) {
    return element + '!';
});

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

// supprimer l'élément à l'index 5
tableau.splice(5, 1);

// obtenir l'index
var index = tableau.indexOf("deux");

// supprimer un élément
var index = tableau.indexOf("deux");
tableau.splice(index, 1);

Dictionnaire / Map

var ipAdresses = new Map<string, string>();
ipAdresses.set('computer1', '192.168.0.1');
ipAdresses.get('computer1');  // 192.168.0.1

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

timeout, wait, sleep, pause

// attend 1s avant de lancer my_function
setTimeout(my_function, 1000);

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

MDN Regular Expressions

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

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

for (property in jsonData) {
    console.log(property + ": " + 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);
}

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, comfirm

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

Closure

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
var itemNames = items.map(item => item.name);

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

Bibliothèques

ProgressBar.js

Javascript