LANGAGE JAVASCRIPT

I. INTRODUCTION :
JavaScript est un langage de scripts, permet d'améliorer la présentation et l'interactivité des pages
Web (tel que la communication avec le navigateur).
Il permet de :
✓ Contrôler la saisie dans un formulaire
✓ Permet d'accéder aux objets du navigateur
✓ Exécuter des commandes du côté client (date système, gestion de la fenêtre, gestion de
navigateur) etc…
Avantage :
✓ Rapide en exécution
✓ Faible coût, exécuté par le navigateur : (il ne nécessite pas une installation particulière pour
pouvoir être exécuté)
Inconvénients :
 Code source visible et peut être copié par tout le monde (view source).
[Link] DE BASE DU JAVASCRIPT
1. Pour ajouter un script java, il faut utiliser <script >et pour le terminer </script>.
2. Tout ce qui est écrit entre le symbole "//" et la fin de la ligne, représente un commentaire et il sera
ignoré pendant l’exécution.
3. Il est possible d’inclure des commentaires sur plusieurs lignes avec le code :
/* commentaire sur
Plusieurs lignes*/

III. DOM JAVASCRIPT HTML

Avec le DOM HTML, JavaScript peut accéder et modifier tous les éléments d'un document HTML.
Lorsqu'une page Web est chargée, le navigateur crée un D ocument O bjet M odèle de la page.
Avec le modèle objet, JavaScript obtient toute la puissance dont il a besoin pour créer du HTML
dynamique :

• JavaScript peut modifier tous les éléments HTML de la page

• JavaScript peut modifier tous les attributs HTML de la page

• JavaScript peut changer tous les styles CSS de la page

• JavaScript peut supprimer les éléments et attributs HTML existants

• JavaScript peut ajouter de nouveaux éléments et attributs HTML

• JavaScript peut réagir à tous les événements HTML existants dans la page

• JavaScript peut créer de nouveaux événements HTML dans la page

Lycée Khaireddine Ariana 20021-2022 MME KASSAS GHANDRI Hanen

 LANGAGE JAVASCRIPT

Le modèle HTML DOM est construit comme un arbre d’Objets :

IV. Différents emplacements du code JavaScript

a. Avec un script intégré dans le code HTML :
<script>
// Code JavaScript
</script>
b. Avec un attribut d’évènement
:
<p onClick='alert("4SI1")'> Bonjour </p>

c. Avec un script externe (recommandé) :

Tout d'abord il faut créer un document que l'on appellera [Link] (par exemple) dans lequel on
écrira le code que l'on souhaite intégrer. Ensuite dans la page Web il suffira d'intégrer :

<script src="[Link]"> </script>

Dans ce cas, la balise doit être vide

IV. Les Structures de données en JavaScript :

Il existe 3 façons de déclarer une variable JavaScript :

• À l'aide de var
• À l'aide de let
• À l'aide de const

 Lorsque vous déclarez une nouvelle variable, pensez à privilégier d'abord const, puis let et
enfin var en dernier recours.
 Attention néanmoins, let et const ne sont supportés que par les navigateurs qui sont
compatibles avec l'ES6

Lycée Khaireddine Ariana 20021-2022 MME KASSAS GHANDRI Hanen

 LANGAGE JAVASCRIPT

JavaScript est un langage à typage dynamique. Cela signifie que vous n'avez pas besoin de spécifier
le type de données d'une variable lorsque vous la déclarez. Les types de données sont convertis
automatiquement durant l'exécution du script.

Type Exemples de valeurs typées / Notes

Nombres (number) 42, 3.14159
Booléens (boolean) true / false
Chaînes de caractères (string) "Bac Informatique"
Un mot-clé spécifique pour désigner une valeur informatique nulle (et
null
pas mathématique).
Une variable pour laquelle aucune valeur n'a été assignée sera de type
undefined
undefined.
V. OPERATEURS PREDEFINIS
1. LES OPERATEURS ARITHMETIQUES : SOIT Y = 5
V

Opérateur Description Exemple Y X

+ Addition x=y+2 y=5 x=7
- Soustraction x=y-2 y=5 x=3
* Multiplication x=y*2 y=5 x = 10
/ Division x=y/2 y=5 x = 2.5
% Modulo x=y%2 y=5 x=1
++ Pré-Incrémentation x = ++y y=6 x=6
++ Post-Incrémentation x = y++ y=6 x=5
-- Pré-Décrémentation x = --y y=4 x=4
-- Post-Décrémentation x = y-- y=4 x=5
2. LES OPERATEURS D’AFFECTATION : SOIENT X = 10 ET Y = 5

Opérateur Exemple Identique à X

= x=y x=y x=5
+= x += y x=x+y x = 15
-= x -= y x=x-y x=5
*= x *= y x=x*y x = 50
/= x /= y x=x/y x=2
%= x %= y x=x%y x=0

Lycée Khaireddine Ariana 20021-2022 MME KASSAS GHANDRI Hanen

 LANGAGE JAVASCRIPT

3. LES OPERATEURS RELATIONNELS :

JavaScript Description 4. LES OPERATEURS LOGIQUES :

== égalité
> supérieur JavaScript Description
>= Supérieur ou égale && Et Logique
< Inferieur || Ou logique
<= inferieur ou égale ! NON logique
!= différent

VI. ENTREES / SORTIES EN JAVASCRIPT

→L’opération d’entrée : On peut utiliser soit :
la méthode prompt() de l’objet window,
à l’aide d’objets graphiques du formulaire HTML.
→L’opération de sortie : on peut utiliser soit :
les méthodes alert ou confirm de l’objet window .
les méthode write ou innerHTML de l’objet document.
à l’aide d’objets graphiques du formulaire HTML.

les entrées / sorites à l’aide des objets graphiques des formulaires seront traitées
ultérieurement. (Les formulaires JavaScript)
VII. STRUCTURES DE CONTROLE :

Structure Exemple Description/Note

if (condition) Les parenthèses sont obligatoires.
if (Moy >= 10) { alert("Succès");
{ instructions1 }
} else { Les accolades sont facultatives si
else {
alert("Echec"); le traitement comporte une seule
instructions2
} instruction.
}
var i = x = 0;
while (condition) { while (i<10) {
Permet de calculer la somme des
instructions i++;
entiers de 1 à 10.
} x += i;
}
do {
do{ instructions } N = prompt("N: ") Permet de saisir un entier
while (condition); strictement positif
} while (N <= 0);

Lycée Khaireddine Ariana 20021-2022 MME KASSAS GHANDRI Hanen

 LANGAGE JAVASCRIPT

for ([initialisation]; [condition]; [expression_finale]){ insructions }

initialisation
Une expression (pouvant être une expression d'affectation) ou une déclaration de variable. On
utilise généralement une variable qui agit comme un compteur. Cette expression peut
éventuellement déclarer de nouvelles variables avec le mot-clé var ou let .
condition
Une expression qui est évaluée avant chaque itération de la boucle. Si cette expression est
vérifiée, les instructions sont exécutées.
expression finale
Une expression qui est évaluée à la fin de chaque itération. Cela se produit avant l'évaluation de
l'expression condition. Cette expression est généralement utilisée pour mettre à jour ou
incrémenter le compteur.

var f = 1; // Un script qui calcule la factorielle de 10

for (var i = 1; i <= 10; i++) { f *= i; }
switch (expression) {
case val1: instructions1
switch (val){ case 1: case 2:
[break;]
alert("1 ou 2"); break;
case val2: instructions2
case 3: case 4:
[break;]
alert("3 ou 4"); break;
... default:
default : alert("Valeur par défaut"); }
val_par_defaut
}
VIII. FONCTIONS EN JAVASCRIPT

function nom_fonction(arguments)
{Instructions;
return nom_variable ;}
Arguments : représentent les paramètres en entrée pour la fonction : les paramètres ne sont pas
obligateurs mais les parenthèses oui.
Return nom_vaiable : permet de retourner le résultat de la fonction vers l’objet appelant.
• La définition de la fonction est faite dans la partie entête alors que son appel est fait dans la
partie corps.
• En JavaScript, il existe deux types de fonctions :
1. Les fonctions prédéfinies en JavaScript
2. Les fonctions définies par le programmeur selon les besoins de l’application.

Lycée Khaireddine Ariana 20021-2022 MME KASSAS GHANDRI Hanen

 LANGAGE JAVASCRIPT

IX. GESTION DES EVENEMENTS EN JAVASCRIPT

Evénement Description
CLICK Lorsque l'utilisateur clique sur un bouton, un lien ou tout autre élément.
FOCUS Lorsqu’un élément du formulaire a le focus c à d devient la zone d'entrée active.

CHANGE Lorsque la valeur d'un champ de formulaire est modifiée.

BLUR Se produit lorsque l'élément perd le focus, c'est-à-dire que l'utilisateur clique hors
de cet élément, celui-ci n'est alors plus sélectionné comme étant l'élément actif.
LOAD Se produit lorsque le navigateur de l'utilisateur charge la page en cours
UNLOAD Se produit lorsque le navigateur de l'utilisateur quitte la page en cours
SUBMIT Se produit lorsque l'utilisateur clique sur le bouton de soumission d'un formulaire
(le bouton qui permet d'envoyer le formulaire)
X. Les fonctions globales prédéfinies du JavaScript :
1. L’objet NUMBER

Fonction Param Rôle Exemples

Number() - Convertie le paramètre en un nombre Number("10"); //retourne 10
String() - Convertie le paramètre en une chaîne String(50); //retoune "50"
isNaN("Ali"); // renvoie true
Vérifie si le paramètre n'est pas un
isNaN(" -12.2e+3
nombre.
");//false! isNaN(12); //
isNaN essaie de convertir le paramètre
renvoie false isNaN(""); //
isNaN() - fourni en un nombre. Si cette conversion
renvoie false ! isNaN(" ");//
n'est pas possible, la fonction renvoie
renvoie false !
true.
isNaN(null);// renvoie false
Dans les autres cas, elle renvoie false. !
Analyse la chaîne et renvoie un entier. parseInt("10") // 10
Si le premier caractère ne peut pas être parseInt(" 10 ") // 10
convertie en un entier, elle renvoie parseInt("10 25") // 10
parseInt() Chaîne NaN. Les caractères d'espacement au parseInt("4 SI") //retourne
début et à la fin de la chaîne sont 4 parseInt("Bac 2021") //
ignorés. Seule la première partie qui NaN
peut être convertie sera retournée.
parseFloat("10.25") //10.25
parseFloat() Chaîne Analyse la chaîne et renvoie un réel. parseFloat("Bac 2021")//
NaN

Lycée Khaireddine Ariana 20021-2022 MME KASSAS GHANDRI Hanen

 LANGAGE JAVASCRIPT

2. Les méthodes & les propriétés de l’objet « window » :

Méthodes Rôle Exemples

Affiche un dialogue d'alerte contenant le
alert() alert("Bac SI");
texte spécifié.
prompt() Pour la saisie d'une entrée textuelle. nom = prompt("Votre nom:");
confirm() Renvoie un booléen ok = confirm("Quitter la
page?");
3. Les méthodes & les propriétés de l’objet « String » :

Méthodes Rôle Exemples

var ch = "4SI"; var x =
[Link] (Propriété) Retourne la longueur de ch [Link]; //x=3 var y =
"4SI-Bac2021".length; //y=11
Retourne la première var ch = "Javascript" ; var p1
[dernière] position de ch2 = [Link]('a'); //p1=1 var
[Link](ch2)
dans ch si elle existe, ou -1 p2 = [Link]('a');
[[Link](ch2)]
dans le cas contraire. //p2=3 var p3 =
'4SI'.indexOf("@");//p3= -1
Renvoie une sous-chaîne de n ch = "Bac2021";
caractères à partir de p. Si n sch1 =
[Link](p, n) est omis, substr renvoie le [Link](0,3);//sch1="Bac"
reste des caractères jusqu'à sch2 =
la fin de ch. [Link](3);//sch2="2021"
Renvoie la sous-chaîne entre
ch = "Bac2021";
les indices a et b, b exclu. Si b
sch1 =
est omis, substring
[Link](a, b) [Link](3,5);//sch1="20"
effectuera l'extraction des
sch2 =
caractères jusqu'à la fin de la
[Link](3);//sch2="2021"
chaîne.
Convertie une chaîne en ch = "Bac".toLowerCase()
[Link]()
minuscule //ch="bac"
Convertie une chaîne en ch = "Bac".toUpperCase()
[Link]()
majuscule //ch="BAC"
Renvoie une copie de ch en
ch =
remplaçant la première
[Link](sch, nouv_sch) "Baccalauréat".replace("a",
occurrence de sch par
"A") // ch = "BAccalauréat"
nouv_sch.
La méthode split permet de var ch = "14 Janvier
diviser une chaîne de 2011" var T =
caractères à partir d'un [Link](" ")
[Link](sep) séparateur pour fournir un // T = ["14", "Janvier",
tableau de sous-chaînes. "2011"]
(Utiliser join pour joindre
les éléments d'un tableau Ch2 = [Link]("*")
dans une chaîne) // ch2 = "14*Janvier*2011"]

Lycée Khaireddine Ariana 20021-2022 MME KASSAS GHANDRI Hanen

 LANGAGE JAVASCRIPT

XI. Autres instructions

[Link]='message' ; ➔ Ecrire un message dans la barre d’état du navigateur
[Link](); ➔ Fermer la page Web

XII. FORMULAIRE EN JAVASCRIPT

1. Zone de texte, Mot de passe, Zone de saisie :
<form name="f1">
Nom Prénom:<input type="text"name="nom" id="nom">

Nom & Prénom :

→Pour lire le contenu d'un champ de texte nom on écrit, par exemple :
var Nom = [Link];
//Ou bien
let Nom=[Link]("nom").value ;
alert("votre Nom est:"+Nom);

→Pour affecter une valeur à un champ de texte nom on écrit, par exemple :
[Link]= "Ali";
//Ou bien
[Link]("nom").value="Ali" ;

→Pour mettre le curseur dans la zone de texte :

[Link]();
//Ou bien
[Link]("nom").focus() ;

2. Boutons Radio
<form name="f1">
<label>Civilité:</label>
<input type="radio" name="R" id="C" value="Celibataire"><label>Célibataire</label>
<input type="radio" name="R" id="M" value="marie"><label>Marié(e)</label>

Civilité : Célibataire Marié(e)

→Pour tester si un bouton radio est coché ou non utiliser la propriété : checked
if (document.f1.R[0].checked) {alert('Bouton radio 1 coché.');}
else alert('Bouton radio 2 coché.');

//Ou bien
let liste= [Link]("R");

if(liste[0].checked){alert('Bouton radio 1 coché.');}

else alert('Bouton radio 2 coché.');

Lycée Khaireddine Ariana 20021-2022 MME KASSAS GHANDRI Hanen

 LANGAGE JAVASCRIPT

→Pour déterminer le nombre de boutons radios ayant un même nom utiliser la propriété : length
var nbr= [Link];
alert("le nombre des boutons est"+nbr)
//Ou bien
let liste= [Link]("R");
alert("le nombre des boutons est"+[Link])
→Pour déterminer la valeur d'un bouton radio utiliser la propriété : value
alert(document.f1.R[0].value); // renvoie la valeur associée au premier bouton radio
//Ou bien
let liste= [Link]("R") ;
alert(liste[0].value) ;

3. Cases à cocher
4. <form name="f1">
5. <label>Votre langue préférée:</label>
6. <input type="checkbox"name="A" id="A" value="arabe"><label>Arabe</label>
7. <input type="checkbox"name="F" id="F"value="francais"><label>Français</label>
8. <input type="checkbox"name="An" id="An" value="anglais"><label>Anglais</label>
9. <input type="checkbox"name="E" id="E" value="espanol"><label>Espagnol</label>
10. <input type="button" value="ok" onclick="affichage()">

Votre langue préférée : Arabe Français Anglais Espagnol

→Pour tester si une case à cocher est cochée utiliser la propriété : checked
if ([Link]) {
alert("L'Arabe est la langue du Coran.");
}
//Ou bien
if([Link]("A").checked ){
alert("L'Arabe est la langue du Coran.");

}
→Pour déterminer la valeur associée à une case à cocher utiliser la propriété : value
if ([Link]) {
alert("votre langue est: "+[Link]);
}
//Ou bien
if([Link]("A").checked ){
alert("Votre langue est:"+[Link]("A").value);

Lycée Khaireddine Ariana 20021-2022 MME KASSAS GHANDRI Hanen

 LANGAGE JAVASCRIPT

11. Liste de Choix :

<form name="f1">
<label>Votre Classe:</label>
<select name="Cl" id="Cl">
<option value="4SI">4éme Sciences de l'Informatique </option>
<option value="4Tec">4éme Technique </option>
</select>

4ème Sciences de l'Informatique

Votre classe :

→Pour déterminer l'indice de l'élément sélectionné utiliser : selectedIndex (0 pour le 1èr et -1 pour
aucun)
alert("Vous avez sélectionné l'option num : "+[Link]);
// Ou bien :
alert("Vous avez sélectionné l'option num : "+[Link]("Cl").selectedIndex);

→Pour déterminer la valeur ou le texte associés à un élément d'une liste de choix utiliser : value et
text

var valeur = [Link][index].value; // index : indice de l'élément

//Ou bien
let valeur= [Link]("Cl").options[index].value

//Pour déterminer le texte d'une option dans une liste de choix utiliser : text
var txt = [Link][index].text; // index : indice de l'élément
//Ou bien
let txt= [Link]("Cl").options[index].text

→Pour ajouter un élément à la fin de la liste :

Taille = [Link];
VariableAux = new Option('4 SCientifique','4Sc') ;
[Link][Taille]=VariableAux ;
//Ou bien
liste= [Link]("Cl") ;
[Link][[Link]]= new Option('4 SCientifique','4Sc') ;

→Pour supprimer un élément N° i de la liste :

[Link][indice]= null ;
//Ou bien
document. getElementById("Cl").options[indice]= null ;

Lycée Khaireddine Ariana 20021-2022 MME KASSAS GHANDRI Hanen