Chapitre2-Web Dynamique PDF

Université Mohammed Premier
Ecole Supérieure de Technologie

Département Management
Oujda
Développement WEB Dynamique

ANNÉE UNIVERSITAIRE: 2019/2020
N. AZDAD
Chapitre 2: Dynamisme coté client
JAVASCRIPT
Qu'est-ce que le JavaScript ?
 JavaScript est un langage de programmation qui permet d'apporter des améliorations au langage HTML
en permettant d'exécuter des commandes.
 Grâce à ce langage, il est possible d’écrire des pages interactives et dynamiques dans le coté client.
Qu'est-ce que le JavaScript ?
 C’est un langage interprété, non compilé.
 Basé sur les objet, pas de classes ni d’héritage,...
 Code intégré dans HTML.
 Déclaration optionnelle des variables (typage faible).
 Une syntaxe proche des langages de programmation comme le C.
Remarque: JavaScript ne doit pas être confondu avec Java.
Le rôle de JavaScript
 Consultation des données.
 Validation de formulaires.
 Les données interactives.
 HTML dynamique.
 etc.
A quoi ressemble un script ?
 Un script est une portion de code qui vient s'insérer dans une page HTML. Le code JavaScript doit être
placé toujours à l’intérieur de script.
<SCRIPT language="Javascript">
Placez ici le code de votre script.
</SCRIPT>
L’intégration du code JavaScript dans une page HTML
 D’habitude, on place la balise script à l’intérieur de la balise head.
Exemple 1:
<HTML>
<HEAD>
<TITLE> Voici une page contenant du JavaScript</TITLE>
document.write("Bonjour ") ;
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Cependant, il est possible de la mettre n’importe où, même dans la balise body.
<HTML>
<HEAD>
<TITLE> Voici une page contenant du JavaScript</TITLE>
</HEAD>
<BODY>
</SCRIPT>
</BODY>
</HTML>
 Dans un fichier html, on peut appeler un fichier contenant du code JavaScript.
<script src="NomFichier.js" >

</script>
Quand les instructions de script sont exécutées ?
Vous avez quatre choix pour déterminer le moment où un script est exécuté :
 Tandis qu’un document se charge,
 Juste après le chargement d’un document,
 En réponse à l’action de l’utilisateur,
 Quand il est appelé par d’autres instructions du script.
Exécution directe
Un code qui est destiné à s’exécuter automatiquement lors du chargement de la page, on le
met dans la balise body.
<BODY>
</SCRIPT>
</BODY>
Exécution différée
Le code qui s’exécute lors d’un événement généré par intervention de l’utilisateur est
placé dans la balise head. Dans ce cas, le code est lu par le navigateur, stocké en mémoire, pour ne
s’exécuter que sur demande expresse.
<head>
<title>Exécution différée</title>
<script language="JavaScript">
function auRevoir (){
alert("Au revoir");}
</script>
</head>
<body onUnload=auRevoir();>
</body>
Les instructions de JavaScript
Les actions effectuées sont les suivantes :
 Définir ou initialiser une variable ;
 Assigner une valeur à une propriété ou à une variable ;
 Changer la valeur d’une propriété ou d’une variable ;
 Appeler une méthode d’un objet ;
 Appeler une fonction ;
 prendre une décision.
Les instructions de JavaScript
 Pour rendre plus clair et plus compréhensible notre programme, on peut placer des commentaires :
• En utilisant le double slash // : tout ce qui se trouve à droite est commentaire.
• Un commentaire sur plusieurs lignes doit être placé entre /*et */.
 Chaque commande doit être terminée par un pointvirgule (;).
 JavaScript est sensible à la casse.
Les structures de contrôle
Le conditionnel simple :
if (expression_booléenne) {
// Instructions }
 Le conditionnel avec la variante else :
if (expression_booléenne) {
// Instructions }
else {
// Instructions
}
Le conditionnel multiple :
switch (expression) {
case etiquette_1 : // Instructions
case etiquette_2 : // Instructions
........
case etiquette_n : // Instructions
default : // Instructions
}
Remarque:
les instructions d’une étiquette case doit se terminer par une instruction break
La boucle while :
while (expression_booléenne)
{
// Instructions
}
 La boucle do . . . while :
do
{
// Instructions
} while (expression_booléenne)
 La boucle for : Où :
for (expr_1; expr_2; expr_3) – expr_1 : désigne une expression d’affectation.
{ – expr_2 : désigne une expression booléenne.
// Instructions
} – expr_3 : désigne une expression valide.
Les types de valeurs JavaScript
 Nombres : N’importe quel nombre sans guillemet,
 Chaînes de caractères: Une série de caractères à l’intérieur des guillemets
 Booléens : true ou false,
 Null.
 Objets : sont définis par leurs propriétés et méthodes (les tableaux sont également des objets),
 Fonctions.
Variables
Les variables contiennent des données qui peuvent être modifiées lors de l'exécution d'un
programme.
Chaque variable possède :
● un nom et une valeur
● doit être déclarée
soit de façon explicite au moyen du mot réservé var.
soit de façon implicite : nom_de_la_variable = valeur ;
Variables (Exemple)
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var chaine = "Mon chiffre est ";
var variable = 5;
document.write(chaine + variable);
</SCRIPT>
</BODY>
Variables: Conversion de type
1+ "1" // résultat "11"
1+1+"1" // résultat "21"
( " " +2500) // résultat "2500"
( " " +2500).length // résultat "4"
parseInt(chaîne) : traduit une chaîne de caractères en un numérique entier.

parseInt("24" ) // donne 24
parseInt("24.25" ) // donne 24
parseFloat(chaîne) : traduit une chaîne de caractères en un numérique flottant.
parseFloat("24" ) // donne 24
parseFloat("-24.25" ) // donne -24.25
String(Nombre) : traduit une valeur numérique en une chaîne de caractères.
String(24 ) // donne la chaîne "24"
String(-24.25) // donne la chaîne "-24.25"
Objets
Les objets de JavaScript, sont des entités appartenant au monde des navigateurs et du langage.
Objets prédéfinis :
Le navigateur qu’on utilise pour voir une page, est un objet qui s’appelle navigator.
La fenêtre du navigateur est un objet nommé window.
La page HTML est un objet que l’on appelle document.
Un formulaire à l’intérieur d’un document, est aussi un objet appelé form.
Un lien hypertexte dans une page HTML, est encore un autre objet appelé link.
Nouveau objet:
Pour définir un objet en JavaScript : var obj1 = new Object ( );.
Le modèle objet de document
Le modèle objet de document (Exemple)
Considérons le code HTML suivant :  Cet exemple montre le HTML et le
document objet correspondant pour
un document très simple.
<html>
<head>  Quand cette page se charge,
<title> simple Document </title> l’explorateur garde en mémoire un
</head> plan des objets générés par les
<body> étiquettes HTML dans le document.
<h1> Bonjour </h1>  Lorsque un document est chargé,
</body> l’explorateur génère un objet
</html> Document.
 L’objet window contient également

un objet appelé location (il stocke
l’information sur l’URL du
document qui a été chargé).
Propriétés
 Chaque objet JavaScript possède des propriétés, valeurs associées à l’objet.
 En JavaScript, pour accéder aux propriétés, on utilise la syntaxe :
nom_de_l'objet.nom_de_la_propriété
Exemple:
<input type="text" name="nom" value="Ahmed">
Les propriétés de cet objet sont name et value.
Méthodes
 Chaque objet JavaScript possède des méthodes.
 Ce sont des commandes dont les comportements sont attachés à un objet particulier.
 L'appel de la méthode se fait selon la notation :
nom_de_l'objet.nom_de_la_méthode
Exemple:
document.write(); permet d’écrire dans le document.
Méthodes de l'objet « document »
Un des objets les plus importants de JavaScript est l’objet « document ».
La méthode document.write() : permet d’écrire directement du texte sur la page Web active.
La syntaxe est assez simple soit : document.write("message") ;
On peut aussi écrire une variable, soit la variable resultat :
document.write(resultat) ;
Pour associer du texte (chaînes de caractères) et des variables, on utilise l'instruction : document.write("le
résultat est " +resultat) ;
Méthodes de l'objet « document » (Exemple)
<HTML>
<BODY>
<H1>Ceci est du HTML</H1>
<SCRIPT LANGUAGE="JavaScript">
document.write("<H1>Et ceci du JavaScript</H1>");
</SCRIPT>
</BODY>
</HTML>
 La méthode getElementById() retourne un objet HTML à partir de son id.
<input type="text" id="nom">

<script type="text/javascript">
document.getElementById("nom").value="changer";
</script>
La méthode getElementsByName retourne un tableau d’objets HTML ayant nom défini dans la propriété
name de la balise de l’objet.
<input type="text" name="toto" value=""> <BR><BR>

<input type="text" name="toto" value=""><BR><BR>
<input type="text" name="toto" value=""><BR>
<script language=javascript>
document.getElementsByName("toto")[0].value = "toto 0";
</script>
Quelques méthodes de l’objet « window »
 L’objet window comprend des propriétés qui contiennent des informations sur la fenêtre du navigateur.
 Il propose des méthodes qui permettent de manipuler la fenêtre du navigateur.
 confirm(chaîne) : affiche une boîte de dialogue de confirmation sur laquelle apparaît le message contenu
dans le paramètre chaîne. Cette boîte est dotée de deux boutons de commandes : « Ok » pour valider la
confirmation et « Cancel » pour annuler la validation.
window.confirm() et confirm() : les deux sont valides.
Exemple :
confirm("Voulez-vous quitter la page? ");
 alert(chaîne) : affiche une boîte de dialogue d’information sur laquelle apparaît le message contenu dans
la chaîne argument « chaîne ». Pour un retour à la ligne on utilise \n.
window.alert() et alert() : les deux sont valides.
Exemple :
alert("Cette page contient ...\n du JavaScript ! ");
 prompt(chaîne_1, chaine_2) : affiche une boîte de dialogue de saisie sur laquelle apparaît le message
contenu dans le paramètre chaîne_1 et une zone de texte pour entrer une réponse qui peut être définie
par défaut dans le paramètre chaîne_2.
Si l’utilisateur clique sur Annuler, la méthode retourne null.
window.prompt() et prompt() : les deux sont valides.
La réponse saisie peut être affectée à une variable.
Exemple :
prompt("Donnez un entier", "");
 Pour créer une nouvelle fenêtre, il faut appeler la méthode « open ».
open("url","name","option") : ouvre une nouvelle fenêtre dont le nom est name et qui affiche la page
déterminée par url. Option permet de préciser entre autres : width et height.
 La méthode « close » ferme une fenêtre du navigateur.
Exemple :
var fen = window.open("pub.html","pub","width=200, height=200");
var reponse = confirm("Voulez-vous fermer ?");
if(reponse)
fen.close();
else
alert("Ok, et merci");
Tableau à une dimension
 L'objet Array (ou tableaux) est une liste d'éléments indexés
 Pour créer un tableau nommé « Tab » et formé par x éléments par exemple, on écrit :
– var Tab = new Array(x);
 Variantes :
– var A = new Array(); // tableau vide
– var B = new Array(1, 2, 7); // tableau initialisé
– var C = new Array(1, "bon", 5.3, true);
Remarques:
les éléments d’un tableau peuvent être de types différents.
l’indice du premier élément est 0.
tous les éléments d’un tableau non vide et non initialisé auront la valeur « undefined ».
 il est possible d’affecter globalement un tableau à un autre.
Exemple :
var A = new Array(1, 2, 3); // A = (1, 2, 3)
var B = A // B = (1, 2, 3);// aussi
Remarques (suite):
 L’élément d’indice « i » d’un tableau « Tab » est dénoté par Tab[i].
La propriété « length » contient le nombre des éléments d’un tableau.
Un tableau Javascript est dynamique : sa taille peut changer au cours du temps.
Exemple:
<script language="javascript">
var carnet= new Array(3);
carnet[0]="AAA";
carnet[1]="BBB";
carnet[2]="CCC";
document.write(carnet[2]+"<br>");
document.write(carnet.length);
carnet[3]="DDD";
document.write("<br>");
document.write(carnet[3]+"<br>");
document.write(carnet.length);
</script>
Tableau à deux dimensions
 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 comme un tableau à 1 dimension :
nom_du_tableau[i] = new Array(y);
Exemple:
nom = new Array(3);

nom[0] = new Array(3);
nom[0][0]="1200"; nom[0][1]="1250"; nom[0][2]="1300";
nom[1][0]="800"; nom[1][1]="850"; nom[1][2]="900";
nom[2][0]="500"; nom[2][1]="520"; nom[2][2]="540";
Méthodes d’un objet tableau
 join( ) : retourne une chaîne de caractères formée par tous les éléments d’un tableau. Les éléments sont
séparés par des virgules.
Exemple :
var A = new Array("Ali", 1975, "Maroc")
document.write(A.join( ));
// affiche la chaîne "Ali,1975,Maroc".
concat( ) : concatène un tableau à la fin d’un autre. Le résultat est un tableau.
Exemple :
var A = new Array(1, 2)
var B = new Array(3, 4, 5)
var C = A.concat(B); // (1, 2, 3, 4, 5)
var D = B.concat(A); // (3, 4, 5, 1, 2)
push( ) : ajoute un ou plusieurs éléments à la fin d’un tableau. Les éléments à ajouter sont transmis en
arguments.
Exemple :
var A = new Array(1, 2); // A = (1, 2)
A.push(3, 4, 5); // A = (1, 2, 3, 4, 5)
pop( ) : supprime le dernier élément d’un tableau.

Exemple :
var A = new Array(1, 2, 3, 4);
A.pop( );
document.write(A.join( )); // affiche 1,2,3
A.pop( );
document.write(A.join( )); // affiche 1,2
 shift( ) : supprime le premier élément d’un tableau. Cet élément peut être récupéré dans une variable.
Exemple :
var A = new Array(1, 2, 3, 4);
var elem = A.shift( );
unshift( ) : ajoute une liste d’éléments au début d’un tableau. Les autres éléments sont décalés vers
l’arrière. Les éléments sont transmis en argument.
Exemple :
var A = new Array(2, 3); // A = (2, 3)
A.unshift(1); // A = (1, 2, 3)
Les fonctions
En JavaScript, une fonction aura la forme suivante :
function nom_de_la_fonction(arg_1, …, arg_n)
{
// corps de la fonction
}
Le bloc des instructions d’une fonction doit être impérativement mis entre deux accolades.
 Une fonction peut retourner une valeur ou non (une simple procédure).
 L’instruction return permet d’interrompre une fonction en envoyant la valeur de celle-ci au système.
Les fonctions (Exemple 1)
function Bonjour(nom,prenom,age)
{
document.write("votre nom est "+nom+"<br>");
document.write("votre prénom est "+prenom+"<br>");
document.write("votre âge est "+age+"<br>");
}
nom=prompt("Entrez votre nom ");
prenom=prompt("Entrez votre prénom");
age=Number(prompt("Entrer votre âge "));
document.write("bonjour <br>");
Bonjour(nom,prenom,age);
</script>
Les fonctions (Exemple 2)
<html>
<head>
<title> Test </title>
function fact(n)
{if (n==0) return 1;
else return n*fact(n-1);
}</script></head>
<body>
n=prompt("Entrez un entier ", "0");
document.write(n+"!="+fact(n));
</script>
</body>
</html>
Les fonctions
Auto-exécution:
 En rajoutant simplement une paire de parenthèses après une déclaration, la fonction va immédiatement
être exécutée.
(function Bonjour()
{
alert(" Bonjour ");
})()
</script>
Créations des objets
 Avec Javascript, toute entité d’un programme est manipulée comme un objet.
 On peut créer facilement un objet en se basant sur l’objet standard « Object ».
 La syntaxe est la suivante :
var Nom_objet = new Object( );
 Au départ, l’objet créé sera vide : il ne contient aucune donnée membre et aucune fonction membre.
On peut également créer un objet à partir de l’objet standard « Object » en utilisant la notation littérale
dont la syntaxe est décrite par la notation JSON (JavaScript Object Notation):
var obj2 = {}; // Avec la notation JSON
Créations des objets
Le langage Javascript manipule les objets en tant que tableau associatif.
• En effet, chaque élément d’un objet (attribut ou méthode) correspond à une entrée du tableau associatif
représentant cet objet.
• Chaque entrée du tableau associatif est identifiée par un nom unique (la clé).
• Le type d’un attribut est quelconque, alors que celui d’une méthode doit être une fonction.
• Un tableau associatif a la caractéristique forte d’être dynamique.
• Il est possible d’ajouter, de modifier et de supprimer les entrées du tableau qui représente l’objet tout au
long du programme.
les objets en tant que tableau associatif
var obj = new Object();
obj["attribut"] = "valeur1";
// similaire à obj.attribut = "valeur1";
obj["methode"] = function(parametre1, parametre2) {
alert("parametres: " + parametre1 + ", " + parametre2);
};
// similaire à obj.methode = ...
// Affichage de la valeur de attribut de obj
alert("Valeur de attribut: " + obj.attribut);
// Exécution de la méthode methode de obj
obj.methode("valeur1", "valeur2");
Les objets avec la notation JSON
var obj = {attribut: "valeur",
methode: function(parametre1, parametre2) {alert("parametres: " + parametre1 + ", " +
parametre2); }
}
// Affichage de la valeur de attribut de obj

alert("Valeur de attribut: " + obj.attribut);
// Exécution de la méthode methode de obj
obj.methode("valeur1", "valeur2");
Les Objets : Mot clé this
• Le mot clé this :
– référence l’instance sur laquelle est exécutée une méthode d’un objet.
Exemple 1 :
var Point = new Object( );
Point.abs = 15; Point.ord = 20;
Point.print_me = function( ) {
document.write("Position du point : ("+this.abs+ ", " + this.ord+ ")"); }
Les événements
 Les événements sont des actions qui ont lieu dans un document, habituellement en tant que résultat de
l’activité de l’utilisateur.
 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.
Les événements
onclick :
Événement classique en informatique, le clic de la souris. Exécute une action lors du clic sur un élément :
bouton, champs, ...
Exemple 1 (onclick )
<FORM>
<INPUT TYPE="button" VALUE="Cliquez ici" onclick="alert('Vous avez bien cliqué ici')">
</FORM>
Exemple 2 (onclick )
<form>
<input type="text" name="champ_texte" value="valeur d’origine"/>
<input type="button"
name="bouton" value="Changer" onclick="this.form.champ_texte.value='valeur après clic'" />
</form>
Les événements
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.
Exemple (onload et onunload ) :

Ecrire un script pour souhaiter la bienvenue à l'ouverture d'une page et un petit mot d'au revoir au
moment de quitter celle-ci.
Les événements
<HTML>
<HEAD>
<SCRIPT LANGUAGE='JavaScript'>
function bienvenue() {alert("Bienvenue à cette page");}
function au_revoir() {alert("Au revoir");}
</SCRIPT>
</HEAD>
<BODY onload='bienvenue()' onunload='au_revoir()'>
…
</BODY>
</HTML>
Les événements
onmouseover
Exécute une action lors du survol d’une zone texte, d’un bouton ….
Exemple 1 (onmouseover) :
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function message(){alert("Vous pointez sur moi");}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="" onmouseover="message()">message important</A>
</BODY>
</HTML>
Les événements
onmouseout
se produit lorsque l’utilisateur déplace la souris dans la zone extérieure d’un certain objet dans la fenêtre du
document.
Exemple 1 (onmouseout) :
<html>
<head>
<title></title>
</head>
<body>
<A HREF="" onmouseover="alert('Bonjour')" onmouseout="alert('Au revoir')">message
important</A>
</body>
</html>
Les événements
onChange (après modification réussie)
Exécuter une action lorsqu’une option, un champ est changé.
Exemple 1 (onChange) :
<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<textarea rows="5" cols="40" onChange="alert(this.value)">Modif
iez ce texte et cliquez ailleurs!</textarea>
</body></html>
Les événements
onFocus (en activant)
Entre en action quand l'utilisateur active un élément. L'événement onfocus survient lorsqu'un champ de saisie a
le focus c'est-à-dire 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".
Exemple 1 (onFocus) :
</head><body>
<input size="30" onFocus="this.value='Entrez votre nom ici'"><br>
<input size="30" onFocus="this.value='Entrez votre adresse ici'"><br>
<input size="30" onFocus="this.value='Entrez votre âge ici'"><br>
</form>
</body></html>
Les événements
onBlur (en quittant): Au cas où l'utilisateur quitte maintenant un élément qui était activé.
Exemple 1 (onBlur) :
<html><head><title>Test</title></head><body>
Nom: <input type="text" name="saisie" onBlur="verifcontenu(this.value)"><br>
ne rien entrer, puis cliquer ailleurs!
</form>
document.Test.saisie.focus();
function verifcontenu(champ)
{if(champ == "") {
alert("Vous n'avez pas entré votre nom!");
document.Test.saisie.focus();
return false;
}}
</script>
</body></html>
Les événements
onselect (en sélectionnant du texte)
Entre en action quand l'utilisateur sélectionne du texte. Cet événement se produit lorsque l'utilisateur
sélectionne (mis en surbrillance ou en vidéo inverse) une partie d'une zone de texte dans une zone de
type text ou textarea.
Exemple 1 (onselect) :
</head><body>
<textarea cols="40" rows="10" name="saisie"
onSelect="window.alert('Cliquez avec la touche droite de la souris sur le texte
sélectionné!');">Sélectionnez simplement une partie de ce texte!</textarea>
</form>
</body></html>
Les formulaires et les éléments de formulaire
Ce que représente l’objet FORM.
 Comment accéder aux propriétés et aux méthodes de l’objet FORM.
 Comment fonctionnent le texte, les bouton et les objets SELECT.
 Comment soumettre des formulaires à partir d’un script ?
 Comment passer une information des éléments de formulaire vers des fonctions
L’objet FORM
L’objet FORM permet de travailler avec les formulaires de la page HTML. Cet Objet peut être mis en
référence soit par sa position dans le tableau des formulaires contenus dans un document, soit par son
nom (si vous assignez un identifiant à l’attribut NAME à l’intérieur de l’étiquette <FORM>).
Si un seul formulaire apparaît dans le document, il est référencé de la façon suivante :
document.forms[0]
Mais si vous assignez un nom au formulaire, indiquez simplement le nom du formulaire dans la référence :
document.formName
Accès aux propriétés
Vous pouvez définir des attributs NAME, ACTION, METHOD et ENCTYPE. Chacun de ces derniers est une
propriété d’un objet FORM, que l’on peut utiliser en minuscule.
document.forms[0].action
document.formName.action
Pour changer n’importe laquelle de ces propriétés, assignez-leur simplement de nouvelles valeurs :
document.forms[0].action= "www.google.fr?xxx "
La propriété FORM.ELEMENTS[ ]
En plus de garder une trace de chaque type d’élément à l’intérieur d’un formulaire, l’explorateur maintient
également une liste de tous les éléments de contrôle à l’intérieur d’un formulaire. Cette liste est un autre
tableau, avec des éléments énumérés selon l’ordre d’apparition des étiquettes HTML.
Exemple : Dans cet exemple on cherche les éléments de type text et, pour chacun d’entre eux, on place
une chaîne vide dans la propriété value.
var form=window.document.forms[0];
for ( var i=0;i<form.elements.length;i++)
{
If (form.elements[i].type=="text" )
{
form.elements[i].value=" "
}}
L’objet button
Le bouton est un des objets les plus simples à écrire.
 L’objet button possède seulement certaines propriétés qui sont rarement consultées ou modifiées dans
les scripts d’aujourd’hui. De loin, le manipulateur d’événement le plus utile de l’objet button est onClick. Il
déclenche une action dès que l’utilisateur clique sur un bouton.
<input type="button" value="Afficher"

onclick="afficher(this.form)" />
L’objet checkbox
Une case à cocher est également un élément simple de l’objet FORM.
La propriété checked est la propriété principale d’un objet checkbox indique si la case est cochée.
La propriété checked est une valeur booléenne : true si la case est cochée, false dans le cas contraire.
Exemple : Dans cet exemple la valeur de la propriété checked détermine la boîte d’alerte que
l’utilisateur visualise.
L’objet checkbox
<html><head>
function choiprop(){
if (document.forms[0].prop1.checked)
alert(" la case est cochée");
else{
alert("la case n'est pas cochée")
}}
</script></head>
<body>
<form name="formu3">
<input type="checkbox" name="prop1" > Choix numéro 1 <br>
<input type="button" value="quel est votre choix" onclick="choiprop()">
</form></body></html>
L’objet radio
 Cet objet permet de travailler avec les "boutons radio" d'un formulaire de la page HTML.
 Vous devez assigner le même nom pour chaque bouton dans le groupe. Vous pouvez avoir de
multiples groupes à l’intérieur d’un formulaire, mais chaque membre d’un groupe doit avoir le même nom.
 Vous pouvez trouvez le nombre de boutons dans un groupe en indiquant la propriété length du groupe :
document.forms[0].groupName.length
 Si vous voulez découvrir si un bouton particulier est mis en choix vous devez accéder à l’élément bouton
individuellement :
document.forms[0].groupName[i].checked
L’objet radio
Exemple : Dans cet exemple, 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é.
<html><head>
function choixprop(formu5)
{for(i=0;i<document.formu5.choix.length;i++){
if (document.formu5.choix[i].checked)
{alert("vous avez choisi la proposiation"+document.formu5.choix[i].value)}}}
</script></head>
<body>
Entrez votre choix :
<input type="radio" name="choix" value="1"> choix numéro 1 <br>
<input type="button" name="bouton" value="quel est votre choix ? " onclick="choixprop(formu5)">
L’objet SELECT
Cet objet permet de travailler avec un champs de type SELECT d'un formulaire de la page HTML.
La propriété la plus importante de l’objet SELECT lui même est la propriété selectedIndex, consultée
comme suit :
document.forms[0].selectName .selectedIndex
Cette valeur est le numéro d’index de l’élément actuellement sélectionné.
Deux propriétés importantes d’un élément d’option sont text et value, consultées comme suit :
document.forms[0].selectName.options[i].text
document.forms[0].selectName.options[i].value
L’objet SELECT
Exemple : Dans cet exemple, on déclare une liste de sélection par la balise <SELECT></SELECT>. Entre ses deux
balises, on déclare les différents éléments de la liste par autant de tags <OPTION>. Vient ensuite un bouton qui
déclenche la fonction liste().
<html><head>
function liste(formu6)
{alert("l'élément "+(document.formu6.list.selectedIndex+1));}
</script></head>
<body>
Entrez votre choix :
<select name="list">
<option value="1"> élément 1
<option value ="2"> élément 2
<option value ="3"> élément 3
</select>
<input type="button" name="bouton" value="Quel est l'élément retenu ?" onclick="liste(formu6)">
Soumission et prévalidation de Formulaire
Submit : Cet objet permet de travailler avec le champ submit d'un formulaire de la page HTML
<INPUT TYPE="submit" NAME="nom" VALUE="texte">
onSubmit (en envoyant le formulaire)

Entre en action quand l'utilisateur envoie un formulaire.
Soumission et prévalidation de Formulaire
Exemple 1 (onSubmit) : Ne pas remplir tous les champs, puis envoyer le formulaire!
function CheckInput() {
for(i=0; i<document.forms[0].elements.length; ++i)
if(document.forms[0].elements[i].value == "") {
alert("Tous les champs n'ont pas été remplis!");
document.forms[0].elements[i].focus();
return false;}
return true;}
</script></head><body>
<form action="onsubmit.htm" onSubmit="return CheckInput();">
Champ 1: <input size="30"><br>
<input type="submit"></form></body></html>

Langue

Chapitre2-Web Dynamique PDF

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

Chapitre2-Web Dynamique PDF

Titre original :

Transféré par

Droits d'auteur :

Formats disponibles

Université Mohammed Premier

Ecole Supérieure de Technologie

Développement WEB Dynamique

<script src="NomFichier.js" >

parseInt(chaîne) : traduit une chaîne de caractères en un numérique entier.

 L’objet window contient également

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

<input type="text" name="toto" value=""> <BR><BR>

nom = new Array(3);

concat( ) : concatène un tableau à la fin d’un autre. Le résultat est un tableau.

pop( ) : supprime le dernier élément d’un tableau.

// Affichage de la valeur de attribut de obj

Exemple (onload et onunload ) :

<input type="button" value="Afficher"

Cette valeur est le numéro d’index de l’élément actuellement sélectionné.

onSubmit (en envoyant le formulaire)

Centres d'intérêt liés

Vous aimerez peut-être aussi