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énementdocument.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 mousemovedocument.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);
location = "http://domain.net";
// équivalent au clique sur un lienwindow.location.href = "http://domain.net";
// HTTP redirectwindow.location.replace("http://domain.net");
String
// concaténationvar concat = "string1" + "string2";
var interpolation = `variable = ${variable}`;
// multilignesvar multilignes = "ligne1\
ligne2";
var v = "0123465789";
// index of
v.indexOf("6"); // 6
v.indexOf("A")); // -1
v.lastIndexOf("6"); // 6// sous-stringvar v = v.slice(3, 7); // 3456var v = v.slice(3); // 3456789var v = v.slice(-3); // 789// replacevar v = v.replace("123", "xxx"); // 0xxx465789// replace regexvar v = v.replace(/1\d3/, "xxx"); // 0xxx465789// première lettre en majusculelet wordWithUpperCaseFirstLetter = word.charAt(0).toUpperCase() + word.slice(1);
var regex = newRegExp("expression");
var regex = /expression/;
if (regex.test("texte")) // test renvoie true si une correspondance a été trouvéevar result = regex.exec("texte");
// result = null si aucune correspondance n'est trouvéevar 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 ,
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);
// Méthode d'extension startsWith pour la classe Stringif (typeofString.prototype.startsWith != "function") {
String.prototype.startsWith = function (str){
returnthis.slice(0, str.length) == str;
};
}
var url = "https://www.truc.fr";
if (url.startsWith("https://")) { ... }
EndsWith
// Méthode d'extension endsWith pour la classe Stringif (typeofString.prototype.endsWith != "function") {
String.prototype.endsWith = function (str){
returnthis.slice(-str.length) == str;
};
}
var url = "https://www.truc.fr";
if (url.endsWith("fr")) { ... }
Contains
// Méthode d'extension contains pour la classe Stringif (typeofString.prototype.contains != "function") {
String.prototype.contains = function (str){
returnthis.indexOf(str) !== -1;
};
}
var url = "https://www.truc.fr";
if (url.contains("www")) { ... }
var tableau = ['un', 'deux', 'trois'];
var un = tableau[0];
// méthodesvar 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 tableauvar lastElement = tableau.pop(); // trois, ["un", "deux"]// extrait et retire le premier élément d'un tableauvar firstElement = tableau.shift(); // un, ["deux", "trois"]// extrait et retire le enième élément d'un tableauvar element = tableau.splice(1, 1); // deux, ["un", "trois"]// supprimer le premier élément correspondant à une valeurvar 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 elementif (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 valueMath.max.apply(null, tableau);
import * as moment from'moment';
var dateTime = newDate(); // datetime actuellevar momentObject = moment(dateTime); // Date → Momentvar dateTime = momentObject.toDate(); // Moment → Datevar stringObject = momentObject.format("YYYY-MM-DD HH:mm:ss"); // Moment → Stringvar momentObject = moment(stringObject); // String → Momentvar previousMonth = moment().subtract(1, 'months');
var firstDay = moment().startOf('month');
Variables
// déclaration avec assignationvar v = "variable";
// ré-assignation
v = "autre chose";
// test si une variable a été assignéeif(typeof(v) === "undefined") { /* Non assignée */}
// test si une variable a une truthy valueif (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éelet lll;
var vvv;
// dans une fonction var et let sont équivalent: ils ont la même portéefunctionma_fonction() {
let lll;
var vvv;
// dans un blockfor( let i = 0; i < 5; i++ ) {
// let n'est visible qu'à l'intérieur du blockfor( var i = 0; i < 5; i++ ) {
// var est visible à l'intérieur du block mais aussi à l'extérieur
var myPromise = function () {
returnnewPromise(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 à myPromisei est égal à 3. Solution: définir i avec let au lieu de var
Le scope de i se réduit donc à la boucle for
// wait 1000ms before starting my_functionsetTimeout(my_function, 1000);
// create a sleep functionfunctionsleep(ms) {
returnnewPromise(resolve =>setTimeout(resolve, ms));
}
// wait 1000ms before executing the next lineawaitsleep(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 objetif (typeof(objet.propriété) === 'undefined') { ... }
// lister les noms des propriétés et leurs valeursObject.keys(o);
Object.values(o);
functiongetClassName(obj) {
returnObject.prototype.toString.call(obj).slice(8, -1);
}
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 propertydelete jsonData['property'];
// 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) { ... }
for (var i=0; i<5; i++)
{
continue; // stop le traitement et passe directement à la valeur suivantebreak; // stop le traitement et sort de la boucle for
}
// assigne le première valeur vraie (qui n'est pas null, undefinied, 0, "", false) sinon la dernière valeur fausselet o = obj1 || obj2 || obj3;
// représentation booléenne d'obj: false si null, undefinied, 0, "", false sinon truelet 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 typeif (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
// affiche une fenêtre contenant un message et un bouton Okalert("Hello world!");
// affiche une fenêtre contenant un message, un champs de saisie et deux boutons Ok et Cancellet name = prompt("What's your name?");
// affiche une fenêtre contenant un message et deux boutons Ok et Cancelif (window.confirm("Continue?"))
<scripttype="text/javascript">
(function() {
// masque le message si javascript est activédocument.getElementById("error").css("display", "none");
})();
</script><pid="error">Il faut activer javascript pour naviguer sur ce site!</p>
Scope
var globalVariable;
functionglobalFunction() {
var localVar;
functionlocalFunction() {
// ...
}
}
// wrapper le code dans un méthode anonyme permet de le rendre privé (non-globale)
(function() {
var privateVar;
functionprivateFunction() {
// ...
}
})();
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);
document.write("<h1>HELLO</h1>");
// avec un retour à la lignedocument.write("<b>HELLO</b><br />");
Récupérer un élément du document
// idvar monElement = document.getElementById("ElementId");
// nom de balisevar mesElements = document.getElementsByTagName("div");
// name : <div name="xxx">yyy</div>var mesElements = document.getElementsByName("xxx");
// class namevar mesElements = document.getElementsByClassName("ccc");
// requête CSS// recherche la première balise tag de classe class descendant de l'élément idvar monElement = document.querySelector('#id tag.class');
// recherche toutes les balises tag de classe class descendant de l'élément idvar mesElements = document.querySelectorAll('#id tag.class');
for (var elt of mesElements) { ... } // fonctionne seulement avec Firefoxfor (i = 0; i < mesElements.length; ++i) {
mesElements[i]...
}
// afficher l'élémentalert(monElement.outerHTML);
// contenu texte de l'élément
monElement.textContent;
// accès au parent
monElement.parentNode;
// obtenir la valeur d'un attributvar 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 HTMLdocument.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 bodydocument.body.style.backgroundColor;
// la valeur calculée de background-color pour bodywindow.getComputedStyle(document.body).getPropertyValue("background-color");
// filter is equivalent to Wherevar 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 Allvar allAreType1 = items.every(item => item.type === 1);
// some is equivalent to Anyvar 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 : <divid=posX>0</div><br>
Y : <divid=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: pascalCasevar maVariable;
// fonctions: CamelCaseMaFonction: function() { }
// classes: CamelCaseMaClasse.prototype = { }
// méthodes: pascalCaseMaClasse.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 majusculeconstMA_CONSTANTE = 1;