Cours Javacsript (2023) Final

Lycée Midoun A.
S 2023/2024
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-4ème STI 1 / 10 SEDGHIANI.FOUED

Lycée Midoun A.S 2023/2024
 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

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.
La sortie
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>");
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. }

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é.
}

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.

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 la méthode principale :
 getElementById()
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 ;
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="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
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.
unLoad (onUnload) : Quand la page en cours est fermée ou quittée.
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).
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)
localeCompare() Compares two strings in the current locale
match() Searches a string for a match against a regular expression, and returns
the matches
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
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 two specified indices
toLocaleLowerCase() Converts a string to lowercase letters, according to the host's locale
toLocaleUpperCase() Converts a string to uppercase letters, according to the host's locale
toLowerCase() Converts a string to lowercase letters
toString() Returns the value of a String object
toUpperCase() Converts a string to uppercase letters
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.
XIII) Objet mathématique JavaScript

Il existe 4 méthodes courantes pour arrondir un nombre à un entier:
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
Math.random() renvoie un nombre aléatoire entre 0 (inclus) et 1 (exclusif)
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
alert(compte.toString(16)); // affiche "A" en hexadécimal
valueOf() Renvoie la valeur primitive d'un objet donné.

object.valueOf()
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

Cours Javacsript (2023) Final

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours Javacsript (2023) Final

Transféré par

Droits d'auteur :

Formats disponibles

Lycée Midoun A.

3-4ème STI 1 / 10 SEDGHIANI.FOUED

 Il existe 6 types d'objets:

3-4ème STI 2 / 10 SEDGHIANI.FOUED

IV) Les entrées-sorties:

Dans sa formulation la plus simple, De façon un peut plus évoluée, il y a l'expression

3-4ème STI 3 / 10 SEDGHIANI.FOUED

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

La structure for La structure Do..While:

3-4ème STI 4 / 10 SEDGHIANI.FOUED

VII) Les Fonctions :

3- L'appel d'une fonction

3-4ème STI 5 / 10 SEDGHIANI.FOUED

VIII) Modélisation de pages DHTML (bases)

NB NomVariable est une variable booléenne

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

3-4ème STI 6 / 10 SEDGHIANI.FOUED

Méthodes sur les chaînes

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

3-4ème STI 7 / 10 SEDGHIANI.FOUED

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

localeCompare() Compares two strings in the current locale

repeat() Returns a new string with a specified number of copies of an existing

replace() Searches a string for a specified value, or a regular expression, and

search() Searches a string for a specified value, or regular expression, and

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

toLocaleLowerCase() Converts a string to lowercase letters, according to the host's locale

toLocaleUpperCase() Converts a string to uppercase letters, according to the host's locale

toLowerCase() Converts a string to lowercase letters

toString() Returns the value of a String object

toUpperCase() Converts a string to uppercase letters

trim() Removes whitespace from both ends of a string

valueOf() Returns the primitive value of a String object

3-4ème STI 8 / 10 SEDGHIANI.FOUED

XIII) Objet mathématique JavaScript

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.random() renvoie un nombre aléatoire entre 0 (inclus) et 1 (exclusif)

XIV) Objet Nombre JavaScript

valueOf() Renvoie la valeur primitive d'un objet donné.

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

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

3-4ème STI 9 / 10 SEDGHIANI.FOUED

parseFloat("3.14d'autres caractères non numériques");// renvoie 3.14

3-4ème STI 10 / 10 SEDGHIANI.FOUED

Vous aimerez peut-être aussi