techniques internet de base 2006-2007
DESCRIPTION
Techniques Internet de Base 2006-2007. Licence 2 (Info, Maths, PC/PA) Université Jean Monnet Ruggero G. PENSA [email protected]. L'attribut commun ID. L'attribut ID (commun à tous les éléments) définit un identificateur unique dans un document donné. Les formulaires HTML. - PowerPoint PPT PresentationTRANSCRIPT
Techniques Internet de Base2006-2007
Licence 2 (Info, Maths, PC/PA)Université Jean Monnet
Ruggero G. [email protected]
L'attribut commun ID
L'attribut ID (commun à tous les éléments) définit un identificateur unique dans un document donné.
Les formulaires HTML
Les formulaires
Avant la version 2.0 de HTML les communications client-serveur s'effectuaient à sens unique (du serveur vers le client)
Le formulaires donnent la possibilité au client de répondre directement à des questions posées par le serveur
Le serveur exploite immédiatement ou plus tard les réponses et réagit de conséquence
Exemple : téléachat (e-commerce)
Composition d'un formulaire
Un formulaire se compose principalement de contrôles constitués par boîtes de saisie boutons radio cases à cocher zones de texte listes d'options
Mécanisme d'un formulaire
1. Le formulaire s'affiche à l'écran de l'utilisateur2. L'utilisateur commence à renseigner les boîtes de saisie
et coche les boutons radio et les cases à cocher qui lui conviennent
3. Il clique sur le bouton Reset (pour recommencer) ou sur le bouton Submit (pour envoyer les renseignements)
4. Si Submit : le navigateur contacte le serveur dont l'URL est définie dans le formulaire et lui envoie les éléments recueillis
5. Le serveur appelle le programme spécifié dans l'URL et lui transmet les données
6. Le programme traite les données et envoie une réponse au client
L'élément FORM
C'est l'élément qui va contenir toutes les balises du formulaire et le texte qui les accompagne
Attributs : ACTION : précise l'URL du programme de traitement des
données. Deux types d'URL possibles : URL de type HTTP pour les scripts URL de type mailto pour l'envoie de courrier éléctronique
METHOD : toujours "POST" ENCTYPE : méthode de codification
application/x-www-form-urlencoded (par défaut) multipart/form-data (si accompagné par des fichiers) text/plain (e-mail)
Exemple : <FORM ACTION="test.php" METHOD="POST"> ... </FORM>
L'élément INPUT
C'est la balise que l'on trouve pour presque tous les éléments simples (boîte de saisie, case à cocher...)
Attributs :TYPE : précise le type de contrôle utilisé
pour un élément du formulaireNAME : précise un nom pour le contrôleVALUE : valeur associée au contrôle
TYPE="text" et TYPE="password"
TEXT : Crée une boîte de saisie d'une seule ligne dans laquelle l'utilisateur peut taper du texte ou des valeurs numériques
Attributs associés : SIZE : nombre max de caractères pouvant être tapés par l'utilisateur MAXLENGTH : nombre de caractères qui seront pris en compte Si MAXLENGTH>SIZE : le texte en cours de saisie défile dans la boite
Exemple :<INPUT TYPE="text" NAME="nom" VALUE="text" SIZE="10" MAXLENGTH="16">
PASSWORD : même chose mais à la place des caractères on affiche des astérisquesExemple :<INPUT TYPE="password" NAME="pass" VALUE="password" SIZE="10" MAXLENGTH="16">
TYPE="checkbox"
Crée une case à cocher qui ne peut prendre que deux valeurs : cochée ou non cochée
Les cases à cocher vont souvent par groupes et ne sont pas exclusives
Attributs associés : CHECKED : permet de cocher la case par défaut
Exemple<INPUT TYPE="checkbox" NAME="fruit" VALUE="prune"> Prune<INPUT TYPE="checkbox" NAME="fruit" VALUE="poire" CHECKED> Poire<INPUT TYPE="checkbox" NAME="fruit" VALUE="pomme"> Pomme
TYPE="radio"
Crée un bouton radio dont le mécanisme est presque identique à celui des cases à cocher
Les boutons radio d'un même groupe (même valeur de l'attribut NAME) sont mutuellement exclusifs
Attributs associés : CHECKED : sélection par défaut
Exemple :<INPUT TYPE="radio" NAME="livre" VALUE="excel" CHECKED> Excellent<INPUT TYPE="radio" NAME="livre" VALUE="medioc"> Médiocre<INPUT TYPE="radio" NAME="livre" VALUE="mauvai"> Mauvais
TYPE="submit" et TYPE="reset"
SUBMIT : Crée un bouton de type soumission Lorsque l'utilisateur clique sur ce bouton, les éléments
recueillis par le formulaire sont expédiés à l'URL indiquée par l'attribut ACTION de la balise <FORM>
RESET : Crée un bouton de remise à leur état initial (valeurs par défaut) des différents contrôles du formulaire
Si VALUE n'est pas spécifié, c'est le mot anglais "Submit" ou "Reset" qui est affiché sur le bouton
Exemple :<INPUT TYPE="submit" VALUE="Envoyer"><INPUT TYPE="reset" VALUE="Effacer">
TYPE="image"
Crée un bouton de type submit illustré au moyen d'une image
Attribut associé : SRC : spécifie la source de l'image
Exemple :
<INPUT TYPE="image" SRC="image.gif" NAME="monimage">
TYPE="button"
Crée un bouton de forme classique auquel n'est affectée aucune action de type général. On lui associe une action spécifique au moyen d'une condition onxxx="action"
Exemple :<INPUT TYPE="button" VALUE="Cliquez ici" onclick="Javascript:alert('Cou cou')">
TYPE="hidden"
Crée un élément non affiché par le navigateur, mais fourni toujours d'un nom et d'une valeur
Permet d'envoyer des informations cachées
Exemple :<INPUT TYPE="hidden" NAME="identification" VALUE="AL345">
TYPE="file"
Crée une boîte de saisie flanquée à sa droite d'un bouton marqué "Naviguer", "Parcourir" ou "Browse" selon le navigateur et sa nationalité. Ce dernier permet de sélectionner un fichier à envoyer.
L'attribut ENCTYPE du conteneur <FORM> doit valoir multipart/form-data
Exemple<H3>Choisissez le fichier à envoyer</H3><INPUT TYPE="file" NAME="nomfichier" VALUE="unfichier">
Autres attributs communs
DISABLED : (sans valeur) Permet de désactiver des éléments. La valeur d'un élément désactivé n'est pas envoyée
au serveur Le seul moyen de réactiver un contrôle est
l'utilisation d'un script READONLY : (sans valeur)
On peut l'assimiler à TYPE="hidden" Le contrôle est affiché normalement, mais il est
impossible pour l'utilisateur de le modifier
Autres éléments
Elément SELECT
Elément TEXTAREA
Elément BUTTON
Elément LABEL
Elément FIELDSET (pas souvent utilisé)
Elément LEGEND (pas souvent utilisé)
L'élément SELECT
La balise <SELECT>...</SELECT> propose une liste d'options parmi lesquelles l'utilisateur doit choisir
La sélection peut être unique ou multiple Les options sont prédéfinies au moyen d'autant de
conteneurs OPTION Exemple :
<SELECT MULTIPLE SIZE="3" NAME="musiciens"> <OPTION Value="Bach">Bach</OPTION> <OPTION Value="Beethoven">Beethoven</OPTION> <OPTION Value="Brahms"> Brahms</OPTION> <OPTION SELECTED Value="Chopin">Chopin</OPTION> <OPTION Value="Boulez">Boulez</OPTION></SELECT>
Attributs de l'élément SELECT
NAME : nom du contrôle (obligatoire)SIZE : définit le nombre de choix proposés qui
seront affichés dans la boîte à liste déroulante. S'il est inférieur au nombre total de choiz, une barre de défilement viendra se placer à droite de la liste
MULTIPLE : (sans valeur) permet aux utilisateurs de choisir plusieurs des valeurs proposées
DISABLED : désactive le contôle
Attributs de l'élément OPTION
VALUE : valeur associée à l'option. S'il est absent, la valeur qui sera envoyée au serveur lorsque l'utilisateur cliquera sur le bouton Submit sera le texte placé dans le conteneur
SELECTED : (sans valeur) choix par défault. Plusieurs choix sont possibles si le conteneur <SELECT> contient l'attribut MULTIPLE
Exemple :<OPTION SELECTED VALUE="42">St-Etienne</OPTION>
Exemple complet
<H3>Sélectionnez un musicien</H3><SELECT MULTIPLE SIZE="3" NAME="musiciens"><OPTION Value="Bach">Bach</OPTION><OPTION Value="Beethoven">Beethoven</OPTION><OPTION Value="Brahms"> Brahms</OPTION><OPTION SELECTED Value="Chopin">Chopin</OPTION><OPTION Value="Boulez">Boulez</OPTION></SELECT><SELECT MULTIPLE SIZE="1" NAME="encoremusiciens"><OPTION Value="Bach">Bach</OPTION><OPTION Value="Beethoven">Beethoven</OPTION><OPTION Value="Brahms"> Brahms</OPTION><OPTION SELECTED Value="Chopin">Chopin</OPTION><OPTION Value="Boulez">Boulez</OPTION></SELECT>
L'élément TEXTAREA
L'élément <TEXTAREA>...</TEXTAREA> offre une boîte de saisie multiligne (une surface de saisie)
Si l'attribut READONLY est présent, le texte ne peut pas être modifié
Attributs : NAME : nom du contrôle ROWS : nombre de lignes COLS : nombre de colonnes
Si la zone définie est trop petite, un mécanisme de défilement dans les deux apparaît
Exemple :<TEXTAREA NAME="description" ROWS="5" COLS="60">Donnez une description...</TEXTAREA>
L'élément BUTTON
L'élément <BUTTON>...</BUTTON> joue le même rôle que l'élément <INPUT> de type "button" tout en offrant davantage de possibilités
On peut placer un élément décoratif (texte, image, objet multimédia) entre les balises initiale et terminale
Attributs : NAME : nom du contrôle TYPE : type de bouton
button (bouton ordinaire pour lancer des scripts) submit (bouton de type submit (par défaut) reset (bouton de type reset
VALUE : uniquement pour les élément de type "button". Spécifie une valeur initiale non modifiable
Exemple de bouton
<BUTTON TYPE="button" NAME="goldrake" onclick="Javascript:alert('Goldorak!!!')">
Goldorak<BR><IMG WIDTH="80" SRC="goldorak.jpg" ALT="Goldorak!!!">
</BUTTON>
<BUTTON TYPE="button" NAME="rouge"><FONT COLOR="red">Du texte<BR>rouge</FONT></BUTTON>
L'élément LABEL
Il permet d'attacher des informations à d'autres éléments de contrôle qui ne peuvent pas être eux-mêmes des contrôles
Lorsque il reçoit le focus (lorsque l'on clique dessus) il le passe au contrôle qui lui est associé
Attributs : FOR : la valeur est définie par l'attribut ID du contrôle associé
Exemple<LABEL FOR="prenom">Prenom :</LABEL><INPUT TYPE="text" ID=prenom><LABEL FOR="nom">Nom :</LABEL><INPUT TYPE="text" ID=nom>
Envoi des information au serveur
En cas d'absence de l'attribut ENCTYPE c'est l'attribut application/x-www-form-urlencoded qui est pris par défault.Fonctionnement : Pour chaque paire nom/valeur, un signe égale (=) va être
inséré entre le nom et la valeur Chaque paire nom/valeur sera séparée de la suivante par un
caractère Et commercial (&) Les caractères non ASCII et la plupart des caractères de
ponctuation seront remplacé par leur code hexadécimal précédé d'un caractère pour-cent (%)
Les espaces seront remplacés par un signe plus (+)
Introduction à JavaScript
Les scripts
HTML ne permet pas d'effectuer des actions tel que vérifier la présence et la validité de certaines informations demandées par un formulaire
On peut utiliser un langage de script, en particulier des "client-side scripts"
Le plus utilisé est Javascript Tous les navigateurs usuels le reconnaissent Syntaxe assez simple Portable (!!!)
Insertion d'un script dans une page
Le script peut être placé n'importe où dans le document
Il doit être delimité par le conteneur <SCRIPT>...</SCRIPT>
Il peut y avoir plusieurs scripts dans le même document HTML
On peut utiliser des fichiers externes
L'élément SCRIPT
Le rôle de l'élément SCRIPT est de définir le script qui sera utilisé dans le document HTML
Il y a deux façons d'insérer un script : Placer le script entre <SCRIPT>...</SCRIPT> Insérer l'URL d'un fichier externe dans la balise initiale
Attributs : TYPE : toujours "text/JavaScript" pour Javascript SRC : indique l'URL d'un fichier externe contenant le script à
charger (facultatif) Exemple :
<SCRIPT TYPE="text/JavaScript" SRC="http://www.monserveur.fr/scripts/script.js"></SCRIPT>
JavaScript
JavaScript est un langage simpleSyntaxe proche de celle du CLangage interprétéLangage standardiséLangage sûr
pas d'instruction d'entrées-sorties de fichierpas d'instructions d'accès en mémoire
L'élément NOSCRIPT
Pour prévenir les utilisateur dont le navigateur n'est pas capable de traiter un script on utilise le conteneur <NOSCRIPT>...</NOSCRIPT>
Exemple :<SCRIPT TYPE="text/JavaScript">..... instructions du script......</SCRIPT><NOSCRIPT> Votre navigateur ne reconnait pas les scripts.</NOSCRIPT>
Exemple de programme - 1
<HTML><HEAD><TITLE>Somme des N premiers entiers</TITLE><SCRIPT TYPE="text/JavaScript">function calcul(){ N=document.entree.valeur.value somme = 0 for (nombre=1; nombre<=N; nombre++) somme += nombre alert("La somme des " + N + " premiers entiers vaut "
+ somme)}</SCRIPT></HEAD>
Exemple de programme - 2
<BODY><H2>Calcul de la somme des N premiers nombres
entiers</H2><FORM NAME="entree">Combien de nombres voulez-vous additionner :<INPUT TYPE="text" NAME="valeur"
onchange="calcul()"></FORM></BODY></HTML>
La syntaxe JavaScript
Syntaxe proche de celle du C Le point-virgule est facultatif Commentaires : délimités par /* ... */
Exemple : /* ceci est un commentaire */ Types de constantes (valeurs) :
entières (décimal, octal, hexadécimal) flottantes (ex : 3.1415) chaînes de caractères : encadrés par une paire de guillemets
ou d'apostrophesExemple : "ceci est une chaîne de caractères"
Booléennes : elle ne peuvent prendre que deux valeurs : true (vrai) et false (faux)
Les variables
JavaScript est un langage pauvrement typé Parler de "type de variable" n'a pas beaucoup de sens On peut leur affecter n'importe quel type de valeur Les variables peuvent ne pas être déclarées
préalablement Dans certains cas on peut déclarer trois types de
variables : number boolean string
La conversion du type est transparente
Les tableaux
Le langage Javascript fournit plusieurs façons de créer un tableau : var MonTableau = ["donnée 1", "donnée 2", "donnée 3", "donnée 4"];
var MonTableau = new Array("donnée 1", "donnée 2", "donnée 3", "donnée 4");
Ci-dessus le tableau est initialisé avec des valeurs à la création. La déclaration d'un tableau se fait comme suit :
var MonTableau = new Array(); 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. Exemple : MonTableau[3] /* quatrième élément du tableau */
Les opérateurs
Mêmes opérateurs que ceux du langage C 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 : var='a'+'b' est équivalent à var='ab' var1='a' var=var1+'b' var='ab'
Les structures conditionnelles Ce sont les mêmes que celles du C
if (condition réalisée) { liste d'instructions}
if (condition réalisée) { //liste d'instructions } else { //autre série d'instructions }
switch (Variable) { case Valeur1: Liste d'instructions; break; case Valeur2: Liste d'instructions; break; default: Liste d'instructions; break; }
Instructions itératives
Ce sont les mêmes que celles du Cfor (init; arrêt; mise à jour) { liste d'instructions }
while (condition réalisée) { liste d'instructions }
La déclaration de fonctions
Il faut que le navigateur connaisse la fonction, c'est-à-dire qu'il connaisse son nom, ses arguments et les instructions qu'elle contient.
Avant d'être utilisée, une fonction doit être définie La déclaration d'une fonction se fait grâce au mot clé
function selon la syntaxe suivante : function MaFonction(argument1, argument2, ...){ liste d'instructions }
Pour exécuter une fonction, il suffit de faire appel à elle en écrivant son nom (en respectant la casse) suivie d'une parenthèse ouverte (éventuellement des arguments) puis d'une parenthèse fermée : Nom_De_La_Fonction();
La gestion des événements
On appelle événements intrinsèques des actions de l'utilisateur telles qu'un clic ou un déplacement de la souris, le chargement d'une page ou l'appui sur une touche du clavier
Ces événements peuvent être pris en charge par un script et déclancher telle ou telle action prévue par l'auteur de la page
Un événement est toujours associé à un objet : fenetre du navigateur document bouton boîte de saisie ...
Comment détecter un événement
Chaque élément d'un formulaire (et une partie des élément HTML en général) possède un certain nombre d'attributs qui permettent de capturer des événements et d'exécuter un script associé à ces événements
Grâce à ces attributs, un formulaire peut passer le contrôle à un script situé dans le document même au moment où se produit un certain événement
Types d'événements événements généraux événements liés à la souris événements liés au clavier événements propres aux formulaires
Evénements généraux (attributs)
Les événements généraux sont ceux qui ne sont pas directement liés à une action immédiate de l'utilisateur onload : il se produit lors de la fin du chargement
d'une fenêtre. Il apparaît dans BODY onunload : il se produit lorsqu'un document est
retiré d'une fenêtre Exemple :<BODY onload="alert('Bienvenu!')"><BODY onunload="alert('Aurevoir!')">
Evénements liés à la souris (attributs)
Ils peuvent apparaître dans presque tous les éléments HTML onclick : il se produit lorsque l'utilisateur clique sur un
élément HTML ondbclick : il se produit lorsque l'utilisateur double-clique
sur un élément HTML onmousedown : il se produit lorsque l'utilisateur appui sur un
des boutons de la souris onmouseup : il se produit lorsque l'utilisateur relâche le
bouton de la souris qui était enfoncé onmouseover : il se produit lorsque le pointeur de la souris
parvient au-dessus d'un élément HTML Autres attributs :
onmousemove onmouseout
Evénements liés au clavier (attributs)
Ils peuvent apparaître dasn presque tous les éléments HTML onkeypress : il se produit au moment où
l'utilisateur appuie sur une des touches du clavier et la relâche ensuite
onkeydown : il se produit au moment où l'utilisateur appuie sur une des touches du clavier et qu'un élément HTML a le focus
onkeyup : il se produit au moment où l'utilisateur relâche une des touches du clavier et qu'un élément HTML a le focus
Evénements propres aux formulaires
onsubmit : il se produit lorsqu'un formulaire est envoyé au serveur (FORM)
onreset : il se produit lorsqu'un formulaire est réinitialisé (FORM)
onfocus : il se produit lorsqu'un élément reçoit le focus suite à un clic où à la touche <Tab> (LABEL, INPUT, SELECT, TEXTAREA, BUTTON)
onblur : il se produit lorsqu'un élément perd le focus (LABEL, INPUT, SELECT, TEXTAREA, BUTTON)
onselect : il se produit lorsque l'utilisateur sélectionne du texte dans une boîte ou une zone de saisie (INPUT, TEXTAREA)
onchange : il se produit lorsqu'un contrôle perd le focus et que sa valeur a été modifiée (INPUT, SELECT, TEXTAREA)
Exemple
<BODY><H2>Exemples de boîtes de dialogue</H2><FORM NAME="entree"><BUTTON NAME="bavertir" TYPE="button"
onClick="avertir('Attention!!!')">Avertir</BUTTON>
<BUTTON NAME="bconfirmer" TYPE="button" onClick="confirmer('Etes-vous d\'accord?')">Confirmer</BUTTON>
<BUTTON NAME="binviter" TYPE="button" onClick="inviter('Quel est votre nom?')">Inviter</BUTTON>
</FORM></BODY>
Interaction avec le document
Pour pouvoir interagir avec les éléments d'un document, on doit pouvoir y accéder
On associe un objet à chaque élément du document
Objets Le Javascript traite les éléments qui s'affichent dans votre navigateur
comme des objets, c'est-à-dire des éléments : classés selon une hiérarchie pour pouvoir les désigner précisément ; auxquels des propriétés sont associées.
Exemple : un arbre dans un jardin comportant une branche sur laquelle se trouve un nid:jardin
arbre branche
feuille nid
largeur: 20 couleur: jaune hauteur: 4
salade balançoire
corde nid
largeur: 15 couleur: marron hauteur: 6
Accès aux objets jardin
arbre branche
feuille nid
largeur: 20 couleur: jaune hauteur: 4
salade balançoire
corde nid
largeur: 15 couleur: marron hauteur: 6
Le nid sur l'arbre est donc désigné comme suit : jardin.arbre.branche.nid
Pour changer la couleur du nid (dans l'arbre) et le peindre en vert, il suffit la commande suivante : jardin.arbre.branche.nid.couleur= vert;
Les objets du navigateur Javascript divise la page du navigateur en objets, afin de
permettre d'accèder à n'importe lequel d'entre-eux et de pouvoir les manipuler par l'intermédiaire de leurs propriétés
On commence généralement par l'objet le plus grand (celui contenant tous les autres) puis on descend dans la hiérarchie jusqu'à arriver à l'objet voulu.
L'objet le plus grand est l'objet fenêtre (window) Dans la fenêtre s'affiche une page, c'est l'objet document Cette page peut contenir plusieurs objets, comme des
formulaires, des images, etc. Pour accéder à un objet il est donc nécessaire de
parcourir l'arborescence en partant de l'objet le plus grand (l'objet window) vers l'objet à atteindre.
Objets JavaScriptNiveau1 Niveau2 Niveau3 Commentaire
navigator Informations sur le browser utilisé
window Gestion de la fenêtre d'affichage
parent, frames, self, top
Désignation de la sous-fenêtre
location Informations sur l'emplacement de la page
history Accès à l'historique
document Informations sur le contenu de la fenêtre
images Référence des images
forms Référence des formulaires
links Référence des liens
anchors Référence des ancrages
Les propriétés Les attributs de chaque élément se traduisent en
propriété pour l'objet correspondant Exemple :
<form name="form1"><input type="checkbox" name="checkbox"><input type='TEXT' name='champ_text' value='Essai du javascript' size='24'></form> Le champ de texte a par exemple comme propriétés :
name : le nom du champ de texte value : le texte contenu dans le champ size : la taille du champ de texte
La propriété window.document.forms["form1"].champ_text.valueest le texte associé au champ de texte nommé champ_text dans le formulaire ci-dessous nommé form1)
Exemple
<HTML><HEAD><TITLE>Boîtes de dialogue</TITLE><SCRIPT TYPE="text/JavaScript">function voir(nom) { document.images[0].src=nom;}</SCRIPT></HEAD><BODY><H2>Goldorak Vs. Actarus</H2><IMG SRC="goldorak.jpg" WIDTH="320" ALT="Goldorak!!!" onmouseover="voir('actarus.jpg')" onmouseout="voir('goldorak.jpg')"></BODY></HTML>
Les méthodes
Une méthode est une fonction associée à un objet, c'est-à-dire une action que l'on peut faire exécuter à un objet.
Les méthodes des objets du navigateur sont des fonctions définies à l'avance par les normes HTML, on ne peut donc pas les modifier, il est toutefois possible de créer une méthode personnelle pour un objet que l'on a créé soi-même
Exemple : window.objet1.objet2.methode()
Méthodes de l'objet window
L'objet Windows contient des méthodes pour la gestion de boîtes 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 : alert() Soit le confronter à un choix : confirm() Soit lui demander de compléter un champ pour
récupérer une information prompt()
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.
Syntaxe : alert(nom_de_la_variable); alert('Chaîne de caractères'); alert('Chaîne de caractères' + nom_de_la_variable);
Exemple :alert('Message d\'alerte \nAu feu!!');
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... Sa syntaxe est : confirm('Chaîne de caractères');
prompt()
La méthode prompt 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
Syntaxe : prompt('Posez ici votre question','chaîne par défaut');
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
Exemples
<SCRIPT TYPE="JavaScript">function avertir(message) { alert(message)}
function confirmer(message) { reponse=confirm(message) if (reponse) alert("Vous avez cliqué sur OK!") else alert("Vous avez cliqué sur Annuler!");}
function inviter(message) { reponse=prompt(message) alert("Vous avez saisi " + reponse + "!");}</SCRIPT>
Méthodes de l'objet document
Les plus utilisées : getElementById() : accès à l'élément HTML par
l'attribut Id write() : écrire dans la fenêtre du document writeln() : écrire ligne par ligne
Exemples :document.getElementById("text1").value="Salut"document.write("Bonjour!");
Les objets du noyau
L'objet Array : il permet de créer et de manipuler des tableaux
L'objet Date : permet de travailler avec toutes les variables qui concernent les dates et la gestion du temps
L'objet String : est un objet qui contient un certain nombre de propriétés et de méthodes permettant la manipulation de chaînes de caractères.
L'objet Math : permet de travailler avec toutes les variables qui concernent les dates et la gestion du temps
Propriétés et méthodes de l'objet String
Pour une chaînevar MaChaine="Salut";
Propriété : longueur de la chaine :x = machaine.length; (x contient la valeur "5")
Méthodes : Caractère à la position "pos" de la chainec = MaChaine.charAt(3) (c contient la valeur "u")
MaChaine.toLowerCase() : convertit tous les caractères d'une chaîne en minuscule
MaChaine.toUpperCase() : convertit tous les caractères d'une chaîne en majuscule.
MaChaine.substring(position1, position2) : La méthode retourne la sous-chaîne (lettre ou groupe de lettres) comprise entre les positions 1 et 2 données en paramètre.
Test du valeur d'une boîte de saisie<SCRIPT TYPE="text/JavaScript">function corrige(controle){ s = document.getElementById(controle).value; ok=0; for (i=0; i<s.length; i++) { c=s.charAt(i);
if (c < "0" || c > "9") { ok++;}
} if (ok>0) { alert("Que de nombres s.v.p.!"); document.getElementById(controle).value=""; }}</SCRIPT>...<FORM NAME="entree"><INPUT TYPE="text" NAME="boitevaleur" ID="valeur"
onchange="corrige('valeur')"></FORM>
Propriétés et méthodes de l'objet Math
Propriétés : Math.E (nombre d'Euler) Math.PI (3.1415...)
Méthodes Math.abs(x) Math.max(x1,x2) Math.min(x1,x2) Math.pow(x,y) Math.random() Math.sqrt(x) Math.exp(x) Math.log(x) Math.{sin,asin,cos,acos,tan,atan}(x)
Exemple : y = Math.sqrt(x);
Méthodes des éléments
FORM reset() : réinitialise le formulaire submit() : envoie le contenu du formulaire
BUTTON, CHECKBOX, RADIO, RESET, SUBMIT click() : clique sur le contrôle
FILE, PASSWORD, TEXT, TEXTAREA select() : sélectionne le texte dans la boîte de saisie
TOUS (ou presque) focus() : donne le focus au contrôle blur() : donne le focus au contrôle suivant
Contrôle d'un formulaire
Problème : calcul du logarithme de y en base x
Test : x et y doivent être différents de zéro
Exemple : le formulaire
...<BODY><H2>Calcul de Log<sub>x</sub>(y)</H2><FORM NAME="logarithme"><LABEL FOR="valx" NAME="labelx">Entrer x : </LABEL><INPUT TYPE="text" ID="valx" NAME="valeurx"><BR><LABEL FOR="valy" NAME="labely">Enrer y : </LABEL><INPUT TYPE="text" ID="valy" NAME="valeury"><BR><INPUT TYPE="reset" VALUE="Effacer"><INPUT TYPE="button" onclick="controle()"
VALUE="Calculer"></FORM></BODY>
Exemple : calcul du logarithme
<HEAD><TITLE>Logarithme</TITLE><SCRIPT TYPE="text/JavaScript">
function calcule(x,y) {logxy=Math.log(y)/Math.log(x);document.write("Résultat : Log<sub><sub>"+x+"</sub></sub>(" + y + ") = " + logxy + ".");
}
...
Exemple : contrôle...function controle(){ x=logarithme.valeurx.value; y=logarithme.valeyry.value; if (x == 0 || y == 0) { alert("La valeur de x et y ne peut pas être zéro!"); logarithme.valeurx.value=""; logarithme.valeury.value=""; } else { calcule(x,y); }}</SCRIPT>...
En utilisant un programme externe...function controle(){ x=logarithme.valeurx.value; y=logarithme.valeyry.value; if (x == 0 || y == 0) { alert("La valeur de x et y ne peut pas être zéro!"); logarithme.valeurx.value=""; logarithme.valeury.value=""; } else { logarithme.submit(); }}</SCRIPT>...<FORM NAME="logarithme" ACTION="logarithme.php">...