Programování v jazyce JavaScript

Rozměr: px

Začít zobrazení ze stránky:

Download "Programování v jazyce JavaScript"

Dagmar Říhová
před 7 lety
Počet zobrazení:

Štěpán, 2011 Skriptování dokumentu - DOM 2 BI-JSC Evropský sociální fond

1 Programování v jazyce JavaScript Katedra softwarového inženýrství Fakulta informačních technologií České vysoké učení technické v Praze Pavel Štěpán, 2011 Skriptování dokumentu - DOM 2 BI-JSC Evropský sociální fond Praha & EU: Investujeme do vaší budoucnosti P. Štěpán PHP BI-PHP, výpis 12 1/6

2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> h1 { color:red; text-decoration: underline; p { color: blue;.zluty { color: yellow; #tretiodstavec { color: red; #seconddiv { background-color: green; width:200px; height:20px; </style> </head> <body> <h1>dalsi moznosti modelu DOM (DOM Level 2,3)</h1> <div id="ukazkadiv" style="color:green">ja jsem ukazkovy div</div> <p>prvni odstavec</p> <p class="zluty">druhy odstavec</p> <p id="tretiodstavec">treti odstavec</p> <p class="zluty">ctvrty odstavec</p><br><br> <div id="mydiv">toto je muj div</div> <div id="seconddiv" style="background-color:yellow; border:3px solid blue"> A tohle je druhy div</div> <script type="text/javascript"> // DOM urovne 2,3 ma vice modulu // Rozsireni o namespaces: html element XHTML stranky muze mit // (explicitni nebo implicitni) namespace: // <html xmlns=" // Vhodne hlavne, vkladame-li do stranky elementy // z jineho namespaces (napr. SVG) P. Štěpán PHP BI-PHP, výpis 12 2/6

3 // Proto byla provedena nektera rozsireni u typu Node: // vlastnosti: //.localname - jmeno uzlu bez prefixu //.namespaceuri- jmeno namespace daneho uzlu // (null, neni-li ns definovan) //.prefix - prefix jmena // metody (DOM 3) //.isdefaultnamespace(namespace) //.lookupnamespaceuri(prefix) //.lookupprefix(namespace) // Rozsireni pro document: //.createelementns(namespace,nazevtagu] //.createattibutens //.getelementbytagnamens // Rozsireni pro element: //.getattributens //.getattibutenodens //.getelementsbytagnamens //.hasattributens //.removeattributens //.setattributens //.setattributenodens // (+ dalsi drobne zmeny v DOM 2,3) // Prace se styly: /* Podporuje browser praci s CSS na urovni DOM level 2? (Nemusi chodit!) alert(document.implementation.hasfeature("css","2.0")); podporuje CSS2? alert(document.implementation.hasfeature("css2","2.0")); Element HTML (podporujici CSS) maji vlastnost style (instance CSSStyleDeclaration). Vlastnost style NEobsahuje zadne odvozene (kaskadovane) vlastnosti z pouzitych sablon stylu - POUZE hodnoty z atributu style daneho prvku. Nazvy vlastnosti CSS se reprezentuji jako nazvy vlastnosti objektu style: color --> style.color Nelze pouzivat pomlcky ("minus") - proto camel style: font-family --> style.fontfamily Nelze pouzit float (klicove slovo) - proto cssfloat (IE - stylefloat) */ P. Štěpán PHP BI-PHP, výpis 12 3/6

4 // Styly mozno menit JavaScriptem - efekty: alert("zmenim div!"); var mydiv = document.getelementbyid("mydiv"); // zmena barvy: mydiv.style.backgroundcolor = "cyan"; // zmena rozmeru mydiv.style.width = "130px"; // jednotky vyzadovany ve std. rezimu! mydiv.style.height = "20px"; // nastaveni ohraniceni mydiv.style.border = "2px solid red"; // Styly lze i cist (ovsem jen z atributu style - ne kaskadovane) // vlastnosti a metody objektu style (nektere) //.csstext - vlastni CSS jako string (lze i prirazovat) // alert(mydiv.style.csstext); //.length - pocet vlastnosti // alert(mydiv.style.length); // vrati objekt typu CSSValue s hodnotou dane vlastnosti: //.getpropertycssvalue(nazevvlastnosti) //.getpropertyvalue(nazevvlastnosti) - vrati řetězec // nazev CSS, ne JavaScript! // alert(mydiv.style.getpropertyvalue("background-color")); // pristup k vlastnostem:.item(index) nebo "pole:" style[index] // alert(mydiv.style.item(0)); // alert(mydiv.style[0]); // totez //.removeproperty //.setproperty // vypis vlastnosti stylu var str=""; for(var i = 0; i < mydiv.style.length; i++){ var name = mydiv.style[i]; str += name + " : " + mydiv.style.getpropertyvalue(name) + "\n"; // alert(str); P. Štěpán PHP BI-PHP, výpis 12 4/6

5 // Odvozene (kaskadovane) styly - lze pouze cist var mydiv2 = document.getelementbyid("seconddiv"); // ziskani kaskadovaneho stylu (null - zadny pseudoelement // jako ":after") var computedstyle = document.defaultview.getcomputedstyle(mydiv2, null); // alert(computedstyle.backgroundcolor); // yellow // alert(computedstyle.width); // IE - nema getcomputedstyle, ale currentstyle // Stylesheets (sablony stylu) - jak <link...> tak <style...> // typ CSSStyleSheet // nektere vlastnosti a metody: //.disabled (mozno i nastavit) //.href - adresa pro sablonu link (jinak null) //.media - kolekce podporovanych medii //.ownernode - pointer na uzel link nebo style pro tuto sablonu //.parentstylesheet - odkaz na sablonu, do ktere je tato zaclenena // //.cssrules - kolekce pravidel v sablone //.deleterule(index) - (IE - removerule) //.insertrule(pravidlo,index) - (IE - addrule) // ma podporu DOM 2.0 pro StyleSheets? // alert(document.implementation.hasfeature("stylesheets","2.0")); // vsechny sablony - kolekce document.stylesheets // vypis vsech sablon stylu var mysheet = document.stylesheets[0]; // kazda sablona - kolekce pravidel cssrules var itsrules = mysheet.cssrules; str = ""; for (var i = 0; i < itsrules.length; i++){ // kazde rule ma vlastnosti jako csstext, selectortext,... str += itsrules[i].csstext + "\n"; // alert(str); // proprietarni metody a vlastnosti pro zjisteni rozmeru elementu: // element.offsetheight,.offsetleft,... - readonly // je-li element vnoren do dalsiho, je treba pouzit odsazeni rodice // offset parent atd. // Zobrazovaci plocha // document.documentelement.clientheight,.clientwidth - rozmery // zocrazovaci plochy // IE 6 a starsi - document.body.clientheight P. Štěpán PHP BI-PHP, výpis 12 5/6

6 // jsou-li scrollbars, je mozno pouzit (ruzne hodnoty v ruznych // browserech): scrollheight, scrolltop, scrollwidth, scrollleft // nektere novejsi browsery maji pro elementy metodu //.getboundingclientrect // vraci objekt s vlastnostmi left top right a bottom // - umisteni na strance vzhledem k zobrazovacímu poli // Prochazeni stroktury DOM - NodeIterator a TreeWalker (ne IE) // test existence: // alert(document.implementation.hasfeature("traversal","2.0")); // spolehlivejsi: // alert(typeof document.createnodeiterator == "function"); // alert(typeof document.createtreewalker == "function"); // prochazeni podstromu daneho uzlu (ne nahoru ke korenu) // lze i filtrovat, zadame-li filter var filter = function(node){ return node.tagname.tolowercase() == "div"? NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP; // varianta s filtrovanim // var iterator = // document.createnodeiterator(document.documentelement, // NodeFilter.SHOW_ELEMENT,filter,false); // varianta bez filtrovani var iterator = document.createnodeiterator(document.documentelement, NodeFilter.SHOW_ALL,null,false); // vlastni prochazeni: str = ""; var node = iterator.nextnode(); while (node!= null){ str += node.tagname + "\n"; node = iterator.nextnode(); // alert(str); // TreeWalker - pokrocilejsi: ma.parentnode(),.firstchild, //.lastchild,.nextsibling,.previoussibling,... </script> </body> </html> P. Štěpán PHP BI-PHP, výpis 12 6/6

Podobné dokumenty

Programování v jazyce JavaScript

Programování v jazyce JavaScript Katedra softwarového inženýrství Fakulta informačních technologií České vysoké učení technické v Praze Pavel Štěpán, 2011 Skriptování dokumentu BI-JSC Evropský sociální