Programmation Web: Partie 2: Javascript

Programmation Web
Partie 2 : 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.
▪ 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é
22/12/2022 Prof. Hafida ZROURI 2
Introduction
■ 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.
Introduction
■ 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>
L’élément script avec un attribut src défini ne doit pas avoir de script compris dans
les balises.
▪ 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">
Introduction
■ 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 « ; »

Les variables
■ 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; // Déclaration de i, de j et de k
i = 1; // Affectation de 1 à i
let prix = 20; // 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";

Les variables
■ 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).

Les variables
■ 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 :
if(true){ var nb = 2; } alert(nb); // Affiche : 2
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.

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

Les opérateurs
■ Opérateurs booléens :
&& , || , !
■ Opérateurs de comparaison :
== , != , < , <= , > , >=
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).
Ex : let x = 1; let y = "1"; // x == y  true x === y  false
- 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
Lire / Ecrire
■ 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 ");

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

</script>
</body>
</html>
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>

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>
…
Lire / Ecrire
■ 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 : (paramètre optionnel) Il s'agit de la chaîne listant les fonctionnalités de la
nouvelle fenêtre. Cette chaîne de caractères ne peut pas contenir d'espaces. Chaque
fonctionnalité doit être séparée par une virgule au sein de la chaîne.
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)
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>

Les instructions de base
■ 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!");
…

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 + ' '); }
…
Les fonctions
■ 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.

Les fonctions
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));

Les fonctions
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(3)); // la valeur 6 est affiché une fenêtre alert
3- Utiliser une expression de fonction fléchée :
Syntaxe : let nom = ([param1] [, param2,...]) => { instructions };
ou let nom = ([param1] [, param2,...]) => valeur ou expression;
ou let nom = param1 => { instructions };
ou 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.

Les fonctions
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; };
*/

Les fonctions
■ 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
Les fonctions
♦ Quelques fonctions utiles :
▪ eval() évalue et exécute le code javascript contenu dans la chaîne de
caractères transmise en argument et renvoie le résultat.
▪ parseInt() retourne la conversion de la chaîne transmise en argument 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 transmise en argument 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.

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

</script>
</body>
</html>
<!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(let i = 0; i<elements.length; i++)
document.write(elements[i] + " ==> <b> " + parseInt(elements[i]) +
"</b><br>");
</script>
</body>
</html>
<!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(let i = 0; i<elements.length; i++)
document.write(elements[i] + " ==> <b> " + parseFloat(elements[i]) +
"</b><br>");
</script>
Si on souhaite faire une conversion plus strict, on pourra utiliser Number(…) qui
</body> utilise une analyse plus stricte et qui fournit NaN pour les valeurs qui contiennent des
</html> caractères invalides, quelle que soit leur position.
<!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>
Fonctions – Minuteries
♦ 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.

Fonctions – Minuteries
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.
Les évènements
■ 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();"

Les principaux événements
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" name="nom" value="votre nom"
onChange="alert('Vous avez changé votre nom')">

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 ou zone de texte.
Ex : <input type="text" value="Bonjour le monde!"
onSelect="alert('Vous avez sélectionné une partie de ce texte.')">

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 ?');">
Google </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>

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>

<!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>
<!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>
<!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" value="Résultat" onClick="depouiller()">
<input type="text" name="resultat" size="10" readonly>
</form>
</body>
</html>
Les objets en JavaScript
♦ 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.

♦ 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([…]);
- 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(); // affiche : Point(1, 5)
point.y = 2; // ou point["y"] = 2;
point.affiche(); // ou 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); // ou point['deplace'](3,8);
point.affiche(); // affiche : Point(4, 13)
delete point.z; // suppression de la propriété z
- 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 />");

Les objets du navigateur
■ 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.

■ 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, ...).

■ 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>

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

■ 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).

Exemple 1:
<!DOCTYPE html>
<html>
<head>
var InfoWin = window.open("fichier1.htm", "fenêtre2");
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>
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>

■ 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).

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>
– 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
▪ contenu textuel d’un élément et de ses descendants :
document.getElementById("id").textContent
▪ 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 à un
élément dans la page HTML alors que la page est déjà chargée.
document.getElementById('ID').onEvenement = maFonction;
document.getElementById('ID').onEvenement = function([…]){…};
Exemple 1 :
<!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>
Exemple 2 :
<!DOCTYPE html>
<html>
<head>
<title> Web </title>
</head>
<body>
<div id="divA">Ceci est un <i>exemple</i> de texte</div>
<p>Ceci est un exemple de HTML/CSS</p>
<p>Ceci est un exemple de JavaScript</p>
<script>
let divA = document.getElementById("divA");
let para = document.getElementsByTagName("p");
alert("textContent ==>" + divA.textContent + "\n innerHTML ==>" + divA.innerHTML);
para[0].textContent = "Ceci est un exemple de <b>textContent</b>";
para[1].innerHTML = "Ceci est un exemple de <b>innerHTML</b>";
</script>
</body> Remarque : Avec textContent (à l’inverse de innerHTML), le texte n'est pas analysé en HTML.
</html>
■ 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>

■ 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]

– 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')">

■ 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

– 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

Objets prédéfinis : Image
♦ 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"><br>
<input type="button" value="Changer" onclick="changer()">
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 :
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" ><br>
<input type="button" value="Changer" onClick="changer()">

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 somme le '+date.getDate()+ '- '+date.getMonth()+1+ '-'+date.getFullYear());

Equivalences JavaScript et
propriétés CSS
♦ 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 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) ---> styleFloat (en JavaScript)]
Ex : font-family (en css) ---> fontFamily (en JavaScript)
font-size (en css) ---> fontSize (en JavaScript)

propriétés CSS
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>
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>
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.
♦ 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); // "color: red;"
elem.style.cssText += "font-size: 2em";
alert(elem.style.cssText); // "color: red; font-size: 2em;"
</script>

Complément

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>
…

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 : var y = 20.355;
c = Math.ceil(y); // c a comme valeur 21
b = Math.floor(y); // b a comme valeur 20
x = Math.round(y); // x a comme valeur 20
y = Math.round(y); // y a comme valeur 20.35
Remarque : certains calcul réclament une plus grande précision. Ainsi, pour avoir deux décimales
après la virgule, on utilisera la formule : x = Math.round(y*100)/100; et dans ce cas, x sera
égal à 20.36

Programmation Web: Partie 2: Javascript

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Programmation Web: Partie 2: Javascript

Transféré par

Droits d'auteur :

Formats disponibles

Programmation Web

22/12/2022 Prof. Hafida ZROURI 5

22/12/2022 Prof. Hafida ZROURI 6

22/12/2022 Prof. Hafida ZROURI 7

22/12/2022 Prof. Hafida ZROURI 8

22/12/2022 Prof. Hafida ZROURI 11

22/12/2022 Prof. Hafida ZROURI 13

22/12/2022 Prof. Hafida ZROURI 15

22/12/2022 Prof. Hafida ZROURI 18

22/12/2022 Prof. Hafida ZROURI 19

22/12/2022 Prof. Hafida ZROURI 21

let resultat = somme(2, 3);

22/12/2022 Prof. Hafida ZROURI 22

22/12/2022 Prof. Hafida ZROURI 23

/* Ces fonctions peuvent s’écrire comme ci-dessous.

22/12/2022 Prof. Hafida ZROURI 24

22/12/2022 Prof. Hafida ZROURI 26

22/12/2022 Prof. Hafida ZROURI 31

22/12/2022 Prof. Hafida ZROURI 33

22/12/2022 Prof. Hafida ZROURI 34

22/12/2022 Prof. Hafida ZROURI 35

22/12/2022 Prof. Hafida ZROURI 36

22/12/2022 Prof. Hafida ZROURI 37

♦ Types des objets en JavaScript :

22/12/2022 Prof. Hafida ZROURI 41

let p1 = new Point(3,5);

22/12/2022 Prof. Hafida ZROURI 44

22/12/2022 Prof. Hafida ZROURI 45

22/12/2022 Prof. Hafida ZROURI 46

22/12/2022 Prof. Hafida ZROURI 47

document history location

anchors links images forms

button radio hidden reset submit

checkbox textarea password select text

22/12/2022 Prof. Hafida ZROURI 48

22/12/2022 Prof. Hafida ZROURI 49

22/12/2022 Prof. Hafida ZROURI 51

22/12/2022 Prof. Hafida ZROURI 52

22/12/2022 Prof. Hafida ZROURI 57

22/12/2022 Prof. Hafida ZROURI 58

22/12/2022 Prof. Hafida ZROURI 59

22/12/2022 Prof. Hafida ZROURI 60

22/12/2022 Prof. Hafida ZROURI 61

22/12/2022 Prof. Hafida ZROURI 63

22/12/2022 Prof. Hafida ZROURI 64

22/12/2022 Prof. Hafida ZROURI 65

22/12/2022 Prof. Hafida ZROURI 68

22/12/2022 Prof. Hafida ZROURI 69

22/12/2022 Prof. Hafida ZROURI 70

Vous aimerez peut-être aussi