JavaScript

Liens_Web:

Présentation

JavaScript est un language interpréter conçu pour s’éxecuter coté client, c’est à dire directement coté navigateur.

Tout comme avec le CSS, il est possible de placer le code JavaScript directement dans la page HTML ou dans un fichier séparé qui sera ensuite appeller depuis le HTML.

Il était anciennement conseiller de faire l’appelle au fichier JS dans le « head » du fichier puisque c’est dans cette section que son regrouper toutes les meta-données de la page WEB. Cependant le chargement d’un fichier HTML étant séquentiel, il est conseiller de placer les scripts JS en bas de page (juste avant « </html> ») pour ne pas ralentir le chargement des autres éléments.

 1 <!-- JS directely loadded in the HTML page -->
 2 <html>
 3     <head>
 4         <!-- MetaDATA -->
 5     </head>
 6     <body>
 7         <!-- some cool stuff -->
 8     </body>
 9     <script>
10         console.log("Je s'appelle Groot !");
11     </script>
12 </html>
13
14 <!-- JS loadded from a seprated file -->
15 <html>
16     <head>
17         <!-- MetaDATA -->
18     </head>
19     <body>
20         <!-- some cool stuff -->
21     </body>
22     <script type="text/javascript" src="myScript.js"></script>
23 </html>

Liste des commandes de bases

Commentaires

Les commentaires sont les mêmes qu’en C :

1 // Commentaire simple
2
3 /*
4     Commentaires
5     sur plusieurs
6     lignes
7 */

Interaction avec l’utilisateur

  1. affichage d’un message à l’écran

1 alert();
2 //ex:
3 var myVar = "un message super important";
4 alert(myVar);

  1. Entrée utilisateur

1 prompt();
2 //ex:
3 var entreeClavier = prompt("tapez du texte ici : ");

  1. Confirmation conditionnelle

1 confirm();
2 //ex:
3 if (confirm('Voulez-vous exécuter le code JavaScript de cette page ?')) {
4     alert('Le code a bien été exécuté !');
5     }
6 /* un Popup doit s'ouvrir et demander de confirmer ([OK]) ou pas ([Annuler])
7 la valeur retournée est alors un booléin (true ou false) */

  1. Affichage dans la console

1console.log("Je s'appelle Groot !");

Type

  1. Les 3 types de bases

    • number : Ce type contient tous les types numériques ( entier et décimaux)

    • string

    • Boolean

  2. Connaitre le type d’une variable

1 typeof
2 //ex:
3 var myVar = 2;
4 alert(typeof myVar);

  1. Conversion de TYPE

    1. String –> Number

    1 parseInt()
2 //ex:
3 var myStr, myNumber;
4 myStr = "1234";
5 myNumber = parseInt(myStr);

    1. Number –> String

    1 //ex:
2 var myNumber, myStr;
3 myNumber = 1234;
4 myStr = myNumber + '';
5
6 //ex: (version simplifiée)
7 var myVar = 12;
8 myVar += '';
9 alert(typeof myVar);

Opérateur

  1. Opérateur d’égalité : « == » et « === »

 1 var a = 1;
 2 var b = 1;
 3 var c = "1";
 4
 5 //"=="  --> contenu égale à
 6 console.log(a == b);    // true
 7 console.log(a==c);      // true
 8
 9 //"===" --> contenu et type égale à
10 console.log(a === b);   // true
11 console.log(a===c);     // false

  1. Opérateur ternaire

 1 /* a ? [instruction 1] : [instruction 2]
 2
 3     si a est vrai
 4         [instruction 1]
 5     sinon
 6         [instruction 2]
 7 */
 8 // ex :
 9 var a = 1;
10 var myVar = a ? console.log("'a' est vrai") : console.log("'a' est faux");     // "'a' est vrai"
11
12 var a = 0;
13 var myVar = a ? console.log("'a' est vrai") : console.log("'a' est faux");     // "'a' est faux"

Détails syntaxiques

Concaténer les strings

Il y a 2 méthodes permettant de concaténer les chaines de caractères :

  1. Additionner les strings

1 var str1 = "aa"
2 var str2 = "zz"
3 var str12 = "STR1 : " + str1 + " STR2 : " + str2
4 //"STR1 : aa STR2 : zz"

  1. Modifier les chaines directement

    Pour pouvoir modifier les chaines directement, il remplacer les simples cotes < “ … “ > ou les doubles cotes < » … « > par des accent graves (altGR + 7) < ` … ` >

    1 var str1 = "aa"
2 var str_GR7 = `str1 : ${str1}`

Déclaration des variables

  • Constantes

    Les constantes sont définies avec le préfix « const ».

    1 const var_constante = "cc";
2 var_constante = "nn"
3 //TypeError: invalid assignment to const `var_constante`

  • var

    « var » permet de définir une variable locale. Si la valeur de cette variable est modifiée en dehors de la portée de sa déclaration, la valeur initale sera modifiée / écrasée.

    1 var nom = "aa";
2 console.log("Avant le bloc : " + nom);      //nom == "aa"
3 if (true){
4     var nom = "zz";
5     console.log("Dans le bloc : " + nom);   //nom == "zz"
6 }
7 console.log("Après le bloc : " + nom);      //nom == "zz"

  • let

    « let » permet de définir une variable locale. Si la valeur de cette variable est modifiée en dehors de la portée de sa déclaration, la valeur initiale ne sera pas modifiée.

    1 let nom = "aa";
2 console.log("Avant le bloc : " + nom);      //nom == "aa"
3 if (true){
4     let nom = "zz";
5     console.log("Dans le bloc : " + nom);   //nom == "zz"
6 }
7 console.log("Après le bloc : " + nom);      //nom == "aa"

Les objets JSON (Object)

Les objets JSON sont l’équivalent des dictionnaires en python. On peux utiliser toute la syntaxe JSON.

1 { id : "id1" }
Extraire les clés (keys) pour les classé dans un tableau
1 var myObject = {
2     id1 : "id1",
3     id2: "id2"
4     }
5
6 var keyFromObject = Object.keys( myObject )     //keyFromObject === ["id1", "id2"]
Quand utiliser “[]” ou “.” pour accéder à une clef

On utilise “[]” dans le cas d’une itération lorsque le nom du membre n’est pas connue. A l’inverse, on utilise “.” pour un appel direct, lorsque le nom du membre est connu

 1 d={'a':1, 'b':2, 'c':3}             //d     --> Object { a: 1, b: 2, c: 3 }
 2 const d_str = Object.keys(d)        //d_str --> Array(3) [ "a", "b", "c" ]
 3
 4 d_str.forEach(
 5     item =>{
 6         console.log(d[item])
 7     }
 8 )                                   //1
 9                                     //2
10                                     //3
11
12 d.a                                 //1
13 d.b                                 //2
14 d.c                                 //3

Les fonctions

  1. Fonctions simples

 1 // Déclaration
 2 function myFunct(myArg1, myArg2){
 3     // un super code ...
 4 }
 5
 6 // appel
 7 myFunct()
 8
 9 /* Variante */
10 var myFunct(myArg1, myArg2) => {
11     //un super code ...
12     }
13 // Le mot clef "function" est suprimé, alors que la flèche " => " est insérée entre
14 // les parenthèses et les accolades
15
16 //si la fonction n'a pas d'argument
17 var myFunct = () => {
18     //un super code ...
19     }

  1. Fonctions anonymes

1 // déclaration
2 function (myArg){
3     // un super code ...
4 }

  1. Exécution immédiate d’une fonction, sans appel préalable

1 (function (myArg){
2     // super code ...
3 })();
4
5 /* Cette syntaxe permet d'exécuter du code isolé
6 sans appel préalable d'une
7 fonction. La fonction anonyme est exécutée automatiquement (et immédiatement)
8 */

Opérateur < … > (spread)

L’opérateur spread ( … ) permet d’éclater les propriétés d’un objet. Ces propriétés sont alors intégrable par d’autres objet.

exemple : Création dans « personne2 », d’une copie de « personne »

1 var personne = {
2     nom : "aa",
3     prenom : "zz"};
4
5     var ville = "ee";

  1. Sans l’opérateur spread

1 var personne2 = {
2     personne,
3     ville};
4
5
6 personne2;
7 {…}
8     personne: Object { nom: "aa", prenom: "zz"}
9     ville: "ee"

  1. Avec l’opérateur spread

1 var personne2 = {
2     ...personne,
3     ville};
4
5 personne2;
6 {…}
7     nom: "aa"
8     prenom: "zz"
9     ville: "ee"

Dans le premier cas, on constate que l’objet « personne » est maintenant une propriété de « personne2 ». Dans le second cas, seules les propriétés de « personne » ont été ajoutée à « personne2 ».

Opérateur de comparaison « short-circuit »

Il existe un opérateur de comparaison qui retourne une expression seulement si la condition est vraie, contrairement à l’opérateur ternaire qui retourne une expression dans tous les cas.

Cet opérateur est sous utilise le « ET » logique : &&

 1 let isTrue = true
 2 let someExpression = "isTrue est vrai"
 3
 4 isTrue && someExpression        // --> "isTrue est vrai"
 5
 6 isTrue = false
 7 isTrue && someExpression        // --> flase
 8
 9 //cette syntaxe est équivalente à :
10 if (isTrue){
11     someExpression
12     }

Ça fonctionne parce qu’en JavaScript, true && expression est toujours évalué à expression, et false && expression est toujours évalué à false.

La décomposition (destructuring)

Liens_Web:

L’affectation par décomposition (destructuring en anglais) est une expression JavaScript qui permet d’extraire (unpack en anglais) des données d’un tableau ou d’un objet grâce à une syntaxe dont la forme ressemble à la structure du tableau ou de l’objet.

Ces expression peuvent être utilisée pour l’affectation de valeur à une varriable, décomposer un objet JavaScript (un Dictionnaire) ou de décomposer les propriétés d’un objet. C’est égelement la forme utilisée pour n’importer que certaines classes d’une librairie et ainsi éviter de la chargé complétement.

 1 /* Affectation */
 2 var a, b, rest
 3 //Affectation simple
 4 [a, b] = [1, 2]                     //a===1, b===2
 5
 6 //Afectation avec un 'reste' grace à l'opérateur 'spread'
 7 [a, b, ...rest] = [1, 2, 3, 4, 5]   //a===1, b===2, rest = [3, 4, 5]
 8
 9 /* Décomposer un objet */
10 //Décomposition simple
11 var o = {p: 42, q: true};
12 var {p, q} = o;                     //p===42, q===true
13
14 //Décomposition sans affectation
15 var a, b;
16 ({a, b} = {a:1, b:2});              //Les parenthèses ( ... ) utilisées autour de l'instruction
17                                     //sont nécessaires pour que la partie gauche soit bien
18                                     //interprétée comme un objet littéral et non comme un bloc.
19                                     //Il est également nécessaire d'avoir un point-virgule
20                                     //avant les parenthèses de l'instruction car sinon, ces
21                                     //parenthèses peuvent être interprétées comme un appel
22                                     //de fonction.
23
24 //affectation avec un nom différent
25 var o = {p: 42, q: true};
26 var {p: toto, q: truc} = o;         //toto===42, truc===true
27
28 //Décomposer les propriétés d'objets passés en arguments
29 var user = {
30     id: 42,
31     displayName: "jbiche",
32     fullName: {
33         firstName: "Jean",
34         lastName: "Biche"
35     }
36 };
37
38 function userId({id}) {
39     return id;
40 }
41
42 function whois({displayName: displayName, fullName: {firstName: name}}){
43     console.log(displayName + " est " + name);
44 }
45
46 console.log("userId: " + userId(user)); w// "userId: 42"
47     whois(user); // "jbiche est Jean"
48
49                                     //Cela permet d'accéder directement à id, displayName et
50                                     //firstName depuis l'objet user

Les classes

La Création d’une classe se fait avec le mot clef : class. La création d’une instance se fait avec le mot clef : new.

1 class Personne{
2     //...
3 }
4
5 personne = new Personne();

La définission d’attribut de classe se fait dans une méthode « construtor() ». Cette méthode est appellée automatiquement à la création d’une instance de la classe. C’est l’équivalent de la méthode « __init__() » en Python. La définition d’attribut ou l’appel d’une méthode depuis une autre méthode de la classe doit être précéder de « this ». c’est l’équivalent de « self » en Python.

1 class Personne{
2     constructor(nom, prenom){
3         this.nom = nom;
4         this.prenom = prenom;
5     }
6 }
Héritage de classe

L’héritage d’une classe se fait par lajout du terme « extends » suivie du nom de la calsse mère dans la déclaration de classe. Il faut égallement appeller la méthode « super() » dans la méthode « constructor() » de la classe fille.

 1 class Homme extends Personne{
 2     constructor(nom, prenom){
 3         super(nom, prenom);     //Equivalent de Personne.constructor(nom, prenom)
 4         this.sexe = "H";
 5     }
 6
 7     log(){
 8         console.log(`nom : ${this.nom}, prenom : ${this.prenom}`);
 9     }
10 }
11
12 var personne = new Homme("Bond", "James");
13 personne.log();
super()
Liens_Web:

Le mot-clé super est utilisé afin d’appeler ou d’accéder à des fonctions définies sur l’objet parent.

Lorsqu’il est utilisé dans un constructeur, le mot-clé super est utilisé seul et doit apparaître avant le mot-clé this. Ce mot-clé peut également être utilisé afin d’appeler des fonctions sur un objet parent.

Import / Inclusion de module

Un module représente un fichier qui doit être importer dans un autre fichier. Il est possible, mais déconseiller, de faire import de ces modules directement dans le fichier HTML. Cette approche impose de connaitre à l’avance toutes les dépendances et donc nous oblige à inserer tous les fichiers dans l’ordre. De plus le fichier HTML est alors surchargé ce qui peux le rendre difficile à maintenir.

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5     </head>
 6
 7     <body>
 8     </body>
 9
10     <!-- Inclusion des modules externes -->
11     <script src="./personne.js"></script>
12     <script src="./homme.js"></script>
13     <script>
14         var personne = new Homme("Bond", "James");
15         personne.log();
16     </script></script>>
17 </html>

Pour éviter ces problèmes, il faut créer des modules en choisissant les éléments à exposer à l’Aide du termes « export ». Le ficher deveint un module à ce moment là. Il est possible d’exporter plusieurs éléments en les séparant par des virgules.

 1 //module "personne.js"
 2 class Personne{
 3     constructor(nom, prenom){
 4         this.nom = nom;
 5         this.prenom = prenom;
 6     }
 7     log(){
 8         console.log(`nom : ${this.nom}, prenom : ${this.prenom}`);
 9     }
10 }
11
12 export {Personne};

L’utilisation de ces modules se fait à l’aide de la commande « import […] from […] ».

 1 // Module "Homme"
 2 import {Personne} from "./personne.js";
 3
 4 class Homme extends Personne{
 5     constructor(nom, prenom){
 6         super(nom, prenom);     //Equivalent de Personne.constructor(nom, prenom)
 7         this.sexe = "H";
 8     }
 9
10     log(){
11         super.log();
12         console.log("C'est un homme !");
13     }
14 }
15
16 export {Homme};

IL est conseiller d’importer tous les modules dans un seul fichier.

1 import {Personne} from "./personne";
2 import {Homme} from "./homme";
3
4 var personne = new Personne("Gabin", "Jean");
5 personne.log();
6
7 var personne2 = new Homme("Bond", "James");
8 personne2.log();

On peux ensuite importer Ce fichier dans une balise « script » de type « module » dans le fichier html.

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5     </head>
 6
 7     <body>
 8     </body>
 9
10     <!-- Inclusion des modules externes -->
11     <script type="module" src="./index.js"></Script>
12 </html>

Importer du CSS

Si on importe les fichier JavaScript sans préciser l’extention, c’est l’inverse lorsque l’on doit inserer du CSS.

1 import {Personne} from "./personne"
2 import styles from "./css/monSuperCSS.css"
DOM

Le DOM (Document Object Model) est une API qui réprésente et interagit avec tous types de documents HTML ou XML. Le DOM est un modèle de document chargé dans le navigateur. La représentation du document est un arbre nodal. Chaque nœud représente une partie du document (par exemple, un élément, une chaîne de caractères ou un commentaire).

Le DOM est l’une des API les plus utilisées sur le Web parce-qu’il autorise du code exécuté dans un navigateur à accéder et interagir avec chaque nœud dans le document. Les nœuds peuvent être créés, déplacés et modifiés. Des auditeurs d’évènements (event listeners) peuvent être ajoutés à des nœuds et déclenchés par un évènement donné.

À l’origine, DOM n’était pas standardisé. Il ne l’a été que lorsque les navigateurs ont commencé à implémenter JavaScript. Le DOM qui découle de cette période initiale est parfois appelé DOM 0. À l’heure actuelle, le W3C édicte les spécifications de la norme DOM.

Source : DOM sur MDN web docs [8] Voir aussi : DOM sur Wikipedia [9]

AJAX

Le JavaScript et XML asynchrone (AJAX) est une pratique de programmation qui consiste à construire des pages web plus complexes et plus dynamiques en utilisant une technologie connue sous le nom de XMLHttpRequest.

AJAX vous permet de mettre à jour simplement des parties du DOM d’une page web HTML au lieu de devoir recharger la page entière. AJAX vous permet également de travailler de manière asynchrone, c’est-à-dire que votre code continue à s’exécuter pendant que la partie de votre page web essaie de se recharger (par opposition à la méthode synchrone qui bloque l’exécution de votre code jusqu’à ce que la partie de votre page web ait fini de se recharger).

Avec les sites web interactifs et les standards modernes du web, AJAX est progressivement remplacé par des fonctions dans les cadres JavaScript et l’API standard officielle Fetch API.

Source : AJAX sur MDN web docs [10]

Voir aussi :