Le langage JavaScript

Présenté par: Mr.Ben Harrath Walid

Classe:4ème SI 1

Prof:Mr.Walid Ben Harrath

 1- Les limites du langage HTML

• Le langage HTML présente les limites suivantes :

• Absence des structures de contrôle algorithmiques (conditionnelles et
itératives).
• Un langage sans aucune logique de programmation procédurale (notion
de sous programmes, variables, opérateurs prédéfinies …).
• Absence de prise en charge d’événements, à l’exception de l’événement
clic.
• Aucune communication avec la plate forme d'exécution (date système,
type du navigateur utilisé, etc.)
• Absence de possibilité d'interfaçage avec les bases de données.
• Absence de mécanisme permettant de rendre le code source inaccessible
pour l'utilisateur final (en HTML, pour pouvoir visualiser le code, il suffit
d'utiliser l'option affichage code source du navigateur).

Prof:Mr.Walid Ben Harrath

 2- Les solutions proposées

• Pour pallier à ses limites, deux solutions sont utilisées :

1- L'utilisation des langages côté client (JavaScript ou VbScript)
: ce sont des langages qui permettent d'ajouter des
fonctionnalités omises par le langage HTML, (les
fonctionnalités qui concernent la connexion aux bases de
données et l’accessibilité au code ne sont pas supportées par
ces langages).
• L'avantage majeur de cette solution est le fait de pouvoir
• exécuter le code écrit avec ces langages (JavaScript ou
VbScript) sans avoir besoin d'une installation particulière ; il
suffit d'avoir un navigateur web.
• Le JavaScript est le plus utilisé vu sa compatibilité avec les
différents navigateurs.

Prof:Mr.Walid Ben Harrath

2- L'utilisation des langages côté serveur tels que
ASP, PHP, Cold Fusion. Ces langages permettent
d'avoir les mêmes fonctionnalités que les langages
côté client plus la possibilité de se connecter à des
bases de données et le verrouillage du code source.
• Pour pouvoir tester un code écrit avec un langage
côté serveur, il faut utiliser un serveur
d'hébergement compatible avec la technologie
choisie, tel que Apache, IIS (Internet Information
Server), Netscape Server, Domino, etc.

Prof:Mr.Walid Ben Harrath

 2- Historique du langage JavaScript

• JavaScript a été initialement développé par

Netscape et s'appelait alors LiveScript. Adopté
à la fin de l'année 1995, par la firme Sun (qui a
aussi développé Java), il prit alors son nom de
• JavaScript. JavaScript n'est pas propre au
navigateur de Netscape.
• Microsoft l'a d'ailleurs aussi adopté à partir de
la version 3 du navigateur Internet Explorer.

Prof:Mr.Walid Ben Harrath

II. le formalisme de base du JavaScript

Prof:Mr.Walid Ben Harrath

 1- Les délimiteurs du JavaScript

• Dans la logique du langage HTML, il faut

signaler au navigateur par une balise, que
ce qui suit est un script et que c'est du
JavaScript. C'est la balise
• <SCRIPT LANGUAGE="JavaScript">.
• De même, il faudra informer le navigateur de
la fin du script.
• C'est la balise </SCRIPT>.
Prof:Mr.Walid Ben Harrath
 2- Les commentaires

• Tout ce qui est écrit entre le // et la fin de la

ligne, représente un commentaire et il sera
ignoré pendant l’exécution.
• // commentaire
• Il est aussi possible d'inclure des
commentaires sur plusieurs lignes avec le code
• /* commentaire sur
plusieurs lignes */
Prof:Mr.Walid Ben Harrath
 III. les objets JavaScript :
• 1- Les objets JavaScript et leurs hiérarchies
• Les différentes fonctionnalités offertes par JavaScript sont
accessibles à travers un ensemble d'objets intrinsèques prédéfinis.
Les objets JavaScript peuvent être répartis en deux catégories :
- Les objets d'interface : Ils permettent de gérer les aspects visuels
des différents contrôles graphiques pouvant se trouver au niveau
d'une interface.
• On peut citer comme exemple : l'objet window, document, button,
radio, checkbox…etc.
- Les objets des propriétés et des fonctions prédéfinies : Ils
permettent de fournir les différentes ressources requises pour la
programmation. Ces objets sont : L'objet string, math, date,
navigator, array, et object.

Prof:Mr.Walid Ben Harrath

a- La hiérarchie des objets d'interface
• JavaScript divise une page web en objets. Il permet
d'accéder à ces objets, d'en retirer des informations et
de les manipuler.
• Chaque page Web s'affiche dans une fenêtre, c'est
l'objet fenêtre (window).
• Dans chaque fenêtre, il y a un document HTML, c'est
l'objet document. Autrement dit l'objet window
contient l'objet document, qui lui même peut contenir
d'autres objets. Schématiquement, on peut représenter
une partie de la hiérarchie des objets d'interface
JavaScript comme suit :

Prof:Mr.Walid Ben Harrath

Prof:Mr.Walid Ben Harrath
Prof:Mr.Walid Ben Harrath
 b- Les propriétés des objets
• Les objets JavaScript ont des propriétés qui
permettent de décrire des caractéristiques
rattachées à ces objets.
• Pour accéder à une propriété, il faudra donner le
chemin complet de l'objet en allant du contenant
le plus extérieur de l'objet à l'objet référencé.
• En JavaScript, pour accéder aux propriétés, on
utilise la syntaxe :
• nom_de_l'objet.nom_de_la_propriété
Prof:Mr.Walid Ben Harrath
 Exemple :

• Dans le cas des boutons radio, une des

propriétés est la sélection (checked=TRUE) ou
la non-sélection (checked=FALSE).
• Pour tester la propriété de sélection, on peut
écrire :
• if(window.document.form.radio[0].checked)

Prof:Mr.Walid Ben Harrath

☛L'objet window occupe la première place
dans la hiérarchie, il est repris par défaut par
JavaScript et devient donc facultatif.
☛Pour la syntaxe radio[0], 0 désigne qu'il s'agit
de la première case d'option retrouvée dans
la page Web.

Prof:Mr.Walid Ben Harrath

 c- Les méthodes des objets

• A chaque objet JavaScript, le langage a prévu

un ensemble de méthodes (ou fonctions
dédiées à cet objet) qui lui sont propres.
• Par exemple, à l'objet document, JavaScript a
dédié la méthode "écrire dans le document",
c'est la méthode write().

Prof:Mr.Walid Ben Harrath

 Application1
• 1- Créez un fichier HTML, où vous tapez, entre
<BODY> et </BODY>, le code suivant :
document.write("votre texte");
x=2 ;
document.write(x);
document.write("le contenu de la variable x est : " + x);
document.write("<br><b> le contenu de la variable x est :
</b> ");
document.write("<font color='red'>" + x + "</font>");
Prof:Mr.Walid Ben Harrath
❖ L'opérateur "+" : joue le rôle de concaténation
lorsqu'il est utilisé avec la méthode write.
❖ Il est possible de générer du code HTML lors de
l'utilisation de la méthode write, dans ce cas le
code sera exécuté et non pas affiché.
❖ Dans le cas où le code HTML contient des
guillemets ("), et pour ne pas risquer de les
confondre avec les guillemets (") de write, il sera
judicieux de transformer les " du HTML par
apostrophes (').
Prof:Mr.Walid Ben Harrath
 III. les Variables :

❖ La déclaration de variables
Les variables peuvent se déclarer de deux façons :
• soit de façon explicite. On indique à 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 = "Yassemine"
• 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 = "Yassemine"

Prof:Mr.Walid Ben Harrath

Prof:Mr.Walid Ben Harrath
 ❖ Conversion de types:

♦ La fonction isNaN (is Not a Number) est une

fonction booléenne permettant de vérifier si le
contenu d'une variable donnée en paramètre est
numérique ou non ; elle retourne la valeur FALSE
si la conversion est possible ou la valeur TRUE
dans le cas contraire.
♦ Alert et Prompt sont deux méthodes de l'objet
window permettant respectivement l'affichage
et la saisie dans des boites de dialogue.

Prof:Mr.Walid Ben Harrath

☛ Il existe des fonctions de conversion de type : String et
Number, qui permettent de spécifier explicitement la
conversion à effectuer.
• var a = String(21.34); ⇒ a = "21.34"
• var b = Number ("12.56") ⇒ b = 12.56
☛ la fonction eval : x=eval(variable) évalue une chaîne de
caractère sous forme de valeur numérique. On peut stocker
dans la chaîne des opérations numériques, des opérations
de comparaison, des instructions et même des fonctions.
• Exemple: ch='5 + 10' ; x=eval(ch); ⇒ x=15;
☛ Il est préférable, de précéder toute conversion avec la
fonction number, par un test de validité avec la fonction
IsNaN.

Prof:Mr.Walid Ben Harrath

V. les opérateurs prédéfinis :

Prof:Mr.Walid Ben Harrath

Prof:Mr.Walid Ben Harrath
 Les Entrées/Sorties en JavaScript :
• Syntaxes :
• L'entrée :
nom_variable = prompt("texte de la boite d'invite ","valeur par défaut") ;
• La sortie :
document.write("message" + nom_variable) ;
• Alert("message" + nom_variable) ;

Prof:Mr.Walid Ben Harrath

 VII. Les Structures de contrôle :
• 1- Les structures conditionnelles
• La forme réduite :
if (condition vraie)
{une ou plusieurs instructions;}
• La forme complète :
if (condition vraie)
{instructions1;}
else
{instructions2;}

Prof:Mr.Walid Ben Harrath

 Application 2
• Ecrire un programme qui permet d’afficher le
maximum de 3 entiers

Prof:Mr.Walid Ben Harrath

<HTML>
<HEAD>
<TITLE>la structure IF</TITLE>
</HEAD>
<BODY>
<script language="javascript">
var a= window.prompt("Entrez un premier entier :","");
var b= window.prompt("Entrez un deuxième entier :","");
var c= window.prompt("Entrez un troisième entier :","");
if (Number(a)>Number(b)) m=a; else m=b;
if (Number(c)>Number(m)) m=c;
alert("le maximum de "+a +" , "+b +" et "+c +" est = "+m);
</script>
</BODY>
</HTML>

Prof:Mr.Walid Ben Harrath

 b- La structure switch

switch(expression)
{
case v1:
Bloc1;
break ;
case v2 :
Bloc2;
break;.....
default :
Bloc_n;
break;}

Prof:Mr.Walid Ben Harrath

☛ L'instruction break permet de quitter la
structure switch après l'exécution du bloc
convenable.
☛ Lorsque le résultat de l'expression est
différent de toutes les valeurs envisagées;
C'est le Bloc_n (relatif à default) qui sera
exécuté.
☛ La clause default (Bloc_n) est facultative.

Prof:Mr.Walid Ben Harrath

 Application2
• Dans votre répertoire de travail, créez un
fichier HTML nommé tpjs9.html, qui
comporte un script permettant de lire le
numéro d'un mois et la valeur d'une année
puis de déterminer le nombre de jours de ce
mois ; (sans utiliser la structure conditionnelle
généralisée).

Prof:Mr.Walid Ben Harrath

 Solution
<HTML>
<HEAD>
<TITLE>Switch</TITLE>
</HEAD>
<BODY>
<script language="javascript">
var m= window.prompt("Entrez le numéro du mois :","");
var a= window.prompt("Entrez la valeur d'année ","20")
switch(m) {
case "1":case "3": case "5": case "7": case "8": case "10": case "12": j=31;break;
case "4": case "6": case "9": case "11": j=30; break;
case "2": if (a%4==0) j=29; else j=28;
}
alert("le nombre des jours du mois n° " + m +" est = " +j);
</script>
</BODY>
</HTML>

Prof:Mr.Walid Ben Harrath

 2- Les structures itératives
c- La structure For
for (initialisation ; condition ; progression)
{
instructions;
}
- initialisation : les instructions d'initialisations
nécessaires.
- condition : la condition de continuité (bouclage)
- progression : définit le pas du compteur (pas
forcément +/-1)

Prof:Mr.Walid Ben Harrath

 Application3
• Dans votre répertoire de travail, créez un fichier
HTML nommé tpjs3.html comportant un
script permettant d'afficher tous les nombres
parfaits compris entre 2 et 1000 ; sachant qu'un
nombre N est dit parfait s'il est égal à la somme de
ses diviseurs sauf lui-même.
• Exemple : Pour N=6
• La somme des diviseurs de 6 (sauf 6) est 1+2+3=
6, donc 6 est un nombre parfait.

Prof:Mr.Walid Ben Harrath

 Solution
<HTML>
<HEAD>
<TITLE>La structure FOR</TITLE>
</HEAD>
<BODY>
<script Language="javascript">
for(n=2; n<=1000; n++)
{
s=1;
for(i=2 ;i<=n/2; i++)
if(n%i==0) s+=i;
if (s==n) document.write (n+"<br>");
}
</script>
</BODY>
</HTML>

Prof:Mr.Walid Ben Harrath

 d- La structure do ...While
Syntaxe:
do
{
instructions
} while (condition(s))

Prof:Mr.Walid Ben Harrath

 e. La structure While
Syntaxe:
while (condition(s))
{
instructions
}

Prof:Mr.Walid Ben Harrath

 VIII. Les fonctions en JavaScript :
• La définition de la fonction est faite dans la partie
entête, son appel est fait dans la partie corps
❖ En JavaScript, il existe deux types de fonctions :
♦ Les fonctions prédéfinies en JavaScript; on les appelle
"méthodes". Elles sont associées à un objet bien
particulier comme c'était le cas de la méthode Alert()
avec l'objet window.
♦ Les fonctions déclarées par le programmeur selon les
besoins de l'application.
❖ Pour déclarer ou définir une fonction, on utilise la
syntaxe suivante :

Prof:Mr.Walid Ben Harrath

function nom_de_la_fonction(arguments)
{... code des instructions ...
[ return nomvaraible]
}

Prof:Mr.Walid Ben Harrath

 Infos
☛ 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.
☛ Une variable déclarée dans une fonction par le mot clé var aura une
portée limitée à cette fonction contrairement à une variable
déclarée contextuellement (sans utiliser le mot var), qui aura une
portée globale.
☛ Il est possible de définir des fonctions sans l'utilisation de la clause
return (sans retour) : on retrouve ainsi l'équivalent d'une procédure.
☛ Il est possible de déclarer une fonction dans la partie entête de la
page Web ; C'est-à-dire entre <HEAD> et </ HEAD>.

Prof:Mr.Walid Ben Harrath

 IX. La gestion des événements en
JavaScript :
• Le JavaScript offre la possibilité d'utiliser
plusieurs événements, contrairement au HTML
• qui se contente de l'unique évènement clic.
• La programmation des événements se fait par
l'association à chaque événement une action à
travers la syntaxe suivante :
• < nombalise OnEvénement ="fonction()">
Où OnEvénement représente un attribut, associé
à une balise HTML (nombalise), destiné à la
gestion des événements.

Prof:Mr.Walid Ben Harrath

 1- onclick :
• ❖ Lorsqu'on clique sur le bouton calculer le
cube il s'affichera le cube du nombre
• existant dans la zone de saisie; donc on peut
exècuter la fonction cube à l'aide d'un clic
• (l'événement Onclick)
• ❖ L'événement Onclick peut être utlisé avec
les boutons (<INPUT type="button">),
• et les liens hypertextes (<A href>).
Prof:Mr.Walid Ben Harrath
• Il est possible de programmer l’événement
OnClick avec les objets de types : case à
cocher (<INPUT type = "checkbox">), case
d’options (<INPUT type = "radio">) et zone de
liste (<SELECT>).

Prof:Mr.Walid Ben Harrath

2. OnFocus
• L'événement onFocus survient lorsqu'un champ de
saisie est prêt à recevoir ce que l'utilisateur à
l'intention de taper au clavier (c'est à dire quand la
zone a le focus).
3. OnBlur
• L'événement onBlur a lieu lorsqu'un champ de
formulaire perd le focus. Cela se produit quand
l'utilisateur ayant terminé la saisie qu'il effectuait dans
une case, et clique en dehors du champ ou utilise la
touche "Tab" pour passer à un autre champ.

Prof:Mr.Walid Ben Harrath

• Les événements OnFocus et OnBlur s’utilisent
aussi avec les balises : <INPUT type
="checkbox">, <INPUT type = "RADIO">,
<INPUT type ="button">, <TEXTAREA> et
<SELECT>

Prof:Mr.Walid Ben Harrath

 4. OnChange
• L'évènement OnChange ressemble à
l'événement OnBlur mais avec une petite
différence. Non seulement la zone de texte
doit avoir perdu le focus mais aussi son
contenu doit avoir été modifié par l'utilisateur.

Prof:Mr.Walid Ben Harrath

 5. OnKeyUP

• L'évènement OnKeyUp est déclenché au

cours de la saisi d’une zone de de texte
lorsque l’utilisateur relâche une touche.

Prof:Mr.Walid Ben Harrath

 6. OnLoad et onUnLoad
• L'événement OnLoad survient lorsque la page
a fini de se charger. A l'inverse, OnUnLoad
survient lorsque l'utilisateur quitte la page.
• Les événements onLoad et onUnload sont
utilisés sous forme d'attributs de la balise
<BODY> ou <FRAMESET>.

Prof:Mr.Walid Ben Harrath

 7. OnMouseOver et OnMouseOut

• L'événement OnMouseOver se produit

lorsque le pointeur de la souris passe au
dessus d'un lien ou d'une image sans cliquer.
L'événement OnMouseOut, généralement
associé à un OnMouseOver, se produit
lorsque le pointeur quitte la zone sensible
(lien ou image).

Prof:Mr.Walid Ben Harrath