Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
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
2
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
3
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
4
Affiche une boîte de dialogue
Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
5
<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
6
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
7
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
8
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
9
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
10
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
11
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
12
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
13
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
14
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
15
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
16
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
17
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
18
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
19
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
20
Quelques « classiques »
Changement d’image au survol de souris Ouverture de fenêtre « pop-up » Test dans un formulaire adresse obligatoire adresse et . etc. Copier : non / S’inspirer : oui Grégoire Maréchal – Lycée Voillaume – Aulnay-sous-bois
21
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
22
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 [window.]open( URL , nom_fenêtre , caractéristiques_fenêtre )](http://slideplayer.fr/slide/3751742/12/images/22/Fen%C3%AAtres+%5Bwindow.%5Dopen%28+URL+%2C+nom_fen%C3%AAtre+%2C+caract%C3%A9ristiques_fen%C3%AAtre+%29.jpg "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.")
23
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
24
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
Présentations similaires
