Institut Supérieur du Numérique
Chapitre 4
JavaScript (JS)
Année scolaire 2023/2024
JS
• Le JavaScript (JS) est le langage à balises qui vient compléter le HTML et CSS: il permet de
rendre la page Web interactive (dynamique).
1
• C’est un langage interprété, structuré, Orienté Objet et inspiré essentiellement du langage C.
2
– Il s’écrit directement dans la page HTML ou dans un fichier externe.
– Il permet de gérer les évènements principaux de la souris: déplacements, clicks, ...
– Il permet de programmer les boutons.
JS
❖ Utilisation du JS dans une page web
o Embarquer directement le code JavaScript dans un document HTML à l’intérieur de la balise <script>.
– Si cette balise est placée dans la section head, le code JavaScript sera accessible avant l’affichage de la
page Web.1
– Si cette balise est placée dans la section body, le code JavaScript sera accessible lors de l’affichage de la
page Web.
<script language="javascript"> //ou bien <script type="text/javascript">
alert("Le code JS est à l’intérieur de la balise <script>");
</script>
o Placer le code JavaScript dans un fichier externe de type texte qui doit être liés aux documents HTML où sera
exécuté ce code.
Fichier [Link]
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="[Link]"></script>
</head> Fichier [Link]
<body> alert("Le code JS est dans le fichier externe [Link]");
<h1>Un titre de niveau 1</h1>
</body>
</html>
JS
❖ Exécution du code JS
o Le code JavaScript est appelé par le pseudo protocole JavaScript: comme une valeur de l’attribut href de la
balise <a>.
<a href="javascript:alert('Par
1
le pseudo-protocole
javascript:');"> Cliquer pour exécuter le code Javascript
</a>
o Le code JavaScript est exécuté suite à des événements déclenchés par l’interaction des utilisateurs avec les
documents HTML. Par exemple un clic souris sur les éléments HTML ou lors de leurs survole par le
pointeur de la souris.
<img src="[Link]" avez clique sur l’image');">
JS
❖ Règles générales
o L’insertion des espaces peut s’effectuer n’importe où dans le script, donc n’hésitons pas à les utiliser pour
éclaircir nos écritures.
o Pour rendre plus1 clair et plus compréhensible notre programme, on peut placer des commentaires :
– En utilisant le double slash //: tout ce qui se trouve à droite est commentaire.
– En utilisant /* et */: pour écrire un commentaire sur plusieurs lignes.
o Un nombre à virgule est séparé par un point (.) et non par une virgule (0.5 et non 0,5).
o Javascript est sensible à la casse: le mot Nom est différent de nom et de NOM.
o Une instruction simple est une expression qui se termine avec un point-virgule ; et un bloc d’instructions est
un ensemble d’instructions simples et/ou des blocs d’instructions rassemblées entre une accolade ouvrante et
une accolade fermente.
expression; // Instruction simple
{ // Bloc d’instructions
instruction(s); // une ou plusieurs instructions simples et/ou blocs
}
JS
❖ Déclaration et affectation de variables
o Les variables sont des contenants qui permettent de manipuler facilement des valeurs numériques ou
autres.
– Le mot-clé var permet de déclarer une ou plusieurs variables.
– Après la déclaration
1
de la variable, il est possible de lui affecter une valeur. La déclaration et affectation en
même temps:
var nom, age; //déclaration de plusieurs variables
nom="toto"; //affectation d'une chaine de caractère
age=35; //affectation d'une valeur numérique
var prenom=titi; //déclaration et affectation
– Il n’est pas nécessaire d’indiquer le type de la variable. Il reconnu automatiquement lors de l'affectation.
De ce fait, le type de la variable peut être modifié plusieurs fois.
var v=true; // v est de type boolean par initialisation
v="zéro"; // v change de type après affectation
– Il est intéressant de choisir un nom de variable qui rappelle sa fonction dans le programme. Si cette
fonction fait intervenir plusieurs mots, on essaie de choisir un nom utilisant une contraction de ces mots
en faisant précéder chacun d’eux par une Majuscule ou _.
Exemple: monNom ou mon_nom
JS
❖ Opérateurs et expressions JavaScript.
o Le langage JavaScript utilise les mêmes opérateurs que ceux utilisés par le langage C
(opérateurs arithmétiques, opérateurs de comparaison et opérateurs logiques). Il est de
1
même pour les expressions qui doivent être construites en suivant les mêmes règles
2
syntaxiques que celles du langage C.
Opérateur Effet
Opérateurs arithmétiques
+, *, -, /, %(modulo)
(10%4=2 c'est le reste de la division entière )
<=, >=, >, <, ==, != Opérateurs de comparaison
++, -- Opérateur d'incrémentation et de décrémentation
||, &&, ! Opérateurs logique
=, +=, *=, -=, /=, %= Opérateurs d'affectation (x+=4 est équivalente x=x+4)
JS
❖ Structures conditionnelles en JavaScript.
o En JavaScript, les structure de programmation conditionnelles sont les même qu’en
langage C :
1
o Test simple : if else
2
if (condition)
Instruction(s); // simple ou bloc d’instructions exécuté si condition est vrai
else
Instrction(s); // Facultative exécuté si condition est fausse
o Test multiple : switch
switch (variable) {
case valeur1 : Instructions1; // Instructions1 exécutée si variable==valeur1
…
case valeuri : Instructionsi; // Instructionsi exécutée si variable==valeuri
}
JS
❖ Structures répétitives en JavaScript.
o En JavaScript, les structure de programmation répétitives sont les même qu’en langage
C.
o Boucle dont la condition est testée au début : while
1
while (condition)
2 {
Instruction(s); // simple ou bloc d’instructions exécuté si condition est vrai
}
o Boucle dont la condition est testée à la fin : do
do{
Instruction(s); // simple ou bloc d’instructions exécuté au moins une fois
}
while(condition)
o Généralisation de la boucle while : for
for (initialisation; condition; expression_arithmetique) {
Instruction(s); // simple ou bloc d’instructions
}
JS
❖ Fonctions en JavaScript.
o La déclaration de fonctions en JavaScript se fait par l’utilisation du mot-clé function, du
nom de la fonction et des paramètres de la fonction entre deux parenthèses .
o Le corps d’une fonction est délimité par deux accolades {}. Il contient le code Javascript
1
qui est exécuté à chaque appel de la fonction et éventuellement une instruction return
2
dans le cas ou la fonction retourne une valeur.
function parite(x){
x = Number(x);
function nomFonction(paramètres) { if(x)
// corps de la fonction [Link](x+" est impaire");
else
return (valeur); [Link](x+" est impaire ");
} }
JS
o L’appel de la fonction se fait simplement par son nom. Les paramètres de la fonction
sont séparés par le caractère virgule, et ils sont passés à la fonction par valeur pour les
types primitifs et par adresse pour les objets. Il est de même pour la valeur retournée
1
qui peut être de type simple ou un objet.
2
nomFonction(par1, par2, …) ; Parite(15)
var v=nomFonction(par1, par2, …) ;
JS
❖ L'objet Window.
o L’objet window représente la fenêtre du navigateur. Il possède quelques propriétés de
type simple, comme l’attribut status, et d’autres attributs de type objet comme
navigator, history et document. Il offre quelques méthodes, dont les méthodes
1
d’interaction permettant le dialogue homme/machine.
2
o alert(message) : affiche une boîte de dialogue contenant le message passé en paramètre
et un seul bouton OK permettant de fermer cette boite.
<script language="javascript">
alert("Bienvenu dans ma page Web !");
</script>
JS
❖ L'objet window.
o confirm(message) : affiche une boîte de dialogue contenant le message passé en
paramètre et deux boutons OK et Annuler. En cliquant sur le bouton OK, cette
fonction retourne la valeur logique true et si on clique sur le bouton Annuler la
1
fonction retourne la valeur logique false.
2
<script language="javascript">
confirm("voulez-vous changer la couleur de fond?");
</script>
JS
❖ L'objet window.
o prompt(message) : affiche une boîte de dialogue contenant le message passé en
paramètre, une zone de saisie de texte au clavier et deux boutons Ok et Annuler. Si on
clique sur le bouton OK la valeur entrée au clavier est retournée par cette fonction et si
1
on clique le bouton Annuler la fonction retourne la valeur null.
2
<script language="javascript">
prompt("Saisissez votre texte :", "Texte par défaut");
</script>
L’objet window possède aussi la méthode
open() qui permet de créer dynamiquement
de nouvelles fenêtres et la méthode close()
pour fermer les fenêtres ouvertes.
JS
❖ L'objet document.
o L'objet Document permet de manipuler tous les objets qui sont inclus dans le
documents HTML (images, textes, formulaires…) par leurs noms ou leurs ids.
o Il existe de nombreux méthodes (et attributs) qui s'appliquent sur l'objet document.
1
• write(): permet d'écrire la chaîne de caractères passée en paramètre directement
2
dans le document.
• writeln(): permet d'écrire dans le document en ajoutant un retour à la ligne.
[Link]("Bonjour"); //Affiche "Bonjour" dans la page.
[Link]("Bonjour"); //Affiche "Bonjour" suivi d'un retour à la ligne dans la page.
[Link](v); //Affiche la valeur de la variable v.
• Cet objet possède deux méthodes open() et close(). La première méthode permet
l’ouverture des documents affichés par des fenêtres pour permettre leur
modification dynamique, et la deuxième méthode permet leur fermeture.
JS
❖ Les méthodes de l'objet Document.
o getElementById(): méthode qui retourne un objet HTML à partir de son id
1
<input type="text" id="NOM">
<script type="text/javascript">
2 [Link]("NOM").value="texte par
</script>
o getElementsByName(): méthode qui retourne un tableau d’objets HTML ayant nom
défini dans la propriété name de la balise de l’objet.
<input type="text" name= " nom"> <br>
<input type="text" name="nom" value="><br>
<input type="text" name=" nom" value="><br>
<script language=javascript>
[Link]("toto")[0].value = "toto 0";
[Link]("toto")[1].value = "toto 1";
[Link]("toto")[2].value = "toto 2";
</script>
JS
❖ Propriétés de l'objet document.
o bgcolor: Elle permet de changer dynamiquement la couleur de fond de la page Web.
<a href="javascript:void([Link]=’#339999’)">Fond bleu</a>
1
<a href="javascript:void([Link]=’#66FF99’)">Fond vert</a>
• lastModified: retourne la date de dernière modification.
2
• location: retourne l’url complète de la page.
• title: retourne le type du document dans la balise title.
JS
❖ Propriétés de l'objet document.
o innerHTML: est une propriété qui permet de modifier le contenu d’un paragraphe ou
d’insérer un objet dans la page.
1
<p id="paragraphe">texte texte</p>
<script type="text/javascript"> //ou bien <script language="javascript">
[Link]("paragraphe").innerHTML
2 ="Texte changé";
</script>
//Navigateur affiche : Texte changé
JS
❖ Sous-objet style de l'objet Document.
o Le sous-objet style permet de définir dynamiquement un attribut de style local style sur
la balise concernée.
<span1 id="citation">
Mieux vaut tard que jamais.
</span>
<script
2 language="javascript">
[Link]("citation").[Link]="#888888";
[Link]("citation").[Link]="italic";
</script>
o Les attributs du sous-objets style sont les propriétés que nous avons déjà vu en CSS. Si
la propriété est composée, alors le tiret est enlevé et le caractère immédiatement suivant
est capitalisé; par exemple font-style devient fontStyle.
o La valeur à appliquer à l'attribut est la même que celle déclarée en CSS, juste que cette
fois, il faut la placer entre des guillemets, car elle est vue en Javascript en tant que
chaîne de caractères.
JS
❖ Les événements.
o onClick: Exécute une action lors du clic sur un élément : bouton, champs, ...
<form>
<input type="text" name="champ_texte" value="valeur d’origine">
<input type="button" name="bouton" value="Changer"
1
après clic'">
</form>
2
o onChange: Exécuter une action lorsqu’une option ou un champ est changé.
<form>
<input type="text" name="champ_texte" value="valeur d’origine">
<input type="button" name="bouton" value="Changer"
après clic'">
</form>
o onBlur: L’action est exécutée lorsque l’élément perd le focus par exmple sortir d’une zone de
type "text" dans laquelle on est rentré.
<form>
<input type="text" name="champ_texte" value="valeur d’origine">
<input type="button" name="bouton" value="Changer"
après clic'">
</form>
Exercice:
1. Faire le nécessaire en HTML ,CSS
et JavaScript pour créer la page
suivante:
2. Faire le nécessaire en JavaScript
pour calculer le Prix Totale et le PT-
Remise et afficher une fenêtre qui
contient le message :
Bonjour nom du client vous devez
payer PT-remise MRU comme dans
la page suivant:.
