Cours Javascript

Programmation Web (2 IOT)
Chapitre 3 : JavaScript
2
Objectifs
• Apprendre le langage de script JavaScript

• Créer des fonctions JS et les appeler
• Utiliser un fichier de script externe
• Savoir récupérer les données à partir d’un
formulaire
• Contrôler la saisie des utilisateurs
3
INTRODUCTION
•Qu'est-ce que le Javascript?

Javascript est un langage de scripts qui incorporé auxbalises Html,
permettant d'améliorer la présentation et l'interactivité des pages Web.
•A quoi ressemble un script?
Un script est une portion de code qui vient s'insérerdans une page
HTML. Le code du script n'est toutefois pas visible dans la fenêtre du
navigateur car il est compris entre des balises (ou tags) spécifiques qui
signalent au navigateur qu'il s'agit d'un script écriten langage JavaScript.
Les programmes en JavaScript peuvent être aussi crées dans des
fichiers séparés. Ils ne sont pas compilés comme par exemple les programmes
Java mais interprétés comme code source en temps réelPour. cela les
navigateurs Web sont équipés de logiciels d'interprétation correspondants.
JavaScript est un langage de script introduit par Netscape, adopté par
SUN, et par Microsoft.
• Les balises annonçant un code Javascript sont les suivantes:
<SCRIPT language="Javascript"> <script type="text/JavaScript"
//Placez ici le code de votre script src="JS/Controle.js"> 4
</SCRIPT> </script>
Masquage du script pour les anciens browsers
• Le navigateur n’affiche pas le code Javascript dans sa fenêtre.

• Toutefois, d'anciens navigateurs, créés avant l'arrivée du
Javascript, ne connaissent pas ces balises et donc les ignorent…
• Le code Javascript risque donc de s'afficher sur votre page Web.
• L'astuce consiste donc à ajouter des balises de commenta ires
à l'intérieur même des balises de script.
• Ainsi les anciens navigateurs ignoreront tout simplement
l'intégralité du script, tandis que les navigateurs récents
l'interprèteront (comme il se le doit) comme du Javascript!
<SCRIPT type="text/JavaScript" >


</SCRIPT>
7
A quel emplacement insérer le Javascript dans
votre page HTML?
Il y a plusieurs façons d'inclure du JavaScript dans une page HTML:
• Dans un fichier externe: Il est possible de mettre le code JavaScript dans

un fichier (à partir de Netscape 3.0 uniquement). Le code à insérer est le
suivant: <script type="text/JavaScript" SRC="url/fichier.js"> </script>
Où url/fichier.js correspond au chemin d'accès au fichier contenant le
code JavaScript.
• Grâce aux évènements :On appelle évènement une action de l'utilisateur,
comme le clic d'un des boutons de la souris.
<balise eventHandler="code Javascript à insérer">.
eventHandler représente le nom de l'événement.
• On place le maximum d'éléments du script dans la balised'en-tête (entre
<HEAD> et </HEAD>). Les évènements JavaScript seront quant à eux
placés dans le corps de la page (entre <BODY> et </BODY>) comme
attribut d'une commande HTML...
8
EXEMPLE d’UN CODE JAVASCRIPT
• Ce programme source est embarqué dans une page HTML entre

les balises <SCRIPT> et </SCRIPT>
• Le chargement de la page provoque l’exécution du code JS.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<HTML> <HEAD><TITLE> Introduction au JavaScript </TITLE>

</HEAD> <BODY>
<H1> Table des factorielles </H1>
<script type="text/JavaScript" >
for(i=1, fact=1 ; i<4 ; i++, fact *=i) {
document.write(i + "!= " + fact+ "<BR>");
}
</script >
</BODY>
</HTML>
Chargement
de la page
9
DECLARATION DE VARIABLES
•
Utilité d'une variable
•
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 parle 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).
• Déclaration d'une variable: Les variables peuvent se déclarer de deux façons :
• De façon explicite, en utilisant le mot
var. var Numero = 2
var Prenom = "Mohamed"
• De façon implicite, en écrivant directement le nom de la variable suivi de la
valeur qui lui est attribuée.
Numero = 2
Prenom = "Mohamed"
• La façon dont on déclare la variable aura un grand impact sur la "visibilité" du
code JS. Il est conseillé d'utiliser une déclarationexplicite.
•
Affectation d’une valeur à un identificateur
•
Nombre : entiers signés, réels signés, … Exemple: X=24.5;
•
Booléen : true ou false
‘‘…’’
• Chaînes de caractères: ‘…’ ou 16
Types de données
• Contrairement au langage C ou C++, Il ne faut pas déclarer le type de données d'une

variable.
• Exemple:
<script type="text/JavaScript">

</script>
Le résultat est: Je suis né le 23 septembre 1983

17
Variables globales et variables locales
• Les variables déclarées tout au début du script, en

dehors et avant toutes fonctions, seront toujours
globales, qu'elles soient déclarées avec var ou defaçon
contextuelle. On pourra donc les exploiter partout dans
le script.
• Dans une fonction, une variable déclarée par le motclé
var aura une portée limitée à cette seule fonction.On ne
pourra donc pas l'exploiter ailleurs dans le script. D'où
son nom de locale. Par contre, toujours dans une
fonction, si la variable est déclarée contextuellement
(sans utiliser le mot var), sa portée sera globale.
18
LES OPERATEURS
• Comparaison == != === !== < > <= >=

== != test d’égalité avec conversion detype si nécessaire
=== !== test d’égalité sans conversion de type
• Arithmétique + - */ % ++ --
Attention une division entre deux entiers donne un réel
Javascript ½ =0.5 java, C/C++ ½=0
• Affectations = += -= *= /=
• Logique && (et) || (ou) ! (not)
• Sur chaînes + +=
19
LES OPERATEURS
Dans les exemples suivants , la valeur initiale de x sera toujours égale à 11 et y aura comme valeur 5.
• Opérateurs Mathématiques
• Opérateurs de comparaison
20
LES OPERATEURS
• Opérateurs associatifs
• On appelle ainsi les opérateurs qui réalisent un calcul dans lequel une variable
intervient des deux côtés du signe = (ce sont aussi des opérateurs d'attribution).
• Initialement x= 11 et y=5 (à chaque exemple).
• Les opérateurs logiques

Aussi appelés opérateurs booléens, ces opérateurservents à vérifier deux ou
plusieurs conditions
21
LES OPERATEURS
• Opérateurs d'incrémentation
• Ces opérateurs vont augmenter ou diminuer la valeurde la variable d'une
unité. Ce qui sera fort utile, par exemple, pour mettre en place des boucles.
Dans les exemples x vaut 3.
• Priorité des opérateurs

• Les opérateurs s'effectuent dans l'ordre suivant depriorité (du degré de priorité le
plus faible au degré de priorité le plus élevé).
Dans le cas d'opérateurs de priorité égale, l'évaluation sera effectuée de gauche à droite.
22
LES INSTRUCTIONS
• Identiques java, C/C++

• Conditions
– if(condition){ . . . } else {. . . /*facultatif */}
– switch(expression) {
case value1 : . .. ; break;
...
default : . . . ; break;
}
• Boucles
– for(initialisation; test; incrementation) { . . . }
– while(condition) { . . . }
– do { . . . } while (condition);
• Déroutements
– break : interruption for, case, while ou do/while
– continue : passage à l’itération suivante
• Fonction prédéfinie: eval (‘expression Javascript’) 23
évalue l’expression Javascript passée en paramètre
Structures conditionnelles
Dans sa formulation la plus simple, l'expression if se présente comme suit:
– if (condition vraie)
{
une ou plusieurs instructions;
}
ou encore
– if (condition vraie) {
instructions1;
}
else {
instructions2;
}
• Si la condition est vérifiée (true), le bloc d'instructions 1 s'exécute. Si
elle ne l'est pas (false), le bloc d'instructions 2 s'exécute.
• Dans le cas où il n'y a qu'une instruction, les accolades sont
facultatives.
• Grâce aux opérateurs logiques "et" et "ou", l'expression de test pourra
tester une association de conditions.
• Ecritures concises : (expression) ? instruction a : instruction b
• Si l'expression entre parenthèse est vraie, l'instruction a est exécutée. Si
24
l'expression entre parenthèses retourne faux, c'est l'instruction b qui
est exécutée.
switch(nomVariable){... }
i = parseInt(Math.random() * 10);
var s = 'Bonjour à tous !!!';
document.write('Le nombre choisi est ' + i +' ,alors <br>');
switch (i)
{
case 0 :document.write(s + 'zéro fois'); break; case
1 :document.write(s + 'une fois'); break; case 2
:document.write(s + 'deux fois'); break; case 3
:document.write(s + 'trois fois'); break; case 4
:document.write(s + 'quatre fois'); break; case 5
:document.write(s + 'cinq fois'); break; default
:document.write(s + 'plusieurs fois'); break; }
Le nombre choisi est 2, alors
25
Bonjour à tous !!! deux fois
Structures répétitives: FOR
• L'expression for permet d'exécuter un bloc d'instructions un
certain nombre de fois en fonction de la réalisation d'un
certain critère.
• Sa syntaxe est :
for (valeur initiale ; condition ; progression)
{ instructions;
}
• Exemple :
for (i=0; i<5; i++) {
document.write(i + "<BR>");
}
26
Structures répétitives : while
• L'instruction while permet d'exécuter une instructio (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.
• Exemple: Ce qui donnerait à
compt=1; l'écran :
ligne : 1
while (compt<5) { ligne : 2
document.write ("ligne : " + compt + "<BR>"); ligne : 3
compt++; ligne : 4
} fin de la boucle
document.write("fin de la boucle");
• La variable servant de compteur compt est initialisée à 1. La boucle while démarre
donc avec la valeur 1 qui est inférieure à 5. La condition est vérifiée. On exécute les
instructions des accolades. D'abord, "ligne : 1" est affichée et ensuite le compteur est
incrémenté de 1 et prend donc la valeur 2. La condiont est encore vérifiée. Les
instructions entre les accolades sont exécutées. Etce jusqu'à l'affichage de la ligne 4.
Là, le compteur après l'incrémentation vaut 5. La condition n'étant plus vérifiée, on
continue dans le script et c'est alors fin de boucle qui est affiché.
• Attention ! Avec ce système de boucle, le risque existe (si la condition est toujours 27
vérifiée), de faire boucler indéfiniment. Ce qui àallongue fait planter le browser !
Structures répétitives : do while
• La boucle do... while est toujours exécutée au moins une

fois quelque soit l'état de la condition spécifiée,car cette
dernière n'est évaluée qu'après son activation étant
donné la position de la condition.
do { //Instructions;
} while(Condition);
• Exemple:
/*La boucle do... while s'exécutera jusqu'à ce que l'utilisateur saisisse
le nombre 10 */
var nb = 10;
do {
nbd = prompt('Donnez un nombre');
} while(nb != nbd);
28
L’instruction break
• L'instruction break permet d'interrompre prématurément une boucle.
• Exemple :
compt=1;
while (compt<6) {
if (compt == 4)
break;
document.write ("ligne : " + compt + "<BR>");
compt++;
}
• Le fonctionnement est semblable à l'exemple précédentsauf lorsque le
compteur vaut 4. A ce moment, par le break, on sort de la boucle et "fin
de boucle" est affiché.
• Ce qui donnerait à l'écran :
ligne : 1
ligne : 2
ligne : 3
fin de la boucle
29
L’instruction continue
• L'instruction continue permet de sauter une instruction dans une boucle
et de continuer ensuite le bouclage (sans sortir de celui-ci comme le fait
break).
• Exemple :
compt=1;
while (compt<5) {
if (compt == 3){
compt++;
continue;}
document.write ("ligne : " + compt + "<BR>");
compt++;
}
• Ici, la boucle démarre. Lorsque le compteur vaut 3, par l'instruction
continue, on saute l'instruction document.write (ligne : 3 n'est pas
affichée) et on continue la boucle. Notons qu'on a dû ajouter compt++
avant continue (pour while et do while); pour éviterun bouclage infini et
un plantage du navigateur (compt restant à 3).
• Ce qui fait à l'écran :
ligne : 1
ligne : 2
ligne : 4 30 fin de la boucle
Les fonctions
• Définition
• Une fonction est un groupe de ligne(s) de code de programmation destiné à
exécuter une tâche bien spécifique et que l'on pourra, si besoin est, utiliser
à plusieurs reprises. De plus, l'usage des fonctions améliorera grandement
la lisibilité du script.
En Javascript, il existe deux types de fonctions :
• Les fonctions propres à Javascript : appelées des "méthodes". Elles sont
associées à un objet bien particulier comme le cas de la méthode alert() avec
l'objet window.
• Les fonctions écrites par vous-même pour les besoins devotre script: C'est à
celles-là que nous nous intéressons maintenant.
• Pas de typage des arguments, ni de la valeur de retour
function factorielle(n){
if (n<2) return 1 ;
else return n*factorielle(n-1) ;
}
• Appel : document.write(factorielle(5)); 31
Déclaration d’une fonction
Pour déclarer ou définir une fonction, on utilise lemot (réservé) function.
La syntaxe d'une déclaration de fonction est la suivante :
function nom_de_la_fonction(argf1, argf2, argf3)
{
... code des instructions ...
}
• Le nom de la fonction suit les mêmes règles que cellesqui régissent le nom de
variables. Pour rappel, Javascript est sensible à la case . En outre, 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.
• Le fait de définir une fonction n'entraîne pas l'exécution des commandes qui la
composent. Ce n'est que lors de l'appel de la fonctionque le code de programme est
exécuté.
• Il est plus judicieux de placer toutes les déclarations de fonction dans l'en-tête de la
page entre <HEAD> ... </HEAD>. Vous serez ainsi assuré que vos fonctions
seront déjà prises en compte par l'interpréteur avantqu'elles soient appelées dans le
<BODY>. Mais la meilleure façon de faire reste de les placer dans un fichier JS
externe. 32
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(paramètres effectifs);
nom_de_la_fonction(arge1, arge2, arge3)
• 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.
• Exemple:
Dans la partie Head Dans la partie Body

<script type="text/JavaScript"> <form name="form1">
function message() <input name="btClic" type="button"
{ value="Cliquez ici"
alert('Bonjour à tous !!!'); onClick="message();">
} </form>
</script>
33
Passer une valeur à une fonction
• On peut passer des valeurs ou paramètres aux fonctions

Javascript. La valeur ainsi passée sera utilisée paral fonction. Pour
passer un paramètre à une fonction, on fournit un nom d'une
variable dans la déclaration de la fonction.
• Exemple:
Dans la partie Body

Dans la partie Head
<form name="form2">
Ecrire votre nom:
function message2(t) {
<input type="text" name="txtNom">
<input name="btClic2"
alert('Bonjour ' + t.value);
type="button" value="Cliquez ici"
}
onClick="message2(txtNom);">
</script>
</form>
34
Retour d’une valeur par une fonction
• Pour renvoyer un résultat, il suffit d'écrire le motclé return suivi
de l'expression à renvoyer. Notez qu'il ne faut pas en tourer
l'expression de parenthèses. Précisons que l'instructionreturn est
facultative.
• Exemple :
Dans la partie Head Dans la partie Body
<script <form name="form3">
type="text/JavaScript"> Saisir un nombre:
function carre(tNb) { <input name="txtN" type="text" size="5" >
return tNb.value*tNb.value; <input name="btClic3" type="button" value="Cliquez
} ici"
</script> onClick="javascript: txtR.value=carre(txtN);">
<br>
Le carré de ce nombre est :
<input name="txtR" type="text" size="10"
readonly="true">
</form>
35
Fonction: Variables locales et variables globales
• Avec les fonctions, le bon usage des variables locales et globales prend
toute son importance.
• Une variable déclarée dans une fonction par le motclé var aura une
portée limitée à cette seule fonction. On ne pourradonc pas l'exploiter
ailleurs dans le script. On l'appelle donc variable locale.
function cube(nombre)
{
var cube = nombre*nombre*nombre
}
• Ainsi la variable cube dans cet exemple est une variable locale. Si vous y
faites référence ailleurs dans le script, cette variable sera inconnue pour
l'interpréteur Javascript.
• Si la variable est déclarée contextuellement (sans utiliser le mot var), sa
portée sera globale -- une fois que la fonction aura té exécutée-.
function cube(nombre)
{
cube = nombre*nombre*nombre
}
• La variable cube déclarée contextuellement sera iciune variable globale 36.
Fonction: Variables locales et variables
globales-Exemple
Examen Programmation Web - Niveau 1- 2ESER
Session principale- 08 Janvier 2008
Exercice 3 JavaScript (1 point)

Donner le résultat d’exécution de ce fichier, et expliquer.
Dans l’entête du fichier:
function test()
{
var x=2;
y=5;
document.write(x+'<hr>');
document.write(y+'<hr>');
}
</script>
Dans le corps du fichier:
test();
document.write(y/2+'<hr>');
document.write(x/2+'<hr>');
</script> 37
Présentation des objets
• 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 le second bouton radio:

<form name="form4">
<input name="media" type="radio" value="radio">Radio<br>
<input name="media" type="radio" value="television">Television<br>
<input name="media" type="radio" value="Journal">Journal<br>
</form>
(window).document.write(document.form4.media[1].value);
=> television
• Nous avons mis l'objet window entre parenthèses car comme il
occupe la première place dans la hiérarchie, il estrepris par défaut
par Javascript et devient donc facultatif.
38
Présentation de la méthode write
document.write('votre texte')
document.write('Bonjour à tous !!!');
Utilisation d'une variable

var s = 'Bonjour à tous !!!';
document.write(s);
Utilisation d'une fonction

function afficherBonjour(personne){
var s = 'Bonjour ' + personne;
return s;
}
document.write(afficherBonjour("Mohamed"));
=>Bonjour Mohamed 39
Mise en forme avec la méthode write et les
méthodes JS
Introduction d'une balise dans la méthode write
document.write("<H1>Ceci est du
Javascript</H1>"); document.write("<b>ou
encore...</b>"); document.write("<H1>"+"Et ceci est
également du Javascript"+"</H1>");
1.big()
str="Bonjour";
document.write("<BIG>"+str+"</BIG><br>");
document.write('<BIG>Bonjour</BIG><br>');
document.write(str.big()+"<br>");
document.write("Bonjour".big()+"<br>");
document.write("Bonjour encore plus grand ...".big().big()+"<br>");
2.small()
str="Bonjour";
document.write("<SMALL>"+str+"</SMALL><br>");
document.write('<SMALL>Bonjour</SMALL><br>');
document.write(str.small()+"<br>");
document.write("Bonjour".small()+"<br>");
40
méthodes JS
3.bold()
str="Bonjour";
document.write("<B>"+str+"</B><br>");
document.write("<B>Bonjour</B><br>");
document.write(str.bold()+"<br>");
document.write("Bonjour".bold()+"<br>");
4.italics()
str="Bonjour";
document.write("<I>"+str+"</I><br>");
document.write("<I>Bonjour</I><br>");
document.write(str.italics()+"<br>");
document.write("Bonjour".italics()+"<br>");
5.fontcolor(color)
str1="Bonjour";
str2="blue";
document.write("<FONT COLOR='blue'>" +str1+"</FONT><br>");
document.write("<FONT COLOR='blue'>" +"Bonjour</FONT><br>");
document.write(str1.fontcolor(str2)+"<br>");
document.write(str1.fontcolor("blue")+"<br>");
document.write(str1.fontcolor("#FF3366")+"<br>"); 41
méthodes JS
6.fontsize(x)
str="Bonjour";
x=5;
document.write("<FONT SIZE=5>" + str+" </FONT><br>");
document.write("<FONT SIZE=5>" +"Bonjour</FONT><br>");
document.write(str.fontsize(5)+"<br>");
document.write(str.fontsize(x)+"<br>");
7.strike()
str="Bonjour";
document.write("<STRIKE>"+str +"</STRIKE><br>");
document.write("<STRIKE>Bonjour"
+"</STRIKE><br>"); document.write(str.strike()+"<br>");
document.write("Bonjour".strike()+"<br>");
8.sub()
str="i";
document.write("X<SUB>"+str+"</SUB><br>");
document.write("X<SUB>i" +"</SUB><br>");
document.write("X"+str.sub()+"<br>");
document.write("X"+"i".sub()+"<br>"); 42
méthodes JS
9.sup()
str="i";
document.write("X<SUP>"+str+"</SUP><br>");
document.write("X<SUP>i" +"</SUP><br>");
document.write("X"+str.sup()+"<br>");
document.write("X"+"i".sup()+"<br>");
10. Arrière plan de la page

document.write('<BODY BGCOLOR="#DDFFFF">');
document.write('<BODY background="../images/Ap.gif">');
Différences entre les méthodes write() et writeln()

document.write("Avec la méthode write(), le
résultat est: <br>");
document.write("Ma première ligne");
document.write("Ma seconde ligne");
document.write("<br>");
document.write("Avec la méthode writeln(), le
résultat est ( à condition d\'utiliser la balise
<pre>): <br>");
document.writeln("<pre>Ma première ligne");
document.writeln("Ma seconde ligne </pre>");
document.write('le résultat serait autrement
<br>');
document.writeln("Ma première ligne"); 43 document.writeln("Ma seconde ligne ");

Les instructions de formatage de document :
Affectation des propriétés
1. Couleur d'arrière plan :document.bgColor
2. Couleur d'avant-plan (texte): document.fgColor
3. Couleur d'un hyperlien : document.linkColor
4. Couleur d'un lien actif : document.alinkColor
5. Couleur d'un hyperlien visité :document.vlinkColor
6. Titre du document : document.title
7. Date de la dernière modification : document.lastModified
8. Adresse ou URL de la page : unescape(location.href)
• unescape("string") : Returns the ASCII string for
the specified value.
• scape("string") :Returns the hexadecimal encoding of
an argument in the ISO Latin-1 character set.
Exemple :
document.bgColor= "#F0FFFF";
document.fgColor="#00008B";
document.linkColor="blue";
document.alinkColor="green"; 44 document.vlinkColor="red";
Les instructions de formatage de document :
Affectation des propriétés
document.write("Le titre de ce document est \"" + document.title + "\"<BR>")
document.write("Cette page a été modifiée le " + document.lastModified + "<BR>")
document.write("L'URL de cette page est " + location.href + "<BR>")
document.write("L'URL de cette page est " + unescape(location.href) + "<BR>")
document.write("L'URL de cette page est " + escape(location.href) + "<BR>")
document.write("La couleur de fond est :" + document.bgColor + "<BR>")
document.write("La couleur du texte est " + document.fgColor + "<BR>")
document.write("La couleur des liens est " + document.linkColor + "<BR>")
document.write("La couleur des liens visités est " + document.vlinkColor + "<BR>")
document.write("La couleur du lien actif est " + document.alinkColor + "<BR>")
Le titre de ce document est "JS"

Cette page a été modifiée le 10/23/2007 22:04:31
L'URL de cette page est
file:///C:/Program%20Files/Macromedia/Dreamweaver%20MX/tp.htm
L'URL de cette page est file:///C:/Program Files/Macromedia/Dreamweaver MX/tp.htm
L'URL de cette page est
file%3A///C%3A/Program%2520Files/Macromedia/Dreamweaver%2520MX/tp.htm
La couleur de fond est :#ffffff
La couleur du texte est #000000
La couleur des liens est #0000ff
La couleur des liens visités est #800080
La couleur du lien actif est #0000ff 45
Avancer, reculer et actualiser
1. Accès à la page précédente history:.back()

2. Accès à la page suivante : history.forward()
3. go()
Avance ou recule du nombre de pages désiré dans l'historique
sauvegardé. Attend comme paramètre le nombre de pages à
sauter. Un nombre négatif recule (autant de fois pageprécédente
que mentionné), Un nombre positif avance (autant defois page
suivante que mentionné).
4. Rafraîchir la page: history.go(0)
<a href="javaScript:history.back()">Précédente</a>
<a href="javaScript:history.forward()">Suivante</a>
<a href="javaScript:history.go(0)">Actualiser</a>
<a href="javaScript:history.go(-1)">IndexTp</a>
46
Fonctions mathématiques
• Math.abs(nombre)
La méthode abs() renvoie la valeur absolue du nombre.
• Math.ceil(nombre)
La méthode ceil() renvoie l'entier supérieur ou égal u nombre.
• Math.floor(nombre)
La méthode floor() renvoie l'entier inférieur ou égal au nombre.
• Math.round(nombre)
La méthode round() arrondit le nombre à l'entier le plus proche.
• Math.max(nombre1,nombre2)
La méthode max(nombre1,nombre2) renvoie le plus grand des 2 nombres.
• Math.min(nombre1,nombre2)
La méthode min(nombre1,nombre2) renvoie le plus petit des 2 nombres.
• Math.pow(nombre1,nombre2)
La méthode pow(nombre1,nombre2) calcule la valeur d'un nombre nombre1 à la
puissance nombre2.
• Math.random()
La méthode random() renvoie la valeur d'un nombre léatoire choisi entre 0 et 1.
• Math.sqrt(nombre)
La méthode sqrt(nombre) renvoie la racine carrée dunombre.
47
Fonctions mathématiques
• Les fonctions trigonométriques

x=Math.PI;
x=Math.sin(y);
x=Math.asin(y);
x=Math.cos(y);
x=Math.acos(y);
x=Math.tan(y);
x=Math.atan(y);
• Les fonctions logarithmiques
x=Math.exp(y);
x=Math.log(y);
x=Math.LN2;
x=Math.LN10;
x=Math.E;
48
Fonctions de contrôle
1. eval(string)
Cette fonction évalue une chaîne de caractère contenant des valeurs numériques,
des opérations numériques, des opérations de compaison,r des instructions et
même des fonctions.
var x = 5;
var str = "if (x == 5) z = 42; else z = 0; ";
document.write("La valeur de z est : " + eval(str));
=>La valeur de z est : 42
2. parseInt(string) ou parseInt(string, radix)
Cette fonction convertit une chaîne contenant un nombre en une valeur entière.
str='1.2345';
x=parseInt(str);
document.write(x + "<br>");
document.write(parseInt("A", 16) + "<br>");
document.write(parseInt("A", 10) + "<br>");
document.write(parseInt("A") + "<br>");
document.write(parseInt("15", 10) + "<br>");
document.write(parseInt(15.99, 10)+ "<br>");
document.write(parseInt(15.99)+ "<br>");
document.write(parseInt("FXX123", 16)+ "<br>");
document.write(parseInt("1111", 2)+ "<br>");
document.write(parseInt("15*3", 10)+ "<br>");
document.write(parseInt("XX")+ "<br>");
document.write(parseInt("123XX")+ "<br>"); 49
Fonctions de contrôle
3. parseFloat(string)
Cette fonction convertit une chaîne contenant un nombre en une valeur à virgule flottante .
document.write(parseFloat("3.14")+ "<br>");
document.write(parseFloat("314e-2")+ "<br>");
document.write(parseFloat("0.0314E+2")+ "<br>");
var x = "3.14";
document.write(parseFloat(x)+ "<br>");
x='-0.123';
x='$123';
4. isNaN(paramètre)
isNaN() détermine si le résultat de la fonction parseFloat ou parseInt est un “NaN” : Not-
a-Number.
function numerique(nb)
{
var x = parseFloat(nb.value);
//ou encore var x =
parseInt(nb); if (isNaN(x))
{alert('Ce n\'est pas un nombre'); nb.value="";}
else {alert(x +' : C\'est un nombre');}
50
}
Chaînes de caractères
1. La propriété length
La propriété length retourne un entier qui indique le nombre de caractères dans une chaîne de caractères.
Si la chaîne est vide (""), le nombre est zéro.
La syntaxe est simple :
x=variable.length;
x="chaîne de caractères".length;
2. La méthode CharAt()
Les caractères sont comptés de gauche à droite: la position du premier caractère est 0. La position
du dernier caractère est donc la longueur (length) de la chaîne de caractères moins 1.
Si la position que vous indiquez est inférieure à zéro ou plus grande que la longueur moins 1,
Javascript retourne une chaîne vide.
La syntaxe de charAt() est :
chaîne_réponse = chaîme_départ.charAt(x);
où x est un entier compris entre 0 et la longueur d e la chaîne à analyser moins 1.
3. La méthode indexOf()
Cette méthode renvoie la position, soit x, d'un string partiel ss (lettre unique, groupe de lettres ou mot) dans
une chaîne de caractères en commençant à la position indiquée par position. Cela vous permet, par
exemple, de voir si une lettre, un groupe de lettres ou un mot existe dans une phrase.
variable="chaîne_de_caractères";
ss="string_partiel";
x=variable.indexOf(ss, position);
où position est la position à partir de laquelle la recherche (de gauche vers la droite) doit commencer.
Cela peut être tout entier compris entre 0 et la longueu r - 1 de la chaîne de caractères à analyser.
51
Si position n'est pas spécifiée, la recherche commencera par défaut à la position 0. Si le string partiel
n'est pas trouvé dans la chaîne de caractères à analyser,la valeur retournée sera égale à -1.
Chaînes de caractères
4. La méthode lastIndexOf()
Méthode semblable à indexOf() sauf que la recherche va cette fois de droite à gauche
(en commençant donc par la fin).
position=variable.lastIndexOf(ss);
Notons que même lorsqu'on commence à lire de la fin de la chaîne, la position retournée est
comptée depuis le début de la chaîne avec le comptage commençant à zéro.
5. La méthode substring()
Retoune une sous-chaine de la chaine initiale comprise entre la position x et la position y.
variable = "chaîne de caractères"
resultat=variable.substring(x,y)
Les x et y sont des entiers compris entre 0 et la longueur moins 1 de la chaîne de caractères. Si x
est inférieur à y, la valeur retournée commence à la position x et se termine à la position Y-1. Si x
est supérieur à y, la valeur retournée commence à la position y et se termine à la position X-1. En
fait, ceci donne le même résultat et il est équivalent d'écrire par exemple substring(3,6) ou
substring(6,3).
Si x est égal à y, substring() retourne une chaînevide.
6. La méthode toLowerCase()
Cette méthode affiche toutes les majuscules d'une chaîne de caractères variable2 en minuscules.
variable2="chaîne de caractères";
variable1=variable2.toLowerCase();
7. La méthode toUpperCase()
Cette méthode affiche toutes les minuscules d'une chaîne de caractères variable2 en majuscules.52
variable2="chaîne de caractères";
variable1=variable2.toUpperCase();
Date et heure
date1=new Date();
document.write('La date actuelle est : ' + date1+'<br>'); date2=new
Date("Mar 26,2004 00:00:00"); document.write('La date crée est : ' +
date2 + '<br>'); document.write('L\'année en cours est : '
+date1.getYear()+'<br>');
document.write('L\'année de la date crée est : ' date2+.getYear()+'<br>');
mois = date1.getMonth() + 1;
document.write('Le mois en cours est : ' + mois+'<br>');
jour = date1.getDate();
document.write('Le jour en cours est : ' + jour +'<br>');
jour = date1.getDay();
document.write('Le jour en cours est : ' + jour +'<br>');
heure = date1.getHours();
document.write('L\'heure en cours est : ' + heure +'<br>');
minutes = date1.getMinutes();
document.write('Les minutes sont actuellement : ' + minutes +'<br>');
secondes = date1.getSeconds();
document.write('Les secondes sont actuellement : ' + secondes +'<br>');
53
Les fonctions setTimeout() et clearTimeout()
Javascript met à votre disposition une minuterie (ou plus précisément un compteur à
rebours) qui permettra de déclencher une fonction après un laps de temps déterminé.
Syntaxe <html>
window.setTimeout (fonction, nbMillisecondes) <head>
Description var a;
exécute un traitement périodiquement : function oui(){
alert("Oui !");
Exemple a = setTimeout("oui()",3000);
window.setTimeout("afficheure()",1000); }
setTimeout("oui()",3000);
Syntaxe function stop_ca(){
window.clearTimeout(Object timer)
window.clearTimeout(a);
Description }
Suspend la minuterie timer déclarée par la </script>
méthodesetTimeout(). </head>
<body>
<a href="javascript:stop_ca()">Stop !!!</a>
</body>
54
</html>
Tableaux
L'objet Array (ou tableau) est une liste d'éléments indexés danslesquels on pourra écrire
ou lire des données.
Pour faire un tableau, il faut procéder en deux étapes :
· Construire la structure du tableau.
· Affecter des valeurs dans les cases ainsi définies.
On commence par définir le tableau :
nom_du_tableau = new Array (x);
où x est le nombre d'éléments du tableau. Ensuite,
on va alimenter la structure ainsi définie:
nom_du_tableau[i] = "elément";
où i est un nombre compris entre 0 et x moins 1.
Exemple :
couleur = new Array(3); // ou encore couleur = new Array();
couleur [0]="Rouge";
couleur [1]="Vert";
couleur [2]="Bleu";
for(i=0; i < couleur.length ; i++)
document.write('La couleur numéro ' + i + ' est ' +couleur[i] +
'<br>');
Une autre déclaration :
var tabMois = new
Array("Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Août","Septembre"
55
,"Octobre","Novembre","Decembre");
Tableaux
Propriétés et méthodes
• Proprieté: length : Retourne le nombre d'éléments du tableau.

• Méthodes avec Internet Explorer: concat() , join() , reverse() , slice() , sort() ,
toString() , unshift().
• sort() : Retourne les éléments par ordre alphabétique (à condition qu'ils soient de
même nature)
• reverse() : Inverse l'ordre des éléments (ne les trie pas)
• toString(): Renvoie la chaîne qui a créé le tableau
• concat() : Renvoie un tableau concaténant "tableau_1" avec lestableaux passés en
paramètre (concaténation de tableaux)
• join() : Regroupe tous les éléments du tableau dans une seul chaîne. Les différents
éléments sont séparés par un caractère séparateurpécifiés en argument. Par défaut,
ce séparateur est une virgule.
• slice() : Renvoie les éléments d'un tableau de l'index "debut(inclus) à l'index "fin"
(exclus et facultatif) concaténés par une virgule (, )
• unshift(): Ajoute des éléments au début du tableau.
• Tableau à deux dimensions
On peut créer des tableaux à deux dimensions (et plus encore). On déclare d'abord un tableau
à 1 dimension de façon classique :
nom_du_tableau = new Array (x);
Ensuite, on déclare chaque élément du tableau commeun tableau à 1 dimension :
nom_du_tableau[i] = new Array(y);
56
Ou encore Matrice[i][j] = …
Tableaux
Propriétés et méthodes
couleur = new Array();

couleur [0]="Rouge";
couleur [1]="Vert";
couleur [2]="Bleu";
document.write("Tableau initial: " + couleur+"<br>");
document.write("Longueur du tableau:
"+ couleur.length+"<br>"); couleur.sort();
document.write("Tableau Trié: "+ couleur +"<br>");

couleur.reverse();
document.write("Tableau inversé: "+ couleur +"<br>");
var ch = couleur.toString();
document.write("Chaine du tableau: "+ ch + "<br>");
t=new Array("Jaune","Orange")
tfinal=couleur.concat(t);
document.write("Nouveau tableau après concat: "+
tfinal + "<br>");
document.write(couleur.join(" - ")+ "<br>");
document.write("Une partie du tableau concaténé: " +
tfinal.slice(2,5)+ "<br>");
couleur.unshift("Noir","Blanc");
document.write(couleur+ "<br>");
57
Exemple d’accès aux éléments d’une page HTML
<HTML>
<HEAD>
<TITLE> Introduction au JavaScript </TITLE>
function test()
{
alert ("Affichage 1: Nom du formulaire->>" +
window.document.forms["formulaire"].name);
alert ("Affichage 2: Nom du formulaire->>" + document.forms["formulaire"].name);
//alert ("Affichqge 3: Nom du formulaire->>" + forms["formulaire"].name); //Erreur
alert ("Affichage 4: Nom du formulaire->>" + formulaire.name);
alert ("Affichage 5: Nom du formulaire->>" + window.document.forms[0].name);
alert ("Affichage 6: Nom du formulaire->>" + document.forms[0].name);
alert ("Affichage 7: Valeur d un element->>" + document.forms[0].elements[1].value);
alert ("Affichage 8: Valeur d un element->>" + document.forms[0].prenom.value);
alert ("Affichage 9: Valeur d un element->>" + document.formulaire.prenom.value);
alert ("Affichage 10: Valeur d un element->>" + formulaire.prenom.value);
alert ("Affichage 11: Valeur d un element->>" + formulaire.rd[0].value);
}
</script>
</HEAD> 58
Exemple d’accès aux éléments d’une page HTML
<BODY onLoad="formulaire.nom.focus()" >

<FORM action="mailto:yamnaEttarres@yahoo.fr" NAME="formulaire"
METHOD= "POST" enctype="text/plain">
Nom : <INPUT TYPE= "TEXT" NAME ="nom" SIZE = "46"> <br>

Prénom: <INPUT TYPE= "TEXT" NAME ="prenom" SIZE ="40"> <br>
<p>
<input type="radio" name="rd" value="Homme">Homme<br>
<input type="radio" name="rd" value="Femme">Femme
</p>
<input type="button" name="Test" value="Test" onClick="test()">
<INPUT TYPE= "SUBMIT" VALUE= "Envoi">
<INPUT TYPE= "RESET" VALUE= "Remise à zéro"><br>
</FORM>
</BODY></HTML>
59
HIERARCHIE DES ELEMENTS D’UNE PAGE HTML
(SUITE)
Nombreuses variables et fonctions disponibles sur chaque élément
• form.submit()
force l’envoi des données du formulaire (≡ clic sur bouton submit)
• nomInput.focus()
amène le curseur de saisie dans le champ
• window.setTimeout (fonction, nbMillisecondes)
exécute un traitement périodiquement :
window.setTimeout("afficheure()",1000);
• window.alert(message)
affiche un message dans une boîte de dialogue. L'utilisateur n'a qu'un
seul choix : appuyer sur "OK"
• window.confirm(message)
affiche une boîte de dialogue Ok/Annuler
• window.prompt("message ", "valeur par défaut ")
affiche une boite de dialogue permettant de saisir une valeur. Si vous
annulez la commande, prompt renvoie null. 60
La fonction alert
61
La fonction confirm
62
La fonction prompt
63
LA GESTION DES EVENEMENTS
• Qu'appelle-t'on un événement?
Les évènements sont des actions de l'utilisateur, qui vont pouvoir donner lieu
à une interactivité. L'événement par excellence est clicle de souris. Grâce au
Javascript il est possible d'associer des fonctions à des événements tels que le
passage de la souris au-dessus d'une zone, le changement d'une valeur, ...
Ce sont les gestionnaires d'événements qui permettent 'associerd une action à
un événement. Ils sont associés à des objets, et leurcode s'insère dans la balise
de ceux-ci.
• Syntaxe d'un gestionnaire d'événement:

onEvenement="Action_Javascript_ou_Fonction();"
• Evénements gérables clavier/souris:
• Ajout des gestionnaires sur des éléments du document HTML:
<INPUT TYPE=BUTTON onClick= ‘‘…’’>
• Fonctions JavaScript (définies par le programmeur) associées aux
gestionnaires: <INPUT TYPE = “BUTTON” onClick= ‘‘surclique()’’>
Appel de la fonction surclique() lorsque l’événementsurvient
exécution de surclique()
64
Où mettre les événements?
•.
• Evénements applicables uniquement sur BODY, IMAGE ou

FRAMESET
– onLoad : au chargement
– onUnload
• Evénements applicables uniquement sur FORM
– onSubmit : soumission du formulaire
– onReset : réinitialisation du formulaire
• Evénements applicables uniquement sur INPUT et TEXTAREA
– onSelect : sélection d’une partie du texte du formulaire
• Evénements applicables uniquement sur INPUT, SELECT et
TEXTAREA
– onChange : le contenu du contrôle change
• Evénements applicables sur A, AREA , LABEL , INPUT , SELECT,
TEXTAREA , et BUTTON
– onFocus : le contrôle prend le focus (par <tab> ou cl ick)
– onBlur : le contrôle perd le focus 65
Où mettre les événements?
Evénements applicables sur presque tous les éléments

• onClick : click gauche de la souris
• onDblClick : double click gauche de la souris
• onMouseDown : un bouton est enfoncé
• onMouseUp : un bouton est relâché
• onMouseOver : le pointeur de la souris passe sur le contrôle
• onMouseMove : le pointeur de la souris bouge au dessus du
contrôle
• onMouseOut : le pointeur de la souris sort du contrôle
• onKeyPressed : une touche est pressée
• onKeyDown : une touche est enfoncée
• onKeyUp : une touche est relâchée
66
Echange d'informations entre les contrôles et les
fonctions
67
Echange d'informations entre les contrôles et les
fonctions
function test(r1,r2,t)
{
if (r1.checked)
t.value = 'Vous êtes un ' + r1.value;
else if (r2.checked)
t.value = 'Vous êtes une ' + r2.value;
else t.value = 'Faîtes votre choix !!!';
}
<input type="radio" name="rd" value="Homme">Homme<br>

<input type="radio" name="rd" value="Femme">Femme
<input type="button" name="btOk" value="Choisir" onClick="test(rd[0],rd[1],txtResult)">

<input type="reset" name="btReset" value="Effacer">
<input type="text" name="txtResult" readonly="true">
68
Appellation des éléments d’un formulaire
<form name="f">
<input name="name" type="text"
value="test">
<input name="bt" type="button"
onClick="alert(name.value)"
value="Ok">
</form>
<form name="f">
<input name="name" type="text"
value="test">
<input name="bt" type="button"
onClick="alert(document.f.name.value)"
value="Ok"></form>
69

Cours Javascript

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 Javascript

Transféré par

Droits d'auteur :

Formats disponibles

Programmation Web (2 IOT)

• Apprendre le langage de script JavaScript

•Qu'est-ce que le Javascript?

• Le navigateur n’affiche pas le code Javascript dans sa fenêtre.

<SCRIPT type="text/JavaScript" >

• Dans un fichier externe: Il est possible de mettre le code JavaScript dans

• Ce programme source est embarqué dans une page HTML entre

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

<HTML> <HEAD><TITLE> Introduction au JavaScript </TITLE>

• Contrairement au langage C ou C++, Il ne faut pas déclarer le type de données d'une

Le résultat est: Je suis né le 23 septembre 1983

• Les variables déclarées tout au début du script, en

• Comparaison == != === !== < > <= >=

• Les opérateurs logiques

• Priorité des opérateurs

• Identiques java, C/C++

• La boucle do... while est toujours exécutée au moins une

Dans la partie Head Dans la partie Body

• On peut passer des valeurs ou paramètres aux fonctions

Dans la partie Body

Exercice 3 JavaScript (1 point)

• Pour accéder à un objet, il faudra donner le chemin complet de

• Soit par exemple pour le second bouton radio:

Utilisation d'une variable

Utilisation d'une fonction

10. Arrière plan de la page

Différences entre les méthodes write() et writeln()

document.writeln("Ma première ligne"); 43 document.writeln("Ma seconde ligne ");

Le titre de ce document est "JS"

1. Accès à la page précédente history:.back()

• Les fonctions trigonométriques

• Proprieté: length : Retourne le nombre d'éléments du tableau.

couleur = new Array();

document.write("Tableau Trié: "+ couleur +"<br>");

<BODY onLoad="formulaire.nom.focus()" >

Nom : <INPUT TYPE= "TEXT" NAME ="nom" SIZE = "46"> <br>

• Syntaxe d'un gestionnaire d'événement:

• Evénements applicables uniquement sur BODY, IMAGE ou

Evénements applicables sur presque tous les éléments

<input type="radio" name="rd" value="Homme">Homme<br>

<input type="button" name="btOk" value="Choisir" onClick="test(rd[0],rd[1],txtResult)">

Vous aimerez peut-être aussi