02.
Programmation JavaScript
Syntaxe de base
1
Déclaration des variables
nomVariable = "xxx";
-> absence de déclaration, portée globale systématique, à proscrire
var nomVariable; ou var nomVariable = "xxx";
-> moyen le plus ancien, lui préférer let ou const (codage plus rigoureux)
let nomVariable; ou let nomVariable = "xxx";
-> depuis ES6, pour les variables modifiables
let metier;
ou let metier = "formateur";
metier = "formateur";
...
...
metier = "programmeur";
metier = "programmeur";
const NOM_CONSTANTE = "xxx";
-> depuis ES6, pour les variables de type constante, non modifiables
valeur obligatoire et non modifiable ultérieurement
const ADRESSE = "3800";
// ADRESSE ne peut pas être modifiée ensuite dans le bloc
2
Portées des variables avec les instructions let et const (ES6)
Une variable déclarée par let ou const :
a la portée du bloc courant (if, for, function, etc.) délimité par ses accolades {},
dans lequel elle est déclarée.
Une variable déclarée par var a une portée globale ou celle de la fonction dans laquelle elle est déclarée.
ne peut pas être utilisée dans les instructions qui précèdent sa déclaration.
Contrairement à une variable déclarée par var qui bénéficie du "hissage" (hoisting) en mémoire, avant l'exécution
du code, et peut ainsi être utilisée en amont de sa déclaration dans le code.
ne peut pas être déclarée à nouveau dans le même bloc.
Contrairement à une variable déclarée par var qui peut l'être plusieurs fois, hors ou dans une fonction.
=> let et const imposent un codage plus rigoureux qu'avec var
[Link]
[Link]
3
Types JavaScript
Détermination avec l'opérateur typeof :
Les nombres number
Les chaînes de caractères string
Les booléens boolean
Les objets object
• objets littéraux ( new Object ou {} )
• tableaux indicés ( new Array ou [] )
• dates ( new Date )
• expressions régulières ( new RegExp ou pattern /.../ )
• etc.
Les fonctions function
4
Types JavaScript : tableaux indicés et objets littéraux
Tableaux indicés :
let tableau = []; //initialisé vide
let tableau = ["rouge", "vert", "orange"]; // initialisé avec des valeurs
let longueur = [Link] // = 3
tableau[1] = "bleu"; // remplacement de la valeur "vert"
Objets littéraux :
let oRectangle = {}; // initialisé vide
let oRectangle = { // initialisé avec ses propriétés et ses méthodes
hauteur: 10,
largeur: 20,
couleur: "vert",
surface: function() {
return [Link] * [Link];
},
perimetre: function() {
return 2 * ([Link] + [Link]);
}
};
[Link] = 30; // modification de la propriété largeur
5
Conversions de types
chaîne -> entier parseInt("<chaîne>")
chaîne -> nombre avec décimales parseFloat("<chaîne>")
entier -> chaîne [Link]()
(avec par exemple, entier = 123)
nombre -> chaîne [Link]()
(avec par exemple, nombre = 123.66) [Link](1)
tableau -> chaîne [Link]()
objet Date -> chaîne <objet Date>.toString()
6
Structures de contrôle
Conditions (*)
if (condition) {
if (condition1) {
action1;
action1;
} else {
} else if (condition2) {
action2;
action2;
}
} else if (condition3) {
action3;
} else {
action4;
}
let variable = condition ? expression1 : expression2; // opérateur ternaire conditionnel
let variable = expression1 ?? expression2; // opérateur null coalescent
// expression1 si non égale à null et à undefined
switch (variable) {
case 'valeur1':
action1;
break;
case 'valeur2':
action2;
break;
default:
action3;
}
(*) identique à PHP 7
Structures de contrôle
Boucle Tant que (*)
while (condition) { Exemple:
action; let item = "init", tableau = [];
} while (item = prompt("Entrez une valeur dans le tableau"))
{
[Link](item);
}
[Link]([Link]());
Boucle Faire tant que (le bloc faire est exécuté au moins une fois) (*)
do { Exemple:
action; let item = "init", tableau = [];
} while (condition); do {
[Link](item);
} while (item = prompt("Entrez une valeur dans le tableau"));
[Link]([Link]());
(*) identique à PHP
8
Structures de contrôle
Boucle Pour (*)
for (init. ; condition; itération) { Exemple:
action; let produit = 1;
} let tableau = [10, 20, 30];
for (let i = 0; i < [Link]; i++) {
produit *= tableau[i];
}
[Link](produit);
(*) identique à PHP
9
Structures de contrôle
Itération d'objet
for (propriété in objet) { Exemples:
action; let tableau = ["ab","cd","ef"];
}
for(let propriete in tableau) {
[Link](propriete + " " +
tableau[propriete]);
}
let objetLitteral = {nom: "abc", prenom: "def"};
for(let propriete in objetLitteral ) {
[Link](propriete + " " +
objetLitteral [propriete]);
}
for (valeur of tableau) { Exemple:
action; let tableau = ["ab","cd","ef"];
} for(let valeur of tableau) {
[Link]("valeur " + valeur);
}
10
Opérateurs : les opérateurs d'affectation
instruction JavaScript (*) signification
a = 4; affecte la valeur 4 à a
a += 5; correspond à : a = a + 5;
a -= 5; correspond à : a = a – 5;
a /= 5; correspond à : a = a / 5;
a %= 5; correspond à : a = a % 5;
a *= 5; correspond à : a = a * 5;
a **= 5; correspond à : a = a ** 5;
texte += "bla bla"; correspond à : texte = texte + "bla bla";
(*) logique identique à PHP
11
Opérateurs : les opérateurs d'incrémentation
Opérateurs pour incrémenter ou décrémenter une variable de 1 (*)
exemple affichage explication
a = 10;
[Link]( a ); 10
[Link]( ++a ); 11 incrémente a de 1 puis retourne a
[Link]( a++ ); 11 retourne a puis incrémente a de 1
[Link]( a ); 12
[Link]( --a ); 11 décrémente a de 1 puis retourne a
[Link]( a-- ); 11 retourne a puis décrémente a de 1
[Link]( a ); 10
(*) identique à PHP
12
Opérateurs : les opérateurs arithmétiques
opérateur (*) description exemple
+ Addition 3 + 4
- Soustraction total - 1
+ Plus unaire + 4 - 3
- Moins unaire nb * - 4
* Multiplication qte * prix
** Exponentiation cote ** 3
/ Division somme / 3
% Modulo (reste de la division) nbJours % 7
(*) identique à PHP
JavaScript prend en compte des opérations mathématiques plus complexes à travers les
méthodes de l'objet Math, comme par exemple :
hypotenuse = [Link](x*x + y*y);
13
Opérateurs : priorités des opérateurs arithmétiques (*)
Dans une expression contenant plus d'un opérateur :
+, - unaires (même priorité)
**
priorités décroissantes
%, /, * (même priorité)
+, - binaires (même priorité)
Si deux opérateurs de même priorité sont rencontrés dans une expression,
l'opérateur de gauche sera exécuté d'abord.
Les parenthèses permettent de modifier les règles de priorité.
Exemples :
let resultat;
resultat = 2 + 3 + 4 + 5 + 7 / 7; // valeur 15
resultat = (2 + 3 + 4 + 5 + 7) / 7; // valeur 3
resultat = 2 * 3 * 3 + 3 * 4 % 3; // valeur 18
resultat = 2 * 3 ** 3 + 3 * 4 % 3; // valeur 54
resultat = 2 * - 3 * 3 + 3 * 4 % 3; // valeur -18
resultat = 2 * 3 * 3 + 3 * (4 % 3); // valeur 21
(*) identique à PHP 14
Opérateurs : les opérateurs de comparaison
opérateur (*) signification
< valeur strictement inférieure à
> valeur strictement supérieure à
<= valeur inférieure ou égale à
>= valeur supérieure ou égale à
== valeur égale à
!= valeur différente de
=== de même valeur et de même type :
la condition ("1" == 1) est vraie
la condition ("1" === 1) est fausse
!== de valeurs ou de types différents
la condition ("1" != 1) est fausse
la condition ("1" !== 1) est vraie
(*) identique à PHP 15
Opérateurs : les opérateurs logiques
opérateur (*) signification priorité
! pas 1
&& et 2
|| ou 3
Les expressions entre parenthèses sont évaluées en priorité par rapport à ces opérateurs.
Exemples :
// conditions multiples: a et b de même signe et non égaux à zéro
a > 0 && b > 0 || a < 0 && b < 0
// condition simple équivalente: a * b > 0
// conditions multiples: a et b divisibles par 2 ou par 3
(a%2 === 0 || a%3 === 0) && (b%2 === 0 || b%3 === 0)
!(a%2 !== 0 && a%3 !== 0 || b%2 !== 0 && b%3 !== 0)
(*) identique à PHP 16
Fonctions et méthodes
fonction nommée
= fonction déclarée avec un nom.
fonction anonyme
= fonction sans nom,
utilisée principalement dans une expression de fonction ou comme fonction de retour (callback).
fonction fléchée
= fonction sans nom,
syntaxe courte, utile aussi pour hériter du contexte this de la portée parente.
méthode
= fonction associée à un objet.
17
Fonction nommée
let cumul = 100; // variable portée globale du script
// déclaration d'une fonction nommée
// ---------------------------------
function calculerFactorielle (nombre) {
let result = 1; // variable portée locale à la fonction
for (let i = nombre; i > 1; i--) { // i variable portée locale à la boucle for
result *= i;
}
return result;
}
// utilisation de cette fonction
// -----------------------------
cumul += calculerFactorielle(5);
[Link](cumul);
[Link](calculerFactorielle);
18
Fonction anonyme dans une expression de fonction
let cumul = 100; // variable portée globale du script
// déclaration d'une fonction anonyme dans une expression de fonction
// ------------------------------------------------------------------
let calculerFactorielle = function(nombre) {
let result = 1;
for (let i = nombre; i > 1; i--) {
result *= i;
}
return result;
}
// utilisation de cette fonction
// -----------------------------
cumul += calculerFactorielle(5);
[Link](cumul);
[Link](calculerFactorielle);
19
Fonction fléchée dans une expression de fonction
let cumul = 100; // variable portée globale du script
// déclaration d'une fonction fléchée anonyme dans une expression de fonction
// --------------------------------------------------------------------------
let calculerFactorielle = (nombre) => { // aussi sans parenthèses si un seul argument
let result = 1;
for (let i = nombre; i > 1; i--) {
result *= i;
}
return result;
} // si une seule instruction: suppression possible des accolades avec return implicite
// utilisation de cette fonction
// -----------------------------
cumul += calculerFactorielle(5);
[Link](cumul);
[Link](calculerFactorielle);
20
Fonction fléchée dans une expression de fonction avec this
let oCylindre = {
rayon: 10,
hauteur: 20,
couleur: "vert",
volume: function() {
// fonction fléchée, forme avec accolades
// ======================================
let surfaceBase = () => {
[Link](this);
return [Link] ** 2 * [Link];
}
// fonction fléchée, forme courte
// ==============================
// let surfaceBase = () => [Link] ** 2 * [Link];
return surfaceBase() * [Link];
}
};
[Link]("</pre>");
[Link]("\nRayon de oCylindre: " + [Link]);
[Link]("\nHauteur de oCylindre: " + [Link]);
[Link]("\nCouleur de oCylindre: " + [Link]);
[Link]("\nVolume de oCylindre: " + [Link]());
[Link]("</pre>");
21