Techniques Internet de Base 2006-2007 Licence 2 (Info, Maths, PC/PA) Université Jean Monnet Ruggero G. PENSA

Présentation au sujet: "Techniques Internet de Base 2006-2007 Licence 2 (Info, Maths, PC/PA) Université Jean Monnet Ruggero G. PENSA"— Transcription de la présentation:

1 Techniques Internet de Base 2006-2007 Licence 2 (Info, Maths, PC/PA) Université Jean Monnet Ruggero G. PENSA ruggero.pensa@univ-st-etienne.fr

2 L'attribut commun ID L'attribut ID (commun à tous les éléments) définit un identificateur unique dans un document donné.

3 Les formulaires HTML

4 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)

5 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

6 Mécanisme d'un formulaire 1. Le formulaire s'affiche à l'écran de l'utilisateur 2. 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

7 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 :...

8 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

9 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 : PASSWORD : même chose mais à la place des caractères on affiche des astérisques Exemple :

10 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 Prune Poire Pomme

11 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 : Excellent Médiocre Mauvais

12 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 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 :

13 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 :

14 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 :

15 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 :

16 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 doit valoir multipart/form-data Exemple Choisissez le fichier à envoyer

17 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

18 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é)

19 L'élément SELECT La balise... 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 : Bach Beethoven Brahms Chopin Boulez

20 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

21 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 contient l'attribut MULTIPLE Exemple : St-Etienne

22 Exemple complet Sélectionnez un musicien Bach Beethoven Brahms Chopin Boulez Bach Beethoven Brahms Chopin Boulez

23 L'élément TEXTAREA L'élément... 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 : Donnez une description...

24 L'élément BUTTON L'élément... joue le même rôle que l'élément 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

25 Exemple de bouton Goldorak Du texte rouge

26 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 Prenom : Nom :

27 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 (+)

28 Introduction à JavaScript

29 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 (!!!)

30 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... Il peut y avoir plusieurs scripts dans le même document HTML On peut utiliser des fichiers externes

31 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... 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 :

32 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

33 L'élément NOSCRIPT Pour prévenir les utilisateur dont le navigateur n'est pas capable de traiter un script on utilise le conteneur... Exemple :..... instructions du script...... Votre navigateur ne reconnait pas les scripts.

34 Exemple de programme - 1 Somme des N premiers entiers 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) }

35 Exemple de programme - 2 Calcul de la somme des N premiers nombres entiers Combien de nombres voulez-vous additionner :

36 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'apostrophes Exemple : "ceci est une chaîne de caractères" Booléennes : elle ne peuvent prendre que deux valeurs : true (vrai) et false (faux)

37 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

38 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 */

39 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'

40 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; }

41 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 }

42 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();

43 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...

44 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

45 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 :

46 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

47 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

48 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 ( 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 )

49 Exemple Exemples de boîtes de dialogue Avertir Confirmer Inviter

50 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

51 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

52 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;

53 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.

54 Objets JavaScript Niveau1Niveau2Niveau3Commentaire 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

55 Les propriétés Les attributs de chaque élément se traduisent en propriété pour l'objet correspondant Exemple : 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.value est le texte associé au champ de texte nommé champ_text dans le formulaire ci-dessous nommé form1 )

56 Exemple Boîtes de dialogue function voir(nom) { document.images[0].src=nom; } Goldorak Vs. Actarus <IMG SRC="goldorak.jpg" WIDTH="320" ALT="Goldorak!!!" onmouseover="voir('actarus.jpg')" onmouseout="voir('goldorak.jpg')">

57 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()

58 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()

59 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!!');

60 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');

61 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

62 Exemples 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 + "!"); }

63 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!");

64 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

65 Propriétés et méthodes de l'objet String Pour une chaîne var 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 chaine c = 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.

66 Test du valeur d'une boîte de saisie function corrige(controle) { s = document.getElementById(controle).value; ok=0; for (i=0; i<s.length; i++) { c=s.charAt(i); if (c "9") { ok++; } if (ok>0) { alert("Que de nombres s.v.p.!"); document.getElementById(controle).value=""; }...

67 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);

68 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

69 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

70 Exemple : le formulaire... Calcul de Log x (y) Entrer x : Enrer y :

71 Exemple : calcul du logarithme Logarithme function calcule(x,y) { logxy=Math.log(y)/Math.log(x); document.write("Résultat : Log "+x+" (" + y + ") = " + logxy + "."); }...

72 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); }...

73 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(); }......