Scribd
Importer
45 vues19 pages

JavaScript Complet

Ce livre vous enrichira

Transféré par

docteurludovic081
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
45 vues19 pages

JavaScript Complet

Ce livre vous enrichira

Transféré par

docteurludovic081
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

CHAPITRE3 : LE JAVASCRIPT

LECON1 :
Introduction au langage JavaScript

I. Généralités
Le JavaScript est un langage de script incorporé au langage HTML. Il est créé par Netscape en
décembre 1995. Un Script est une portion de code inséré dans une page HTML et qui permet
d’exécuter une tâche.

Ce langage est un langage de programmation qui permet d'apporter des améliorations au langage
HTML en permettant d'exécuter des commandes du côté client. Le JavaScript est un langage
interprété (besoin du navigateur pour interpréter le code). Contrairement à HTML c’est un
langage sensible à la CASSE c'est-à-dire qu’il fait une différence entre les variables contenant
des majuscules ou pas. Mavariable, MaVariable et Mavariable sont des variables différentes pour
JavaScript.

Le JavaScript est majoritairement utilisé sur Internet, conjointement avec les pages web HTML
dans lesquelles il est inclus (ou dans un fichier externe). Le JavaScript permet de « dynamiser »
une page HTML en ajoutant des interactions avec l’utilisateur, des animations, de l’aide à la
navigation. Par exemple :

 Afficher/masquer du texte ;

 Faire défiler des images ;

 Créer un diaporama avec un aperçu « en grand » des images ;

 Créer des infobulles…

Le JavaScript est un langage dit client-side, c’est-à-dire que les scripts sont exécutés par le
navigateur de l’internaute (le client).

PROPOSE PAR M. MEZAH 1


Pré-requis :

1- Pour écrire des scripts JavaScript il faut avoir une bonne connaissance du langage HTML.

2- JavaScript est un langage de programmation, l’écriture d’un code JavaScript doit


respecter les normes de programmation départementale

II. Insertion d’un Script JavaScript dans une page HTML.


Il existe plusieurs façons d’incorporer un Script JavaScript dans une page HTML. Toutefois, peu
importe la manière ou l’endroit où vous allez l’intégrer il faut préciser au navigateur qu’un script
JavaScript va être exécuté en plaçant le code JavaScript entre les balises <script> et </script>
comme suit :

<script language="javascript"> votre code javascript ici</script >

ou
<script type="text/javascript"> votre code javascript ici</script >

ou
<script src ="[Link]"></script > (appel d'un fichier externe)

La méthode la plus utilisée pour insérer un script JavaScript et celle utilisée par la plus grande
majorité des programmeurs consiste à insérer directement le code dans une page HTML aux
endroits suivants :

1. À l’intérieur de la balise <head></head>

L’insertion d’un script JavaScript à l’intérieur des balises <head></head> permet d’exécuter le
code JavaScript d’une manière différée, c'est-à-dire que le code est d’abord lu par le navigateur,

PROPOSE PAR M. MEZAH 2


stocké en mémoire et exécuté à la demande de l’utilisateur par un code correspondant à un
événement.

2. À l’intérieur de la balise <body></body>

On l'appelle exécution directe, car le code s'exécute automatiquement lors du chargement de la


page HTML dans le navigateur. Le code JavaScript est placé dans le corps même de la page
HTML, entre les balises <body></body>. Dans ce cas, le code s'exécutera automatiquement lors
du chargement de la page HTML dans le navigateur du client, avant même que le contenu de la
page HTML ne s'affiche à l'écran.

3. Le code JavaScript se trouve à l’extérieur du document HTML

Nous pouvons insérer un code JavaScript en appelant un fichier externe dont l’extension est js.
Dans ce cas, nous pouvons appeler le fichier en question soit dans le corps du code HTML entre
<body></body> ou à l’intérieur des balises <head></head>. Pour appeler un fichier externe, il
suffit d’utiliser la balise :

<script src ="adresse_du_fichier_externe"> </script>

Exemple

<script src ="[Link]">

4. À l’intérieur des Balises

Le code JavaScript contenu dans les balises est toujours attaché à un événement. Les événements
sont des attributs des balises HTML et ne sont pas applicables à toutes les balises. Par exemple,
une image (« img ») ne pourra pas réagir à l'événement « onClick ».

III. Éléments du langage JavaScript


1- Les commentaires

Comme tout programme, un code JavaScript doit être documenté. L’insertion de commentaires
aide à expliquer certaines instructions du code JavaScript :

Pour insérer une ligne de commentaire, utiliser // suivi du commentaire

Pour insérer un commentaire sur plusieurs lignes (consécutives) placer le entre /* et */ (/*
commentaires */)

2- Les types et la déclaration de variables

Déclaration des variables

PROPOSE PAR M. MEZAH 3


Le JavaScript est un langage faiblement typé, car on n’indique pas le type des variables lors de la
déclaration. Lors de la déclaration des variables, le type est fixé implicitement par le type de la
donnée affectée à la variable.

Pour déclarer une variable, il vous faut d'abord lui trouver un nom. Il est important de préciser
que le nom d'une variable doit respecter certaines conditions :

 Les variables doivent être déclarées avant leur utilisation.

 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 !)

 Aucun mot réservé ne doit être utilisé pour les noms de variables

Exemple de mots réservés

abstract, boolean, break, byte, case, catch, char, class, const, continue, debugger, default, delete,
do, double, else, export, extends, false, final, finally, float, for, function, var, …

La déclaration de la variable peut contenir ou non le mot clef var. Une variable déclarée avec le
mot clef var (on parle de déclaration explicite) est locale à la fonction où la variable est déclarée.
Une variable déclarée sans le mot clef var (on parle de déclaration implicite) est globale.

Pour déclarer une variable, il vous suffit d'écrire la ligne suivante :

var myVariable ;

Une fois déclarée, vous pouvez y stocker ce que vous souhaitez.

Les types de variable

Il existe principalement trois types de variables en JavaScript :

 Le type number : Il représente tous les nombres, que ce soit un entier, un négatif, un
nombre scientifique, etc... Bref, c'est le type pour les nombres. Pour assigner un type
numérique à une variable, il vous suffit juste d'affecter le nombre à la variable :

var number = 5;

 Le type string : Ce type représente n'importe quel texte. On peut l'assigner de deux
façons différentes :

var text1 = "Mon premier texte"; // Avec des guillemets.

var text2 = 'Mon deuxième texte'; // Avec des apostrophes.

PROPOSE PAR M. MEZAH 4


 Le type boolean qui définit une variable logique (qui prend la valeur true (vrai) ou la
valeur false(faux)) ;

3- Les opérateurs

Dans la plupart des cas les opérateurs utilisés en C sont les mêmes qu’en JavaScript
Exemple :
Opérateurs Rôle ou signification
Arithmétique
+ Addition de nombres ou concaténation de chaînes de caractères
- Soustraction
* Multiplication
/ Division
% Modulo (reste de le division)
++ Incrémentation (ajouter 1)
-- Décrémentation (retirer 1)
Logique
&& Opérateur logique qui veut dire ET
|| Opérateur logique qui veut dire OU
! Non
Comparaison
Égal (vérifier l’égalité du contenu de deux nombre, s’utilise
==
dans un test d’une condition)
Égal (vérifier l’égalité du contenu et du type de deux nombre,
===
s’utilise dans un test d’une condition)
!= Inégal ou différent
> Supérieur
>= Supérieur ou égal
< Inférieur
<= Inférieur ou égal
Affectation
= var1=var2 veut dire var1 reçoit le contenu de var2
+= var1+=var2 identique à var1 =var1+var2
-= var1-=var2 identique à var1 =var1-var2
*= var1*=var2 identique à var1 =var1*var2
/= var1/=var2 identique à var1 =var1/var2
%= var1%=var2 identique à var1 =var1%var2
Concaténation
+ L'opérateur + permet de concaténer deux chaînes

PROPOSE PAR M. MEZAH 5


Conditionnelle
L'opérateur conditionnel « ? » évalue dans un premier temps la
condition donnée de manière booléenne puis, en fonction du
? résultat, choisi entre deux instructions. Exemples :
• ((a > b) ? 10 : 20) équivaut à 10 ;
• ((a < b) ? 10 : 20) équivaut à 20.

4- Conversions de types
JavaScript est (très) souple sur la notion de typage. JavaScript applique « automatiquement »
certaines conversions de type sur les valeurs lorsque le contexte le nécessite :

 vers le type boolean,

 vers le type string,

 vers le type number.

Une chaine dont les caractères représentent un nombre est convertie en ce nombre
NB : dans une expression avec l’opérateur + (opérateur de concatenation) c’est la conversion
vers chaine qui l’emporte
NaN (Not a Number) est la valeur de retour pour toute expression qui ne peut être
convertie en un nombre. On peut tester si le contenu d’une variable est un nombre avec
la fonction isNaN.
" 12.5 " *3; // -> 37.5
"99" -5; // -> 94
"99"+5 // -> "995"
" deux " *3; // -> NaN
isNaN (" deux " *3) ; // -> true

parseInt() et parseFloat()
Ils permettent de convertir une chaine en nombre (entier ou flottant). Seul le premier nombre
dans la chaine est retourne, les autres caractères (y compris correspondant à des nombres) sont
ignorés si le premier caractère ne peut être converti en un nombre, le résultat sera NaN. Les
espaces en début sont également ignorés
Exemple :
parseFloat ("1.24 "); // -> 1.24
parseInt ("42"); // -> 42

PROPOSE PAR M. MEZAH 6


parseInt ("42 est la reponse "); // -> 42
parseInt (" 42 est la reponse "); // -> 42
parseInt ("42estlareponse "); // -> 42
parseInt ("42 43 44"); // -> 42
parseInt ("reponse = 42"); // -> NaN

Égalités étranges
Du fait de la conversion, dans certains cas des valeurs de types différents peuvent être
considérées égales. Par exemple :
1 == "1" // -> true
10 != "10" // -> false
1 == "un" // -> false
0 == false // -> true
"0" == false // -> true
L’opérateur === teste à la fois le type et la valeur (négation !==).
1 === "1" // -> false
0 === false // -> false
10 === 9+1; // -> true
1 !== "1"; // -> true

IV. Les entrées/Sorties

Les entrées/sorties en JS sont des éléments permettant de faire entrer ou de faire sortir une
information. On peut citer entre autres :

Prompt ()

Ouvre une boîte de dialogue avec une zone de saisie et 2 bouton : OK et Annuler, rend
l’information lue.

Attention : le résultat est de type string, prévoir des conversions avec parseInt ou parseFloat si
nécessaire.

Alert ()

Permet d’écrire un message dans une fenêtre (boite de dialogue)

Confirm ()

PROPOSE PAR M. MEZAH 7


Cette méthode ouvre une boîte de dialogue contenant un message (généralement une question)
avec 2 boutons : OK pour true et Annuler pour false. Elle permet : d'envoyer une information, de
recevoir un booléen

[Link] () et [Link]()

Permet d’écrire directement dans la fenêtre HTML

V. Structures de contrôle

Les structures de contrôle permettent de contrôler l’exécution d’un programme en faisant des
tests sur les valeurs d’une variable. Il existe plusieurs structures de contrôle. Seuls 2 sont
présentées ici en quelque détail.

1. Structure conditionnelle
Elle se présente sous la forme suivante :
if (condition) {
séquence d’instructions si true;
}else{
séquence d’instructions si false
}
Exemple :
if (i % 2 == 0) {
return i/2;
}else {
return 3*i+1;
}
 La partie else n’est pas obligatoire
 false, 0, "", NaN, null, undefined valent false, tout le reste vaut true

2. Structures itératives : Pour


Elle se présente sous la forme suivante :
for (var i = inf ; i < max ; i=i+1) { // i=i+1 s’écrit aussi i++
Séquence d’instructions ;
}
3. Structures itératives : Tant que
Elle se présente sous la forme suivante :
while ( condition ) {
Séquence d’instructions ;
}

4. Structures itératives : Répéter

PROPOSE PAR M. MEZAH 8


Elle se présente sous la forme suivante :
do {
séquence d’instructions;
}while (condition ) ;

NB :
 Pour sortir brusquement d’une boucle, on utilise l’instruction break. Le mot clé break
permet de quitter une boucle avant d'avoir atteint la fin de celle-ci.
 Le mot clé « continue » permet de « sauter » une itération en passant directement à la
suivante

VI. Fonctions

1. Déclaration d’une fonction

Le mot-clef function permet de définir une donnée de type fonction. On précise entre parenthèses
les paramètre formels, séparés par des virgules. Le corps de la fonction est noté entre accolades.
La valeur de retour d’une fonction est précisée par return. Quand ce mot n’est pas présent dans
le corps de la fonction, la fonction se comporte alors comme une procédure. Une fonction en
JavaScript doit être déclarée selon le modèle suivant :

function(param1, param2, ...) {


instruction ;
instruction ;
…
return resultat;
}
2. Appel et nommage

Un appel à une fonction est donc un ordre donné au navigateur pour exécuter des lignes de codes
placées hors du bloc de code appelant. L’appel se fait de deux manières :
 Soit directement en donnant le nom de la fonction et les arguments qu’elle accepte
quand la fonction ne retourne pas de valeurs
 Soit en affectant le résultat de la fonction à une variable.
On appelle une fonction en précisant les paramètres effectifs entre parenthèses on peut nommer
une fonction en définissant une variable dont la valeur est de type fonction
// équivalent à :
function exemple (x, y) { // var exemple = function (x,y) {
var valeur = x+y;
return 2* valeur + 1 ;
}
//appel de la fonction

PROPOSE PAR M. MEZAH 9


exemple (2 ,3); // vaut 11
3. Règle de portée (locale et globale)

La portée ou périmètre peut être assimilée à la « région » du programme où la variable est définie
et utilisable. Il existe deux périmètres :
 Global, cela signifie que la variable est définie partout dans le code JavaScript ;
 Local, cela signifie que la variable est définie dans une portion de code restreinte,
généralement une fonction.
En bref, Toute définition de variable dans une fonction est locale à la fonction. Une variable
locale masque une variable globale de même nom

VII. Tableaux

Les tableaux permettent de stocker plusieurs valeurs dans une seule variable. La déclaration
d’une variable de type tableau se fait en utilisant l’instruction suivante :
var mon_tableau = new Array();
ou encore en précisant la taille du tableau
var mon_tableau = new Array(10);
ou encore en spécifiant les valeurs à insérer dans le tableau :
var mon_tableau = new Array("valeur1","valeur2", "valeur3", ...)
L’accès à un élément du tableau se fait en spécifiant l’indice (le rang) de l’élément :
mon_tableau[0]
Il est bien sûr possible de donner plusieurs dimensions à un tableau, comme en algorithmique :
var mon_tableau[10][10]
permet de définir un tableau de deux dimensions. Enfin, pour obtenir la longueur d’un tableau,
nous pouvons utiliser la propriété length :
mon_tableau.length

PROPOSE PAR M. MEZAH 10


LECON 2
Le modèle objet du navigateur

Nous avons vu dans les paragraphes précédents la syntaxe du langage JavaScript, et quelques-
unes de ses principales fonctions et instructions. Nous allons maintenant aborder la méthode de
programmation du navigateur lui-même. Nous allons en particulier nous intéresser à la notion
d’objets et d’évènements.

I. Les différents objets


Un objet est une entité appartenant au monde des navigateurs ou au langage lui-même. Ils sont
soit prédéfinis, soit créés de toute pièce par le programmeur. Un objet possède des propriétés, qui
le caractérisent, et des méthodes, qui lui permettent d’effectuer des actions, et peuvent réagir à
des évènements.

1. L’organisation des objets du navigateur

L’objet qui nous intéressera particulièrement dans la programmation JavaScript est l’objet
Window, qui modélise la fenêtre du navigateur. Les différents éléments qui peuvent composer
une page HTML sont ainsi organisés de manière hiérarchique à partir de cet objet Window.

Figure 2.1 Hiérarchie des objets du navigateur

PROPOSE PAR M. MEZAH 11


De la figure précédente, on peut par exemple déduire qu’un formulaire (form) peut contenir un
objet Text, un objet Button, etc..

2. Les classes de bases de l’objet navigateur

Les objets sont automatiquement instanciés à chaque étape du fonctionnement du navigateur, par
exemple lors de l’ouverture d’une fenêtre ou de frames, la création des documents contenus dans
chaque fenêtre ou frame, et les divers éléments (formulaires, images, liens ...) contenus dans
chaque élément.

Les applications JavaScript peuvent alors dialoguer avec ces objets visuels et les manipuler. Le
programmeur peut ainsi agir sur l’état du navigateur, de ses fenêtres et des documents et des
composants qui y sont inclus.

Quelques-uns des objets souvent manipulés :

 navigator : c’est le logiciel client dont le nom est noté dans [Link]
 window : l’objet de plus haut niveau créé par le navigateur, c’est sa fenêtre.
 location : c’est l’objet URL de la fenêtre courante.
 history : ce sont les URL précédemment visitées.
 document : il s’agit du document courant, dont les propriétés sontl e titre, les couleurs
(fond, texte, lien ...), les formulaires, les images etc..
Pour accéder à un objet de la page HTML, nous pouvons utiliser l’attribut name ou mieux
encore, l’attribut id que nous aurons bien évidemment appliqués à l’ensemble de nos balises
HTML. Ainsi, l’accès à un champ du formulaire se fera par l’appel suivant :

[Link].nom_du_fomulaire.nom_du_champ

Nous voyons dans l’instruction précédente qu’il est cependant nécessaire de bien spécifier le
"chemin" du formulaire : le formulaire fait bien partie de la fenêtre (window), qui contient un
document HTML (document), qui lui-même contient un formulaire, etc ...

3. Propriétés et méthodes

Chaque élément du document HTML est donc accessible via son nom et la hiérarchie des objets
depuis le langage JavaScript. Il s’agit maintenant de pouvoir manipuler ces objets en utilisant
leurs propriétés, leurs méthodes et les évènements auxquels ils réagissent.

Nous avons vu qu’une méthode permet en programmation objet d’effectuer des actions sur
l’objet, et qu’une propriété est une de ses caractéristiques. Globalement, on peut manipuler grâce
aux propriétés, l’ensemble des attributs de chaque balise HTML. Ainsi, si l’on veut modifier la
classe CSS d’un objet de notre document, nous modifierons sa propriété classname :

[Link].mom_element.classname = "nouvelle_classe";

PROPOSE PAR M. MEZAH 12


Tous les attributs de toutes les balises sont ainsi manipulables avec le JavaScript !

De la même manière, il est possible de manipuler les évènements auxquels sont liés les éléments
HTML, en utilisant leurs méthodes associées :

[Link].nom_element.methode();

Par exemple, l’envoi d’un formulaire, qui correspond à l’évènement HTML onsubmit, se fera par
l’instruction JavaScript :

[Link].nom_formulaire.submit();

II. Les événements

Nous avons vu dans les séquences du cours HTML que les balises HTML sont associées à des
évènements auxquelles elles peuvent réagir. Ainsi, la balise <body> possède deux évènements
intrinsèques souvent utilisés, onload et onunload.

A l’intérieur de ces balises, il est donc possible d’associer du code JavaScript qui sera exécuté
lorsque l’évènement sera déclenché, soit par l’utilisateur (envoi d’un formulaire par exemple),
soit par le navigateur lui-même (chargement d’une page par exemple).

Combiné à l’utilisation des feuilles de style, les évènements et JavaScript permettent également
d’obtenir des combinaisons graphiques intéressantes. Voici une liste des principaux évènements
intrinsèques :

Nom Description Balise HTML


Quand l’internaute arrête le chargement d’une input, textarea, select,body,
onAbort
image frame, frameset
input, textarea, select,body,
onBlur Quand un objet HTML n’a plus le focus
frame, frameset
Quand un objet HTML a été modifié et qu’il input, textarea, select
onChange
n’a plus le focus
onClick Quand l’internaute clique sur un objet HTML a, body, form, ...
Quand l’internaute double clic sur un objet a, body, form, ...
onDbClick
HTML
Quand le chargement de la page ou d’une
onError
image a entrainé une erreur
Quand un objet HTML a le focus (cliquer body, frameset, frame, input
onFocus
dans un champ par exemple)
Quand l’internaute appuie sur une touche de a, img, body, textarea
onKeyDown
son clavier
Quand une touche du clavier est a, img, body, textarea
onKeyPress enfoncée(combinaison de onKeyDown et
onKeyUp)
onKeyUp Quand l’internaute "lâche son doigt" d’une a, img, body, textarea

PROPOSE PAR M. MEZAH 13


touche alors enfoncée
onLoad Quand le changement de la page est fini img, body, frameset, frame
Quand l’internaute appuie sur un bouton de la a, body, form, ...
onMouseDown
souris
onMouseMove Quand l’internaute déplace sa souris a, body, form, ...
Quand l’internaute enlève sa souris a, body, form, ...
onMouseOut
sanscliquer d’un objet HTML
Quand l’internaute met sa souris sans cliquer a, body, form, ...
onMouseOver
sur un objet HTML
Quand l’internaute "lâche son doigt" d’un a, body, form, ...
onMouseUp
bouton de sa souris alors enfoncé
onMove Quand une fenêtre ou une frame est déplacée
Quand un formulaire est remis à zéro (avec un Form
onReset
bouton [Reset])
Quand l’internaute redimensionne sa fenêtre body, frameset, frame
onResize
de navigateur
Quand la position de la barre de défilement
onScroll
est modifiée
Quand l’internaute sélectionne du texte dans input, textarea
onSelect
un objet HTML
Quand le formulaire est envoyé, quand Form
onSubmit
l’internaute clique sur un bouton [Envoyer]
onUnLoad Quand une page est quittée body, frameset, frame
Table : Listes des principaux évènements

Exemples
1 Changement de classe d’un lien
<a href = "mon_url.html" class = "ma_classe1" onMouseover= "[Link] = ‘ma_classe2’"
onMouseout = "[Link]=’ma_classe1’">mon lien change de forme avec le passage de la
souris</a>
2 Ouverture d’une nouvelle fenêtre

<a href = "javascript:[Link](’mon_url.html’, ’NouvFenetre’, ’scrollbars=yes,


status=yes,width=300,height=300’)""> une nouvelle fenêtre va s’ouvrir : taille 300 x 300</a>

3 Changement d’image au passage de la souris

<A HREF="" onMouseOver="[Link]=’mon_img2.jpg "


onMouseOut="[Link]=’mon_img.jpg’"> <IMG NAME="img" WIDTH=60 HEIGHT=61
BORDER=0 SRC="mon_img.jpg"></A>

PROPOSE PAR M. MEZAH 14


LECON 3
LIRE ET MODIFIER LES ÉLÉMENTS DU FORMULAIRE
I. Les éléments et leur fonctionnement

1. Les zones de texte


On accède au contenu des champs textes (input de type text ou password, ainsi que textarea) à
l'aide de l'attribut value, qu'on peut lire, mais aussi modifier.

Pour afficher la valeur du champ pseudo du formulaire monForm :

[Link]("idForm").elements["pseudo"].value;
ou tout simplement

[Link]("pseudo").value;
Si on veut modifier le contenu d'un textarea dont l'attribut name vaut infos :

2. L'objet "select"
L'objet select représente une liste déroulante, et comme dans toute liste, il peut être intéressant de
savoir quel choix est sélectionné ; voyons comment procéder.

Prenons une liste dont le code HTML (qui se trouve à l'intérieur d'un formulaire) est le suivant :

Sexe : <select name="sexe” onchange=" verif_sexe ();">

<option>Choisissez</option>
<option value="h">Homme</option>
<option value="f">Femme</option>
</select>

On va ici utiliser l'évènement onChange, qui appellera la fonction quand l'utilisateur modifiera le
choix.

Pour récupérer la valeur sélectionnée, il faut :

 Dans un premier temps, on va récupérer le numéro de l'option sélectionnée, grâce à


l'attribut selectedIndex.

 Ensuite, il ne nous reste plus qu'à lire la valeur value de l'option correspondante, qui se
trouve dans le tableau options

<script language="JavaScript">

PROPOSE PAR M. MEZAH 15


function verif_sexe(){
var index_choisi= [Link](‘sexe’).selectedIndex ;
var valeur_choisie= [Link](‘sexe’).value ;
if(index_choix == 0){
alert("Vous n’avez pas choisi votre sexe");
return false;
}
return true;
}
</script>

3. Cases à cocher et boutons radio

Une seule case à cocher


La première utilisation des cases à cocher est d'en utiliser une seule (par exemple pour activer /
désactiver un aperçu automatique). Dans ce cas, on peut savoir si la case est cochée grâce à son
attribut checked, qui est une valeur booléenne (il vaut soit true, soit false). On peut également la
(dé)cocher, soit en modifiant la valeur de cet attribut, soit en appelant la méthode click() (qui
simulera un clic de souris sur la case).

Par exemple, si on a une checkbox dont le nom est "maCase", dans un formulaire dont l'id est
"idForm" :

if([Link]("idForm").[Link])
alert("La case est cochee");
else{
[Link]("idForm").[Link] = true;
alert("La case n'etait pas cochee, mais maintenant elle l'est");
}

Radio et groupe de checkboxs

Il est également possible d'utiliser les cases à cocher par groupe : dans ce cas,
toutes les cases du groupe auront le même nom. C'est également toujours le cas
avec les boutons radio.

La technique pour y accéder est alors légèrement différente. Prenons le code


suivant (on suppose que ces balises se trouvent dans un formulaire dont l'id est
encore "idForm") :
Vos loisirs : (3 choix)<br><hr>
<input type="checkbox" name="loisir" value="javascript">Le JavaScript<br>

PROPOSE PAR M. MEZAH 16


<input type="checkbox" name="loisir" value="couture">La couture<br>
<input type="checkbox" name="loisir" value="cinéma">Le cinéma<br>
<input type="checkbox" name="loisir" value="télé">La télévision<br>
<input type="checkbox" name="loisir" value="marche">La marche<br>
<input type="checkbox" name="loisir" value="sport">Le sport<br>
<input type="checkbox" name="loisir" value="lecture">La lecture<br>
<input type="checkbox" name="loisir" value="cheval">Le cheval<br>
<input type="checkbox" name="loisir" value="dormir">Dormir<br>
<hr>
Toutes ces cases possèdent le même nom ;

[Link]("idForm").loisir n'est donc pas un objet, mais un tableau d'objets.


On va donc pouvoir accéder à la case numéro i avec
[Link]("idForm").mesCases[i].

Par exemple, pour recupérer la valeur du 4ème loisir, il faut faire ceci :

Var television= [Link]("idForm").loisir[3].value;

Exemlpe:

function verif_loisir(){
for(i=0; i<[Link]("idForm").[Link]; i++){
if([Link][i].checked){
temoin++;
}
}
if(temoin != 3){
alert("Vous devez choisir 3 loisirs !");
return false;
}
return true;
}

NB :

Pour désactiver un champ de texte :

<input id="text" type="text" />


<script>
var text = [Link]('text');
[Link] = true;
</script>

PROPOSE PAR M. MEZAH 17


Les redirections

Les redirections se font en positionnant l'attribut « location » de l'élément « window » :

[Link]="[Link]

II. Exemple
<html>
<head><title></title>
<script language="JavaScript">
function verif_form(){
var temoin = 0;
if([Link] == ""){
alert("Le champ \"Nom\" est vide"); return false;
}
if([Link] == ""){
alert("Le champ \"Prénom\" est vide");
return false;
}
if([Link] == 0){
alert("Vous n’avez pas choisi votre sexe");
return false;
}
for(i=0;i<[Link];i++){
if([Link][i].checked){
++temoin;
}
}
if(temoin != 3){
alert("Vous devez choisir 3 loisirs !");
return false;
}
return true;
}
</script>
</head>
<body>
<form method="post" name="formulaire" onSubmit="return verif_form()">
Votre nom <input type="text" name="nom"><br>
Votre prénom <input type="text" name="prenom"><br>
Sexe : <select name="sexe">
<option>Choisissez</option>
<option value="h">Homme</option>
<option value="f">Femme</option>

PROPOSE PAR M. MEZAH 18


</select><br>
Vos loisirs : (3 choix)<br><hr>
<input type="checkbox" name="loisir" value="javascript">Le JavaScript<br>
<input type="checkbox" name="loisir" value="couture">La couture<br>
<input type="checkbox" name="loisir" value="cinéma">Le cinéma<br>
<input type="checkbox" name="loisir" value="télé">La télévision<br>
<input type="checkbox" name="loisir" value="marche">La marche<br>
<input type="checkbox" name="loisir" value="sport">Le sport<br>
<input type="checkbox" name="loisir" value="lecture">La lecture<br>
<input type="checkbox" name="loisir" value="cheval">Le cheval<br>
<input type="checkbox" name="loisir" value="dormir">Dormir<br>
<hr>
<input type="submit">
</form>
</body>
</html>

PROPOSE PAR M. MEZAH 19

Vous aimerez peut-être aussi