cours developpement web javascript 2023/2024

Programmation Web
Partie 2 : JavaScript
07/10/2022 1

Introduction
07/10/2022
■ 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.
▪ JavaScript est surtout utilisé côté client, c'est-à-dire que c’est le navigateur qui lit
et interprète le code que l’on écrit en JavaScript.
■ Pourquoi faire ?
▪ Traitement local (client) d’événements déclenchés par l’utilisateur
▪ Applications simples (calculettes, convertisseurs, …)
▪ Aspects graphiques (modification d’images liées à la position de la souris,
animation du texte, …)
▪ Vérification de la saisie dans les formulaires
▪ …
■ Java ou JavaScript ?
▪ Java => langage de programmation, indépendant de HTML, puissant, fortement typé
▪ JavaScript => ancré dans HTML, langage interprété, très faiblement typé
2

Introduction
07/10/2022
■ JavaScript est un langage orienté objet :
▪ Il se fonde sur la programmation orientée objet par prototype.
▪ Il est destiné à créer des scripts. (Un script c’est du code qui n’a pas besoin
d’être compilé pour être exécuté)
■ A quoi ressemble un script ?
▪ C’est une portion de code qui vient s'insérer dans une page HTML.
▪ Le code du script n'est pas visible dans la fenêtre du navigateur car il est
compris entre des balises spécifiques qui signalent au navigateur qu'il s'agit d'un
script écrit en langage JavaScript.
▪ Balise annonçant le code JavaScript :
<SCRIPT type="text/JavaScript"> … </SCRIPT>
Remarque : Dans HTML5, l’attribut type est devenu optionnel.
■ Que mettre dans le script ?
Des variables et instructions, organisées selon un algorithme, c'est-à-dire selon
le résultat qu’on souhaite obtenir.
3

Introduction
07/10/2022
■ Où placer les scripts ?
On peut placer les scripts de trois manières :
▪ Utilisation de la balise <SCRIPT>…</SCRIPT> :
• déclaration de fonction dans l’en-tête entre <HEAD> et </HEAD>
• appel de fonction ou exécution d’une commande JavaScript dans
<BODY> …</BODY>
• insertion d’un fichier JavaScript externe (extension .js) :
<SCRIPT type="text/javascript" src="nomFichier.js"></SCRIPT>
▪ Utilisation dans une URL :
<A href="javascript:…" >…</A>
▪ Utilisation de nouveaux attributs de balise pour la gestion d’événements utilisateur :
<BALISE onEvenement="code JavaScript">
4

Introduction
07/10/2022
■ Masquage du script pour les anciens navigateurs :
Comme JavaScript a été inventé après l’arrivée des navigateurs, ceux-ci peuvent
ne pas le reconnaître. On place alors le code en commentaire :
<SCRIPT type="text/javascript">

</SCRIPT>
<NOSCRIPT>
Votre navigateur ne supporte pas les scripts
</NOSCRIPT>
■ Règles générales :
– JavaScript est sensible à la casse
– Chaque instruction se termine par « ; »
5

Les variables
07/10/2022
■ Une variable est définie par un nom (identificateur), un type et une valeur.
■ L'identificateur de variable doit répondre à certains critères :
- être une chaîne de caractères (espaces non autorisés) ;
- commencer par une lettre, un souligné "_" ou un dollar (Le reste de la chaîne peut
comporter des chiffres) ;
- ne pas être un mot réservé du langage.
■ L’opérateur d'affectation est le signe égal (=). Il permet d'affecter une valeur à une variable.
■ La déclaration des variables peut se faire de deux façons :
- de façon explicite : le nom de la variable est précédé par le mot-clé let (ou par le mot-clé
var) qui permet d’indiquer de manière rigoureuse qu’il s’agit d’une variable.
Exemple : var i, j, k;
i = 1;
let prix = 20;
// Déclaration de i, de j et de k
// Affectation de 1 à i
// Déclaration et affectation d’une valeur à prix
- de façon implicite : 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";
6

Les variables
07/10/2022
■ Portée des variables :
Selon l'endroit où la variable est déclarée, celle-ci pourra être accessible (visible) de partout
ou bien que dans une portion du code.
1- Une variable déclarée avec le mot-clé var a une portée
›› locale si elle est déclarée dans une fonction (sans distinction des blocs utilisés dans
la fonction).
›› globale si elle est déclarée au début du script en dehors de toute fonction .
Remarque : Avec le mot-clé var rien n’empêche de déclarer plusieurs fois une variable avec
le même identificateur. Ex : var x = 2; var x = 3; // Ok
2 Une variable déclarée avec le mot-clé let a comme portée le bloc où elle est déclarée.
Remarque : Avec le mot-clé let on n’a pas le droit de faire une re-déclaration d’une variable
avec le même identificateur dans le même bloc. Ex : let x = 2; let x = 3; // Erreur !
3 Une variable implicitement déclarée (sans var ni let) est globale et donc utilisable dans
tout le script (à partir de l’endroit où elle est déclarée).
7

Les variables
07/10/2022
■ L’opérateur var est très similaire à let mais il existe des différences : let modifie la portée d’une
variable de globale à locale, dans les blocs fonction (comme pour var), mais aussi dans les
blocs if() {..}ou for(){..}, …
Exemple :
Avec let :
if(true){ let nb = 2; } alert(nb); // Erreur car la variable est inaccessible
Tandis qu’avec var le résultat serait différent :
// Affiche 2
if(true){ var nb = 2; } alert(nb);
Même constat avec une boucle for :
for(let i=0; i<10; i++){ .... }
alert(i); // Erreur car la variable i est inaccessible en dehors du bloc
Avec var :
for(var i=0; i<10; i++){ .... }
alert(i); // affiche 10
Pour conclure var limite la portée d’une variable qu’au niveau d’un bloc fonction seulement.
8

Les types
07/10/2022
■Le type d’une variable dépend de la valeur stockée dans cette variable. Pas de
déclaration de type.
■ Le type d’une variable peut changer si on lui affecte une valeur d’un autre type.
■ Les types principales (primitifs) de JavaScript :
▪ Nombres : Number, pas de distinction entre réel et entier.
Ex : let taille = 1.75; // ou let taille = new Number(1.75);
▪ Booléens : Boolean, deux valeurs possibles : true ou false
Ex : let Gfaim = true; // ou let Gfaim = new Boolean(true);
La valeur 0 est considérée comme FALSE. Tout comme une chaîne de caractères vide,
ou null, ou undefined ou bien NaN . (null : indique un appel à une variable ou à un
objet non déclaré. undefined : 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, écrite entre ' ' ou " "
Ex : let str = "maChaine"; // ou let str = new String('maChaine');
* Les codes n (retour à la ligne), t (tabulation), f (saut de page) sont reconnus. On
trouve aussi : ' (apostrophe), " (guillemets double), (antislash)
* Opérateur de concaténation : +
9

Les tableaux
07/10/2022
■En JavaScript un tableau est un objet de type Array. C’est une structure qui regroupe
plusieurs valeurs, chacune associée à un indice. Un tableau JavaScript peut contenir des
éléments de type différent.
▪ Création du tableau : let tab = new Array(); Ou tab = new Array(taille);
Ou tab = new Array(elem1, elem2, …); Ou tab = [elem1, elem2, …];
▪ Quelques méthodes : tab.length retourne le nombre d’éléments du tableau tab. Il existe
plusieurs méthodes permettant de manipuler 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.
- sort() : tri le tableau par ordre alphabétique (à condition que les éléments soient de
même nature).
- 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é.
- toString() : convertit un tableau en une chaîne de caractères. Les éléments sont
séparés par une virgule.
- push() : ajoute un ou plusieurs éléments spécifiés en argument à la fin du tableau.
- pop() : retire le dernier élément du tableau.
10

Les tableaux
07/10/2022
■ Exemple :
<script type="text/javascript" >
let t1 = new Array(5,2,4);
let t2 = [1, 9];
// t contient 5,2,4,1,9
// la variable nbre contient la valeur 5
// t contient 5,2,4,1,9,3
// t contient 5,2,4,1,9
// t contient 1,2,4,5,9
// la variable ch contient la chaine '1,2,4,5,9'
// la variable ch contient la chaine '1-2-4-5-9'
let t = t1.concat(t2);
let nbre = t.length;
t.push(3);
t.pop();
t.sort();
let ch = t.toString();
ch = t.join('-');
</script>
11

Les opérateurs
07/10/2022
■ Opérateurs booléens :
&& , || , ! , == , != , < , <= , > , >=
Remarques :
- Les opérateurs === et !== testent en plus l’égalité ou l’inégalité des types de
deux opérandes (ils n’effectuent pas de conversion automatique de type).
- Contrairement à Java, on peut utiliser les opérateurs de comparaison
conventionnel (==, !=, <=, …) avec des chaînes de caractères.
■ Opérateurs arithmétiques :
+ , - , * , / , % (reste de la division)
+= , -= , *= , /= , %= (Exemple : X += Y est équivalent à X = X + Y)
■ Opérateurs d’incrémentations/décrémentations :
X-- est équivalent à X = X - 1
X++ est équivalent à X = X + 1
■ Commentaires :
// commentaire limité à une ligne
/* … */ bloc de commentaires possiblement défini sur plusieurs lignes
12

Lire / Ecrire
07/10/2022
■ La méthode prompt() :
– ouvre une boîte de dialogue avec un champ de saisie et deux boutons OK et
Annuler.
– la méthode retourne le texte saisi si l’utilisateur clique sur OK et retourne null si
l’utilisateur clique sur Annuler ou appuie sur la touche Echap.
variable = prompt("texte de la boîte d’invite");
variable = prompt("texte de la boîte d’invite ", "valeur par défaut");
■ La méthode alert() :
– permet d'afficher dans une boîte toute simple composée d'une fenêtre et d'un
bouton OK le texte (et|ou les variables) qu'on lui fournit en paramètre.
alert("chaîne de caractères");
alert(variable);
alert(variable + "chaîne de caractères ");
13

Lire / Ecrire
;
Exemple 1 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">

</script>
</body>
</html>
07/10/2022 14

Lire / Ecrire
■ La méthode confirm() :
Cette méthode ouvre une boîte de dialogue avec deux boutons OK et Annuler.
Elle permet : • d'envoyer une information
• de recevoir un booléen (true si l'utilisateur appuie sur OK
et false dans le cas contraire)
Exemple :
if (confirm('Je vais dire sur quel bouton vous avez appuyé : '))
{alert(' Sur OK n Continuez avec :')}
else {alert(' Sur Annuler n Sortez avec Ok !')};
</script>
07/10/2022 15

Lire / Ecrire
■ La méthode document.write() :
– permet d’écrire dans le document le texte qu'on lui fournit en paramètre.
document.write("texte");
– le paramètre texte peut être une chaîne de caractères classiques, du code HTML et
même du JavaScript.
– Pour afficher un texte sur plusieurs lignes, il faut concaténer la chaîne "<BR>" au
paramètre texte.
Exemple :
…
<body>
let nom = 'Malika';
document.write('Bonjour ' + nom + ' ! ');
</script>
</body>
…
07/10/2022 16

Lire / Ecrire
07/10/2022
■ La méthode open() :
– permet d’ouvrir une nouvelle fenêtre et d’écrire dedans. Cette fenêtre peut
aussi charger une page HTML mais aussi tout simplement une image.
– cette méthode retourne un objet de type window.
Syntaxe :
open("adresse cible","nom de la fenêtre","attributs")
Attributs :
location = yes|no : affiche ou non la barre d'adresse
menubar = yes|no : affiche ou non la barre de menu (fichier, édition, …)
resizable = yes|no : définit si la taille de la fenêtre est modifiable ou non
status = yes|no : affiche ou non la barre d'état
toolbar = yes|no : affiche ou non la barre d'outils
scrollbars = yes|no : affiche ou non les ascenseurs (barres de défilement)
width = largeur : définit la largeur (en pixels)
height = hauteur : définit la hauteur (en pixels)
17

Lire / Ecrire
Exemple :
let fille = open("", "" , "height=50,width=300,status=yes");
fille.document.write('<title>Exemple de fenêtre fille</title>');
fille.document.write('<p> Bonjour de <em>JavaScript</em> !</p>');
</script>
07/10/2022 18

Les instructions de base
07/10/2022
■ Expressions conditionnelles :
▪ if(exprBool) { instructions } else { instructions }
▪ switch(variable) {
case valeur1 : inst1; inst2; …; break;
case ….
default : inst1; inst2; …
}
■ L’opérateur (ternaire) conditionnel :
▪ (condition) ? instruction1 : instruction2;
Exemple :
…
let jour="Mardi" , age=14;
let petitMot = (jour == "Lundi") ? "Bonne reprise du travail !" : "Bon courage !";
document.write((age >= 18) ? "Vous pouvez entrer!" : "Vous ne pouvez pas entrer!");
…
19

Les instructions de base
■ Itérations :
▪ while(exprBool) { instructions }
▪ do { instructions } while(exprBool);
▪ for(initialisation; condition d’arrêt; expression à répéter ) { instructions }
▪ for(variable in tableau) { instructions }
▪ for(variable of tableau) { instructions }
▪ L’instruction break : permet de sortir d'une boucle ou d’un switch
▪ L’instruction continue : permet d’aller directement à l’itération suivante dans une boucle
Exemple :
…
let premiers = [1, 3, 5, 7, 9, 11,13];
document.write('Exemple avec for...in : ');
for(let a in premiers) {document.write(premiers[a] + ' '); }
document.write('<br>Exemple avec for...of : ');
for(let a of premiers) {document.write(a + ' '); }
…
07/10/2022 20

Les fonctions
07/10/2022
■ Les fonctions en JavaScript comme dans tous les autres langages désignent des suites
d'instructions répétitives, qui sont exécutés plusieurs fois mais écrites une seule fois.
■ En JavaScript il y a plusieurs façons de définir des fonctions :
1 Déclarer une fonction (l'instruction function) :
Syntaxe : function nomFonction([param1, param2,...]) { ... }
Remarques :
- Une fonction retourne toujours un résultat, même si rien ne l’indique au niveau de la
signature (en-tête). Ce résultat est : soit une valeur retournée par l’instruction return,
soit undefined.
- Une fonction peut appeler des arguments de tout type, ainsi que des fonctions et les
fonctions peuvent être appelées récursivement.
- Le nombre des paramètres passés à l'appel de la fonction n'est pas obligatoirement égal
au nombre des paramètres nommés dans la définition de la fonction (Les paramètres
excédentaires sont ignorés, ceux manquants sont remplacés par undefined).
- Tous les paramètres sont passés par valeur, sauf pour les objets, les tableaux et les
fonctions qui sont passés par référence.
21

Les fonctions
07/10/2022
Exemple :
function somme(x, y) {
return x+y;
}
function afficherNombre(n) {
var chaine = '<b>';
chaine += n;
chaine += '</b>';
document.write(chaine);
}
let resultat = somme(2, 3);
document.write(resultat + '<br>');
afficherNombre(somme(1, 5));
22

Les fonctions
07/10/2022
2 Utiliser une expression de fonction (l'expression function) :
Syntaxe : let nom = function [nomFonction]([param1, param2,...]) { ... };
Exemple :
let carre = function(x) { return x*x; };
let factorielle = function fac(n) { return n < 2 ? 1 : n * fac(n - 1) };
let a = carre(4); // a reçoit la valeur 16
alert(factorielle(6));
3 Utiliser une expression de fonction fléchée :
Syntaxe :
ou
ou
ou
let nom = ([param1] [, param2,...]) => { instructions };
let nom = ([param1] [, param2,...]) => valeur ou expression;
let nom = param1 => { instructions };
let nom = param1 => valeur ou expression;
param1, param2, … : Les noms des arguments. S'il n'y a pas d'arguments, cela doit être
indiqué par (). S'il y a un seul argument, les parenthèses ne sont pas obligatoires.
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.
23

Les fonctions
07/10/2022
Exemple :
let resultat = (a, b) => {
if (a > b) { return a; }
else { return b; }
};
let produit = (x, y) => x*y;
let bonjour = nom => "Bonjour " + nom;
alert(resultat(7,9) + "n" + produit(2, 3) + "n" + bonjour("Mohamed" ));
/* Ces fonctions peuvent s’écrire comme ci-dessous.
let resultat = function(a, b) {
if (a > b) { return a; }
else { return b; }
};
let produit = function(x, y) { return x*y; };
let bonjour = function(nom) { return "Bonjour " + nom; };
*/
24

Les fonctions
07/10/2022
■ Valeur de paramètres par défaut :
▪ En JavaScript, par défaut, la valeur des paramètres d'une fonction sera undefined.
Depuis la version 2015 de JavaScript, il est possible de définir d'autres valeurs par défaut.
Exemple :
function surfaceRectangle(largeur=10 , longueur=15) {return largeur*longueur ;}
let s1 = surfaceRectangle(30,50); // la valeur de s1 est 1500
let s2 = surfaceRectangle(20); // la valeur de s2 est 300
let s3 = surfaceRectangle(); // la valeur de s3 est 150
let s4 = surfaceRectangle(undefined, 17); // la valeur de s4 est 170
▪ On peut spécifier une expression en tant que valeur par défaut. Dans cet expression, on
peut réutiliser les paramètres précédents de la fonction.
Exemple :
function surfaceRectangle(largeur=10 , longueur=largeur*2) {return largeur*longueur ;}
let s5= surfaceRectangle(30,50); // la valeur de s5 est 1500
let s6= surfaceRectangle(20); // la valeur de s6 est 800
let s7 = surfaceRectangle(); // la valeur de s7 est 200
25

Les fonctions
07/10/2022
♦ Quelques fonctions utiles :
▪ eval() évalue la chaîne de caractères transmise et renvoie le résultat.
▪ parseInt() retourne la conversion de la chaîne en un entier (renvoie la
valeur spéciale « NaN » (Not a Number) s’il n’y a pas un nombre au
début de la chaîne.
▪ parseFloat() retourne la conversion de la chaîne en un réel.
▪ isNaN() vérifie si le paramètre est un nombre invalide. Renvoie true si la
valeur n'est pas un nombre et false sinon. Aussi bien les nombres entiers
que les nombres décimales sont reconnus comme nombres valides.
26

Fonctions – Exemple 1
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>

</script>
</body>
</html>
01/04/2020
07/10/2022 27

<!DOCTYPE html>
<html>
<head>
<title> Test </title>
</head>
<body>
let elements = new Array("128", "18.1", "abc", "12.78ag4");
document.write("<h2>Application de <i>parseInt()</i></h2>");
for(i = 0; i<elements.length; i++)
document.write(elements[i] + " ==> <b> " + parseInt(elements[i]) +
"</b><br>");
</script>
</body>
</html>
01/04/2020
07/10/2022 28

<!DOCTYPE html>
<html>
<head>
</head>
<body>
let elements = new Array("128", "18.1", "abc", "12.78ag4");
document.write("<h2>Application de <i>parseInt()</i></h2>");
for(i = 0; i<elements.length; i++)
document.write(elements[i] + " ==> <b> " + parseFloat(elements[i]) +
"</b><br>");
</script>
</body>
</html>
07/10/2022 29

<!DOCTYPE html>
<html>
<head>
function verif(saisie) {
if(isNaN(saisie) == true) { alert(saisie + " n'est pas un nombre!"); }
else alert(saisie + " est un nombre!"); }
</script>
</head>
<body>
let nombre = prompt('Je vais vous dire si vous avez taper un nombre !');
verif(nombre);
</script>
</body>
</html>
07/10/2022 30

Fonctions – Minuteries
07/10/2022
♦ Comptes à rebours :
▪ setTimeout permet de déclencher une fonction après un laps de temps déterminé.
nom_du_compteur = setTimeout("fonction_appelée", temps en milliseconde)
Ex : setTimeout("demarrer()", 5000) va lancer (une seule fois) la fonction
demarrer() après 5s.
▪ Pour arrêter le temporisateur avant l’expiration du délai fixé, on utilisera la
méthode clearTimeout(nom_du_compteur).
♦ Déclenchement périodique :
▪setInterval fonctionne comme setTimeout, à la différence que les instructions
passées en premier paramètre (ou la fonction) sont exécutées périodiquement
(toutes les délai millisecondes).
▪ La fonction clearInterval permet de stopper un déclenchement périodique.
31

Fonctions – Minuteries
07/10/2022
Exemple :
Dans le <HEAD> de la page HTML :
<script>
function Couleur() {
if(couleur == 1) {document.bgColor = "blue"; couleur = 2;}
else {document.bgColor = "red"; couleur = 1;}
i = i + 1;
if(i >= 20) clearInterval(actif);
}
</script>
Dans le <BODY> de la page HTML :
<script>
var i = 0, couleur = 1;
var actif = setInterval("Couleur()", 1000);
</script>
Résultat : Chaque seconde, le font de la page change de couleur (de bleu à rouge).
Cet effet s’arrêtera après 20 secondes.
32

Les évènements
07/10/2022
■ Présentation :
▪ Les événements sont l’intérêt du JavaScript en matière de programmation Web.
▪ Ils donnent une interactivité à la page web, ce qui n’existe pas avec le HTML, si on
excepte bien entendu les liens hypertextes.
▪ JavaScript permet de réagir à certaines actions de l’utilisateur.
■ Pour cela, on précise :
– L’événement (Event)
• Clic de souris, survol de zones, chargement de la page, …
– Le gestionnaire de l’événement (onEvent)
• onClick, onMouseOver, … : appel de fonction pour agir en conséquence
■ Syntaxe du gestionnaire d’événement :
Les gestionnaires d’événements peuvent être noter sous forme d’attributs dans les
balises HTML. La syntaxe est :
onEvent = "Action_Javascript_ou_Fonction();"
33

Les principaux événements
07/10/2022
onClick : se produit au clic de la souris sur un élément HTML.
Ex : <input type="button" onClick="alert('vous avez cliqué sur le bouton');">
onFocus : se produit à la prise du focus d’un élément de formulaire.
Ex : <input type="text" size="40"
onFocus="javascript:this.style.backgroundColor='red'">
onBlur : se produit à la perte du focus par un élément HTML (généralement lorsqu’on
quitte un élément de formulaire)
Ex : <input type="text" onBlur="this.size=20" onFocus="this.size=50">
onChange : se produit lorsque la valeur d’un élément du formulaire a été modifié. Il est
appelé lorsque l’élément perd le focus et non pas immédiatement après avoir été
modifié. Il est surtout utilisé avec les balises select, textarea et input.
Ex : <input type="text" value="votre nom" name="nom"
onChange="alert('Vous avez changé votre nom')">
34

07/10/2022
onLoad : se produit au chargement de la page par le navigateur.
Ex : <body onLoad="alert('La page est chargée !');">
onUnload : se produit au moment où la page est quittée.
Ex : <body onUnload="alert('La page est déchargée !');">
onAbort : se produit à l’arrêt du chargement de la page ou d’une image par le bouton
Stop du navigateur.
Ex : <img src="imag.gif"
onAbort="alert('Vous avez interrompu le chargement de l’image !');">
onError : se déclenche lorsqu'une erreur apparaît durant le chargement de la page ou
d’une image.
Ex : <img src="imag.gif" onError="alert('Erreur de chargement !');">
onSelect : se produit à la sélection d’un texte dans un élément HTML. Il est surtout
utilisé dans un champ de type text ou textarea.
Ex : <input type="text" value="Bonjour le monde!"
onSelect="alert('Vous avez sélectionné une partie de ce texte.')">
35

07/10/2022
onMouseOver : se produit au survol d’un élément HTML par la souris.
onMouseOut : se produit à l’abandon d’un élément HTML par la souris.
Ex :
<a href="http://www.google.fr" onMouseOut="alert('Vous ne voulez pas y aller ?');">
http://www.google.fr
</a>
onSubmit : se produit au clic sur le bouton submit d'un formulaire.
onReset : se produit au clic sur le bouton reset d'un formulaire.
Ex :
<form name="testform" onSubmit="alert('Bonjour ' + testform.nom.value +'!')">
Quel est votre nom ? <input type="text" name="nom" size="30">
<input type="submit" value="Envoyer">
</form>
36

Les événements – Exemple 1
<!DOCTYPE html>
<html>
<head>
<title> Exemple 1</title>
</head>
<body>
<form>
Entrez une expression :
<input type="text" size="20" name="saisie">
<input type="button" value="Calculer"
onClick="alert(saisie.value + ' = ' + eval(saisie.value))">
</form>
</body>
</html>
07/10/2022 37

<!DOCTYPE html>
<html>
<head>
<title> Exemple 2 </title>
function lireAnnee() {
let age = prompt('Quel est votre âge ? ', 18);
alert('Vous avez répondu : ' + age)
}
</script>
</head>
<body>
<form>
<input type="button" value="Votre âge ? " onClick="lireAnnee()">
</form>
</body>
</html>
07/10/2022 38

<!DOCTYPE html>
<html>
<head>
<title> Exemple 3 </title>
</head>
<body>
<form name="lire">
Entrez un nombre : <input type="text" name="nbre" size="3">
<input type="button" value="go"
onClick="javascript:document.lire.aff.value=
2 * new Number(document.lire.nbre.value);">
voici son double : <input type="text" name="aff" size="8" readonly>
</form>
</body>
</html>
07/10/2022 39

<!DOCTYPE html>
<html>
<head>
<title>Exemple 4</title>
var vote = '';
function enregistrer(x){vote = x;}
function depouiller(){document.election.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" name="reponse" value="Résultat" onClick="depouiller()">
<input type="text" name="resultat" size="10" readonly>
</form>
</body>
</html>
07/10/2022 40

Les objets en JavaScript
07/10/2022
♦ Un objet JavaScript est un ensemble de couples (propriété, valeur). La valeur d’une propriété
peut être une chaîne de caractères, un nombre, un booléen ou, à son tour, un objet, y compris
un tableau ou une fonction. Quand la valeur d’une propriété est une fonction, nous disons que
c’est une méthode. Le code contenu dans la méthode peut accéder aux propriétés de l’objet à
travers l’opérateur this.
♦ L'accès aux propriétés(en lecture ou en écriture)se fait avec la notation pointée : objet.propriété
Il est également possible d'utiliser les crochets pour accéder aux propriétés : objet["propriété"]
Si on accède en lecture à une propriété qui n'existe pas, on obtient la valeur undefined
♦ Un objet a une structure dynamique : on peut ajouter ou supprimer des propriétés à un objet à
l'exécution.
▪ Dans une affectation, si une propriété n'existe pas dans un objet, celle-ci sera créée.
▪ Il est possible de supprimer une propriété d’un objet : delete objet.propriété;
♦ Types des objets en JavaScript :
- Les objets prédéfinis du langage.
- Les objets personnalisés qui sont les objets définis par le programmeur.
41

07/10/2022
♦ Création d'objets :
Un objet en JavaScript peut être créé de plusieurs façons.
▪ Construction littérale (à la façon des tableaux associatifs) :
let monObj = {
[ propriete1 : valeur1,
propriete2 : function([…]) {…},
…]
};
▪ Création à l’aide de constructeur :
- En JavaScript, un constructeur est une fonction qui est appelée avec l’opérateur new.
function MonConstructeur([param1, param2,…]) {
this.attribut1 = param1;
this.methode1 = function([…]) {…};
…
}
- Pour créer un objet obj avec le constructeur MonConstructeur, on écrit :
let obj = new MonConstructeur([…]);
42

07/10/2022
- Exemple 1 :
let point = {
x : 0 ,
y : 0 ,
initialise : function(a,b) { this.x=a; this.y=b; } ,
affiche : function() { document.write('Point(' + this.x +', ' + this.y + ')'); }
};
point.initialise(1, 5);
point.affiche();
point.y = 2;
point.affiche();
point.z = 9;
// affiche : Point(1, 5)
// ou point["y"] = 2;
// ou point["affiche"]();
// 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); // ou point['deplace'](3,8);
point.affiche();
delete point.z;
// affiche : Point(4, 10)
// suppression de la propriété z
43

- Exemple 2 :
function Point(x, y) {
this.x = x;
this.y = y;
this.deplace = function(a, b) {this.x += a; this.y += b;};
this.toString = function(){return ('Point(' + this.x +', ' + this.y + ')');};
this.equals = function(p){return(this.x===p.x && this.y===p.y);};
}
let p1 = new Point(3,5);
let p2 = new Point(9,12);
document.write("p1 = "+p1 +"<br />p2 = "+ p2+"<br />");
document.write("p1==p2 => "+p1.equals(p2)+"<br />");
p1.deplace(6,7);
document.write("<hr />p1 = "+p1 +"<br />p2 = "+ p2+"<br />");
document.write("p1==p2 => "+p1.equals(p2)+"<br />");
07/10/2022 44

Les objets du navigateur
07/10/2022
■ Comment JavaScript définit les objets du navigateur ?
– JavaScript traite les éléments qui s'affichent dans le navigateur comme des objets,
c'est-à-dire des éléments :
• classés selon une hiérarchie pour pouvoir les désigner précisément
• auxquels des propriétés et des actions (méthodes) sont associées
– JavaScript divise la page du navigateur en éléments (objets), afin de permettre
d'accéder à n'importe lequel d'entre-eux et de pouvoir les manipuler par
l'intermédiaire de leurs propriétés et leurs méthodes.
– On commence généralement par l'objet le plus grand (celui contenant tous les
autres) puis on descend dans la hiérarchie jusqu'à arriver à l'objet voulu.
• L'objet le plus grand est l'objet fenêtre : window
• Dans la fenêtre s'affiche une page, c'est l'objet document
• Cette page peut contenir plusieurs objets, comme des formulaires, des images, etc.
45

07/10/2022
■ Les objets de base de JavaScript :
● navigator : qui contient des informations sur le navigateur de celui qui
visite la page.
● window : c'est l'objet où s'affiche la page, il contient donc des
propriétés concernant la fenêtre elle-même mais aussi tous les objets-
enfants contenus dans celle-ci comme :
▪ location : contient des informations relatives à l'adresse de la page
à l'écran.
▪ history : c'est l'historique, c'est-à-dire la liste de liens qui ont été
visités précédemment.
▪ document : contient les propriétés sur le contenu du document
(couleur d'arrière plan, titre, ...).
46

07/10/2022
■ L’objet navigator :
– a plusieurs propriétés concernant le navigateur :
● appName :
▪ connaître le nom : Netscape, IE, Mozilla
● appVersion :
▪ connaître la version
● language :
▪ FR, AN
● platform :
▪ windows, Linux…
navigator.nomPropriété
– Utilisation :
– Exemple :
<script>
document.write(navigator.appName);
</script>
47

document history location
anchors links images forms
button radio hidden reset submit
checkbox textarea password select text
07/10/2022
■ L’objet window :
window
48

07/10/2022
■ L’objet window :
– Quelques propriétés :
● status : le texte à afficher dans la barre d’état
● closed : (booléen) indique si la fenêtre est fermée
– Méthodes :
●alert(), confirm(), prompt(), setTimeOut(), clearTimeOut(), setInterval(),
clearInterval() : méthodes abordés précédemment.
● open(), et close() : permettent l'ouverture et la fermeture de fenêtres.
●print() : permet d’imprimer la page en cours. Elle ne comporte pas de
paramètres. Elle correspond à la commande Fichier - Imprimer du navigateur.
● resizeTo(w, h) : redimensionne la fenêtre.
● moveTo(x, y) : déplace la fenêtre au point de coordonnées (x, y).
49

07/10/2022
Exemple 1:
<!DOCTYPE html>
<html>
<head>
var InfoWin = window.open("fichier1.htm", "Seconde fenêtre");
function verifierOpen() {
if(InfoWin.closed == true) alert("La fenêtre a été fermée");
else alert("La fenêtre est encore ouverte");
}
</script>
</head>
<body>
<a href="javascript:verifierOpen()"> La fenêtre est-elle fermée ? </a>
</body>
</html>
50

Exemple 2 :
<!DOCTYPE html>
<html>
<head>
<title> print </title>
</head>
<body>
<h1> JavaScript </h1>
<p>
<form>
<input type="button" value="Imprimer" onclick="print()">
</form>
</p>
</body>
</html>
07/10/2022 51

07/10/2022
■ L’objet document :
– L'objet document est un élément majeur, il permet de récupérer des informations d'un
formulaire, écrire du texte, ...
– Propriétés :
● fgColor : permet de récupérer et de changer la couleur du texte de la page HTML.
Ex : document.fgColor = "red";
● bgColor : permet de récupérer et de changer la couleur de fond de la page HTML.
● URL : permet de récupérer l’url où se trouve le document.
● title : permet de récupérer le titre du document (le contenu de la balise <title>).
●location : permet de récupérer et de changer l'url de la page HTML, ce qui revient à
charger une autre page HTML. document.location = "URL/monDoc.html";
● images[] : permet d’accéder aux images de la page HTML.
● forms[] : permet d’accéder aux formulaires de la page HTML.
● links[] : permet d’accéder aux liens hypertextes et images cliquables.
● anchors[] : permet d’accéder aux liens internes (les ancres).
52

Exemple :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="a.htm"> Lien </a> <br>
<a name="ancre1">Ancre </a> <hr>
let l0 = document.links[0].href;
let a0 = document.anchors[0].name;
document.write("Titre de la page : " + document.title + "<br>");
document.write("URL de ce fichier : " + document.URL + "<br>");
document.write("Le lien n°1 pointe vers : " + l0 + "<br>");
document.write("Le nom de l'ancre n°1 : " + a0);
</script>
</body>
</html>
07/10/2022 53

07/10/2022
– Méthodes :
● write() : permet d'écrire dans la page HTML.
● getElementById("id") : retourne l’élément dont l’id est spécifié.
● getElementsByTagName("balise") : permet de récupérer les éléments portant le nom
de balise spécifié comme paramètre (la méthode renvoie un tableau).
● getElementsByName("X") : permet de récupérer les éléments dont le nom est X
(la méthode renvoie un tableau).
– Pour accéder au détail des éléments HTML :
▪ contenu HTML d'un élément (se trouvant entre les balises ouvrante et fermante) :
document.getElementById("id").innerHTML
▪ accès à la valeur des éléments d’un formulaire (ex: input) :
document.getElementById("id").value
– Associer dynamiquement un événement à un élément : consiste à ajouter un évènement à
une balise dans la page HTML alors que la page est déjà chargée.
document.getElementById('ID').onEvenement = maFonction;
document.getElementById('ID').onEvenement = function([…]){…};
54

Exemple :
<!DOCTYPE html>
<html>
<head>
<title> JavaScript </title>
function f() {
let obj = document.getElementById("texte");
for (var i = 1; i< 5; i++) {
obj.innerHTML = obj.innerHTML + "<br> Bonjour le monde"; }
}
</script>
</head>
<body>
<p id="texte"> Bonjour le monde </p>
<input type="button" onclick="f()" value="Encore !">
</body>
</html>
07/10/2022 55

07/10/2022
■ 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>
56

07/10/2022
■ 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]
57

07/10/2022
– 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')">
58

07/10/2022
■ L’objet forms :
– Avec l’objet forms, qui se trouve sous l’objet document dans la hiérarchie JavaScript,
on a accès aux formulaires définis dans un fichier HTML.
– Syntaxe :
document.forms["nom_formulaire"|indice].propriété
document.forms["nom_formulaire"|indice].méthode
ou :
document.nom_formulaire.propriété
document.nom_formulaire.méthode
59

07/10/2022
– Propriétés :
● action : adresse du destinataire lors d’un envoi
● method : méthode de transmission
● name : nom du formulaire
● length : nombre de formulaires dans la page HTML
– Méthodes :
● submit() : envoyer le formulaire
● reset() : réinitialiser le formulaire
– Sous-objets :
● elements : est un tableau permettant d’accéder aux éléments du formulaire.
Syntaxe :
document.forms[…].elements[…].propriété
document.forms[…].elements[…].méthode
60

Objets prédéfinis : Image
07/10/2022
♦ Il y a deux 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.portrait pour l’image dont le nom est name="portrait".
- par son numéro d’index. Chaque image qui a été notée avec la balise <img> dans le
fichier html est notée dans un tableau.
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 :
function changer() {
document.images[0].width = "150";
document.images[0].height = "90"; }
</script>
<img src="world.jpg" width="70" height="70">
<input type="button" value="Changer" onclick="changer()">
61

Objets prédéfinis : Image
07/10/2022
♦ 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 :
let graph = new Image(80, 80);
graph.src = "einstein.jpg";
function changer() { document.images[0].src = graph.src; }
</script>
<img src="world.jpg" width="70" height="70" >
<input type="button" value="Changer" onClick="changer()">
62

Objets prédéfinis : Date
07/10/2022
■ 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 somme le '+date.getDate()+ '- '+date.getMonth()+1+ '-'+date.getFullYear());
63

Equivalences JavaScript et
propriétés CSS
07/10/2022
♦ On peut modifier dynamiquement toutes les propriétés de style d’un élément ou d’une
page.
♦ Syntaxe : document.getElementById("id").style.propriété = "valeur";
Ex : document.getElementById("nom").style.color = "red";
Pour changer le nom de la classe CSS à laquelle appartient l’élément :
document.getElementById("id").className = "nouvelle_classe";
♦ 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) ---> styleFloat (en JavaScript)]
Ex : font-family (en css) ---> fontFamily (en JavaScript)
font-size (en css) ---> fontSize (en JavaScript)
64

propriétés CSS
07/10/2022
Exemple 1 :
<!DOCTYPE html>
<html>
<head>
function test(x) { document.getElementById("paragraphe").style.fontSize = x; }
</script>
</head>
<body>
<p id="paragraphe" style="color: red;"> Un texte pour le test </p>
<form>
<input type="button" value="Plus grand" onClick="test('26pt')">
<input type="button" value="Plus petit" onClick="test('10pt')">
</form>
</body>
</html>
65

propriétés CSS
Exemple 2 :
<!DOCTYPE html>
<html>
<head>
function action() {
let p1 = document.getElementById("id1");
let p2 = document.getElementById("id2");
p1.onclick = function() {this.style.fontWeight = "bold";};
p2.onclick = function() {this.style.borderTop = "solid 3px red";};
}
window.onload = action;
</script>
</head>
<body>
<p id="id1">HTML et CSS</p>
<p id="id2">JavaScript</p>
</body>
</html>
07/10/2022 66

cours developpement web javascript 2023/2024

Recommandé

Recommandé

Contenu connexe

Similaire à cours developpement web javascript 2023/2024

Similaire à cours developpement web javascript 2023/2024 (20)

Plus de YounesOuladSayad1

Plus de YounesOuladSayad1 (17)

Dernier

Dernier (11)

cours developpement web javascript 2023/2024