Technologie Web
Pr. Oumaima STITINI
2024/2025
Chapitre 3: JavaScript
Objectifs
● Se familiariser avec la syntaxe JavaScript pour acquérir une
l'interactivité avec les pages HTML.
● Comprendre et manipuler le DOM pour dynamiser les pages
web en temps réel.
● Utiliser les fonctions et événements JavaScript pour créer des
interactions et des comportements réactifs.
● Développer des compétences en débogage et en optimisation
du code afin de garantir des performances efficaces et une
expérience utilisateur fluide.
3
Introduction à JavaScript
Pourquoi JavaScript ?
● Langage de programmation structurée qui concourt à
enrichir le HTML.
● L’objectif principal du JavaScript:
○ Introduire de l'interactivité avec les pages HTML.
○ Introduire de petits programmes, appelés “Script”, dans
les pages HTML.
● JavaScript est intégré complètement dans le code HTML.
● JavaScript contient des gestionnaires d'événement.
5
Écriture et exécution du code JavaScript
Entre les balises
1 <Script></Script> dans
la section head ou body.
Ecriture du code
Entre les balises
JavaScript 2 <Script></Script> dans
un fichier externe.
Associé à une balise
3 HTML qui gère un
événement.
6
Écriture et exécution du code JavaScript
Choix 1: Entre les balises <Script></Script> dans la section d'entête ou dans le corps de la page.
<head>
<"tle>Titre de la page</"tle>
<script type="text/javascript" >
func"on afficherMessage() {
Choix 1 alert("Bonjour, bienvenue sur ma page !");
}
</script>
Remarque </head>
● Dans la section <head> , le code JS n'est pas exécuté tout de suite.
● Dans la section <body>, le code est immédiatement exécuté en même temps que
le code HTML est interprété. 7
Écriture et exécution du code JavaScript
Choix 2: Entre les balises <Script></Script> dans un fichier externe.
<head>
<"tle>Titre de la page</"tle>
<script type="text/javascript" src="essai.js"
Choix 2
>
</script>
</head>
Remarque
● Faire appel à l'élément script qui se trouve dans un fichier externe “essai.js”. Dans
ce cas, l'élément script précise à l'aide de l'attribut src l'emplacement du fichier
JavaScript.
8
Écriture et exécution du code JavaScript
Choix 3: Associé à une balise HTML qui gère un événement.
<body>
<h1> Exemple avec onClick </h1>
Choix 3 <button onClick="alert('Bouton
cliqué !')">Cliquez-moi</button>
</body>
Remarque
● Associer le code JS à une balise HTML qui gère un événement onClick.
9
Les Variables et Types de
Données
La déclaration des variables
● Une variable permet de désigner un emplacement mémoire
et possède:
○ un identificateur ou nom.
○ une valeur ou contenu « optionnel ».
○ un type indiquant comment le contenu doit être
interprété.
11
La déclaration des variables
● La déclaration des variables peut se faire de deux façons:
○ Soit de façon explicite, en faisant précéder la variable du
mot clé var qui permet d’indiquer de façon rigoureuse qu'il
s'agit d'une variable.
○ Soit de façon implicite, en laissant le navigateur determiner
qu'il s'agit d'une déclaration de variable.
● Le type d’une variable n’est déterminé que lors de l'affectation.
● Pour identifier le type de la variable, la fonction
typeof(Nom_du_var) retourne le type d’une variable.
12
La déclaration des variables
● La déclaration de variables en JS se fait avec trois mots-clés:
● La portée d'une variable déclarée avec var est la fonction
Var dans laquelle elle est déclarée , ou globale si elle est
déclarée en dehors d'une fonction . Elle n'a pas de portée
de bloc.
let ● let a une portée de bloc, ce qui signifie qu'elle est limitée
au bloc de code dans lequel elle est déclarée.
● const Comme let, const a également une portée de bloc.
const
13
La déclaration des variables
● En JavaScript, il existe plusieurs types de données de base qui
permettent de stocker et manipuler des informations.
Chaine de caractère let nom = "Alice";
(String)
let entier = 42;
Nombres (Number) let décimale = 3.14;
let négatif = -10;
let estVrai = true;
Booléens (Boolean)
let estFaux = false;
14
La déclaration des variables
● En JavaScript, il existe plusieurs types de données de base qui
permettent de stocker et manipuler des informations.
Tableaux (Array) let fruits = ['Pomme', 'Banane', 'Orange'];
let personne = {
nom: 'Alice',
Objets (Object) age: 30,
profession: 'Développeuse'
};
15
Conversion des types
● Javascript gère la conversion des types d’une façon
transparente (implicite). Parfois il est nécessaire de faire la
conversion d’une façon explicite.
● On distingue les fonctions de conversions suivantes:
parseInt Conversion d’une chaîne en entier dans une base
désignée (10, 2, 8,16...).
parseFloat
Conversion d’une variable en nombre décimal.
toString Conversion d’une variable en une chaîne de
caractères . 16
Les opérateurs
Les opérateurs
Opérateurs
1 Arithmétique
Les opérateurs
Opérateurs de
2 comparaison
3 Opérateurs Logique
18
Les opérateurs
4 Opérateurs d’affectation
Les opérateurs
Opérateurs
5 d'incrémentation
Opérateurs
6 de concaténation
ou d’assignation
19
Les opérateurs arithmétiques
20
Les opérateurs de comparaison
● Le résultat renvoyé par une opération de comparaison est une
valeur booléenne.
21
Les opérateurs logiques
22
Les opérateurs d’affectation
23
Les opérateurs d'incrémentation
24
Les opérateurs de concaténation ou
d’assignation
● L'opérateur '+' lorsqu'il est utilisé avec des chaînes de
caractères permet de les concaténer, c'est-à-dire de joindre
bout-à-bout les deux chaînes de caractères.
25
Les structures de contrôles
Structures de contrôle
1 Les conditions
Structure de contrôle
2 Les boucles
3 La gestion des erreurs.
27
Les structures de contrôle conditionnelles
● On appelle structure de contrôle les instructions qui
permettent de tester si une condition est vraie ou non, ce
qui permet notamment de donner de l'interactivité aux
scripts.
Remarque:
● Il est à noter que les instructions «if» peuvent être imbriquées.
● La condition doit être entre des parenthèses.
● Il est possible de définir plusieurs conditions à remplir avec les
opérateurs ET et OU (&& et ||).
28
Les structures de contrôle conditionnelles
29
Les structures de contrôle conditionnelles
● La condition doit être toujours entourée de ( )
● La séquence 1 est exécutée si la condition est vraie.
● La séquence 2 (optionnelle) est exécutée si la condition est
fausse.
● Les { } ne sont pas obligatoires qu'en cas d'instructions
multiples. if(condition){
Séquence 1
}
else{
Séquence 2
} 30
Les structures de contrôle conditionnelles
● L'instruction switch évalue une expression et, selon le
résultat obtenu et le cas associe, exécute les instructions
correspondantes. switch(expression){
case valeur1: Instructions à
exécuter lorsque le résultat de l'expression
correspond à valeur1
break;
default: instructions à exécuter
lorsqu'aucune des valeurs // ne correspond
}
31
Les structures de contrôle itérative
for (valeur initiale; condition; poursuite)
{ séquence d'instructions }
● Une valeur ou expression initiale portant sur une variable
entière appelée compteur.
● Une condition: tant qu'elle est vraie, la répétition est
poursuivie.
● une expression de poursuite qui consiste en la mise à jour
du compteur. 32
Les fonctions
Les fonctions
Déclaration des fonctions
● On appelle fonction un sous-programme qui permet
d'effectuer un ensemble d'instructions par simple appel de la
fonction dans le corps du programme principal.
● Une fonction en javascript est déclarée comme suit:
function nameFunc(argument1, argument2, ...):
function addition(a, b) {
return a + b;
}
34
Les fonctions
● Le couple de parenthèses contenant des arguments servent
à fournir des informations à la fonction lors de son
exécution.
● { liste d’instructions } contenant le code que la fonction
devra exécuter à chaque appel.
● Une fonction peut retourner ou non un résultat, pour
retourner un résultat on utilise l’instruction return.
function nameFunc(argument1, argument2, ...){
liste d’instructions
return …..;
}
35
DOM( Document Object Model )
DOM
37
Document Object Model
1 Sélection d'éléments
DOM
Manipulation du
2 contenu et des
attributs d'éléments
3 Modification du style
via JavaScript
38
DOM
● En HTML chaque balise est considérée comme un noeud et
peut posséder des attributs.
○ <a href=‘test.html’> Page d’accueil </a>
● En présence de plusieurs nœuds du même type, je peux
attribuer un identifiant unique pour y accéder après:
<div id=‘par1’> Ceci est le paragraphe 1 </div>
<div id=‘par2’> Ceci est le paragraphe 2 </div>
<div id=‘par3’> Ceci est le paragraphe 3 </div>
39
DOM
A partir de document on peut accéder aux éléments à l’aide des
méthodes:
● getElementById(‘valeur_id’): accéder à un élément via son Id
document.getElementById(‘par1’);
● getElementsByTagName(‘nom_element’): accéder à tous les
éléments.
○ retourne un tableau contenant tous les éléments de type
div
document.getElementsByTagName(‘div’)
40
DOM
A partir de document on peut accéder aux éléments à l’aide des
méthodes:
● getElementsByClassName(‘nom_classe’): accéder à tous les
éléments sur la base de l’attribut class.
document.getElementById(‘par1’);
41
DOM
● Pour accéder au contenu de l'élément il faut utiliser la
méthode innerHTML ou la méthode textContent
document.getElementById(‘par1’).innerHTML;
document.getElementById(‘par1’).textContent();
● Pour modifier le contenu de l'élément il faut utiliser la
méthode innerHTML
document.getElementById(‘par1’).innerHTML=‘bienvenue’;
42
DOM
● Pour modifier la valeur d’un attribut:
document.querySelector(‘a’).href=‘http://www.ens.com;
● Pour modifier la valeur d’un attribut class:
document.querySelector(‘.para’).className=‘class1’;
● Pour modifier le css:
document.getElementById(‘p’).style. color=’blue’;
43
Gestion des événements
Gestion des événements
● Un événement est une action de l’utilisateur prise en compte
par le navigateur.
Clic droit
Touche enfoncée
Position de la souris
● Les événements sont des actions de l'utilisateur, qui vont
pouvoir donner lieu à une interactivité. L’événement par
excellence est le clic de souris, car c'est le seul que le HTML
gère.
45
Gestion des événements
● Grâce au JavaScript il est possible d'associer des fonctions,
des méthodes à des événements tels que le passage de la
souris au- dessus d'une zone, le changement d'une valeur.
● Les gestionnaires d'événements sont associés à des objets, et
leur code s'insère dans la balise de ceux-ci.
● Chaque événement ne peut pas être associé à n'importe quel
objet. Ainsi par exemple, l'événement OnChange ne peut pas
s'appliquer à un lien hypertexte.
46
Gestion des événements
● Le gestionnaire d'événements permet d’associer une action à
un événement sur un objet ou un élément de la page.
onEvenement="Action_Javascript_ou_Fonction();
"
● Pour associer un événement à un élément:
<img src='une_image.jpg '
onclick='nom_de_lafonction(parametre1,parametre
2)' />
47
Gestion des événements
● Pour associer un événement à un élément et si on a plusieurs
fonctions:
<img src='une_image.jpg' onclick='fonction1() ;
fonction2() ; fonction3()' />
48
Méthode 1:
Gestion des événements DOM-0
● Pour associer un événement à un élément après le chargement
de la page:
○ Via une fonction
document.getElementById('mon_element').onclick=nom_de_l
a_fonction;
○ Via une fonction anonyme
document.getElementById('mon_element').onclick=function(
"un_parametre")
49
Méthode 2:
Gestion des événements DOM-2
● Pour associer un événement à un élément après le chargement
de la page:
○ Via addEventListener Il est possible d’ajouter plusieurs
fonctions à un événement.
document.getElementById('mon_element').addEventListener(
"click", nom_de_la_fonction],true]);
● Il est possible de retirer un événement en utilisant
removeEventListener():
document.getElementById('mon_element').removeEventListe
ner("click", nom_de_la_fonction ], true]); 50
Gestion des événements
51
Gestion des événements
52
Tableaux et objets
Déclaration et utilisation de tableaux
● Un tableau, en JavaScript, est une variable pouvant contenir
plusieurs données indépendantes, indexées par un numéro,
appelé indice.
● L'indice d'un tableau est ainsi l'élément permettant d'accéder
aux données qui y sont stockées.
54
Déclaration et utilisation de tableaux
● Remarque: Le premier élément d'un tableau porte toujours
l'indice 0.
● Dans un tableau à n éléments, le nième élément porte ainsi
l'indice n-1.
● Le langage JavaScript propose l'objet Array, comportant de
nombreuses méthodes permettant de manipuler les tableaux,
c'est- à-dire d'insérer, supprimer, ou extraire des éléments dans
le tableau et également de trier les éléments du tableau.
55
Création de tableaux
● Le langage JavaScript fournit plusieurs façons de créer un
tableau:
56
Accès aux données
● L'accès aux éléments du tableau se fait en écrivant le nom du
tableau suivi de crochets contenant l'indice de l'élément.
57
Accès aux données
● L'accès aux éléments du tableau se fait en écrivant le nom du
tableau suivi de crochets contenant l'indice de l'élément.
58
Les boîtes de dialogue
Les boîtes de dialogue
● Une boîte de dialogue est une fenêtre qui s'affiche au
premier plan suite à un événement, et qui permet:
○ Soit d'avertir l'utilisateur.
○ Soit le confronter à un choix.
○ Soit lui demander de compléter un champ pour
récupérer une information.
● JavaScript en propose trois différentes méthodes:
○ alert().
○ prompt().
○ confirm().
● Ce sont des méthodes de l'objet window. 60
Les boîtes de dialogue: La méthode alert
● La méthode alert() permet d'afficher dans une boîte toute
simple composée d'une fenêtre et d'un bouton (OK), le texte
qu'on lui fournit en paramètre.
● Dès que cette boîte est affichée, l'utilisateur n'a d'autre
alternative que de cliquer sur le bouton OK.
● Le paramètre unique de cette méthode est une chaîne de
caractère.
● On peut donc lui fournir:
○ Directement cette chaîne de caractères entre guillemets.
○ Lui fournir une variable dont il affichera le contenu.
○ Mêler les deux en concaténant les chaînes grâce à l'opérateur +.
61
Les boîtes de dialogue: La méthode alert
● alert(nom_de_la_variable);
● alert('Chaîne de caractères');
● alert('Chaîne de caractères' + nom_de_la_variable);
alert('Message à afficher');
62
La méthode confirm()
● La méthode confirm() est similaire à la méthode alert(), si ce
n'est qu'elle permet un choix entre "OK" et "Annuler".
● Lorsque l'utilisateur appuie sur "OK" la méthode renvoie la
valeur true. Elle renvoie false dans le cas contraire.
● Elle admet comme alert() un seul paramètre: une chaîne de
caractères.
confirm('Chaîne de caractères');
63
La méthode prompt()
● La méthode prompt est un peu plus évoluée que les deux
précédentes puisqu'elle fournit un moyen simple de récupérer
une information provenant de l'utilisateur, on parle alors de
boîte d'invite.
● La méthode prompt() requiert deux arguments:
○ le texte d'invite
○ la chaîne de caractères par défaut dans le champ de saisie.
prompt('Posez ici votre question','chaîne par défaut');
64
Introduction aux classes (ES6) :
La méthode prompt()
● Concepts à couvrir:
○ Création de classes et de constructeurs.
○ Méthodes de classes.
○ Héritage et superclasses.
66
La classe
● C’est une représentation abstraite d’un ensemble d'éléments
ayant des attributs (propriétés) et méthodes (fonctions)
communs.
67
Méthode 1 via la classe Object
En Javascript tout est évalué comme un objet, même si c’est une
valeur que vous avez affectée à une variable.
1. Créer la variable: var E1 = new Object();
2. Affecter/Remplir les attributs, les attributs seront
automatiquement ajoutés. E1.nom=‘CHAKIB’;
3. Utiliser les attributs
document.write(E1.nom);
NB: L’ajout de méthodes se fait à l’aide d’une propriété qui recevra comme valeur une fonction anonyme.
68
