PRÉSENTATION DE JAVASCRIPT 2E PARTIE - OPTION WEB MULTIMÉDIA - PEIP 2E ANNÉE CLAUDE BARRAS () - LIMSI
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Présentation de JavaScript 2e partie
Option Web Multimédia - PeiP 2e année
Claude Barras (claude.barras@u-psud.fr)
Polytech Paris-Sud
septembre 2018
C. Barras (LIMSI) 1/29Le DOM Plan Le DOM Evénements et timers Mise en pratique C. Barras (LIMSI) 2/29
Le DOM
Le DOM
Représentation du document en mémoire
I Le document (X)HTML est structuré de manière arborescente.
I Chaque noeud de cet arbre correspond aux balises de début et fin
d’un élément.
I JavaScript permet d’explorer et modifier la structure du document
en mémoire par l’intermédiaire d’objets de type Node représentants
les noeuds.
I Application du DOM (Document Object Model)
Exemple (déjà vu) d’accès à un noeud
I HTML:
I JavaScript:
node = document.getElementById("dessin");`
C. Barras (LIMSI) 3/29Le DOM
La classe ‘Node’
Propriétés
I nodeType: document, élément, texte, commentaire. . .
I nodeName: nom de l’élément (par ex. img)
I nodeValue: valeur du contenu d’un élément texte
I attributes[] tableau (en lecture) des attributs d’un élément
I childNodes[] tableau (en lecture) des noeuds enfants
I firstChild: premier enfant du noeud
I lastChild: dernier enfant du noeud
I parentNode: noeud-père
I ownerDocument: document dont dépend le noeud
C. Barras (LIMSI) 4/29Le DOM
La classe ‘Node’ (2)
Méthodes
I appendChild(node): insère un noeud dans l’élément courant.
I removeChild(node): retire un noeud des fils de l’élément courant
(le noeud n’est pas détruit)
I cloneNode(bool): clone le noeud courant (récursivement ou pas)
Propriétés-attributs
I Les noeuds qui représentent les éléments disposent en plus
de propriétés du nom des attributs de la balise:
n = document.getElementById("dessin");
n.src = "new.png"; n.style.left = "10px";
C. Barras (LIMSI) 5/29Le DOM
La classe ‘Document’
La classe Document
I hérite de la classe Node
I représente le noeud racine de l’arborescence d’un document
Méthodes
I createElement(nom): crée un élément avec le nom de balise
I addEventListener(type,callback,bool): ajouter un
gestionnaire d’événement au document
I getElementById(id): noeud d’attribut id correspondant à la
valeur ou null
I getElementsByTagName(nom): tableau d’éléments du nom spécifié
C. Barras (LIMSI) 6/29Le DOM
Le document HTML
La classe HTMLDocument
I hérite de la classe. . . Document!
Propriétés pour un document HTML
I body: raccourci vers le noeud du corps du document HTML
I cookie: associés au document
I title: titre du document
I URL: adresse du document
Variable document
I par commodité, la variable document représente la racine du
document HTML courant en JavaScript:
document.body.appendChild(n);
C. Barras (LIMSI) 7/29Le DOM
Exemple de création d’un élément
Créer une nouvelle image
I // Creation de l'objet image (encore invisible)
var img = document.createElement("img");
// NB on peut aussi écrire directement
var img = new Image();
//
// Definition des attributs et style
img.src = "figure.png";
img.style.position = "absolute";
img.style.left = "10px";
//
// Affichage dans la page
document.body.appendChild(img);
C. Barras (LIMSI) 8/29Le DOM
Manipulation des images
Modifier une image
I img = document.getElementById("monImage");
img.src = "nouveauFichier.png";
Positionner et déplacer une image
I img.style.position = "absolute";
img.style.left = "40px";
img.style.top = "10px";
I la valeur de style est une chaîne de caractère;
attention à bien préciser les unités, sans espace avant.
I cela ne donne pas accès aux valeurs définies dans le CSS
Pieges
I img.style.left += 10;
I concaténation de chaine de caractères => valeur: “40px10”
I comparaison de chaînes de caractères: “100px” < “40px” !!!
C. Barras (LIMSI) 9/29Le DOM
Manipulation des images (2)
Faire apparaitre/disparaître un élément
I img1.style.visibility = "visible";
img2.style.visibility = "hidden";
Placer une image devant une autre
I img1.style.zIndex = 1;
img2.style.zIndex = 2;
I propriété zIndex: valeur plus élevée placée au-dessus
I attention, le nom est différent en HTML/CSS (z-index)
C. Barras (LIMSI) 10/29Le DOM
La fenêtre courante
La classe Window représente une fenêtre ou un onglet du
navigateur
I l’objet window de l’onglet courant est le contexte d’exécution
JavaScript
I nos ‘variables globales’ sont en fait des attributs de cet objet
Propriétés
I document : document contenu dans la fenêtre
I window/self : auto-référence
Méthodes
I alert()/prompt(): affiche ou lit une chaîne de caractères dans
une boîte de dialogue
I setInterval()/setTimeout(): programme l’exécution de code
C. Barras (LIMSI) 11/29Evénements et timers Plan Le DOM Evénements et timers Mise en pratique C. Barras (LIMSI) 12/29
Evénements et timers
Evénements
Interactions avec l’utilisateur
I les actions de l’utilisateur déclenchent des événements
I le document web peut y réagir au moyen d’écouteurs
qui s’ “abonnent” à certains types d’événements
I ce sont des fonctions JavaScript qui vont être appelées
automatiquement lorsque l’événement se produit
Catégories d’événements
I touches clavier, boutons et mouvements de souris
I actions de formulaires
I vie du document ou des images
C. Barras (LIMSI) 13/29Evénements et timers
Evénements du document
Document ou image
I (on)load: après chargement de la page ou de l’image
I (on)unload: en quittant la page
I (on)abort: chargement de l’image interrompu
I (on)error: erreur de chargement (image ou objet)
Intégration avec HTML
I de nombreux éléments HTML ont des attributs du type
onXXX="script" (onload, onerror, onclick, onkeypress. . . )
I associe le lancement d’un script-écouteur à un événement
C. Barras (LIMSI) 14/29Evénements et timers
Exécution de code au chargement de la page
Enregistrement d’une fonction d’initialisation
I
var e; // l'element "im1" n'existe pas encore
function init() {
e = document.getElementById("im1");
}
C. Barras (LIMSI) 15/29Evénements et timers
Fonctions de gestion des événements
Mieux vaut éviter de mélanger JavaScript et HTML!
Equivalent JavaScript de l’attribut HTML onload
I Rappel : lancer une fonction après chargement de la page
window.onload = function() {
...
}
Gestionnaire moderne des événements
I La méthode addEventListener est la plus générale
I elle peut s’appliquer au document ou à des éléments individuels
(images. . . )
window.addEventListener('load', init, false);
window.addEventListener('keypress', clavier, false);
e.addEventListener('click', anime, false);
C. Barras (LIMSI) 16/29Evénements et timers
Evénements formulaires
Evénements
I (on)submit: envoi du formulaire (annulé si retourne ‘false’)
I (on)reset: réinitialisation
I (on)change: modification d’un champ
I (on)select: sélection dans un champ texte
Exemple de validation de formulaire
I function valider() {
if (document.getElementById("nom").value == "") {
alert('Vous devez indiquer le nom');
return false;
}
}
HTML
I
C. Barras (LIMSI) 17/29Evénements et timers
Evénements souris - Principes
Bouton de souris
I (on)mousedown: pression du bouton de la souris
I (on)click: appui et relâchement du bouton souris
I (on)dblclick: double-clic de souris (interfère avec onclick)
I (on)mouseup: relâchement du bouton de la souris
Déplacement de la souris
I (on)mouseover: entrée du curseur dans l’élément
I (on)mouseout: sortie du curseur de l’élément
I (on)mousemove: déplacement de la souris (coûteux!)
C. Barras (LIMSI) 18/29Evénements et timers
Evénements souris - Position de la souris
Spécificités JavaScript
I HTML:
I DOM: propriétés ‘clientX/clientY’ avec offset possible
Code JavaScript
function follow(e) {
alert("Clic en "+e.clientX+" " +e.clientY);
}
C. Barras (LIMSI) 19/29Evénements et timers
Evénements clavier - Principes
Séquence des événements
I (on)keydown: enfoncement de la touche
I (on)keypress: envoi du caractère
(à l’enfoncement puis à chaque répétition)
I (on)keyup: relâchement de la touche
Propriétés de l’événement
I type: type de l’événement (‘keypress’. . . )
I keyCode: code de la touche (pour keydown/up)
I charCode: code du caractère (pour keypress)
I altKey, ctrlKey, shiftKey: modificateurs associés
C. Barras (LIMSI) 20/29Evénements et timers
Evénements clavier - Caractères et touches
Correspondance entre code et caractère
I On peut avoir besoin de convertir le code ASCII en caractère
I JavaScript: String.fromCharCode(charCode)
Quelques valeurs spéciales de keyCode
backspace 8 page haut 33
tabulation 9 page bas 34
entrée 13 fin 35
∗
I shift 16 début 36
contrôle∗ 17 flèche gauche 37
alt∗ 18 flèche haut 38
bloc. maj.∗ 20 flèche droite 39
échappement 27 flèche bas 40
∗
ne déclenche pas d’événement keypress
C. Barras (LIMSI) 21/29Evénements et timers
Evénements clavier - Filtrage de formulaire
Limitation de la saisie aux chiffres
I JavaScript
function filtreChiffre(e) {
if (e.keyCode == 8)
return; // autorise backspace
if (e.charCode < 48 || e.charCode > 57)
return false;
}
I dans un formulaire HTML
C. Barras (LIMSI) 22/29Evénements et timers
Evénements clavier - Gestion dynamique
Pas de fonction pour connaître l’état des touches du clavier,
il faut enregistrer les changements lorsqu’ils se produisent. . .
Savoir à tout moment si une touche est enfoncée
I var touche_gauche = false;
//
function appuie(e) {
if (e.keyCode == 37) touche_gauche = true;
}
window.addEventListener('keydown', appuie, false);
//
function relache(e) {
if (e.keyCode == 37) touche_gauche = false;
}
window.addEventListener('keyup', relache, false);
C. Barras (LIMSI) 23/29Evénements et timers
Propagation des événements
Quel est l’ordre de traitement des événements dans le
document?
I . . . ça dépend!
Propagation
I Modèle de base:
les événements sont attachés à un seul élément
I Modèle avancé:
les événements se propagent dans la hiérarchie des éléments
– en partant de la racine document (Netscape)
– en remontant depuis l’élément (Microsoft)
– dans les 2 sens (W3C)
I Possibilité de bloquer la propagation
– e.stopPropagation()
C. Barras (LIMSI) 24/29Evénements et timers
Programmer une action
Lancer l’exécution (répétitive ou non) d’un script ou d’une fonction
Déclenchement après un timer
I setTimeout("script",delai) programme l’exécution du script
après un délai en millisecondes
Action répétitive
I var timer = setInterval("script",delai);
répète le script avec un intervalle donné
I clearInterval(timer); pour l’interrompre
(il peut être nécessaire de définir timer en variable globale)
Pièges
I La fonction connaîtra les variables globales au moment de
l’exécution!
I Limiter le nombre de timers actifs
C. Barras (LIMSI) 25/29Evénements et timers
Programmer une action - un exemple
function bip() { alert("bip"); }
Ce qui ne marche pas
I le nom de la fonction est évalué
setTimeout("bip", 1000);
I ici, la fonction est exécutée immédiatement
setTimeout(bip(), 1000);
Ce qui marche
I setTimeout(bip, 1000);
Conseillé : création d’une fonction anonyme
I setTimeout(function() {
bip();
}, 1000);
C. Barras (LIMSI) 26/29Evénements et timers
Programmer une action avec paramètre
function bop(i) { alert(i); }
Ce qui ne marche pas
I la valeur de i change au moment de l’exécution
for (i=1; iMise en pratique Plan Le DOM Evénements et timers Mise en pratique C. Barras (LIMSI) 28/29
Mise en pratique
TP2
Animation dans un décor
I récupérer le fichier perso.limsi.fr/barras/web/tp2.zip qui
contient du code et les images d’un pingouin marchant à gauche et
à droite, d’un arbre, de décor de forêt, un bloc de glace. . .
I reprendre les fichiers tp2-base.html/css/js pour afficher et
déplacer le pingouin dans le décor
I gérer les déplacements vers la gauche et vers la droite
I automatiser l’animation avec un timer
I arrêter le déplacement aux extrémités du décor
I ajouter des boutons pour contrôler le pingouin (à gauche, à droite,
plus vite, stop)
I permettre de contrôler le mouvement au clavier
C. Barras (LIMSI) 29/29Vous pouvez aussi lire
