JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... ·...
Transcript of JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... ·...
![Page 1: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/1.jpg)
JavaS ript, DOM, et .Programmation WebLi en e 3 informatiqueSébastien Verelverel�i3s.uni e.frwww.i3s.uni e.fr/∼verelÉquipe S oBi - Université de Ni e Sophia-Antipolis16 o tobre 2009
![Page 2: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/2.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesObje tifs de la séan e 61 Connaitre le prin ipe du DOM2 Savoir naviguer dans le DOM3 Savoir modi�er le DOM4 Savoir modi�er un style d'un élément du DOM5 Savoir élaborer un menu ave javas ript6 Savoir dépla er des éléments ave javas ript7 Savoir utiliser les formulaires ave javasript8 Savoir véri�er un formulaireQuestion prin ipale du jour :Quels sont les possibilités de javas ript en manipulation dedo uemnt ? Sébastien Verel Programmation Web
![Page 3: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/3.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesPlan1 Rappels et ompléments2 DOM3 Javas ript et CSS4 FormulairesSébastien Verel Programmation Web
![Page 4: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/4.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesPossibilité de javas riptValider des hamps de formulairesEnregistrement et le ture de ookiesModi� ation dynamique de l'aspe t de ertains élément de lapageA� hage et masquage des élémentsDépla ements des éléments de la pageCapture de ertains événements et modi� ation de la page en onséquen eDé�lement de ontenuRole d'intefa e ave une appli ation �té serveur sans quitterla pageLe afé Sébastien Verel Programmation Web
![Page 5: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/5.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesBases du langagetypes : lassique :entier, réel, et .pas de dé laration expli iteutiliser les ommentaires pour plus sureté
Sébastien Verel Programmation Web
![Page 6: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/6.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesLes tableauxUne suite d'éléments séparés par des virgules est un tableaudé�ni en extension :"trois" , "deux" , "un" , "boom"tableaux asso iatifs :"fr" : "trois, deux, un, boom" ,"en" : "three, two, one, boom" ,"de" : "drei, zwei, eins, boom"
Sébastien Verel Programmation Web
![Page 7: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/7.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesBases du langagefon tions :mot lé fun tionen général dans l'élément headparamètres, arguments :non typévaleur �nale :returnparamètres :pas de obligation de présen e à l'appel
Sébastien Verel Programmation Web
![Page 8: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/8.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesNombre de paramètres variablesUtilisation d'un tableau :fun tion affi he(str) {for(var i = 0; i < str.length; i++)alert(str[i℄);}affi he("trois", "deux", "un", "boom");Sébastien Verel Programmation Web
![Page 9: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/9.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesBases du langageobjets :pas de mot lé distin tif :se dé�nit sous forme de fon tioninstantiation à l'aide de newexisten e d'un objet :test sur l'objetliste des propriétés :utilisation de indé laration des méthodes et propriétés de lasse : this
Sébastien Verel Programmation Web
![Page 10: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/10.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesExemple de lassefun tion LaClasse {this. opyright = "( ) S. Verel 2008" ;this.Count = ount ;var de ompte = {"fr" : "trois, deux, un, boom" ,"en" : "three, two, one, boom" ,"de" : "drei, zwei, eins, boom"}fun tion ount(lang) {if (de ompte[lang℄)windows.alert(de ompte[lang℄);}}obj = new LaClasse();obj.Count("de"); Sébastien Verel Programmation Web
![Page 11: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/11.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesBases du langagestru ture de ont�le :test binaire :if (window.XMLhttpRequest)alert("youpi");elsealert("tant pis");bou le à nombre d'itération dé�ni :for(var i = 0; i < n; i++)par ours des propriétés :for prop in window { ... }bou le à nombre d'itération indé�ni :while ( ontinue) { ... }Sébastien Verel Programmation Web
![Page 12: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/12.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesIn lusion de javas ript3 méthodes :dans l'élément s ript :<s ript type="text/javas ript">...</s ript> ode externe :<s ript type="text/javas ript" s r="devine.js"></s ript>lors d'un événement :<body onload="affi he()">...</body> Sébastien Verel Programmation Web
![Page 13: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/13.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesObjets javas ript : Stringliste des propriétés et méthodes :length harAt(i) onta t(" ")repla e(str1, str2)substringtoLowerCasesplit(sep)sear h(str), indexOf(str), lastIndexOf(str)Sébastien Verel Programmation Web
![Page 14: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/14.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesObjets javas ript : Mathliste des propriétés et méthodes :des onstantesrandom()abs(x)fon tions tigonométriqueslog(x), exp(x)sqrt(x)pos(x, y)min(x,y) , max(x,y)round, �oor, eil Sébastien Verel Programmation Web
![Page 15: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/15.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesObjets javas ript : Date réation date du jour :new Date() réation date dé�nie :new Date("O t 16, 2008 10 :56 :00")new Date(2008, 10, 16, 10, 56, 00)obtenir une propriété :get...dé�nir une propriété :set... Sébastien Verel Programmation Web
![Page 16: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/16.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesObjets javas ript : Imageinstan iation lassiqueimg = new Image();propriété de la sour eimg.sr = " o otier.jpg"tester le hargementif (img. omplete)alert(" 'est hargé");
Sébastien Verel Programmation Web
![Page 17: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/17.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesObjets javas ript : historyba k()forward()go(n)
Sébastien Verel Programmation Web
![Page 18: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/18.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesObjets javas ript : lo ationhost : l'h�te, le domaine, et le port utilisés dans l'urlhref : url omplètehostname : nom de l'hotepathname : hemin qui suit le nom de domainereload()
Sébastien Verel Programmation Web
![Page 19: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/19.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesObjets javas ript : windowwindow.lo ationwindow.historyredimensionnement :resizeTo(x, y)resizeBy(dx, dy)repositionnement :moveTo(x, y)moveBy(dx, dy)open("url", "nom", "options")Sébastien Verel Programmation Web
![Page 20: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/20.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesObjets javas ript : navigatorappName : nom du navigateurappCodeName : nom de ode du navigateurappVersion : versionplateform : système d'exploitation
Sébastien Verel Programmation Web
![Page 21: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/21.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesRetour TP 05javas ript un langage permissifil faut être en ore plus vigilantne pas oublier les bonnes méthodes de programmation
Sébastien Verel Programmation Web
![Page 22: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/22.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesDo ument Obje t ModelD.O.M. : Do ument Obje t Modelmodèle objet de do umentmodèle objet pour manipuler un do ument HTMLune API : appli ation programming intefa eappro he des modèles objets du W3C : propriétés, méthodes,des ription
Sébastien Verel Programmation Web
![Page 23: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/23.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesDo ument Obje t ModelDes ription :modèle bjet alquer sur la hierar hie arbores ente des élémentsde la pagebalise de la page : noeudnoeuds parents, enfants selon la ontenan emor eau de texte : noeud propreMéthodes :navigation dans l'arbreajout, suppression des élémentsSébastien Verel Programmation Web
![Page 24: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/24.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesObje tifsinterfa e de programmation standart quelque soit OSuniformiser la manipulation des do uments web par s riptsECMAs ript : standardisation javas riptinformations sur http://w3 .org/DOM
Sébastien Verel Programmation Web
![Page 25: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/25.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesA és élément spé i�quedo ument.getElementById("nom")a essible seulement lorsque tout le do ument a été hargéfun tion elementID(name) {window.alert(do ument.getElementById(name));}<boby><p id="para"> ... </p><s ript type="text/javas ript">elementID("para");</s ript></body> Sébastien Verel Programmation Web
![Page 26: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/26.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesA és aux balisesdo ument.getElementByTagName("nomBalise")retourne le tableau ontenant toutes les balises désignéesa essible seulement lorsque tout le do ument a été hargéfun tion elementParagraphe(name) {window.alert(do ument.getElementByTagName("p") +" ( " +do ument.getElementByTagName("p").length +" éléments ) ");} Sébastien Verel Programmation Web
![Page 27: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/27.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesNavigation dans l'arbores en ePropriétés :�rstChild : premier noeud enfantlastChild : dernier noeud enfant hildNodes : tableau de tous les noeuds enfantsparentNode : noeud parentnextSibling : noeud suivant de même niveaupreviousSibling : noeud pré édent de même niveauSébastien Verel Programmation Web
![Page 28: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/28.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesInformation de noeudPropriétés :nodeName : nom de la balise du noeud (♯text si texte)nodeValue : seulement pour les noeuds texterenvoie le textenodeType : type du noeud1 : balise2 : attribut3 : texte8 : ommentaire XHTML9 : do ument10 : DTD11 : fragmentSébastien Verel Programmation Web
![Page 29: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/29.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesSuppression d'élémentremoveChild()à partir du noeud parentsuppression du �ls désigné en paramètrefun tion removeItem() {var list = do ument.getElementById("list");if (list. hildNodes.length > 0)list.removeChild(list.lastChild);} Sébastien Verel Programmation Web
![Page 30: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/30.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesAjout d'élémentsappendChildà partir du noeud parentsajout l'enfant désigné à la suite des autres enfantsfun tion addItem() {var list = do ument.getElementById("list");var newNode = do ument. reateElement("li");list.appendChild(newNode);} reateElement(name) : réer un élement de type nameSébastien Verel Programmation Web
![Page 31: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/31.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesAjout d'élémentsinsertBeforeà partir du noeud parentsajout un noeud enfantavant le noeud en se ond paramètresfun tion addItem() {var list = do ument.getElementById("list");var newNode = do ument. reateElement("li");list.insertBefore(newNode, list.firstChild);} Sébastien Verel Programmation Web
![Page 32: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/32.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesCréation élément de texte reateTextNode rée un noeud �ls de textevar nr = 1;fun tion addItem() {var list = do ument.getElementById("list");var newNode = do ument. reateElement("li");nr++;var newTextNode = do ument. reateTextNode("Item " + nr);newNode.appendChild(newTextNode);list.appendChild(newNode);} Sébastien Verel Programmation Web
![Page 33: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/33.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesManipulation d'attributssetAttribute2 arguments : le nom de l'attribut et sa valeurvar nr = 1;fun tion addItem() {var list = do ument.getElementById("list");var newNode = do ument. reateElement("li");nr++;var newTextNode = do ument. reateTextNode("Item " + nr);var newLink = do ument. reateElement("a");newLink.setAttribute("href", "http://www.i3s.uni e.fr/~verel");newLink.appendChild(newTextNode);newNode.appendChild(newLink);list.appendChild(newNode);} Sébastien Verel Programmation Web
![Page 34: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/34.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesClonage d'élément loneElementtrue : opie en profondeur ave enfantfalse : opie du noeud seulementfun tion addItem(mode) {var list = do ument.getElementById("list");var newItem = list.firstChild. loneNode(mode);list.appendChild(newItem);} Sébastien Verel Programmation Web
![Page 35: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/35.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesRempla ement d'élémentrepla eChilddepuis le noeud parent2 arguments : substitue le noeud en se ond argument par le noeuden premier argumentvar nr = 1;fun tion addItem() {var list = do ument.getElementById("list");var newNode = do ument. reateElement("li");nr++;var newTextNode = do ument. reateTextNode("Item " + nr);newNode.appendChild(newTextNode);list.repla eChild(newNode, list.firstChild);} Sébastien Verel Programmation Web
![Page 36: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/36.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesModi� ation de fragmentinnerHtmlModi�e le ode interne HTML de n'importe quel élément.Non standardisé, non spé i�é dans DOM, mais mar he quandmême.var nr = 1;fun tion addItem() {var list = do ument.getElementById("list");nr++;var newTextNode = "<li>Item " + nr + " </li>";newNode.appendChild(newTextNode);list.innerHTML += newNode;} Sébastien Verel Programmation Web
![Page 37: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/37.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesPositionnement des élémentsAve tout sauf IE :.style.left = "0px".style.top = "0px"Ave IE :.style.posLeft = 0.style.posTop = 0fun tion position(nom) {var el = do ument.getElementById(nom);el.style.left = "0px";el.style.posLeft = 0;el.style.top = "0px";el.style.posTop = 0;} Sébastien Verel Programmation Web
![Page 38: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/38.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesNavigation toujours apparenteAve tout sauf IE :window.pageXo�set et window.pageYo�setAve IE :window.body.s rollLeft et window.body.s rollTopfun tion positionNavigation() {var nav = do ument.getElementById("navigation");var x, y;var navwidth = 155;if (windiw.innerWidth) {x = window.innerWidth + window.pageXoffset - navwidth;y = window.pageYoffset + 10;} else {with (dou ment.body) {x = lientWidth + s rollLeft - navwidth;y = s rollTop + 10;}}nav.style.left = x + "px";nav.style.posLeft = x;nav.style.top = y + "px";nav.style.posTop = y;}Sébastien Verel Programmation Web
![Page 39: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/39.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesNavigation toujours apparentefun tion positionNavigation() {var nav = do ument.getElementById("navigation");var x, y;var navwidth = 155;if (window.innerWidth) {x = window.innerWidth + window.pageXoffset - navwidth;y = window.pageYoffset + 10;} else {with (do ument.body) {x = lientWidth + s rollLeft - navwidth;y = s rollTop + 10;}}nav.style.left = x + "px";nav.style.posLeft = x;nav.style.top = y + "px";nav.style.posTop = y;} Sébastien Verel Programmation Web
![Page 40: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/40.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesA és aux styles CSSa ès par propriété style ommun à tout objettiret − impossible : rempla er par majus ule ("à la java")fun tion makeBold() {do ument.getElementById("para").style.fontWeight = "bold" ;window.setTimeOut("makeLighter();", 1000);}fun tion makeLighter() {do ument.getElementById("para").style.fontWeight = "lighter" ;window.setTimeOut("makeBold();", 1000);}window.onload = makeBold ;Sébastien Verel Programmation Web
![Page 41: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/41.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesA és aux lasses lassNamefun tion makeBold() {do ument.getElementById("para").style. lassName = "strong" ;window.setTimeOut("makeLighter();", 1000);}fun tion makeLighter() {do ument.getElementById("para").style. lassName = "weak" ;window.setTimeOut("makeBold();", 1000);} Sébastien Verel Programmation Web
![Page 42: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/42.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesA és aux feuilles de style individuellesstyleSheets : tableaux qui ontient toutes les feuillesdisable : true ou false pour a tiver ou non la feuillepossibilité d'a tiver la feuille vouluefun tion makeBold() {do ument.styleSheets[0℄.disable = false;do ument.styleSheets[1℄.disable = true;window.setTimeOut("makeLighter();", 1000);}fun tion makeLighter() {do ument.styleSheets[0℄.disable = true;do ument.styleSheets[1℄.disable = false;window.setTimeOut("makeBold();", 1000);} Sébastien Verel Programmation Web
![Page 43: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/43.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesA és aux regles de CSSave IE :propriété rulesautre que IE :propriété ssRulesfun tion hangeColor(i) {if (do ument.styleSheets[i℄.rules) {do ument.styleSheets[i℄.rules[0℄.style. olor = randomColor() ;do ument.styleSheets[i℄.rules[1℄.style. olor = randomColor() ;} else if (do ument.styleSheets[i℄. ssRules) {do ument.styleSheets[i℄. ssRules[0℄.style. olor = randomColor() ;do ument.styleSheets[i℄. ssRules[1℄.style. olor = randomColor() ;}} Sébastien Verel Programmation Web
![Page 44: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/44.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesDisparition de ontenuChangements réalisés ave CSS lorsque par exemple :E ran d'attente qui disparaitUn seul onglet a� hé à la foisPlusieurs possibilités :utiliser le DOM : hangement de l'arbreCCS, propriété visibilityCSS, propriété displaySébastien Verel Programmation Web
![Page 45: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/45.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesDisparition de ontenu : visibilityfun tion showHide(show, hide) {do ument.getElmentById(show).style.visibility = "visible" ;do ument.getElmentById(hide).style.visibility = "hidden" ;}Mais positionnement absolu : di�éren e entre navigateur
Sébastien Verel Programmation Web
![Page 46: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/46.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesDisparition de ontenu : displayfun tion showHide(show, hide) {do ument.getElmentById(show).style.display = "blo k" ;do ument.getElmentById(hide).style.display = "none" ;}
Sébastien Verel Programmation Web
![Page 47: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/47.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesModi� ation du pointeur de souris ursorpropriété de urseurwindow.onload = fun tion() {do ument.getElmentById("helpButton").style. ursor = "help";}auto, rosshair, default, e-resize, help, move, n-resize, ne-resize,nw-resize, pointer, s-resize, se-resize, sw-resize, test, w-resize, wait.Sébastien Verel Programmation Web
![Page 48: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/48.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesObje tifsCommuni ation ave le serveur :données saisies puis envoyé au serveurValidation des donnéesautres opérations possibles
Sébastien Verel Programmation Web
![Page 49: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/49.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesFormulaire ave javas riptutilisation de do ument.formstableau de tous les formulairespar l'indi e, ou par le "name" du formulaireutilisation de do ument.forms[ ℄.elementstableau de tous les éléments du formulairepar l'indi e, ou par le "name" de l'élément<form name="mainForm">...</form>...do ument.forms["mainForm"℄do ument.forms[0℄do uemnt.forms[0℄.elements["element1"℄do ument.mainForm.element1Sébastien Verel Programmation Web
![Page 50: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/50.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesA ès aux hamps de texte.elements[name℄.valuepropriété value donne a és au hamps texte en le ture ou é riturefun tion showText(f) {window.alert(f.elements["textField"℄.value);}...<form><input type="text" name="textField"/><textarea> bla bla </textaera><input type="password" /><input type="button" value="show text"on li k="showText(this.form);" /></form> Sébastien Verel Programmation Web
![Page 51: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/51.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesA és aux ases à o her he kedretourne true si la ase est o héefun tion showStatus(f) {window.alert("the ha kbox is " +(f.elements[" hkBox"℄. he ked? " he ked." : "not he ked."));}...<form><input type=" he kbox" name=" hkBox"/><input type="button" value="show status"on li k="showStatus(this.form);" /></form> Sébastien Verel Programmation Web
![Page 52: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/52.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesA és à des boutons radiovalue et he keddésignation du groupe : tableaux des boutonsa és à la valeur et à sa validationfun tion showStatus(f) {var s = "";for(var i = 0; i < f.elements["radioButton"℄.length; i++) {var btn = f.elements["radioButton"℄[i℄;s += btn.value + " : " + btn. he ked + "\n";}window.alert(s);} Sébastien Verel Programmation Web
![Page 53: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/53.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesA és à des listes de séle tionsele tIndex-1 : si au une séle tion indi e de l'élément séle tionnéoptionstableau des éléments de la listepropriété sele ted : true si séle tionnéfun tion showStatus(f) {var index = f.elements["sele tList"℄.sele tIndex;if (index == -1)window.alert("quedal");else {var element = f.elements["sele List"℄.options[index℄;window.alert("Element #" + index + " ( aption: " +element.text + ", value: " + element.value + ") sele ted");}} Sébastien Verel Programmation Web
![Page 54: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/54.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesA és à une liste à hoix multiplesele tIndex-1 : si au une séle tion indi e : premier élément séle tion (inutile)optionstableau des éléments de la listepropriété sele ted : true si séle tionné
Sébastien Verel Programmation Web
![Page 55: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/55.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesA és à une liste à hoix multiplefun tion showStatus(f) {var index = f.elements["sele tListM"℄.sele tIndex;if (index == -1)window.alert("quedal");else {var list = f.elements["sele ListM"℄;for(var i = 0; i < list.options.length; i++) {var option = list.options[i℄;window.alert("Element #" + i + " ( aption: " +option.text + ", value: " + option.value + ") " +(option.sele ted ? "sele ted." : "not sele ted.") + "\n" );}}} Sébastien Verel Programmation Web
![Page 56: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/56.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesComplémentsDésa tivation des éléments de formulaireenvoie d'un formulaireempê her l'envoif.elements["password"℄.disabled = true;do ument.forms[0℄.submit();<a href="javas ript:do ument.forms[0℄.submit();"> submit form</a><form onsubmit="return false;"><form onsubmit="return he kform(this);">Sébastien Verel Programmation Web
![Page 57: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/57.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesComplémentsDonner le fo us à un hampSéle tion de texte dans un hampf.elements["password"℄.fo us();field.setSele tRange(0, field.value.length);var range : field. reatTextRange();range.moveStart(" hara ter", .0);range.moveEnd(" hara ter", field.value.length - 1);range.sele t(); Sébastien Verel Programmation Web
![Page 58: JavaScript, DOM, etc. Programmation Web - Licence 3 informatiqueverel/TEACHING/08-09/progWeb... · 2013-09-10 · javascript 6 Savoir déplacer des éléments avec javascript 7 Savoir](https://reader030.fdocuments.fr/reader030/viewer/2022040923/5e9dcd2f5adeb659f00b0fd5/html5/thumbnails/58.jpg)
Rappels et omplémentsDOMJavas ript et CSSFormulairesObje tifs de la séan e 61 Connaitre le prin ipe du DOM2 Savoir naviguer dans le DOM3 Savoir modi�er le DOM4 Savoir modi�er un style d'un élément du DOM5 Savoir élaborer un menu ave javas ript6 Savoir dépla er des éléments ave javas ript7 Savoir utiliser les formulaires ave javasript8 Savoir véri�er un formulaireQuestion prin ipale du jour :Quels sont les possibilités de javas ript en manipulation dedo uemnt ? Sébastien Verel Programmation Web