Scribd
Importer
15 vues120 pages

Cours JS

Transféré par

Mohamed MB
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
15 vues120 pages

Cours JS

Transféré par

Mohamed MB
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

1

développement web
JavaScript

Pr: AHAJJAM Tarik


[Link]@[Link]
2 Introduction au développement web

 Un site web est constitué de trois langages


principaux :
• HTML (HyperText Markup Language) → structure du
contenu
• CSS (Cascading Style Sheets) → présentation et
mise en forme
• JavaScript → interaction et dynamisme
3
4

•HTML (HyperText Markup Language) constitue la structure de la page web,


comme un squelette.
•CSS (Cascading Style Sheets) donne le style et l’apparence, comme la peau
et les vêtements.
•JavaScript ajoute le comportement et l’interactivité, comme le cerveau et le
système nerveux.
Le HTML : La structure de la page
5  Le HTML décrit le contenu et la structure logique d’une page
web.
 <!DOCTYPE html>
 <html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Mon site web</title>
</head>
<body>
<h1>Bienvenue sur mon site</h1>
<p>Ceci est un paragraphe de texte.</p>
</body>
 </html>
Les balises principales
6
Élément Description Exemple
<h1>Titre
<h1> à <h6> Titres
principal</h1>
<p> Paragraphe <p>Texte ici</p>
<a
<a> Lien hypertexte href="[Link]
.com">Visiter</a>
<img src="[Link]"
<img> Image
alt="Description">
<ul><li>Élément</li><
<ul> / <ol> Listes
/ul>
<div> Conteneur général <div>Zone</div>
<span> Conteneur en ligne <span>Mot</span>
<header>, <nav>, Structure logique de
Balises sémantiques
<main>, <footer> la page
Le CSS — La mise en forme
7

 Le CSS contrôle le style et la présentation du contenu


HTML.
Trois manières d’ajouter du CSS
[Link] (dans le head)
<style>
body { background-color: #f0f0f0; }
</style>

[Link] (fichier .css séparé)


<link rel="stylesheet" href="[Link]">

[Link] ligne (dans la balise)


<p style="color: red;">Texte rouge</p>
Sélecteurs CSS
8

Type Exemple Cible


Par balise p { color: blue; } Tous les <p>

Par classe .titre { font-size: 20px; } <h1 class="titre">

#principal { color: <div


Par identifiant
green; } id="principal">
<p> à l’intérieur
Par hiérarchie div p { color: gray; }
d’un <div>
Propriétés CSS essentielles
9

Catégorie Propriétés Exemple

color: blue; text-align:


Couleurs et texte color, font-size, text-align
center;

background-color, background-color:
Arrière-plan
background-image lightgray;

Boîte (Box margin, padding, border, margin: 10px; padding:


model) width, height 5px;

Disposition display, flex, grid, position display: flex;

button:hover {
Effets hover, transition, shadow
background: red; }
Exemple complet
10 <!DOCTYPE html>
<html lang="fr"> <main>

<head> <section>

<meta charset="UTF-8"> <h2>Présentation</h2>

<title>Page Démo</title> <p>Voici une simple page en


HTML et CSS.</p>
<link rel="stylesheet" href="[Link]">
</section>
</head>
</main>
<body>
<header>
<footer>
<h1>Bienvenue</h1>
<p>&copy; 2025 -
<nav> MonSiteWeb</p>
<a href="#">Accueil</a> | </footer>
<a href="#">Contact</a> </body>
</nav> </html>
</header>
[Link]
11 body {
font-family: Arial, sans-serif;
section {
margin: 0;
padding: 20px;
background-color: #f7f7f7;
}
}
header {
footer {
background-color: #007BFF;
background-color: #333;
color: white;
color: white;
text-align: center;
text-align: center;
padding: 20px; }
padding: 10px;
nav a {
}
color: white;
text-decoration: none;
margin: 0 10px; }
12
JavaScript
13 JavaScript est un langage de programmation principalement utilisé pour créer des
pages web interactives et dynamiques.
 À quoi sert JavaScript ?
 Dans le navigateur web :
• Animations et effets visuels
• Manipulation du contenu HTML/CSS
• Validation de formulaires
• Interactions utilisateur (clics, survols, etc.)
• Communications avec des serveurs (AJAX)
• Jeux web simples
 En dehors du navigateur :
• Serveurs ([Link])
• Applications mobiles (React Native)
• Applications desktop (Electron)
• Bots et automatisation
14 Qu’est ce qu’un programme ?
 Un programme est une suite d'instructions qui pourra être 'exécutée'
par la machine
 Quelles sont les instructions disponibles
– Faire un calcul arithmétique (par ex. 12 * 5)
– Afficher une chaîne de caractères
– Déplacer la souris
– Lancer un autre programme
– Manipuler des données
– Jouer un son
– etc
Ou trouve-t-on les programmes?
15

 Tout ce que vous utilisez sur machine telle qu’un ordinateur,


une tablette ou un smartphone est un programme
–Les applications
– Les logiciels
– Mais aussi le système qui fait fonctionner votre appareil
(Android, IOS, Windows, Linux…..)
Comment écrit-on un programme ?
16

 Un programmeur écrit un programme dans un langage de


programmation
 Il existe plusieurs langages de programmation et plusieurs
familles de langage de programmation
– Langages Orientée Objets :
● Ex : Java, Python
– Langage Impératif :
● Ex : C
– Langage Fonctionnelle :
● Ex : CAML, OCAML,
Comment la machine
17 comprend tous les langages ?
 Le langage de programmation est un langage 'compréhensible' par
les humains
 Les instructions sont un mélange d'anglais et d'opérations
mathématiques, plus certaines instructions spécifiques à chacun des
langages
 Le programme écrit par le programmeur est contenu dans un fichier,
on parle de code source
 Le code source est ensuite soit traduit vers un langage
compréhensible par la machine (langage binaire), on parle de
compilation, soit il est interprété par un interpréteur qui exécute ces
instructions (langage interprété)
 Pour pouvoir exécuter un programme, il faut donc soit avoir le
compilateur (C,Java) ou l'interpréteur (Python, JavaScript)
 Remarques : L'interpréteur et le compilateur sont eux-mêmes des
programmes
Schéma d'exécution d'un
18 code source avec compilation
Schéma d'exécution d'un
19 code interprété
20
Quid ?
21

Langage de programmation lié à HTML.


Code JavaScript intégré aux pages HTML.
Code interprété par le navigateur client
(interprétation dépendante du type et de la version
de navigateur).
 code PHP (compilé du coté serveur).
Java Script est un langage
• événementiel (association d’actions aux
événements déclenchés par l’utilisateur (passage de
souris, clic, saisie clavier, etc...).
Distinction Client VS Serveur
22
L'architecture client-serveur est un modèle où deux parties
interagissent :

❖ Le client est un logiciel (navigateur web, application mail ...) qui


envoie des requêtes au serveur pour obtenir des services ou des
données.

❖ Le serveur est un logiciel (serveur web, service cloud ...) qui


répond aux requêtes du client en fournissant les données ou
services demandées.
Fonctionnement Client VS Serveur
Exécution
Envoi dude
Localisation
Requête HTTP code
Connexion
de du
Localisation
Fermeture
Rendudu graphique
la
résultat sur (hello
le
la connexion
ressource
client
au du
des serveur
code dans (port
données
client 80)
le fichier
= réponse HTTP Client
Navigateur
GET /[Link] HTTP/1.0
Réseau •HTML
•JavaScript
Protocole HTTP •CSS

Exécution d’un programme sur le serveur


<html>
<head>
Serveur
<title>Hello</title> <html>
</head>
Serveur Web world</body> .html
<head> [Link]
<body>Hello <title>Hello</title>
</html> .php/java
</head>
.jpg
<body>Hello world</body>
Module Web </html>

MySQL
[Link] 23
Introduction (1)
24
 Javascript permet de rendre dynamique un site internet
développé en HTML.

 Javascript permet de développer de véritables


applications fonctionnant exclusivement dans le cadre
d'Internet.

 Le Javascript est un langage de script simplifié orienté


objet dont la syntaxe est basée sur celle du Java.

 Javascript a été initialement élaboré par Netscape en


association avec Sun Microsystem.
 Plus tard, Microsoft développera son propre langage Javascript officiellement
connu sous le nom de JScript.
Introduction (2)
25

Contrairement à un applet Java qui est un


programme compilé, les scripts écrits en
Javascript sont interprétés
Le Java, représenté par un ou plusieurs fichiers
autonomes dont l'extension sera *.class ou *.jar, est
invoqué par une balise HTML spécifique

Le JavaScript est écrit directement au sein du


document HTML sous forme d'un script encadré par
des balises HTML spéciales.
HTML et JavaScript
26
 la page HTML devra TOUJOURS contenir les deux
balises spécifiques et indispensables
<script language="JavaScript">
............
</script>
 Le code JavaScript s’intègre de deux manière avec le
code HTML
 1. Insertion directe dans le code HTML
Le code JavaScript s'insère le plus souvent dans la page HTML elle
même.
 C'est la méthode la plus simple et la plus fréquemment utilisée par les
développeurs de sites Internet.

 2. Insertion comme un module externe


1. Insertion dans une page HTML
27

 Il existe 2 manières d'insérer du code JavaScript dans une


page HTML

 1.1 Insertion pour exécution directe


Le code s'exécute automatiquement <html>
lors du chargement de la page HTML <head>
dans le navigateur en même temps que
<title>..... </title>
le contenu de la page HTML </head>
s'affiche à l'écran. <body>
<script
language="JavaScript">
Le code JavaScript est placé alert(‘bonjour’);
dans le corps même de la page HTML, </script>
entre les balises <body> .......... Et </body>
......... </body> </html>
2. Insertion par appel de module externe
28
 On peut insérer du code JavaScript en faisant appel à un module
externe se trouvant à n’importe quelle adresse (URI).

<script src="URL du module externe">


............
</script>

 Les deux balises de Javascript doivent être placés entre les Tags <body> et
</body> dans le cas d'une exécution directe ou entre les Tags <head> et
</head> de la page HTML pour une exécution différée.

 Stocké dans un fichier sur le serveur à son adresse d'appel sous forme de
TEXTE SIMPLE portant l'extension .txt ou .js

 Simplifie la maintenance des sites faisant appel à des modules JavaScript


communs à plusieurs pages HTML.
Entrée et sortie de données avec JavaScript
29
 3 types de boites de messages peuvent être affichés en
utilisant Javascript : Alerte, Confirmation et Invite
 Méthode alert() alert('Attention!!.');
 sert à afficher à l’utilisateur des informations simples de type texte. Une
fois que ce dernier a lu le message, il doit cliquer sur OK pour faire
disparaître la boîte
 Méthode confirm() confirm('voulez vous continuer ?');
 permet à l’utilisateur de choisir entre les boutons OK et Annuler.
 Méthode prompt()
 La méthode prompt() permet à l’utilisateur de taper son propre message
en réponse à la question posée
prompt("vous-avez compris javascript ?"
,"oui" );
 La méthode [Link] permet d ’écrire du code HTML
dans la page WEB
Entrée et sortie de données avec JavaScript
30

<html>
<head>
<title> une page simple </title>
</head>
<body>
Bonjour
<script language='javascript'>
alert('bonjour');
[Link] (
prompt('quel est votre nom ?','Indiquer votre nom ici')
);
confirm('quel bouton allez-vous choisir ?');
</script>
</body>
</html>
La structure d’un script en JavaScript
31

 La syntaxe du langage Javascript s'appuie sur le modèle


de Java et C
 Règles générales
 Chaque commande doit être terminée par un point-virgule (;).
 Un nombre à virgule est séparé par un point (.) et non par une
virgule
 Le langage Javascript y est sensible à la casse
 Il existe deux méthodes permettant d'intégrer des
commentaires à vos scripts.
 Placer un double slash (//) devant le texte
 Encadrer le texte par un slash suivi d'une étoile (/*) et la même séquence inversée (*/)
32 Les variables (1)
 Déclaration et affectation

Le mot-clé var ou let permet de //Déclaration de i, de j et de k.


déclarer une ou plusieurs var i, j, k;
variables.
//Affectation de i.
i = 1;
 Après la déclaration de la variable, il //Déclaration et affectation de prix.
est possible de lui affecter une var prix = 0;
valeur par l'intermédiaire du signe
d'égalité (=).

Si une valeur est affectée à une


variable sans que cette dernière
ne soit déclarée, alors Javascript
la déclare automatiquement.
La différence entre let et var
33
Caractéristique var let
Portée Fonction Bloc {}

Oui (valeur = Oui, mais non accessible avant


Hoisting
undefined) déclaration

Redéclaration Possible ❌ Interdite dans le même bloc

Bonne pratique ❌ À éviter ✅ Recommandée

•var est ancienne (ES5 et avant).


•Elle a une portée de fonction (et non de bloc).
•Elle est hébergée (hoisted), c’est-à-dire que la
déclaration est “remontée” en haut du code.
alert(a); // ✅ undefined (pas d’erreur)
var a = 10;
Les variables (2)
34

 Déclaration et affectation

 La lecture d'une variable non déclarée provoque une


erreur

 La portée
 les variables peuvent être globales ou locales.

 Une variable globale est déclarée en début de script et est


accessible à n'importe quel endroit du programme.

 Une variable locale est déclarée à l'intérieur d'une fonction


et n'est utilisable que dans la fonction elle-même.
Les variables (3)
35

 Contraintes concernant les noms de variables


 Les noms de variables ne peuvent contenir que des lettres, chiffres, ou
le caractère "_" (underscore)
 Mon_Prenom est un nom valide

 Les caractères spéciaux et accentués sont interdits (é, à, ç, ï, etc..)


 Mon_Prénom n'est pas un nom valide. Il y a un caractère accentué.

 Les majuscules et les minuscules ont leur importance.


 MonPrenom est différent de Monprenom.

 Un nom de variable ne peut contenir d'espaces.


 Mon Prenom n'est pas un nom de variable correct. Il y a un espace.

 Les mots réservés JavaScript ne peuvent être utilisés comme noms de


variable.
Les variables (4)
36

 Le type d’une variable dépend de la valeur stockée dans cette variable. Pas de déclaration de
type.

 Exemple
var maVariable = ‘ Philippe ’;
maVariable =10;

 trois principaux types de valeurs

 String

 Number : 10^-308 >nombre < 10^308

 Les nombres entiers

 les nombres décimaux en virgule flottant

 Boolean : deux valeurs littérales : true (vrai) et false (faux).


37

Les opérateurs en JavaScript sont les même qu’en langage C:

( + - * / % < > <= >= == != ++ -- += -= *= /= ( ) && || )


Création de structures de contrôle
38

On appelle structure de contrôle ou structure conditionnelle,


les instructions qui permettent de tester si une condition est vraie
ou non, ce qui permet de donner de l'interactivité à vos scripts :
par exemple, en exécutant une série d’instructions propre à
une condition donnée.
L’instruction : « if »
 L'instruction if est la structure de test la plus basique, on la retrouve
39 dans tous les langages (avec une syntaxe différente...). Elle permet
d'exécuter une série d'instruction si jamais la condition IF est
réalisée.
 La syntaxe de cette expression est la suivante:
if (condition réalisée est vraie)
{
// liste d'instructions ;
}
Remarques:
 la condition doit être entre des parenthèses ;
 il est possible de définir plusieurs conditions à remplir avec les
opérateurs (&&, ||, ! …),
 par exemple:
if ((condition1)&&(condition2)) teste si les deux conditions sont
vraies ;
if ((condition1)||(condition2)) exécutera les instructions si l'une ou
l'autre des deux conditions est vraie ;
 s'il n'y a qu'une instruction, les accolades ne sont pas nécessaires.
Exemples :
40 1. if ( (x==1) && (y==3) )
{
somme= x+y ;
difference= x-y ;
}
2. if ( (x==1) && (y==3) ) somme= x+y;

3. if ( somme==0 )
{
somme= x+y ;
}
else
{
total += somme ;
}
L’instruction : « if … else … »
41

 La syntaxe complète de cette expression est la


suivante:

if (condition_vraie)
{
// série d'instructions ;
}
else
{
// autre série d'instructions ;
}
Les structures itératives
42
(Répétitives ou Boucles )
L’instruction de la boucle : « for »
43
 L'instruction for permet d'exécuter plusieurs fois la même série
d'instructions: c'est une boucle !
 Dans sa syntaxe, il suffit de préciser :
 le nom de la variable qui sert de compteur (et éventuellement sa
valeur de départ,
 la condition sur la variable pour laquelle la boucle s'arrête
(basiquement une condition qui teste si la valeur du compteur
dépasse une limite)
et enfin
 une instruction qui incrémente (ou décrémente) le compteur.
 La syntaxe de cette expression est la suivante:
for (compteur; condition; modification du compteur)
{
// liste d'instructions ;
}
44 Remarques :
 il faudra toujours vérifier que la boucle a bien une condition
de sortie (i.e le compteur s'incrémente correctement)

 une instruction Alert(i); dans votre boucle est un bon moyen


pour vérifier la valeur du compteur pas à pas!

 il faut bien compter le nombre de fois que l'on veut faire


exécuter la boucle :

o for(i=0;i<10;i++) exécute 10 fois la boucle (i de 0 à 9)

o for(i=0;i<=10;i++) exécute 11 fois la boucle (i de 0 à 10)

o for(i=10;i>0;i--) exécute 10 fois la boucle (i de 10 à 1)


Exemples :
45
1. for (i=1; i<6; i++)
{
alert(i) ;
}

Cette boucle affiche 5 fois la valeur de i, c'est-à-dire


1,2,3,4,5
Elle commence à i=1, vérifie que i est bien inférieur à 6,
etc... jusqu'à atteindre la valeur i=6, pour laquelle la
condition ne sera plus réalisée, la boucle s'interrompra
et le programme continuera son cours.
2. var x;
for (x=1; x<= 10; x+=2)
{
alert(x) ; }
L’instruction d’itération : « while »
46

 L'instruction while représente un autre moyen d'exécuter plusieurs


fois la même série d'instructions.
 La syntaxe de cette expression est la suivante:

while (condition réalisée)


{
// liste d'instructions ;
}
 Cette instruction exécute la liste d'instructions tant que la condition
est réalisée (while est un mot anglais qui signifie tant que).
Remarques:
 La condition de sortie pouvant être n'importe quelle structure
conditionnelle, les risques de boucle infinie (boucle dont la
condition est toujours vraie) sont grands, c'est-à-dire qu'elle risque
de provoquer un plantage du navigateur!
Exemples :
47 1.
var x=1 , a=1 ;
while (x<=10)
{
if (x == 7)
{
alert('division par 0');
x++;
}
a = 1/(x-7);
alert(a);
x++ ;
}
2.
For (x=1; x<=10; x++)
{
if (x==7) x++;
a= 1/(x-7);
}
L’instruction : « switch »
48  L'instruction switch représente un autre moyen d'exécuter des instructions
spécifiques aux valeurs que peut prendre une variable.
 La syntaxe de cette expression est la suivante:
switch (n)
{
case 1:
// liste d'instructions pour n==1;
break;
case 2:
// liste d'instructions pour n==2;
break;
…
default:
// liste d'instructions pour échec sur n;
break;
}
Comment définir un tableau ?
49
L'objet Array (ou tableaux) est une liste d'éléments indexés dans
lesquels on pourra ranger (écrire) des données ou aller reprendre
ces données (lire).
Exemple :
var MonTableau1 = new Array();
var MonTableau2 = new Array(15);
var MonTableau3 = new Array(1,"Salut",3.14);
<script language="JavaScript">
var T = new Array(3);
var S ="";
for (var i = 0; i < [Link]; i++){
T[i] = i;
}
T[5] = "Pourtant";
for (var i = 0; i < [Link]; i++){
S += "En " + i + " on trouve " + T[i] + "\n";
}
alert(S);
</script>
L’objet Array
50

Il existe cependant une autre manière pour initier un tableau. C’est


l’initialisation directe:

Tab=[‘’Lundi’’,’’Mardi’’,’’Mercredi’’];

Dans ce cas on a pas besoin de déclarer l’objet Array comme on n’a


pas besoin de déterminer le nombre d’éléments indexés.
51 Méthode sur l’objet array()
Méthode Description Exemple
push() Ajoute à la fin [Link]("X")
pop() Supprime le dernier [Link]()
shift() Supprime le premier [Link]()
unshift() Ajoute au début [Link]("X")

splice(i, n) Supprime n éléments à partir de i [Link](2, 1)

slice(a, b) Copie du tableau de a à b [Link](1, 3)


indexOf(x) Trouve l’index de x [Link]("Kiwi")
includes(x) Vérifie si x existe [Link]("Kiwi")
join(", ") Convertit en chaîne [Link](", ")

reverse() inverse l’ordre des éléments [Link]()


L’objet Array
52

 Exemples

• Tab=[‘’Lundi’’,’’Mardi’’,’’Mercredi’’,’’Jeudi’’];

• [Link]([Link]);
• // écrit 4
• [Link]([Link](‘’-’’));
• // écrit Lundi-Marci-Mercredi-Jeudi
• [Link]([Link]().join(‘’-’’));
• // écrit Jeudi-Mercredi-Mardi-Lundi
• [Link]([Link]().join(‘’-’’));
 // écrit Jeudi-Lundi-Mardi-Mercredi
Les opérations sur les chaînes
53
 La concaténation : Var chaine = ‘’ bonjour ’’ + ‘’EMSI ‘’;
 Déterminer la longueur d’une chaîne
Var ch1 =‘’ bonjour ‘’ ;
Var longueur = [Link];
 Identifier le nième caractère d’une chaîne
Var ch1 = ‘’ bonjour ! ‘’;
Var carac = [Link](2);
 Extraction d’une partie de la chaîne
Var dateDuJour = ‘’25/02/13‘’
Var mois = [Link](3, 5);
 3: est l’indice du premier caractère de la sou-chaîne à
extraire
 5 : indice du dernier caractère à prendre en considération ;
ce caractère ne fera pas partie de la sous-chaîne à extraire
Exercice : les Tableaux
54
Objectif : Manipuler un tableau de langages et effectuer diverses
opérations.
1. Créez un tableau nommé langages contenant au moins cinq
langages de programmation.
2. Affichez chaque langage dans la page en utilisant son index.
3. Modifiez le premier langage du tableau.
4. Ajoutez un nouveau langage à la fin du tableau.
5. Supprimez le dernier langage du tableau.
6. Affichez le contenu du tableau après la suppression.
7. Affichez le nombre total de langages restants.
8. Essayez d’accéder à un index inexistant et affichez le résultat.
9. Affichez le tableau sur la page avec un style visuel.
Les fonctions en
JavaScript
55
56 Définition

 Une fonction est un bloc de code


réutilisable qui effectue une tâche
spécifique. Elle permet d'organiser son code
et d'éviter la répétition.
Fonctions
57
 Emplacement de la déclaration
 Dans l'entête de la page
 Dans le corps de la page.
 Utilisation de la syntaxe : function nom_fonction([param1, …])

 Corps de la fonction
 Délimité par { … }
 Contenu :
déclaration des variables locales, propres à la fonction,
instructions réalisés par la fonctions,
instruction return pour renvoyer une valeur ou un objet
(cette instruction n’est pas obligatoire  fonction qui ne
renvoie pas de valeur)
Fonctions
58

 Appel de fonction
 Peut avoir lieu à n'importe quel endroit de la page :
dans d'autres fonctions,
dans le corps de la page.
Dans l’en-tête
 Utilisation de : nom_fonction([param1, … ]);
Fonctions

<HTML>
<HEAD>
<SCRIPT language="JavaScript " >
function bonjour(nom) {
[Link]("Bonjour ", nom);}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript " > bonjour("M. AHAJJAM");</SCRIPT>
</BODY>
</HTML>

59
Fonctions
Exemple
60 <HTML>
<HEAD>
<SCRIPT language="JavaScript " >
function volumeSphere(rayon)
{ return 4/3*[Link]*[Link](rayon,3); }

function calculerPrix(PrixUnitaire, NbArticles)


{ return PrixUnitaire* NbArticles; }
</SCRIPT>
</HEAD>
<BODY> <SCRIPT language="JavaScript " >// appels des
fonctions
[Link]("Tu dois payer ",
calculerPrix(150,4)," dh.<BR>");
[Link]("Le volume d’une sphère de rayon 1
est ", volumeSphere(1),"<BR>" );
</SCRIPT>
</BODY>
</HTML>
 // 1. Déclarer et initialiser une variable de votre choix par
prompt()
 let nom = prompt("entrer un nom");
61
 let solde = prompt("entrer le solde");
 // 2. Log simple
 [Link]("Démarrage du programme.");
 // 3. Info
 [Link]("Version 1.0.1.");
 // 4. Avertissement (Condition)
 // Utiliser une condition if pour signaler que le solde est faible
s'il est inférieur à 1500.
 if (solde < 1500) {
 [Link](`Attention, le solde de ${nom} est faible :
${solde}DH`);}
 // 5. Erreur
 // Simuler une erreur critique avec [Link]()
 if (typeof solde != 'number')
 [Link]("Erreur critique: TYPE number");
 let produits = [
 { id: 101, nom: "Ordinateur", prix: 899.99, disponible: true },
62  { id: 102, nom: "Clavier", prix: 75.00, disponible: false },
 { id: 103, nom: "Souris", prix: 25.50, disponible: true }];
 // 1. Afficher tout le tableau
 [Link]("--- Affichage complet du tableau 'produits'
([Link]) ---");
 [Link](produits);
 // 2. Afficher seulement nom et prix
 // Spécifier les colonnes ['nom', 'prix'] en deuxième argument
 [Link]("--- Affichage sélectif (nom et prix) ---");
 [Link](produits, ["nom", "prix"]);
 // 3. Inspecter l'objet document
 // [Link]() donne une vue interactive et détaillée des
propriétés de l'objet global 'document'
 [Link]("--- Inspection détaillée de l'objet 'document'
([Link]) ---");
 [Link](produits);
 // 1. Chronométrage
 [Link]("BoucleRapide");
for (let i = 0; i < 10000; i++) {}
63
 [Link]("BoucleRapide");
// 2. Comptage
 function verifierUtilisateur(role) {
 [Link]("AppelFonction");
 [Link]("Rôle: " + role);}
 verifierUtilisateur("Admin");
 verifierUtilisateur("Visiteur");
 verifierUtilisateur("Admin");
 verifierUtilisateur("Visiteur");
 verifierUtilisateur("Visiteur");
 // 3. Groupement
 [Link]("Rapport d'Exécution");
 [Link]("Démarrage du programme.");
 [Link]("Version 1.0.1 - Module Utilisateur chargé.");
 if (solde < 1500) {
 [Link](`Attention, le solde de ${nom} est faible : ${solde}€`);}
 [Link]();
64
65
66
Introduction au DOM
67  Le DOM (Document Object Model) est une
interface de programmation fournie par les
navigateurs pour représenter et interagir avec le
contenu d'une page web.
 Il transforme votre code HTML statique en un
arbre d'objets JavaScript manipulables.
68 Pourquoi l'utiliser ?

 Sans le DOM, JavaScript ne pourrait pas


modifier le contenu d'une page en temps
réel (ex. : ajouter un élément, changer un
style, répondre à un clic).
Principes du DOM en JavaScript
69
 On accède au DOM via l’objet global document en
JavaScript.

 Le DOM permet de parcourir, sélectionner, modifier,


ajouter ou supprimer des éléments dans la page
web.

 Les éléments du DOM ont :


 des propriétés (ex : nodeName, nodeValue,
parentNode, childNodes)
 des méthodes (ex : getElementsByTagName,
appendChild, removeChild) pour les
manipuler.
Structure du DOM
70  Racine : L'objet document (représentant toute la page).
 Nœuds : Éléments HTML (<div>, <p>), attributs (id, class),
textes, commentaires.
 Exemple simple : Pour un HTML comme
 <html><body>
<p id="monPr">Bonjour</p>
</body></html>,
le DOM ressemble à :
 document
└── html
└── body
└── p (id="monPr")
└── #text (contenu : "Bonjour")
71
Pourquoi accéder au DOM ?
72

 Pour faire des opérations usuelles :


 Récupérer la référence d'un élément (et modifier
son contenu.)
 Récupérer la référence d'un ensemble d'éléments
 Modifier les attributs d'un élément
 Modifier les styles d'un élément
 Ajouter/supprimer des classes CSS à un élément
 Ajouter un ou plusieurs éléments au DOM
 …....
Accéder aux éléments dans un document
avec JavaScript et modifier leur contenu

73
1. Accéder à un élément en fonction de
74 son identité
 La méthode getElementsByTagName() permet de
sélectionner tous les éléments d’un certain type de balise
HTML dans une page.

 Elle retourne une collection vivante (de type HTMLCollection)


d’éléments trouvés.

 Syntaxe:
 [Link]("nom_de_balise");
 [Link]("nom_de_balise");

 nom_de_balise : le nom de la balise HTML (par exemple "p",


"div", "li", "h1", etc.)
75 Exemple
2. Accéder à un élément en fonction de
76 la valeur de son attribut clas

 La méthode getElementsByClassName() permet de


sélectionner tous les éléments HTML ayant une ou plusieurs
classes spécifiques.
 Elle retourne une collection vivante (de type HTMLCollection)
contenant tous les éléments correspondants.

 Syntaxe:
 [Link]("nom_de_classe");
 [Link]("nom_de_classe");
77 Exemple
3. Accéder à un élément en fonction
78
de la valeur de son attribut id

 La méthode getElementById() permet d’accéder directement


à un élément HTML grâce à son identifiant unique (id).
 Un id doit être unique dans toute la page HTML.

 Syntaxe:
 [Link]("nom_id");

 "nom_id" : correspond à la valeur de l’attribut id dans le code


HTML.
 Elle retourne l’élément correspondant s’il existe, sinon null.
Exemple
79
4. Accéder à un élément en
80 fonction de son attribut name
 La méthode getElementsByName() permet de sélectionner
tous les éléments HTML qui possèdent un attribut name
donné.
 Elle retourne une NodeList (semblable à un tableau)
contenant tous les éléments correspondants.

 Contrairement à getElementById(), le nom (name) n’a pas besoin


d’être unique.

 Syntaxe:
 [Link]("nom_du_name");

 "nom_du_name" : correspond à la valeur de l’attribut name


dans le code HTML.
 La recherche se fait sur tout le document
81 Exemple 1
82 Exemple 2
5. Accéder à un élément à partir de son
83 sélecteur CSS associé

 La méthode querySelector() permet de sélectionner


le premier élément du document (ou d’un élément
parent) qui correspond à un sélecteur CSS donné.
 Syntaxe:
 [Link]("sélecteur_css");
 [Link]("sélecteur_css");

 sélecteur_css : n’importe quel sélecteur CSS valide.


 Retourne le premier élément trouvé ou null si aucun
ne correspond.
84 Exemple (sélection par id)
85 Exemple (sélection par class)
86 Exemple (sélection par tagname)
Exemple (sélection par par
87
combinaison de plusieurs critères CSS)
5. Accéder à un élément à partir de son
88 sélecteur CSS associé

 La méthode querySelectorAll() permet de sélectionner tous les


éléments du document (ou d’un élément parent) qui
correspondent à un sélecteur CSS donné.
 Contrairement à querySelector(), elle retourne tous les éléments
correspondants, pas seulement le premier.
 Syntaxe:
 [Link]("sélecteur_css");
 [Link]("sélecteur_css");

 sélecteur_css : n’importe quel sélecteur CSS (classe, id, balise,


attribut, combinaison, etc.)
 Retourne une NodeList (semblable à un tableau, mais pas un
vrai tableau).
Exemple (querySelectorAll())
89
Manipulation du
contenu et des
90
attributs
91 Manipulation du contenu et
des attributs
 La manipulation du contenu et des attributs en
JavaScript s'effectue principalement via les méthodes
et propriétés du Document Object Model (DOM). Elle
permet de rendre les pages web dynamiques et
interactives:
 [Link]
 [Link]
 [Link]
 [Link]()
 [Link]()
 [Link]()
textContent
92

 Récupère ou modifie le texte brut de l’élément (sans


interpréter le HTML).

<p id="para1">Bonjour <b>tout le monde</b>!</p>

<script language="Javascript">
let p = [Link]("para1");

[Link]([Link]); // ➜ Bonjour tout le monde!

[Link] = "Salut les étudiants !";


</script>

Le HTML <b> n’est pas interprété : il est remplacé par du texte simple.
innerText
93

 Récupère ou modifie le texte visible à l’écran (il tient compte


du style CSS, des sauts de ligne, etc.).

<p id="para2" style="display:none;>Ceci est caché</p>

<script language="Javascript">
let p = [Link]("para2");

[Link]([Link]); // ➜ "Ceci est caché"


[Link]([Link]); // ➜ "" (car non visible)
</script>

innerText tient compte du rendu visuel.


innerHTML
94

 Permet de lire ou écrire le contenu HTML complet (balises


incluses).

<div id="zone">
<p>Hello <b>world</b></p>
</div>
<script language="Javascript">
let div = [Link]("zone");
// Afficher le code HTML interne
[Link](div. innerHTML); // ➜ "<p>Hello <b>world</b></p>"
// Modifier le contenu
[Link] = "<h1>Bienvenue <i>à tous</i></h1>";
</script>

innerText tient compte du rendu visuel.


95 Manipuler les attributs

 Chaque élément HTML peut avoir des attributs :


 Src
 Href
 Id
 Class
 Alt
 Value
 etc.
 JavaScript permet de les lire, modifier ou supprimer.
96 setAttribute(nom, valeur)
 Ajoute ou modifie un attribut.

<img id="photo" src="[Link]">

<script>
let img = [Link]("photo");

// Changer la source
[Link]("src", "[Link]");

// Ajouter un attribut title


[Link]("title", "Nouvelle image");
</script>
97 getAttribute(nom)

 Récupère la valeur d’un attribut.

<a id="lien" href="[Link]

<script>
let lien = [Link]("lien");

[Link]([Link]("href")); // ➜ [Link]
</script>
Création et suppression
d’éléments dynamiques
98
99 Création et suppression
d’éléments dynamiques
 Modifier la structure du DOM en ajoutant/supprimant
des éléments.À enseigner :
 [Link]()
 appendChild()
 removeChild()
 [Link]()
 [Link]()
 [Link]()
[Link]()
100

 Définition :
Cette méthode permet de créer un nouvel élément HTML (par
exemple : <p>, <div>, <li>, etc.) en mémoire, sans encore l’ajouter à
la page.
 Syntaxe :
let element = [Link]("nom_de_balise");
 Exemple :
let paragraphe = [Link]("p"); // crée un <p>
[Link] = "Bonjour tout le monde !"; // ajoute du
texte à l'intérieur

À ce stade, l’élément existe dans le code, mais n’est pas encore


affiché dans la page.
appendChild()
101  Définition :

Cette méthode permet d’ajouter un nœud (élément) comme enfant


d’un autre élément du DOM.
 Syntaxe :
[Link](enfant);
 Exemple :
<div id="conteneur"></div>
<script>
let div = [Link]("conteneur");
let paragraphe = [Link]("p");
[Link] = "Ceci est un paragraphe ajouté
dynamiquement.";
[Link](paragraphe);
</script>
removeChild()
102
 Définition :
Cette méthode supprime un élément enfant d’un nœud parent.
 Syntaxe :
[Link](enfant);
 Exemple :
<script>
let div = [Link]("conteneur");
let paragraphe = [Link]("p");
// Supprimer le paragraphe
[Link](paragraphe);
</script>
103 classList et ses méthodes

 Chaque élément du DOM a une propriété .classList


qui permet de gérer facilement les classes CSS:
 [Link]()
 [Link]()
 [Link]()
104 [Link]("nomClasse")

 Ajoute une ou plusieurs classes à l’élément.


Exemple :
let titre = [Link]("h1");
[Link] = "Bienvenue !";
[Link]("grand", "bleu");
[Link](titre);
Résultat :
<h1 class="grand bleu">Bienvenue !</h1>
105 [Link]("nomClasse")

 Supprime une ou plusieurs classes de l’élément.


Exemple :
[Link]("bleu");
Résultat :
<h1 class="grand">Bienvenue !</h1>
[Link]("nomClasse")
106
 Si la classe est absente, elle est ajoutée.
 Si elle est présente, elle est supprimée.
➡ C’est très utile pour les boutons "afficher/masquer", "mode
sombre", etc.
 Exemple :
<button id="btn">Changer le style</button>
<p id="texte">Bonjour à tous !</p>
<style> .rouge { color: red; } </style>
<script>
let bouton = [Link]("btn");
let texte = [Link]("texte");
[Link]("click", function() {
[Link]("rouge"); });
</script>
gestion des événements
107
en JavaScript
108 Qu’est-ce qu’un événement en
JavaScript ?
 Un événement est une action ou une interaction qui se produit
sur une page web.
Exemples :
 Un utilisateur clique sur un bouton
 Il tape du texte dans un champ
 Il passe la souris sur une image
 Il fait défiler la page
 Ou encore quand la page se charge
 JavaScript permet de réagir à ces événements en exécutant
du code : ce sont les gestionnaires d’événements (event
handlers).
109 Les différentes façons d’ajouter
un événement

 Méthode 1 : dans le HTML directement


 Méthode 2 : en JavaScript avec une propriété
 Méthode 3 : avec addEventListener()
110 Méthode 1 : dans le HTML
directement

 <button onclick="alert('Bonjour !')">Clique-moi</button>

Ici, l’attribut onclick appelle une fonction quand l’utilisateur


clique.
Inconvénient : mélange le HTML et le JavaScript (à éviter
dans les projets modernes).
111 Méthode 2 : en JavaScript
avec une propriété
 <button id="btn1">Clique-moi</button>
 <script>
let bouton = [Link]("btn1");
[Link] = function() {
alert("Bouton cliqué !"); };
 </script>

On associe une fonction anonyme à la propriété onclick de


l’élément.
Limite : on ne peut associer qu’un seul gestionnaire à un type
d’événement (le dernier écrase les précédents).
Méthode 3 : avec addEventListener()
112
 <button id="btn2">Clique-moi</button>
 <script>
let bouton = [Link]("btn2");
[Link]("click", function() {
alert("Clic détecté avec addEventListener !"); });
 </script>

Avantages :
•On peut ajouter plusieurs écouteurs sur le même événement
•On peut supprimer un écouteur avec removeEventListener()
•C’est la bonne pratique actuelle.
113 Quelques événements
courants
Type
Nom de l’événement Exemple
d’événement

click, dblclick, mouseover, Clic ou passage de la


Souris
mouseout, mousemove souris

Touche pressée ou
Clavier keydown, keypress, keyup
relâchée
Interaction avec un
Formulaire submit, change, focus, blur, input
formulaire
Fenêtre / Page chargée,
load, resize, scroll
Document redimensionnement
Divers contextmenu, drag, drop Clic droit, glisser-déposer
L’objet event
114
 Quand un événement se produit, JavaScript crée un objet
event qui contient des informations sur cet événement.
 Exemple :
<button id="infoBtn">Clique ici</button>
<script>
[Link]("infoBtn").addEventListener("click",
function(event) {
[Link]("Type :", [Link]);
[Link]("Cible :", [Link]);
[Link]("Coordonnées du clic :", [Link],
[Link]);
Sortie possible dans la console :
});
Type : click
</script> Cible : <button id="infoBtn">Clique
ici</button>
Coordonnées du clic : 132 280
115 Exemples pratiques
116 Exemple 1 : Changer la couleur
d’un paragraphe quand on clique

<p id="para">Cliquez sur moi pour changer la couleur</p>

<script>
let p = [Link]("para");
[Link]("click", function() {
[Link] = "blue";
});
</script>
117 Exemple 2 : Afficher le texte
saisi dans un champ
<input type="text" id="nom" placeholder="Entrez votre nom">
<p id="resultat"></p>

<script>
let input1 = [Link]("nom");
let resultat = [Link]("resultat");
[Link]("input", function() {
[Link] = "Bonjour " + [Link];
});
</script>
Exemple 3 : Empêcher l’envoi d’un
118 formulaire si un champ est vide
<form id="form">
<input type="text" id="nom" placeholder="Nom">
<button type="submit">Envoyer</button>
</form>
<script>
[Link]("form").addEventListener("submit",
function(event) {
let nom = [Link]("nom").value;
if ([Link]() === "") {
alert("Veuillez remplir le champ !");
[Link](); // empêche l’envoi du formulaire }
});
</script>
119 Supprimer un écouteur d’événement
 On peut retirer un gestionnaire ajouté par addEventListener() :

<button id="btn">Clique-moi</button>
<script>
function direBonjour() {
alert("Bonjour !");
[Link]("click", direBonjour); //
suppression
}
let bouton = [Link]("btn");
[Link]("click", direBonjour);
</script>
120 TRAVAUX PRATIQUES

Vous aimerez peut-être aussi