Lien source: https://developer.mozilla.org/fr/docs/web/javascript/data_structures

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

 <script src="./script.js"> </script> 

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

• int
• float
• String
• char
• boolean
• Object
• Window
• document
• navigator
• Array (tableaux)
• Date
• Error
• Function
• Image
• Math
• Number
• RegExp

• '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

• '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

• '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

• '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

• '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

• 'javaEnabled()'

vérifier la disponibilité Java

• 'length()'

retourne la taille du tableau (entier)

Modification du contenu

 let monTableau = []; 

 mon_tableau.pop() 

 mon_tableau.push("nouveau","deuxième nouveau") 

 mon_tableau.shift() 

 mon_tableau.unshift("nouveau1","nouveau2") 

 mon_tableau.splice(ou, 2,"nouveau1","nouveau2") 

 mon_tableau.reverse() 

 mon_tableau.concat(tableau1,tableau2) 

Obtenir des données

 mon_tableau.join(" ") 

 mon_tableau.slice(debut,nombre) 

Trier

 mon_tableau.sort() 

Méthodes héritées

 s = mon_tableau.toString() 

 s= mon_tableau.toLocaleString() 

Manipulation:

• Instanciation:

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.

• Adressage d'un élément

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"

• Utilisation d'une méthode:

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

• '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 (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é

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

var myError = new Error('Message');

• arguments

tableau de noms d'arguments

• arity

nombre d'arguments

• caller

nom de la fonction qui appelle

• '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

• '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

• '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

• 'toExponential()'

• 'toFixed()'

• 'toPrecision()'

• 'toString()'

let totalCDs = 67;
let totalVinyls = 34;
let totalMusic = totalCDs + totalVinyls;

let cookiesInJar = 10;
let cookiesRemoved = 2;
let cookiesLeftInJar = cookiesInJar - cookiesRemoved;

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

let numberOfLikes = 10;
numberOfLikes++;  // cela fait 11
numberOfLikes--; // et on revient à 10...qui n'a pas aimé mon article ?

let costPerProduct = 20;
let numberOfProducts = 5;
let totalCost = costPerProduct * numberOfProducts;
let averageCostPerProduct = totalCost / numberOfProducts;

let numberOfCats = 2;
numberOfCats *= 6;  // numberOfCats vaut maintenant 2*6 = 12;
numberOfCats /= 3;  // numberOfCats vaut maintenant 12/3 = 4;

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.

const nombrePostParPage = 20;
nombrePostParPage = 30; // Retournera une erreur dans la console car on ne peut plus changer sa valeur

Employé dans une fonction, provoque le retour au programme appelant avec renvoi facultatif d'un résultat.

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
}

Permet de définir l'exécution conditionnelle d'instructions ou d'un bloc d'instructions. Peut-être utilisé conjointement à else.

a = 5;
if (a==5)
     alert("la condition est remplie");

Utilisé conjointement à if, permet d'exécuter des instructions alternativement au résultat de la condition spécifiée par if.

a = 5
if (a==5)
     alert("a est égal à 5");
else
     alert("a est différent de 5");

Utilisé conjointement à case, permet d'implanter un sélecteur de cas

function test(condition)
{
     switch(condition)
     {
          case "1":
               alert("condition='1'");
          break;
          case "3":
               alert("condition='3'");
          break;
          case "5":
               alert("condition='5'");
          break;
     }
}

Utilisé à l'intérieur d'un bloc switch, constitue un des choix du selecteur.

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.

Utilisé à l'intérieur d'un bloc switch, constitue l'option par défaut du sélecteur.

Introduit une boucle itérative deterministe.

for (i=0;i<5;i++)
{
     alert(i);
}

For each : “for …in …” ou “for … of …”

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

En tableau associatif :

var array =  { "a" : 1, "b" : 2, "c": 3 };
for (line in array)
{
     alert('Clé : ' + line + ', valeur : ' + array[line]);
}

Introduit une boucle itérative indeterministe conditionnelle avec test effectué à chaque tour par “while” :

i=0
do
{
     i++
     alert(i);    // Affichera 1, puis 2, puis 3, puis 4, puis 5
}
while(i<5);

Introduit une boucle itérative indeterministe conditionnelle:

i=0
while(i<5)
{
     i++;        // Incrémenter i
     alert(i);   // Affiche 1, puis 2, puis 3, puis 4, puis 5
}

Utilisé dans une boucle “for”, “while” et “do”, permet de sauter un tour.

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.
}

Provoque une erreur personnalisée.

throw new Error("votre erreur");// a le même effet visuel que alert("votre erreur");

É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 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.

Opérateur qui permet l'instanciation d'un objet.

var mon_tableau = new Array();

Cet opérateur permet de tester si une valeur est une instance d'un objet :

t = new Array();
alert(t instanceof Array); // Affiche true
alert(t instanceof Date); // Affiche false

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.

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

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.

Valeur booléenne “vrai”.

if (true)
{
     alert("Je m'affiche toujours");
}

Valeur booléenne “faux”.

if (true)
{
     if (ma_bool == false)
     alert("C'est pas vrai...")
}

Valeur de type “object” qui ne référence rien.

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

• 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

Premier exemple:

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

Deuxième exemple:

var article = new Object();
article.nom = "Livre";
article.prix_unitaire = 21.99;
article.quantite = 2;

Variante:

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

Troisième exemple:

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

Quatrième exemple avec Imbrications:

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"
    }
];

Création d'une classe:

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.

Comme en Java classique: les méthodes créer dans une classe sont accessible depuis n'importe quel objet instancier de cette classe.

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.

Il y a également les méthode Static, invocable depuis l'évocation de la classe elle même sans avoir à l'instancier.

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

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 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:

 document.getElementByld() 

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:

 <p id="my-anchor"> My content </p> 

On aura pour accéder à cet élément avec js:

 const myAnchor = document.getElementById('My-anchor'); 

 document.getElementsByClassName() 

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:

<div> 
<div class="content"> Contenu 1 </div> 
<div class="content"> Contenu 2 </div> 
<div class="content"> Contenu 3 </div> 
</div> 

On aura pour accéder à cet élément avec js:

 const contents = document.getElementsByClassName('content');
const firstContent = contents[0];

 document.getElementsByTagName() 

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:

<div> 
<aritcle> Contenu 1 </aritcle> 
<aritcle> Contenu 2 </aritcle> 
<aritcle> Contenu 3 </aritcle> 
</div> 

On aura pour accéder à cet élément avec js:

 const articles= document.getElementsByTagName('article');
const thirdArticle = contents[2];

 document.querySelector() 

Recherche un élément grâce à un selecteur qui permet de cibler certains éléments. Exemple:

 document.querySelector("#myId p.article > a") 

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:

<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>

On aura pour accéder à cet élément avec js:

 const elt = document.querySelector("#myId p.article > a");

Nous retournera uniquement Lien 6.

 querySelector(<selector>)

Ne revoie pas de liste de résultats, mais le premier élément qui correspond à la recherche.

 querySelectorAll(<selector>)

Revoie une liste de résultats correspondant au “Selector” passé en paramètre.

 element.children 

Renvoi la liste des enfants de cet élément.

 element.parentElement 

Renvoi LE parents de cet élément.

 element.nextElementSibling 

 element.previousElementSibling 

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:

<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>

On aura pour accéder à cet élément avec js:

 const elt = document.getElementById('main'); 

Nous aurons ceci:

•  elt.children

  nous retournera les éléments de type “p” qui sont les enfants de l'élément “#main” .</code>

•  elt.parentElement

  nous retournera la “div” qui à l'id “parent”. </code>

•  elt.nextElementSibling 

  Nous retournera l'élément qui à l'“id” “next” </code>

•  elt.previousElementSibling 

  nous retournera l'élément qui à l'id “previous.

Pour modifier le contenue d'un élément: deux fonction principale.

•  innerHTML 

•  textContent 

Attention ces deux fonction remplace directement le contenu actuel de l'élément par celui que vous précisez.

innerHTML demande à ce que vous entriez du texte représentant un contenu HTML: Exemple:

 let element = document.getElementById('main');
element.innerHTML = "<ul><li> Elément 1</li><li>Elément 2</li></ul>"; 

L'élément qui à l'id 'main' aura un nouveau contenu: le HTML deviendra donc:

 <div id="main">
    <ul>
        <li>Elément 1</li>
        <li>Elément 2</li>
    </ul>
</div> 

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.

Il est possible d'accéder directement à la liste des classes d'un élément avec la propriété:

 classList 

Cette propriété fournit aussi une série de fonctions permettant de modifier cette liste de classes. En voici quelques-unes:

•  add(<string>, [<string>,...]) 

  ajoute la ou les classes spécifiées.

•  remove(<string>, [<string>,...] 

  supprime la ou les classes spécifiées.

•  contains(<string>) 

  vérifie si la classe spécifiée est contenue par cet élément.

•  replace (<old>, <new>) 

  remplace l'ancienne classe par la nouvelle classe.

Exemple:

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

Avec la propriété

style

, 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:

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

Pour définir ou remplacer les attributs d'un élément, vous pouvez utiliser la fonction

 setAttribute 

.

 element.setAttribute(<name>, <value>) 

prend en paramètres le nom de l'attribut et sa valeur et ne retourne rien. On peut également utiliser les fonctions:

 getAttribute

 removeAttribute

pour avoir accès à plus de contrôle sur les attributs. Exemple:

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

C'est la fonction

 document.createElement(<tag>) 

qui va permettre de créez de nouveaux éléments puis nous l'insérerons dans le DOM.

 document.createElement(<tag>) 

prend en paramètre le nom de la balise de notre élément et nous renvoie l'élément nouvellement créé.

const newElement = document.createElement("div");

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.

La façon la plus connue pour ajouter un élément dans notre page est

 appendChild 

Cette fonction permet d'ajouter un élément à la liste des enfants du parent depuis lequel la fonction est appelée.

 parentNode.appenChild(<element>) 

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:

const newElt = document.createElement("div");
let elt = document.getElementById("main");
 
element.appendChild(newElt);

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

 main

. Enfin, nous avons ajouté notre nouvel élément dans les enfants de l'élément

 #main 

.

Il existe les fonctions

 removeChild 

et

 replaceChild

, afin de respectivement supprimer et remplacer un élément.

 prentNode.removeChild(<element>) 

prend en paramètre l'élément à supprimer du parent et retourne cet élément.

 parentNode.replaceChild(<newElement>, <oldElement>)

prend en paramètres le nouvel élément ainsi que l'élément à remplacer, et retourne ce dernier. Exemple:

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

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.

Ecouter un événement:

 addEventListener() 

Cette fonction nous permet d'écouter tous types d'événements (pas que le clic).

 addEventListener(<event>,<callback>) 

prend en paramètres le nom de l'événement à écouter: Tableau des événement à écouter:

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:

 element.addEventListener('click', onClick);

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:

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é !"
});

Même exemple en modifiant le comportement par défaut de l'élément clicker:

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

De plus : avec

 stopPropagation() 

, vous pouvez ainsi empêcher que d'autres éléments reçoivent l'événement. Exemple:

elementInterieur.addEventListener('click', function(event) {
    event.stopPropagation();
    elementAvecMessage.innerHTML = "Message de l'élément intérieur";
});

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.

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è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:

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

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.

input.addEventListener('input', function(event) {
    output.innerHTML = event.target.value; 
});

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 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:

 fecth ("http://url-service-web.com/api/users"); 

Ce code nous permet d'envoyer une requête HHTP de type “GET” au service web se trouvant à l'adresse

 http://url-service-web.com/api/users 

.

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 = 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:

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"
        }
    ]
};

Sera retranscrit ainsi en JSON:

{
    "name": "Mon contenu",
    "id": 1234,
    "message": "Voici mon contenu",
    "author": {
        "name": "John"
    },
    "comments": [
        {
            "id": 45,
            "message": "Commentaire 1"
        },
        {
            id: 46,
            "message": "Commentaire 2"
        }
    ]
}

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:

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

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:

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 :

myInput.addEventListener('input', function(e) {
    var value = e.target.value;
    if (value.startsWith('Hello ')) {
        isValid = true;
    } else {
        isValid = false;
    }
});

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 :

function isValid(value) {
    return /^e[0-9]{3,}$/.test(value);
}

Documentation Regex: https://regexr.com/

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.

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.

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é.

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 :

<input type="text" pattern="[0-9]{,3}" />

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

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

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.

fetch("http://url-service-web.com/api/users", {
	method: “POST”,
	headers: { 
'Accept': 'application/json', 
'Content-Type': 'application/json' 
},
	body: JSON.stringify(jsonBody)
});

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 fonctionne exactement de la même manière que POST.

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.

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.

setTimeout(function() {
    console.log("I'm here!")
}, 5000);
 
console.log("Where are you?"); 

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