Javascript

De Banane Atomic
Aller à la navigationAller à la recherche

Documentation

Evenements

Javascript.svg
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

Javascript.svg
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

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

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

Javascript.svg
if (s1 == s2)

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

Split

Javascript.svg
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

Javascript.svg
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

Javascript.svg
var objet_string = String(mon_objet);

StartsWith

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

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

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

Javascript.svg
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 + '?');
});

Dictionnaire / Map

Js.svg
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

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

Date

Js.svg
let today = new Date();

let lastMonth = new Date();
lastMonth = lastMonth.setMonth(lastMonth.getMonth() - 1);

const formattedDate = `${today.getFullYear()-today.getMonth()-today.getDay()}`;

moment.js

Js.svg
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

Javascript.svg
// 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é
Javascript.svg
// 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)

Js.svg
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

Javascript.svg
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

Js.svg
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

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

Javascript.svg
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.

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

Javascript.svg
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

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

Falsy values

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

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

For

Javascript.svg
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

Javascript.svg
try {
    throw 'Error message';
} catch (e) {
    alert(e);
}
catch possède toujours un argument.

Opérateurs

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

Javascript.svg
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

Javascript.svg
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

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

Console API

alert, prompt, confirm

Js.svg
// 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é

Html.svg
<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

Javascript.svg
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

Js.svg
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

Javascript.svg
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

Javascript.svg
document.write("<h1>HELLO</h1>");

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

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

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

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

Javascript.svg
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

Javascript.svg
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

Javascript.svg
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

Javascript.svg
balise_parent.replaceChild(nouvelle_balise, balise_à_remplacer);

Form / input

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

setCustomValidity

Focus

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

LINQ équivalent

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

Html.svg
<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

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

Convention de codage

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