Dynamic HTML Regroupement de trois éléments : le HTML les feuilles de styles, le DOM (Document Objet Model) Représentation du document HTML en une hiérarchie d'objets Pour agir sur le document, on utilise le langage ECMAscript (javascript) ECMA : European Computer Manufacturers Association Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
Javascript // Java « Tu as vu mon nouveau diesel à essence ? » « Qu’est-ce que vous appelez la souris, exactement ? » « J’ai écrit un script java » javascript : appellation Netscape -> ECMAscript -> langage de script, interprété Java : langage objet (Sun) (environnement de développement, machine virtuelle) Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
Exemple : Afficher un message <HTML> <HEAD> <TITLE> Ma page</TITLE> </HEAD> <BODY> Apparition fenêtre <SCRIPT language="javascript"> window.alert("Hello World!"); </SCRIPT> </BODY> </HTML> HTML normal Début du script Script Fin du script Fin HTML Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
Affiche une boîte de dialogue Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
<script> … </script> <script type="text/javascript" language="javascript"> ici le code de votre script </script> Le navigateur reconnaît les balises <script> </script> n’affiche pas le texte du code placé entre ces deux balises interprète ce code et l’exécute. L'argument language décrit le langage utilisé ("JavaScript" "JavaScript1.1" "JavaScript1.2") Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
Dans un fichier externe Dans le fichier HTML <script type="text/javascript" language="javascript" SRC="chemin/fichier.js"> ... </script> Intérêt : simplifier la maintenance Modification du code : toutes les pages y faisant appel sont modifiées. Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
Dans la balise HTML avec un événement Evénement : action de l'utilisateur (exemple : clic de la souris sur un bouton -> onClick) action du navigateur (exemple : chargement de la page HTML -> onLoad) < input type="button" name="monbouton" value="Cliquez ici" onClick="alert('Bonjour')" > Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
Gestionnaires d'évènements disponibles Objets Gestionnaires d'évènements disponibles Fenêtre onLoad, onUnload Lien hypertexte onClick, onmouseOver, onmouseOut Elément de texte onBlur, onChange, onFocus, onSelect Elément de zone de texte Elément bouton onClick Case à cocher Bouton Radio Liste de sélection onBlur, onChange, onFocus Bouton Submit Bouton Reset Evénements Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
Objets du navigateur fenêtre : objet window document : objet window.document formulaire : objet window.document.form Pour désigner les boutons radio : window.document.form.radio[0] window.document.form.radio[1] Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
Méthodes des objets Pour chaque objet : méthodes prédéfinies. Méthode : Fonction ou procédure permettant des actions sur l’ objet. Appeler d’une méthode : nom_objet.nom_methode(arguments) Exemple : document.write("<p>Il fait beau</p>"); objet argument méthode Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
Exemple : Méthodes de window window.alert("ceci est une alerte"); window.prompt("ceci est un prompt", "valeur par defaut"); window.confirm("ceci est une confirmation ?") Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
Objets prédéfinis du DOM Modèle arborescent ECMAscript : Document Object Model. window document forms : tableau des formulaires du document éléments du formulaire (boutons, listes déroulantes, …) images : tableau des images de la page history location screen frames parent self top Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
Appel de fonction Définition de la fonction Appel de la fonction function nom_de_la_fonction (paramètre_1, paramètre_2...) { liste d’instructions; } Appel de la fonction nom_de_la_Fonction() ; Nom_de_la_fonction(p1,p2) ; Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
Exemple méthode window.alert() window facultatif <html> <head> <title> Appel d’une fonction </title> <script language="javascript"> function affiche(vartexte) { alert(vartexte); } </script> </head> <body> <a href="#" onClick="affiche('Vous quittez notre site')"> Lien vers ... </a> </body> </html> méthode window.alert() window facultatif Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
Déclaration de variables Peut se faire de deux façons : explicite avec le mot clé var : on indique de façon rigoureuse qu'il s'agit d'une variable var chaine = "bonjour" implicite sans le mot clé var : le navigateur détermine seul qu'il s'agit d'une déclaration de variable chaine = "bonjour" Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
Types de données En javascript, il existe quatre types de données : des nombres : entiers ou réels des chaînes de caractères (string) : une suite de caractères (mot, phrase...) des booléens : variables à deux états true : si le résultat est vrai false : si le résultat est faux type null : absence de données (par exemple tester si champ formulaire vide) Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
Rigueur des types de données Dans le même script : var mavariable=123; var mavariable="Bonjour"; DANGER de confusion de type Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
Tests : if (similaire au langage C) if (condition réalisée) {liste d'instructions1} else {liste d'instructions2} var age = window.prompt("Veuillez saisir votre age :"); if (age >= 18) { window.alert("Vous êtes majeur."); } else window.alert("Vous êtes mineur !"); Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
Boucles : similaire au C while (condition est vraie) { liste d'instructions; } for (depart ; condition poursuite ; incrementation) { do { liste d'instructions } while (condition est vraie); Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
Quelques « classiques » Changement d’image au survol de souris Ouverture de fenêtre « pop-up » Test dans un formulaire adresse e-mail obligatoire adresse e-mail contenant @ et . etc. Copier : non / S’inspirer : oui Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
Changement d'images <HTML> <HEAD><title>Changement d’images</title> <script language="javascript1.1"> function lightUp() { document.images["homeButton"].src="off.gif" } function dimDown() { document.images["homeButton"].src="on.gif" </script> </HEAD> <BODY> <a HREF="#" onmouseOver="lightUp();" onmouseOut="dimDown();"> <IMG SRC="on.gif" name="homeButton" width=100 height=50 border=0> </a> Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
Fenêtres [window.]open( "URL" , "nom_fenêtre" , "caractéristiques_fenêtre" ) URL : adresse de la page HTML que l'on désire afficher dans la nouvelle fenêtre. caractéristiques_de_la _fenêtre : liste des caractéristiques de la fenêtre notées à la suite, séparées par des virgules, sans espaces ni passage à la ligne. Il n’est pas obligatoire de les préciser toutes. Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
Fenêtres Caractéristique Description toolbar=yes / no Affichage de la barre d'outils location=yes / non Affichage de champ d'adresse (ou localisation) directories=yes / no Affichage des boutons d'accès rapide status=yes / no Affichage de la barre d'état menubar=yes / no Affichage de la barre de menus scrollbars=yes / no Affichage des barres de défilement. resizable=yes / no Dimensions de la fenêtre modifiables width=x en pixels Largeur de la fenêtre en pixels height=y en pixels Hauteur de la fenêtre en pixels Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
Objets des formulaires Tableau de tous les formulaires : objet forms. Adressage associatif : document.forms["nom_Formulaire"]. Indispensable de nommer les formulaires Chaque formulaire form contient un tableau de tous les éléments (input, textarea, ...) du formulaire : objet elements. Adressage associatif : document.nom_Form.elements ["nom_Element"]. Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois