techniques internet de base 2006-2007

Techniques Internet de Base2006-2007

Licence 2 (Info, Maths, PC/PA)Université Jean Monnet

Ruggero G. PENSAruggero.pensa@univ-st-etienne.fr

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_x(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_{_"+x+"}(" + 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">...