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);
|
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);
|
|
|
// 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);
|
|
|
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");
// -1 if not found
// ajouter un élément
tableau.push("quatre");
// 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 + '?');
});
|
|
|
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;
|
|
|
let today = new Date();
let lastMonth = new Date();
lastMonth = lastMonth.setMonth(lastMonth.getMonth() - 1);
const formattedDate = `${today.getFullYear()-today.getMonth()-today.getDay()}`;
|
|
|
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
|
|
|
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
|
|
function maFonction(var1, var2, var3=30)
{
var x = 5 + var1 + var2 + var3;
return x;
}
var temp = maFonction(10, 20);
|
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);
|
|
|
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
|
 |
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
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 {
...
}
|
|
|
// 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. |
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() {
// ...
}
})();
|
|
|
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();
|
|
|
// filter is equivalent to Where
var itemsType1 = items.filter(item => item.type === 1);
// map is equivalent to Select
items.map(item => 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
