2APartProx

Vous affichez une ancienne révision du document ! Si vous l'enregistrez, vous créerez une nouvelle version avec ce contenu.

======= JavaScript =======
Lien source: https://developer.mozilla.org/fr/docs/web/javascript/data_structures
====== Synthèse de début ======

Le chargement d'un fichier javaScript dans une page web:

<code html [enable_line_numbers="true"]> <script src="./script.js"> </script> </code>
===== Variable =====

== Déclaration, type et fonction ==

<code JavaScript [enable_line_numbers="true"]>
let nomberOfCats = 2; // Premiere méthode, variable local dont la porté est le bloc. au dela elle est détruite
var nombreOfCats = 2; // Deuxième méthode, variable local dont la porté est la fonction.
const nombreOfCats = 2; //Déclaration d'une constante local
void <a href="javascript:void(maFonction())"> ... </a> // Ne retourne rien, déclaration obligatoire pour les pseudo url javascript: sinon l'instruction retourne une valeur qui remplace la page en question.
with(navigator) //Permet de simplifier la référence aux propriétés et méthodes des objets en précédant un bloc d'instruction dans lequel un objet devient implicite.
{
     alert(appName + " " + appVersion);
} // équivalent à :
alert(navigator.appName + " " +navigator.appVersion); 
function ma_fonction()
{
    alert("Je suis exécuté dans ma_fonction");
}
</code>
=== Type de variable et objet pédéfinis ===
  *int
  *float
  *String
  *char
  *boolean
  *Object
  *[[JavaScript#window|Window]]
  *[[JavaScript#document|document]]
  *[[JavaScript#navigator|navigator]]
  *[[JavaScript#Array|Array (tableaux)]]
  *[[JavaScript#Date|Date]]
  *[[JavaScript#Erro|Error]]
  *[[JavaScript#Function|Function]]
  *[[JavaScript#Image|Image]]
  *[[JavaScript#Math|Math]]
  *[[JavaScript#Number|Number]]
  *RegExp

=== window ===
== Propriété ==

* '''closed ''' 
fenêtre fermée
  * '''defaultStatus ''' 
affichage normal dans la barre d'état
  * '''innerHeight ''' 
hauteur du domaine d'affichage
  * '''innerWidth ''' 
largeur du domaine d'affichage
  * '''locationbar ''' 
barre d'adresse 
  * '''menubar ''' 
barre de menus
  * '''name ''' 
nom de fenêtre
  * '''outerHeight ''' 
hauteur de la fenêtre globale
  * '''outerWidth ''' 
largeur de la fenêtre globale
  * '''pageXOffset ''' 
position de départ de la fenêtre à partir de la gauche
  * '''pageYOffset ''' 
position de départ de la fenêtre à partir du haut
  * '''personalbar ''' 
barre pour les adresses favorites
  * '''scrollbars ''' 
barres de défilement
  * '''statusbar ''' 
barre d'état
  * '''status ''' 
Contenu de la barre d'état
  * '''toolbar ''' 
barre d'outils

== Méthodes ==

* '''alert()'''
boite de dialogue avec infos
  * '''back()'''
page précédente
  * '''blur()''' 
quitter la fenêtre
  * '''captureEvents()''' 
surveiller les événements
  * '''clearInterval()''' 
interrompre la suite d'instructions sans fin
  * '''clearTimeout()'''
interrompre le compte à rebours
  * '''close()'''
fermer la fenêtre
  * '''confirm()'''
boite de dialogue pour confirmer
  * '''disableExternalCapture()'''
empêcher une surveillance extérieure
  * '''enableExternalCapture()'''
permettre une surveillance extérieure
  * '''find()'''
chercher du texte
  * '''focus()'''
activer la fenêtre
  * '''forward()'''
page suivante
  * '''handleEvent()'''
renvoyer l'événement
  * '''home()'''
appeler la page d'accueil
  * '''moveBy()'''
se mouvoir avec des mentions relatives
  * '''moveTo()'''
se mouvoir avec des mentions absolues
  * '''open()'''
ouvrir une nouvelle fenêtre
  * '''print()'''
imprimer
  * '''prompt()'''
fenêtre de dialogue pour la saisie de valeur
  * '''releaseEvents()'''
fermer un événement
  * '''resizeBy()'''
modifier la taille avec des mentions relatives
  * '''resizeTo()'''
modifier la taille avec des mentions absolues
  * '''routeEvent()'''
parcourir la hiérarchie des gestionnaires d'événement
  * '''scrollBy()'''
défiler un certain nombre de pixels
  * '''scrollTo()'''
défiler jusqu'à la position
  * '''setInterval()'''
établir une liste d'instructions planifiées
  * '''setTimeout()'''
entamer le compte à rebours
  * '''stop()'''
interrompre

=== document ===

== Propriétés ==

* '''alinkColor ''' 
couleur des liens lorsqu'ils sont cliqués 
  * '''bgColor ''' 
couleur d'arrière plan 
  * '''charset ''' 
jeu de caractères utilisés 
  * '''cookie ''' 
chaîne de caractères pouvant être sauvegardée chez l'utilisateur 
  * '''defaultCharset '''
jeu de caractères normal 
  * '''fgColor ''' 
couleur pour le texte 
  * '''lastModified ''' 
dernière modification du document 
  * '''linkColor ''' 
couleur pour les liens 
  * '''referrer ''' 
pages déjà visitées 
  * '''title ''' 
titre du fichier 
  * '''URL ''' 
adresse URL du fichier 
  * '''vlinkColor ''' 
couleur pour les liens à des cibles visitées

== Méthodes ==

* '''captureEvents()'''  
surveiller les événements 
  * '''close()''' 
fermer 
  * '''createAttribute()'''  
créer un nœud d'attributs 
  * '''createElement()'''  
créer un nœud d'éléments 
  * '''createTextNode()''' 
créer un nœud de texte 
  * '''getElementById()'''  
Accès à l'élément HTML par l'attribut Id 
  * '''getElementsByName()'''  
Accès à l'élément HTML par l'attribut name 
  * '''getElementsByTagName()'''  
Accès à l'élément HTML par liste d'éléments 
  * '''getSelection()'''  
texte sélectionné 
  * '''handleEvent()'''  
traiter les événements 
  * '''open()''' 
ouvrir le document 
  * '''releaseEvents()'''  
fermer des événements 
  * '''routeEvent()'''  
parcourir la hiérarchie des gestionnaires d'événement 
  * '''write()''' 
écrire dans la fenêtre du document 
  * '''writeln()'''  
écrire ligne par ligne

=== navigator ===
== Propriétés ==

*'''appCodeName'''
surnom du navigateur
  *'''appName'''
nom officiel du navigateur
  *'''appVersion'''
version du navigateur
  *'''cookieEnabled'''
Cookies permis
  *'''language'''
langue du navigateur
  *'''platform'''
plate-forme sur laquelle tourne le navigateur
  *'''userAgent'''
identification HTTP du navigateur

== Méthodes ==

*'''javaEnabled()'''
vérifier la disponibilité Java

=== Array ===

== Propriétés ==
  *'''length()'''
retourne la taille du tableau (entier)

== Methodes ==
Modification du contenu

^ Méthode ^ Description ^ Exemple                ^

| Création| Génère un tableau | <code JavaScript [enable_line_numbers="true"]> let monTableau = []; </code> |
| pop()   | Supprime et retourne le dernier élément | <code JavaScript [enable_line_numbers="true"]> mon_tableau.pop() </code> |
| push()  | Ajoute un ou plusieurs éléments à la fin | <code JavaScript [enable_line_numbers="true"]> mon_tableau.push("nouveau","deuxième nouveau") </code> |
| shift()  | Supprime le premier élément | <code JavaScript [enable_line_numbers="true"]> mon_tableau.shift() </code> |
| unshift()  | Ajoute des éléments au début | <code JavaScript [enable_line_numbers="true"]> mon_tableau.unshift("nouveau1","nouveau2") </code> |
| splice()  | Insère des éléments | <code JavaScript [enable_line_numbers="true"]> mon_tableau.splice(ou, 2,"nouveau1","nouveau2") </code> |
| reverse()  | Réorganise le tableau de la fin ver le début | <code JavaScript [enable_line_numbers="true"]> mon_tableau.reverse() </code> |
| concat()  | Concaténer plusieurs tableaux | <code JavaScript [enable_line_numbers="true"]> mon_tableau.concat(tableau1,tableau2) </code> |

Obtenir des données
| join()  | Extrait les données dans une chaîne avec le délimiteur donné en paramètre | <code JavaScript [enable_line_numbers="true"]> mon_tableau.join(" ") </code> |
| slice()  | Renvoie un tableau contenant 'nombre' cellules à partir de 'début' | <code JavaScript [enable_line_numbers="true"]> mon_tableau.slice(debut,nombre) </code> |

Trier
| sort()  | Trier le tableau | <code JavaScript [enable_line_numbers="true"]> mon_tableau.sort() </code> |

Méthodes héritées
| toString()  | Renvoyer le contenu de l'objet sous forme de chaîne | <code JavaScript [enable_line_numbers="true"]> s = mon_tableau.toString() </code> |
| toLocaleSting()  | Renvoyer le contenu de l'objet sous forme de chaîne | <code JavaScript [enable_line_numbers="true"]> s= mon_tableau.toLocaleString() </code> |

Manipulation:
  *Instanciation:
<code JavaScript [enable_line_numbers="true"]>
mon_tableau = new Array(); // Simple et direct
mon_tableau = new Array(10); // Imposition de dix cases vides, (de 0 à 9) length vaut 10
// Note : rien n'empèche immédiatement après de faire mon_tableau[11] (dynamisme)

mon_tableau = new Array("Elément 1", "Elément 2"); // Remplissage à la déclaration.
</code>
  *Adressage d'un élément
<code JavaScript [enable_line_numbers="true"]>
t = new Array(null,null,null,"Contenu de trois"); // Création avec 4 éléments
t["nom"] = "contenu de 'nom'";
alert(t[0]); // Affiche 'null'
alert(t[3]); // Affiche "Contenu de trois";
alert(t["nom"]); // Affiche "contenu de 'nom'"
alert(t[4]); // Affiche "undefined"
</pre>

=== Lecture de la propriété length ===
<code JavaScript [enable_line_numbers="true"]>
t = new Array(null,null,null,"Contenu de trois"); // Création avec 4 éléments

var nb_elements = t.length; // Lecture de length dans une variable

alert("Le tableau a " + t.length + " éléments"); // Affiche "le tableau a 4 éléments"

for(i = 0; i < t.length; i++)
    alert("contenu de : " + i + t[i]);
// Affiche "null", puis "null", "null" et "Contenu de trois"
</code>

* Utilisation d'une méthode:
<code JavaScript [enable_line_numbers="true"]>
t = new Array("Premier","Deuxieme","Troisieme");
t.sort(); // Invocation de la méthode sort()
alert(t); // Affiche "Deuxieme,Premier,Troisieme", soit le contenu par ordre alphabétique
</code>

=== Date ===
== Méthode ==
  * '''getDate()'''
renvoie le jour du mois
  * '''getDay()'''
renvoie le jour de la semaine
  * '''getFullYear()'''
renvoie l'année complète
  * '''getHours()'''
renvoie la partie heures de l'heure
  * '''getMilliseconds()'''
renvoie les millièmes de secondes
  * '''getMinutes()'''
renvoie la partie minutes de l'heure
  * '''getMonth()'''
renvoie le mois
  * '''getSeconds()'''
renvoie la partie secondes de l'heure
  * '''getTime()'''
renvoie l'heure
  * '''getTimezoneOffset()'''
renvoie le décalage horaire de l'heure locale
  * '''getUTCDate()'''
renvoie le jour du mois de l'heure UTC ({{w|temps universel coordonné}})
  * '''getUTCDay()'''
renvoie le jour de la semaine de l'heure UTC
  * '''getUTCFullYear()'''
renvoie l'année complète de l'heure UTC
  * '''getUTCHours()'''
renvoie la partie heures de l'heure UTC
  * '''getUTCMilliseconds()'''
renvoie les millièmes de secondes de l'heure UTC
  * '''getUTCMinutes()'''
renvoie la partie minutes de l'heure UTC
  * '''getUTCMonth()'''
renvoie le mois de l'heure UTC
  * '''getUTCSeconds()'''
renvoie la partie secondes de l'heure UTC
  * '''getYear()'''
renvoie l'année
  * '''parse()'''
renvoie le nombre de millièmes de secondes depuis le 1/1/1970
  * '''setDate()'''
change le jour du mois de l'objet
  * '''setFullYear()'''
change l'année complète de l'objet
  * '''setHours()'''
change la partie heures de l'heure de l'objet
  * '''setMilliseconds()'''
change la partie millièmes de seconde de l'heure de l'objet
  * '''setMinutes()'''
change la partie minutes de l'heure de l'objet
  * '''setMonth()'''
change la partie mois de la date de l'objet
  * '''setSeconds()'''
change la partie secondes de l'heure de l'objet
  * '''setTime()'''
change la date et l'heure de l'objet
  * '''setUTCDate()'''
change le jour du mois de l'heure UTC de l'objet
  * '''setUTCDay()'''
change le jour de la semaine de l'heure UTC de l'objet
  * '''setUTCFullYear()'''
change l'année complète de l'heure UTC de l'objet
  * '''setUTCHours()'''
change la partie heures de l'heure UTC de l'objet
  * '''setUTCMilliseconds()'''
change la partie millièmes de seconde de l'heure UTC de l'objet
  * '''setUTCMinutes()'''
change la partie minutes de l'heure UTC de l'objet
  * '''setUTCMonth()'''
change le mois de l'heure UTC de l'objet
  * '''setUTCSeconds()'''
change la partie secondes de l'heure UTC de l'objet
  * '''setYear()'''
change la date et l'heure de l'objet
  * '''toGMTString()'''
convertir la date et l'heure au format GMT
  * '''toLocaleString()'''
convertir la date et l'heure au format local
  * '''UTC()''' 
renvoie le nombre de millièmes de secondes entre le 1/1/1970 et un moment donné

=== Error ===
Les exceptions renvoient des objets de type Error, ou qui en héritent.

<code JavaScript [enable_line_numbers="true"]>
var myError = new Error('Message');
</code>

=== Function ===
== Propriétés ==
  * **arguments**
tableau de noms d'arguments
  * **arity**
nombre d'arguments
  * **caller**
nom de la fonction qui appelle

=== Image ===
== Propriétés ==

== Méthode ==

=== Math ===
== Propriétés ==
  * '''E''' 
constante d'Euler
  * '''LN2''' 
logarithme naturel de 2
  * '''LN10''' 
logarithme naturel de 10
  * '''LOG2E''' 
logarithme constant de 2
  * '''LOG10E''' 
logarithme constant de 10
  * '''PI''' 
constante PI
  * '''SQRT1_2''' 
constante pour racine carrée de 0,5
  * '''SQRT2''' 
constante pour racine carrée de 2

== Méthode ==

* '''abs()''' 
valeur positive
  * '''acos()''' 
arc cosinus
  * '''asin()''' 
arc sinus
  * '''atan()''' 
arc tangente
  * '''ceil()''' 
nombre entier supérieur le plus proche
  * '''cos()''' 
cosinus
  * '''exp()''' 
valeur exponentielle
  * '''floor()''' 
nombre entier inférieur le plus proche
  * '''log()''' 
utilisation du logarithme naturel
  * '''max()''' 
le plus grand de deux chiffres
  * '''min()''' 
le plus petit de deux chiffres
  * '''pow()''' 
nombre puissance exposant
  * '''random()''' 
0 ou 1 aléatoire
  * '''round()''' 
arrondi commercial d'un nombre
  * '''sin()''' 
sinus
  * '''sqrt()''' 
racine carrée
  * '''tan()''' 
tangente

=== Number ===
== Propriétés ==
  *'''MAX_VALUE'''
plus grand nombre pouvant être sauvegardé
  *'''MIN_VALUE'''
plus petit nombre pouvant être sauvegardé
  *'''NaN'''
nombre non valable
  *'''NEGATIVE_INFINITY'''
nombre trop petit
  *'''POSITIVE_INFINITY'''
nombre trop grand

== Méthode ==
  *'''toExponential()'''

*'''toFixed()'''

*'''toPrecision()'''

*'''toString()'''

=== Opérateurs arithmétiques ===

== Addition et soustraction ==

<code JavaScript [enable_line_numbers="true"]>
let totalCDs = 67;
let totalVinyls = 34;
let totalMusic = totalCDs + totalVinyls;
</code>
<code JavaScript [enable_line_numbers="true"]>
let cookiesInJar = 10;
let cookiesRemoved = 2;
let cookiesLeftInJar = cookiesInJar - cookiesRemoved;
</code>
<code JavaScript [enable_line_numbers="true"]>
let cookiesInJar = 10;
/* manger deux cookies */
cookiesInJar -= 2;  //il reste 8 cookies
/* cuisson d'un nouveau lot de cookies */
cookiesInJar += 12; // il y a maintenant 20 cookies dans la boîte
</code>
<code JavaScript [enable_line_numbers="true"]>
let numberOfLikes = 10;
numberOfLikes++;  // cela fait 11
numberOfLikes--; // et on revient à 10...qui n'a pas aimé mon article ?
</code>
== Multiplication et division ==
<code JavaScript [enable_line_numbers="true"]>
let costPerProduct = 20;
let numberOfProducts = 5;
let totalCost = costPerProduct * numberOfProducts;
let averageCostPerProduct = totalCost / numberOfProducts;
</code>

<code JavaScript [enable_line_numbers="true"]>
let numberOfCats = 2;
numberOfCats *= 6;  // numberOfCats vaut maintenant 2*6 = 12;
numberOfCats /= 3;  // numberOfCats vaut maintenant 12/3 = 4;
</code>

== Mutabilité des variables ==
Les variables sont soit mutable, c'est a dire que l'on peut modifier leur affectation, soit Constante, une fois initialisé elle ne peuvent plus être modifier.

<code JavaScript [enable_line_numbers="true"]>
const nombrePostParPage = 20;
nombrePostParPage = 30; // Retournera une erreur dans la console car on ne peut plus changer sa valeur
</code>

===== Structure de contrôle =====
=== Return ===
Employé dans une fonction, provoque le retour au programme appelant avec renvoi facultatif d'un résultat. 
<code JavaScript [enable_line_numbers="true"]>
function ma_fonction(aparam)
{
    s = "";
    if (aparam == "")
        return;    // Sortie sans renvoyer de résultat
        else
            s = "Le résultat";
    return s;      // Renvoie le contenu de s
}
</code>
=== if ===
Permet de définir l'exécution conditionnelle d'instructions ou d'un bloc d'instructions. Peut-être utilisé conjointement à else.
<code JavaScript [enable_line_numbers="true"]>
a = 5;
if (a==5)
     alert("la condition est remplie");
</code>
=== else ===
Utilisé conjointement à if, permet d'exécuter des instructions alternativement au résultat de la condition spécifiée par if. 
<code JavaScript [enable_line_numbers="true"]>
a = 5
if (a==5)
     alert("a est égal à 5");
else
     alert("a est différent de 5");
</code>
=== switch ===
Utilisé conjointement à case, permet d'implanter un sélecteur de cas
<code JavaScript [enable_line_numbers="true"]>
function test(condition)
{
     switch(condition)
     {
          case "1":
               alert("condition='1'");
          break;
          case "3":
               alert("condition='3'");
          break;
          case "5":
               alert("condition='5'");
          break;
     }
}
</code>
=== case ===
Utilisé à l'intérieur d'un bloc switch, constitue un des choix du selecteur. 
=== break===
Utilisé à l'intérieur d'un bloc switch, permet de sortir du sélecteur sans procéder tests suivants. Utilisé à l'intérieur d'une boucle telle un bloc switch, permet de quitter la boucle immédiatement. 
=== default ===
Utilisé à l'intérieur d'un bloc switch, constitue l'option par défaut du sélecteur. 
=== for ===
Introduit une boucle itérative deterministe.
<code JavaScript [enable_line_numbers="true"]>
for (i=0;i<5;i++)
{
     alert(i);
}
</code>
For each : "for ...in ..." ou "for ... of ..."
<code JavaScript [enable_line_numbers="true"]>
var array = [1, 2, 3];
for (line in array)
{
     alert(line);
}

for(i in array)
{
     console.log(array[i].toString();
}

for(arrayItem of array)
{
     console.log(arrayItem);
}
</code>
En tableau associatif : 
<code JavaScript [enable_line_numbers="true"]>
var array =  { "a" : 1, "b" : 2, "c": 3 };
for (line in array)
{
     alert('Clé : ' + line + ', valeur : ' + array[line]);
}
</code>

=== do ===
Introduit une boucle itérative indeterministe conditionnelle avec test effectué à chaque tour par "while" : 
<code JavaScript [enable_line_numbers="true"]>
i=0
do
{
     i++
     alert(i);    // Affichera 1, puis 2, puis 3, puis 4, puis 5
}
while(i<5);
</code>

=== while ===
Introduit une boucle itérative indeterministe conditionnelle:
<code JavaScript [enable_line_numbers="true"]>
i=0
while(i<5)
{
     i++;        // Incrémenter i
     alert(i);   // Affiche 1, puis 2, puis 3, puis 4, puis 5
}
</code>

=== continue ===
Utilisé dans une boucle "for", "while" et "do", permet de sauter un tour. 
<code JavaScript [enable_line_numbers="true"]>
for (i=-2;i<=2;i++)
{
	if (i==0) continue; // Si i == 0, on passe directement à 1
	alert(5/i); // On évite ainsi la division par zéro.
}
</code>

===== Gestion des erreurs =====

=== throw ===
Provoque une erreur personnalisée. 
<code JavaScript [enable_line_numbers="true"]>
throw new Error("votre erreur");// a le même effet visuel que alert("votre erreur");
</code>

=== try ... catch ... finally ===
Évalue un bloc (try) en capturant les erreurs, tente de les gérer (catch) si elles se produisent, et quoiqu'il arrive, évalue un dernier bloc (finally).

===== Opérateur =====
=== in ===
Opérateur qui détermine l'appartenance à un objet. Dans une boucle for... in, permet de répéter des instructions pour chaque propriété d'un objet. 
=== new ===
Opérateur qui permet l'instanciation d'un objet. 
<code JavaScript [enable_line_numbers="true"]>
var mon_tableau = new Array();
</code>

=== instanceof ===
Cet opérateur permet de tester si une valeur est une instance d'un objet : 
<code JavaScript [enable_line_numbers="true"]>
t = new Array();
alert(t instanceof Array); // Affiche true
alert(t instanceof Date); // Affiche false
</code>

=== typeof ===
Cet opérateur renvoie le type de la variable placée à droite.
Les valeurs renvoyées par typeof correspondent aux types de variables JavaScript, soit : boolean string number function object undefined.

=== delete ===
Cet opérateur permet de supprimer une propriété.

===== Valeurs spéciales =====
=== this ===
Dans le constructeur ou une méthode d'un objet, c'est une référence à l'objet. Hors de ce contexte, this référence l'objet global window. 
=== true ===
Valeur booléenne "vrai". 
<code JavaScript [enable_line_numbers="true"]>
if (true)
{
     alert("Je m'affiche toujours");
}
</code>

=== false ===
Valeur booléenne "faux".
<code JavaScript [enable_line_numbers="true"]>
if (true)
{
     if (ma_bool == false)
     alert("C'est pas vrai...")
}
</code>

=== null ===
Valeur de type "object" qui ne référence rien.

=== undefined ===
C'est la valeur de toutes les variables inexistantes ou supprimées.

===== Fonctions prédéfinies =====
  * decodeURL()
    * décode une url codée
  * decodeURLComponent()
    * décode une URl codée - II
  * encodeURL()
    * coder une URL
  * encodeURLComponent()
    * code une URL - II
  * eval()
    * transforme une expression
  * escape()
    * transforme des signes ASCII en nombres
  * isFinite()
    * vérifie le domaine numérique de valeurs
  * isNaN()
    * vérifie si la valeur n'est pas un nombre
  * parseFloat()
    * transform en nombre avec décimales
  * parseInt()
    * transform en nombre entier
  * Number()
    * transforme un objet en nombre
  * String()
    * transforme le contenu d'un objet en une chaine de caractères
  * unescape()
    * transforme des nombres en caractères ASCII
===== Programmation avancée =====

=== Paradigme de programmation classe/objet ===

Premier exemple:
<code JavaScript [enable_line_numbers="true"]>
/**
 * Modélisation d'une voiture
 *
 * @class Voiture
 */
var Voiture = (function () {
    //'use strict';

Voiture.couleur = "verte";
    // methode de classe
    Voiture.construire = function (marque) {
        return new Voiture(marque);
    };

// constructeur
    function Voiture(marque) {
        this.marque = marque;
    }

// méthodes d'instance
    Voiture.prototype = {
        
        rouler: function (direction) {
            document.write("la voiture roule");
        },
        getMarque: function (){
        	return this.marque;
        }
    };
    
    return Voiture;
    
}());

// ->
var saab = new Voiture('Saab');
var chrysler = Voiture.construire('Chrysler');
chrysler.rouler();
alert(saab.getMarque());
</code>
Deuxième exemple:
<code JavaScript [enable_line_numbers="true"]>
var article = new Object();
article.nom = "Livre";
article.prix_unitaire = 21.99;
article.quantite = 2;
</code>
Variante:
<code JavaScript [enable_line_numbers="true"]>
function Article(nom, prix_unitaire, quantite)
{
    this.nom = nom;
    this.prix_unitaire = prix_unitaire;
    this.quantite = quantite;
    this.resume = function(){
        return this.nom+" x "+this.quantite+" à "+this.prix_unitaire+
           " l'unité coûte(nt) "+( this.quantite*this.prix_unitaire );
    }
    return this;
}
var article = new Article( "Livre", 21.99, 2);
</code>
Troisième exemple:
<code JavaScript [enable_line_numbers="true"]>
var article = {
    "nom" : "Livre",
    "prix_unitaire" : 21.99,
    "quantite" : 2,
    "resume" : function(){
        return this.nom+" x "+this.quantite+" à "+this.prix_unitaire+
           " l'unité coûte(nt) "+( this.quantite*this.prix_unitaire );
    }
};
</code>
Quatrième exemple avec Imbrications:
<code JavaScript [enable_line_numbers="true"]>
var commandes = [
    { "client": "Jean",
      "articles": [ 
           { "nom": "Livre", "quantite": 2, "prix_unitaire": 21.99 } ,
           { "nom": "Stylo", "quantite": 4, "prix_unitaire": 0.79 }
      ],
      "mode_paiement": "chèque"
    },
    { "client": "Pierre",
      "articles": [ 
           { "nom": "Livre", "quantite": 1, "prix_unitaire": 21.99 } ,
           { "nom": "Trombones", "quantite": 50, "prix_unitaire": 0.05 }
      ],
      "mode_paiement": "espèces"
    }
];
</code>

Création d'une classe:
<code JavaScript [enable_line_numbers="true"]>
class Book {
  constructor(title, author, pages){
    this.title = title;
    this.author = author;
    this.pages = pages;
  }
} //création de la classe avec son constructeur.

var myBook = new Book("l'Histoire de Tao", "Will Alexander", 250);
// instanciation d'un objet book par le constructeur.
</code>

=== Methode de classe ===

Comme en Java classique: les méthodes créer dans une classe sont accessible depuis n'importe quel objet instancier de cette classe.
<code JavaScript [enable_line_numbers="true"]>
class BankAccount {
   constructor(owner, balance) {
      this.owner = owner;
      this.balance = balance;
   }
   //Ici création de la méthode dite d'instance.
   showBalance() {
      console.log("Solde: " + this.balance + " EUR");
   }
}
const newAccount = new BankAccount("Will Alexander", 500); //Instanciation d'un objet de la classe BankAccount.
newAccount.showBalance(); // Invocation de la méthode instance, imprime "Solde: 500 EUR" à la console.
</code>
Il y a également les méthode Static, invocable depuis l'évocation de la classe elle même sans avoir à l'instancier.
<code JavaScript [enable_line_numbers="true"]>
class BePolite {
    
    static sayHello() {
        console.log("Hello!");
    }
    
    static sayHelloTo(name) {
        console.log("Hello " + name + "!");
    }
    
    static add(firstNumber, secondNumber) {
        return firstNumber + secondNumber;
    }
}

BePolite.sayHello(); // imprime "Hello!""

BePolite.sayHelloTo("Will"); // imprime "Hello Will!""

const sum = BePolite.add(2, 3); // sum = 5
</code>

===== Frameworks =====
==== Visual Studio Code ====
==== Dojo ====
==== jQuery====
==== Node.js====
==== React.js====

===== Développement Web avec js =====

==== DOM ====

Le DOM: Document Object Model est une interface de programmation qui est une représentation du HTML d'une page web et qui permet d'accéder aux éléments de cette page web et de les modifier avec le langage JavaScript.
Il faut voir le DOM comme un arbre ou chaque éléments peut avoir zero ou plusieurs enfants:

==== Le document et accès à ses éléments ====

Le document est l'objet réprésentant notre page, auquel on a directement acces avec JavaScript il est le point de départ du DOM.

Principales fonctions de recherche d'éléments du DOM:
<code> document.getElementByld() </code>
Recherche un élément grâce à son " id ". On rappel qu'il n'y a qu'un seul élément avec un " id " donné.
Exemple:
Si on a dans notre page HTML la l'élément suivant:
<code html [enable_line_numbers="true"]> <p id="my-anchor"> My content </p> </code>
On aura pour accéder à cet élément avec js:
<code JavaScript [enable_line_numbers="true"]> const myAnchor = document.getElementById('My-anchor'); </code>
<code> document.getElementsByClassName() </code>
Recherche un élément grâce à sa " Classe ". On rappel qu'il peut y avoir plusieurs éléments avec un " nom de classe " donné. Il renverra la liste des éléments des cette classe.
Exemple:
Si on a dans notre page HTML la l'élément suivant:
<code html [enable_line_numbers="true"]><div> 
<div class="content"> Contenu 1 </div> 
<div class="content"> Contenu 2 </div> 
<div class="content"> Contenu 3 </div> 
</div> 
</code>
On aura pour accéder à cet élément avec js:
<code JavaScript [enable_line_numbers="true"]> const contents = document.getElementsByClassName('content');
const firstContent = contents[0];
</code>

<code> document.getElementsByTagName() </code>
Recherche un élément grâce à son " Tag name " soit son " nom de balise " donné. Il renverra la liste des éléments correspondants.
Exemple:
Si on a dans notre page HTML la l'élément suivant:
<code html [enable_line_numbers="true"]><div> 
<aritcle> Contenu 1 </aritcle> 
<aritcle> Contenu 2 </aritcle> 
<aritcle> Contenu 3 </aritcle> 
</div> 
</code>
On aura pour accéder à cet élément avec js:
<code JavaScript [enable_line_numbers="true"]> const articles= document.getElementsByTagName('article');
const thirdArticle = contents[2];
</code>

<code> document.querySelector() </code>
Recherche un élément grâce à un selecteur qui permet de cibler certains éléments.
Exemple: 
<code JavaScript [enable_line_numbers="true"]> document.querySelector("#myId p.article > a") </code>
fera une recherche dans l'élément ayant pour id = "#myId", mes éléments de type <p> qui ont pour classe article, afin de récupérer le lien <a> qui est un enfant direct (pas des enfants de ses enfants).
Si on a dans notre page HTML la l'élément suivant:
<code html [enable_line_numbers="true"]><div id="myId">
    <p>
        <span><a href="#">Lien 1</a></span>
        <a href="#">Lien 2</a>
        <span><a href="#">Lien 3</a></span>
    </p>
    <p class="article">
        <span><a href="#">Lien 4</a></span>
        <span><a href="#">Lien 5</a></span>
        <a href="#">Lien 6</a>
    </p>
    <p>
        <a href="#">Lien 7</a>
        <span><a href="#">Lien 8</a></span>
        <span><a href="#">Lien 9</a></span>
    </p>
</div>

</code>
On aura pour accéder à cet élément avec js:
<code JavaScript [enable_line_numbers="true"]> const elt = document.querySelector("#myId p.article > a");
</code>
Nous retournera uniquement Lien 6.

<code JavaScript [enable_line_numbers="true"]> querySelector(<selector>)</code>
Ne revoie pas de liste de résultats, mais le premier élément qui correspond à la recherche.

<code JavaScript [enable_line_numbers="true"]> querySelectorAll(<selector>)</code>
Revoie une liste de résultats correspondant au "Selector" passé en paramètre.

<code JavaScript [enable_line_numbers="true"]> element.children </code>
Renvoi la liste des enfants de cet élément.

<code JavaScript [enable_line_numbers="true"]> element.parentElement </code>
Renvoi LE parents de cet élément.

<code JavaScript [enable_line_numbers="true"]> element.nextElementSibling </code>
<code JavaScript [enable_line_numbers="true"]> element.previousElementSibling </code>
Ces propriétés nous permettent de naviguer vers l'élément suivant / précédent de même niveau que notre élément.

Si on a dans notre page HTML la l'élément suivant:
<code html [enable_line_numbers="true"]><div id="parent">
    <div id="previous">Précédent</div>
    <div id="main">
        <p>Paragraphe 1</p>
        <p>Paragraphe 2</p>
    </div>
    <div id="next">Suivant</div>
</div>

</code>
On aura pour accéder à cet élément avec js:
<code JavaScript [enable_line_numbers="true"]> const elt = document.getElementById('main'); </code>
Nous aurons ceci:
  * <code> elt.children</code> nous retournera les éléments de type "p" qui sont les enfants de l'élément "#main" .</code>
  * <code> elt.parentElement</code> nous retournera la "div" qui à l'id "parent". </code>
  * <code> elt.nextElementSibling </code> Nous retournera l'élément qui à l'"id" "next" </code>
  * <code> elt.previousElementSibling </code> nous retournera l'élément qui à l'id "previous.

==== Modifier le contenu d'un élément ====

Pour modifier le contenue d'un élément: deux fonction principale.
  * <code> innerHTML </code>
  * <code> textContent </code>
Attention ces deux fonction remplace directement le contenu actuel de l'élément par celui que vous précisez.

=== innerHTML ===

innerHTML demande à ce que vous entriez du texte représentant un contenu HTML:
Exemple:
<code JavaScript [enable_line_numbers="true"]> let element = document.getElementById('main');
element.innerHTML = "<ul><li> Elément 1</li><li>Elément 2</li></ul>"; </code>

L'élément qui à l'id 'main' aura un nouveau contenu: le HTML deviendra donc:
<code html[enable_line_numbers="true"]> <div id="main">
    <ul>
        <li>Elément 1</li>
        <li>Elément 2</li>
    </ul>
</div> </code>

=== textContent ===
textContent , quant à elle, demande un simple texte qui ne sera pas interprété comme étant du HTML, le texte prendra la place du contenue de l'élément tel quel sans mise en forme.

=== Modifier des classes ===
Il est possible d'accéder directement à la liste des classes d'un élément avec la propriété:
<code> classList </code>
Cette propriété fournit aussi une série de fonctions permettant de modifier cette liste de classes. En voici quelques-unes:
  * <code> add(<string>, [<string>,...]) </code> ajoute la ou les classes spécifiées.
  * <code> remove(<string>, [<string>,...] </code> supprime la ou les classes spécifiées.
  * <code> contains(<string>) </code> vérifie si la classe spécifiée est contenue par cet élément.
  * <code> replace (<old>, <new>) </code> remplace l'ancienne classe par la nouvelle classe.

Exemple:
<code javascript [enable_line_numbers="true"]>
element.classList.add("nouvelleClasse");    // Ajoute la classe nouvelleClasse à l'élément
element.classList.remove("nouvelleClasse"); // Supprime la classe nouvelleClasse que l'on venait d'ajouter
element.classList.contains("nouvelleClasse");   // Retournera false car on vient de la supprimer
element.classList.replace("oldClass", "newClass"): // Remplacera oldClass par newClass si oldClass était présente sur l'élément
</code>
=== Changer les styles d'un élément ===

Avec la propriété <code>style</code>, on peut récupérer et modifier les différents styles d'un élément.
style est un objet qui a une propriété pour chaque style existant.
Exemple:
<code javascript [enable_line_numbers="true"]>
element.style.color = "#fff";      // Change la couleur du texte de l'élément à blanche
element.style.backgroundColor = "#000"; // Change la couleur de fond de l'élément en noir
element.style.fontWeight = "bold"; // Met le texte de l'élément en gras
</code>

==== Modifier les attributs ====

Pour définir ou remplacer les attributs d'un élément, vous pouvez utiliser la fonction <code> setAttribute </code>.

<code> element.setAttribute(<name>, <value>) </code> prend en paramètres le nom de l'attribut et sa valeur et ne retourne rien.
On peut également utiliser les fonctions:
<code> getAttribute</code>
<code> removeAttribute</code>
pour avoir accès à plus de contrôle sur les attributs.
Exemple:
<code javascript [enable_line_numbers="true"]>
element.setAttribute("type", "password");   // Change le type de l'input en un type password
element.setAttribute("name", "my-password");    // Change le nom de l'input en my-password
element.getAttribute("name");               // Retourne my-password
</code>
==== Créez de nouveaux éléments ====

=== Création d'un nouveau élément ===
C'est la fonction <code> document.createElement(<tag>) </code> qui va permettre de créez de nouveaux éléments puis nous l'insérerons dans le DOM.
<code> document.createElement(<tag>) </code> 
prend en paramètre le nom de la balise de notre élément et nous renvoie l'élément nouvellement créé.

<code javascript [enable_line_numbers="true"]>
const newElement = document.createElement("div");
</code>

Un élément créé avec cette fonction ne fait pas encore partie du document, vous ne le verrez donc pas sur votre page. Pour le voir, il va d'abord falloir l'ajouter en tant qu'enfant à un élément.

=== Ajoutez des enfants ===

La façon la plus connue pour ajouter un élément dans notre page est <code> appendChild </code>
Cette fonction permet d'ajouter un élément à la liste des enfants du parent depuis lequel la fonction est appelée.

<code> parentNode.appenChild(<element>) </code> prend en paramètre l'élément à ajouter en tant qu'enfant. L'élément depuis lequel on appelle cette fonction devient donc le parent de notre élément.

Exemple:

<code javascript [enable_line_numbers="true"]>
const newElt = document.createElement("div");
let elt = document.getElementById("main");

element.appendChild(newElt);
</code>
Avec le code ci-dessous, nous venons de créer un nouvel élément de type, mais qui n'est pas encore rattaché au DOM. Nous avons ensuite récupéré l'élément ayant pour id <code> main</code>. Enfin, nous avons ajouté notre nouvel élément dans les enfants de l'élément <code> #main </code>.

=== Ajoutez des enfants ===
Il existe les fonctions <code> removeChild </code> et <code> replaceChild</code>, afin de respectivement supprimer et remplacer un élément.
<code> prentNode.removeChild(<element>) </code> prend en paramètre l'élément à supprimer du parent et retourne cet élément.
<code> parentNode.replaceChild(<newElement>, <oldElement>)</code> prend en paramètres le nouvel élément ainsi que l'élément à remplacer, et retourne ce dernier.
Exemple:

<code javascript [enable_line_numbers="true"]>
const newElt = document.createElement("div");
let elt = document.getElementById("main");
elt.appendChild(newElt);

elt.removeChild(newElt);    // Supprime l'élément newElt de l'élément elt
elt.replaceChild(document.createElement("article"), newElt);    // Remplace l'élément newElt par un nouvel élément de type article
</code>

==== Ecoutez des événements ====

Un événement est une réaction à une action émise par l'utilisateur, comme le clic sur un bouton ou la saisie d'un texte dans un formulaire.

Un événement en JavaScript est représenté par un nom ( "click" , "mousemove" ...) et une fonction que l'on nomme une "collback".
Un événement est par défaut propagé, c'est à dire que si nous n'indiquons pas à l'événement que nous le traitons, il sera transmis à l'élément parent, et ainsi de suite jusqu'à l'élément racine.

Cette fonction "callback", c'est nous qui allons la spécifier. Elle sera appelée à chaque fois que l'action que l'on désire suivre est exécutée. Cela signifie que si l'on désire suivre le clic sur un élément, notre fonction sera appelée à chaque fois que l'utilisateur cliquera sur cet élément.

=== Réagir lors d'un clic sur un élément ===

Ecouter un événement:
<code> addEventListener() </code> 
Cette fonction nous permet d'écouter tous types d'événements (pas que le clic).
<code> addEventListener(<event>,<callback>) </code> prend en paramètres le nom de l'événement à écouter:
Tableau des événement à écouter:
^Type événement ^ Description ^ Documentation ^
| Animation | Liés à lAPI web Animation | Événements d'animation déclenchés sur Document https://developer.mozilla.org/fr/docs/Web/API/Document#animation_events, Window https://developer.mozilla.org/fr/docs/Web/API/Window#animation_events, HTMLElement https://developer.mozilla.org/fr/docs/Web/API/HTMLElement#animation_events.  |
| Récupération asynchrone des données | Événements liés à l'extraction des données. | Événements déclenchés sur AbortSignal https://developer.mozilla.org/fr/docs/Web/API/AbortSignal#events, XMLHttpRequest https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest#events, FileReader https://developer.mozilla.org/fr/docs/Web/API/FileReader#events.  |
| Presse-papiers |  Les événements liés à l'API Clipboard API. Utilisé pour notifier lorsque le contenu est coupé, copié ou collé. https://developer.mozilla.org/fr/docs/Web/API/Clipboard_API | Événements déclenchés sur Document, Element, Window. |
| Composition |  Événements liés à la composition ; saisie "indirecte" du texte (au lieu d'utiliser les touches normales du clavier).Par exemple, un texte saisi via un moteur de conversion de la parole en texte, ou l'utilisation de combinaisons de touches spéciales qui modifient les pressions sur le clavier pour représenter de nouveaux caractères dans une autre langue.  | Événements déclenchés sur Element.  |
| Transition CSS |  Événements liés aux Transitions CSS. Fournit des événements de notification lorsque les transitions CSS commencent, s'arrêtent, sont annulées, etc. https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Transitions  | Événements déclenchés sur Document, HTMLElement, Window.  |
| Base de données | Événements liés aux opérations de la base de données : ouverture, fermeture, transactions, erreurs, etc. | Événements déclenchés sur IDBDatabase https://developer.mozilla.org/fr/docs/Web/API/IDBDatabase#events, IDBOpenDBRequest https://developer.mozilla.org/fr/docs/Web/API/IDBOpenDBRequest#events, IDBRequest https://developer.mozilla.org/fr/docs/Web/API/IDBRequest#events, IDBTransaction https://developer.mozilla.org/fr/docs/Web/API/IDBTransaction#events  |
| Glisser/Déposer, Roue | Les événements liés à l'utilisation de l'API Glisser/Déposer https://developer.mozilla.org/fr/docs/Web/API/HTML_Drag_and_Drop_API  et WheelEvent https://developer.mozilla.org/fr/docs/Web/API/WheelEvent.  |  Les événements de Glisser/Déposer déclenchés sur Document, Les événements de la Roue déclenchés sur Document (en-US) et Element (en-US)  |
| Focus | Les événements liés aux éléments qui gagnent et perdent le focus. | Événements déclenchés sur Element, Window.  |
| Formulaire | Événements liés à la construction, la réinitialisation et la soumission de formulaires.  | Événements déclenchés sur HTMLFormElement. |
| Plein écran | Evénements relatifs à l'API Fullscreen API https://developer.mozilla.org/fr/docs/Web/API/Fullscreen_API. | Événements déclenchés sur Document, Element.  |
| Manette de jeu | Evénements relatifs à l'API Gamepad API. https://developer.mozilla.org/fr/docs/Web/API/Gamepad_API | Événements déclenchés sur Window. |
| Historique | Les événements liés à l'API de Manipulation de l'historique du navigateur. https://developer.mozilla.org/fr/docs/Web/API/History_API  | Événements déclenchés sur Window. |
| Gestion de l'affichage du contenu des éléments HTML | Événements liés à la modification de l'état d'un élément d'affichage ou textuel. | Événements déclenchés sur HTMLDetailsElement (en-US), HTMLDialogElement, HTMLSlotElement (en-US). https://developer.mozilla.org/fr/docs/Web/API/HTMLDialogElement#events |
| Entrées | Événements liés aux éléments d'entrée HTML, par ex. <input>, <select>, ou <textarea>.  | Événements déclenchés sur HTMLElement https://developer.mozilla.org/fr/docs/Web/API/HTMLElement#input_events, HTMLInputElement https://developer.mozilla.org/fr/docs/Web/API/HTMLInputElement#events. |
| Clavier |  Événements liés à l'utilisation d'un clavier.Utilisé pour notifier lorsque les touches sont déplacées vers le haut, vers le bas, ou simplement pressées.  | Événements déclenchés sur Document, Element.  |
| Chargement/Déchargement des documents | Événements liés au chargement et au déchargement des documents. | Événements déclenchés sur Window. |
| Manifeste | Événements liés à l'installation de Manifeste des applications web. https://developer.mozilla.org/fr/docs/Web/Manifest | Événements déclenchés sur Window.  |
| Médias | Événements liés à l'utilisation des médias (y compris l'API de capture et de diffusion de médias, Web Audio API, Picture-in-Picture API (en-US), etc.).  | Événements déclenchés sur ScriptProcessorNode (en-US), HTMLMediaElement https://developer.mozilla.org/fr/docs/Web/API/MediaStream#events, MediaStream https://developer.mozilla.org/fr/docs/Web/API/MediaStream#events |
| Messagerie | Événements liés à la réception par une fenêtre d'un message provenant d'un autre contexte de navigation.  | Événements déclenchés sur Window.  |
| Souris |  Événements liés à l'utilisation d'une souris d'ordinateur. Utilisé pour notifier le clic de la souris, le double-clic, les événements haut et bas, le clic droit, le déplacement dans et hors d'un élément, la sélection de texte, etc.  | Les événements de souris déclenchés sur Element |
| Réseau/Connexion | Événements liés à l'obtention et à la perte d'une connexion réseau. |  Événements déclenchés sur Window. Événements déclenchés sur NetworkInformation (en-US) (Network Information API).  |
| Paiements | Les événements liés à l'API Payment Request API. https://developer.mozilla.org/fr/docs/Web/API/Payment_Request_API | Événements déclenchés sur PaymentRequest (en-US), PaymentResponse (en-US).  |
| Performance | Événements liés aux APIs Performance API, Performance Timeline API, Navigation Timing API (en-US), User Timing API (en-US), et Resource Timing API (en-US).  | Événements déclenchés sur Performance. https://developer.mozilla.org/fr/docs/Web/API/Performance#events |
| Pointeur |  Les événements liés à l'API Pointer Events API.Fournit une notification agnostique du matériel à partir des dispositifs de pointage, y compris la souris, la souris tactile, le stylo/stylet. https://developer.mozilla.org/fr/docs/Web/API/Pointer_events  | Événements déclenchés sur Document, HTMLElement.  |
| Impression | Événements liés à l'impression. | Événements déclenchés sur Window. |
| Rejet de promesse | Événements envoyés au contexte global du script lorsqu'une promesse JavaScript est rejetée.  | Événements déclenchés sur Window.  |
| Sockets | Les événements liés à l'API WebSockets API. https://developer.mozilla.org/fr/docs/Web/API/WebSockets_API | Événements déclenchés sur Websocket. https://developer.mozilla.org/fr/docs/Web/API/WebSocket#events |
| SVG | Événements liés aux images SVG. | Événements déclenchés sur SVGElement, https://developer.mozilla.org/fr/docs/Web/API/SVGElement#events |
| Sélection de texte | Événements liés à la sélection du texte. https://developer.mozilla.org/fr/docs/Web/API/Selection | Événements déclenchés sur Document.  |
| Tactile | Les événements liés à l'API Événements tactiles. https://developer.mozilla.org/fr/docs/Web/API/Touch_events | Événements déclenchés sur Document, Element.  |
| Réalité virtuelle | Les événements liés à l'API WebXR Device API. https://developer.mozilla.org/fr/docs/Web/API/WebXR_Device_API |  |
| RTC (communication en temps réel | Les événements liés à l'API WebRTC API.https://developer.mozilla.org/fr/docs/Web/API/WebRTC_API |  |
| Evenement envoyés par le serveur | Les événements liés à l'API des événements envoyés par le serveur. https://developer.mozilla.org/fr/docs/Web/API/Server-sent_events | Événements déclenchés sur EventSource. https://developer.mozilla.org/fr/docs/Web/API/EventSource#events  |
| Synthèse vocale | Les événements liés à l'API Web Speech API. https://developer.mozilla.org/fr/docs/Web/API/Web_Speech_API | Événements déclenchés sur SpeechSynthesisUtterance. https://developer.mozilla.org/fr/docs/Web/API/SpeechSynthesisUtterance#events |
| Workers | Les événements liés aux APIs Web Workers API, Service Worker API | Événements déclenchés sur ServiceWorkerGlobalScope, DedicatedWorkerGlobalScope, SharedWorkerGlobalScope, WorkerGlobalScope, Worker, WorkerGlobalScope |

Exemple avec un événement "click sur la souris":
Réagir au click sur un lien, il faut d'abord récupérer l'élément qui correspond à votre lien, comme nous l'avons vu précédemment. Ensuite, vous allez appeler la méthode:
<code> element.addEventListener('click', onClick);</code> directement sur cet élément.

"onClick" correspond à la fonction que vous allez définir et qui sera appelée à chaque fois que l'utilisateur cliquera sur votre lien. Le comportement par défaut de l'élément actionné sera tout de même exécuté. Le lien ou ouvrira la page, le formulaire sera envoyer etc ...

Exemple:
<code javascript [enable_line_numbers="true"]>
const elt = document.getElementById('mon-lien');    // On récupère l'élément sur lequel on veut détecter le clic
elt.addEventListener('click', function() {          // On écoute l'événement click
    elt.innerHTML = "C'est cliqué !";               // On change le contenu de notre élément pour afficher "C'est cliqué !"
});
</code>

Même exemple en modifiant le comportement par défaut de l'élément clicker:
<code javascript [enable_line_numbers="true"]>
const elt = document.getElementById('mon-lien');    // On récupère l'élément sur lequel on veut détecter le clic
elt.addEventListener('click', function(event) {     // On écoute l'événement click, notre callback prend un paramètre que nous avons appelé event ici
    event.preventDefault();                         // On utilise la fonction preventDefault de notre objet event pour empêcher le comportement par défaut de cet élément lors du clic de la souris
});
</code>

De plus : avec <code> stopPropagation() </code> , vous pouvez ainsi empêcher que d'autres éléments reçoivent l'événement.
Exemple:
<code javascript [enable_line_numbers="true"]>
elementInterieur.addEventListener('click', function(event) {
    event.stopPropagation();
    elementAvecMessage.innerHTML = "Message de l'élément intérieur";
});
</code>
De cette manière, lorsque l'on clique sur l'élément intérieur, l'élément parent ne recevra plus le clic, et seul l'élément intérieur affichera son message. Par contre, en cliquant directement dans l'élément parent, sans être dans l'élément intérieur, l'élément parent recevra bien l'événement et affichera bien son message.

==== Récupérez des données utilisateurs avec les événement ====

Nous savons écouter un événement, mais on ne sait pas encore comment récupérer la position de la souris, ou le texte saisi.

Lorsqu'on reçoit un événement, notre fonction callback reçoit un paamètre contenant des informations sur cet événement. Ces information sont recues sous la forme d'un objet qui dépendra du type d'événement reçu.
De plus chaque événement implémente l'objet "Event". C'est à dire que chaque événement a au minimum les même fonctions et propriétés que l'objet "Event": https://developer.mozilla.org/fr/docs/Web/API/Event

* AnimationEvent
  * AudioProcessingEvent
  * BeforeInputEvent
  * BeforeUnloadEvent
  * BlobEvent
  * CloseEvent
  * CompositionEvent
  * CSSFontFaceLoadEvent
  * CustomEvent
  * DeviceMotionEvent
  * DeviceOrientationEvent
  * DOMTransactionEvent
  * EditingBeforeInputEvent
  * ErrorEvent
  * FetchEvent
  * FocusEvent
  * InputEvent
  * KeyboardEvent
  * MediaStreamEvent
  * MessageEvent
  * MouseEvent
  * PageTransitionEvent
  * PointerEvent
  * RelatedEvent
  * SensorEvent
  * SVGZoomEvent
  * TransitionEvent
  * UIEvent
  * WheelEvent

=== Détection de la souris ===

Dès que la souris bouge, notre fonction callback sera appelée avec un paramètre detype "MouseEvent", qui contient les données sur le mouvement de la souris.

Entre autres, ce que cet objet nous permet de récupérer:
  * "clientX" / "clientY" = position de la souris dans les coordonnées locales (contenu du DOM)
  * "offsetX" / "offsetY" = position de la souris par rapport à l'élément sur lequel on écoute l'évenement.
  * "pageX" / "pageY" = position de la souris par rapport au document entier.
  * "screenX" / "screenY" = position de la souris par rapport à la fenêtre du navigateur.
  * "movementX" / "movementY" = position de la souris par rapport à la position de la souris lors du dernier événement "mousemove".

Exemple:

<code JavaScript [enable_line_numbers="true"]>
element.addEventListener('mousemove', function(event) {
    const x = event.offsetX; // Coordonnée X de la souris dans l'élément
    const y = event.offsetY; // Coordonnée Y de la souris dans l'élément
});
</code>

=== Lire le contenu d'un champ texte ===

On peut voir dans la liste des événements qu'il existe un événement "change". Si on regarde sa doc, https://developer.mozilla.org/en-US/docs/Web/Events/change , on peut voir que c'est un événement qui fonctionne avec les éléments de ty "<input>", "<select> et "<textarea>" . Cet événement est déclenché lorsque le champ perd le focus, c'est à dire lorsque l'utilisateur passe à autre chose en cliquant ailleurs et qu'il a fini sa saisie pour ce champ. Cet événement fonctionne aussi pour les cases à cocher "<checkbox>" et les cases à choix unique "<radio>" .

Exemple:
Pour récupérer la valeur de notre champ une fois qu'il a été modifié, il suffit d'accéder à la valeur de l'élément cible : "event.target.value" . En effet ici "target" correspond à l'élément sur lequel s'est produit l'événement, c'est à dire un champ de type "<input>".

Dans le cas ou je souhaite pouvoir avoir la valeur dès que l'utilisateur ajoute ou supprime une lettre, on va utilisé l'événement "input" https://developer.mozilla.org/en-US/docs/Web/Events/input , qui fonctionne comme "change" sauf qu'il est déclenché dès que le contenu du champs est modifié, même si l'utilisateur n'a pas encore fini de saisir ce qu'il souhaite.

<code JavaScript [enable_line_numbers="true"]>
input.addEventListener('input', function(event) {
    output.innerHTML = event.target.value; 
});
</code>

==== API et service web ====
Les services web et les API sont des éléments essentiels aux applications web. N’importe quel site sur lequel vous naviguez est un service web, et il fournit une API pour communiquer avec

Service web = programme s'exécutant sur un serveur accessible depuis internet et fournissant un service.
Le but d'un service web est donc de fournir un service à celui qui le demande et pour ce faire il met à disposition une API (Application Programming Interface).

API = ensemble des demandes que l'on peut faire à un service web. Ces demandes sont appelées des requêtes.

Requêtes = données qui respectent le protocole de communication approprié et qui sont envoyées au serveur.

Pour notre cas nous allons nous limiter aux requête respectant le protocole HTTP:
  * Les méthodes = action que l'on souhaite faire.
    * GET = récupérer des ressources
    * POST = créer ou modifier une ressources
    * PUT = modifier une ressource
    * DELETE = supprimer une ressource.
  * L'URL = adresse du serveur ayant le service web demandé
  * Les données = ressources à traiter.

Une fois la requête soumis, le serveur répond et renvoi:
  * des données = une page HTML par exemple.
  * Le code HTTP = code numérique indiquant comment s'est déroulée la requête.
    * 200 : indique que tout s'est bien passé
    * 400 : indique que votre requête n'est pas conforme à ce qui est attendu
    * 401 : indique que vous devez être authentifié pour faire cette requête
    * 403 : indique que vous êtes bien authentitfié mais que vous n'êtes pas autorisé à faire cette requête.
    * 404 : indique que la ressource demandée n'existe pas.
    * 500 : indique une erreur avec le service web.
    * Autre : https://fr.wikipedia.org/wiki/Liste_des_codes_HTTP

=== Fetch === 
Fetch est un ensemble d'objets et de fonctions mis à disposition par le langage JavaScript, afin d'exécuter des requêtes HTTP de manière asynchrone.

L'API Fetch va nous permettre d'exécuter des requêtes HTTP sans avoir besoin de recharger la page du navigateur. Cela à plusieurs avantages:
  * Avoir un site plus réactif (pas besoin de recharger la page)
  * Améliorer l'expérience utilisateur avec des contenue dynamique.

Envoyer une requête:

<code JavaScript [enable_line_numbers="true"]> fecth ("http://url-service-web.com/api/users"); </code>

Ce code nous permet d'envoyer une requête HHTP de type "GET" au service web se trouvant à l'adresse <code> http://url-service-web.com/api/users </code>.

Maintenant il faut récupérer et interpréter la réponse à la requête faite par le serveur.

Un service web peut choisir le format qu'il veut pour nous revoyer des données, mais le plus courant et le plus simple est le format JSON.

=== JSON ===
JSON = JavaScript Object Notation. Il s'agit d'un format textuel se rapprochant en termes de syntaxe de celui des objets dans le langage JavaScript.

Exemple, l'objet JavaScript suivant:

<code JavaScript [enable_line_numbers="true"]> 
const obj = {
    name: "Mon contenu",
    id: 1234,
    message: "Voici mon contenu",
    author: {
        name: "John"
    },
    comments: [
        {
            id: 45,
            message: "Commentaire 1"
        },
        {
            id: 46,
            message: "Commentaire 2"
        }
    ]
};
</code>

Sera retranscrit ainsi en JSON:

<code JavaScript [enable_line_numbers="true"]>
{
    "name": "Mon contenu",
    "id": 1234,
    "message": "Voici mon contenu",
    "author": {
        "name": "John"
    },
    "comments": [
        {
            "id": 45,
            "message": "Commentaire 1"
        },
        {
            id: 46,
            "message": "Commentaire 2"
        }
    ]
}
</code>

Le gros avantage de ce format (json) lorsqu'il est utilisé avec lde langage JavaScript est qu'il n'y a pas besoin de le parser comme on le ferait avec du XML.
LE deuxième gros avantage du format (json) est sa légèreté par rapport à un format comme le XML, qui reste bien plus verbeux, la communication avec un service web en json optimisera donc les temps de réponse.

Récupérez le résultat de la requête:

Fetch va nous renvoyer une "Promise".
La Promise est un objet qui fournit une fonction "then" qui sera exécutée quand le résultat aura été obtenu, et une fonction catch qui sera appelée s'il y a une erreur qui est survenue lors de la requête.

Exemple voici comment procéder avec un service qui fait un simple echo:

<code JavaScript [enable_line_numbers="true"]>
fetch(“https://mockbin.com/request”)
  .then(function(res) {
    if (res.ok) {
      return res.json();
    }
  })
  .then(function(value) {
    console.log(value);
  })
  .catch(function(err) {
    // Une erreur est survenue
  });
</code>

L'URL passée à la fonction "fetch()" correspond à l'URL de notre service web. Type de requête GET (par defaut avec Fetch) pour récupérer les données.
Nous appelons ensuite la fonction "then()" pour récupérer le résultat de la requête au format json en ayant vérifié au préalable que la requête s'était bien passée avec "res.ok". Ce résultat "json" étant lui aussi une "Promise", nous le retrounons et récupérons sa vraie valeur dans la fonction then() suivante:
Voici ce que nous obtenons de l'API à l'heure où j'écris ces lignes:

==== Validez les données saisies des utilisateurs ====

=== Validez les données suite à des événements ===

Afin de valider les données utilisateurs, vous pouvez vous aider des événements du DOM. Ainsi, vous pouvez écouter l'événement  "onChange"  pour vérifier la donnée, dès que l'utilisateur a fini de l'éditer. Ou bien vous pouvez écouter l'événement  "onInput"  pour vérifier la donnée à chaque nouveau caractère.

Par exemple, vous pouvez vérifier que ce qui est saisi commence par  "Hello"   avec le code suivant :

<code JavaScript [enable_line_numbers="true"]>
myInput.addEventListener('input', function(e) {
    var value = e.target.value;
    if (value.startsWith('Hello ')) {
        isValid = true;
    } else {
        isValid = false;
    }
});
</code>

=== Validation plus complexe avec les Regex ===

Regex permet de vérifier qu'un texte corresponde à une description que l'on a définie. Ainsi, si l'on veut savoir si notre texte commence par la lettre  e  et est suivi d'au moins 3 chiffres, on écrira la regex suivante :

<code JavaScript [enable_line_numbers="true"]>
function isValid(value) {
    return /^e[0-9]{3,}$/.test(value);
}
</code>

Documentation Regex: https://regexr.com/

=== Les contraintes HTML5 ===

Depuis HTML version 5, il est possible d'ajouter de la validation directement dans le code HTML, sans avoir besoin d'écrire la moindre ligne de JavaScript.

Pour cela, différents attributs sont ajoutés et permettent d'empêcher la soumission d'un formulaire si toutes les validations ne sont pas respectées.

== l'attribut type pour les inputs ==

Pour valider les informations saisies dans une balise  "input" , il est possible d'utiliser l'attribut  "type" .

L'attribut  "type"  de la balise  "input"  ne prend pas seulement comme valeurs  "text"  et  "password" . Cela peut aussi être  "email" ,  "tel" ,  "URL" ,  "date"  et bien d'autres.

Lorsque vous ajoutez un élément  "input"  avec un attribut  type="email" , le navigateur empêchera la soumission du formulaire si ce n'est pas une adresse email correcte.

== Les attributs de validations simples ==

En fonction du  "type"  de l' "input" , vous pouvez utiliser différents attributs pour perfectionner votre validation :

* "min"  /  "max"  : fonctionne avec des champs de type nombre ou date. Cela permet de définir une valeur minimum et une valeur maximum autorisées ;
  * "required"  : fonctionne avec à peu près tous les types de champs. Cela rend obligatoire le remplissage de ce champ ;
  * "step"  : fonctionne avec les dates ou les nombres. Cela permet de définir une valeur d'incrément lorsque vous changez la valeur du champ via les flèches ;
  * "minlength"  /  "maxlength"  : fonctionne avec les champs textuels (  text ,  url ,  tel ,  email ...). Cela permet de définir un nombre de caractères minimum et maximum autorisé.

== Les patterns ==

Nous avons vu qu'il était possible d'avoir une validation complexe grâce aux Regex en JavaScript. Eh bien c'est aussi possible directement en HTML5 avec l'attribut  "pattern" . Il suffit de définir une Regex dans cet attribut, et vous obligez la valeur du champ correspondant à la respecter.

Par exemple, si on prend le code suivant :

<code JavaScript [enable_line_numbers="true"]>
<input type="text" pattern="[0-9]{,3}" />
</code>
il empêchera un utilisateur d'entrer autre chose que des chiffres, et limitera leur nombre à 3 chiffres.

Documentation : https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation

==== Sauvegardez des données sur le service web ====

Pour envoyer des données a un serveur par l'HTTP ou HTTPS on a les méthodes POST et PUT.

=== POST ===

Afin d'envoyer des données à un service web avec la méthode POST via AJAX, nous allons devoir passer par la méthode "send()" en lui passant en paramètres les données à envoyer.

<code JavaScript [enable_line_numbers="true"]>
fetch("http://url-service-web.com/api/users", {
	method: “POST”,
	headers: { 
'Accept': 'application/json', 
'Content-Type': 'application/json' 
},
	body: JSON.stringify(jsonBody)
});
</code>

Comme vous pouvez le voir, nous avons passé le contenu à envoyer au service web à notre fonction   fetch()  . Étant donné que l'on souhaite envoyer du JSON à notre service web, nous avons d'abord besoin de transformer notre objet JavaScript en JSON (qui, rappelons-le, est un format textuel, c'est-à-dire que c'est simplement du texte, contrairement à un objet JavaScript qui est une structure complexe du langage).

Pour faire cette transformation, nous utilisons la fonction   JSON.stringify(json)  . Toujours parce que l'on souhaite envoyer du JSON à notre service web, il faut alors le prévenir qu'il va recevoir du JSON. Cela se fait grâce à des headers, qui sont des en-têtes envoyés en même temps que la requête pour donner plus d'informations sur celle-ci. Les headers en question sont  :
  * "Content-Type" , avec la valeur application/json,
  * "Accept" , avec la valeur application/json.

Ces options sont envoyées avec la requête grâce au second paramètre de la fonction fetch(). Ce paramètre est un objet qui permet de définir :
  * La méthode HTTP, le body, c'est à dire les données qu'on souhaite envoyer,
  * Les headers qui donnent un peu plus d'information sur notre requête.

=== PUT ===

PUT fonctionne exactement de la même manière que POST.

==== L'utilisation de l'Asynchrone en JavaScript ====

=== Définition ===

Un code Synchrone est un code qui s'execute ligne après ligne, la ligne suivant ne commence que lorsque la précedente à terminer de s'éxécuter. Comme du mono-Thread.
Un code Asynchrone est un code qui execute des lignes en parallèle, comme du multy-thread.

Or JavaScript est mono-Thread et Synchrone, cependant le coeur de javaScript fonctionne autour de la technologie Event Loop, permettant de classer les fonctions en plusieurs liste d'attente d'execution , l'une synchrone et l'autre asynchrone, permettant de simuler un multy-thread.

=== Méthode "setTimeout" pour utiliser l'asynchrone en JavaScript === 
Cette fonction est très répandue lorsque l'on veut exécuter du code asynchrone sans bloquer le fil d'exécution en cours. Cette fonction prend 2 Paramètres:

* La fonction à exécuter de manière asynchrone (qui sera donc ajoutée à la file d'attente de l'event loop);
  * le délai, en millisecondes, avant d'exécuter cette fonction.

<code JavaScript [enable_line_numbers="true"]>
setTimeout(function() {
    console.log("I'm here!")
}, 5000);

console.log("Where are you?"); 
</code>

Dans l'exemple ci-dessus, le texte "Where are you?" s'affichera avant "i'm here!", qui ne sera affiché qu'au bout de 5 secondes.

La fonction "setTimeout" nous retourne une valeur permettant d'identifier le code asynchrone que l'on veut exécuter. Il est possible de passer cet identifiant en paramètre à la fonction "clearTimout", si vous souhaiez annuler l'exécution asynchrone de la fonction avant qu'elle ne soit exécutée.

Documentation setTimeout: https://www.w3schools.com/jsref/met_win_settimeout.asp

=== Les autres "setTimeout" pour utiliser l'asynchrone en JavaScript ===

Il existe d'autres méthodes un peu moins répandues, voire très peu utilisées:
  * setInterval : fonctionne comme "setTimeout" , à ceci près qu'elle exécute la fonction passée en paramètre en boucle à une fréquence déterminée par le temps en millisecondes passé en second paramètre.Il suffira de passer la valeur de retour de setInterval à clearInterval pour stopper l'exécution en boucle de la fonction.
    * Documentation https://www.w3schools.com/jsref/met_win_setinterval.asp
  * setImmediate: Cette fonciton prend en seul paramètre la fonction à exécuter de façon synchrone. La fonction en question sera placée dans la file d'attente de l'event loop, mais va passer devant toutes les autres fonctions, sauf certaines spécifiques au Javascript.
    * Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate

=== Fonction asynchrone par nature ===
  * Les evenements: Sont toujours exécutés de façon asynchrone.
  * Les input/output aux sens large sont toujours exécutés de façon asynchrone.
  * Quelques autres... (callBack, Promise, et les Async/Await)

=== CallBacks ===

Une callback est simplement une fonction que vous définissez. Le principe de la callback est de la passer en paramètre d'une fonction asynchrone. Une fois que la fonction asynchrone a fini sa tâche, elle va appeler notre fonction callback en lui passant un résultat.

exemple:
<code JavaScript [enable_line_numbers="true"]>
element.addEventListener('click', function(e) {
    // Do something here ... 
});
</code>

Les callbacks sont faciles à comprendre et à utiliser, mais elles souffrent d'un gros problème de lisibilité du code, via ce qu'on appelle le callback hell. En effet, on se retrouve régulièrement dans des situations où on va imbriquer plusieurs couches de callbacks , rendant le code difficile à lire et pouvant générer des erreurs.

<code JavaScript [enable_line_numbers="true"]>
elt.addEventListener('click', function(e) {
    mysql.connect(function(err) {
        mysql.query(sql, function(err, result) {
            fs.readFile(filePath, function(err, data) {
                mysql.query(sql, function(err, result) {
                    // etc ...
                });
            });
        });
    }); 
});
</code>
C'est bien beau de gérer du code asynchrone, mais rien ne vous garantit que tout se soit bien passé. Il nous faut donc un mécanisme pour savoir si une erreur est survenue !

=== Gerer les erreurs callbacks ===
Pour gérer les erreurs avec les callbacks, la méthode la plus utilisée est de prendre 2 paramètres dans notre callback. Le 2e paramètre est notre donnée et le 1er est l'erreur. Si elle n'est pas null ou undefined,  elle contiendra un message d'erreur indiquant qu'une erreur est intervenue.

Si on reprend l'exemple ci-dessus, on voit par exemple que la lecture d'un fichier avec le module  fs  peut nous retourner une erreur :

exemple: 
<code JavaScript [enable_line_numbers="true"]>
fs.readFile(filePath, function(err, data) {
    if (err) {
        throw err;
    }
    // Do something with data
});
</code>

=== Promise ===
Lorsqu'on l'on exécute du code asynchrone, celui-ci va immédiatement nous retourner une "promesse" qu'un résultat nous sera envoyé prochainement.

Cette promesse est en fait un objet "Promise" qui peut être "resolve" avec un résultat, ou "reject" avec une erreur.

Lorsque l'on récupère une "Promise", on peut utiliser sa fonction "then()" pour exécuter du code dès que la promesse est résolue, et sa fonction "catch()" pour exécuter du code dès qu'une erreur est survenue.

Exemple:

<code JavaScript [enable_line_numbers="true"]>
functionThatReturnsAPromise()
    .then(function(data) {
        // Do somthing with data 
    })
    .catch(function(err) {
        // Do something with error
    });
</code>
Dans l'exemple ci-dessus, la fonction "functionThatReturnsAPromise" nous renvoie une  Promise . On peut donc utiliser sa fonction "then()" en lui passant une fonction qui sera exécutée dès qu'un résultat sera reçu (avec le résultat en question passé à notre fonction). On peut aussi utiliser sa fonction "catch()" en lui passant une fonction qui sera exécutée si une erreur est survenue (avec l'erreur en question passée à notre fonction).

Résumé

Note : En modifiant cette page, vous acceptez que le contenu soit placé sous les termes de la licence suivante : CC Attribution-Share Alike 4.0 International

2APartProx

Outils pour utilisateurs

Outils du site

Outils de la page