Dynamic HTML

Transcription

Dynamic HTML

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
1
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)
2
Exemple : Afficher un message
HTML normal
<HTML>
<HEAD>
<TITLE> Ma page</TITLE>
</HEAD>
<BODY>
Apparition fenêtre
<SCRIPT language="javascript"> Début du script
window.alert("Hello World!");
Script
Fin du script
</SCRIPT>
</BODY>
</HTML>
Fin HTML
3
Affiche une boîte de
dialogue
4
<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")
5
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.
6
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')" >
7
Gestionnaires d'évènements disponibles
Objets
Fenêtre
Evénements
onLoad, onUnload
Lien hypertexte
onClick, onmouseOver, onmouseOut
Elément de texte
onBlur, onChange, onFocus, onSelect
Elément de zone de texte
onBlur, onChange, onFocus, onSelect
Elément bouton
onClick
Case à cocher
onClick
Bouton Radio
onClick
Liste de sélection
onBlur, onChange, onFocus
Bouton Submit
onClick
Bouton Reset
onClick
8
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]
9
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
méthode
argument
10
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 ?")
11
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
12
Appel de fonction
Définition 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) ;
13
Exemple
<html>
<head>
<title> Appel d’une fonction </title>
<script language="javascript">
function affiche(vartexte)
{
méthode window.alert()
alert(vartexte);
window facultatif
}
</script>
</head>
<body>
<a href="#" onClick="affiche('Vous quittez notre
site')">
Lien vers ...
</a>
</body>
</html>
14
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"
15
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)
16
Rigueur des types de données
Dans le même script :
var mavariable=123;
var mavariable="Bonjour";
DANGER de confusion de type
17
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 !");
}
18
Boucles : similaire au C
while (condition est vraie)
{
liste d'instructions;
}
for (depart ; condition poursuite ; incrementation)
{
liste d'instructions;
}
do
{ liste d'instructions }
while (condition est vraie);
19
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
20
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>
21
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.
22
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
23
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"].
24

Dynamic HTML

Transcription

Documents pareils

CV.ROUVIER.F-Info - IUT de Villetaneuse

Lycée Voillaume

chef du service mediation – adjoint au directeur

04 mcd GM d apres Toffolon [Mode de

La Maison des Services à Domicile / 67500

14/10/2016 22:44 photosociale.com page 1/1 Titre : Meeting contre

VIE ASSOCIATIVE LOCATIONS DE SALLES Aulnay-sous

Agro-Form Aulnay-sous-Bois

Aulnay-sous-Bois, le 18 juillet 2014 Monsieur BESCHIZZA Maire d

Maison à vendre Aulnay-sous