Chapitre 3

Programmation JavaScript
1. Introduction
JavaScript est un langage de programmation créé par les sociétés
Netscape et Sun Microsystems vers la fin de l'année 1995. C’est un
langage de programmation qui peut être inclus dans des pages
HTML destinées aux navigateurs WWW les plus courants.
JavaScript ne doit pas être confondu avec Java, qui est un langage
beaucoup plus complexe permettant de créer des applications
autonomes.
Son objectif principal : introduire de l'interactivité avec les pages
HTML.
Le moyen : introduire de petits programmes, appelés SCRIPTS,
dans les pages HTML..
1. Introduction
Grâce à ce langage, il est possible d’écrire des pages interactives.
Contrairement à l’utilisation du CGI (Common Gateway Interface,
programmation exécutée côté serveur), les réponses aux
événements déclenchés par le lecteur de la page se font au
niveau du navigateur, sans nécessité d’une transmission vers le
serveur d’où provient la page.
1. Introduction
JS est un langage de programmation de scripts orienté objet,
très simple et conçu pour des non spécialistes
 Il concourt à enrichir le HTML, pour développer des pages web
plus conviviales et interactives
 Il permet de manipuler le contenu de la page et animer son
aspect graphique
Il contient des gestionnaires d’événements: il reconnaît et réagit
aux demandes de l’utilisateur comme un clic de souris
2. Insertion du code JS dans une page HTML
Il existe trois manières d'insérer du code JavaScript dans un document
HTML :
a)Entre les balises <SCRIPT>....</SCRIPT> dans la section d'en-tête, ou
dans le corps de la page. Dans la section <head> , le code JS n'est pas
exécuté tout de suite. Dans la section <body>, le code est immédiatement
exécuté en même temps que le code HTML est interprété
<!DOCTYPE HTML>
<html>
<head>
<title>Titre</title>
<script type="text/javascript">

</script>
</head>
<body>
</body>
</html>
Exemple:
b) Faire appel à l'élément script, mais cette fois-ci le code JavaScript se
trouve dans un fichier externe. Dans ce cas, l'élément script précise à
l'aide de l'attribut src l'emplacement du fichier JavaScript.
<!DOCTYPE HTML>
<html>
<head>
<title>Titre</title>
<script type="text/javascript" src="essai.js"></script>
</head>
<body></body>
</html>
c) Associer le code JS à une balise HTML qui gère un évènement « onClick,
onMouse …».
Exemple:
Les bases de la programmation
JavaScript
3. Les variables
Le concept des variables
Une variable est un objet repéré par son nom, pouvant contenir des
données, qui pourront être modifiées lors de l'exécution du
programme.
En Javascript, les noms de variables peuvent être aussi long que l'on
désire, mais doivent répondre à certains critères :
- un nom de variable doit commencer par une lettre (majuscule
ou minuscule) ou un "_"
- un nom de variables peut comporter des lettres, des chiffres et
les caractères _ et & (les espaces ne sont pas autorisés)
- Les noms de variables ne peuvent pas être des mots réservés
(abstract, goto, var, void, while, void, with, return, private, public…)
3. Les variables
Déclaration des variables
Le JavaScript est un langage très souple au niveau de l'écriture (car
il laisse passer des erreurs...), la déclaration des variables peut se
faire de deux façons :
 soit de façon explicite, en faisant précéder la variable du mot
clé var qui permet d'indiquer de façon rigoureuse qu'il s'agit
d'une variable :
var chaine= "bonjour"
 soit de façon implicite, en laissant le navigateur déterminer
qu'il s'agit d'une déclaration de variable. Pour déclarer
implicitement une variable, il suffit d'écrire le nom de la variable
suivie du caractère = et de la valeur à affecter :
chaine= "bonjour"
3. Les variables
Déclaration des variables
Même si une déclaration implicite est tout à fait reconnue par le
navigateur, il est plus rigoureux de déclarer les variables de façon
explicite avec le mot var.
Exemple:
3. Les variables
Les types de données dans les variables
le Javascript n'autorise la manipulation que de 4 types de données :
Pour identifier le type de la variable, la fonction typeof(Nom_du_var) retourne le

type d’une variable
Exemple:
3. Les variables
Conversion des types
Javascript gère la conversion des types d’une façon transparente
(implicite).
Parfois il est nécessaire de faire la conversion d’une façon explicite ,
On distingue les fonctions de conversions suivantes :
• parseInt(chaine,[,base]): conversion d’une chaîne en entier dans
une base désignée (10, 2, 8,16…).
•parseFloat() permet de convertir une variable en nombre décimal
RQ: en cas d’erreur elles retournent NaN (Not a Number)
• toString() permet de convertir une variable en une chaine de
caractères
4. Les opérateurs
Les opérateurs arithmétiques
4. Les opérateurs
Les opérateurs de comparaison
Le résultat renvoyé par une opération de comparaison est une
valeur booléenne
4. Les opérateurs
Les opérateurs logiques
4. Les opérateurs
Les opérateurs d’affectation
4. Les opérateurs
Les opérateurs d’incrémentation
4. Les opérateurs
Les opérateurs de concaténation
L'opérateur '+' lorsqu'il est utilisé avec des chaînes de caractères
permet de les concaténer, c'est-à-dire de joindre bout-à-bout les
deux chaînes de caractères :
var1='a‘;
var2=var1+'b'; // var2='ab'
Les boites de dialogue
4. Les boites de dialogue
Une boîte de dialogue est une fenêtre qui s'affiche au premier plan
suite à un événement, et qui permet
• Soit d'avertir l'utilisateur
• Soit le confronter à un choix
• Soit lui demander de compléter un champ pour récupérer une
information
JavaScript en propose trois différentes alert(), prompt(), confirm().

Ce sont des méthodes de l'objet window.
a) La méthode alert()
La méthode alert() permet d'afficher dans une boîte toute simple
composée d'une fenêtre et d'un bouton (OK), le texte qu'on lui
fournit en paramètre. Dès que cette boîte est affichée, l'utilisateur
n'a d'autre alternative que de cliquer sur le bouton OK.
Le paramètre unique de cette méthode est une chaîne de caractère.

On peut donc lui fournir:
• directement cette chaîne de caractères entre guillemets,
• lui fournir une variable dont il affichera le contenu,
•ou bien mêler les deux en concaténant les chaines
• grâce à l'opérateur +.
a) La méthode alert()
alert(nom_de_la_variable);
alert('Chaîne de caractères');
alert('Chaîne de caractères' + nom_de_la_variable);
alert('Message à afficher');
a) La méthode confirm()
La méthode confirm() est similaire à la méthode alert(), si ce n'est
qu'elle permet un choix entre "OK" et "Annuler".
Lorsque l'utilisateur appuie sur "OK" la méthode renvoie la valeur
true. Elle renvoie false dans le cas contraire...
Elle admet comme alert() un seul paramètre: une chaîne de
caractères...
confirm('Chaîne de caractères');
Exemple:
nvar=confirm('Question');
nvar=true si OK
nvar=false si Annuler
a) La méthode prompt()
La méthode prompt est un peu plus évoluée que les deux
précédentes puisqu'elle fournit un moyen simple de récupérer une
information provenant de l'utilisateur, on parle alors de boîte
d'invite.
La méthode prompt() requiert deux arguments :
• le texte d'invite
• la chaîne de caractères par défaut dans le champ de saisie
prompt('Posez ici votre question','chaîne par défaut');
a) La méthode prompt()
Cette boîte d'invite retourne la valeur de la chaîne saisie par
l'utilisateur, elle retourne la valeur null si jamais aucun texte n'est
saisi...
Exemple:
nvar=prompt('Question', 'chaîne par défaut');
nvar =la valeur de la chaîne insérée (si ok) si non nvar= Null
Exercice: Interprétez les lignes suivantes:
<html>
<head>
<script language="javascript">
function Afficher()
{
nvar=prompt('Insérer votre Prénom', 'Prénom');
alert('Vous avez inséré '+nvar);
ok=confirm('Afficher votre Prénom');
if(ok==true) { document.write('Bonjour '+nvar);}
</script>
</head>
<body>
<input type="button" onclick="Afficher();" value="Valider" />
</body>
</html>
Les structures de contrôle
5. Les structures de contrôle conditionnelles
On appelle structure de contrôle les instructions qui permettent de
tester si une condition est vraie ou non, ce qui permet notamment
de donner de l'interactivité à vos scripts.
a) L’instruction conditionnelle « if» simple

if (<condition>) {<bloc d’instructions >}
b) L’instruction conditionnelle « if … else»

if (<condition>) {<bloc d’instructions 1>}
else {<bloc d’instructions 2>}
RQ : Il est à noter que les instructions « if » peuvent être imbriquées

5. Les structures de contrôle conditionnelles
Remarque:
• La condition doit être entre des parenthèses
• Il est possible de définir plusieurs conditions à remplir avec les
opérateurs ET et OU (&& et ||)
c) l’instruction de sélection multiple « switch »

switch ( <variable> )
{ case Cte1 : <bloc d’instructions 1> break;
case Cte2 : <bloc d’instructions 2> break;
….
case CteN: <bloc d’instructions N>
[ default : <bloc d’instructions> ]
}
5. Les structures de contrôle itératives
a) l’instruction itérative « for »
for ( <initialisation> ; <test_de_boucle> ; <incrémentation>)
{
<bloc d’instructions>
}
b) L’instruction itérative « while »
while ( <condition> )
{
<bloc d’instructions>
}
c) L’instruction itérative « do… while »
do {
<action>
...
} while ( <condition> )
Les tableaux en JavaScript
6. Les tableaux
Un tableau, en JavaScript, est une variable pouvant contenir
plusieurs données indépendantes, indexées par un numéro, appelé
indice. L'indice d'un tableau est ainsi l'élément permettant
d'accéder aux données qui y sont stockées.
Indice 0 1 2 3
Donnée donnée 1 donnée 2 donnée 3 donnée 4
Remarque
Le premier élément d'un tableau porte toujours l'indice 0 !
Dans un tableau à n éléments, le nième élément porte ainsi l'indice n-1.
Le langage JavaScript propose l'objet Array, comportant de
nombreuses méthodes permettant de manipuler les tableaux, c'est-
à-dire d'insérer, supprimer, ou extraire des éléments dans le tableau
et également de trier les éléments du tableau.
6. Les tableaux
a) Création de tableau
Le langage JavaScript fournit plusieurs façons de créer un tableau :
var MonTableau = ["donnée 1", "donnée 2"];

var MonTableau = new Array("donnée 1", "donnée 2");
b) Accès aux données

L'accès aux éléments du tableau se fait en écrivant le nom du
tableau suivi de crochets contenant l'indice de l'élément.
Les fonctions en JavaScript
7. Les fonctions
a) Déclaration des fonctions
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.
Une fonction en javascript est déclarée comme suit:
function Nom_De_La_Fonction(argument1, argument2, ...)
{ liste d'instructions }
7. Les fonctions
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.
Une fonction en javascript est déclarée comme suit:
function Nom_De_La_Fonction(argument1, argument2, ...)
{ liste d'instructions }
• (argument1, argument2, ...): Le couple de parenthèses contenant des

arguments servent à fournir des informations à la fonction lors de son exécution
• { liste d’instructions } contenant le code que la fonction devra exécuter à
chaque appel
•Une fonction peut retourner ou non un résultat, pour retourner un résultat on
utilise l’instruction return.
7. Les fonctions
Tout comme les variables, les noms de fonctions sont limités aux
caractères alphanumériques (dont les chiffres) et aux deux
caractères suivants : _ et $.
b) Appel des fonctions

Pour exécuter une fonction, il suffit de faire appel à elle en écrivant
son nom (une fois de plus en respectant la casse) suivie d'une
parenthèse ouverte (éventuellement des arguments) puis d'une
parenthèse fermée :
Nom_De_La_Fonction(arguments);
7. Les fonctions
Exemple1:
function Affiche(message)
{document.write(message);}
//Appel
Affiche('hello');
Exemple2:
function somme(a,b)
{ som=a+b;
return som;}
//Appel
Res=somme(1,3);
7. Les fonctions
Exemple3:
7. Les fonctions
c) La portée des variables
Soit le code suivant :
=> On déclare une variable dans laquelle on stocke du texte puis on crée une fonction qui
se charge de l'afficher à l'écran et enfin on exécute cette dernière : Pas de problème
7. Les fonctions
c) La portée des variables
Soit le code suivant :
=> Aucun résultat !! L'erreur (retourné par le navigateur) indique que la variable x n'existe
pas. Toute variable déclarée dans une fonction n'est utilisable que dans
cette même fonction !
La gestion des événements en
JavaScript
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 le
clic de souris, car c'est le seul que le HTML gère.
Grâce au JavaScript il est possible d'associer des fonctions, des

méthodes à des événements tels que le passage de la souris au-
dessus d'une zone, le changement d'une valeur, ...
onEvenement="Action_Javascript_ou_Fonction();"
Les gestionnaires d'événements sont associés à des objets, et leur

code s'insère dans la balise de ceux-ci. Chaque événement ne peut
pas être associé à n'importe quel objet. Ainsi par exemple,
l'événement OnChange ne peut pas s'appliquer à un lien hypertexte.
Liste des événements
Liste des événements
Le tableau ci-dessous résume les objets et les événements
associés :
Traitement de formulaire
Accès aux textes contenus dans les champs
A) Éléments de formulaire concernés
- boîtes de saisie de texte (INPUT type="text")
- saisie de textes sur plusieurs lignes (TEXTAREA)
- boîtes de saisie masquées (INPUT type="password")
i) Lecture de contenu
La principale action en javascript sur une zone de texte est de
manipuler son contenu.
document.nom_formulaire.nom_element.value
ii) Ecriture dans un champs

document.nom_formulaire.nom_element.value = texte;
Le champ contiendra le texte affecté à l'élément, ce texte

remplacera celui qui était affiché.
iii) Lecture du texte par défaut
document.nom_formulaire.nom_element.defaultValue
Exemple:
<html>
<head>
function controle() {
var test = document.form1.input.value;
alert("Vous avez tapé : " + test);
}
</script>
</head>
<body>
<form name="form1">
<INPUT TYPE="text" NAME="input" VALUE=""><BR>
<INPUT TYPE="button" NAME="button" VALUE="Contrôler" onClick="controle()">
</form>
</body>
</html>
Exemple:
<html>
<head>
function afficher() {
var testin =document. form2.input.value;
document.form2.output.value=testin
}
</script>
</head>
<body>
<form name="form2">
<INPUT TYPE="text" NAME="input" VALUE=""> Zone de texte d'entrée <BR>
<INPUT TYPE="button" NAME="bouton" VALUE="Afficher" onClick="afficher()"><BR>
<INPUT TYPE="text" NAME="output" VALUE=""> Zone de texte de sortie
</form>
</body>
</html>
C) Accès aux éléments de type boutons radio
Les boutons radio sont utilisés pour noter un choix, et seulement un
seul, parmi un ensemble de propositions.
<html>
<head>
function choixprop() {
if (form3.choix[0].checked) { alert("Vous avez choisi la proposition " + form3.choix[0].value) };
}
</script>
</head>
<body>
Entrez votre choix :
<form name="form3">
<INPUT TYPE="radio" NAME="choix" VALUE="1">Choix numéro 1<BR>
<INPUT TYPE="button"NAME="but" VALUE="Quel et votre choix ?" onClick="choixprop()">
</form>
</body>
</html>
Dans le formulaire nommé form3, on déclare trois boutons
radio. Notez que l'on utilise le même nom pour les trois
boutons. Vient ensuite un bouton qui déclenche la fonction
choixprop().
Cette fonction teste quel bouton radio est coché. On accède aux
boutons sous forme d'indice par rapport au nom des boutons
radio soit choix[0], choix[1], choix[2]. On teste la propriété
checked du bouton par if(form3.choix[x].checked).
Dans l'affirmative, une boite d'alerte s'affiche. Ce message
reprend la valeur attachée à chaque bouton par le chemin
form3.choix[x].value.
La déclaration du formulaire crée un groupe de radio-

boutons liés : le nom du groupe est os.
La fonction javascript a
comme paramètre le
groupe des radio-boutons.
Une boucle parcourt la liste des
boutons du groupe. On repère le
bouton qui a la propriété checked à
true et on affiche alors la valeur
correspondante
B) Accès aux éléments de type cases à cocher
Les boutons case à cocher sont utilisés pour noter un ou plusieurs
choix (pour rappel avec les boutons radio un seul choix) parmi un
ensemble de propositions. A part cela, sa syntaxe et son usage est
tout à fait semblable aux boutons radio sauf en ce qui concerne
l'attribut name.
i) Cocher ou décocher un choix
Pour détecter qu'une case est cochée, il faut utiliser sa propriété
checked.
document.nom_formulaire.nom_element.checked = true/false
ii) Obtenir le choix coché par défaut au chargement

document.nom_formulaire.nom_element.defaultChecked
<html>
<head>
function reponse() {
if ( (form4.check1.checked) == true && (form4.check2.checked) == true &&
(form4.check3.checked) == false && (form4.check4.checked) == true)
{ alert("C'est la bonne réponse! ") }
else
{alert("Désolé, continuez à chercher.")}
}
</script>
</head>
<body>
<FORM NAME="form4">
<INPUT TYPE="CHECKBOX" NAME="check1" VALUE="1">Choix numéro 1<BR>
<INPUT TYPE="button" NAME="but" VALUE="Corriger" onClick="reponse()">
</form>
</body>
</html>
D) Accès aux éléments de type Select
Le contrôle liste de sélection vous permet de proposer diverses options
sous la forme d'une liste déroulante dans laquelle l'utilisateur peut cliquer
pour faire son choix. Ce choix reste alors affiché. La boite de la liste est
crée par la balise <SELECT> et les éléments de la liste par un ou plusieurs
tags <OPTION>. La balise </SELECT> termine la liste.
i) Lire le ou les choix
document.nom_formulaire.nom_element.options[num_case].selected
// retourne une valeur true/false
document.nom_formulaire.nom_element.options[num_case].value
// retourne le nom donné au choix
document. nom_formulaire.nom_element.length
// retourne le nombre de choix possibles dans la liste
document.nom_formulaire.nom_element.options[num_case].text
// retourne le texte HTML associé
document.nom_formulaire.nom_element.selectedIndex
//Obtenir le choix sélectionné
ii) Modifier les choix
document.nom_formulaire.nom_element.options[num_case].selected = true/false
<html>
<head>
<script language="javascript"> function liste() {
alert("L\'élément " + (form5.list.selectedIndex + 1)); }
</script>
</head>
<body>
<form name="form5">
<SELECT NAME="list">
<OPTION VALUE="1">Elément 1
</SELECT>
<INPUT TYPE="button"NAME="b" VALUE="Quel est l'élément retenu?" onClick="liste()">
</form>
</body>
</html>
Vérification d’un formulaire
Vérifier qu'un formulaire est bien rempli est un grand classique en JS.
Exemple1: Vérifier si les champs d’un formulaire sont vides
On veut que le formulaire soit vérifié
juste avant d'être expédié
On utilise l'événement onsubmit
de la balise form
Quand le formulaire va être envoyé,
on appelle le code javascript dans
onsubmit.
Si la valeur de onsubmit a la forme
return nomDeFonction():
• Si la fonction renvoie true,
l'action est effectuée
• Sinon, le formulaire n'est pas expédié
Exemple2: Formulaire à inspecter
Fonctions à créer:
• une fonction pour vérifier le pseudo (on vérifie juste la longueur :
entre 2 et 25 caractères) ;
• une pour l'adresse e-mail;
• une pour l'âge (on va dire qu'il doit être compris entre 5 et 111 ans) ;
• une méga-fonction (à partir des précédentes) qui vérifie tout.
a) Fonction pour changer la couleur de fond d’un champ donné
Si le formulaire est mal rempli, en plus de bloquer l'envoi, on va
colorer les champs qui posent problème. On va modifier sa couleur
d'arrière-plan.
b) Vérification du champ pseudo
Vérifier que la longueur est correcte : entre 2 et 25 caractères.
Appel de la fonction verifPseudo:

c) Vérification du champ mail
Utiliser un objet regrex pour vérifier le champ mail
Appel de la fonction verifMail:

d) Vérification du champ age
Pour contrôler l'âge, il faut avant tout le convertir en entier (grâce à
parseInt) pour pouvoir le comparer aux âges limites, en n'oubliant pas
de vérifier qu'il s'agisse bien d'un nombre (avec isNaN).
Appel de la fonction verifMail:

e) Tout vérifier avant l’envoi
Une méga-fonction appelle les trois fonctions et renvoie true si tout
est bon.
e) Tout vérifier avant l’envoi
Autoriser ou bloquer l’envoie?
Pour autoriser ou bloquer l'envoi, il suffit de renvoyer true ou false
lorsque le formulaire est envoyé (onSubmit)

Chapitre 3

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

Chapitre 3

Transféré par

Droits d'auteur :

Formats disponibles

Programmation JavaScript

Pour identifier le type de la variable, la fonction typeof(Nom_du_var) retourne le

JavaScript en propose trois différentes alert(), prompt(), confirm().

Le paramètre unique de cette méthode est une chaîne de caractère.

a) L’instruction conditionnelle « if» simple

b) L’instruction conditionnelle « if … else»

RQ : Il est à noter que les instructions « if » peuvent être imbriquées

c) l’instruction de sélection multiple « switch »

Donnée donnée 1 donnée 2 donnée 3 donnée 4

var MonTableau = ["donnée 1", "donnée 2"];

b) Accès aux données

• (argument1, argument2, ...): Le couple de parenthèses contenant des

b) Appel des fonctions

Grâce au JavaScript il est possible d'associer des fonctions, des

Les gestionnaires d'événements sont associés à des objets, et leur

ii) Ecriture dans un champs

Le champ contiendra le texte affecté à l'élément, ce texte

La déclaration du formulaire crée un groupe de radio-

ii) Obtenir le choix coché par défaut au chargement

Appel de la fonction verifPseudo:

Appel de la fonction verifMail:

Appel de la fonction verifMail:

Vous aimerez peut-être aussi