Introduction Aux Systèmes dInformation et Multimédia T. Bourdeaudhuy S. Collart-Dutilleul P. Kubiak IG 2 I - Saison 2006/2007 (X)HTML / Pages Web Statiques Timothy Berners-Lee

Javascript S4 : Syntaxe S5 : Interfaçage avec le modèle DOM, objets Ressources :

ISIM 1 – Pages Web Statiques 3 Ressources Cf. Moodle : –Référence DOM pour les navigateurs –Référence des fonctions javascript DOM1 en Français – DOM 2 en Français – – Tables de compatibilité DOM – Tutoriel HTML DOM W3Schools – Bien coder en javascript – javascripthttp://css.alsacreations.com/Tutoriels-JavaScript/bonnes-pratiques- javascript

ISIM 1 – Pages Web Statiques 4 Programme DOM –Les objets du navigateur Validation/Automatisation de Formulaires –Calculatrice Modification des propriétés de style de document –Popup (CSS) Javascript Dynamique –Popup (Fenêtre Navigateur) –Loto –Evénements

Document Object Model

ISIM 1 – Pages Web Statiques 6 DOM : Modèle Objet de Document Document Object Model –Recommandation du W3C –Standard pour laccès et la manipulation dun document structuré sous forme darborescence 1998 : DOM Niveau 1 –Fonctions génériques applicables à tout document structuré –Fonctions spécifiques aux documents HTML 2000 : DOM Niveau 2 –Simplification de laccès aux nœuds dun document (fonction getElementById )

ISIM 1 – Pages Web Statiques 7 DHTML HTML Dynamique –Dynamique côté client –Possibilité de capturer et réagir à des événements utilisateur : clics, frappes de touches, drag & drop … DHTML = (X)HTML + Javascript + DOM

ISIM 1 – Pages Web Statiques 8 DOM Arborescence dobjets

ISIM 1 – Pages Web Statiques 9 Les objets du navigateur Cf. Référence Javascript sur moodle (séance 4) Cf. Référence Window –Élément le plus haut dans la hiérarchie Javascript –Élément par défaut (peut être omis) –Représente la fenêtre courante du navigateur –Contient lobjet document Navigator –Informations sur le navigateur Screen –Informations sur lécran History –URL précédemment visitées Location –URL de la fenêtre courante (méthodes replace, reload)

ISIM 1 – Pages Web Statiques 10 Exemple Détecter et afficher le navigateur et la résolution de lécran function nav(){ var isMinNS4 = (navigator.appName.indexOf("Netscape") >= 0 && parseFloat(navigator.appVersion) >= 4) ? 1 : 0; var isMinNS6 = (isMinNS4 && document.getElementById) ? 1 : 0; var isMinIE4 = (document.all) ? 1 : 0; var isMinIE5 = (isMinIE4 && navigator.appVersion.indexOf("5.") >= 0) ? 1 : 0; browser = "Vous utilisez un explorateur non reconnu...\nJe ne peux rien pour vous !"; if (isMinNS4) browser = "Hou là là ! Netscape 4 ou 5... \nVous avez bien du courage..."; if (isMinNS6) browser = "Bon, avec Netscape 5 ou 6, ça devrait aller quand même !"; if (isMinIE4) browser = "Attention, IE 4 date un peu..."; if (isMinIE5) browser = "C'est parfait pour vous !"; alert(browser); } function res(){ width = screen.width; height = screen.height; if ((width>=800) && (height>=600)) alert("Tout va bien pour vous !") else alert("On ne peut pas plaire à tout le monde !"); }

ISIM 1 – Pages Web Statiques 11 Exercice : Timeout Déclencher un traitement après un certain nombre de millisecondes –window.setTimeout("boucle()",30); –Retourner à la page précédente ! –Utiliser lhistorique Exercice : –Changer le lieu de la page après 3 secondes –« Vous allez être redirigé » –Recharger la page toutes les 5 secondes –Afficher la date du navigateur

ISIM 1 – Pages Web Statiques 12 Accès aux nœuds Par tableaux : forms, images, link (DOM1) –document.forms[nomFormulaire].submit() –document.forms[nomFormulaire].action –document.forms[nomFormulaire].elements[i].type –document.forms[nomFormulaire].elements[i].value Par nom (DOM2) –document.getElementById("UnIdentifiant") –document.getElementsByTagName("p") Par descendance –parentNode –firstChild –lastChild –Document racine : document.body Les indices commencent à 0

ISIM 1 – Pages Web Statiques 13 Propriétés des noeuds Selon leur type –Cf. Référence Javascript sur moodle (séance 4) –Cf. Informations par défaut –nodeName –nodeValue –nodeType

ISIM 1 – Pages Web Statiques 14 Exercices : Formulaires Lister les types et valeurs des champs dun formulaire Modifier la valeur dun champ dentrée texte Copier la valeur dun champ vers un autre Vérifier si un bouton radio ou checkbox est sélectionné Lister les valeurs des items dune liste déroulante –getElementsByTagName Une idée à suivre : –Calculatrice en Javascript –Utiliser loutil de changement de base : –Sélection dune base de départ et darrivée –Bouton permettant de lancer la conversion

Javascript Dynamique Popups Javascript Événements

ISIM 1 – Pages Web Statiques 16 Popups Javascript Vous connaissiez : alert, prompt, confirm Voici : window.open Syntaxe : –window.open(URL, name [, features]) Name permet de référencer la fenêtre –Possibilité de la « piloter » depuis la fenêtre qui la ouverte Features permet dindiquer lapparence de la fenêtre : –alwaysLoweredalwaysRaisedchannelmodedependentdirectories –fullscreenheighthotkeysinnerHeightinnerWidth –leftlocationmenubarouterHeightouterWidth –resizablescreenXscreenYscrollbarsstatus –titlebartoolbartopwidthz-lock Exemple myWindow = window.open("", "tinyWindow", 'toolbar,width=150,height=100'); myWindow.document.write("Welcome to this new window!"); myWindow.document.bgColor="lightblue"; //myWindow.document.close(); Fonctionnalité généralement interdite par les barres doutils récentes

ISIM 1 – Pages Web Statiques 17 Événements Événement = action de lutilisateur –Souris ou clavier –Certains événements ne sappliquent quà certaine balises – Possibilité dajouter à chaque balise un gestionnaire dévénement –onEvenement="Action_Javascript_ou_Fonction();" Objet définissant lévénement déclencheur : event –onKeydown="whichButton(event);" –Permettra de savoir quelle touche a été pressée : event.keyCode

ISIM 1 – Pages Web Statiques 18 Liste des événements Abort l'utilisateur interrompt le chargement de l'image Blur l'élément perd le focus Change l'utilisateur modifie le contenu d'un champ de données. Clickl'utilisateur clique sur l'élément associé à l'événement Dblclickl'utilisateur double-clique sur l'élément associé à l'événement Dragdrop l'utilisateur effectue un glisser-déposer sur la fenêtre du navigateur ErrorSe déclenche lorsqu'une erreur apparaît durant le chargement de la page Focusl'utilisateur donne le focus à un élément Keydown l'utilisateur appuie sur une touche de son clavier keypress l'utilisateur maintient une touche de son clavier enfoncée Keyup l'utilisateur relâche une touche de son clavier préalablement enfoncée Load le navigateur de l'utilisateur charge la page en cours MouseOver l'utilisateur positionne le curseur de la souris au-dessus d'un élément MouseOutle curseur de la souris quitte un élément Resetl'utilisateur efface les données d'un formulaire à l'aide du bouton Reset Resizel'utilisateur redimensionne la fenêtre du navigateur Selectl'utilisateur sélectionne un texte dans un champ de type "text" ou "textarea« Submitl'utilisateur clique sur le bouton de soumission d'un formulaire Unloadle navigateur de l'utilisateur quitte la page en cours

ISIM 1 – Pages Web Statiques 19 Exemple Ouverture dune boite de dialogue après clic sur un lien –Comment généraliser cela à tout clic sur la page ? <a href="javascript:;" onClick="window.alert('Alerte');" > Cliquez ici! Ne pas changer de page

ISIM 1 – Pages Web Statiques 20 Exemple « Rollover » : modification dune image lors du survol dun lien par la souris <a href="javascript:;" onMouseOver="img_1.src='off.gif';" onMouseOut="img_1.src='on.gif';" > on off

ISIM 1 – Pages Web Statiques 21 Propriétés de lobjet event altKeyReturns whether or not the "ALT" key was pressed ButtonReturns which mouse button was clicked clientXReturns the horizontal coordinate of the mouse pointer clientYReturns the vertical coordinate of the mouse pointer ctrlKeyReturns whether or not the "CTRL" key was pressed metaKeyReturns whether or not the "meta" key was pressed relatedTargetReturns the element related to the element that triggered the event screenXReturns the horizontal coordinate of the mouse pointer screenYReturns the vertical coordinate of the mouse pointer shiftKeyReturns whether or not the "SHIFT" key was pressed

ISIM 1 – Pages Web Statiques 22 Exercices Sélectionner le texte automatiquement lorsque lon clique sur un champ texte dun formulaire Lors de lappui sur une touche du clavier, remplir un champ dentrée texte avec la touche saisie

Modification des propriétés de style de document Popup CSS Palette de couleurs

ISIM 1 – Pages Web Statiques 24 Modifier le style Accès à la classe dun nœud en lecture/écriture –Nœud.className Accès aux propriétés de style –Nœud.style.propriete = valeur Exercice : changer la couleur de fond de body

ISIM 1 – Pages Web Statiques 25 Règle importante Si dans un script une mention de feuille de style doit être lue ou modifiée, le trait d'union devient superflu et la première lettre du mot suivant habituellement le trait d'union doit être en majuscules Exemple : –La mention de feuilles de style background-color s'écrit dans un Script backgroundColor Liste complète : javascript-references-css-proprietes- conversion.shtml javascript-references-css-proprietes- conversion.shtml

ISIM 1 – Pages Web Statiques 26 Récupérer le nœud cliqué Problème : laccès à cet élément dépend de la version du navigateur function traiter(e) { var targ;// futur « noeud cliqué » if (!e) var e = window.event; if (e.target) targ = e.target; else if (e.srcElement) targ = e.srcElement; if (targ.nodeType == 3) // Safari bug targ = targ.parentNode; … }

ISIM 1 – Pages Web Statiques 27 Popup CSS Définir une balise div invisible (par CSS) –Changer sa propriété dinvisibilité avec javascript –Changer sa taille et son contenu –Changer sa position Une idée à suivre : –En faire une info-bulle –Faire du Drag&Drop Exemple : –

ISIM 1 – Pages Web Statiques 28 Palette de couleurs Pour une bonne palette de couleurs –Écrire un tableau HTML de taille variable en javascript –Cf. Diapo suivante –Les lignes ont des identifiants CSS –Associer à chaque case une couleur de fond différente –Lorsque la souris passe sur une case, la couleur saffiche dans un champ de formulaire –Lorsque lon clique, la couleur sécrit dans le document Une idée à suivre –Faire de cette palette de couleur un popup permettant de remplir automatiquement un champ de formulaire ! Exemple : –

ISIM 1 – Pages Web Statiques 29 Pour fixer les idées Lextension WebDeveloper de FireFox permet dafficher le code généré par Javascript 255/N, 0, 00, 255/N, 00, 0, 255/N 2.255/N, 255/N, 255/N255/N, 2.255/N, 255/N255/N, 255/N, 2.255/N... i.255/N, 255/N, 255/N255/N, i.255/N, 255/N255/N, 255/N, i.255/N , (N-1).255/N, (N-1).255/N(N-1).255/N, 255, (N-1).255/N(N-1).255/N, (N-1).255/N, 255

ISIM 1 – Pages Web Statiques 30 Menu déroulant Menu déroulant à un niveau, utilisant des listes Deux types déléments de liste UL –Développés : affichés en mode block –Réduits : cachés Deux types déléments de liste LI –Développés : affichés avec une image de fond « minus » –Réduits : affichés avec une image de fond « plus » Lorsque lon clique sur un élément –Réduire tous les éléments UL et LI –Développer les éléments UL et LI correspondant à lélément cliqué plus minus

Cas détude Final

ISIM 1 – Pages Web Statiques 32 [Inspiré de faits réels…] Lanimation phare de la fête décole de votre enfant est compromise : on a perdu le jeu de bingo ! Heureusement : –Vous avez toujours votre portable et votre vidéo-projecteur sur vous ! Il vous reste 1h pour devenir un héros en développant une application qui le remplace ! –Cf. Moodle pour une démo dun loto

ISIM 1 – Pages Web Statiques 33 Les ingrédients du bingo Une feuille de style définissant : –Des classes de cases –Tiré, Non tiré, Allumé –Des identifiants de cases –De id1 à id90 Du code javascript permettant : –De se souvenir de létat des cases déjà tirées (tableau) –De tirer aléatoirement le numéro dune case non tirée –En allumant une dizaine de cases candidates avant de faire son choix pour assurer le « suspense »… –De modifier la classe de cette case Un document HTML qui utilise tout cela