Embed Size (px)
Citation preview
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
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
Rappels et omplémentsDOMJavas ript et CSSFormulairesPlan1 Rappels et ompléments2 DOM3 Javas ript et CSS4 FormulairesSébastien Verel Programmation Web
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
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
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
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
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
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
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
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
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
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
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
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
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
Rappels et omplémentsDOMJavas ript et CSSFormulairesObjets javas ript : historyba k()forward()go(n)
Sébastien Verel Programmation Web
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
