Javascript: Langages Web L2

JavaScript
Langages web L2
Olivier Mallet
Université de Rouen
1 Introduction
2 Notions fondamentales
3 Fonctions et méthodes
4 Objets
5 Objets prédéfinis
6 Interface DOM et styles dynamiques
7 Les API de HTML5
8 Frameworks
Introduction
Généralités sur JavaScript
Langage interprété permettant d’ajouter de l’interactivité à une page

web
Développé en 1995 par Netscape sous le nom de LiveScript
Standardisé en 1997 par Ecma International (langage ECMAScript)
Langage orienté objet
Exécuté côté client (généralement)
Code source visible par l’utilisateur
Élément de l’architecture AJAX
Ne pas confondre JavaScript et Java !
Un utilisateur peut désactiver JavaScript totalement ou partiellement
Olivier Mallet (Université de Rouen) JavaScript 3 / 132

Introduction
Insertion de code JavaScript dans une page HTML
Dans une balise <script> (qui peut se placer dans <head> ou dans
<body> )
Code interne :
<script>

</script>
Code externe (allège les pages et facilite la maintenance) :
<script src = "url/script.js"></script>
Dans un attribut de gestion d’évènements
Exemple
<img src="img.jpg" alt="Image" onclick="alert(’Bonjour !’);" />

Notions fondamentales
Variables
Déclaration : var maVariable;

Typage dynamique
Noms sensibles à la casse
Initialisation : maVariable = 0;
La variable est implicitement déclarée si elle ne l’était pas encore
Attention si on est dans le corps d’une fonction (voir les transparents
suivants) !
Déclaration + initialisation : var maVariable = 0;
Types possibles :
Chaîne de caractères : entre " " ou ’ ’ , concaténation avec +
Nombre
Booléen : true 6= false
Remarque
Toute valeur est équivalente à true sauf false , 0, -0, "" , undefined, null , NaN

Initialisation d’une variable dans une fonction
Sans var : autorisé mais variable globale

Exemple
var x = 0; // variable globale
function f() {
x = 1; // on modifie la variable globale
return x;
}
alert(f()); // affiche : 1
alert(x); // affiche : 1
Remarque
Si on enlevait la première ligne de code, le résultat serait le même mais la
fonction créerait une variable globale au lieu de modifier une variable
globale existante.

Initialisation d’une variable dans une fonction (2)
Avec var : variable locale à la fonction

Exemple
var x = 0; // variable globale
function f() {
var x = 1; // variable locale
return x;
}
alert(f()); // affiche : 1
Remarque
Si on enlevait la première ligne de code, le premier appel à alert afficherait
1 et le deuxième ne fonctionnerait pas car la variable globale x ne serait
pas définie.

Le mode strict
L’instruction "use strict"; au début d’un script ou d’une fonction

active le mode strict pour ce script ou cette fonction
En mode strict, on ne peut pas (cela déclenche une erreur) :
utiliser une variable sans l’avoir déclarée
dupliquer un nom d’argument dans une fonction
supprimer une variable ou une fonction. . .
Exemple
"use strict";
x = 1; // erreur : variable non déclarée

L’opérateur let
Permet de déclarer une variable dont la portée est un bloc (6= variable
globale ou locale à une fonction)
Exemple
{
let x = 1;
}
// on ne peut pas utiliser x ici
Exemple
var x = 0;
{
let x = 1;
}
Différence entre var et let dans une boucle
Exemple
var i = 1;
for (var i = 0 ; i < 5; i++) {
// instructions
}
alert(i); // affiche : 5
Exemple
let i = 1;
for (let i = 0 ; i < 5; i++) {
// instructions
}
alert(i); // affiche : 1

Redéclarer une variable
Autorisé :
Redéclarer avec var une variable déclarée avec var
Redéclarer avec let , dans un autre bloc, une variable déclarée avec let
ou var
Interdit :
Redéclarer avec let une variable déclarée avec var dans le même
contexte
Redéclarer avec let une variable déclarée avec let dans le même
contexte
Redéclarer avec var une variable déclarée avec let dans le même
contexte

Exemples de redéclarations autorisées
Exemple
var x = 0;
var x = 1;
{
var x = 2;
}
Exemple
let y = 0;
{
let y = 1;
alert(y); // affiche : 1
}

Exemples de redéclarations interdites
Exemple
var x = 0;
let x = 1;
{
var y = 2;
let y = 3;
}
Exemple
let z = 0;
let z = 1;
{
let a = 2;
let a = 3;
}

Exemples de redéclarations interdites (suite)
Exemple
let b = 0;
var b = 1;
{
let c = 2;
var c = 3;
}

Constantes
Définies avec le mot-clé const

Il faut leur donner une valeur dès la déclaration
Exemple
const PI = 3.14159265359;
Peuvent être globales ou locales (à une fonction ou à un bloc)

Une constante locale masque une éventuelle constante globale de
même nom
On ne peut pas réaffecter une constante
Exemple
PI = 22/7; // erreur !

Constantes : remarque
Le mot-clé const ne définit pas une valeur constante mais une

référence constante à une valeur
On ne peut donc jamais réaffecter une constante. . .
. . . mais on peut changer les propriétés d’un objet ou les valeurs d’un
tableau affecté à une constante
Exemple
Autorisé :
const tab = ["truc", "machin", "bidule"];
tab[1] = "chose";
Interdit :
const tab = ["truc", "machin", "bidule"];
tab = ["truc", "chose", "bidule"];

Opérateurs
Arithmétiques : +, -, *, /, %, ++, --
Logiques : &&, ||, !
Comparaison : ==,!=, ===, !==, >, <, >=, <=
Bit à bit : << (décalage à gauche), >> (décalage à droite), & (et), |
(ou), ˜ (négation), ˆ (ou exclusif)
// En binaire, 12 = 1100 et 9 = 1001
alert(12 & 9); // affiche : 8 (1000)
alert(12 | 9); // affiche : 13 (1101)
alert(12 ^ 9); // affiche : 5 (0101)
alert(~12); // affiche : -13 (1...10011)
alert(12 << 2); // affiche : 48 (110000)
alert(12 >> 2); // affiche : 3 (11)

Opérateurs (2)
Affectation : =, +=, -=, *=, /=, %=, <<=, >>=, &=, |=, ˆ=
Conditionnel : (condition) ? valeur1 : valeur2
Exemple
var statut = (age>=18) ? "majeur" : "mineur";

Conditions et boucles
if
Remarque
On peut écrire if(x) pour tester si x existe et est non vide (= équivalent à
true )
if... else
if... else if... else
switch (comparaison sur la valeur et sur le type)
for
while
do... while
break : interrompt une boucle
continue : passe à l’itération suivante d’une boucle
Fonctions et méthodes
Fonctions
Déclaration d’une fonction :

function ma_fonction(arg_1, arg_2, ..., arg_N) {
...
return valeur; // si la fonction renvoie une valeur
}
Noms sensibles à la casse

Appel d’une fonction : ma_fonction(val_1, val_2, ..., val_N); où val_i
est la valeur prise par arg_i
Passage par valeur
Deux fonctions ne peuvent pas porter le même nom et différer
seulement par le nombre d’arguments
On peut ne pas préciser certains arguments lors de l’appel (leur valeur
est alors undefined)

Une fonction à 2 arguments (ou 1, ou 0)
Exemple
function distance(a,b) {
if (b == undefined) {
if (a == undefined) {
return 0;
}
return distance(a,0);
}
return Math.abs(a-b); // renvoie |a-b|
}
alert(distance()); // affiche : 0
alert(distance(-5)); // affiche : 5
alert(distance(3,14)); // affiche : 11

Valeurs par défaut pour les arguments
Exemple (Ce code fait la même chose que l’exemple précédent)

function distance(a=0, b=0) { // a et b ont une valeur par défaut de 0
return Math.abs(a-b); // renvoie |a-b|
}
alert(distance()); // affiche : 0
alert(distance(-5)); // affiche : 5
alert(distance(3,14)); // affiche : 11

Fonction à nombre illimité d’arguments
Exemple
function addition() {
var args = addition.arguments;
var somme = 0;
for(var i=0; i<args.length; i++)
somme += args[i];
return somme;
}
addition(3, 7) renvoie 10
addition(1, 8, 4, 13) renvoie 26

Fonctions anonymes
function(arg1, arg2, ..., argN) {code}

Peut être affectée à une variable ou à un argument de fonction
Comparer :
Caml : let f = function x -> 2*x;;
JavaScript : var f = function(x) {return 2*x;};

Quelques fonctions prédéfinies
parseInt(chaine) si la chaîne de caractères chaine commence par un

entier, renvoie cet entier (NaN si conversion impossible)
Exemple
parseInt("3.14") // renvoie 3
parseInt("7 nains") // renvoie 7
parseFloat(chaine) même principe mais conversion en nombre décimal

isNaN(valeur) renvoie false si valeur est un nombre ou peut être
converti en nombre (valeur == NaN ne marche pas !)
Exemple
isNaN("123") // renvoie false
isNaN("7 nains") // renvoie true
isNaN("Bonjour") // renvoie true

Quelques fonctions prédéfinies (2)

typeof expr renvoie le type de l’expression expr (undefined si c’est
une variable non déclarée ou non initialisée)
Exemple
typeof "Bonjour" // renvoie "string"
typeof 3.14 // renvoie "number"
eval(chaine) évalue et exécute l’expression JS indiquée dans chaine

Exemple
var x = 10;
var y = eval("x*x");
Remarque
À utiliser avec discernement (problèmes de performance et de sécurité) !
Boîtes de dialogue
alert(message) affiche message dans une boîte de dialogue avec un

bouton OK
confirm(message) affiche message dans une boîte de dialogue avec 2
boutons (OK et Annuler) et renvoie un booléen qui indique
le choix de l’utilisateur
prompt(message, val_defaut) affiche une boîte de dialogue avec
message, une zone de saisie et 2 boutons (OK et Annuler)
et renvoie la valeur saisie (ou null si on clique sur Annuler)
Exemple
var nom = prompt("Entrez votre nom", "Mon nom");
alert("Bonjour, " + nom + " !");

Écrire dans la console JavaScript
Les navigateurs modernes disposent d’une console qui affiche les

messages d’erreur et permet de taper du code JavaScript de façon
interactive
Accès via les outils de développement (raccourci pour Firefox ou
Chrome : Ctrl+Maj+I) ou par un raccourci direct
Pour écrire dans la console depuis un programme JavaScript :
console.log(message);
Exemple (Affichage de la valeur d’une variable dans la console)

console.log("i = " + i);
Plus pratique qu’un alert pour le débogage (ne bloque pas le script)
Penser à supprimer les appels à console.log avant de mettre le site
en production

Objets
Introduction
Objet : structure de données qui contient des propriétés

Propriétés : méthodes (fonctions) ou attributs (autres)
En JS, on crée souvent des objets à l’aide d’une fonction spéciale
appelée constructeur qui initialise les différentes propriétés d’un objet
Un constructeur permet de créer plusieurs objets sur le même modèle
JavaScript fournit de nombreux constructeurs d’objets prédéfinis,
permettant de créer des tableaux, des chaînes de caractères. . .
On peut aussi définir des constructeurs personnalisés ou créer des
objets directement, sans passer par un constructeur
Attention !
Le fonctionnement des objets en JavaScript est particulier et différent de
celui de Java !

Objets Création et utilisation d’objets
Création d’un constructeur
Exemple
function Rectangle(a, b) {
this.longueur = a; // définition d’un attribut
this.largeur = b;
this.surface = function() { // définition d’une méthode

return (this.longueur) * (this.largeur);
}
}
2 constructeurs ne peuvent pas porter le même nom (ce sont des

fonctions)
Mais on peut définir un constructeur qui accepte un nombre variable
d’arguments (comme pour les autres fonctions)

Création et utilisation d’objets

Création : var objet = new Objet(parametres);
Exemple
var r = new Rectangle(2, 1);
Utilisation d’un attribut : objet.attribut

Utilisation d’une méthode : objet.méthode(arg1, arg2, ...)
Exemple
alert("longueur : " + r.longueur + ", largeur : "
+ r.largeur + ", surface : " + r.surface());
obj instanceof Objet teste si obj a été créé par le constructeur Objet
Exemple
alert(r instanceof Rectangle); // affiche : true
Création d’un objet sans constructeur
Notation {prop1: val1, prop2: val2 ...}

Une telle valeur peut être affectée à une variable, renvoyée par une
fonction. . .
Exemple
var qqn = {
prenom : "Jean",
nom : "Dupont",
age : 42
};
On accède aux propriétés de l’objet comme vu précédemment

Exemple
alert(qqn.age); // affiche : 42

Le format JSON
JSON = JavaScript Object Notation

Format de données issu de la syntaxe des objets de JavaScript
Utile pour stocker des données structurées ou en envoyer entre un
navigateur et un serveur
On peut facilement convertir du texte au format JSON en objets
JavaScript et vice versa
Format indépendant du langage : il existe aussi des fonctions de
conversion dans d’autres langages

Le format JSON : syntaxe
Les données se composent de couples nom - valeur

Le nom est toujours entre guillemets doubles
Types possibles pour les valeurs :
nombre
chaîne de caractères (entre guillemets doubles)
objet
tableau
booléen
null
Les données sont séparées par des virgules
Les objets sont entre accolades
Les tableaux sont entre crochets

Le format JSON : exemples
Exemple (Version JSON de l’objet du transparent 32)

{ "prenom" : "Jean", "nom" : "Dupont", "age" : 42 }
Exemple (Un objet contenant un tableau et un autre objet)

{"prenoms" : ["Jean", "Norbert", "Isidore"],
"adresse" : {"numero" : 1, "rue" : "avenue de Bretagne", "ville" : "Rouen"}}

Le format JSON : fonctions de conversion
JSON → objet JS : JSON.parse
Exemple
var txt = ’{"prenom":"Jean","nom":"Dupont","age":42}’;
var qqn = JSON.parse(txt);
alert (qqn.nom); // affiche : Dupont
Objet JS → JSON : JSON.stringify
Exemple
var qqn = {prenom:"Jean",nom:"Dupont",age:42};
var txt = JSON.stringify(qqn);
alert (txt); // affiche : {"prenom":"Jean","nom":"Dupont","age":42}

Parcourir les propriétés d’un objet avec for ... in ...
for (var prop in obj) : boucle sur les propriétés de l’objet obj
À chaque étape de la boucle :
prop est une chaîne de caractères qui contient le nom de la propriété
obj[prop] contient la valeur correspondante
Remarque
La notation obj[prop] peut s’utiliser même en dehors d’une boucle for :
qqn["age"] est équivalent à qqn.age .

Parcourir les propriétés d’un objet : exemple
Exemple (Tout savoir sur un rectangle (avec le constructeur

précédent))
var r = new Rectangle(5,3);
var infoRect = "";
for (var attr in r) {
infoRect += attr + " : " + r[attr] + "\n";
}
alert(infoRect);
Résultat :
longueur : 5
largeur : 3
surface : function () {
return (this.longueur) * (this.largeur);
}
Parcourir les propriétés d’un objet : autre exemple
Exemple (Affichage d’informations sur le navigateur de l’utilisateur)

var infoNav = "";
for (var prop in navigator) {
infoNav += prop + " : " + navigator[prop] + "\n";
}
alert(infoNav);
Le résultat dépend du système d’exploitation et du navigateur.

Objets Modification d’objets existants
Ajout d’attributs ou de méthodes
Ajouter un attribut à un objet : objet.attribut = valeur;

Ajouter une méthode à un objet :
objet.methode = function(arguments) {code};
Exemple (On ajoute à r une méthode qui calcule son périmètre)

r.perimetre = function() {
return 2 * (this.largeur + this.longueur);
}

Objets Modification d’objets existants
Ajout d’attributs ou de méthodes à tous les objets créés

par un constructeur
JavaScript est un langage à prototype : tout constructeur a un

attribut prototype (modèle des objets créés par ce constructeur)
En modifiant les propriétés du prototype d’un constructeur, on affecte
tous les objets créés par celui-ci
Exemple (On ajoute à tous les rectangles une méthode qui calcule le
périmètre)
Rectangle.prototype.perimetre = function() {
return 2 * (this.largeur + this.longueur);
}
Ça marche même pour les objets prédéfinis de JavaScript (à utiliser

avec discernement)

Objets prédéfinis Array (tableaux)
L’objet Array
Tableau formé de cases indicées par des entiers

Définition : var tab = [];
Initialisation : tab[i] = valeur;
Les deux en même temps : var tab = ["do","re","mi"];
L’élément d’indice i est donné par tab[i]
Parcours : boucle for classique ou méthode forEach du tableau (voir
plus loin)
Longueur du tableau tab : tab.length

Méthodes de l’objet Array
concat(tab) renvoie la concaténation du tableau courant avec tab

join(sep) renvoie une chaîne contenant les éléments du tableau séparés
par la chaîne sep (ou par une virgule si sep non précisé)
pop() enlève et renvoie le dernier élément du tableau
push(e1, e2, ...) ajoute des éléments
reverse() inverse l’ordre des éléments (modifie le tableau)
slice(x, y) renvoie un tableau contenant les éléments entre les indices
x et y-1
indexOf(val) / lastIndexOf(val) position de la 1re / dernière
occurrence de val dans le tableau (-1 en cas d’échec)
sort(fonction_tri) trie le tableau selon une fonction de tri (par
défaut : ordre alphabétique)
fonction_tri(a, b) : < 0 si a<b, 0 si a=b, > 0 si a>b
Méthodes de l’objet Array (2)
find(f) renvoie la valeur du 1er élément pour lequel la fonction f

renvoie true
findIndex(f) renvoie l’indice du 1er élément pour lequel la fonction f
renvoie true
forEach(f) appelle la fonction f pour chaque élément du tableau
Remarque
Dans les 3 cas, f prend 3 arguments :
valeur de la case
indice de la case
tableau
Pour find et findIndex , f renvoie un booléen

Tableaux : exemple
Exemple
var tab = [7,2,5,1,8,4,6,3];
alert(tab.join(";"));
// affiche : 7;2;5;1;8;4;6;3
alert(tab.slice(2,5).join(";"));
// affiche : 5;1;8
alert(tab.pop()); // affiche : 3
tab.push(11,9,10);
// affiche : 7;2;5;1;8;4;6;11;9;10
tab.reverse();
// affiche : 10;9;11;6;4;8;1;5;2;7

Tableaux : exemple (suite)
Exemple
// rappel : tab contient 10;9;11;6;4;8;1;5;2;7
tab.sort(function(a, b) {
if (a < b)
return -1;
else if (a > b)
return 1;
else
return 0;
});
// affiche : 1;2;4;5;6;7;8;9;10;11

Exemples d’utilisation de find et findIndex
Exemple
var tab = [1,2,5,14,42];
function auMoins10(valeur,indice,tableau) {
return valeur >= 10;
}
alert(tab.find(auMoins10)); // affiche : 14
alert(tab.findIndex(auMoins10)); // affiche : 3

Exemple d’utilisation de forEach
Exemple
var tab2 = [4,8,15,16,23,42];
var chaine = "";
function ajouterCarre(valeur,indice,tableau) {
chaine += valeur * valeur + " ";
}
tab2.forEach(ajouterCarre);
alert(chaine); // affiche : 16 64 225 256 529 1764

Objets prédéfinis Date
L’objet Date
var date1 = new Date(); : date et heure de sa création

var date2 = new Date(a, m, j); : date donnée, heure = 0
var date3 = new Date(a, m, j, h, min, s);
Méthodes :
getTime() nombre de millisecondes depuis le 1/1/1970 à minuit
getYear() année sur 2 chiffres
getFullYear() année sur 4 chiffres
getMonth() mois (entier : 0=janvier, 1=février, . . . )
getDate() no du jour dans le mois (entre 1 et 31)
getDay() jour de la semaine (entier : 0=dimanche, 1=lundi, . . . )
getHours() heures (entre 0 et 23)
getMinutes() minutes (entre 0 et 59)
getSeconds() secondes (entre 0 et 59)
setTime, setDate. . . pour modifier les propriétés
L’objet Date : exemple
var d = new Date(2018,6,14); // 14 juillet 2018
alert(d.getTime()); // affiche : 1534197600000
alert(d.getDay()); // affiche : 6
d.setMonth(1); // 14 février 2018
alert(d.getDay()); // affiche : 3

La fonction setTimeout
Déclenche l’appel d’une fonction au bout d’un certain délai

var c = setTimeout(fonction, delai [,arguments]); (délai en millisecondes)
Annuler un appel programmé avec setTimeout : clearTimeout(c)
Exemple (Affichage d’un message au bout de 5 secondes)

function message() {
alert("Coucou !");
}
setTimeout(message, 5000);

La fonction setInterval
Déclenche l’appel d’une fonction à intervalles réguliers

var c = setInterval(fonction, intervalle [,arguments]); (intervalle en
millisecondes)
Annuler un appel programmé avec setInterval :
clearInterval(c)
Exemple (Horloge dynamique (très) primitive)

function horloge() {
d = new Date();
alert("Il est " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds());
}
setInterval(horloge, 1000);

Objets prédéfinis Math
L’objet Math
Bibliothèque d’attributs et de méthodes pour les calculs

mathématiques
Attributs : PI, E
Méthodes :
Méthodes de base : abs(), ceil(), floor(), round(), max(),
min(), pow(), random(), sqrt()
Fonctions trigonométriques : cos(), sin(), tan(), asin(), acos(),
atan()
log(), exp()

Objets prédéfinis Math
L’objet Math : exemple
Exemple
alert(Math.ceil(3.14)); // affiche : 4
alert(Math.floor(2.718)); // affiche : 2
alert(Math.round(1.618)); // affiche : 2
alert(Math.pow(5,3)); // affiche : 125
alert(Math.cos(2*Math.PI));
// affiche : 1
alert(Math.random());
// affiche un nombre entre 0 et 1

Objets prédéfinis String (chaînes de caractères)
L’objet String
Le type string (type des chaînes de caractères) est un type primitif
Exemple (Cette chaîne est de type string, pas de type object)

var chaine = "Bonjour";
alert (typeof chaine); // affiche "string"
Mais il est possible d’appeler sur une chaîne de caractères les

propriétés de l’objet String
Même phénomène pour les nombres et les booléens
Attribut : length (longueur de la chaîne)

Méthodes de l’objet String
charAt(x) caractère en position x (les indices commencent à 0)

indexOf(mot) / lastIndexOf(mot) position de la 1re / dernière
occurrence de mot dans la chaîne (-1 en cas d’échec)
replace(mot1, mot2) renvoie la chaîne obtenue en remplaçant les
occurrences de mot1 par mot2 dans la chaîne courante
split(sep) découpe la chaîne selon un séparateur et renvoie un tableau
contenant les morceaux (inverse de join)
substring(x, y) sous-chaîne allant de l’indice x à l’indice y-1
toLowerCase() renvoie la chaîne en minuscules
toUpperCase() renvoie la chaîne en majuscules

L’objet String : exemple
Exemple
var ch = "Bonjour";
alert(ch.indexOf("jour"));
// affiche : 3
alert(ch.replace("o","()"));
// affiche : B()nj()ur
alert(ch.substring(0,2));
// affiche : Bo
alert(ch.toUpperCase());
// affiche: BONJOUR

Objets prédéfinis RegExp (expressions régulières)
L’objet RegExp
Intérêt : vérification de format d’une donnée textuelle, recherche et
remplacement de motifs
Création : var reg = /motif à rechercher/options; ou var
reg = new RegExp("motif a rechercher","options");
Utilisation : reg.test(ch) teste si ch contient le motif de reg
Exemple
var reg = /jour/; // ou var reg = new RegExp("jour");
alert(reg.test("Bonjour")); // affiche : true
Recherche sensible à la casse

Pour une recherche insensible à la casse, rajouter l’option i
Exemple
var reg = /jour/i; // ou var reg = new RegExp("jour", "i");
alert(reg.test("Jour de fête")); // affiche : true
L’objet RegExp : des motifs un peu plus complexes
Opérateur « ou » : |
Exemple
var reg = /jour|soir|nuit/;
alert(reg.test("Bonjour")); // affiche : true
alert(reg.test("Bonne nuit")); // affiche : true
Parenthèses : /ver(s|t|re)/ est équivalent à /vers|vert|verre/

Symboles de début de chaîne (ˆ) et de fin de chaîne ($) pour
rechercher un motif seulement au début ou à la fin
Exemple (Tester si une chaîne commence par « Oui »)
var reg = /^Oui/;
alert(reg.test("Oui, je le veux")); // affiche : true
alert(reg.test("Alors ? Oui ou non ?")); // affiche : false

L’objet RegExp : classes de caractères
Classes de caractères : /pi[cefns]/ est équivalent à /pic|pie|pif|pin|pis/

Intervalles de caractères dans une classe :
[a-z] : n’importe quelle lettre minuscule (non accentuée)
[A-Z] : n’importe quelle lettre majuscule (non accentuée)
[0-9] : n’importe quel chiffre
[a-h] : n’importe quelle lettre de a à h
[a-z0-9] : une lettre minuscule ou un chiffre
Exemple
alert(/[A-Z]/.test("il n’y a que des minuscules")); // affiche : false
alert(/[0-9A-F]/.test("color: #BC05A9")); // affiche: true;

L’objet RegExp : classes de caractères (2)
Caractère ˆ au début d’une classe pour rechercher les caractères qui

ne sont pas dans cette classe
Exemple
Tout sauf une lettre : /[^a-zA-Z]/
N’importe quel caractère (sauf retour à la ligne) : .

L’objet RegExp : quantificateurs

Soit x un caractère, une classe ou une sous-expression entre
parenthèses, m et n 2 entiers
x? : x apparaît 0 ou 1 fois
x* : x apparaît 0, 1 ou plusieurs fois
x+ : x apparaît 1 ou plusieurs fois
x{n} : x apparaît n fois
x{n,m} : x apparaît entre n et m fois
x{n,} : x apparaît au moins n fois
Exemple
/Bonj(ou)+r/ trouve les mots « Bonjour », « Bonjouour »,
« Bonjououour ». . .
/Mon amie?/ est équivalent à /Mon ami|Mon amie/
Numéro de téléphone français sans séparateur : /0[1-9][0-9]{8}/
L’objet RegExp : caractères spéciaux
Les caractères ! ˆ $ ( ) [ ] { } ? + * . / \ | ont un sens

particulier dans les expressions régulières
Pour les utiliser comme des caractères normaux, il faut les échapper
avec un \
Exemple (Motif correspondant à une URL simple)
/http:\/\/www\.[a-z0-9]+\.[a-z]{2,4}/ permet de reconnaître par
exemple http://www.truc.info
Dans les classes de caractères, pas besoin d’échapper les caractères
spéciaux, sauf ] \ - (le tiret ne doit pas être échappé s’il est en
début ou en fin de classe)
Exemple
/[-a-z.\\]/ : un tiret, une minuscule, un point ou un antislash

L’objet RegExp : types génériques
\d un chiffre (équivalent à [0-9])

\D un caractère qui n’est pas un chiffre
\s caractère blanc (espace, tabulation, saut de ligne, saut de page)
\S un caractère qui n’est pas un caractère blanc
\w une lettre (non accentuée) ou un _
\W un caractère qui n’est pas une lettre ou un _
\n un retour à la ligne
\t une tabulation
Exemple (Recherche d’un nombre décimal dans une chaîne)

var reg = /-?\d+,\d+/;
alert(reg.test("J’ai eu 12,7 de moyenne"));
// affiche : true

L’objet RegExp : la méthode exec

reg.exec(chaine) renvoie un tableau dont la 1re case contient le 1er
motif de chaine correspondant à l’expression régulière (null si un tel
motif n’existe pas)
Exemple
var reg = /t.*t/;
alert(reg.exec("Si ton tonton tond ton tonton"));
// affiche : ton tonton tond ton tont
Recherche gloutonne : on renvoie le plus long motif possible

Pour une recherche non-gloutonne, ajouter ? après les quantificateurs
* ou +
Exemple
var reg = /t.*?t/;
alert(reg.exec("Si ton tonton tond ton tonton")); // affiche : ton t
L’objet RegExp : extraction de motifs avec les parenthèses
Exemple
var phrase = "J’habite à Rouen";
/^J’habite à (\S+)$/.exec(phrase);
alert(RegExp.$1); // affiche : Rouen
Exemple
var url = prompt("Entrez l’adresse de votre site web");
if (/http:\/\/www\.([a-z0-9]+)\.([a-z]{2,4})/.test(url)) {
alert("Domaine : " + RegExp.$1
+ " ; extension : " + RegExp.$2);
}
else {
alert("Adresse invalide !");
}

Remarque sur les parenthèses capturantes et exec
Les cases du tableau renvoyé par la méthode exec (autres que la première)
contiennent les motifs capturés par les couples de parenthèses
Exemple
var reg_url = /http:\/\/www\.([a-z0-9]+)\.([a-z]{2,4})/;
var url = "http://www.exemple.com";
var tab = reg_url.exec(url);
alert(tab.join(" ; "); // affiche : http://www.exemple.com ; exemple ; com

Extraction de motifs avec les parenthèses (suite)
Les parenthèses permettent de capturer jusqu’à 9 motifs (de

RegExp.$1 à RegExp.$9)
Quand on utilise des parenthèses pour encadrer une partie de
l’expression régulière (exemple : /ver(s|t|re)/ ), elles vont aussi
capturer un motif (par défaut)
Cela peut être gênant car on ne peut utiliser que 9 couples de
parenthèses capturantes
Si ce n’est pas ce qu’on veut, on ajoute ?: après la parenthèse
ouvrante
Exemple (Ces parenthèses ne capturent rien : la propriété RegExp.$1
ne reçoit pas de valeur)
/ver(?:s|t|re)/

Remplacement de motifs utilisant les expressions régulières
Méthode replace(mot1, mot2) de l’objet String : le 1er argument

peut être une expression régulière
On donne souvent l’option g à la regexp pour remplacer toutes les
occurrences du motif (sinon, seule la première est remplacée)
Exemple
var phrase = "Bonjour Jean ! Bonjour Claire !"
phrase2 = phrase.replace(/Bonjour/g, "Salut");
alert(phrase2); // affiche : Salut Jean ! Salut Claire !

Remplacement de motifs utilisant les regexp (2)
On peut extraire des informations avec les parenthèses capturantes et

les utiliser dans le 2e argument de la méthode
Exemple
var email = "Contact : toto@exemple.com";
email = email.replace(
/([a-z0-9._-]+)@([a-z0-9._-]+)\.([a-z]{2,6})/g,
"$1 {à} $2 {point} $3");
alert(email);
// affiche : Contact : toto {à} exemple {point} com

Autres méthodes de String utilisables avec les expressions

régulières
search(exp) fonctionne comme indexOf (sauf que l’argument est une
expression régulière)
match(exp) renvoie un tableau des occurrences de exp dans la chaîne
appelante
Exemple
var ou = "bijou caillou chou genou hibou joujou pou";
alert(ou.search(/c[a-z]*ou/)); // affiche : 6
var c = ou.match(/c[a-z]*ou/g); // c = ["caillou","chou"]
split(exp) coupe une chaîne selon une expression régulière

Exemple
var calcul = "12+34*5,67/8-90";
var tab = calcul.split(/[+*/-]/); // tab = ["12","34","5,67","8","90"]
Interface DOM et styles dynamiques Généralités
DOM et JavaScript
DOM (Document Object Model) : interface indépendante des

langages de programmation qui permet d’accéder à des documents
HTML ou XML et de les mettre à jour
Standard du W3C (1998)
Objets associés en JavaScript : window et ses attributs :
navigator
location
history
screen
document
Remarque
De nombreuses fonctions telles que alert, clearInterval,
clearTimeout, confirm, prompt, setInterval, setTimeout. . . sont
des méthodes de window (mais on ne les préfixe pas)

Interface DOM et styles dynamiques Le document et les éléments HTML en tant qu’objets
Structure arborescente d’un document HTML

<html>
html
<head>
<title>Titre</title>
</head>
<body> head body
<p>Ma photo :
<img src="img1.jpg"
alt="Photo" /> p
</p> title ol
<ol>
<li>Item 1</li>
<li>Item 2</li> #text #text img li li li
<li>Item 3</li>
</ol>
</body>
</html> #text #text #text
À chaque nœud de cet arbre correspond un objet dans le DOM

Attributs et méthodes de l’objet document
documentElement balise racine ( <html> )

createElement(nomBalise) crée un élément de type nomBalise (sans
le positionner dans la hiérarchie du document)
createTextNode(texte) crée un nœud de texte contenant la valeur de
texte (sans le positionner dans la hiérarchie du document)
getElementById(id) renvoie l’élément d’identifiant id
getElementsByTagName(nomBalise) renvoie la liste des éléments de
type nomBalise
querySelector(sel) renvoie le premier élément correspondant au
sélecteur CSS sel
querySelectorAll(sel) renvoie la liste des éléments correspondant au
sélecteur CSS sel

Attributs des éléments HTML
childNodes liste des enfants de l’élément courant

innerHTML contenu HTML de l’élément sous forme de texte
textContent contenu textuel de l’élément (sans balises)
Exemple
Code HTML :
<p id="ex">Un paragraphe <a href="toto.html">avec un lien</a></p>
Code JS :
var ex = document.getElementById("ex");
alert(ex.innerHTML);
// affiche : Un paragraphe <a href="toto.html"> avec un lien</a>
alert(ex.textContent);
// affiche : Un paragraphe avec un lien

Attributs des éléments HTML (2) et des nœuds de texte
parentNode nœud parent de l’élément

firstChild premier fils de l’élément
lastChild dernier fils de l’élément
previousSibling frère précédent de l’élément
nextSibling frère suivant de l’élément
Remarque
Les objets de type nœud de texte ont un attribut nodeValue, qui permet
d’accéder à leur contenu textuel.
Exemple (On reprend le code HTML du transparent précédent)

var ex = document.getElementById("ex");
alert(ex.firstChild.nodeValue); // affiche : Un paragraphe

Méthodes des éléments HTML
getElementsByTagName(nomBalise) liste des éléments de type

nomBalise descendants de l’élément courant
hasChildNodes() indique si l’élément a des enfants
appendChild(noeud) ajoute noeud à la fin de la liste des fils de
l’élément courant
insertBefore(noeud, enfant) ajoute noeud à la liste des fils de
l’élément courant, avant le nœud enfant
removeChild(noeud) supprime noeud de la liste des fils de l’élément
courant
replaceChild(nouveau, ancien) remplace ancien par nouveau dans
la liste des fils de l’élément courant

Méthodes des éléments HTML (2)
setAttribute(nom, valeur) donne à l’attribut nom de l’élément

courant la valeur valeur
getAttribute(nom) renvoie la valeur de l’attribut nom de l’élément
courant
removeAttribute(nom) supprime l’attribut nom de l’élément courant

Propriétés des champs de formulaire
value valeur du champ (y compris le contenu d’un <textarea> )

checked indique si une case ou un bouton radio est sélectionné
(booléen)
options tableau qui contient les éléments <option> d’un <select>
selectedIndex position dans le tableau options de l’option choisie dans
un <select>
selectedOptions liste des options choisies dans un <select>

DOM : exemple
Exemple (Un sommaire automatique)

Code HTML :
<h1>Ma page</h1>
<ol id="sommaire"></ol>
<h2>Introduction</h2>
<p>Bla bla</p>
<h2>Mais encore ?</h2>

<p>Bla bla bla</p>
<h2>Me contacter</h2>
<p>olivier.mallet@univ-rouen.fr</p>

DOM : exemple (suite)
Exemple (Code JavaScript de création du sommaire)

var titres = document.getElementsByTagName("h2");
for (i=0; i < titres.length; i++) {

var t = titres[i];
var texte = document.createTextNode(t.textContent);
var li = document.createElement("li");
li.appendChild(texte);
var sommaire = document.getElementById("sommaire");

sommaire.appendChild(li);
}

Interface DOM et styles dynamiques Les évènements
Attributs de gestion d’évènements des éléments HTML

quand on clique sur l’élément
onclick
quand l’élément est activé
onfocus
quand l’élément est désactivé
onblur
au chargement de l’élément (s’applique en général au
onload
<body> )
onmouseover quand le pointeur passe au-dessus de l’élément
onmouseout quand le pointeur quitte l’élément
onmousemove quand le pointeur se déplace sur l’élément
onkeydown quand on enfonce une touche du clavier sur l’élément
onkeyup quand on relâche une touche du clavier sur l’élément
onkeypress quand on frappe une touche du clavier sur l’élément
onchange quand on quitte un élément de formulaire en ayant modifié
sa valeur
onsubmit quand on soumet un formulaire
Évènements : exemple
Exemple
<html>
<head>
<title>Exemple JavaScript</title>
<script>
function message() {alert("Belle image, n’est-ce pas ?");}
</script>
</head>
<body>
<p>
<img src="cool.jpg" alt="Image" onmouseover="message();" />
</p>
</body>
</html>

Évènements : autre exemple

Si le code associé à un évènement renvoie false, il bloque l’exécution
normale de l’évènement
Exemple (Vérification de formulaire)
<script>
function test() { // teste si le nom contient au moins 2 lettres
var nom = document.getElementById("nom").value;
return (nom.length >= 2);
}
</script>
<form action="toto.php" method="get" onsubmit="return test();">


Votre nom : <input type="text" name="nom" id="nom" />
<input type="submit" value="Envoyer" />
</form>

Faire réagir un élément à un évènement
Méthode DOM-0 : objet.onevt = fonction;
Exemple
var truc = document.getElementById("toto");
truc.onclick = function(){alert("C’est à quel sujet ?");};
Méthode DOM-2 : objet.addEventListener(evt, fonction);
Exemple
var truc = document.getElementById("toto");
truc.addEventListener("click", function(){
alert("C’est à quel sujet ?");});
Avantage : on peut associer plusieurs fonctions à un même élément

pour le même évènement

Supprimer une association fonction-évènement
DOM-0 : objet.onevt = function(){};
Exemple
truc.onclick = function(){};
DOM-2 : objet.removeEventListener(evt, fonc);
Attention !
Ça ne marche que si fonc n’est pas une fonction anonyme !
Exemple
function fonc() {alert("OK");}
truc.addEventListener("click", fonc);
truc.removeEventListener("click", fonc);

Récupérer des informations sur un évènement
Une fonction associée à un élément pour un évènement peut avoir un

argument (de type Event) qui représente cet évènement
Quelques propriétés des évènements :
type type de l’évènement (click, focus. . . )
target élément dont l’évènement a été déclenché
clientX et clientY coordonnées du curseur
relatedTarget élément d’où on vient (avec mouseover) ou dans
lequel on entre (avec mouseout)
preventDefault() bloque l’exécution normale de l’évènement
Exemple
truc.addEventListener("click", function(e){
alert("Tu as cliqué en "+e.clientX+","+e.clientY);});

Récupérer la touche frappée par l’utilisateur
L’attribut charCode (pour les touches alphanumériques) / keyCode

(pour les autres) d’un évènement keydown, keyup ou keypress
donne le code ASCII correspondant à la touche
On peut ensuite utiliser la méthode String.fromCharCode(code) qui
renvoie le caractère correspondant
Exemple
document.addEventListener("keypress", function(e) {
alert("Tu as appuyé sur la touche " + String.fromCharCode(e.charCode));});

Interface DOM et styles dynamiques JavaScript et CSS
JavaScript et CSS
Attribut style pour les objets représentant les éléments HTML

style a des attributs qui correspondent aux propriétés CSS
Exemple (Modification des attributs de style en JavaScript)

Élément HTML : <p id="exemple">Ceci est un paragraphe</p>
Code JavaScript :
var elem = document.getElementById("exemple");

elem.style.backgroundColor = "yellow";
elem.style.margin = "50px";
Attribut id : identifiant d’un élément

Attribut className : classe(s) d’un élément

Gestion des classes avec classList
Attribut classList pour les objets représentant les éléments HTML

Représente la liste des classes de l’élément
Attribut length : taille de la liste
Principales méthodes :
contains(item) teste si la liste contient la valeur item
add(item1, item2, ...) ajoute ses arguments à la liste des classes
remove(item) supprime item de la liste
replace(item, item2) remplace item par item2 de la liste
toggle(item) ajoute item dans la liste s’il est absent, l’enlève s’il
est présent

Gestion des classes avec classList : exemple
Exemple
Code HTML :
<p id="truc" class="important difficile surprenant">Attention !</p>
Code JS :
var truc = document.getElementById("truc");
alert(truc.classList.length); // affiche : 3
alert(truc.classList.contains("difficile")); // affiche : true
truc.classList.add("machin");
truc.classList.remove("important");
truc.classList.replace("surprenant", "bizarre");
truc.classList.toggle("important");
truc.classList.toggle("difficile");
// la liste contient : bizarre, machin, important

Lecture des propriétés CSS avec getComputedStyle()
L’attribut JS style permet de lire les propriétés CSS définies avec

l’attribut HTML style mais pas celles définies dans la feuille de style
Solution : utiliser la fonction getComputedStyle() qui renvoie un
objet dont les attributs correspondent aux propriétés CSS
Exemple (Récupération et affichage de la couleur d’un élément)

Feuille de style : #text {color: red;}
Code HTML : <span id="text"></span>
Code JS :
var truc = document.getElementById(’text’);
var color = getComputedStyle(truc).color;
alert(color); // affiche : rgb(255,0,0)

Les API de HTML5 Dessin avec l’API Canvas
Définir une zone de dessin
Zone de dessin (transparente par défaut) : balise <canvas>

Attributs :
id identifiant pour pouvoir repérer la zone avec JavaScript
width largeur
height hauteur
Contenu de la balise : texte pour les navigateurs qui ne la prennent
pas en charge
Exemple
<canvas id="zone" width="200" height=200">
Votre navigateur ne prend pas en charge la balise canvas.
</canvas>

Avant de commencer à dessiner
Indiquer la zone à utiliser

Exemple
var maZone = document.getElementById("zone");
Récupérer le contexte de la zone

Exemple
var ctx = maZone.getContext("2d");
C’est sur cet objet qu’on va appeler les méthodes de dessin

Choisir une couleur
Deux propriétés de l’objet contexte :

strokeStyle couleur de tracé
fillStyle couleur de remplissage
Valeur : une définition de couleur conforme à la norme CSS
Exemple
ctx.strokeStyle = "blue";
ctx.fillStyle = "rgba(250,100,0,0.5)";

Dessiner des rectangles

Dessiner un rectangle dont le coin supérieur gauche est en (x , y ), de
largeur l et de hauteur h : strokeRect(x, y, l, h)
Dessiner un rectangle plein : fillRect(x, y, l, h)
Rendre transparente une zone rectangulaire : clearRect(x, y, l,
h)
Exemple
Résultat :
ctx.strokeRect(50, 20, 100, 50);

ctx.fillRect(100, 10, 30, 150);
ctx.clearRect(120, 50, 60, 80);

Tracer des chemins
Commencer un tracé : beginPath()

Définir le point de départ de la ligne : moveTo(x,y)
Si on n’appelle pas moveTo, le point de départ sera le point d’arrivée
de la dernière ligne
Tracer une ligne de la position actuelle jusqu’au point (x , y ) :
lineTo(x,y)
Dessiner les traits : stroke()
Dessiner une forme pleine : fill()
Fermer la forme : closePath() (inutile pour une forme pleine)

Tracer des chemins : exemple
Exemple
Résultat :
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.lineTo(50,150);
ctx.closePath();
ctx.stroke();

Tracer des chemins : exemple (2)
Exemple
Résultat :
ctx.beginPath();
ctx.moveTo(50,50);
ctx.moveTo(50,150);
ctx.stroke();

Tracer des chemins : exemple (3)
Exemple
Résultat :
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(50,150);
ctx.fill();

Définir le style des lignes
lineWidth épaisseur de trait (en pixels)

lineCap style des extrémités : butt (défaut) / round / square
lineJoin style des jonctions entre 2 lignes : miter (défaut) / round /
bevel

La propriété lineCap : exemple
Exemple
ctx.lineWidth=20;
ctx.beginPath(); Résultat :
ctx.moveTo(50,50);
ctx.lineCap="square";
ctx.lineTo(50,150);
ctx.beginPath();
ctx.stroke();
ctx.moveTo(150,50);
ctx.lineCap="round";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,50);
ctx.stroke();

La propriété lineJoin : exemple
Exemple
ctx.beginPath();
ctx.moveTo(50,70);
ctx.lineTo(100,30); Résultat :
ctx.lineTo(150,70); ctx.lineJoin="bevel";
ctx.stroke(); ctx.beginPath();
ctx.moveTo(50,170);
ctx.lineJoin="round"; ctx.lineTo(100,130);
ctx.beginPath(); ctx.lineTo(150,170);
ctx.moveTo(50,120); ctx.stroke();
ctx.lineTo(100,80);
ctx.stroke();

Dessiner des arcs de cercle
Dessiner un arc de cercle centré en (x , y ), de rayon r , allant de l’angle

dep à l’angle arr dans le sens trigonométrique :
arc(x, y, r, dep, arr, true)
Pour le sens inverse (sens des aiguilles d’une montre), mettre le
dernier paramètre à false
Les angles sont mesurés en radians dans le sens des aiguilles d’une
montre à partir des x positifs
Pour tracer un cercle complet, on prendra dep = 0 et arr = 2π
La fonction arc s’utilise dans le contexte d’un chemin (comme
lineTo) ⇒ ne pas oublier l’appel à stroke() (ou fill() si on veut
une forme pleine) !

Dessiner des arcs de cercle : exemple
Exemple
ctx.lineWidth=2;
ctx.beginPath();
ctx.arc(100, 100, 80, Math.PI/2, 3*Math.PI/2, false);
ctx.moveTo(160,100);
ctx.arc(100, 100, 60, 0, Math.PI, true);
ctx.stroke();
Résultat :

Définir une image à importer
On récupère l’image dans l’arbre DOM :

Exemple
Code HTML :
<img src="exemple.png" alt="Une belle image" id="monimage"/>
Code JavaScript :
var img = document.getElementById("monimage");

Importer une image
Insérer l’image dans la zone en (x , y ) : drawImage(img, x, y)

Insérer l’image en la redimensionnant :
drawImage(img, x, y, largeur, hauteur)
Insérer un morceau de l’image :
drawImage(img, x_src, y_src, l_src, h_src, x_dst, y_dst, l_dst, h_dst)
ysrc
xsrc hsrc ydst
source destination
lsrc xdst hdst
ldst

Importer une image : exemple
Exemple
var img = document.querySelector("img[src=’html5.png’]");
Sans redimensionnement :
ctx.drawImage(img, 10, 50);
Avec redimensionnement :
ctx.drawImage(img, 0, 0, 200, 200);
Redimensionnement d’un morceau :

ctx.drawImage(img, 0, 50, 256, 206, 36, 49, 128, 103);

Écrire du texte
Choisir une police : via la propriété font du contexte (même syntaxe

que la propriété font en CSS)
Exemple
ctx.font = "12pt Arial";
Écrire le texte txt avec des caractères creux en (x , y ) :

strokeText(txt, x, y)
Écrire le texte txt avec des caractères pleins en (x , y ) :
fillText(txt, x, y)
Dans les deux cas, (x , y ) = position du début de la ligne d’écriture :
Voici le texte que j’ai écrit.

(x , y )

Écrire du texte : exemple
Exemple
ctx.lineWidth=2;
ctx.font = "italic bold 40pt Arial,Helvetica,sans-serif";
ctx.strokeText("C’est",10,50);
ctx.fillText("beau",70,150);
Résultat :

Transformations et état graphique
translate(x,y) déplacer l’origine des axes de (x , y )

rotate(a) faire tourner les axes de a radians dans le sens horaire
scale(x,y) mettre à l’échelle les axes d’un facteur x horizontalement et
d’un facteur y verticalement
save() sauvegarde l’état graphique actuel de la zone de dessin
(fillStyle, strokeStyle, lineWidth, lineCap,
lineJoin, font, translate, rotate, scale. . . )
restore() restaure l’état graphique sauvegardé avec save()
Remarque
Au contexte est associée une pile d’états graphiques :
save empile l’état graphique actuel
restore dépile l’état graphique situé en haut de la pile et l’applique

Transformations : exemple
Exemple
function morceau() {
ctx.beginPath(); Résultat :
ctx.moveTo(0,0);
ctx.lineTo(80,40);
ctx.lineTo(40,0);
ctx.lineTo(80,-40);
ctx.fill();
}
ctx.translate(100,100);
for(var i=0; i<4; i++) {
morceau();
ctx.rotate(Math.PI/2);
}

État graphique : exemple
Exemple
Résultat :
ctx.save();
ctx.translate(60, 30);
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 130, 50);
ctx.restore();
ctx.fillRect(0, 0, 120, 40);

Les API de HTML5 Stockage de données en local avec l’API Web Storage
Web Storage : principe
Solution classique pour stocker des données chez le client : cookies

Inconvénients :
Les cookies sont limités en nombre et en taille
Ils sont envoyés au serveur à chaque requête HTTP
Web Storage permet de stocker des couples clé-valeur sur le poste du
client
Stockage en session (objet sessionStorage) : données stockées
pendant la durée d’une session de navigation
Stockage local (objet localStorage) : données stockées plus
longtemps et partagées entre les différentes fenêtres
Chaque site a son propre espace de stockage
On peut accéder aux données stockées via les outils de
développement du navigateur (Firefox ou Chrome : Ctrl+Maj+I)

Les API de HTML5 Stockage de données en local avec l’API Web Storage
Web Storage : fonctionnement

Mêmes propriétés pour sessionStorage et localStorage :
length nombre de couples stockés
key(n) nom de la ne clé
setItem(nom,valeur) stocker un couple
getItem(nom) récupérer la valeur associée à la clé nom
removeItem(nom) supprimer l’entrée indicée par la clé nom
clear() effacer toutes les données stockées
Exemple
localStorage.setItem("prenom","Jean");
/* la ligne suivante peut être exécutée lors d’une
session ultérieure */
alert("Salut, " + localStorage.getItem("prenom") + " !");
// affiche : Salut, Jean !

Frameworks
Qu’est-ce qu’un framework ?
Ensemble de composants logiciels qui fournit un cadre facilitant le

développement d’applications
Plus généraliste et directif qu’une simple bibliothèque logicielle
Il existe des frameworks dans de nombreux langages
En JS : JQuery (plutôt une bibliothèque), Angular, Vue.js. . .

Frameworks
Avantages et inconvénients des frameworks
Avantages :
rapidité de démarrage
concision du code (normes d’écriture, bibliothèques)
compatibilité avec les navigateurs
communauté de développeurs
prix faible ou nul
Inconvénients :
poids des bibliothèques de fonctions
code difficile à lire pour un non-initié
failles de sécurité (mises à jour nécessaires)
risques d’abandon

Frameworks
JQuery
Bibliothèque JavaScript créée en 2006 par John Resig

Licence libre et communauté active
Syntaxe très concise pour la manipulation du HTML et du CSS
Modules complémentaires : jQueryUI, jQueryMobile. . . (voir
www.jquery.org)
Pour l’utiliser : télécharger sur www.jquery.com le fichier .js
correspondant à la dernière version et l’inclure avec une balise
<script>
Il existe 2 versions de ce fichier :
jquery-x.y.z.js (développement)
jquery-x.y.z.min.js (production)

Frameworks
JQuery : premier exemple
Exemple (On affiche « Hello World » en bleu)

<script src="jquery-x.y.z.min.js"></script>
<script>
$(’body’).html(’Hello World’).css("color", "blue");
</script>
$ (alias de la fonction jQuery) : fonction fondamentale

Prend en argument une chaîne de caractères (sélecteur CSS) et
renvoie un objet jQuery (' tableau des éléments correspondants)
Méthode html : remplace le contenu HTML des éléments appelants
par son argument
Méthode css : modifie la valeur d’une propriété CSS des éléments
appelants
Chaque fonction renvoie un objet jQuery
Attribut length d’un tel objet : nombre d’éléments qu’il contient
Frameworks
Vérifier le chargement de l’arbre DOM
Avant de manipuler des éléments du DOM, il faut s’assurer qu’ils sont

chargés
Cela se fait avec la méthode ready :
$(document).ready(function(){
// code DOM
});
ou plus simplement :
$(function(){
// code DOM
});
En fait, on associe la fonction en question à l’évènement ready

(chargement du document). . . voir plus loin

Frameworks
Méthodes pour modifier le code HTML

S’appliquent à un objet jQuery (typiquement retourné par $())
Si cette fonction renvoie un tableau à plusieurs éléments, les
modifications s’appliquent à chaque élément
after(contenu) insère contenu après les éléments appelants
before(contenu) insère contenu avant les éléments appelants
html(contenu) remplace le contenu des éléments appelants par contenu
(ou renvoie leur contenu si pas d’argument)
append(contenu) insère contenu comme dernier fils des éléments
appelants
prepend(contenu) insère contenu comme premier fils des éléments
appelants
Exemple (On ajoute du texte avant chaque balise <textarea> )

$("textarea").before("<p>Il faut écrire ici :</p>");
Frameworks
Méthodes liées aux sélecteurs ou aux propriétés CSS

addClass(cl) ajoute la classe cl aux éléments appelants
removeClass(cl) enlève la classe cl aux éléments appelants
toggleClass(cl) enlève la classe cl si elle est présente, l’ajoute sinon
hasClass(cl) indique si un des éléments appelants possède la classe cl
Exemple
Code HTML :
<p class="truc">Un paragraphe</p>
<p class="truc machin">Un autre</p>
<p class="bidule">Encore un autre</p>
Code JS :
$("p").addClass("chose"); // tous ont la classe chose
$(".truc").removeClass("machin"); // plus aucun n’a la classe machin
$("p").toggleClass("bidule"); // seuls le 1 et le 2 ont la classe bidule
Frameworks
Méthodes liées aux sélecteurs ou aux propriétés CSS (2)
css(prop,val) donne la valeur val à la propriété prop pour les

éléments appelants (ou renvoie la valeur de prop pour ces
éléments si pas de 2e argument)
filter(sel) renvoie un tableau formé des éléments appelants
correspondant au sélecteur sel
Exemple (On met les titres de niveau 1 en rouge)

$("h1").css("color","red");

Frameworks
Sélecteurs CSS utilisables avec JQuery
*
h1
h1,h2
#monid
.maclasse / p.maclasse
sélecteurs d’attributs
p a/p > a
h1 + h2 / h1 ˜ h2
pseudo-classes hiérarchiques (:nth-child(), :nth-of-type. . . )
:not(s)

Frameworks
Sélecteurs spécifiques à JQuery
:hidden éléments invisibles (y compris ceux de l’en-tête)

:visible éléments visibles (display 6= none)
:parent éléments qui ont des enfants
:header titres (h1, . . . , h6)
:has(s) éléments qui ont des enfants correspondant au sélecteur s
:contains(t) éléments qui contiennent le texte t
On peut chaîner les sélecteurs (p:parent:not(#toto) sélectionne les
paragraphes qui ont des enfants et n’ont pas l’identifiant toto)

Frameworks
Sélecteurs basés sur la position dans le tableau des

éléments appelants
:eq(i) élément d’indice i (les indices commencent à 0)

:even éléments d’indice pair
:odd éléments d’indice impair
:gt(i) éléments d’indice > i
:lt(i) éléments d’indice < i
:first premier élément
:last dernier élément

Frameworks
Sélecteurs pour les champs de formulaire
:input tous les champs ( <input> , <textarea> , <select> ,

<button> )
:checkbox case à cocher
:checked cases cochées
:file champs d’envoi de fichiers
:password champs de saisie de texte masqué
:radio boutons radio
:reset boutons de remise à zéro
:submit boutons de soumission
:text champs de texte simples

Frameworks
Récupérer la valeur d’un champ de formulaire
Méthode val de l’objet jQuery

Sans argument : renvoie la valeur du premier champ de formulaire
correspondant
Exemple (On affiche la valeur de la première liste déroulante)

alert($("select").val());
Avec un argument de type chaîne, nombre ou tableau : modifie la

valeur de chaque champ correspondant
Exemple (On change la valeur de chaque <textarea> )

$("textarea").val("Je suis une grande zone de saisie");

Frameworks
Chaînage des méthodes
Chaque méthode renvoie le sélecteur sur lequel elle s’applique (objet

JQuery)
On peut donc appeler une méthode sur le résultat d’une autre
méthode
Exemple
$(".truc").css("color","red").filter(":even").
css("background-color","yellow");
Exemple
$("#bouton1").css("font-weight","bold").
css("font-style","italic").html("Cliquez ici").
off("click").on("click",maFonction);

Frameworks
Faire réagir un élément à un évènement
Associer une fonction à un évènement pour les éléments appelants :

elts.evt(fonction); où evt est à remplacer par le nom de l’évènement
$(this) : élément cible de l’évènement
Exemple (On fait réagir l’élément d’identifiant bouton à un clic)

function message {$(this).html("Bien reçu");}
$("#bouton").click(message);

Frameworks
Faire réagir un élément à un évènement : la méthode on
Syntaxe : elts.on("evts", fonction); (le premier argument peut contenir

plusieurs noms d’évènements séparés par des espaces)
Exemple (L’élément va réagir au clic)

$("#bouton").on("click", message);
Pour définir plusieurs associations d’un coup avec un objet :

elts.on({evt1: fonc1, evt2: fonc2...});
Exemple (L’élément va réagir au clic et au survol)

$("#bouton").on({
click: function() {$(this).html("Cliqué");},
mouseover: function() {$(this).html("Survolé");}
});

Frameworks
Supprimer une association fonction-évènement
Supprimer toutes les fonctions (nommées) associées à un évènement

pour un élément : elt.off("evt");
Supprimer une fonction (nommée) en particulier :
elt.off("evt", fonction);
Exemple
function message2 {alert("OK");}
$("#bouton").on("click", message2);
// pour désactiver seulement la fonction message :

$("#bouton").off("click", message);
// pour désactiver les 2 fonctions :

$("#bouton").off("click");

Javascript: Langages Web L2

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Javascript: Langages Web L2

Transféré par

Droits d'auteur :

Formats disponibles

JavaScript

6 Interface DOM et styles dynamiques

7 Les API de HTML5

Généralités sur JavaScript

Langage interprété permettant d’ajouter de l’interactivité à une page

Olivier Mallet (Université de Rouen) JavaScript 3 / 132

Insertion de code JavaScript dans une page HTML

Olivier Mallet (Université de Rouen) JavaScript 4 / 132

Déclaration : var maVariable;

Olivier Mallet (Université de Rouen) JavaScript 5 / 132

Initialisation d’une variable dans une fonction

Sans var : autorisé mais variable globale

Olivier Mallet (Université de Rouen) JavaScript 6 / 132

Initialisation d’une variable dans une fonction (2)

Avec var : variable locale à la fonction

Olivier Mallet (Université de Rouen) JavaScript 7 / 132

L’instruction "use strict"; au début d’un script ou d’une fonction

Olivier Mallet (Université de Rouen) JavaScript 8 / 132

Différence entre var et let dans une boucle

Olivier Mallet (Université de Rouen) JavaScript 10 / 132

Redéclarer une variable

Olivier Mallet (Université de Rouen) JavaScript 11 / 132

Exemples de redéclarations autorisées

Olivier Mallet (Université de Rouen) JavaScript 12 / 132

Exemples de redéclarations interdites

Olivier Mallet (Université de Rouen) JavaScript 13 / 132

Exemples de redéclarations interdites (suite)

Olivier Mallet (Université de Rouen) JavaScript 14 / 132

Définies avec le mot-clé const

Peuvent être globales ou locales (à une fonction ou à un bloc)

Olivier Mallet (Université de Rouen) JavaScript 15 / 132

Le mot-clé const ne définit pas une valeur constante mais une

Olivier Mallet (Université de Rouen) JavaScript 16 / 132

Olivier Mallet (Université de Rouen) JavaScript 17 / 132

Olivier Mallet (Université de Rouen) JavaScript 18 / 132

Déclaration d’une fonction :

Noms sensibles à la casse

Olivier Mallet (Université de Rouen) JavaScript 20 / 132

Une fonction à 2 arguments (ou 1, ou 0)

Olivier Mallet (Université de Rouen) JavaScript 21 / 132

Valeurs par défaut pour les arguments

Exemple (Ce code fait la même chose que l’exemple précédent)

Olivier Mallet (Université de Rouen) JavaScript 22 / 132

Fonction à nombre illimité d’arguments

Olivier Mallet (Université de Rouen) JavaScript 23 / 132

function(arg1, arg2, ..., argN) {code}

Olivier Mallet (Université de Rouen) JavaScript 24 / 132

Quelques fonctions prédéfinies

parseInt(chaine) si la chaîne de caractères chaine commence par un

parseFloat(chaine) même principe mais conversion en nombre décimal

Olivier Mallet (Université de Rouen) JavaScript 25 / 132

Quelques fonctions prédéfinies (2)

eval(chaine) évalue et exécute l’expression JS indiquée dans chaine

alert(message) affiche message dans une boîte de dialogue avec un

Olivier Mallet (Université de Rouen) JavaScript 27 / 132

Écrire dans la console JavaScript

Les navigateurs modernes disposent d’une console qui affiche les

Exemple (Affichage de la valeur d’une variable dans la console)

Olivier Mallet (Université de Rouen) JavaScript 28 / 132

Objet : structure de données qui contient des propriétés

Olivier Mallet (Université de Rouen) JavaScript 29 / 132

Création d’un constructeur

this.surface = function() { // définition d’une méthode