Cours Javascript

Niveau : 4éme année Section : Informatique Matière : STI
Le langage JavaScript
I. Introduction :
Créer une page HTML nommée "paire_impaire.html" et essayons d’écrire un code nous permettant d’afficher
la parité d’un entier x.
1. Les limites du langage HTML :

 Absence des structures algorithmiques (conditionnelles et itératives)
 Absence de la programmation procédurale (sous programmes, variables, ….)
 Absence de prise en charge d’événements, à l’exception de l’événement clic
 Absence d’interfaçage avec les bases de données
2. Le langage JavaScript :
JavaScript est un langage côté client (comme VbScript) qui est utilisé dans des millions de pages web afin
d'améliorer leur conception.
Il s'agit d'une couche de programmation supplémentaire qui vient s'ajouter au langage HTML.
Le code HTML est le langage de base que toute page Internet se doit d'utiliser. Quant à JavaScript, il a été
conçu pour donner plus d'interactivité aux pages HTML. Le mot script indique qu'il s'agit d'un langage de
programmation simplifié qui s'exécute en local sur l'ordinateur qui est en train de lire la page web par le
browser lui-même sans devoir faire appel aux ressources du serveur.
II. Le code Javascript :

1. La balise <SCRIPT>
Le langage Html utilise des balises pour "dire" au navigateur d'afficher une portion de texte en gras, en
italique, etc.
Dans la logique du langage Html, il faut donc signaler au navigateur par une balise, que ce qui suit est un
script et que c'est du Javascript (et non du VBScript). 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>.
2. Les commentaires
Lorsqu'on programme, des fois on a besoin d’écrire à l'aide de commentaires ce que le programme fait.
Un commentaire est facile à mettre : tout le texte qui suit // n'est pas interprété par Javascript.
// Commentaire
Si un commentaire est de plusieurs lignes, on peut aussi utiliser /* pour commencer le commentaire et */ pour
le finir. Voici les deux façons d'écrire un commentaire sur plusieurs lignes :
// Ceci est un commentaire /* Ceci est un commentaire

// sur plusieurs lignes sur plusieurs lignes */
Attention : Ne confondez pas les commentaires Javascript et les commentaires Html (pour rappel ).
3. Les emplacements du code Javascript

Le navigateur traite la page Html de haut en bas (y compris les ajoutes en Javascript).
Pour s'assurer que le programme script est chargé dans la page et prêt à fonctionner, on prendra l'habitude de
déclarer systématiquement (lorsque cela sera possible) un maximum d'éléments dans les balises d'en-tête soit
entre <HEAD> et </HEAD> (le cas par exemple pour les fonctions). Rien n'interdit de mettre plusieurs scripts
dans une même page Html.
Il faut noter aussi que l'usage de la balise script n'est pas toujours obligatoire (le cas des événements Javascript
par exemple onClick où il faut simplement insérer le code à l'intérieur de la commande Html comme un
attribut de celle-ci, l'événement fera appel à la fonction Javascript lorsque la commande Html sera activée).
Javascript fonctionne alors en quelque sorte comme une extension du langage Html.
1
4. Les scripts externes
Il est possible d'utiliser des fichiers externes pour les programmes Javascript. On peut ainsi stocker les scripts
dans des fichiers distincts (avec l'extension .js) et les appeler à partir d'un fichier Html.
L'avantage de cette manière de procéder est que le script peut être utilisé sur plusieurs pages HTML de
manière simple et efficace.
La balise devient :
<SCRIPT LANGUAGE='javascript' SRC='http://site.com/fichier.js'></SCRIPT>
<SCRIPT LANGUAGE='javascript' SRC='fichier.js'></SCRIPT>
III. Les objets Javascript :

1. Les objets et leur hiérarchie :
Javascript divise une page web en objets et surtout permet d'accéder à ces objets, d'en retirer des informations
et de les manipuler.
Voyons d'abord une illustration des différents objets qu'une page web peut contenir.
Cette page s'affiche dans une fenêtre.

C'est l'objet fenêtre (window)
Dans cette fenêtre, il y a un document Html. C'est l'objet document. L'objet fenêtre contient l'objet document.
Dans ce document, on trouve un formulaire. C'est l'objet formulaire. Autrement dit, l'objet fenêtre contient un
objet document qui lui contient un objet formulaire.
2
Dans ce document, on trouve trois objets. Ce sont respectivement l'objet radio, l'objet bouton, l'objet texte.
Autrement dit l'objet fenêtre contient l'objet document qui contient l'objet formulaire qui contient à son tour
l'objet radio, l'objet fenêtre contient l'objet document qui contient l'objet formulaire qui contient à son tour
l'objet bouton et l'objet fenêtre contient l'objet document qui contient l'objet formulaire qui contient à son tour
l'objet texte.
La hiérarchie des objets de cet exemple est donc :
radio
fenêtre document formulaire bouton
texte
2. Les propriétés des objets :

Une propriété est un attribut, une caractéristique, une description de l'objet. Par exemple, l'objet voiture a
comme propriétés (marque, modèle, couleur, etc.). L'objet livre a comme propriétés (auteur, maison d'édition,
titre, etc.).
De même les objets Javascript ont des propriétés personnalisées. Dans le cas des boutons radio, une de ses
propriétés est, par exemple, sa sélection ou sa non-sélection (checked en anglais).
En Javascript, pour accéder aux propriétés, on utilise la syntaxe :
nom_de_l'objet . nom_de_la_propriété
Exemple :
Dans le cas du bouton radio "semaine", pour tester la propriété de sélection, on écrira :
document.form.radio[0].checked
 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.
3
3. Les méthodes des objets :
On a dit que chaque page web est divisée en objets et que Javascript donne la possibilité d'accéder à ces
objets. La page Html qui s'affiche dans la fenêtre du browser est un objet de type document.
A chaque objet Javascript, le concepteur du langage a prévu un ensemble de méthodes (ou fonctions dédiées à
cet objet) qui lui sont propres. L'appel d’une méthode se fait selon la notation :
nom_de_l'objet .nom_de_la_méthode
a- Méthodes de l’objet document :

 La méthode write() :
A la méthode document, Javascript a dédié la méthode "écrire dans le document". C’est la méthode write().
Pour appeler la méthode write() du document, on notera : document.write();
Exemple : document.write("Bonjour");
 La méthode writeln() :
La méthode writeln() est fort proche de write() à ceci près qu'elle ajoute un retour chariot à la fin des
caractères affichés par l'instruction.
Exemple : document.writeln("ligne 1");
document.writeln("ligne 2");
On peut utiliser les balises Html pour agrémenter le texte à afficher :
Exemples :
document.write("<B> Texte </B>");
document.write("<I> Texte </I>");
document.write("<FONT color = "pink" size = 5 face = "Arial" > Texte </FONT>");
document.write("<SUP> Texte </SUP>");
 Les méthodes de formatage:
 document.bgColor :
Cette instruction permet de spécifier la couleur d'arrière-plan d'un objet document.
document.bgColor="white";
document.bgColor="#FFFFFF";
 document.fgColor :
Cette instruction permet de spécifier la couleur d'avant-plan (texte) d'un objet document.
document.fgColor="black";
document.fgColor="#000000";
 document.alinkColor :
Cette instruction permet de spécifier la couleur d'un lien actif d'un objet document.
document.alinkColor="white";
document.alinkColor="#FFFFFF";
 document.linkColor :
Cette instruction permet de spécifier la couleur d'un hyperlien d'un objet document.
document.linkColor="white";
document.linkColor="#FFFFFF";
 document.vlinkColor :
Cette instruction permet de spécifier la couleur d'un hyperlien déjà visité d'un objet document.
document.linkColor="white";
document.linkColor="#FFFFFF";
b- Méthodes de l’objet window :

 La méthode alert() :
La méthode alert() affiche une boite de dialogue dans laquelle est reproduite la valeur (variable et/ou chaîne
de caractères) de l'argument qui lui a été fourni. Cette boîte bloque le programme en cours tant que
l'utilisateur n'aura pas cliqué sur "OK".
Sa syntaxe est :
alert(variable);
4
alert("chaîne de caractères");
alert(variable + "chaîne de caractères");
Si vous souhaitez écrire sur plusieurs lignes, il faudra utiliser le signe \n.
 La méthode prompt() :
Dans le même style que la méthode alert(), Javascript vous propose une autre boîte de dialogue, dans le cas
présent appelée boîte d'invite, qui est composée d'un champ comportant une entrée à compléter par
l'utilisateur. Cette entrée possède aussi une valeur par défaut.
La syntaxe est :
prompt("texte de la boîte d'invite","valeur par défaut");
En cliquant sur OK, la méthode renvoie la valeur tapée par l'utilisateur ou la réponse proposée par défaut. Si
l'utilisateur clique sur Annuler ou Cancel, la valeur null est alors renvoyée.
Prompt() est parfois utilisé pour saisir des données fournies par l'utilisateur. Le texte ne doit cependant pas
dépasser 45 caractères sous Netscape et 38 sous Explorer 3.0.
 La méthode confirm() :
Cette méthode affiche 2 boutons "OK" et "Annuler". En cliquant sur OK, confirm() renvoie la valeur true et
bien entendu false si on a cliqué sur Annuler. Ce qui peut permettre, par exemple, de choisir une option dans
un programme.
La syntaxe est (par exemple) :
confirm("Voulez-vous continuer ?")
 La méthode open() et close() :
La méthode close() permet de fermer une fenêtre.
La méthode open() permet d’ouvrir une nouvelle fenêtre.
La syntaxe est :
window.open ("URL","nom_de_la_fenêtre","caractéristiques_de_la fenêtre")
URL : est l'URL de la page que l'on désire afficher dans la nouvelle fenêtre. Si on ne désire pas afficher un
fichier htm existant, on mettra simplement ''".
caractérstiques_de_la _fenêtre : est une liste des caractéristiques de la fenêtre que l'on note à la suite,
séparées par des virgules et sans espaces ni passage à la ligne.
Caractéristique Description
toolbar=yes ou no Affichage de la barre d'outils
location=yes ou non Affichage de champ d'adresse (ou de localisation)
directories=yes ou no Affichage des boutons d'accès rapide
menubar=yes ou no Affichage de la barre de menus
scrollbars=yes ou no Affichage des barres de défilement.
width=x en pixels Largeur de la fenêtre en pixels
height=y en pixels Hauteur de la fenêtre en pixels
On peut aussi utiliser 1 ou 0 au lieu de yes ou no.
IV. Les variables :

Les variables sont les éléments clés d'un langage de programmation. Pour se référer à la variable, on y donne
un nom.
Un nom de variable doit commencer par une lettre (alphabet ASCII) ou le signe_ 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é. Javascript est sensible à la case. Il faut faire attention aux majuscules et aux minuscules. Par
exemple X et x sont deux noms de variables différents.
Les variables ne doivent pas être des mots-clefs Javascript : var, form, int, document, etc.
1. La déclaration de variables :
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 Classe = "4SI"
5
 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
Classe = "4SI"
2. La visibilité des variables :
Malgré la facilité apparente dans la déclaration des variables, la manière dont on déclare la variable aura une
grande importance pour la "visibilité" de la variable dans le programme Javascript.
Voir à ce sujet, la distinction entre variable locale et variable globale dans le Javascript avancé de ce chapitre.
Pour la clarté de votre script et votre facilité, on ne peut que conseiller d'utiliser à chaque fois le mot var pour
déclarer une variable.
3. Les données sous Javascript :
Javascript utilise 4 types de données :
Type Description
Des nombres Tout nombre entier ou avec virgule tel que : 22 ou 3.1416
Toute suite de caractères comprise entre guillemets telle que :
Des chaînes de caractères
"suite de caractères"
Des booléens Les mots true (pour vrai) et false (pour faux)
Le mot null Mot spécial qui ne représente pas de valeur
Notons aussi que contrairement au langage Pascal par exemple, Il ne faut pas déclarer le type de données
d'une variable. On n'a donc pas besoin de integer, real, string, char et autres en Javascript.
4. Les opérateurs prédéfinis :
a. Les opérateurs de calcul :
Dans les exemples ci-dessous, la valeur initiale de x sera toujours égale à 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. Les opérateurs de comparaison :
Signe Nom Exemple Résultat
== Egal 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. Les opérateurs associatifs :
Ce sont les opérateurs qui réalisent un calcul dans lequel une variable intervient des deux côtés du signe = (ce
sont donc en quelque sorte également des opérateurs d'attribution).
Dans les exemples suivants x vaut toujours 11 et y aura comme valeur 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
6
d. Les opérateurs logiques :

Aussi appelés opérateurs booléens, ces opérateurs servent à vérifier deux ou plusieurs conditions.
Signe Nom Exemple Signification
&& et (condition1) && (condition2) condition1 et condition2
|| ou (condition1) || (condition2) condition1 ou condition2
! non !(condition) non condition
e. Les opérateurs d'incrémentation :
Ces opérateurs vont augmenter ou diminuer la valeur de la variable d'une unité. Ce qui sera fort utile, par
exemple, pour mettre en place des boucles.
Dans les exemples x vaut 3.
Signe Description Exemple Résultat
Incrémentation y = x++ ; 4
x++, ++x
(x++ est le même que x=x+1) z= ++x ; 5
Décrémentation y= x-- ; 2
x--, --x
(x-- est le même que x=x-1) z= --x ; 1
V. Les entrées/sorties en Javascript :

Dans le langage Javascript, les opérations d’entrées/sorties sont effectuées comme suit :
 L’entrée (lecture) : se fait soit avec la méthode prompt de l’objet window, soit à l’aide d’objets
graphiques du formulaire HTML.
 La sortie (affichage) : se fait avec la méthode write de l’objet document, la méthode alert de l’objet
window ou à l’aide d’objets graphiques du formulaire HTML.
VI. Les fonctions de conversion :

 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.
 La fonction String : permet la conversion d’une valeur numérique donnée en paramètre à une chaîne de
caractères.
Exemple : ch = String (3.14) ; ch = "3.14"
 La fonction Number : permet la conversion d’une chaîne de caractères donnée en paramètre à une valeur
numérique si c’est possible. Il préférable de précéder toute conversion avec la fonction Number, par un
test de validité avec la fonction IsNaN.
Exemple : x = Number ("3.14") ; x = 3.14
 La fonction eval : évalue une chaîne de caractères 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 = "14 - 3" ; x = eval (ch) ; x = 11
VII. L'objet Math

 La méthode abs(): renvoie la valeur absolue (valeur positive) de y.
x=Math.abs(y);
 La méthode floor(): renvoie l'entier inférieur ou égal à y.
Attention ! Cette fonction n'arrondit pas le nombre.
Comme montré dans l'exemple, si y = 1.99, la valeur de x sera mise à 1.
x=Math.floor(y);
 La méthode round(): arrondit le nombre à l'entier le plus proche.
x=Math.round(y);
 La méthode max(): renvoie le plus grand des 2 nombres y et z.
x=Math.max(y,z);
 La méthode min(): renvoie le plus petit des 2 nombres y et z.
x=Math.min(y,z);
7
 La méthode pow(): calcule la valeur d'un nombre y à la puissance z.
x=Math.pow(y,z);
 La méthode sqrt(): renvoie la racine carrée de y.
x=Math.sqrt(y);
VIII. L'objet String:

Une chaîne de caractères en javascript est un objet string sur lequel s'appliquent des propriétés et des
méthodes.
 La propriété length: indique le nombre de caractères de la chaîne.
Pour une chaîne définie par var ch="classe", ch.length retourne le nombre de caractères, ici 6 caractères.
 La méthode charAt(i) récupère le caractère d'indice i. Attention, le premier caractère a comme indice 0.
Pour une chaîne initialisée par var chaine="azerty", chaine.charAt(1) retourne "z".
 La méthode substring(p,d): Extraire une sous-chaîne
Il est utile de pouvoir extraire un morceau d'une chaîne. Par exemple, déclarons la variable
date="15/08/2000". La question est de récupérer le jour, le mois et l'année dans 3 variables différentes.
var date = "15/08/2000";
var jour = date.substring(0,2);
var mois = date.substring(3,5);
var annee = date.substring(6,10)
La méthode substring attend 2 paramètres :
 l'indice p du premier caractère (inclus),
 l'indice d du dernier caractère (exclus).
Si les deux paramètres sont inversés, javascript rétablit l'ordre logique :
chaine.substring(6,10) et chaine.substring(10,6) auront le même effet.
Si le deuxième paramètre est omis, la chaine retournée commence à l'indice indiqué et se termine à la fin
de la chaîne.
 La méthode indexOf(souschaine): retourne l'indice de la première occurrence de souschaine dans une
chaîne. Si la sous-chaîne n'est pas trouvée, indexOf retourne -1.
 La méthode lastIndexOf(souschaine): retourne l'indice de la dernière occurrence de souschaine dans une
chaîne. Si la sous-chaîne n'est pas trouvée, lastIndexOf retourne -1.
 La méthode indexOf(souschaine,debut): retourne l'indice de la première occurrence de souschaine
trouvée à partir du caractère debut de chaine.
Cette méthode permet par exemple d'extraire le domaine d'une url complète :
var url="http://www.toutjavascript.com/magicmenu/index.html;
var domaine=url.substring(7,url.indexOf("/",7));
La variable domaine contient dans cet exemple www.toutjavascript.com qui est une sous-chaine de url qui
commence au caractère 7 et qui se termine au premier slash (/) après "http://".
 Les méthodes toUpperCase() et toLowerCase(): MAJUSCULES / minuscules
JavaScript offre deux méthodes pour transformer les lettres (et uniquement les lettres) d'un mot en
majuscules ou en minuscules.
var chaine="Ceci est un texte";
var maj=chaine.toUpperCase();
var min=chaine.toLowerCase();
A la fin de ce script, maj contient : CECI EST UN TEXTE
et min contient : ceci est un texte
8
IX. Les structures de contrôle :

1. Les structures conditionnelles :
a. La structure IF :
La forme réduite :
if (condition vraie)
{
une ou plusieurs instructions à exécuter;
}
La forme complète :
if (condition)
{
code qui sera exécuté si la condition est vraie;
}
else
{
code qui sera exécuté si la condition est fausse;
}
La forme généralisée :
if (condition1)
{
code qui sera exécuté si la condition1 est vraie ;
}
else if (condition2)
{
code qui sera exécuté si la condition2 est vraie ;
}
.
.
.
else
{
code qui sera exécuté si toutes les conditions ci-dessus sont fausses ;
}
Remarques :
 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 :
 if (condition1 && condition2), testera si la condition 1 et la condition 2 sont vérifiées.
 if (condition1 || condition2), testera si une au moins des conditions est vérifiée .
b. La structure switch :
Si le nombre de conditions devient important dans une structure conditionnelle, on constate que l'écriture et la
lisibilité deviennent problématiques. Mis à part des cas simples à deux ou trois sorties, on préférera donc
utiliser la structure switch qui offre un formalisme simple et clair quel que soit le nombre de cas envisagés.
Syntaxe:
switch (<expression>)
{
case <valeur1> : <traitement de valeur1> ; break ;
case <valeur2> : <traitement de valeur2> ; break ;
......
default : <traitement autres cas> ;
}
9
Remarques :
 Le cas default est optionnel. Il permet d'éviter l'apparition d'une erreur lors d'une tentative de traitement
d'un cas non prévu.
 Le traitement associé à chaque cas doit assurer la sortie de l'instruction switch. En fait un "case"
représente un accès d'entrée sur la base de la valeur de l'expression, mais en aucun cas la rencontre
séquentielle du "case" suivant ne constitue une sortie de l'instruction switch. Afin d'interrompre
l'exécution, il conviendra de prévoir en dernière instruction de chaque cas (sauf du dernier pour lequel le
problème disparaît) une rupture de séquence. Cela pourra être réalisé par l'instruction break.
2. Les structures itératives :

a. La structure for :
Syntaxe:
for (<ident>=<initialisation>; <test de fin>; <opération>)
{
<instructions>
}
 La structure for se compose de trois composants séparés par le caractère ";" :
En premier lieu, on trouve l'affectation de la variable ident de boucle à sa valeur initiale.
Ensuite, se situe une expression booléenne évaluée avant d'entrer dans le corps de la boucle et constituant un
test d'arrêt.
Enfin, le troisième élément est une action permettant, en règle générale, d'effectuer l'incrémentation de
l'ident.
b. La structure do … while :
Syntaxe:
do
{
<instructions>
}
while (<condition>);
 do...while signifie fait...tant que. Cette commande exécute les instructions une fois, puis la refait tant que
la condition est vraie. Donc les instructions vont s'exécuter au moins une fois.
 Par rapport au repeat … until de Pascal, on notera toutefois l'inversion du test puisque ici la boucle se
maintient tant que l'expression à une valeur true alors qu'en Pascal le processus se refait tant que
l'expression a une valeur false.
c. La structure while :
Syntaxe:
while (<condition>)
{
<instructions>
}
While signifie tant que. Cette commande exécute les instructions tant que la condition est vraie. Si au départ,
la condition est fausse, alors les instructions ne sont pas exécutées.
1. Évaluation de la condition d'entrée ;
2. Si cette évaluation délivre la valeur false, la boucle est terminée et l'exécution se poursuit en séquence
vers l’étape 4;
Si le résultat de l'évaluation est true, le corps de boucle est exécuté.
3. Retour en 1.
4. Suite du programme.
10
X. Les fonctions en Javascript :

On appelle fonction un sous-programme qui permet d'effectuer un ensemble d'instructions par simple appel
de la fonction dans le corps du programme principal.
En Javascript, il existe deux types de fonctions :
 les fonctions propres à Javascript. On les appelle des "méthodes". Elles sont associées à un objet bien
particulier comme c'était le cas de la méthode alert() avec l'objet window par exemple.
 les fonctions écrites par le programmeur pour les besoins du script.
Avant d'être utilisée, une fonction doit être définie car pour l'appeler dans le corps du programme il faut que le
navigateur la connaisse, c'est-à-dire qu'il connaisse son nom, ses arguments et les instructions qu'elle contient.
La déclaration d'une fonction se fait grâce au mot clé function selon la syntaxe suivante:
function Nom_De_La_Fonction (argument1, argument2, ...)
{
Liste d’instructions
}
Remarques:
 Le mot clé function est suivi du nom que l'on donne à la fonction
 Le nom de la fonction suit les mêmes règles que les noms de variables :
o Le nom doit commencer par une lettre
o Un nom de fonction peut comporter des lettres, des chiffres et les caractères _ et & (les espaces ne
sont pas autorisés)
o Le nom de la fonction, comme celui des variables est sensible à la case (différenciation entre les
minuscules et majuscules)
 Les arguments sont facultatifs, mais s'il n'y a pas d'arguments, les parenthèses doivent rester présentes
 Il ne faut pas oublier de refermer les accolades ouvertes
 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 fonction que le code de programme est exécuté.
 L'appel d'une fonction :

Pour exécuter une fonction, il suffit de faire appel à elle en écrivant son nom suivi d'une parenthèse ouverte
(éventuellement des arguments) puis d'une parenthèse fermée:
Nom_De_La_Fonction ( );
Il faudra veiller à ce qu'une fonction soit déclarée avant d'être appelée, sachant que le navigateur traite la page
de haut en bas.
Il est donc prudent ou judicieux de placer toutes les déclarations de fonctions dans l'en-tête de votre page c.à.d
dans la balise <HEAD> ... </HEAD>. Vous serez ainsi assuré que vos fonctions seront déjà prises en compte
par l'interpréteur avant qu'elles soient appelées dans le <BODY>.
 Retourner une valeur :
Pour renvoyer un résultat, il suffit d'écrire le mot clé return suivi de l'expression à renvoyer.
Précisons que l'instruction return est facultative et qu'on peut trouver plusieurs return dans une même
fonction.
Pour exploiter cette valeur de la variable retournée par la fonction, on utilise une formulation du type
document.write(x).
 Variables locales et variables globales :
Une variable déclarée implicitement (non précédée du mot var) sera globale, c'est-à-dire accessible après
exécution de la fonction.
Une variable déclarée explicitement (précédée du mot var) sera locale, c'est-à-dire accessible uniquement
dans la fonction, toute référence à cette variable hors de la fonction provoquera une erreur (variable
inconnue).
11
XI. La gestion des événements en Javascript :
En Html classique, il y a un événement que vous connaissez bien. C'est le clic de la souris sur un lien pour
vous transporter sur une autre page Web. Heureusement, Javascript va en ajouter une bonne dizaine, pour
votre plus grand plaisir.
Les événements Javascript, associés aux fonctions, aux méthodes et aux formulaires, ouvrent grand la porte
pour une réelle interactivité de vos pages.
Evénement Description
Clik Lorsque l'utilisateur clique sur un bouton, un lien ou tout autre élément.
Load Lorsque la page est chargée par le navigateur.
Unload Lorsque l'utilisateur quitte la page.
MouseOver Lorsque l'utilisateur place le pointeur de la souris sur un lien ou tout
autre élément.
MouseOut Lorsque le pointeur de la souris quitte un lien ou tout autre élément.
Lorsqu’ un élément de formulaire a le focus c.à.d. devient la zone
Focus
d'entrée active.
Blur Lorsqu’ un élément de formulaire perd le focus c.-à-d. que l'utilisateur
clique hors du champ et que la zone d'entrée n'est plus active.
Change Lorsque la valeur d'un champ de formulaire est modifiée.
Select Lorsque l'utilisateur sélectionne un champ dans un élément de
formulaire.
Submit Lorsque l'utilisateur clique sur le bouton Submit pour envoyer un
formulaire.
1. Les gestionnaires d'é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 :
<nombalise onévénement="fonction()">
Par exemple : onClick="alert('Vous avez cliqué sur cet élément')".
De façon littéraire, au clic de l'utilisateur, ouvrir une boite d'alerte avec le message indiqué.
a. Onclick : Evénement classique en informatique, le clic de la souris :
<FORM>
<INPUT TYPE="button" VALUE="Cliquez ici" onClick="alert('Vous avez cliqué ici')">
</FORM>
b. OnLoad et OnUnload : L'événement Load survient lorsque la page a fini de se charger. A l'inverse,
Unload 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>. On peut ainsi écrire un script pour souhaiter la bienvenue à l'ouverture d'une page et un petit
mot d'au revoir au moment de quitter celle-ci.
<HTML> </HEAD>
<HEAD> <BODY onLoad='bienvenue()' onUnload='au_revoir()'>
<SCRIPT LANGUAGE='Javascript'> Html normal
function bienvenue() { </BODY>
alert("Bienvenue à cette page"); </HTML>
}
function au_revoir() {
alert("Au revoir");
}
</SCRIPT>
12
c. OnmouseOver et OnmouseOut :
L'événement onmouseOver se produit lorsque le pointeur de la souris passe au dessus (sans cliquer) d'un lien
ou d'une image. Cet événement est fort pratique pour, par exemple, afficher des explications soit dans la barre
de statut soit avec une petite fenêtre genre infobulle.
L'événement onmouseOut, généralement associé à un onmouseOver, se produit lorsque le pointeur quitte la
zone sensible (lien ou image).
d. OnFocus :
L'événement onFocus survient lorsqu'un champ de saisie a le focus c.à.d. quand son emplacement est prêt à
recevoir ce que l'utilisateur à l'intention de taper au clavier. C'est souvent la conséquence d'un clic de souris ou
de l'usage de la touche "Tab".
e. 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, clique en dehors du champ ou utilise la touche "Tab"
pour passer à un champ. Cet événement sera souvent utilisé pour vérifier la saisie d'un formulaire.
f. Onchange :
Cet événement s'apparente à l'événement onBlur mais avec une petite différence. Non seulement la case du
formulaire doit avoir perdu le focus mais aussi son contenu doit avoir été modifié par l'utilisateur.
g. Onkeyup :
L’événement onkeyup est déclenché au cours de la saisie d’une zone de texte lorsque l’utilisateur relâche une
touche.
h. Onselect :
Cet événement se produit lorsque l'utilisateur a sélectionné tout ou partie d'une zone de texte dans une zone de
type text ou textarea.
2. Gestionnaires d'événement disponibles en Javascript :
Objets Gestionnaires d'événement disponibles
Fenêtre onLoad, onUnload
Lien hypertexte onClick, onmouseOver, onmouseOut
Elément zone de texte onBlur, onChange, onFocus, onSelect, onKeyup
Elément bouton onClick
Case à cocher onClick
Bouton Radio onClick
Liste de sélection onBlur, onChange, onFocus
Bouton Submit onClick, Onsubmit
Bouton Reset OnClick
3. Changement d'images :
Avec le gestionnaire d'événement onmouseOver, on peut prévoir qu'après le survol d'une image par
l'utilisateur, une autre image apparaisse (pour autant qu'elle soit de la même taille). Le code est:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript">
function apparaître()
{
document.images["nom_image"].src="image2.gif" ;
}
function disparaître()
{
document.images["nom_image "].src="image1.gif" ;
}
</SCRIPT>
</HEAD>
13
<BODY>
<A HREF="#" onmouseOver="apparaître()" onmouseOut="disparaître()">
<IMG SRC="image1.gif" name="nom_image" width=100 height=50 border=0> </A>
</BODY>
</HTML>
XII. Les formulaires :
Avec Javascript, les formulaires Html prennent une toute autre dimension. N'oublions pas qu'en Javascript, on
peut accéder à chaque élément d'un formulaire pour, par exemple, y aller lire ou écrire une valeur, noter un
choix auquel on pourra associer un gestionnaire d'événement... Tous ces éléments renforceront grandement les
capacités interactives de vos pages.
1. Le contrôle zone de texte :
L'objet text possède trois propriétés :
Propriété Description
name indique le nom du contrôle par lequel on pourra accéder.
defaultvalue indique la valeur par défaut qui sera affichée dans la zone de texte.
value indique la valeur en cours de la zone de texte. Soit celle tapée par
l'utilisateur ou si celui-ci n'a rien tapé, la valeur par défaut.
 Affecter le contenu d’une zone de saisie à une variable
Nom var=document.nomformulaire.nomzonedesaisie.value ;
 Modifier le contenu d’une zone de saisie
document.nomformulaire.nomzonedesaisie.value = expression ;
 Déterminer la largeur d’une zone de saisie en caractères
Nom var=document.nomformulaire.nomzonedesaisie.value.length ;
2. Les boutons radio :

L'objet radio possède cinq propriétés :
name indique le nom du contrôle. Tous les boutons portent le même nom.
index l'index ou le rang du bouton radio en commençant par 0.
checked indique l'état en cours de l'élément radio
defaultchecked indique l'état du bouton sélectionné par défaut.
value indique la valeur de l'élément radio.
 Vérifier si une case d’option est cochée ou non
Nom var= document.nomformulaire.nomgroupe[indice].checked ;
 Récupérer la valeur d’un bouton radio
Nom var= document.nomformulaire.nomgroupe[indice].value ;
 Récupérer le nombre d’options dans un groupe de cases d’options
Nom var= document.nomformulaire.nomgroupe.length ;
3. Les boutons case à cocher :
L'objet checkbox possède quatre propriétés :
name indique le nom du contrôle. Toutes les cases à cocher portent un nom
différent.
checked indique l'état en cours de l'élément case à cocher.
defaultchecked indique l'état du bouton sélectionné par défaut.
value indique la valeur de l'élément case à cocher.
 Vérifier si une case est cochée ou non
Nom var= document.nomformulaire.nomcase.checked ;
 Récupérer la valeur d’une case à cocher
Nom var= document.nomformulaire.nomcase.value ;
14
4. Liste de sélection :
L'objet Select possède quatre propriétés :
name indique le nom de la liste déroulante.
length indique le nombre d'éléments de la liste. S'il est indiqué dans le tag
<SELECT>, tous les éléments de la liste seront affichés. Si vous ne
l'indiquez pas, un seul apparaîtra dans la boîte de la liste déroulante.
selectedIndex indique le rang à partir de 0 de l'élément de la liste qui a été sélectionné par
l'utilisateur.
defaultselected indique l'élément de la liste sélectionné par défaut. C'est lui qui apparaît
alors dans la petite boîte.
 Accéder à une option d’une liste déroulante
Nom var= document.nomformulaire.nomliste.options ;
 Récupérer le texte d’une option d’une liste déroulante
Nom var= document.nomformulaire.nomliste.options[indice].text ;
 Récupérer la valeur d’une option d’une liste déroulante
Nom var= document.nomformulaire.nomliste.options[indice].value ;
 Récupérer le nombre d’options d’une liste déroulante
Taille = document.nomformulaire.nomliste.options.length ;
 Ajouter une nouvelle option dans une liste déroulante
Nom var= new Option (texte, valeur) ;
document.nomformulaire.nomliste.options[taille] = Nom var ;
 Supprimer une option d’une liste déroulante
document.nomformulaire.nomliste.options[indice] = null ;
15

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

Niveau : 4éme année Section : Informatique Matière : STI

1. Les limites du langage HTML :

II. Le code Javascript :

// Ceci est un commentaire /* Ceci est un commentaire

3. Les emplacements du code Javascript

III. Les objets Javascript :

Cette page s'affiche dans une fenêtre.

La hiérarchie des objets de cet exemple est donc :

fenêtre document formulaire bouton

2. Les propriétés des objets :

a- Méthodes de l’objet document :

b- Méthodes de l’objet window :

IV. Les variables :

d. Les opérateurs logiques :

V. Les entrées/sorties en Javascript :

VI. Les fonctions de conversion :

VII. L'objet Math

VIII. L'objet String:

IX. Les structures de contrôle :

2. Les structures itératives :

X. Les fonctions en Javascript :

 L'appel d'une fonction :

1. Les gestionnaires d'événements :

2. Les boutons radio :

Vous aimerez peut-être aussi