Chapitre 3: JavaScript
Plan du Chapitre
▪ Introduction à JavaScript
▪ Core JavaScript
2
Introduction
Interagir avec
Manipulerles les éléments
événements HTML Valider lesformulaires
webcôté client
Drag& Drop
Faire un peudedessin et
desanimations,et bien
d'autreschoses !
3
Introduction à JavaScript
4
JavaScript C’est quoi ?
▪ JavaScript (JS) est un langage de programmation qui sert principalement à
dynamiser et à rendre interactifs les pages WEB.
▪ Exécuté sur vos machine donc côté Client.
▪ L’un des langages WEB les plus utiles et membre du fameux triplet :
▪ HTML pour le contenu
▪ CSS pour la présentation
▪ JS pour le comportement
▪ JavaScript est:
▪ Haut niveau
▪ Dynamique
▪ Non typé
▪ Interprété
5
Compilé vs Interprété
▪ Compilation
▪ Un compilateur va traduire le programme dans un code spécifique à la machine cible
(l’exécutable).
▪ Etapes :
▪ Le code source est analysé et parsé : C’est la ou on détecte les erreurs.
▪ Un générateur de code produit l’exécutable.
▪ Le code est ensuite exécuté
▪ Interprétation
▪ Le code source n’est pas directement exécuté par la machine cible.
▪ Un autre programme (i.e. l’interpréteur) lit et exécute le code source.
▪ Dans l’interprétation le code source est traduit en un code intermédiaire qui est ensuite
traduit en en un code machine. 6
1. Core JavaScript
7
Plan Core JS
▪ Les bases du JavaScript
▪ Les variables
▪ Les types de données
▪ Operateurs et Expressions
▪ Structures conditionnelles et itératives
▪ Les Tableaux
▪ Dates et Times
8
Insertion de JavaScript avec HTML
▪ Le code JavaScript pourra être inséré:
▪ Dans un document HTML
▪ JavaScript est inséré entre les balises <script> et </script>.
▪ N'importe quel nombre de scripts pourra être inséré dans un document HTML.
▪ Les scripts peuvent être placés dans la section <body> ou dans la section <head> d'une page HTML,
ou dans les deux.
▪ Dans un fichier externe
▪ Les scripts externes sont pratiques lorsque le même code est utilisé dans de nombreuses pages Web .
▪ Les fichiers JavaScript ont l'extension de fichier .js.
▪ Pour utiliser un script externe, placez le nom du fichier de script dans l'attribut src d'une balise
<script>: Exemple : <script src="[Link]"></script>
▪ La référence de script externe pourra être inséré dans <head> ou <body>. Le script se comportera
comme s'il se trouvait exactement à l'emplacement de la balise <script>.
▪ Les scripts externes ne peuvent pas contenir de balises <script>.
9
Insertion de JavaScript avec HTML
▪ Code Js dans le document HTML ▪ Code JS dans un fichier externe
Code HTML
Code Js
10
Insertion de JavaScript avec HTML
▪ Code Js dans le document HTML ▪ Code JS dans un fichier externe
11
La structure lexicale de JavaScript
▪ JS est sensible à la casse
▪ Les tags html et ces attributs doivent être représenté en minuscule coté JS.
▪ JS ignore les espaces et les retours à la ligne.
▪ Cependant formater votre code c’est UN DEVOIR
▪ Les commentaires
▪ // : commente le texte jusqu’à la fin de la ligne
▪ /* text */ : Commente un bloc
12
La structure lexicale de JavaScript
▪ Identifiants
▪ Ce sont des noms. En JavaScript, ils sont utilisés pour nommer des variables (et des
mots-clés, des fonctions et des étiquettes).
▪ Ils sont sensibles à la casse
▪ Les règles relatives aux noms légaux sont sensiblement les mêmes dans la plupart des
langages de programmation.
▪ En JavaScript:
▪ Le premier caractère doit être une lettre, un trait de soulignement (_) ou un signe dollar ($).
▪ Caractères suivants peuvent être des lettres, des chiffres, des traits de soulignement ou des signes
dollar.
▪ Mots clé réservés: Certain identifiants sont réservés comme mot clé
break delete function return
typeof
case do if switch var
catch else in this void
continue false instanceof throw while
debugger finally new true with
default for null try 13
Les variables
▪ Les variables sont déclarées avec le mot clé var.
▪ Si une variable n’est pas initialisée elle aura la valeur undefined.
▪ Une variable déclarée sans utiliser le mot var est une variable globale.
▪ Les variables sont non typées, le type est associé lors de l’exécution et il peut
changer.
14
La portée des variables
▪ La portée d’une variable est l’emplacement dans lequel elle est définie.
▪ Variables globales : ce sont les variables définies dans tout le script JS.
▪ Variables locales
▪ Déclarées dans le corps d’une fonction
▪ Vous devez toujours utiliser var pour les variables locales
▪ Exemple
15
Les chaines
▪ Les chaines en JS peuvent être mises entre ’ ou «
▪ Il y a deux types de chaines de caractère, le type primitif et les strings
▪ var primitifChaine = « bjr »;
▪ var varString = new String(« bjr »);
▪ Pour échapper un caractère spécial on utilise \
▪ \n, \’, \t, \\,…
▪ La concaténation se fait avec +
▪ Pour avoir le nombre de caractère on utilise l’attribut length.
▪ [Link]
16
Les chaines
vars= "hello, world" ondéclare une chaine
[Link](0) "h": premier caractère
[Link]([Link]-1) "d": le dernier caractère
[Link](1,4) "ell": les2éme3émeet 4émecaractère.
[Link](1,4) "ell": même résultat
"rld": le deuxièmeparamètre peut être négatif cequi indique qu’on commence par la
[Link](-3)
fin.
[Link]("l") 2:positiondelapremièreoccurrencedel, -1silachaineoule caractèren’existe pas.
[Link]("l") 10:position du dernier caractèreou chaine.
[Link]("l", 3) 3:position of first "l" at or after3
s[0] "h"
s[[Link]-1] "d"
[Link]() supprime lesblanc àgaucheet àdroite
17
La conversion de Type
▪ Deux types de conversion : implicite et explicite
▪ Conversion implicite
▪ Lorsque JS s’attend à avoir un type particulier, il le convertit automatiquement
▪ Pour les numériques, si la conversion n’est pas possible, la variable est convertit en NaN.
10 + " objets" // => "10 objets". 10 est converti en une chaine
"7" * "4" // => 28: Les chaines sont convertis en un entier
var n = 1 - "x"; // => NaN: x ne peut pas être convertit en un entier
n + " objets" // => "NaN objets": NaN est convertit en la
chaine"NaN"
▪ Conversion explicite
▪ Utilisation de : Boolean(), Number(), String(), Object()
▪ Utilisation de +
Number("3") // => 3
String(false) // => "false"
// => true
Boolean([])
// => new Number(3)
Object(3) // Même chose que String(x)
x + ""
// Même chose que Number(x).
+x 18
Les opérateurs
▪ Les opérateurs de calcul
▪ Dans les exemples suivants, la valeur initiale de x est 11.
Signe Dénomination Effet Exemple Résultat
+ Addition Additionne deux valeurs x+3 14
- Soustraction Soustrait deux valeurs x–3 8
* Multiplication Multiplie deux valeurs x*2 22
/ Division Divise deux valeurs x /2 5.5
% Modulo Reste de la division entière x%5 1
= Affectation Affecte une valeur à une variable x=5 5
19
Les opérateurs
▪ Les opérateurs de calcul : Exemple
20
Les opérateurs
▪ Les opérateurs de Comparaison
▪ Dans les exemples suivants, la valeur initiale de x est 11.
Signe Dénomination Exemple Résultat
== Egal x==11 True
< Inférieur x<11 False
<= inférieur ou égal x<=11 True
> Supérieur x>11 False
>= supérieur ou égal x>=11 True
!= Différent x!=11 False
21
Les opérateurs
▪ Les opérateurs de comparaison : Exemple
22
Les opérateurs
▪ Les opérateurs associatifs
▪ On appelle ainsi les opérateurs qui réalisent un calcul dans lequel une variable intervient
des deux côtés du signe = .
▪ Dans les exemples suivants, x vaut 11 et y vaut 5
Signe Effet Exemple Résultat
Additionne deux valeurs et stocke
+= x += y équivaut à x = x + y 16
le résultat dans la variable à gauche
Soustrait deux valeurs et stocke le
-= x -= y équivaut à x = x - y 6
résultat dans la variable à gauche
Multiplie deux valeurs et stocke le
*= x *= y équivaut à x = x * y 55
résultat dans la variable à gauche
divisé deux valeurs et stocke le
/= x /= y équivaut à x = x / y 2.2
résultat dans la variable à gauche
23
Les opérateurs
▪ Les opérateurs associatifs: Exemple
24
Les opérateurs
▪ Les opérateurs d'incrémentation
▪ Ces opérateurs permettent d’augmenter ou diminuer la valeur de la variable d'une unité.
Ce qui sera fort utile, par exemple, pour mettre en place des boucles.
▪ Dans les exemples x vaut initialement 3.
Signe Effet Exemple Signification Résultat
Augmente d’une unité
++ Incrémentation x++ équivaut à x=x+1 4
la variable x
Diminue d’une unité la
-- Décrémentation x-- équivaut à x=x-1 2
variable x
25
Les opérateurs
▪ Les opérateurs Logique
Signe Dénomination Syntaxe Signification
&& ET logique (condition1) && (condition2) Vrai si les deux conditions sont réalisées
|| OU logique (condition1) || (condition2) Vrai si l’une des 2 conditions est réalisée
! NON logique ! condition Inverse l’état d’une variable booléenne
26
Exercice d’application
▪ Ecrire un script qui permet de calculer la surface et le périmètre d’un rectangle
à partir des valeurs saisies par l’utilisateur
Vous utiliserez les fonctions alert(qui affiche une chaîne de caractères) et
prompt (qui invite à la saisie d'une donnée), dont voici les syntaxes :
alert(Chaîne à afficher à l'écran)
variable=prompt(Question à afficher à l'écran)
27
Les structures de contrôle conditionnelles
▪ L’expression if
if (condition vraie) {
une ou plusieurs instructions;
}
▪ L'expression if...else
if (condition vraie) {
instructions1;
}
else {
instructions2;
}
▪ L'expression Switch
Switch (expression)
{
case valeur 1 : traitement 1; break;
case valeurs 2: traitement 2; break;
….
case valeur n : traitement n; break ;
default: traitement d ;
} 28
Les structures de contrôle itératives
▪ L'expression for permet d'exécuter un bloc d'instructions un certain nombre de
fois en fonction de la réalisation d'un certain critère. Syntaxe est :
for (valeur initiale ; condition ; progression)
{
instructions;
}
▪ L'instruction while permet d'exécuter une instruction (ou un groupe
d'instructions) un certain nombre de fois. Syntaxe est:
while (condition vraie)
{
Traitement;
}
▪ L’instruction do…While permet de répéter l'exécution des instructions du corps
de la boucle tant que la condition est vérifiée. Syntaxe est :
Do
{ Instructions; }
While (expression_conditionnelle); 29
Les tableaux
▪ Un tableau est une suite de valeurs de différents types.
▪ Pour initialiser un tableau on a plusieurs méthodes :
▪ monArray = [val1, val2, ,valN];
▪ monArray = new Array();
monArray =[ ];
monArray =[1+2,3+4]; / / 3,7
var matrice= [[1,2,3], [4,5,6],[7,8,9]];
var t = newArray(1,2,3) var t=[1,2,3]
30
Les tableaux
▪ Lire un élément du tableau
▪ Avec l’opérateur []
▪ Un tableau peut être tronqué en modifiant l’attribut length
▪ Ajout et suppression d’éléments
▪ push(): ajoute une valeur à la fin du tableau
▪ unshift(): ajoute une valeur au début du tableau
▪ delete: supprime un élément
▪ Itérer sur un tableau
▪ for ou for/in
31
Les tableaux
32
Les tableaux
▪ Les méthodes sur les tableaux :
▪ la méthode concat permet de concaténer 2 tableaux et de retourner le tableau résultat.
▪ la méthode forEach permet de parcourir le tableau.
▪ Elle prend en paramètre la fonction à exécuter à qui elle fourni la valeur actuelle du tableau son
indice et le tableau en question.
▪ Les méthodes de recherche sont les mêmes que les chaines mais d’une façon générique
vu que le tableau contient des éléments de différents types. Pour rappel les méthodes
sont indexof( ) et lastIndexOf( ).
▪ Afin de trier un tableau nous utilisons la méthode sort( ) qui transforme les éléments du
tableau en chaine de caractère et effectue le trie par ordre alphabétique.
33
Les tableaux
▪ Afin de trier un tableau nous utilisons la méthode sort( ) qui transforme les
éléments du tableau en chaine de caractère et effectue le trie par ordre
alphabétique.
▪ La fonction sort prend un paramètre facultatif qui est une fonction qui spécifie
l’ordre de trie. Cette fonction devra retourner un entier (-1 si le 1er est
inférieur au second, 0 si égaux et 1 sinon).
▪ Pour extraire une portion d’un tableau on utilise la même fonction que les
chaines slice.
▪ Afin de modifier une partie du tableau on utilise la méthode splice(indice,
nbElement, var1, var2,…, varN) qui extrait les nbElement à partir de l’indice
indice et les remplace par les variables varn). Seul les deux premiers
paramètres sont obligatoires
34
Les tableaux: Exemple de Tri
35
Dates et Times
▪ Dans JS l’heure et le temps sont gérés par l’objet Date.
▪ Stocké sous forme de timestamp (nombre de millisecondes écoulées depuis le
1er Janvier1970).
var maDate = new Date(2010, 0, 1); // Premier jour du premier mois
// de 2010
var apres = new Date(2010, 0, 1, // Même jour, à 5:10:30pm, heure
17, 10, 30); locale
var mnt = new Date(); // Date et heure actuelles
[Link]() // => 2010
[Link]() // => 0
[Link]() // => Jour du mois 1
[Link]() // => Jour de la semaine (0:6)
0 représente dimanche.
[Link]() // => Heure (0:23) 17
[Link]() // (0:59)
[Link]() // (0:59)
[Link]() // (0:999)
[Link]() // retourne le timestamp de l’objet
[Link](timestamp) // modifie l’objet selon letimestamp 38
Dates et Times
Les méthodes SetDate sont utilisées pour définir une partie d'une date:
Method Description
setDate() Définir le jour sous forme de nombre (1-31)
setFullYear() Définir l’année (mois et jour optionelle)
setHours() Définir l’heure (0-23)
setMilliseconds() Définir les millisecondes (0-999)
setMinutes() Définir les minutes (0-59)
setMonth() Définir le mois(0-11)
setSeconds() Définir les secondes (0-59)
setTime() Définir l'heure (millisecondes depuis le 1er janvier 1970)
37
Dates et Times: Exemple
38