Lycée Houmet Souk Jerba A.
S 2022/2023
I) Introduction:
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>
II) 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 body de la page html, on trouve :
<script src="hello.js"></script>
Pour éviter des problèmes de chargement sur les pages, il est conseillé de placer les éléments <script>
juste avant la fermeture de l’élément <body>.
III) 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 deux façons :
Soit de façon explicite. 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 ;
var Prenom = "Mohamed" ;
Soit de façon implicite. On écrit directement le nom de la variable suivi de la valeur que l'on lui
attribue et Javascript s'en accommode. Par exemple :
Numero = 1 ;
Prenom = "Mohamed" ;
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.
En JavaScript, il existe
5 types de données différents qui peuvent contenir des valeurs:
String object
Number function
Boolean
3ème STI (JS) 1 / 10 Professeur: Mr Ben Gaied Hamdi
Lycée Houmet Souk Jerba A.S 2022/2023
Il existe 6 types d'objets:
Object String
Date Number
Array Boolean
2 types de données qui ne peuvent pas contenir de valeurs:
null
undefined
L'opérateur typeof renvoie une chaîne qui indique le type de la variable ou de l’opérande.
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.
1) 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ème STI (JS) 2 / 10 Professeur: Mr Ben Gaied Hamdi
Lycée Houmet Souk Jerba A.S 2022/2023
IV) Les entrées-sorties:
L’entrée La sortie
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("chaîne de caractères");
l'utilisateur clique sur Annuler ou Cancel, la valeur null alert(‘’ le résultat =’ ’) ; le résultat =
est alors renvoyée. alert(variable + "chaîne de caractères");
alert(‘’ le résultat =’’+x) ; le résultat = 22
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ème STI (JS) 3 / 10 Professeur: Mr Ben Gaied Hamdi
Lycée Houmet Souk Jerba A.S 2022/2023
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ème STI (JS) 4 / 10 Professeur: Mr Ben Gaied Hamdi
Lycée Houmet Souk Jerba A.S 2022/2023
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...).
Pour rappel, Javascript est sensible à la case. Ainsi la
fonction Test() ne sera pas égal à 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. C'est d'ailleurs
grâce à ces parenthèses que l'interpréteur Javascript
distingue les variables des fonctions.
[return varaiblerésultat] est facultative
3- L'appel d'une fonction
L'appel d'une fonction se fait par le nom de la fonction (avec les parenthèses).
Soit par exemple nom_de_la_fonction();
Il faudra veiller en toute logique (car l'interpréteur lit votre script de haut vers le bas) que votre
fonction soit bien définie avant d'être appelée.
3ème STI (JS) 5 / 10 Professeur: Mr Ben Gaied Hamdi
Lycée Houmet Souk Jerba A.S 2022/2023
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 plusieurs méthodes dont :
getElementById()
getElementsByName().
IX)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="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
dblClick (onDblClick) : Quand on clique sur un objet deux fois de suite (double clic).
mouseOver (onMouseOver) : Quand on survole un objet avec le curseur de la sourie.
mouseOut (onMouseOut) : Quand on quitte l'objet avec la sourie après l'avoir survolé.
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).
keyDown (onKeyDown) : Quand une touche du clavier est enfoncée.
keyUp (onKeyUp) : Quand une touche du clavier est relâchée.
keyPress (onKeyPress) : Quand une touche du clavier est maintenue enfoncée.
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.
unLoad (onUnload) : Quand la page en cours est fermée ou quittée.
resize (onResize) :Quand l'internaute redimensionne la taille de la fenêtre du navigateur.
select (onSelect) : Quand l'internaute essaie de sélectionner le texte contenu dans l'objet
accueillant l’événement.
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).
mouseDown (onMouseDown) : Quand l’internaute appuie sur n'importe quel bouton de la
souris.
mouseUp (onMouseUP) : Quand le bouton de la souris et relâché.
mouseMove (onMouseMove) : Quand l’internaute fait bouger le curseur de la souris dans la
zone accueillant l'événement.
3ème STI (JS) 6 / 10 Professeur: Mr Ben Gaied Hamdi
Lycée Houmet Souk Jerba A.S 2022/2023
dragStart (onDragStart) : Se produit quand l'internaute commence le déplacement d'un
élément par "glisser-déposer" (Drag & Drop).
dragEnter (onDragEnter) : Se produit quand l'internaute entre dans la zone où sera déposé
l'élément glissé.
dragOver (onDragOver) : Se produit quand l'internaute survole la zone où sera déposé
l'élément glissé (même si le concept est proche de celui de onDragEnter, ils sont des
événements légèrement différents).
drop (onDrop) : Se produit quand l'internaute dépose l'élément glissé dans la zone prévue à
cet effet.
X) 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) à 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 doit0 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
NomVariable= document.getElementById('id').value ;
3ème STI (JS) 7 / 10 Professeur: Mr Ben Gaied Hamdi
Lycée Houmet Souk Jerba A.S 2022/2023
XI)La gestion du temps
Pour travailler avec des dates et les manipuler en JavaScript, nous allons utiliser l’objet natif Date.
Le constructeur Date() possède en effet de nombreuses méthodes qui vont nous permettre
d’obtenir ou de définir une date.
On utilise l'objet Date : NomVariable=new Date();
Huit méthodes sont associées à l’objet Date:
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) ;
getHours() : renvoie l'heure (0 à 23) ;
getMinutes() : renvoie les minutes (0 à 59) ;
getSeconds() : renvoie les secondes (0 à 59) ;
getMilliseconds() : renvoie les millisecondes (0 à 999).
getTime() renvoie le timestamp de la date de votre objet ;
setTime() vous permet de modifier la date de votre objet en passant en unique paramètre un
timestamp.
On choisit un intervalle avant l'exécution d'une fonction avec setTimeout() :
setTimeout(‘myFunction()’, 2000);// myFunction sera exécutée au bout de 2 secondes.
XII) La gestion des Chaînes en JavaScript
Une chaîne JavaScript stocke une série de caractères comme "John Doe".
Une chaîne peut être n'importe quel texte entre guillemets doubles ou simples:
var carName1 = "Volvo XC60";
var carName2 = 'Volvo XC60';
Les index de chaîne sont de base zéro: le premier caractère est en position 0, le second en 1…
Méthodes sur les chaînes
Method Description
length Returns the length of a string
charAt() Returns the character at the specified index (position)
charCodeAt() Returns the Unicode of the character at the specified index
concat() Joins two or more strings, and returns a new joined strings
endsWith() Checks whether a string ends with specified string/characters
fromCharCode() Converts Unicode values to characters
includes() Checks whether a string contains the specified string/characters
indexOf() Returns the position of the first found occurrence of a specified value in a
string (-1 if not exist)
lastIndexOf() Returns the position of the last found occurrence of a specified value in a
string(-1 if not exist)
3ème STI (JS) 8 / 10 Professeur: Mr Ben Gaied Hamdi
Lycée Houmet Souk Jerba A.S 2022/2023
repeat() Returns a new string with a specified number of copies of an existing string
replace() Searches a string for a specified value, or a regular expression, and returns
a new string where the specified values are replaced
replaceAll() Searches a string for a specified value, or a regular expression, and returns
a new string where all specified values are replaced
search() Searches a string for a specified value, or regular expression, and returns
the position of the match
slice() Extracts a part of a string and returns a new string
split() Splits a string into an array of substrings
startsWith() Checks whether a string begins with specified characters
substr() Extracts the characters from a string, beginning at a specified start
position, and through the specified number of character
substring() Extracts the characters from a string, between indiceStart and indiceEnd-1
toLowerCase() Converts a string to lowercase letters
toUpperCase() Converts a string to uppercase letters
toString() Returns the value of a String object
trim() Removes whitespace from both ends of a string
valueOf() Returns the primitive value of a String object
Toutes les méthodes de chaîne renvoient une nouvelle valeur. Ils ne modifient
pas la variable d'origine.
3ème STI (JS) 9 / 10 Professeur: Mr Ben Gaied Hamdi
Lycée Houmet Souk Jerba A.S 2022/2023
XIII) Objet mathématique JavaScript
Les fonctions sur l’objet Math sont :
Math.round (x) Renvoie x arrondi à son entier le plus proche
Math.ceil (x) Renvoie x arrondi à son entier supérieur le plus proche
Math.floor(x) Renvoie x arrondi à son entier inférieur le plus proche
Math.trunc (x) Renvoie la partie entière de x
Math.pow(x,y) renvoie la valeur de x à la puissance de y:
Math.sqrt(x) renvoie la racine carrée de x:
Math.min() peut être utilisé pour trouver la valeur la plus basse dans une liste
d'arguments
Math.max() peut être utilisé pour trouver la valeur la plus élevée dans une liste
d'arguments
renvoie un nombre aléatoire entre 0 (inclus) et 1 (exclusif)
Math.random ()
3ème STI (JS) 10 / 10 Professeur: Mr Ben Gaied Hamdi
