JavaScript et HTML
Ce cours est tiré du site : [Link]
1. Fonctionnement de JavaScript
JavaScript est un langage de programmation de scripts principalement employé dans les pages web
interactives mais aussi pour les serveurs.
JavaScript a été créé en 1995 par l'américain Brendan Eich. Il a été standardisé sous le nom d'ECMAScript
en juin 1997 par Ecma International dans le standard ECMA-262.
Avec les technologies HTML et CSS, JavaScript est parfois considéré comme l'une des technologies cœur
du World Wide Web.
Le langage JavaScript permet des pages web interactives, et à ce titre est une partie essentielle des
applications web. Une grande majorité des sites web l'utilisent, et la majorité des navigateurs web
disposent d'un moteur JavaScript dédié pour l'interpréter, on peut donc se passer des serveurs pour le
faire fonctionner.
➢ Les balises :
Les navigateurs décryptant le HTML, vont identifier le code encapsulé entre les deux balises, l'une
ouvrante, l'autre fermante :
➢ Place des balises :
Cette balise peut se placer n'importe où sur la page HTML mais il est d'usage de placer les scripts en
fin de page, juste avant la balise </body>.
On peut aussi faire figurer le code dans un fichier externe comme nous le verrons.
a. Un premier exemple, le fameux « Hello, World ! »
Recopiez le code suivant sur une page html nommée :
VotreNom_exercices_ [Link]
Et ouvrez-le avec votre navigateur.
<!DOCTYPE html>
<html>
<head>
<title> Hello World ! </title>
</head>
<body>
<script>
alert('Hello world!');
</script>
</body>
</html>
b. Quelques caractéristiques de JavaScript :
Instructions et point-virgule : Les instructions JavaScript doivent être suivies d'un point virgule ;
1
Les fonctions : exemple, la boîte de dialogue alert() :
alert() est une instruction simple, appelée fonction, qui permet d'afficher une boîte de dialogue
contenant un message. Ce message est placé entre apostrophes, elles-mêmes placées entre les
parenthèses de la fonction alert()
Une fonction se compose de deux choses :
o son nom ;
o suivi d'un couple de parenthèses (une ouvrante et une fermante).
Comme en Python, entre les parenthèses se trouvent les arguments, que l'on appelle aussi paramètres
de la fonction. Ceux-ci contiennent des valeurs qui sont transmises à la fonction. Dans le cas de la
fonction alert() ici, ce sont les mots « Hello world ! » qui sont passés en paramètre.
alert('Hello world!'); // c'est une première fonction en JavaScript
Les commentaires :
Comme dans tout langage, il est important de commenter ses scripts.
Les commentaires s'écrivent :
o derrière le symbole // et sur une seule ligne ;
o ou alors précédé de /* et se terminant par */ s'ils sont sur plusieurs lignes.
c. Le JavaScript externe
Il est possible, d'écrire le code JavaScript dans un fichier externe, portant l'extension .js. Ce fichier est
ensuite appelé depuis la page Web au moyen de l'élément <script> et de son attribut src qui contient
l'URL du fichier .js.
Par exemple si dans le fichier [Link] (dans le même répertoire) on écrit le script :
alert('Hello world!');
On peut modifier la page HTML
<!DOCTYPE html>
<html>
<head>
<title> Hello World! </title>
</head>
<body>
<script src="[Link]"></script>
</body>
</html>
2. Programmer en JavaScript
a. Les variables
• Une variable est un moyen pour stocker une valeur.
• On utilise les mots clés : var, const et let pour déclarer une variable, et on utilise «=» pour affecter
une valeur à la variable.
2
• Variables typées dynamiquement : les variables sont typées dynamiquement, ce qui veut dire que
l'on n'a pas besoin de spécifier le type de contenu que la variable va contenir.
• Opérations : grâce à différents opérateurs, on peut faire des opérations entre les variables.
Voici la liste des principaux opérateurs avec les compatibilités des navigateurs : les opérateurs
JavaScript.
• Concaténation
L'opérateur «+» permet de concaténer des chaînes de caractères, c'est-à-dire de les mettre bout à
bout.
• Interaction avec prompt()
La fonction prompt() permet d'interagir avec l'utilisateur. Tout ce qui est écrit dans le champ de
texte de prompt() est récupéré sous forme d'une chaîne de caractères, que ce soit un chiffre ou
non. Si vous utilisez l'opérateur «+» , vous ne ferez pas une addition mais une concaténation ! Pour
convertir la chaîne de caractères en nombre entier on utilise la fonction parseInt(), et en flottant,
la fonction parseFloat()
Un exemple :
<script>
var a, b, produit,somme;
a = prompt('Donnez un nombre');
b = prompt('Donnez un autre nombre :');
a = parseFloat(a) ; // On convertit la chaîne de caractère a en flottant
b = parseFloat(b); // On convertit la chaîne de caractère b en flottant
produit = a*b;
somme = a+b;
alert('Le produit est '+ produit+', et la somme est '+ somme);
</script>
Exercice 1 :
Ecrire un script JavaScript qui pour un triangle ABC rectangle en A, demande la longueur AB, la
longueur AC et affiche une valeur approchée de l'hypoténuse BC. Vous nommerez votre fichier :
« [Link] » et devez faire figurer le lien vers ce fichier sur votre page
web : « VotreNom_exercices_ [Link] ».
Aide :
<script>
a = [Link](2) // a = la racine carrée de 2 (enfin une valeur approchée)
</script>
b. Les conditions :
• Une condition retourne une valeur booléenne : true ou false.
• En JavaScript on utilise les accolades pour délimiter les blocs d'instructions :
if ( /* condition */ )
{
// Du code...
} else {
// Du code...
}
• Les opérateurs logiques en javaScript : de nombreux opérateurs existent afin de tester des
conditions et ils peuvent être combinés entre eux.
o test d'égalité == , supérieur à > , supérieur ou égal à >=, et différent de !=
o le ET logique se traduit par : &&
o le OU logique par : ||
o la négation par le point d'exclamation : !
3
• La condition if else permet de combiner les conditions.
• Quand il s'agit de tester une égalité entre une multitude de valeurs, la condition switch est
préférable.
Exercice 2 :
Ecrire un script JavaScript qui pour un triangle ABC, demande la longueur AB, la longueur AC et la
longueur BC et affiche si ce triangle est rectangle (et en quel sommet) ou s’il ne l'est pas.
Vous nommerez votre fichier : "[Link]" et devez faire figurer le lien
vers ce fichier sur votre page web.
Vous devrez tester votre script avec :
1. ABC tel que AB = 3, AC = 4 et BC = 5 qui doit afficher : "ABC est rectangle en A" ;
2. ABC tel que AB = 50, AC = 30 et BC = 40 qui doit afficher : "ABC est rectangle en C" ;
3. ABC tel que AB = 6, AC = 10 et BC = 8 qui doit afficher : "ABC est rectangle en B" ;
4. ABC tel que AB = 3, AC = 4 et BC = 6 qui doit afficher : "ABC n'est pas rectangle".
c. Les structures itératives (boucles) :
• L'incrémentation est importante au sein des boucles.
Incrémenter ou décrémenter signifie ajouter ou soustraire une unité à une variable.
var x = 0;
x = x+1 ; // on ajoute 1 à x
alert(x); // Affiche : « 1 »
x++; // on ajoute 1 à x
alert(x); // Affiche : « 2 »
x--; // on enlève 1 à x
alert(x); // Affiche : « 1 »
• La boucle while permet de répéter une liste d'instructions tant que la condition est vérifiée.
<script>
var N = 0, somme=0;
while (N < 5)
{
N = N+1; // ou N++
somme = somme + N
}
alert('somme = ' + somme + ' et N = ' + N ); // Affiche « somme = 15 et N = 5 »
</script>
• La boucle for est une boucle utilisée pour répéter une liste d'instructions un certain nombre de
fois.
<script>
var somme = 0;
for (var N = 1 ; N <= 5 ; N = N+1 ) // syntaxe (var compteur=valeur départ ;
compteur<= valeur fin ; incrément)
{
somme = somme + N
}
alert('somme = ' + somme + ' et N =' + N ); // Affiche « somme = 15 et N = 6 » ,
la dernière valeur de N est 6 ce qui invalide la condition
</script>
4
Exercice 3 :
Ecrire un script JavaScript qui tente de faire deviner un entier de votre choix et affiche, plus petit, ou
plus grand jusqu'à la victoire.
Commencer par fixer votre nombre à deviner puis essayer de le générer aléatoirement dans un
deuxième temps.
Vous nommerez votre fichier : "[Link]" et devez faire figurer le lien
vers ce fichier sur votre page web.
d. Les fonctions :
• Il existe des fonctions natives en JavaScript dont voici une liste des fonctions JavaScript.
On a par exemple :
alert() , prompt() , confirm() , parseInt() , parseFloat() , ...
• Il est aussi possible d'en créer, avec le mot-clé function. Par exemple ici avec ce code on obtient :
<script>
function DireBonjour(x)
{
return ('Bonjour ' + x); // L'instruction « return » suivie de la
concaténation de 'Bonjour' et de la variable chaîne x
}
nom = prompt('Quel est votre prénom svp ?'); // On demande le prénom à
l'utilisateur
alert(DireBonjour(nom)); // Ici on affiche la valeur retournée par la fonction
DireBonjour()
</script>
• Il faut éviter le plus possible d'avoir recours aux variables globales.
• Une fonction peut recevoir un nombre défini ou indéfini de paramètres. Elle peut aussi retourner
une valeur ou ne rien retourner du tout.
• Des fonctions qui ne portent pas de nom sont des fonctions anonymes et servent à isoler une
partie du code.
Exercice 4 :
Ecrire une fonction JavaScript qui teste la présence de la lettre "e" minuscule dans une chaîne de
caractères passée en paramètre. Cette fonction doit renvoyer vrai ou faux. Utilisez votre fonction
après avoir demandé une chaîne de caractères via la fonction prompt().
Vous nommerez votre fichier : "[Link]" et devez faire figurer le lien
vers ce fichier sur votre page web.
Aide :
La fonction .length renvoie la longueur d'une chaine C et la fonction .charAt(position) le
caractère à la position précisée dans la chaîne C.
Voici un exemple d'utilisation :
<script>
var C = 'abcdefg'; // C est une chaine de caracteres
long = [Link]; // long est la longueur de la chaine, ici 7
lettre = [Link](0); // lettre est le caractere de la chaine en position 0 (le
1er caractere)
alert('Chaine=' + C + ' , longueur = '+ long + ', premier caractère = ' +
lettre );
</script>
5
3. Les évènements en HTML
JavaScript permet de réagir à un évènement lié à la page HTML :
• clic, utilisation du clavier, focus sur une zone ...
Pour réagir à un évènement de ce type, il faut commencer par agir au niveau HTML en ajoutant un attribut
à la balise à laquelle on souhaite ajouter une interaction. La syntaxe est toujours la même :
on_Evénement = "déclencher la fonction"
Les événements permettent de déclencher une fonction selon qu'une action s'est produite ou non.
Par exemple, on peut faire apparaître une fenêtre alert() lorsque l'utilisateur survole une zone d'une
page Web, clique sur un texte...
Voici une liste de quelques évènements :
EventHandler : Gestionnaire
Evènement
d'évènement (avec exemple)
onclick Clic de la souris sur l'élément sur l'élément
Double-clic de la souris sur l'élément sur
ondblclick
l'élément
Frapper (appuyer puis relâcher) une touche de
onkeypress
clavier sur l'élément
Appuyer (sans relâcher) sur une touche de
onkeydown
clavier sur l'élément
onmouseover Faire entrer le curseur sur l'élément
onsubmit Envoi d'un formulaire
input Taper un caractère dans un champ de texte
Sélectionner le contenu d'un champ de texte
select
(input,textarea, etc.)
4.1 Réponse à un clic sur un élément en HTML
• Il s'agit de l'interaction la plus simple. Un élément avec l'attribut onclick déclenche une fonction
javaScript
• Dans l’exemple suivant, le clic sur le bouton avec le texte défini par value= "Ouvrir une fenêtre
alerte", déclenche la fonction fenetre() qui a été définie dans les scripts et qui affiche un
message.
• Les évènements 'onclick' peuvent se programmer en HTML ou en JavaScript dans le script lui-
même avec une syntaxe un peu différente : syntaxe onclick.
Voici un premier exemple :
6
<!DOCTYPE html>
<html lang="fr">
<meta charset="utf-8">
<html>
<head>
<title>Les évènements en javaScript : Exemple 6</title>
</head>
<body>
<input type ="button" value="Ouvrir une fenêtre alerte"
onclick="fenetre('Bonjour')"/>
<script>
function fenetre(x)
{
alert(x + ' Madame ou Monsieur');
}
</script>
</body>
4.2 Créer un affichage dans à un endroit de la page au clic
• Dans cet autre exemple, deux boutons, avec l'un on affiche la date et avec l'autre on modifie un
paragraphe.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta
charset="utf-8">
<title>Les évènements en javaScript : Exemple 7</title>
</head>
<body>
<h2> Des boutons </h2>
<h3>1. Un premier bouton qui affiche la date</h3>
<!--un premier bouton-->
<button type="button" onclick="[Link]('demo').innerHTML=
Date()" > Cliquez sur le bouton 1 </button>
<!--La balise id="demo" permet d'identifier un élément de la page-->
<p id="demo">C'est ici</p>
<h3>2. Un autre bouton qui modifie du contenu HTML</h3>
<p> On va modifier le contenu de la balise HTML de paragraphe nommée "ICI"
(grâce à l'identifiant id="ICI"). Il change sous vos yeux.
</p>
<!--La balise id="ICI" permet d'identifier un autre élément de la page-->
<p id="ICI">Ici la balise HTML nommée ICI : On va changer ce texte. </p>
<!--un autre bouton-->
<button type="button" onclick="[Link]('ICI').innerHTML=
'On change' " >
Cliquez sur le bouton 2</button>
</body>
• Dans cet autre exemple, la couleur du fond d'écran change quand on clique sur le bouton.
7
<body>
<input type ="button" value="Changer de couleur"
onclick="ChangementCouleur()"/>
<script>
function ChangementCouleur()
{
const couleur=[Link]; // on charge la couleur
du fond, const pour déclarer variables (avec let) remplace var
alert("Vous m'avez cliqué ! On change de couleur = " + couleur);
if (couleur=='ivory')
{[Link] = 'orange';}
else
{[Link] = 'ivory';}
}
</script>
</body>
4.3. Choix dans une liste déroulante
On procède de la manière suivante :
• On détecte un changement sur l'élément select via la méthode indiquée par l'attribut onchange,
ici la méthode selection().
• Dans la fonction selection(), on cible l'élément select par son identifiant (id="choix").
• Puis on accède au choix effectué à l'aide de [Link].
• Enfin on affiche ici la valeur et le texte de l'option choisie.
<!DOCTYPE html>
<html lang="fr">
<meta charset="utf-8">
<html>
<head>
<title>Les évènements en javaScript : Exemple 9</title>
</head>
<body>
<select id="choix" name="lang" onchange="selection()">
<option value="fr"> Français </option>
<option value="zh"> Chinois </option>
<option value="it"> Italien </option>
</select>
<script>
function selection()
{
const selecteur = [Link]("choix");
const monChoix=selecteur[[Link]];
alert('Vous avez choisi la valeur = ' + [Link] + ' , soit le choix
= ' + [Link]);
}
</script>
</body>
8
4.4. Un petit formulaire
On présente ici comment récupérer une valeur entrée dans une case à l'aide d'un formulaire après
validation d'un bouton.
<body>
<!------------------------------------------------->
<h2> Les évènements en HTML/JavaScript : Un petit formulaire</h2>
<!------------------------------------------------->
Donnez un entier entre 1 et 4, je vais vous le traduire en anglais :
<FORM>
<input type="text" name="Valeur_Reponse" id="Id_Reponse" value="" />
<input type="button" value="Valider" onclick="MaFonction();" />
</FORM>
<!--------On affichera le réslutat ici------------->
<p id='resultat'>S'écrit en anglais :</p>
<!------------------------------------------------->
<script>
function MaFonction()
{
var reponse = [Link]("Id_Reponse").value; // Pour
récupérer la valeur entrée
if (reponse=='1')
{[Link]('resultat').innerHTML= 'one';}
else if (reponse=='2')
{[Link]('resultat').innerHTML= 'two';}
else if (reponse=='3')
{[Link]('resultat').innerHTML= 'three';}
else if (reponse=='4')
{[Link]('resultat').innerHTML= 'four';}
else
{[Link]('resultat').innerHTML= 'Je ne comprends
pas';}
}
</script>
</body>
Exercice 5 :
Concevoir une page avec un Quiz avec 3 questions :
- 1 question Vrai/Faux avec deux boutons ou un QCM ;
- 1 question avec une liste déroulante (QCM) ;
- 1 question ouverte avec un texte ou une valeur à donner.
Vous devez aussi afficher le score final.
Toute amélioration est la bienvenue. Vous nommerez votre fichier : "VotreNom-Javascript-
[Link]" et devez faire figure le lien vers ce fichier sur votre page web.