Lycée Houmet Souk Djerba A.

S 2024/2025

I) Emplacement du code JavaScript:

Il est possible, et même conseillé, 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 dans le fichier hello.js, on écrit :
alert('Hello world!');
Et dans le head de la page html, on trouve :
<script src="hello.js"></script>
II) Syntaxe :
La syntaxe de JavaScript n’est pas compliquée. De manière générale, les instructions doivent
être séparées par un point-virgule que l'on place à la fin de chaque instruction :
<script>
instruction_1;
instruction_2;
instruction_3;
</script>
III) Les Objets
1) Les constantes
La déclaration const permet de créer une constante nommée accessible uniquement en lecture.
La valeur d'une constante ne peut pas être modifiée par des réaffectations. Une constante ne
peut pas être déclarée à nouveau.
Exemple :
const nb = 42; Affichera
nb=55 Error: Assignment to constant variable.
2) Les variables:
Les variables contiennent des données qui peuvent être modifiées lors de l'exécution d'un
programme. On y fait référence par le nom de cette variable.
Un nom de variable doit commencer par une lettre (alphabet ASCII) ou le signe_ et se composer
de lettres, de chiffres et des caractères _ et $ (à l'exclusion du blanc). Le nombre de caractères
n'est pas précisé. Pour rappel Javascript est sensible à la case. Attention donc aux
majuscules et minuscules!
La déclaration de variable Les variables peuvent se déclarer de 3 façons :
 On dit à Javascript que ceci est une variable. La commande qui permet de déclarer une
variable est le mot var.
Par exemple var Numero = 1 ;
 On écrit directement le nom de la variable suivi de la valeur que l'on lui attribue par
exemple : Numero = 1 ;
 Soit avec let permet de déclarer des variables dont la portée est limitée à celle du bloc dans
lequel elles sont déclarées
let x = 1; Affichera
if (x == 1) { 2
let x = 2; 1
alert(x);
}
alert(x);

3èmeSI (STI) 1/8 Professeur: Mr Ben Gaied Hamdi

 Lycée Houmet Souk Djerba A.S 2024/2025

 En JavaScript, il existe 5 types d'objets:

Date String
Array Number
Boolean
NB: Pour la conversion entre les types on utilise String ,Number et Boolean.
 Number () convertit en nombre
 String () convertit en String,
 Boolean () convertit en booléen.
 2 types de données qui ne peuvent pas contenir de valeurs:
null
undefined
 L'opérateur typeof variable renvoie une chaîne qui indique le type de la variable.
Exp : alert(typeof 42) ; // Number.
 isNaN(variable): c’est une fonction booléenne permettant de vérifier si la variable est
numérique ou non ; retourne false si la conversion est possible, True sinon.
3) Les opérateurs prédéfinis:
a) Opérateurs de calcul:
Pour x=11
Signe Nom Signification Exemple Résultat
+ Plus addition x+3 14
- moins soustraction x-3 8
* multiplié par multiplication x*2 22
/ divisé par division x /2 5.5
% modulo reste de la division par x%5 1
= a la valeur affectation x=5 5
b) Opérateurs de comparaison:
Signe Nom Exemple Résultat
== egal de la valeur x==11 true
=== egal valeur et type x===11 true
< inférieur x<11 false
<= inférieur ou égal x<=11 true
> Supérieur x>11 false
>= supérieur ou égal x>=11 true
!= Différent x!=11 false
c) Opérateurs associatifs: pour y=5
Signe Description Exemple Signification Résultat
+= plus égal x += y x=x+y 16
-= moins égal x -= y x=x-y 6
*= multiplié égal x *= y x=x*y 55
/= divisé égal x /= y x=x/y 2.2
d) Opérateurs logiques:
Signe Nom Exemple Signification
&& Et (condition1) && (condition2) condition1 et condition2
|| Ou (condition1) || (condition2) condition1 ou condition2
! non !(condition) Non logique
e) Opérateurs d'incrémentation:
Signe Description Exemple Signification Résultat
x++ Incrémentation (x=x+1) y = x++ 3 puis plus 1 4
x-- décrémentation(x=x-1) y= x-- 3 puis moins 1 2

3èmeSI (STI) 2/8 Professeur: Mr Ben Gaied Hamdi

 Lycée Houmet Souk Djerba A.S 2024/2025

IV) Les entrées-sorties:

L’entrée Les sorties

La méthode prompt () La méthode alert ()
Javascript propose une boite de dialogue, appelée La méthode alert () affiche une boite de dialogue
boite d'invite, qui est composée d'un champ dans laquelle est reproduite la valeur de
comportant une entrée à compléter par l'utilisateur. l'argument qui lui a été fourni.
Cette entrée possède aussi une valeur par défaut. La Cette boite bloque le programme en cours tant
syntaxe est : que l'utilisateur n'aura pas cliqué sur "OK".
Prompt ("texte de la boite d'invite","valeur par Sa syntaxe est :
défaut"); (x=22)
En cliquant sur OK, la méthode renvoie la valeur tapée alert(variable) alert(x)22
par l'utilisateur ou la réponse proposée par défaut. Si alert(variable + "chaîne de caractères");
l'utilisateur clique sur Annuler ou Cancel, la valeur alert(‘’ le résultat =’’+x) ;  le résultat = 22
null est alors renvoyée.

Les sorties
La méthode :
document.write('Message'+Variable)
L'appel de la méthode se fait selon la notation : nom_de_l'objet.nom_de_la_méthode
Pour appeler la méthode write() du document, on notera :document.write(variable );
Exemple:document.write("<H1>cecidu Javascript</H1>");

La sortie
La méthode :
document.getElementById('id').innerHTML='Message';
Permet d’insérer le message dans l’élément dont l’id est passé en argument.

V) Les conditions
Une condition (true ou false) est un test qui permet de vérifier qu'une variable contient bien
une certaine valeur.
L'instruction IF
Dans sa formulation la plus simple, De façon un peut plus évoluée, il y a l'expression
l'expression if se présente comme suit if...else
if (condition) if (condition)
{ {
Une ou plusieurs instructions; instructions1;
…… ….
} }
Ainsi, si la condition est vérifiée, les else
instructions s'exécutent. Si elle ne l'est pas, {
les instructions ne s'exécutent pas et le instructions2;
programme passe à la commande suivant ..
l'accolade de fermeture. }

3èmeSI (STI) 3/8 Professeur: Mr Ben Gaied Hamdi

 Lycée Houmet Souk Djerba A.S 2024/2025

De façon plus complexe, il y a l'expression

if...else if …….else
if (condition 1)
{
instructions1;
….
}
else if(condition 2)
{
instructions2;
..
}
….
….
else if(condition n)
{
instructions2;
..
}
else
{
instructions2;
..
}

L'instruction switch...case
L'instruction switch permet de faire plusieurs tests de valeurs sur le contenu d'une même
variable. Sa syntaxe est la suivante:
switch (Variable)
{
case Valeur1: Liste d'instructions; break;
case Valeur2: case Valeur3: case Valeur4: Liste d'instructions; break;
case ValeurX: Liste d'instructions; break;
default: Liste d'instructions; break;
}

VI) Les boucles :

La structure for La structure do..while:

L'expression for permet d'exécuter un bloc do
d'instructions un certain nombre de fois en {
fonction de la réalisation d'un certain critère. Sa Instructions ;
syntaxe est : ……………
for (valeur initiale ; condition; progression) } While (condition(s))
{
Instructions; NB : la condition d’arrêt est une condition de
……… continuité.
}

3èmeSI (STI) 4/8 Professeur: Mr Ben Gaied Hamdi

Lycée Houmet Souk Djerba A.S 2024/2025

La structure while
L'instruction while permet d'exécuter une instruction
(ou un groupe d'instructions) un certain nombre de
fois.
while (condition vraie)
{
Continuer à faire quelque chose
………………….
}
Aussi longtemps que la condition est vérifiée,
Javascript continue à exécuter les instructions entre
les accolades. Une fois que la condition n'est plus
vérifiée, la boucle est interrompue et on continue le
script.

VII) Les Fonctions :

1) Déclaration des fonctions
Pour déclarer ou définir une fonction, on utilise le mot
(réservé) function.
La syntaxe d'une déclaration de fonction est la suivante :
function nom_de_la_fonction(arguments)
{
... code des instructions ...
[return varaiblerésultat]
}
 Le nom de la fonction suit les mêmes règles que celles
qui régissent le nom de variables (nombre de
caractères indéfini, commencé par une lettre, peuvent
inclure des chiffres...).
 Javascript est sensible à la case. Ainsi la fonction Test()
ne sera pas égale à la fonction test ().
 Tous les noms des fonctions dans un script doivent
être uniques.
 La mention des arguments est facultative mais dans ce
cas les parenthèses doivent rester.
 [return varaiblerésultat] est facultative

2) L'appel d'une fonction

L'appel d'une fonction se fait par le nom de la fonction (paramètres effectifs).
Exemple
Verif_chaine(ch);

3èmeSI (STI) 5/8 Professeur: Mr Ben Gaied Hamdi

Lycée Houmet Souk Djerba A.S 2024/2025

VIII) Modélisation de pages DHTML (bases)

Le DOM (Document Object Model) est une interface de programmation (ou API, Application
Programming Interface) pour les documents XML et HTML. Via le JavaScript, le DOM permet
d'accéder au code du document ; on va alors pouvoir modifier des éléments du code HTML.
L’objet document est un sous-objet de window. L’objet document possède les méthodes :
 getElementById()
 getElementsByName()
IX) Les formulaires:
a) Contrôle des zones de texte:
 On peut affecter la valeur d'une zone de saisie (champ et zone de texte et champ
password et similaires) à une variable à l'aide de la syntaxe suivante:

NomVariable=document.getElementById('id').value
NB : En inversant l'ordre de cette syntaxe on peut modifier la valeur de la zone

b) Boutons radio:
 Pour vérifier l'état d'un bouton on doit utiliser une expression de type:
NomVariable= document.getElementById('id').checked ;
NB NomVariable est une variable booléenne

 Pour récupérer la valeur d'un bouton radio:

NomVariable= document.getElementById('id').value ;
c) Les cases à cocher:
 Pour vérifier si une case est cochée ou non on utilise:
NomVariable= document.getElementById('id').checked ;
 Pour récupérer la valeur d'une case à cocher on utilise:
NomVariable= document.getElementById('id').value ;
d) Les listes de sélection:
 Pour connaître l’indice de l’option sélectionnée
NomVariable= document.getElementById('id').selectedIndex ;
 Pour récupérer la valeur de l’option sélectionnée on utilise:
NomVariable= document.getElementById('id').value ;

X) Les évènements :
Pour être efficace, il faut qu'à ces événements soient associées les actions prévues par vous. C'est
le rôle des gestionnaires d'événements. La syntaxe est
onévénement="Nom_fonction()"
Dans cette liste, nous allons voir les événements les plus utilisés en Javascript.
click (onClick) : Cet événement est capturé sur un objet quand on clique dessus. Idéal
pour les boutons, images , hyperliens , vidéos.. .
input (oninput) :cet événement fonctionne lors de la saisie dans un champs de texte

3èmeSI (STI) 6/8 Professeur: Mr Ben Gaied Hamdi

 Lycée Houmet Souk Djerba A.S 2024/2025

focus (onFocus) : Quand on active un élément (quand on place le curseur dans un champ
de formulaire, par click ou par tabulation, pour commencer la saisie par exemple).
blur (onBlur) : Quand un élément perd le focus (quitter un champ de formulaire après être
activé par exemple).
load (onLoad) : Quand un élément est chargé par le navigateur. Elle peut être appliquée à
la page entière (balise <body>), dans ce cas l'événement se produira quand tous les
éléments de la page seront chargés.
change (onChange) : Quand l'internaute change le contenu d'un élément (liste de sélection
ou zone de texte par exemple).
submit (onSubmit) : Quand l'internaute clique sur n'importe quel bouton de
type submit présent dans la page (ou dans le formulaire).
mouseover (on mouseover) :Quand le pointeur de la souris survole un élément de la page
mouseout (onmouseout): Quand le pointeur de la souris quitte un élément de la page
keydown (onkeydown) : Lorsqu’une touche du clavier est pressée
keyup (onkeyup) : Lorsqu’une la touche du clavier est relâchée
play (onplay) : Quand la lecture d’un fichier audio ou vidéo commence
pause (onpause) : Quand la lecture d’un fichier audio ou vidéo est mis en pause
XI) La gestion du temps
Pour travailler avec des dates et les manipuler en JavaScript, nous allons utiliser l’objet Date.
L’objet Date() possède nombreuses méthodes qui vont nous permettre d’obtenir ou de définir
une date.
Pour utiliser l’objet Date : NomVariable=new Date(); qui retourne la date et heure courante.
Les méthodes associées à l’objet Date sont :
 new Date(ch) : retourne un objet date à partir d’une chaîne (forme date) passée en argument
 getFullYear() : renvoie l'année sur 4 chiffres ;
 getMonth() : renvoie le mois (0 à 11) ;
 getDate() : renvoie le jour du mois (1 à 31) ;
 getDay() : renvoie le jour de la semaine (0 à 6, la semaine commence le dimanche) ;
 dt.toString() : renvoie une chaine de caractères représentant la date dt
XII) La gestion des Chaînes en JavaScript
Les indices des caractères dans une chaîne commence par 0
Method Description

ch[i] Returns the character at a specified index (i) in a string ch

ch.length Returns the length of a string ch

String.fromCharCode(values) Converts Unicode (ASCII) values to characters

Returns the position of the first found occurrence of a

ch.indexOf(ch1[,p]) specified value ch1 in a string ch from the p position (-1 if not
exist)

Returns the position of the last found occurrence of a specified

ch.lastIndexOf(ch1 [,p])
value ch1 in a string ch from the p position (-1 if not exist)

Searches a string ch1, and returns a new string ch where the

ch.replace(ch1 ,ch2)
first occurrence of the specified values is replaced by ch2

3èmeSI (STI) 7/8 Professeur: Mr Ben Gaied Hamdi

 Lycée Houmet Souk Djerba A.S 2024/2025

Extracts the characters from a string, between the two specified

ch.substring(d,f)
indices (from d to f-1)

ch.toLowerCase() Converts a string to lowercase letters

ch.toString() Returns the value of a String object

ch.toUpperCase() Converts a string to uppercase letters

ch.trim() Removes whitespace from both ends of a string

XIII) Objet mathématique JavaScript
Math.round(x) Renvoie x arrondi à son entier le plus proche

Math.trunc(x) Renvoie la partie entière de x

Math.sqrt(x) Renvoie la racine carrée de x

Math.random() Renvoie un nombre aléatoire entre 0 (inclus) et 1 (exclusif)

Math.abs(x) Renvoie la valeur absolue de x

XIV) Objet Nombre JavaScript
toString() Renvoie une chaîne de caractère représentant l'objet Number.
numObj.toString([base])
exp : var compte = 10;
alert(compte.toString()); // affiche "10"
alert(compte.toString(2)); // affiche "1010" en binaire

parseInt() La fonction analyse une chaîne de caractère fournie en argument et renvoie un

entier exprimé dans une base donnée.
parseInt (string, base);
exp : parseInt("0xF", 16); // renvoie "15"
parseInt("F", 16); // renvoie "15"
parseInt("Coucou", 8); // renvoie "NaN" Ce sont des lettres et pas des chiffres

parseFloat() Permet de transformer une chaîne de caractères en un nombre flottant après

avoir analysée celle-ci Si le premier caractère ne permet pas d'obtenir un
nombre, ce sera la valeur NaN qui sera renvoyée.
parseFloat("3.14");// renvoie 3.14
parseFloat("3.14d'autres caractères non numériques");// renvoie 3.14
parseFloat("FF2");// renvoie NaN
XV) Modification du contenu, des attributs ou des styles des éléments HTML
element.attribut = valeur Change la valeur de l'attribut d'un élément HTML.
Attributs : checked, disabled, readonly, src, muted
element.style.propriété = valeur Change le style d'un élément HTML.
Propriétés: color, background, border, font, width, height.
element.méthode() Effectue une action sur un élément HTML.
Méthode : play(), pause()

3èmeSI (STI) 8/8 Professeur: Mr Ben Gaied Hamdi