STI
Classe : 4ème année Sciences de l’informatique
Résumé : Le langage JAVASCRIPT
---------------------------------
Nom du Prof : Mr. Hatem ROMDHANE
S
Le langage JAVASCRIPT
Objectif : Programmer et intégrer des scripts dans une page web
I. Introduction
1. En quoi consiste le développement web
Apparu avec Internet, le développement web fait référence au processus d’écri-
ture d’un site ou d’une page web dans un langage technique. Il s’agit d’une
étape incontournable pour qu’un contenu soit mis en ligne et atteigne ses lec-
teurs.
Le développement web repose sur l’utilisation des langages (HTML, CSS, JavaS-
cript, PHP, …) pour écrire des programmes qui sont ensuite exécutés par les or-
dinateurs. Les instructions sont mises en place sur Internet et sont effectuées
sur des serveurs.
2. Le langage JAVASCRIPT
JavaScript (« JS » en abrégé) est un langage de programmation dynamique com-
plet qui, appliqué à un document HTML, peut fournir une interactivité dyna-
mique sur les sites Web.
C’est un langage de script web côté client qui est adopté universellement par
chaque navigateur Web pour son support.
C'est le navigateur qui interprète les codes HTML, CSS et JavaScript. L'interpré-
tation dépend naturellement du type de navigateur utilisé et de sa version.
JavaScript est un langage orienté objet et événementiel. Le développeur peut
créer des objets sur la page, avec des propriétés et des méthodes et leur asso-
cier des actions en fonction d'événements déclenchés par le visiteur (passage
de souris, clic, saisie clavier, etc.)
1
II. Le formalisme de base de JavaScript
<!DOCTYPE HTML>
<html> <head> Balises HTML
<meta charset ="utf-8" />
<title>Premier code en javascript</title>
<script>
[Link]("Bienvenue à mon site web"); Script en JavaScript
</script>
</head>
<body>
<h1><center>Coder en JavaScript</center></h1> Balises HTML
</body></html>
// Commentaire sur une ligne
/*Commentaire sur plusieurs lignes*/
III. Les différents emplacements d’un code JavaScript
➢ En entête de page <head> … </head>
➢ Dans le corps de la page <body> … </body>
➢ Dans un événement d'un objet de la page
➢ Dans un fichier séparé qui a souvent l'extension « .js »
<!DOCTYPE HTML>
<html><head>
<meta charset ="utf-8" />
<title>emplacements code JavaScript</title>
<script>
function fermer()
{
close();
}
</script>
</head>
<body>
<script>
[Link]("Pour fermer cette fenêtre vous pouvez cliquer : ");
</script>
<a href ="" > </body></html>
2
❖ Fichier [Link]
function fermer()
{
close();
}
❖ Fichier [Link]
<!DOCTYPE HTML>
<html><head><meta charset ="utf-8" />
<title>emplacements code JavaScript</title>
<script src="[Link]"></script>
</head>
<body>
<script>
[Link]("Pour fermer cette fenêtre vous pouvez cliquer : ");
</script>
<a href ="" > </body></html>
IV. Les actions élémentaires simples
1) Les instructions d’affichage
a) La méthode : [Link]
La méthode write() de l’objet document permet d’écrire des expressions HTML ou du
code JavaScript dans un document. Elle est principalement utilisée pour les tests : si
elle est utilisée après le chargement complet d'un document HTML, elle supprimera
tout le HTML existant.
Exemple :
<script>
var d=new Date() ;
[Link]("Nous somme le : "+d);
</script>
b) La méthode : alert()
La méthode alert () affiche une boîte d'alerte avec un message spécifié et un bouton
OK. Une boîte d'alerte est souvent utilisée si vous souhaitez vous assurer que les infor-
mations parviennent à l'utilisateur.
Exemple :
<script>
var a=5 ;
alert("La valeur de a est : "+a);
</script>
3
c) La propriété « innerHTML »
innerHTML, est une propriété de tout élément HTML qui désigne le contenu qui se
trouve entre la balise ouvrante et la balise fermante. On l'utilise pour lire et/ou insérer
dynamiquement un contenu dans une page.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>exemple</title>
<script>
function modifier()
{
var a=[Link]("p1").innerHTML="Texte modifié";
}
</script>
</head>
<body>
<p id="p1">Texte du paragraphe avant modification</p>
<button type="button" le texte</button>
</body>
</html>
2) Les instructions d’entrée
a) La méthode : prompt()
La méthode prompt() de l’objet window affiche une boîte de dialogue, éventuellement
avec un message, qui invite l'utilisateur à saisir un texte.
Syntaxe : objet = [Link]("message", "défaut");
Exemple :
<script>
var a=prompt("Donner votre nom : ","") ;
var b= prompt("Donner votre prénom : ","") ;
alert(" Bonjour : "+b+" "+a) ;
</script>
4
b) Les champs du formulaire
Les entrées/sorties sont possibles à l’aides des objets graphiques du formulaire.
Exemple :
<!DOCTYPE html>
<html><head>
<meta charset="utf-8" />
<title>exemple</title>
<script>
function somme()
{
var a=Number([Link]("n1").value);
var b=Number([Link]("n2").value);
s=a+b;
[Link]("res").value=s ;
}
</script>
</head>
<body>
<form>
<p><label for="n1">Nombre 1 : </label><input type="text" id="n1" /></p>
<p><label for="n2">Nombre 2 : </label><input type="text" id="n2" />< /p>
<p><label for="res">Résultat : </label><input type="text" id="res" readonly /></p>
<button type="button" ></form>
</body></html>
Remarque :
La méthode « getElementById » de l’objet « document » renvoie l'élément qui a
l'attribut ID avec la valeur spécifiée. Cette méthode est l'une des méthodes les plus
courantes du DOM HTML (Document Object Model) et elle est utilisée presque chaque
fois que vous souhaitez manipuler ou obtenir des informations sur un élément de votre
document. Syntaxe : [Link](elementID)
c) L’affectation
L'opération d’affectation consiste à attribuer une valeur à une variable. Elle est repré-
sentée par le symbole « = » en Javascript.
5
V. Les constantes et les variables
1) Les constantes
Il est possible de créer des constantes en lecture seule en utilisant le mot-clé « const ».
Exemple :
<script>
const pi=3.14;
</script>
2) Les variables
Il existe trois types de déclarations de variable en JavaScript.
a) De façon implicite
Décrire directement le nom de la variable suivi de la valeur attribuée.
Exemple :
<script>
age = prompt ("Donnez votre âge : ","");
moy = 15.85 ;
</script>
a) De façon explicite
En utilisant le mot-clé « var ». Cette syntaxe peut être utilisée pour déclarer des
variables locales ou globales selon le contexte d'exécution.
Exemple :
<script>
var age = prompt ("Donnez votre âge : ","");
var moy = 15.85 ;
</script>
En utilisant le mot-clé « let ». Cette syntaxe peut être utilisée pour déclarer une
variable dont la portée sera celle du bloc.
Exemple :
<script>
let age = prompt ("Donnez votre âge : ","");
let moy = 15.85 ;
</script>
Remarque : une variable déclarée sans valeur aura la valeur undefined.
6
3) Les types de données en JavaScript
En JavaScript, il existe 8 types de données :
• Le type « String » : chaîne de caractères
• Le type « Number » : nombre
• Le type « BigInt » : pour stocker des très grandes valeurs
• Le type « boolean » : booléen
• Le type « Null » : Nul / Vide
• Le type « Undefined » : indéfini
• Le type « Symbol » : symbole
• Le type « Object » : objet (Date, Array, …)
Remarque :
• Il ne faut pas déclarer le type de données d’une variable.
• La fonction « typeof() » permet de connaître le type de donnée d’une variable.
4) La portée des variables en JavaScript
Exemple1 :
<!DOCTYPE html>
<html><head>
<meta charset="utf-8" />
<title>portée</title>
</head>
<body>
<p>La Valeur de x est : <span id= "z1"></span></p>
<p>La Valeur de y est : <span id= "z2"></span></p>
<script>
var x=2, y=3;
function tester()
{
x=22;
var y=33;
}
tester();
[Link]("z1").innerHTML=x ;
[Link]("z2").innerHTML=y ;
</Script>
</body>
</html>
7
Les variables déclarées (de façon explicite ou implicite) au début du script, en de-
hors et avant toutes fonctions, sont des variables globales ;
Dans une fonction :
• Une variable déclarée par le mot clé « var » est locale à cette fonction ;
• Une variable déclarée sans le mot clé « var », sa portée sera globale.
Exemple2 :
<!DOCTYPE html>
<html><head>
<meta charset="utf-8" />
<title>portée</title>
</head>
<body>
<p>La Valeur de x est : <span id= "z1"></span></p>
<p>La Valeur de y est : <span id= "z2"></span></p>
<script>
let x =5 ;
if (true)
{
let y =10;
}
[Link]("z1").innerHTML=x ;
[Link]("z2").innerHTML=y ;
</Script>
</body></html>
Remarque : Les éléments du bloc seront locaux pour le code qui contient le bloc
(que ce soit une fonction ou le contexte global).
VI. Les opérateurs prédéfinis
1) Les opérateurs de calcul
Signe Signification
+ Addition
- Soustraction
* Multiplication
/ Division
% Modulo (reste de la division)
= Affectation
8
2) Les opérateurs de comparaison
Signe Signification
== Egal
< Inférieur
<= Inférieur ou égale
> Supérieur
>= Supérieur ou égal
!= Différent
3) Les opérateurs associatifs
Sont des opérateurs qui réalisent un calcul dans lequel une variable intervient des deux
côtés du signe (dans notre exemple x =11 et y = 5)
Signe Nom Signification Exemple Résultat
+= Plus égal x = x+y x +=y 16
-= Moins égal x = x-y x -=y 6
*= Multiplié égal x = x*y x *=y 55
/= Divisé égal x = x/y x /=y 2.2
4) Les opérateurs logiques
Signe Nom Exemple
&& ET (Condition1) && (Condition2)
|| OU (Condition1) || (Condition2)
! NON ! (Condition)
5) Les opérateurs d’incrémentation
Ces opérateurs vont augmenter ou diminuer la valeur d’une variable d’une unité. Dans
notre exemple x vaut initialement 3.
Signe Signification Exemple Résultat
x++, ++x Incrémentation Y=x++ ; Y=3 et x=4
(x++ est le même que x=x+1) Y=++x ; Y=4 et x=4
x--, --x Décrémentation Y=x-- ; Y=3 et x=2
(x-- est le même que x=x-1) Y=--x ; Y=2 et x=2
9
VII. Les méthodes prédéfinies
1) Les méthodes prédéfinies sur l’objet « Number »
Nom Rôle Exemple
Convertit une chaîne ch en un nombre. (Si la Number("10") = 10
Number(ch) conversion n’est pas possible, la fonction re- Number("15.50") = 15.50
tourne NaN). Number("15a") = NaN
Retourne « Vrai » si la valeur de x n’est pas nu- isNaN("ahmed") = true
isNaN(x)
mérique, « Faux » si elle est numérique. isNaN("25") = false
Retourne la conversion d’un nombre x en une x = 123
String(x)
chaîne de caractères. String(x) = "123"
Convertit une chaîne ch en un nombre entier ex- parseInt ("15.33") = 15
parseInt(ch, b) primé dans la base b. (Si la conversion n’est pas parseInt("b1.5") = NaN
possible, la fonction retourne NaN). parseInt("1100", 2) = 12
Convertit une chaîne ch en un nombre décimal. ch= "10.33"
parseFloat(ch) (Si la conversion n’est pas possible, la fonction parseFloat (ch) = 10.33
retourne NaN).
2) Les méthodes prédéfinies sur l’objet « Math »
Nom Rôle Exemple
[Link](x) Retourne la valeur absolue de x. y = [Link](-5) ➔ y = 5
[Link](x) Retourne la racine carrée de x (x≥0). y = [Link](9) ➔ y = 3
Retourne l’arrondi (entier) du réel x passé en y = [Link](3.7)
[Link](x)
paramètre. y=4
Retourne la troncature entière d’un nombre en y = [Link](5.8)
[Link](x)
retirant sa partie décimale. y=5
y = [Link]()
[Link]() Retourne un réel aléatoire dans [0, 1[ (1 exclus)
y = 0.235
10
3) Les méthodes prédéfinies sur l’objet « String »
Nom Rôle Exemple
Permet de concaténer deux ou plusieurs ch="Java"+"script"
+
chaînes. ch = "Javascript"
Est une propriété qui retourne la lon- ch="javascript"
[Link] gueur d’une chaîne de caractères ch ou 0 [Link] = 10
si elle est vide.
Retourne le caractère d’une chaîne ch ch="javascript"
[Link](i)
dont le rang i est donné en paramètre. [Link](3) = "a"
Retourne la position de la 1ère occurrence ch="javascript"
de ch1 dans ch en effectuant la recherche [Link]("a",0) = 1
[Link](ch1,p)
à partir de la position p. (Retourne -1 si
ch1 n’existe pas).
Retourne la position de la dernière occur- ch="javascript"
[Link](ch1,p) rence de ch1dans ch à partir de la posi- [Link]("a",0) = 3
tion p. (Retourne -1 si ch1 n’existe pas).
Permet d’extraire une sous chaîne de la ch="javascript"
[Link](p,nbr) chaîne ch à partir d’une position p et de [Link](4,6) = "script"
longueur nbr.
ch="Bonjour"
Remplace, dans ch, certaines ou toutes
[Link](ch1,ch2) ch=[Link]("jour","soir")
les occurrences de ch1 par ch2.
ch ="Bonsoir"
Convertit tous les caractères de ch en ch="Jour"
[Link]()
majuscule. [Link]() = "JOUR"
Convertit tous les caractères de ch en mi- ch="JOUR"
[Link]()
nuscule. [Link]() = "jour"
Supprime tous les espaces existant au dé- ch=" Java Script "
[Link]()
but et à la fin de ch. [Link]() = "Java Script"
Retourne le code ASCII du caractère à la
[Link](p) "Java".charCodeAt(1) = 97
position p.
Retourne une chaîne formée par la con-
[Link] [Link](98, 97,
caténation des résultats de conversion
(num1, …, numN) 99) = "bac"
des codes passés en paramètre.
11
4) Les méthodes prédéfinies sur l’objet « Date »
Nom Rôle Exemple
Permet de récupérer la date actuelle sous d = Date() ➔ d = "Fri Jan 20
Date() forme littérale (c’est-à-dire sous forme de 2023 14:15:52 GMT+0100
chaînes de caractères). (UTC+01:00)"
d = new Date() ➔ d = Fri Jan
Crée un nouvel objet date avec la date et
new Date() 20 2023 14:15:52 GMT+0100
l'heure actuelles.
(UTC+01:00)
Retourne le jour du mois (de 1 à 31) pour la d = new Date()
[Link]()
date spécifiée. [Link]() ➔ 20
Retourne le numéro du mois (de 0 à 11)
d = new Date()
[Link]() pour la date spécifiée (janvier est 0, février
[Link]() ➔ 0
est 1, …).
Renvoie l'année (quatre chiffres) de la date d = new Date()
[Link]()
spécifiée. [Link]() ➔ 2023
d = new Date("Jan 21 2023")
Modifie le numéro du jour du mois de la
[Link]() [Link](5)
date en cours de manipulation.
d = Sun Jan 15 2023
d = new Date("Jan 21 2022")
Modifie le numéro du mois de la date en
[Link]() [Link](4)
cours de manipulation.
d = Sat May 21 2022
d = new Date("Jan 21 2022")
Modifie la valeur de l’année de la date en
[Link]() [Link](2023)
cours de manipulation.
d = Sat Jan 21 2023
Retourne une chaîne de caractères repré- d = new Date()
[Link]()
sentant la date d. y = [Link]()
VIII. Les structures de contrôle conditionnelles
1) La structure simple
La Forme réduite La Forme complète
if (condition vraie) if (condition vraie)
{ {
Traitement 1 ; Traitement 1 ;
} }
else
{
Traitement 2 ;
}
12
Exemple1 :
<script>
let N = Number(prompt ("Donnez un entier : ",""));
let msg = "impair" ;
if (N%2 == 0)
{
msg = "pair";
}
alert(N+" est "+msg) ;
</script>
Exemple2 :
<script>
let N = Number(prompt ("Donnez un entier : ",""));
if (N%2 == 0)
{
msg = "pair" ;
}
else
{
msg = "impair" ;
}
alert(N+" est "+msg) ;
</script>
2) La structure généralisée
Vocabulaire et syntaxe
if (condition 1)
{Traitement 1 ;}
else if (condition 2)
{Traitement 2 ;}
……………………
else if (condition n-1)
{Traitement n-1 ;}
else
{Traitement n ;}
13
Exemple :
<script>
var c=prompt("Tapez un caractère : ","");
c=[Link]();
if ([Link](0)>="A" && [Link](0)<="Z")
var msg="Une lettre";
else if (([Link](0)>="0" && [Link](0)<="9")
msg="Un chiffre";
else
msg="Un symbole";
alert("Le caractère saisie correspond à "+msg) ;
</script>
3) La structure à choix multiples
Vocabulaire et syntaxe
switch (expression)
{
case v1: bloc 1;
break;
case v2:case v3:case v4: bloc 2;
break;
…………………….
default: bloc n;
break;
}
Exemple :
<script>
var d=new Date().getDay() ; /*récupérer le numéro du jour de la semaine*/
switch (d)
{
case 0: alert("Dimanche"); break;
case 1: alert("Lundi"); break;
case 2: alert("Mardi"); break;
case 3: alert("Mercredi"); break;
case 4: alert("Jeudi"); break;
case 5: alert("Vendredi"); break;
case 6: alert("Samedi"); break;
}
</script>
14
Remarques :
• L’instruction break permet de quitter la structure switch après l’exécution du
bloc convenable ;
• Lorsque le résultat de l’expression est différent de toutes les valeurs envisagées,
c’est le bloc n relatif à default qui sera exécuté ;
• La clause default : bloc n est facultative.
IX. Les structures de contrôle itératives
1) La structure itérative complète (for)
Permet de répéter l’exécution d’un bloc d’instructions un certain nombre de fois connu
d’avance :
for (initialisation ; condition ; progression)
{
instructions ;
}
➢ Initialisation : les instructions d’initialisations nécessaires ;
➢ Condition : la condition de continuité (bouclage) ;
➢ Progression : définit le pas du compteur (pas forcément + ou – 1)
2) La structure do … while
Permet de répéter l’exécution des instructions tant que la condition est vérifiée.
do
{
instructions;
} while (condition(s));
Exemple : lire un nombre compris entre 10 et 100.
<script>
do
{
var n=Number(prompt("donner un nombre",""));
} while (n<10 || n >100 || isNaN(n));
</script>
3) La structure while
while (condition(s))
{
instructions ;
}
15
X. Les fonctions en JavaScript
En JavaScript, il existe deux types de fonctions :
➢ Les fonctions prédéfinies, on les appelle « méthodes ». Elles sont associées à un
objet particulier comme par exemple la méthode write() de l’objet document.
➢ Les fonctions déclarées par le programmeur selon les besoins de l’application. Pour
déclarer une fonction, on utilise la syntaxe suivante :
function nom_de_la_fonction(arguments)
{
Instructions ;
[return nom_variable ;]
}
Activité : Ecrire un code « JavaScript » permettant d’afficher la somme de deux
nombres saisis dans deux zones de textes en cliquant sur le bouton « somme ».
<!DOCTYPE html>
<html><head>
<meta charset='utf-8'>
<title>fonctions</title>
</head>
<body>
<script>
function somme()
{
var n1=[Link]('n1').value;
var n2=[Link]('n2').value;
if(isNaN(n1)||isNaN(n2)||n1==""||n2==""))
alert("vérifiez vos valeurs");
else
{
var s=Number(n1)+Number(n2);
alert("La somme est "+s);
}
}
</script>
16
<form>
<p><label for="n1">Nombre 1 : </label><input type="text" id="n1"/></p>
<p><label for="n2">Nombre 2 : </label><input type="text" id="n2"/></p>
<input type="button" value="Somme" > <input type="reset" value="Annuler"/>
</form>
</body>
</html>
Remarques :
➢ La mention des arguments est facultative mais les parenthèses doivent rester ;
➢ Une variable déclarée dans une fonction par le mot var est locale à cette dernière,
sans le mot var sa portée est globale ;
➢ Il est possible de définir une fonction sans l’utilisation de la clause « return » : on
retrouve ainsi l’équivalent d’une procédure ;
17
