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 • Le formulaire s'affiche à l'écran de l'utilisateur • L'utilisateur commence à renseigner les boîtes de saisie et coche les boutons radio et les cases à cocher qui lui conviennent • Il clique sur le bouton Reset (pour recommencer) ou sur le bouton Submit (pour envoyer les renseignements) • Si Submit : le navigateur contacte le serveur dont l'URL est définie dans le formulaire et lui envoie les éléments recueillis • Le serveur appelle le programme spécifié dans l'URL et lui transmet les données • 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 formulaire • NAME : précise un nom pour le contrôle • VALUE : 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 simple • Syntaxe proche de celle du C • Langage interprété • Langage standardisé • Langage sûr • pas d'instruction d'entrées-sorties de fichier • pas 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) { caseValeur1: Liste d'instructions; break;caseValeur2: Liste d'instructions; break;default: Liste d'instructions; break;}

Instructions itératives • Ce sont les mêmes que celles du C • for (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

Techniques Internet de Base 2006-2007