Le Langage Javascript: I-Introduction

Bac Informatique : TIC Tarek Ben Ammar
Le langage
JavaScript
I- Introduction :
Le langage JavaScript est un langage de programmation orienté objet permettant d’écrire
des scripts embarqués à l’intérieure d’un code HTML qui seras interpréter par le
navigateur
Il permet de dynamiser une page web (afficher / masquer un test, défiler des images…)
On dit que le langage JavaScript est un langage Client/side c'est-à-dire le programme est
exécuter par le navigateur.
II- Initialisation :
1. Les délimiteurs
Pour commencer un script il faut signaler HTML par la balise script et l’attribut langage
qui prend pour valeurs JavaScript et le délimiter par la fermeture de cette balise
<script language= « JavaScript »>
Ecriture du code du script
</Script>
2. Les commentaires
Les commentaires sont insérés après :
// Commentaire Si les commentaires sont écrits sur une seule ligne
Ou bien
/* commentaire Si les commentaires sont écrits sur plusieurs lignes
*/
3. Hiérarchie des éléments
JavaScript divise une page web en objets. Il permet d’accéder à ces objets, d’en retirer des
informations et les manipuler.
Exemple : pour accéder à un bouton radio :
window.document.nom_de_formulaire.nom_de_BoutonRadio
window (la page

courante)
document
history document location
les signets les formulaires les images les liens
Elément de
formulaire (les
zones de saisies, les
boutons radios...)
4. Les emplacements du code JavaScript

Il est possible de mettre le code JavaScript dans plusieurs emplacements :
Dans l’entête (entre <Head> et </Head>)
Pour définir des fonctions dés le chargement
Entre l’entête et le corps
Dans le corps
Dans un fichier externe : l’appel de ce code se fait à l’aide de l’attribut src de la
balise <script>
<script language="JavaScript" src=" fichier.js">……..</script>
III- Les variables :
Les identificateurs doivent commencer par une lettre ou un( _ ) suivi par des lettres, des
chiffres suivis par des lettres.
Les variables peuvent se déclarer soit d’une façon explicite (var x=1 ;) soit d’une façon
implicite(x=1 ;)
1. les types
JavaScript reconnaît les types primitifs suivants :
Les nombres : « Number »
Il n’y a pas de distinction entre entier et réels. Exemple : 42 ou 3,356
Les booléens : « Boolean »
Les mots true (pour vrai) et false (pour faux).
Les chaines : « string »
Toute suite de caractère comprise entre guillemets. Exemple : "Je vous aime"
NULL :
Mot spécial qui indique l’absence d’une valeur

2. Visibilité des variables
a. Variable globale :
La variable est visible depuis n’importe quel endroit. Ce sont les variables déclaré au
début du script, en dehors et avant toute fonction
b. Variable locale :
La variable n’est visible que dans la fonction courante. Pour d´déclarer une variable locale
`a une fonction il faut utiliser le mot-clé var
3. Conversion de type :
La fonction isNaN ():
Fonction booléenne permettant de vérifier le contenu d’une variable donnée en paramètre
est numérique ou non. Elle retourne true si la conversion est possible et false sinon
exemple : x=5 ; isNaN(x) retourne false
La fonction eval() :
x=eval(variable)
Elle permet d’évaluer une chaine de caractère sous forme de valeur numérique ; on peut
stocker dans la chaine des opérations numérique, des opérations de comparaison, des
instructions et mêmes des fonctions
exemple : ch=’5+3’; x=eval(ch);x=8
String et Number:
Ces fonctions permettent de spécifier explicitement la conversion à spécifier
expl : x=5 et ch= “ 5 ” ;Number(ch)=5 ;string(x)= “5”
IV- les opérateurs prédéfinis :
Soit x=4 et y=3 dans ce qui suit de cette partie.
1- les opérateurs de calcul :
Signe Opération Exemple Résultat
+ Addition x+y 7
- Soustraction x-y 1
* Multiplication x*y 12
/ Division x/y 1,33
% Modulo x%y 1
= Affectation x=y x=3
2- les opérateurs de comparaison :
Signe Signification Exemple Résultat
== Egalité x==4 true
< Inférieure x<4 False
<= Inférieure ou x<=4 True
égal
> Supérieure x>4 False
>= Supérieure x>=4 True
ou égal
!= différent x !=4 false
3- les opérateurs associatifs :
Signe Nom Exemple
&& ET (condition 1) && (condition 2)
|| OU (condition 1) | | (condition 2)
! NON ! condition
4- les opérateurs logiques :
Signe Signification Résultat Exemple

x++ ou ++x Incrémentation y=x++ x=5
x- - ou --x Décrémentation y=x- - x=3
+= Addition X+=Y X=7
x=x+y
-= Soustraction X-=Y X=1
x=x-y
*= Multiplication X*=Y X=12
x=x*y
/= Division X/=Y X=1.33
x=x/y
%= Reste de la X%=Y X=1
division (modulo) x=x%y
V- les entrées sorties :
1. Entrée
 à l’aide de la méthode prompt de l’objet window
Nom_variable=Window.prompt("message "," valeurs par défaut") ;
2. Sortie
À l’aide de la méthode alert de l’objet window
Window.alert (" message "+nom_variable) ;
À l’aide de la méthode write de l’objet document
document.write (" message "+nom_variable) ;
La méthode confirm() est similaire à la méthode alert(), si ce n'est qu'elle permet un
choix entre "OK" et "Annuler". Lorsque l'utilisateur appuie sur "OK" la méthode renvoie
la valeur true. Elle renvoie false dans le cas contraire...Elle admet comme alert() un seul
paramètre: une chaîne de caractères...
Ok=Window.confirm (" message ") ;
VI- les structures de contrôles
1. les structures conditionnelles
Les structures conditionnelle sont utilisé quand il y a une condition imposer par le
problème (implicitement ou explicitement) deux traitement(ou plus) différentes selon la
validité de l’expression ou de la condition
a. la structure if
Permet de réalise une instruction conditionnelle. Deux formes syntaxiques possibles :
Simple choix :
if (condition)
{instruction-ou-bloc ;} //forme réduite
Double choix :
if (condition)
{instruction-ou-bloc1 ;}
else {instruction-ou-bloc2 ;}
Autre forme de double choix :
(expression) ? instruction1 :instruction2 ;

Si l’expression entre parenthèse est vraie, l’instruction1 est exécutée.
Si l’expression entre parenthèse est fausse, l’instruction2 est exécuté.
b. la structure Switch
C’est un branchement multiple permettant d’exécuter des instructions s´sélectionnées par
la valeur d’une expression. En effet selon la valeur d’une expression on a différent choix
d’instruction.
Switch (variable)
{
Case valeur_1 : instruction-ou-bloc1 ; break ;
Case valeur_2 : instruction-ou-bloc1 ; break ;
Case valeur_n : instruction-ou-bloc1 ; break ;
Default : instruction-ou-bloc1 ; break ;
}
L’instruction break permet d’arrêter l’exécution du reste du code Switch après l’exécution
du bloc convenable. Si la valeur de la variable de Switch n’existe dans aucunes valeurs
des cases, alors c’est l’instruction de default qui sera exécuté (cette instruction est
facultative).
2. les structures itératives
Les structures itératives sont utilisées dans le cas où on a un traitement (une instruction ou
bloc d’instructions) qui doit s’exécuté répétitivement un nombre de fois que ce soit connue
ou non connue.
a. la structure for
C’est une structure itérative complète c'est-à-dire dont en connaît d’avance le nombre
d’itération du fait la connaissance du début et de fin de l’itération
for (initialisation ; condition d’arrêt ; progression)
{
instruction-ou-bloc1 ;
}
Avec :
initialisation : c’est une initialisation du compteur de nombre d’itération
condition d’arrêt : c’est la condition d’arrêt du boucle for c'est-à-dire arrêt du
compteur d’itération
progression : c’est l’incrémentation du compteur définissons le pas du compteur
b. la structure do…while
C’est une structure itérative incomplète c'est-à-dire dont on ne connaît pas le nombre
d’itération en avance. Cette structure ressemble ; en langage pascal ; à la structure repeat
…until.
Do
{
} While (condition)
L’instruction ou le bloc d’instruction s’exécute tant que la condition est vraie. En effet
cette condition est une condition de continuité, contrairement à la structure repeat…until
en pascal.
c. la structure while
C’est une structure répétitive incomplète.
while (condition)
{
}
Tant qu’une certaine condition est vérifiée une instruction ou un bloc est exécuté.
VII- les fonctions en JavaScript
1. Les fonctions prédéfinis en JavaScript
Soit : ch= « bonjour »
fonction Signification Instruction Résultat
charAt(i) Caractère de l’indice i Ch.charAt(3) j
charCodeAt(i) Code ASCII du caractère Ch.charCodeAt(3) 106
correspondant à l’indice i
Ch+= ch1 Concaténation de ch1 à ch. Ch+= " tout le monde" Bonjour tout le monde
indexOf(c) Index de la 1ére occurrence à Ch.indexOf ("ou") 4
partir de l’indice i
indexOf(c,i) Ch.indexOf ("ou",5) 9
lastIndexOf(c) Index de la dernière Ch.lastIndexOf ("ou") 9

occurrence à partir de l’indice
lastIndexOf(c, i) i (recherches arrière) Ch.lastIndexOf ("ou",8) 4
Slice (d, f) Sous chaine qui commence à Ch.slice(3,7) Jour

partir de la position d jusqu'à
la position f
Substr (d, l) Sous chaine de longueur l Ch.substr(3,7) Jour to
commençant par la position d
toUpperCase () Donner la chaine majuscule Ch.toUpperCase () BONJOUR TOUT LE
MONDE
toLowerCase() Donner la chaine minuscule Ch.toLowerCase () bonjour tout le monde
Fontcolor Insérer la chaine encapsuler Ch.fontcolor (‘red’) Bonjour tout le monde
(‘couleur’) dans <font color= « couleur
»>...</font>
Remarque :
Une chaine de caractère commence par la position 0
Dans le cas des méthodes IndexOf et substr ne trouve pas une chaine elles retournent -1.
Si la chaine est vide length retourne 0.
Les méthodes de l’objet Maths :
Méthode Exemple Resultat
Math.abs(x) Y= Math.abs(-5) Y=5
Math.round(x) Y= Math.round(4,2) Y=4
Math. Random() Y= Math. Random() Retourne nombre aléatoire entre
0 et 1
Math.sqrt(x) Y= Math.sqrt(4) Y=2
Math.eval(x) Y= Math.eval(4+3) Y=7
Math.ceil(x) Y= Math.ceil(6.01) Y=7(Retourne l’entier suivant)
Math.floor(x) Y= Math.floor(4.98) Y=4 (Retourne la partie entière d’un
entier)
Math.max(x,y) Y= Math.max(3.31,4.98) Y=4.98
Math.min(x,y) Y= Math.min(3.31,4.98) y=3.31
Math.pow(x,y) Y= Math.pow(2,3) Y=8
Y= Math.pow(9,0.5) y=3
Les méthodes de l’objet Date : dt=new Date();

Méthode description
dt.getDate() Permet de récupérer la valeur du jour du mois
dt.getDay() Permet de récupérer la valeur du jour de la semaine pour la date spécifiée
dt.getFullYear() Permet de récupérer la valeur de l'année sur 4 chiffres pour la date passée en
paramètre
dt.getHours() Permet de récupérer la valeur de l'heure
dt.getMillisecondes() Permet de récupérer le nombre de millisecondes
dt.getMinutes() Permet de récupérer la valeur des minutes
dt.getMonth() Permet de récupérer le numéro du mois
dt.getSeconds() Permet de récupérer le nombre de secondes
dt.getTime() Permet de récupérer le nombre de millisecondes depuis le 1er janvier 1970
dt.getYear() Permet de récupérer la valeur de l'année sur 2 chiffres pour l'objet Date.
2. Structure de fonctions
Se sont des méthodes définis et implanté par l’utilisateur. Une fonction peut avoir des
arguments, qui sont facultative.les variables déclarée au sain de la fonction et qui sont
précédé par le mot clé var ne seront visible que dans cette dernière.
a. Déclaration de fonction
Une fonction est déclarée dans la balise <script> que se soit dans la partie en-tête ou
dans la partie corps
Function nom_de_la_fonction (argument1, argument2…)
{
……
reutrn nom_de_variable ; //la clause return est facultative
}
b. Appel de fonction
La fonction déjà déclarer peut être appelé :
A partir un lien hypertexte
A partir d’un événement (souris ou clavier)
A travers une simple instruction incorporée dans la balise <script>
VIII- La gestion des événements
C’est une interaction avec l’utilisateur via des gestionnaires d’évènement qui sont gérables
que se soit par un clavier ou une souris et on ajoutant de gestionnaires sur des éléments du
document HTML.ces événement feront appel à une fonction définis par le programmeur
1. Evénement souris
OnClick, onDblClick : clique et double clique sur le bouton de la souris
OnMouseDown : appui sur le bouton de la souris
OnMouseUp : relâchement du bouton de la souris
OnMouseOver : arriver sur une zone
OnMouseOut : départ de la zone
2. Evénement clavier
OnKeyPressed : appui sur une touche du clavier
OnKeyDown : touche de clavier enfoncé
OnKeyUp : touche relâchée
3. Pour les formulaires

OnSubmit : soumission du formulaire
form method=" " action=”” name=" " onSubmit="function() " >: pour
déclencher une fonction avant de passer vers une autre page.
OnReset : annulation des données saisie
4. Les zones de saisie de formulaire
OnChange : changement de zone de saisie
5. Pour les documents et les images
OnLoad : chargement d’un document
OnUnload : déchargement d’un document
OnAbort : interruption de chargement
Autre évènement :
Nom Evènement
onBlur  Perte de focus
onFocus Attribution de focus
onError Erreur JS ou de chargement
d’une image
onMouseMove Déplacement de la souris
onSelect Séléction d’un champ de texte
window
• onFocus /onBlur/onLoad/onUnload/onError
•onDblClick/onKey.../onMouseDown/onMouseUp
document
•onDblClick/onKey.../onMouse...
liens
•onLoad/onUnload/onDblClick/onKey...
Images •onAbort/onError/onMouse...
•onDblClick/onKey.../onMouse...
Formulaire
•onFocus/onBlur/onClick/onDbClik
boutons
•onFocus/onBlur/onChange/onKey...
<input>
•onFocus/onBlur/onChange
<select>
IX- Gestion de formulaire en JavaScript

1. Le contrôle zone de texte
a. Affectation et récupération :
Pour affecter ou récupérer une valeur d’une zone de texte :
variable=document.nomformulaire.nomzone.value ;
b. Modification :
Pour modifier une valeur à une zone de texte :
document.nomformulaire.nomzone.value=valeur ;
(S’applique au zone de texte, les texterea et les zones de texte crypté)
2. Les boutons radio
a. vérification d’état :
L’état d’un bouton est vérifié à l’aide de la propriété Checked
variable =document.nomformulaire.nomcase[indice].checked ;
b. Récupération de valeur :
La valeur d’un bouton radio est affecter à l’attribut value, pour le récupérer on procède de
la manière suivante :
variable = document.nomformulaire.nomcase[indice].value ;
c. Récupération de nombre d’option
La propriété length permet de récupérer le nombre d’option dans un groupe de cases
d’option on utilisant la syntaxe suivante :
Valeur = document.nomformulaire.nomcase.length ;
3. Les boutons case à cocher
a. vérification d’état :
l’état d’un bouton est vérifier à l’aide de la propriété Checked
variable = document.nomformulaire.nomcase.checked ;
b. Récupération de valeur :
La valeur d’un bouton radio est affecter à l’attribut value, pour le récupérer on procède de
la manière suivante :
variable = document.nomformulaire.nomcase.value ;
4. Liste de sélection
Les différents éléments d’une liste sont contenus dans un tableau : objet nommé options.
Une liste déroulante ; en JavaScript ; est gérer à travers cette objet.de ce fait pour accéder
à une option de la liste :
document.nomformulaire.nomliste.options[i] ;
a. Propriétés de l’objet options
length : retourne le nombre d’élément d’une liste déroulante
document.nomformulaire.nomliste.options.length ;
selectedIndex : retourne l’indice de l’élément sélectionné dans la liste

Valeur = document.nomformulaire.nomliste.options.selectedIndex ;
b. Propriété des éléments d’une liste
selected : retourne true si l’élément est sélectionner et false sinon
document.nomformulaire.nomliste.options[i].selected ;
text : retourne le texte de l’élément sélectionné
document.nomformulaire.nomliste.options[i].text ;
value : retourne la valeur de l’élément sélectionné
document.nomformulaire.nomliste.options[i].value ;
c. Ajout d’option
Pour ajouter une option à une liste déroulante on utilise la syntaxe suivante
Nom_Valeur = new Option(texte,valeur) ;
document.nomformulaire.nomliste.options[i]=Nom_Valeur ;
d. Suppression d’option
Pour supprimer une option d’une liste déroulante on utilise la syntaxe suivante
document.nomformulaire.nomliste.options[i]= Null ;
Résumé de quelques contrôles appliqués sur les zones en Javascript

Quelques traitements sur les zones textes
La zone texte « T1 » ne doit pas être vide La zone texte « T1 » doit contenir 10 caractères
If (f.T1.value==““){ If (f.T1.value.length != 10){
alert(“le champ de saisi ne doit pas être vide“); alert(“le champ de saisi doit contenir 10 caractères
} “);
}
La zone texte « T1 » doit contenir au moins 10 La zone texte « T1 » doit contenir le caractère @
caractères If (f.T1.value.indexOf(“@“)==-1){
If (f.T1.value.length<10){ alert(“le champ de saisi doit contenir le caractère
alert (“le champ de saisi doit contenir au @“);
moins 10 caractères “); }
}
La zone texte « T1 » ne doit pas contenir le La zone texte « T1 » doit être numérique et >=0
caractère @ If ((isNaN(f.T1.value))|| (f.T1.value<0)){
If (f.T1.value.indexOf(“@“) != -1){ alert(“le champ de saisi doit être numériques“);
alert(“le champ de saisi ne doit pas contenir le }
caractère @“);
}
Le premier caractère de la zone texte « T1 » Le premier caractère de la zone texte « T1 »
doit être « A » ou « B » doit être majuscule
If ((f.T1.value.charAt(0) != “A“) && If (f.T1.value.charAt(0).toUpperCase() !=
(f.T1.value.charAt(0) != “B“)){ f.T1.value.charAt(0) ){
alert(“Le premier caractère doit être A ou B “); alert(“Le premier caractère doit être majuscule “);
} }
La zone texte « T1 » doit être numérique La zone texte « T1 » ne doit pas être
If (isNaN(f.T1.value)){ numériques
alert(“le champ de saisi doit être numériques“); If ( !(isNaN(f.T1.value))){
} alert(“le champ de saisi ne doit pas être
numériques“);
}
Le premier caractère de la zone texte « T1 » Le premier caractère de la zone texte « T1 » doit
doit être minuscule être un chiffre
If (f.T1.value.charAt(0).toLowerCase() != If (isNaN(f.T1.value.charAt(0) )){
f.T1.value.charAt(0) ){ alert(“Le premier caractère doit être un chiffre“);
alert(“Le premier caractère doit être minuscule“); }
}
ne doit pas être un chiffre être une lettre majuscule (A .. Z)
If ( !(isNaN(f.T1.value.charAt(0)))){ If ((f.T1.value.charAt(0) <“A“) ||
alert(“Le premier caractère ne doit pas être un (f.T1.value.charAt(0) >“Z“) ){
chiffre“); alert(“Le premier caractère doit être une lettre
} majuscule (A..Z)“);
}
doit être une lettre minuscule (a..z) être une lettre voyelle
If ((f.T1.value.charAt(0) <“a“) || ch=”AEIUYO”;
(f.T1.value.charAt(0) >“z“) ){ If(ch.indexOf(
alert(“Le premier caractère doit être une lettre f.T1.value.charAt(0).toUpperCase()) == -1){
minuscule (a..z)“); alert(“Le premier caractère doit être une lettre une
} voyelle“);
}
Le premier caractère de la zone texte « T1 » La zone texte « T1 » doit être formée que par des
doit être une lettre alphabétique lettres alphabétiques
function verif(){
If ((f.T1.value.charAt(0).toUpperCase() <“A“) erreur=false;
|| (f.T1.value.charAt(0).toUpperCase() >“Z“) ){ For(i=0 ;i< f.T1.value.length ;i++){
alert(“Le premier caractère doit être une lettre if ((f.T1.value.charAt(i).toUpperCase()<"A") ||
alphabétique“); (f.T1.value.charAt(i).toUpperCase()>"Z") )
} { erreur =true ;break ; }
}
if (erreur==true)
alert("La zone texte doit être formée que par des
lettres alphabétiques“);
}
Quelques Traitements sur les zones Radio :
Cocher un sexe Afficher le message Femme si on coche le
if( !(f.R1[0].checked) sexe « Femme » et Homme lorsqu’on coche
&& ! (f.R1[1].checked==0)) « Homme »
{ if(f.R1[0].checked)
alert(“il faut cocher un sexe“) {
} alert(“Homme“)
}
else
if(f.R1[1].checked==1){
alert(“Femme“)
}
Quelques Traitements sur les zones case à cocher :
Cocher au moins une matière Afficher le message TIC si on coche la
if((f.C1.checked==0) && (f.C2.checked==0) matière « TIC » , le message ALGO si on
&& coche la matière « Alg » et le message Base
(f.C3.checked==0)) de données si on coche la matière « Base de
{ données » si on coche les trois cases on
alert(“il faut cocher une matière“) affiche « TIC ALGO Base de données »
} Mess=””;
if(f.C1.checked)
{
Mess=Mess+” TIC ”;
}
if(f.C2.checked)
{
Mess=Mess+” ALGO ”;
}
if(f.C3.checked)
{
Mess=Mess+” Base de données ”;
}
alert(Mess)
Quelques Traitements sur les zones liste déroulantes
Sélectionner une option Ajouter le produit clavier avec un prix 6.800
if(f.D1.options.selectedIndex==-1){ nliste=new Option (“Clavier”,6.800);
Alert(“sélectionner une option“); f.D1.options[f.D1.options.length]=nliste;
} supprimer un produit sélectionné
Ou bien indice=f.D1.options.selectedIndex;
if(f.D1.value==””) if (indice==-1){
{ alert("il faut sélectionner un produit");
alert(“sélectionner une option“); }
} else{
f.D1.options[indice]=null;
}
Afficher un produit (nom et prix sélectionner)
indice=f.D1.options.selectedIndex;
if (indice==-1){
alert("il faut sélectionner un produit");
}
else{
Alert(“Produit=”+f.D1.options[indice].text+ “Prix “+ f.D1.options[indice].value) ;
}

Le Langage Javascript: I-Introduction

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

Le Langage Javascript: I-Introduction

Transféré par

Droits d'auteur :

Formats disponibles

Bac Informatique : TIC Tarek Ben Ammar

window (la page

history document location

les signets les formulaires les images les liens

4. Les emplacements du code JavaScript

Mot spécial qui indique l’absence d’une valeur

4- les opérateurs logiques :

Signe Signification Résultat Exemple

(expression) ? instruction1 :instruction2 ;

lastIndexOf(c) Index de la dernière Ch.lastIndexOf ("ou") 9

Slice (d, f) Sous chaine qui commence à Ch.slice(3,7) Jour

Les méthodes de l’objet Date : dt=new Date();

3. Pour les formulaires

IX- Gestion de formulaire en JavaScript

selectedIndex : retourne l’indice de l’élément sélectionné dans la liste

Résumé de quelques contrôles appliqués sur les zones en Javascript

Vous aimerez peut-être aussi