Scribd
Importer
6 vues56 pages

Partie3 JavaScript CDL

Le document présente JavaScript comme un langage de programmation essentiel pour le développement web, permettant d'améliorer l'interactivité des pages. Il explique les différences entre Java et JavaScript, ainsi que les concepts de base comme les variables, les types de données, et les tableaux. Des bonnes pratiques pour l'intégration de JavaScript dans les pages web et des exemples d'utilisation sont également fournis.

Transféré par

Noone7
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
6 vues56 pages

Partie3 JavaScript CDL

Le document présente JavaScript comme un langage de programmation essentiel pour le développement web, permettant d'améliorer l'interactivité des pages. Il explique les différences entre Java et JavaScript, ainsi que les concepts de base comme les variables, les types de données, et les tableaux. Des bonnes pratiques pour l'intégration de JavaScript dans les pages web et des exemples d'utilisation sont également fournis.

Transféré par

Noone7
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 56

Développement Web : Front End

Partie 3 : JavaScript
Introduction
■ Qu'est-ce que le JavaScript ?
JavaScript est un langage de programmation qui, incorporé aux balises Html, permet
d'améliorer la présentation et l'interactivité des pages Web.
Principalement utilisé côté client, JavaScript est interprété par le navigateur, ce qui permet une
interaction directe avec l'utilisateur sans avoir besoin de serveur.
■ Pourquoi faire ?
Traitement local des événements déclenchés par l'utilisateur (clics, survols, saisies, etc.).
Création d'applications simples : calculettes, convertisseurs, jeux, etc.
Gestion des aspects graphiques (par exemple, modification d'images selon la position de la
souris, animations de texte, etc.).
Validation de la saisie dans les formulaires : vérification des données avant l'envoi au serveur.
Et bien plus encore...
■ Java ou JavaScript ?
Java => langage de programmation complet, indépendant de HTML, puissant, fortement typé.
JavaScript => langage de programmation léger, interprété, utilisé principalement dans le
développement web, avec un typage dynamique et faible.

11/05/2025 Prof. Hafida ZROURI 2


Introduction
■ JavaScript est un langage orienté objet :
Il se fonde sur la programmation orientée objet par prototype (et non par classes, comme en Java
ou C++).
Il est conçu pour écrire des scripts, c’est-à-dire du code interprété directement, sans compilation
préalable.
■ Que mettre dans le script ?
Un script JavaScript peut contenir :
- Des variables,
- Des instructions,
- Éventuellement des fonctions, le tout organisé sous forme d’un algorithme, c’est-à-dire une suite
logique d’instructions visant à produire un résultat donné.
■ Règles générales :
JavaScript est sensible à la casse : ➤ MaVariable et mavariable sont deux identifiants différents.
Chaque instruction se termine par un point-virgule ; (ce n’est pas toujours obligatoire, mais
fortement recommandé).
Commentaires :
// Ceci est un commentaire limité à une seule ligne
/* Ceci est un commentaire sur plusieurs lignes */
11/05/2025 Prof. Hafida ZROURI 3
Intégration de JavaScript dans
une page web
■ Intégration interne dans la page HTML :
Syntaxe : <script> /* Code JavaScript */ </script>
Avantage : Simple à mettre en œuvre pour des scripts simples et de petite taille.
➤ A privilégier lorsque le code est limité à une seule page et non réutilisable ailleurs dans le site.

■ Fichier JavaScript externe (recommandé) :


Syntaxe : <script src="nomFichier.js"></script>
Avantages : - Meilleure séparation du contenu HTML et du code JavaScript.
- Améliore la lisibilité, réutilisabilité et maintenance du code.
➤ A utiliser pour les projets comportant plusieurs pages web nécessitant des scripts JavaScript
communs.

■ JavaScript en ligne (à éviter) :


Syntaxe : <balise onEvenement="code JavaScript">
Inconvénients : - Mélange du code JavaScript avec le HTML.
- Rend le projet plus difficile à maintenir et à faire évoluer.
➤ A éviter, sauf pour de très courts scripts de test ou des démonstrations rapides.

11/05/2025 Prof. Hafida ZROURI 4


Intégration de JavaScript dans
une page web
■ Attributs importants de la balise <script> :
defer : permet de charger le script en arrière-plan sans bloquer le rendu de la page.
➤ Le script s’exécute après le chargement complet du HTML, dans l'ordre d'apparition des balises
<script>.
async : permet également un chargement asynchrone, sans bloquer l’affichage.
➤ Le script est exécuté dès qu’il est téléchargé, ce qui peut entraîner un ordre d’exécution non garanti.

■ Comment informer l’utilisateur si JavaScript est désactivé ?


La balise <noscript> permet d’afficher un contenu alternatif lorsque JavaScript est désactivé dans le
navigateur.
Exemple : <script src="app.js" defer></script>
<noscript>
<p style="color: red;">Ce site nécessite JavaScript. Activez-le dans les paramètres.</p>
</noscript>

■ Bonnes pratiques :
Placer les scripts en fin de <body>, sauf si l’attribut defer est utilisé.
Minimiser l'utilisation de code JavaScript en ligne.

11/05/2025 Prof. Hafida ZROURI 5


Les variables
■ Définition : une variable en JavaScript se caractérise par un nom (appelé identificateur), un type de
donnée implicite (dépendant de la valeur affectée), et une valeur.
■ Règles de nommage : l’identificateur d’une variable doit respecter les règles suivantes :
- Être une chaîne de caractères continue (espaces non autorisés).
- Commencer par une lettre, un underscore _, ou un symbole dollar $.
➤ Les chiffres sont autorisés uniquement à partir du deuxième caractère.
- Ne pas utiliser un mot réservé du langage JavaScript (par ex. : if, for, var, let, return, etc.).
■ L'opérateur d'affectation : l’opérateur = sert à affecter une valeur à une variable.
Exemple : x = 5; // affecte la valeur 5 à la variable x
■ Déclaration : les variables peuvent être déclarées de deux manières :
Déclaration explicite (recommandée) : le nom de la variable est précédé par l’un des mots-clés let ou
var (ce dernier étant plus ancien). Exemple : var i, j, k; // Déclaration multiple
i = 1; // Affectation
let prix = 20; // Déclaration avec initialisation
Déclaration implicite (non recommandée) : si une valeur est affectée à une variable sans que cette
dernière ne soit déclarée explicitement, alors JavaScript la déclare automatiquement.
Exemple : ch = "Bonjour"; // Déclaration implicite
11/05/2025 Prof. Hafida ZROURI 6
Les variables
■ Portée des variables : la portée d’une variable détermine la zone du code où elle est accessible et
modifiable. Elle dépend du mot-clé utilisé lors de sa déclaration (var, let, ou implicite).
1- var : portée fonctionnelle ou globale
›› Portée fonctionnelle : une variable déclarée avec var à l’intérieur d’une fonction est accessible dans
toute la fonction, indépendamment des sous-blocs (if, for, …) qu’elle contient.
›› Portée globale : si déclarée en dehors de toute fonction, la variable est accessible partout dans le script.
Remarque : avec var, il est possible de redéclarer une variable avec le même identificateur sans générer
d'erreur. Exemple : var x = 2; var x = 3; // Ok
2- let : portée de bloc ou globale
›› Portée de bloc : une variable déclarée avec let dans un bloc ({}) est limitée à ce bloc (boucles,
conditions, fonctions, ...).
›› Portée globale : déclarée en dehors de tout bloc, la variable est accessible dans tout le script.
Remarque : Redéclaration interdite dans le même bloc. Exemple : let x = 2; let x = 3; // Erreur !
3- Déclaration implicite : portée globale
Une variable implicitement déclarée (sans var ni let) a une portée globale et est accessible partout dans le
script à partir de son point de déclaration.

Il est recommandé d’utiliser let pour bénéficier d’une portée de bloc stricte et éviter les redéclarations accidentelles.

11/05/2025 Prof. Hafida ZROURI 7


Les types
■ Typage dynamique : JavaScript est un langage à typage dynamique, ce qui signifie que :
- Le type d'une variable est déterminé par la valeur qui lui est affectée.
- Aucune déclaration de type explicite n'est nécessaire.
- Le type d'une variable peut changer si une nouvelle valeur de type différent lui est assignée.
■ Quelques types primitifs :
Nombres (Number) : en JavaScript, tous les nombres, qu'ils soient entiers ou réels, sont représentés
par le type Number.
Exemple : let x = 1.75; let y = 32;
Booléens (Boolean) : les booléens représentent une valeur logique : true ou false.
Exemple : let actif = true; let estVide = false;
* Valeurs évaluées comme false : false, 0, "" (chaîne vide), null, undefined, NaN
* Remarque : null indique un appel à une variable ou à un objet non déclaré. undefined est la valeur
par défaut assignée à une variable déclarée avec le mot-clé let ou var mais à la quelle aucune
valeur n’a été assignée.
Chaines de caractères (String) : les chaînes sont délimitées par ' ' ou " ".
Exemple : let prenom = "Mohamed";
* Caractères spéciaux reconnus : \n (retour à la ligne), \t (tabulation), \f (saut de page), \'
(apostrophe), \" (guillemets), \\ (antislash)
* Opérateur de concaténation : l’opérateur + permet de concaténer des chaînes.
Exemple : let message = "Bonjour " + prenom;
11/05/2025 Prof. Hafida ZROURI 8
Les tableaux
■ Définition : en JavaScript, un tableau est un objet de type Array qui permet de stocker plusieurs valeurs
dans une seule variable. Chaque élément est accessible via un indice commençant à 0.
➤ Un tableau peut contenir des éléments de types variés : nombres, chaînes, objets, booléens, …
■ Création d’un tableau : plusieurs syntaxes sont possibles :
Syntaxe Description Exemple
let tab = []; Tableau vide let tab1 = [];
let tab = [val1, val2, …]; Avec valeurs initiales let tab2 = [1, "JS", true];
let tab = new Array(); Tableau vide (déconseillée) let tab3 = new Array();
let tab = new Array(n); Tableau de taille n (peu utilisé) let tab4 = new Array(5);
let tab = Array.of(val1, val2, …); Avec valeurs initiales (plus moderne) let tab5 = Array.of(10, 27);
■ Propriété et méthodes utiles :
- length : retourne le nombre d’éléments dans le tableau.
- push() : ajoute un ou plusieurs éléments spécifiés en argument à la fin du tableau.
- unshift() : ajoute un ou plusieurs éléments spécifiés en argument au début d'un tableau.
- pop() : supprime le dernier élément du tableau.
- shift() : supprime le premier élément du tableau.
- concat() : assemble deux ou plusieurs tableaux pour n’en faire qu’un seul. Cette méthode réclame en
argument le tableau (ou plusieurs) qui sera ajouté à la fin du tableau référencé.
- sort() : trie les éléments d'un tableau. Par défaut, elle trie les éléments sous forme de chaînes de
caractères et en ordre alphabétique.
11/05/2025 Prof. Hafida ZROURI 9
Les tableaux
- reverse() : inverse l’ordre des éléments d’un tableau.
- join() : concatène les éléments d’un tableau en une chaîne, les éléments sont séparés par un caractère
séparateur spécifié en argument. Par défaut, ce séparateur est une virgule.
- toString() : convertit un tableau en une chaîne de caractères. Les éléments sont séparés par une virgule.
- map() : retourne un nouveau tableau en appliquant une fonction spécifiée en argument à chaque
élément du tableau original référencé.
- includes() : vérifie la présence dans le tableau d'un élément spécifié en argument. Elle retourne true si
l'élément recherché est présent, sinon false.
- forEach() : exécute une fonction spécifiée en argument pour chaque élément du tableau.
■ Exemple :
let t1 = [5, 2, 4], t2 = [1, 9], t3 = [];
let t = t1.concat(t2); // t --> [5, 2, 4, 1, 9]
t.push(3); // t --> [5, 2, 4, 1, 9, 3]
t.pop(); // t --> [5, 2, 4, 1, 9]
let ch = t.join('-'); // ch --> "5-2-4-1-9"
t.reverse(); // t --> [9, 1, 4, 2, 5]
let contient = t.includes(4); // contient --> true
let doubles = t.map(x => x * 2); // doubles --> [18, 2, 8, 4, 10]
t.forEach((val, index) => { t[index] = val + 2; }); // t --> [11, 3, 6, 4, 7]
t.forEach((val, index) => { t3.push(val*val); }); // t3 --> [121, 9, 36, 16, 49]

11/05/2025 Prof. Hafida ZROURI 10


Les constantes
■ Définition : une constante est une variable dont la valeur ne peut plus être modifiée après sa déclaration.
Elle se déclare avec le mot-clé const.
■ Caractéristiques principales :
Initialisation obligatoire : une constante doit être initialisée au moment de sa déclaration.
Exemple : const PI = 3.14; // Ok const PI; // Erreur
Pas de réaffectation : une fois définie, on ne peut plus lui attribuer une autre valeur.
Exemple : const A = 3; A = 5; // Erreur
Portée : comme let, une constante définie dans un bloc est visible uniquement dans ce bloc {} où elle
est déclarée. Si elle est déclarée en dehors de toute fonction ou bloc, la constante est accessible dans
tout le script.
Pas de re-déclaration dans le même bloc : il est interdit de redéclarer une constante avec le même
identifiant dans un bloc. Exemple : const x = 1; const x = 2; // Erreur
Références constantes, pas les valeurs internes : si la constante est un objet ou un tableau, ses
propriétés ou éléments peuvent être modifiés, mais la référence ne peut pas changer.
Exemple : const fruits = ["pomme", "banane"];
fruits[0] = "kiwi"; // Ok : on peut modifier les éléments du tableau
fruits = ["ananas"]; // Erreur : réaffectation interdite
11/05/2025 Prof. Hafida ZROURI 11
Les opérateurs
■ Opérateurs de comparaison : == , != , ===, !==, < , <= , > , >=
➤ Les opérateurs === et !== comparent à la fois la valeur et le type (égalité stricte).
Exemple : let x = 1, y = "1";
x == y  true (valeurs égales après conversion implicite)
x === y  false (types différents)
0 == false  true (comparaison après conversion implicite)
0 === false  false (types différents)
➤ Contrairement à Java, les chaînes de caractères peuvent également être comparées avec
ces opérateurs.
Exemple : "chat" > "chien"  false (ordre alphabétique)
■ Opérateurs d’incrémentation / décrémentation : x++, x--, ++x, --x
➤ Ces opérateurs permettent d'ajouter ou de soustraire 1 à une variable.
x++ : post-incrémentation (l’évaluation de l’instruction a lieu avant l'incrémentation)
++x : pré-incrémentation (l’incrémentation a lieu avant l'évaluation de l’instruction)
Exemple : let i = 5;
let j = i++; // j = 5, i = 6
j = ++i; // i = 7, j = 7

11/05/2025 Prof. Hafida ZROURI 12


Les opérateurs
■ Opérateur de coalescence des nuls (??) : Cet opérateur renvoie l’opérande de droite si l’opérande
de gauche est null ou undefined, sinon renvoie l’opérande de gauche.
Exemple : let pseudo = null;
let identifiant = pseudo ?? "Utilisateur inconnu"; // identifiant = "Utilisateur inconnu"
let x = 0;
let y = x ?? 10; // y = 0 (car 0 n'est pas null ni undefined)
■ Opérateurs booléens : && (ET), || (OU), ! (NON)
Exemple : let estConnecte = true, estAdmin = false;
estConnecte && estAdmin  false
estConnecte || estAdmin  true
!estConnecte  false
■ Opérateurs arithmétiques : + , - , * , / , % (modulo), ** (puissance)
➤ Affectations combinées : += , -= , *= , /= , %= , **=
Exemple : let x = 2, y;
y = x**2 // y = 4
x **= 3; // x = 8 (2³)
x += 4; // x = 12
y = 10 % 3; // y = 1 (reste de 10 ÷ 3)
11/05/2025 Prof. Hafida ZROURI 13
Méthodes d’interaction et d’affichage
■ prompt() : boîte de saisie
Affiche une boîte de dialogue modale avec champ de saisie et deux boutons (OK / Annuler)
Retourne la valeur saisie si OK est cliqué, et null si Annuler ou Échap est pressé.
Syntaxe : const saisie = prompt("Message d'invite");
const saisie = prompt("Message d'invite", "Valeur par défaut");
■ alert() : message d'information
Affiche une boîte de dialogue simple avec un message et un bouton OK.
Utilisée pour informer l’utilisateur.
Syntaxe : alert("Message");
■ confirm() : demande de confirmation
Affiche une boîte de dialogue avec un message, un bouton OK et un bouton Annuler.
Utilisée pour confirmer une action.
Retourne true si l’utilisateur clique sur OK et false dans le cas contraire.
Syntaxe : let confirmation = confirm("Message");

11/05/2025 Prof. Hafida ZROURI 14


Méthodes d’interaction et d’affichage
■ document.write() : écrire dans le document HTML
Écrit du contenu (HTML, texte, ou JavaScript) directement dans le document HTML.
Syntaxe : document.write("texte");
➤ Attention : Si utilisé après le chargement complet de la page, cela effacera tout le
contenu existant.
■ open() : ouvrir une nouvelle fenêtre
Permet de charger une page HTML, une image, ou tout autre contenu web dans une
nouvelle fenêtre ou un nouvel onglet. Cette méthode retourne un objet Window
représentant la nouvelle fenêtre.
Syntaxe : let fenetre = open("adresse cible","nom de la fenêtre","attributs");
Attributs : (paramètre optionnel) Chaîne de caractères définissant les options de la
nouvelle fenêtre. Elle ne doit pas contenir d’espaces et les options doivent être séparées
par des virgules.
width, height : dimensions de la fenêtre en pixel.
left, top : position en pixels depuis le bord gauche (left) et supérieur (top) de l’écran.
resizable=yes|no : définit si la taille de la fenêtre est modifiable ou non.
scrollbars=yes|no : affiche ou non les ascenseurs (barres de défilement).

11/05/2025 Prof. Hafida ZROURI 15


Méthodes d’interaction et d’affichage
■ Exemple 1 :
<!DOCTYPE html>
<html lang="fr" >
<head>
<meta charset="UTF-8">
<title>Web</title>
</head>
<body>
<script>
const nom = prompt("Quel est votre prénom ?");
if (nom) {
alert("Bonjour " + nom + " !");
const confirmation = confirm("Souhaitez-vous afficher un message sur la page ?");
if (confirmation) { document.write("Bienvenue, <b>" + nom + " </b>!"); }
}
</script>
</body>
</html>

11/05/2025 Prof. Hafida ZROURI 16


Méthodes d’interaction et d’affichage
■ Exemple 2 :
…
<body>
<h1>Trois exemples d'ouverture de fenêtre :</h1>
<p style="color: blue;">
Astuce : Les fenêtres peuvent être bloquées par le navigateur.<br>
Cliquez sur l'icône dans la barre d'adresse pour les autoriser.
</p>
<script>
// Ouvrir un site web dans un nouvel onglet
const fenetre = window.open("https://www.wikipedia.org", "_blank");
if (!fenetre) { alert("Veuillez autoriser les pop-ups !"); }
// Ouvrir une image dans une petite fenêtre
open("einstein.jpg", "image", "width=200,height=200,left=50,top=50");
// Ouvrir un PDF dans une fenêtre avec ascenseurs
open("proprietesCSS.pdf","pdf","width=600,height=400,left=250,top=250,scrollbars=yes");
</script>
</body>
</html> /* Pour afficher l'icône , on peut également utiliser l'entité HTML : &#128683; */

11/05/2025 Prof. Hafida ZROURI 17


Structures de contrôle et boucles
■ Expressions conditionnelles :
if (condition) { /* instructions si vrai */ } else { /* instructions si faux (optionnel) */ }
switch (variable) {
case valeur1 : instructions1; break;
case valeur2 : instructions2; break;
…
default : instructionsParDefaut; // facultatif
}
■ Opérateur (ternaire) conditionnel :
(condition) ? expression_si_vrai : expression_si_faux;
Exemple :
let jour = "Mardi", age = 14;
let petitMot = (jour === "Lundi") ? "Bonne reprise du travail !" : "Bon courage !";
if (age < 12) { alert("Enfant"); } else if (age < 18) { alert("Adolescent"); } else { alert("Adulte"); }
switch (jour) {
case "Lundi": alert("Début de la semaine !"); break;
case "Vendredi": alert("C'est presque le week-end !"); break;
default : alert("Bonne journée !");
}
11/05/2025 Prof. Hafida ZROURI 18
Structures de contrôle et boucles
■ Itérations :
while (condition) { instructions }
do { instructions } while (condition);
for (initialisation; condition_d’arrêt; expression_à_répéter ) { instructions }
for (variable in tableau) { instructions } → parcourt les indices du tableau.
for (variable of tableau) { instructions } → parcourt les valeurs du tableau.
break : interrompt une boucle (while, for, do...while) ou un switch.
continue : passe à l’itération suivante de la boucle.
Exemple :
const premiers = [1, 3, 5, 7, 9, 11,13];
let resultatFor = "Exemple avec for : ";
for (let i = 0; i < premiers.length; i++) { resultatFor += premiers[i] + " "; }
let resultatForIn = "Exemple avec for...in : ";
for (let indice in premiers) { resultatForIn += premiers[indice] + " "; }
let resultatForOf = "Exemple avec for...of : ";
for (let nombre of premiers) { resultatForOf += nombre + " "; }
alert(resultatFor + "\n" + resultatForIn + "\n" + resultatForOf);

11/05/2025 Prof. Hafida ZROURI 19


Les fonctions
■ En JavaScript, comme dans la plupart des langages, une fonction est un bloc d'instructions
réutilisable, défini une seule fois mais pouvant être exécuté plusieurs fois.
■ Il existe plusieurs façons de définir une fonction en JavaScript :
1- Déclaration classique (avec function) :
Syntaxe : function nomFonction(param1, param2, ...) { /* instructions */ }
Remarques :
- Une fonction retourne toujours une valeur :
- Soit celle explicitement renvoyée par return,
- Soit undefined si aucune valeur n'est retournée.
- Une fonction peut accepter des arguments de tout type, y compris d'autres fonctions.
- Les fonctions peuvent être appelées de manière récursive.
- Le nombre d’arguments passés à l’appel n’a pas besoin de correspondre exactement au
nombre de paramètres déclarés :
- Les arguments excédentaires sont ignorés.
- Les paramètres manquants valent undefined.
- Les types primitifs (nombres, chaînes, booléens) sont passés par valeur, tandis que les
objets, tableaux et fonctions sont passés par référence.
11/05/2025 Prof. Hafida ZROURI 20
Les fonctions
Exemple :
// Fonction qui calcule la somme de deux nombres
function calculerSomme(x, y) {
return x + y;
}
// Fonction qui affiche un contenu en gras dans la page
function afficherEnGras(contenu) {
let chaine = '<b>' + contenu + '</b>';
document.write(chaine);
}
// Utilisation des fonctions
let resultat = calculerSomme(2, 3);
document.write('Premier résultat : ' + resultat + '<br>');
resultat = calculerSomme(1, 5);
document.write('Deuxième résultat : ');
afficherEnGras(resultat);
11/05/2025 Prof. Hafida ZROURI 21
Les fonctions
2- Expression de fonction anonyme :
Syntaxe : const nomFonction = function (param1, param2, ...) { /* instructions */ };
Exemple :
const carre = function(x) { return x*x; };
const affiche = function() { alert("Bienvenue dans le monde de JavaScript !"); };
let a = carre(4); // a reçoit la valeur 16
affiche(); // affiche : Bienvenue dans le monde de JavaScript !
3- Fonction fléchée :
Syntaxe : const nomFonction = (param1, param2, ...) => { /* instructions */ };
ou const nomFonction = (param1, param2, ...) => valeur_ou_expression;
ou const nomFonction = param1 => { /* instructions */ };
ou const nomFonction = param1 => valeur_ou_expression;
param1, param2, … : noms des paramètres. Si la fonction ne prend aucun paramètre, on
utilise (). Si elle en prend un seul, les parenthèses sont facultatives.
instructions ou expression : S'il y a plusieurs instructions, elles doivent être encadrées par
des accolades. Une expression unique ne doit pas obligatoirement être entourée
d'accolades. L'expression est également la valeur de retour implicite de la fonction.
11/05/2025 Prof. Hafida ZROURI 22
Les fonctions
Exemple :
const maximum = (a, b) => {
if (a > b) return a;
else return b;
};
const produit = (x, y) => x*y;
const saluer = nom => "Bonjour " + nom;
alert(maximum(7,9) + "\n" + produit(2, 3) + "\n" + saluer("Mohamed" ));
/* Ces fonctions peuvent également s’écrire avec l’expression de fonction anonyme :
const maximum = function(a, b) {
if (a > b) return a;
else return b;
};
const produit = function(x, y) { return x*y; };
const saluer = function(nom) { return "Bonjour " + nom; };
*/
11/05/2025 Prof. Hafida ZROURI 23
Les fonctions
Quelques fonctions utiles :
1- Conversion de Types :
- parseInt() : convertit une chaîne en entier. Renvoie NaN (Not a Number) si la chaîne ne
commence pas par un chiffre. Exemple :
let entier = parseInt("4.2"); // entier = 4
entier = parseInt("a75b"); // entier = NaN
entier = parseInt("75ab"); // entier = 75
Remarque : la méthode Number.parseInt() fonctionne de manière identique à parseInt().
- parseFloat() : convertit une chaîne en nombre flottant. Exemple :
let flottant = parseFloat("3.14"); // flottant = 3.14
flottant = parseFloat("3.14abc"); // flottant = 3.14
flottant = parseFloat("a3.14bc"); // flottant = NaN
Remarque : la méthode Number.parseFloat fonctionne de manière identique à parseFloat().
- Number() : convertit une chaîne en nombre (conversion plus stricte). Exemple :
let nombre = Number("54.14"); // nombre = 54.14
nombre = Number("399"); // nombre = 399
nombre = Number("3.1abc"); // nombre = NaN
11/05/2025 Prof. Hafida ZROURI 24
Les fonctions
- String() : convertit le paramètre en chaîne de caractères. Exemple :
let ch = String(6.7); // ch = "6.7"
ch = String(true); // ch = "true"
- Boolean() : convertit le paramètre en booléen (Valeurs évaluées comme false : 0, "", null, undefined,
NaN). Exemple :
let b = Boolean(6); // b = true
b = Boolean("false"); // b = true
b = Boolean(""); // b = false
2- Validation :
- isNaN() : vérifie si le paramètre ne peut pas être convertie en nombre. Exemple :
let v = isNaN("Bonjour"); // v = true
v = isNaN(123); // v = false
v = isNaN("9.3"); // v = false
v = isNaN("7js23"); // v = true
- Number.isNaN() : vérifie si la valeur est strictement NaN. Exemple :
let test = Number.isNaN(NaN); // test = true
test = Number.isNaN("Bonjour"); // test = false
test = Number.isNaN(Number("Bonjour")); // test = true
11/05/2025 Prof. Hafida ZROURI 25
Les fonctions
- Number.isInteger() : vérifie si le paramètre est un nombre est entier. Exemple :
let verif = Number.isInteger(5.4); // verif = false
verif = Number.isInteger(23); // verif = true
3- Minuteries :
- setTimeout() : exécute une fonction une seule fois après un délai en milliseconde. Exemple :
const timerId = setTimeout(() => alert("JS"), 3000); // appelle alert("JS") après 3s
- setInterval() : exécute une fonction périodiquement, toutes les x millisecondes. Exemple :
const intervalId = setInterval(changer, 1000); // appelle changer() chaque seconde
- clearTimeout() : annule l’exécution d’un setTimeout. Exemple :
clearTimeout(timerId);
- clearInterval() : annule l’exécution d’un setInterval. Exemple :
let compteur = 0;
const couleurs = ["blue", "red", "green"];
const intervalId = setInterval( () => {
document.body.style.backgroundColor = couleurs[compteur % couleurs.length];
if (++compteur >= 20) clearInterval(intervalId);
}, 1000); /* Chaque seconde, la couleur de fond de la page change. L’effet s’arrête après 20 secondes. */
11/05/2025 Prof. Hafida ZROURI 26
Les objets : notions de base
■ Qu’est-ce qu’un objet en JavaScript ? : un objet est un ensemble de propriétés. Chaque propriété
a un nom (ou clé) et une valeur. La valeur peut être une chaîne de caractères, un nombre, un
booléen, un tableau, ou même une fonction. Si la valeur est une fonction, on l'appelle
méthode. Cette méthode peut accéder aux autres propriétés de l'objet avec l'opérateur this.
■ Accès aux propriétés d’un objet : on peut accéder aux propriétés d’un objet de deux manières :
Notation pointée : objet.propriété
Notation avec crochets : objet["propriété"]
Si une propriété n'existe pas, la valeur sera undefined.
■ Objets dynamiques : les objets JavaScript sont flexibles et modifiables à tout moment :
Si l'on affecte une valeur à une propriété inexistante, celle-ci est automatiquement créée.
objet.nouvellePropriete = valeur; // Création automatique
Une propriété peut être supprimée à l'aide de l'instruction :
delete objet.propriété; // Retire la propriété
■ Types d'objets : on distingue plusieurs catégories d'objets en JavaScript :
Objets prédéfinis : fournis par le langage (Ex : Number, String, Array).
Objets du navigateur : objets spécifiques au contexte du navigateur (Ex : Window, document).
Objets personnalisés : créés par le programmeur selon les besoins.

11/05/2025 Prof. Hafida ZROURI 27


Les objets : notions de base
■ Création d’un objet : la création d'un objet en JavaScript peut se faire de plusieurs façons. La
méthode la plus simple et la plus courante consiste à utiliser la notation littérale :
const monObjet = {
propriete1 : valeur1,
// … autres propriétés
methode1 : function(param1, param2, ...) { /* instructions */ },
// … autres méthodes
};
Notation concise pour les méthodes : une syntaxe raccourcie est disponible pour définir les
méthodes :
const monObjet = {
propriete1 : valeur1,
// … autres propriétés
methode1(param1, param2, ...) { /* instructions */ },
// … autres méthodes
};
Remarques :
- La notation concise est plus lisible et recommandée pour les méthodes.
- Les propriétés et méthodes sont séparées par des virgules.
11/05/2025 Prof. Hafida ZROURI 28
Les objets : notions de base
■ Exemple :
const point = {
x : 0,
y : 0,
initialise(a,b) { this.x = a; this.y = b; },
affiche() { alert('Point(' + this.x + ', ' + this.y + ')'); }
};
point.initialise(1, 5);
point.affiche(); // affiche : Point(1, 5)
point.y = 2; // syntaxe équivalente : point["y"] = 2;
point.affiche(); // syntaxe équivalente : point["affiche"]();
point.z = 9; // ajout d’une nouvelle propriété z à l'objet point
point.deplace = function(a, b) {this.x += a; this.y += b;}; // ajout de la méthode deplace à l’objet point
point.deplace(3,8); // syntaxe équivalente : point['deplace'](3,8);
point.affiche(); // affiche : Point(4, 10)
delete point.z; // suppression de la propriété z
11/05/2025 Prof. Hafida ZROURI 29
Le Modèle Objet du Navigateur (BOM)
■ Interaction entre JavaScript et le navigateur :
JavaScript interagit avec les éléments du navigateur en les représentant comme des objets, organisés
de manière hiérarchique afin de faciliter leur manipulation. Chaque objet possède :
• Propriétés : définissent les caractéristiques de l'élément.
• Méthodes : permettent d'effectuer des actions sur l'élément.
Le navigateur et la page web forment ainsi un ensemble d’objets interconnectés, que l’on peut
consulter ou modifier à l’aide de leurs propriétés et méthodes. Cet ensemble d'objets est désigné
par l'acronyme BOM pour Browser Object Model (Modèle Objet du Navigateur).
■ Hiérarchie des objets du navigateur :
L’accès aux objets du BOM se fait en suivant une hiérarchie descendante, à partir de l’objet global :
– window : c’est l’objet principal, qui représente la fenêtre du navigateur. Il contient tous les autres
objets.
– document : c’est une propriété de window. Il représente la page HTML affichée dans le
navigateur. L'objet document contient d'autres objets qui correspondent aux éléments HTML
(formulaires, images, paragraphes, etc.), chacun avec ses propres propriétés et méthodes.
– navigator : fournit des informations sur le navigateur de l'utilisateur (nom, version, ...).
– location : permet de consulter ou de modifier l’URL de la page en cours.
– history : permet de naviguer dans l’historique de navigation (page précédente, suivante, ...).

11/05/2025 Prof. Hafida ZROURI 30


Le Modèle Objet du Navigateur (BOM)
■ L’objet window : contrôler la fenêtre du navigateur
L’objet window offre de nombreuses propriétés et méthodes utiles :
– Quelques propriétés :
● closed : indique si la fenêtre est fermée (renvoie true si fermée, false sinon).
● innerWidth / innerHeight : dimensions en pixels de la zone visible du contenu dans la fenêtre
du navigateur (sans les barres d’outils, les barres de défilement ni les bordures).
● outerWidth / outerHeight : dimensions totales de la fenêtre du navigateur, incluant les
bordures, les barres d’outils et les barres de défilement.
– Quelques méthodes :
● alert(), confirm(), prompt() : affichent des boîtes de dialogue interactives.
● open(), et close() : permettent d’ouvrir et de fermer des fenêtres.
● setTimeOut(), clearTimeOut() : exécutent une action après un certain temps.
● setInterval(), clearInterval() : répètent une action à intervalles réguliers.
● print() : lance l'impression de la page en cours (équivalent à Ctrl+P). Cette méthode ne prend
aucun paramètre. Exemple :
<p>Cliquez sur le bouton ci-dessous pour imprimer cette page.</p>
<button type="button" onclick="window.print()">Imprimer cette page</button>
11/05/2025 Prof. Hafida ZROURI 31
Le Modèle Objet du Navigateur (BOM)
■ L’objet document : interagir avec le contenu HTML
L’objet document permet de lire ou modifier la structure et le contenu HTML d’une page.
– Propriétés courantes :
● URL : récupère l'URL complète de la page actuelle.
● title : lit ou modifie le titre du document (contenu de l’élément <title>).
Ex : document.title = "Nouveau titre";
● images[] : accède à toutes les images.
Ex : if (document.images.length > 0) { alert(document.images[0].src); }
● forms[] : accède aux formulaires.
Ex : if (document.forms.length > 0) { alert(document.forms[0].name); }
● links[] : accéde aux liens hypertextes.
Ex : if (document.links.length > 0) { alert(document.links[0].href); }
● body : représente l'élément <body> du document.
● head : représente l'élément <head> du document.

11/05/2025 Prof. Hafida ZROURI 32


Le Modèle Objet du Navigateur (BOM)
– Quelques méthodes :
● write() : écrit du contenu HTML directement dans le flux du document lors du
chargement. (Attention : si utilisée après le chargement, elle efface tout le
document)
● getElementById("id") : retourne l’élément ayant l’identifiant spécifié en paramètre,
ou null s’il n’existe pas.
● getElementsByTagName("balise") : retourne une liste de tous les éléments
correspondant au nom de balise spécifié. La méthode renvoie un objet qui se
comporte comme un tableau mais ne possède pas les méthodes forEach() ou map().
● querySelector("sélecteursCSS") : retourne le premier élément correspondant au
sélecteur CSS spécifié, ou null si aucun élément ne correspond. Plusieurs sélecteurs
peuvent être séparés par une virgule.
● querySelectorAll("sélecteursCSS") : retourne tous les éléments correspondant au
sélecteur CSS spécifié. Renvoie une NodeList qui se comporte comme un tableau.

11/05/2025 Prof. Hafida ZROURI 33


Le Modèle Objet du Navigateur (BOM)
– Accéder ou modifier le contenu des éléments HTML :
● element.innerHTML : récupère ou modifie le contenu HTML d'un élément.
● element.textContent : récupère ou modifie le contenu textuel d'un élément.
● element.insertAdjacentHTML(position, contenu) : insère un contenu HTML donné à
une position donnée par rapport à l'élément sur lequel elle est appelé. La position doit
être l'une des chaînes suivantes :
- "beforebegin" : avant l'élément
- "afterbegin" : au début de l’élément
- "beforeend" : à la fin de l’élément
- "afterend" : après l'élément
● element.insertAdjacentText(position, texte) : insère un texte à une position spécifique
parmi les mêmes valeurs : "beforebegin", "afterbegin", "beforeend", ou "afterend".
● element.value : récupère ou modifie la valeur d'un élément de formulaire (<input>,
<select>, <textarea>).
● element.defaultValue : récupère ou modifie la valeur par défaut définie dans le code
HTML d'un élément de formulaire.

11/05/2025 Prof. Hafida ZROURI 34


Le Modèle Objet du Navigateur (BOM)
Exemple 1 :
…
<body>
<h1>Informations sur cette page</h1>
<p id="infos"></p>
<script>
// Récupération des informations
const titre = document.title;
const url = document.URL;
const largeur = window.innerWidth;
const hauteur = window.innerHeight;
// Affichage des informations dans la balise <p>
document.getElementById("infos").innerHTML =
"Titre : " + titre + "<br>" +
"URL : " + url + "<br>" +
"Taille de la fenêtre : " + largeur + " x " + hauteur + " pixels";
</script>
</body>
…

11/05/2025 Prof. Hafida ZROURI 35


Le Modèle Objet du Navigateur (BOM)
Exemple 2 :
…
<body>
<p>Développement <strong>Web</strong></p>
<p></p>
<script>
const para = document.getElementsByTagName("p");
const html = para[0].innerHTML;
const texte = para[0].textContent;
alert("innerHTML : " + html + "\ntextContent : " + texte);
para[0].innerHTML = "Cours de <em>JavaScript</em>";
para[1].textContent = "Cours de <em>JavaScript</em>";
</script>
</body>
…

11/05/2025 Prof. Hafida ZROURI 36


Le Modèle Objet du Navigateur (BOM)
Exemple 3 :
…
<body>
<h2>Fruits</h2>
<ul>
<li>Pomme</li>
<li>Banane</li>
<li>Orange</li>
</ul>
<script>
let items = document.querySelectorAll("ul li");
for (let i = 0; i < items.length; i++) {
let fruit = items[i].textContent;
items[i].insertAdjacentHTML("beforeend", " <i>(Fruit " + (i + 1) + " : " + fruit + ")</i>");
}
</script>
</body>
…

11/05/2025 Prof. Hafida ZROURI 37


Les évènements
■ Introduction :
Les événements constituent l’un des aspects essentiels de JavaScript dans le développement web.
Ils permettent de rendre une page interactive, contrairement au HTML seul, qui reste statique
(excepté les liens hypertextes).
Grâce aux événements, JavaScript peut réagir à des actions de l’utilisateur (clics, survols, saisies,
chargements, etc.).
■ Concepts clés :
Pour gérer un événement, deux composants sont nécessaires :
– L’événement : correspond à une action effectuée par l’utilisateur (clic, saisie, survol, etc.) ou
générée par le navigateur (chargement, erreur, etc.).
– Le gestionnaire d’événement : est une fonction appelée automatiquement en réponse à l’événement.
■ Syntaxe des gestionnaires d’événements :
1. Ancienne méthode (HTML) : utilisation des attributs HTML pour lier un événement à une fonction
JavaScript. (Cette méthode est déconseillée dans les projets modernes)
<balise onEvènement = "maFonction();">
2. Méthode moderne (recommandée) : utilisation de la méthode JavaScript addEventListener() pour
une gestion plus flexible et dynamique des événements. Elle permet également d’ajouter plusieurs
fonctions pour un même événement.
élément.addEventListener("évènement", maFonction);
11/05/2025 Prof. Hafida ZROURI 38
Les évènements
■ Quelques événements courants :
– click : déclenché lors d’un clic sur un élément HTML.
Exemple : <button onclick="alert('Clic détecté !')">Cliquez-moi</button>
– focus :se produit lorsqu’un élément de formulaire reçoit le focus.
Exemple : <input type="text" onFocus="this.style.backgroundColor='red'">
– blur : déclenché lorsqu’un élément de formulaire perd le focus.
Exemple : <input type="text" onBlur="this.size=20" onFocus="this.size=50">
– change : déclenché lorsque la valeur d’un élément de formulaire change (et que
le focus est perdu).
Exemple : <input type="text" onChange="alert('La valeur a été modifiée !');" >
– select : déclenché lorsque l’utilisateur sélectionne du texte dans un élément de
formulaire.
Exemple : <textarea onSelect="alert('Vous avez sélectionné un texte !');">Texte
exemple</textarea>

11/05/2025 Prof. Hafida ZROURI 39


Les évènements
– submit : déclenché lors de la soumission d’un formulaire.
Exemple : <form onsubmit="alert('Envoyé !'); return false"> <input type="text"
placeholder="Votre nom"> <input type="submit" value="Envoyer"> </form>
– reset : se produit lors de la réinitialisation d’un formulaire.
Exemple : <form onreset="alert('Formulaire réinitialisé !');"> <input type="text"
name="nom"> <input type="reset" value="Réinitialiser"> </form>
– load : se produit quand la page ou une ressource est complètement chargée.
Exemple : <body onload="alert('La page a bien été chargée !');">
– error : déclenché lorsqu’une erreur apparaît durant le chargement d’une ressource.
Exemple : <img src="inexistante.jpg"
onerror="this.src='image_de_remplacement.jpg'">
– mouseover : déclenché lorsque la souris entre dans la zone d’un élément.
Exemple : <p onmouseover="this.style.color='blue'">Survolez ce texte</p>
– mouseout : déclenché lorsque la souris quitte la zone d’un élément.
Exemple : <div onmouseover="this.textContent='Souris entrante'"
onmouseout="this.textContent='Souris sortante'">Passez la souris</div>

11/05/2025 Prof. Hafida ZROURI 40


Les évènements
■ Exemple 1 : L’objet elements permet d'accéder à tous les éléments
<!DOCTYPE html> d'un formulaire en utilisant le nom de chaque élément.
<html>
<head>
<meta charset="UTF-8">
<title>Web</title>
<script defer>
let vote = "";
function enregistrer(x) { vote = x; }
function depouiller() { document.forms["election"].elements["resultat"].value = vote; }
</script></head>
<body>
<form name="election">
Vous êtes pour l'informatique ?
<input type="radio" name="vote" value="oui" onclick="enregistrer('oui')"> oui
<input type="radio" name="vote" value="non" onclick="enregistrer('non')"> non
<input type="radio" name="vote" value="abs" onclick="enregistrer('abstention')"> abstention
<input type="button" value="Résultat" onclick="depouiller()">
<input type="text" name="resultat" size="10" readonly>
</form>
</body>
</html>
11/05/2025 Prof. Hafida ZROURI 41
Les évènements
■ Exemple 2 : L’objet elements permet d'accéder à tous les éléments
… d'un formulaire en utilisant le nom de chaque élément.
<body>
<form name="lire">
Entrez un nombre : <input type="text" name="nbre" size="3">
<input type="button" value="go" id="boutonGo">
Voici son double : <input type="text" name="aff" size="8" readonly>
</form>
<script>
function calculerDouble() {
const formulaire = document.forms["lire"];
const nombre = formulaire.elements["nbre"].value;
const double = Number(nombre) * 2;
formulaire.elements["aff"].value = double;
}
const bouton = document.getElementById("boutonGo");
bouton.addEventListener("click", calculerDouble);
</script>
</body>
…
11/05/2025 Prof. Hafida ZROURI 42
Objets prédéfinis : Image
Il y a plusieurs façons pour accéder à une image d’un document :
- par son nom, si elle a été définie dans la balise <img> par l’attribut name.
document.images["portrait"] pour accéder à l’image dont le nom est name="portrait".
- par son index : Chaque image qui a été notée avec la balise <img> dans le fichier html
est stockée dans un tableau document.images.
document.images[0] pour accéder à la première image du document.
On pourra accéder aux propriétés de l’image : border, height, width, src, hspace et vspace.
Exemple :
Dans le <HEAD> de la page HTML :
<script type="text/javascript">
function changer() {
document.images[0].width = 150;
document.images[0].height = 90; }
</script>
Dans le <BODY> de la page HTML :
<img src="world.jpg" width="70" height="70"><br>
<input type="button" value="Changer" onclick="changer()">
11/05/2025 Prof. Hafida ZROURI 43
Objets prédéfinis : Image
Pour des images qui ne sont pas définies dans le code html et qu’on veut afficher en
supplément avec JavaScript, on doit créer un nouvel objet Image(). C’est particulièrement
important quand on veut remplacer de façon dynamique des images par d’autres images.
let graph=new Image(); // ou let graph=new Image(width, height);
graph.src="monImage.gif"; // L’image est maintenant chargée dans le cache du navigateur.
Exemple :
Dans le <HEAD> de la page HTML :
<script type="text/javascript">
let graph = new Image(80, 80);
graph.src = "einstein.jpg";
function changer() { document.images[0].src = graph.src; }
</script>
Dans le <BODY> de la page HTML :
<img src="world.jpg" width="70" height="70" ><br>
<input type="button" value="Changer" onclick="changer()">

11/05/2025 Prof. Hafida ZROURI 44


Objets prédéfinis : Date
■ JavaScript permet d’évaluer les dates et heures locales (de la machine du client).
■ new Date() renvoie toutes les informations « date et heure » de l’ordinateur de
l’utilisateur. Il existe une multitude de méthodes qui permettent de mieux extraire les
informations du temps local pour les afficher selon nos choix.
■ Soit la variable t = new Date();
● t.getFullYear() : retourne l'année courante sur 4 chiffres.
● t.getMonth(): retourne un entier désignant le mois compris entre 0 et 11(0 désigne janvier).
● t.getDate() : retourne la date du jour comprise entre 1 et 31.
● t.getDay() : retourne un entier désignant le jour compris entre 0 et 6 (0 désigne dimanche).
● t.getHours() : retourne un entier compris entre 0 et 23 désignant l’heure locale.
● t.getMinutes() : retourne un entier compris entre 0 et 59 désignant les minutes.
● t.getSeconds() : retourne un entier compris entre 0 et 59 désignant les secondes.
Ex : date = new Date();
alert('Nous sommes le '+date.getDate()+ '- '+date.getMonth()+1+ '-'+date.getFullYear());

11/05/2025 Prof. Hafida ZROURI 45


Equivalences JavaScript et
propriétés CSS
Il est possible de modifier dynamiquement toutes les propriétés de style d'un élément ou d'une
page en utilisant JavaScript.
Syntaxe : document.getElementById("id").style.propriétéCSS = "valeur";
Remarque : La propriété style ne représente que les déclarations CSS appliquées à l'élément via
l'attribut HTML style et pas celles provenant d'autres sources.
Pour récupérer ou définir la valeur de l'attribut class de l'élément :
document.getElementById("id").className = "nomClasse";
nomClasse est une chaîne de caractères représentant la classe (ou les classes séparées par des
espaces) de l'élément courant.
Règle générale :
On peut changer de cette façon (voir l’exemple ci-dessous) n’importe quelle propriété CSS,
d’un élément. Le nom de la propriété en JavaScript est identique au nom CSS, sauf que les
traits d’unions sont remplacés par une majuscule sur la lettre suivante. Les valeurs des
propriétés en JavaScript sont identiques aux valeurs CSS mais doivent être mis entre
guillemets. [Exception : float (en css) ---> cssFloat (en JavaScript)]
Ex : font-family (en css) ---> fontFamily (en JavaScript)
font-size (en css) ---> fontSize (en JavaScript)
11/05/2025 Prof. Hafida ZROURI 46
Equivalences JavaScript et
propriétés CSS
Exemple 1 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<p id="para" style="color: red;">Cours de JavaScript</p>
<input type="button" value="Plus grand" id="grand">
<input type="button" value="Plus petit" id="petit">
<script>
const p = document.getElementById("para");
document.getElementById("grand").addEventListener("click", () => { p.style.fontSize = "26pt"; });
document.getElementById("petit").addEventListener("click", () => { p.style.fontSize = "10pt"; });
</script>
</body>
</html>

11/05/2025 Prof. Hafida ZROURI 47


Equivalences JavaScript et
propriétés CSS
Exemple 2 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> JavaScript </title>
</head>
<body>
<p id="id1">HTML et CSS</p>
<p id="id2">JavaScript</p>
<script>
const p1 = document.getElementById("id1");
const p2 = document.getElementById("id2");
p1.addEventListener("click", function() { this.style.fontWeight = "bold"; });
p2.addEventListener("click", function() { this.style.borderTop = "solid 3px red"; });
</script>
</body>
</html>
11/05/2025 Prof. Hafida ZROURI 48
Equivalences JavaScript et
propriétés CSS
On peut définir plusieurs styles pour un élément dans une seule instruction : la propriété cssText
retourne ou définit le texte de la déclaration de style en ligne de l'élément (càd le style définit via
l'attribut HTML style ).
Syntaxe : document.getElementById("id").style.cssText
Exemple :
<p id="p1" style="color: red;">JavaScript</p>
<script>
let elem = document.getElementById("p1");
alert(elem.style.cssText); // Affiche : "color: red;"
elem.style.cssText += "font-size: 2em";
alert(elem.style.cssText); // Affiche : "color: red; font-size: 2em;"
</script>
Précisions :
- La propriété cssText peut être utilisée pour remplacer ou ajouter des règles de style en ligne à un
élément.
- Attention : En utilisant cssText, on remplace toute déclaration de style existante si on assigne une
nouvelle valeur, donc si on souhaite ajouter des styles sans supprimer les existants, il faut utiliser
+=.
11/05/2025 Prof. Hafida ZROURI 49
Complément

11/05/2025 Prof. Hafida ZROURI 50


Les objets du navigateur
■ L’objet navigator :
– a plusieurs propriétés concernant le navigateur :
● appName :
connaître le nom : Netscape, Microsoft Internet Explorer
● appVersion :
connaître la version
● language :
FR, AN
● platform :
windows, Linux…
– Utilisation : navigator.nomPropriété
– Exemple :
<script>
document.write(navigator.appName);
</script>

11/05/2025 Prof. Hafida ZROURI 51


Les objets du navigateur
■ L’objet history :
– Propriété :
● length : permet de connaître le nombre d'objets dans l'historique.
– Méthodes :
● back() : permet d'aller à l'URL précédent dans l'historique.
Ex : <a href="javascript:history.back()"> Retour </a>
● forward() : permet d'aller à l'URL suivant dans l'historique.
Ex : <a href="javascript:history.forward()"> Suivant </a>
● go(n) : permet d'aller à la nieme page précédente si "n" est négatif ou suivante
si "n" est positif.
Ex : <a href="javascript:history.go(-1)"> Retour </a>
<a href="javascript:history.go(1)"> Suite </a>

11/05/2025 Prof. Hafida ZROURI 52


Les objets du navigateur
■ L’objet location :
– Contient les informations sur l'url en cours de visualisation.
– Propriétés :
● href : totalité de l'URL
● protocol : nom du protocole (http:)
● host : nom du serveur
● port : numéro de port
● pathname : répertoire et nom de fichier de la page html
● hash : partie ancre de l'URL (après #)
● search : partie requête (après '?')
Exemple : Prenons l’url suivant :
http://www.xyul.fr:80/monDossier/monFichier.php#content?name=value
Elle se décompose ainsi :
[http:]//[www.xyul.fr]:[80][/monDossier/monFichier.php]#[content]?[name=value]
Ce qui, traduit en attributs de l'objet location correspond à :
[protocol][host][port][pathname][hash][search]

11/05/2025 Prof. Hafida ZROURI 53


Les objets du navigateur
– Méthodes :
● replace(url) : pour charger le document situé à l'adresse url
● reload() : pour recharger le document

Exemple :
<INPUT type="button" value="Recharger"
onClick="window.location.reload()">
<INPUT type="button" value="Remplacer"
onClick="window.location.replace('../fichier.html')">

11/05/2025 Prof. Hafida ZROURI 54


Objets prédéfinis : screen
L'objet screen renvoie des informations relatives à l’écran de l’utilisateur. Cet objet possède
les propriétés suivantes :
● availHeight : spécifie en pixels la hauteur de l’écran disponible moins la barre de tâches.
● availWidth : spécifie en pixels la largeur de l’écran disponible moins la barre de tâches.
● height : indique en pixels la hauteur totale de l’écran.
● width : indique en pixels la largeur totale de l’écran.
Exemple :
…
<script>
document.write("(Largeur x hauteur) totale de l'écran : "
+ screen.width + " x " + screen.height);
document.write("<br>(Largeur x hauteur) disponible de l'écran : "
+ screen.availWidth + " x " + screen.availHeight);
</script>
…

11/05/2025 Prof. Hafida ZROURI 55


Objets prédéfinis : Math
L'objet Math définit des constantes ( PI, LN10, LN2, ...) et les fonctions mathématiques
usuelles :
● random() : nombre aléatoire entre 0 et 1
● abs() : valeur absolue (du paramètre)
● log, exp : logarithme et exponentielle. Trigonométrique (cos, sin, tan, …) : le tout en radian
● sqrt : racine carrée
● min(x, y), max(x, y) : déterminent le plus petit (ou le plus grand) des nombres x et y
● round, floor, ceil : les arrondis, respectivement standard, entier le plus proche le plus petit
et entier le plus proche le plus grand.
● toFixed() : formate un nombre en utilisant la notation à virgule fixe.
Utilisation : Math.sqrt(5) , Math.min(10, y), Math.PI, Math.sin(y), Math.exp(y), …
Exemple : let y = 20.355;
a = Math.ceil(y); // a a comme valeur 21
b = Math.floor(y); // b a comme valeur 20
c = Math.round(y); // c a comme valeur 20
d = y.toFixed(2); // d a comme valeur 20.36

11/05/2025 Prof. Hafida ZROURI 56

Vous aimerez peut-être aussi