JS PDF
JS PDF
Chapitre 03
Le Langage JS (Java Script)
1. Définition
Java Script est un langage de scripts qui incorporé aux balises Html, permet d'améliorer la
présentation et l'interactivité des pages Web.
Ces scripts vont être gérés et exécutés par le browser lui-même sans devoir faire appel aux
ressources du serveur. Ces instructions seront donc traitées en direct et surtout sans retard
par le navigateur.
Java Script 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
Java Script.
2. La syntaxe JS
- La balise <SCRIPT>
Il faut signaler au browser par une balise, que ce qui suit est un script et que c'est du Java
Script. C'est la balise :
<SCRIPT>.
De même, il faudra informer le browser de la fin du script avec la balise </SCRIPT>.
- Les objets
Java Script divise la page web en objets et vous permettre d'accéder à ces objets, d'en retirer
des informations et de les manipuler.
Pour accéder à un objet, il faudra donner le chemin complet de l'objet en allant du
contenant le plus extérieur à l'objet référencé.
Soit par exemple pour l’exemple 14 que nous avons vu dans le chapitre 1 :
Fenêtre
Document
Formulaire
Radio
1 H. Mansouri
Développement des Applications Web Chapitre 03 : JS
2 H. Mansouri
Développement des Applications Web Chapitre 03 : JS
Le Java Script est sensible à la casse. Ainsi il faudra écrire alert() et non Alert().
3 H. Mansouri
Développement des Applications Web Chapitre 03 : JS
4. Ecrire le code JS
Comme nous avons vu dans le chapitre 2 avec le langage CSS, On peut placer le code JS à
trois endroits différents :
- Dans l’élément HEAD d’une page HTML.
- Dans l’élément BODY d’une page HTML.
- Dans un fichier portant l’extension « .js » séparé.
Bien que cette dernière méthode soit généralement recommandée, parfois vous serez obligé
d’écrire votre code JS dans votre fichier HTML.
- Dans l’élément HEAD
Le premier endroit où l’on peut placer du code JS est dans l’élément HEAD d’un fichier
HTML, il faudra placer le JS à l’intérieur de la balise <SCRIPT>. On placera généralement la
balise <SCRIPT> à la fin de l’élément HEAD.
Exemple 2 :
<HTML>
<HEAD>
<TITLE>Exemple 2</TITLE>
<SCRIPT>
<!--
alert("Soyez les bienvenue");
//-->
</SCRIPT>
</HEAD>
<BODY>
<H3>Code JS dans l’élément HEAD de la page HTML</H3>
</BODY>
</HTML>
4 H. Mansouri
Développement des Applications Web Chapitre 03 : JS
<BODY>
<H3>Code JS dans l’élément HEAD de la page HTML</H3>
<SCRIPT>
<!--
alert("Soyez les bienvenue");
//-->
</SCRIPT>
</BODY>
</HTML>
5 H. Mansouri
Développement des Applications Web Chapitre 03 : JS
6 H. Mansouri
Développement des Applications Web Chapitre 03 : JS
7 H. Mansouri
Développement des Applications Web Chapitre 03 : JS
7. L'expression if
L'expression if se présente en Java Script comme suit :
if (condition true)
{
instructions1;
}
else
{
instructions2;
}
Exemple 7 :
<HTML>
<HEAD>
<TITLE>Exemple 7</TITLE>
</HEAD>
<BODY>
<SCRIPT>
<!--
var heure = 12;
if (heure >= 0 && heure < 12)
{
alert("C'est le matin");
}
else
if (heure == 12)
{
alert("Il est midi pile");
}
else
if (heure > 12 && heure <= 24)
{
alert("C'est le soir");
}
else
{
alert("La valeur entré ne semble pas valide");
}
8 H. Mansouri
Développement des Applications Web Chapitre 03 : JS
//-->
</SCRIPT>
</BODY>
</HTML>
8. L'expression swich
La syntaxe de l'expression swich est comme suit :
swich (variable)
{
case valeur1 :
instructions1;
break;
case valeur2 :
Instructions2;
break;
case valeur3 :
Instructions3;
break;
default :
Instructions4 ;
}
Noter que, le switch ne va pouvoir gérer que l’égalité dans la comparaison et non pas
l’inégalité.
9. Les boucles
- La boucle for
La syntaxe de l'expression for est comme suit :
for (valeur initiale ; condition ; progression)
{
instructions;
}
- La boucle while
La syntaxe de l'expression while est comme suit :
while (condition)
{
instructions;
9 H. Mansouri
Développement des Applications Web Chapitre 03 : JS
}
- La boucle do…while
La syntaxe de l'expression do est comme suit :
do
{
instructions;
}
while (condition)
Exemple 8 :
<HTML>
<HEAD>
<TITLE>Exemple 8</TITLE>
</HEAD>
<BODY>
<SCRIPT>
<!--
// Boucle for
for (var i=0; i<10; i++)
{
alert('i contient la valeur : ' + i);
}
// Boucle while
var x = 0;
while (x < 10)
{
alert('x contient la valeur : ' + x);
x++;
}
// Boucle do … while
var y = 0;
do
{
alert('y contient la valeur : ' + y);
y++;
}
while (y < 10)
//-->
</SCRIPT>
</BODY>
</HTML>
10 H. Mansouri
Développement des Applications Web Chapitre 03 : JS
11 H. Mansouri
Développement des Applications Web Chapitre 03 : JS
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
multiplication(5, 10);
</SCRIPT>
</BODY>
</HTML>
Exemple 10 :
<HTML>
<HEAD>
<TITLE>Exemple 10</TITLE>
<SCRIPT>
<!--
function multiplication(x, y) // Fonction
{
return (x*y);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
alert (multiplication(5, 10));
</SCRIPT>
</BODY>
</HTML>
12 H. Mansouri
Développement des Applications Web Chapitre 03 : JS
Evénement Description
onClik Lorsque l'utilisateur clique sur un bouton, un lien ou tout autre élément
onLoad Lorsque la page est chargée par le browser ou le navigateur
onUnload Lorsque l'utilisateur quitte la page
onMouseOver Lorsque l'utilisateur place le pointeur de la souris sur un élément
onMouseOut Lorsque le pointeur de la souris quitte un lien ou tout autre élément.
onFocus Lorsqu’un élément de formulaire devient la zone d'entrée active
onBlur Lorsqu’un élément de formulaire n'est plus active
onChange Lorsque la valeur d'un champ de formulaire est modifiée
onSelect Lorsque l'utilisateur sélectionne un champ dans un élément de formulaire
onSubmit Lorsque l'utilisateur clique sur le bouton Submit pour envoyer un formulaire
13 H. Mansouri
Développement des Applications Web Chapitre 03 : JS
- onChange et onSelect
L’événement onChange s'apparente à l'événement onBlur mais avec une petite différence.
Non seulement la case du formulaire doit avoir perdu la sélection mais aussi son contenu
doit avoir été modifié par l'utilisateur.
L’événement onSelect se produit lorsque l'utilisateur a sélectionné tout ou partie d'une zone
de texte ou Textarea.
Le tableau suivant représente la liste des objets auxquels correspondent des événements :
Elément Evénement
Fenêtre onLoad, onUnload
Lien hypertexte onClick, onmouseOver, onmouseOut
Elément de texte onBlur, onChange, onFocus, onSelect
Elément de zone de texte onBlur, onChange, onFocus, onSelect
Elément bouton onClick
Case à cocher onClick
Bouton Radio onClick
Liste de sélection Blur, onChange, onFocus
Bouton Submit onClick
Bouton Reset onClick
Formulaire onSubmit
Exemple 11 :
<HTML>
<HEAD>
<TITLE>Exemple 11</TITLE>
<SCRIPT>
<!--
function Bienvenue()
{
alert('Bienvenue à cette page');
}
function Clique()
{
alert('Vous avez bien cliqué ici');
}
function Passer()
{
alert('vous avez passer le poineur ici');
}
function Quitter()
{
14 H. Mansouri
Développement des Applications Web Chapitre 03 : JS
15 H. Mansouri
Développement des Applications Web Chapitre 03 : JS
16 H. Mansouri
Développement des Applications Web Chapitre 03 : JS
<TITLE>Exemple 13</TITLE>
<SCRIPT>
<!--
function Confirmer(form1)
{
if (form1.choix[0].checked)
{
alert("Vous avez choisi la proposition " + form1.choix[0].value);
}
if (form1.choix[1].checked)
{
alert("Vous avez choisi la proposition " + form1.choix[1].value);
}
if (form1.choix[2].checked)
{
alert("Vous avez choisi la proposition " + form1.choix[2].value);
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<H3>Entrez votre choix :</H3>
<FORM Name="form1">
<INPUT Type="radio" Name="choix" VALUE="1">Choix numéro 1<BR>
<INPUT Type="radio" Name="choix" VALUE="2">Choix numéro 2<BR>
<INPUT Type="radio" Name="choix" VALUE="3">Choix numéro 3<BR>
<INPUT TYPE="button" Name="but" Value="Confirmer votre choix ?"
onClick="Confirmer(form1)">
</FORM>
</BODY>
</HTML>
17 H. Mansouri
Développement des Applications Web Chapitre 03 : JS
Exemple 14 :
<HTML>
<HEAD>
<TITLE>Exemple 14</TITLE>
<SCRIPT>
<!--
function valide(form1)
{
if (form1.check1.checked == true && form1.check2.checked == false &&
form1.check3.checked == true && form1.check4.checked == false)
{
alert("C'est la bonne réponse! ");
}
else
{
alert("Désolé, Veuillez répéter SVP");
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
Entrez votre choix :
<FORM NAME="form1">
<INPUT Type="checkbox " Name="check1" Value="1">Choix numéro 1<BR>
<INPUT Type="checkbox " Name="check2" Value="2">Choix numéro 2<BR>
<INPUT Type="checkbox " Name="check3" Value="3">Choix numéro 3<BR>
<INPUT Type="checkbox " Name="check4" Value="4">Choix numéro 4<BR>
<INPUT Type="button" Name="but" Value="Valider" onClick="valide(form1)">
</FORM>
</BODY>
</HTML>
18 H. Mansouri
Développement des Applications Web Chapitre 03 : JS
On peut avec Java Script récupérer par exemple le choix de l’utilisateur dans une liste
déroulante.
Exemple 15 :
<HTML>
<HEAD>
<TITLE>Exemple 15</TITLE>
< SCRIPT>
<!--
function Elem(form1)
{
alert("L’élément retenue est :" + (form1.list.selectedIndex + 1));
}
//-->
</SCRIPT>
</HEAD>
<BODY>
Entrez votre choix :
<FORM Name="form1">
<SELECT Name="list">
<OPTION Value="1">Elément 1
<OPTION Value="2">Elément 2
<OPTION Value="3">Elément 3
</SELECT>
<INPUT Type="button" Name="b" Value="Récupérer" onClick="Elem(form1)">
</FORM>
</BODY>
</HTML>
19 H. Mansouri