Version du 11 février 2021 à 11:53

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

// extrait et retire le premier élément d'un tableau
var firstElement = tableau.shift();

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

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

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

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

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

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 » : différence entre les versions

Version du 11 février 2021 à 11:53

Documentation

Evenements

Changer d'url / redirection

String

Comparaison

Split

Path, FileName

StartsWith

EndsWith

Contains

Tableau / Array

Nombres

Variables

var vs let vs const

timeout, wait, sleep, pause

Objets

JSON

If Else

switch

For

Try - catch

Opérateurs

Types de données

Position de la sourie

Log

alert, prompt, confirm

Tester si Javascript est activé

Scope

Balise / Tag

Chargement d'un fichier Javascript depuis le code

Afficher du texte

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

Attributs d'une balise

Le contenu d'une balise

Modifier le style CSS

Ajouter une nouvelle balise

Remplacer une balise

Form / input

Focus

Exemples

Afficher la position de la sourie

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

Convention de codage

Bibliothèques

Menu de navigation

Rechercher

« Javascript » : différence entre les versions