Université A- Mira de Bejaia- 2023/2024 Module : Technologies du web
Faculté de Technologie - Département ATE Chargé de Cours : Mme MAMMERI Karima
M2-Réseaux et Télécommunications
Chapitre 3 : JavaScript
Introduction
JavaScript est un langage de programmation de script créé en 1995 par Netscape et Sun Microsystems. Le
JavaScript est l’un des langages de programmation les plus populaires et il fait partie des langages web
dits « standards » avec le HTML et le CSS.
Il s’agit d’un langage côté client, interprété par le navigateur, qui permet:
De programmer des actions en fonction d’événements utilisateurs (déplacements de souris, clic,
etc.).
D’accéder aux éléments de la page HTML : traitement de formulaire, contrôle de la saisie dans
un formulaire ….
D’effectuer des calculs sans recours au serveur.
Emplacements du code JavaScript (JS)
Les instructions ou le code JS est placé dans les balises <script>…. </script>
1- Les balises <script> </script> peuvent être insérées soit dans le <head> soit partout dans le document
HTML.
2- le code peut être écrit dans un fichier [Link] puis relié à la page Web
<script src="fichier_javascript.js"></script>
Les règles de syntaxe du JavaScript
Le langage JavaScript a une syntaxe qui se rapproche des langages C/C++ :
Le JavaScript est sensible à la casse : la variable « A » n’est pas la même que « a ».
Chaque instruction se termine par un point-virgule (;).
Pour mettre en commentaire toute une ligne on utilise //
Pour mettre un commentaire sur plusieurs lignes, on utilise le /*……. */
Opérateurs
Opérateurs identiques à ceux du C/C++/Java :
opérateurs arithmétiques : + − ∗ / %
Incrémentation /décrémentation : var++ var−−
opérateurs logiques : && || !
comparaisons : === == != !== <= < >= >
concaténation de chaîne de caractères : +
affectation : = , +=, -=, *=, /=
Utilisation de variables
Déclaration : var nom =valeur;
Les types de variables
boolean : logique, exemple : var isOK = true ;
number : nombre entier ou réel, exemple : var nb = 15;
string : chaîne de caractère, exemple : var nom = "Jeam";
Array: tableau, liste de valeur,
objet: objet (au sens programmation orientée objet).
Chapitre 3 : JavaScript
Les boîtes de dialogue
La fonction alert()
alert() est une instruction simple, appelée fonction, qui permet d'afficher une boîte de dialogue contenant
un message ou une valeur d’une variable.
alert(‘message’); alert(variable); alert(‘massage’+variable);
La fontion prompt()
Affiche une zone de saisie demandant à l’utilisateur d’introduire une information.
Exemple 1:
var nom = prompt('Entrez votre nom:');
Exemple 2:
<script>
var s = 'Bonjour ', nom, f = ' !', r;
nom = prompt('Quel est votre nom ?');
r= s+ nom+ f;
alert(r);
</script>
On peut aussi se servir de la fonction prompt() pour un calcul :
<script>
var x, y, r;
x = prompt('Entrez le premier chiffre :');
y = prompt('Entrez le second chiffre :');
r= parseInt(x) + parseInt(y); // la fonction parseInt() transforme la chaîne de caractères en nombre
alert(r);
</script>
La fonction confirm() : permet à l'utilisateur de faire un choix entre Ok et Annuler, la fonction renvoie
true si Ok, false si Annuler .
<script>
if (confirm('êtes vous en master 2 ‘)) {
alert('vous êtes en master2 !');
}
</script>
[Link] : Permet l’affichage directement dans la fenêtre HTML.
Exemple
<script>
var jour = 21;
var mois = 'juin';
[Link](jour + ' ' + mois + ' 2023');
</script>
2
Chapitre 3 : JavaScript
L’instruction conditionnelle
if (condition) {
Instruction(s)
}
else if {
instruction(s )
}
else {
instruction(s)
}
L’instruction de choix multiple Switch case
switch ( variable ) {
case valeur1 : Instructions1;
break ;
case valeur 2 : Instructions 2;
break ;
…….
case valeur n : Instructions n;
break ;
default : Instructions;
break ;
}
La boucle for
for ( i=0 ; i<N ; i ++) {
Instruction(s);
}
La boucle While
while (condition) {
instruction(s);
}
La boucle do while
do{
instruction(s) ;
}
while ( condition )
Les fonctions
function nom_de_la_fonction(arguments) {
// Le code de la fonction ;
return résultat;
}
3
Chapitre 3 : JavaScript
Exemple :
function cube(n) {
c = n*n*n;
return c; //retour de valeur
}
x = cube(5); //appel avec paramètre
[Link](x); //résultat
Les fonctions anonymes
Elles supposent la structure suivante, sans nom :
<script>
function (arguments) {
// Le code de votre fonction anonyme
} </script>
Une fonction anonyme peut être utilisée, entre autres, par le biais d'une variable :
<script>
var nom_variable = function() {
// Le code de votre fonction anonyme
}
</script>
Les objets de JavaScript
Au niveau du JavaScript, les différentes fonctionnalités offertes sont accessibles à travers un ensemble
d’objets prédéfinis. Les objets JavaScript peuvent être répartis en 2 catégories :
Les objets d’interface : permettent de gérer les aspects visuels de différents contrôles graphiques
pouvant se trouver au niveau d’une interface.
On peut citer comme exemple : l’objet window, document, bouton, radio, [Link].
Les objets bibliothèques de fonctions prédéfinies : permettent de fournir les différentes
ressources logicielles requises pour la programmation.
Ces objets sont : L’objet string, math, date, array, image,…
L’objet Math
Syntaxe : [Link](paramètre(s)) ;
Exemple :
[Link](x) ;
[Link](x,y) ;
[Link](x) ;
[Link](x,y) ;
[Link](x,y) ;
L’objet string
Soit x une chaine de caractères : x= ’chaine de caractères ‘ ;
[Link] : retourne la longueur de x.
[Link](i) : retourne le caractère situé à la position i.
[Link](‘séparateur’) : retourne un tableau de sous chaines de caractères découpées selon le
séparateur passé en paramètre.
Exemple :
y=[Link](‘ ‘) ;
[Link](y) ; // le résultat est : chaine,de,caractères
4
Chapitre 3 : JavaScript
[Link]() : retourne x en minuscule
[Link]() : retourne x en majuscule
L’objet array
- La création d’un tableau :
Var T=new Array(10) ; // initialise un tableau de 10 éléments, ou bien
Var T=[10] ;
- Le premier élément est indexé à 0
- Pour accéder aux éléments de T :
T[0] : le 1er élément, T[1] : le 2ème élément, ….
- Parcourir, lire et afficher les éléments d’un tableau :
for (var i=0; i < 10; i++){
T[i]=prompt(‘donner les éléments de T :’) ;
}
for (var i=0; i < [Link]; i++) {
alert(T[i]+’ ‘); // On affiche les éléments , jusqu'à la longueur totale du tableau
}
Méthodes sur les tableaux
[Link](‘séparateur’) : regroupe tous les éléments du tableau T en une seule chaîne.
[Link] () : inverse l’ordre des éléments du tableau T.
[Link](e1,e2,…) : ajoute l(es) élément(s) passé(s) en paramètre à la fin du tableau T.
[Link]() : supprime le dernier élément du tableau T.
[Link]() : supprime le premier élément du tableau T.
Exemple :
Introduire 10 noms à sauvegarder dans un tableau T en utilisant la méthode push(), puis les
afficher en les séparant par un espace.
<script>
var T= [], nom;
for (var i=0; i < 10; i++){
nom = prompt('Entrez un nom :') ;
[Link](nom);
}
alert([Link](' '));
</script>
Document Object Model (DOM)
Est une interface de programmation pour les documents XML et HTML.
Le DOM permet, via le JavaScript, d'accéder au code HTML d'un document. C'est grâce au DOM que
nous allons pouvoir modifier des éléments HTML.
L’objet window : est un objet global, représente la fenêtre du navigateur.
5
Chapitre 3 : JavaScript
L’objet document : est un sous-objet de window, il représente la page Web. C’est grâce à cet objet
que nous allons pouvoir accéder aux éléments HTML et les modifier.
La structure DOM
La page Web est vue comme un arbre, comme une hiérarchie d'éléments.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Le titre de la page</title>
</head>
<body>
<div>
<p>un texte et <a href="……….">un lien</a></p>
</div>
</body>
</html>
On peut donc schématiser cette page Web comme ceci :
<html>
<head> <body>
<meta <title> <div>
>
#text <p>
#text <a>
#text
- Chaque élément est appelé nœud(node)
- #text est un élément de type texte.
- <html> est l'élément parent
- L'élément <html> contient deux éléments, appelés enfants : <head> et <body>.
Méthodes d’accès aux éléments HTML
getElementById() : Cette méthode permet d'accéder à un élément en connaissant son ID qui est
simplement l'attribut id de l'élément.
6
Chapitre 3 : JavaScript
Exemple :
Résultat :
getElementsByTagName() : Cette méthode permet de récupérer, sous la forme d'un tableau, tous
les éléments de la famille, prend en argument le nom de l’élément HTML.
Exemple :
Résultat :
getElementsByClassName() : permet de récupérer une liste d’éléments qui possèdent l’attribut
class.
Exemple :
Résultat :
getElementsByName() : Cette méthode permet de récupérer les éléments qui possèdent l’attribut
name, elle est utilisée uniquement au sein des formulaires.
7
Chapitre 3 : JavaScript
Exemple :
querySelector() : renvoie le premier élément trouvé correspondant au sélecteur CSS spécifié.
querySelectorAll() : renvoie tous les éléments trouvés (sous forme de tableau) correspondant au
sélecteur CSS fourni.
Exemple :
Résultat :
Accéder au contenu des éléments HTML et le modifier
Nous pouvons utiliser :
innerHTML : permet de récupérer le code HTML d’un élément sous forme de texte.
textContent : permet de récupérer le contenu texte d’un élément HTML.
8
Chapitre 3 : JavaScript
Exemple :
Résultat :
Les évènements
Certaines actions sur des éléments d’un document web génèrent un évènement.
Un évènement est une action qui se produit et dépend de l’élément cible (sur lequel porte l’action).
Il existe différents types d’évènements :
les actions de l’utilisateur via le clavier :
- keyup : Relâcher une touche de clavier sur l'élément
- keydown : Appuyer (sans relâcher) sur une touche de clavier sur l'élément.
- …
les actions de l’utilisateur via la souris :
- click : Cliquer (appuyer puis relâcher) sur l'élément
- dblclick : Double-cliquer sur l'élément
- mouseover : Faire entrer le curseur sur l'élément
- mouseout : Faire sortir le curseur de l'élément
- …..
Les actions sur les formulaires :
- change : Changer la valeur d'un élément spécifique aux formulaires (input, checkbox, etc.)
- select : Sélectionner le contenu d'un champ de texte (input, textarea, etc.)
- ….
Gestionnaires d’évènements
Un gestionnaire d’évènements est composé de deux parties :
- une partie qui va servir à écouter le déclenchement de l’évènement,
- et une partie gestionnaire qui va être le code à exécuter dès que l’évènement se produit.
-
Pour implémenter un gestionnaire d’évènements :
On peut utiliser des attributs HTML de type évènement;
On peut utiliser des propriétés JavaScript liées aux évènements ;
On peut utiliser la méthode addEventListener()
9
Chapitre 3 : JavaScript
Utiliser des attributs HTML
Il s’agit d’insérer un attribut HTML lié à l’évènement qu’on souhaite gérer directement dans la balise
d’un élément à partir duquel on va pouvoir détecter le déclenchement de cet évènement.
Syntaxe : onEvent=’code’ ;
Event : nom de l’évènement
Code : code à exécuter.
Exemple 1:
Exemple 2 : TD2-Exo5
10
Chapitre 3 : JavaScript
Utiliser des propriétés JavaScript
1- On récupère tout d'abord l'élément HTML elt
2- On assigne une fonction anonyme à [Link]
Syntaxe :
[Link]=function(){
code de la fonction ;
Exemple : TD2-Exo5
11
Chapitre 3 : JavaScript
Utiliser la méthode addEventListener()
1- On récupère tout d'abord l'élément HTML elt
2- elt. addEventListener(‘Event’, nom_fonction)
nom_fonction : la fonction qui va gérer l’évènement.
Exemple : TD2-Exo5
12