Programování v jazyce JavaScript

Rozměr: px

Začít zobrazení ze stránky:

Download "Programování v jazyce JavaScript"

Alena Bartošová
před 7 lety
Počet zobrazení:

Pavel Štěpán, 2011 Skriptování dokumentu 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 BI-JSC Evropský sociální fond Praha & EU: Investujeme do vaší budoucnosti P. Štěpán PHP BI-PHP, výpis 11 1/5

2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>muj krasny titulek</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <h1>programovani dokumentu - DOM 1</h1> <p id="prvni">prvni odstavec</p> <div id="mujdiv">text v DIVu</div> <p name="druhy">druhy odstavec</p> <div id="rbsdiv"> <input type="radio" name="cisla" id="rbprvni" value="1"> Prvni<br> <input type="radio" name="cisla" id="rbdruhy" value="2"> Druhy<br> <input type="radio" name="cisla" id="rbtreti" value="3"> Treti<br> </div> <script type="text/javascript"> // Nactena stranka reprezentovana objektovym (hierarchickym) // modelem DOM // vrchol hierarchie je object document // elementu html odpovida tzv. documentelement // prvky DOMu jsou tzv. Node. Nodes je vice typu // (vlastnost.nodetype): // Node.ELEMENT_NODE (1) // IE neumi Node.ELEMENT_NODE apod. // - nutne pouzivat cisla // Node.ATTRIBUTE_NODE (2) // Node.TEXT_NODE (3) // atd (celkem 12) // zakladni vlastnosti uzlu: nodename a nodevalue // pro uzel typu element je to jmeno tagu a null // Vztahy mezi uzly: var html = document.documentelement; // pointer na <html> // dalsi preddefinovane odkazy: document.body // document.doctype (mel by odkazovat na <!DOCTYPE...> // - ruzne browsery neumeji) // nektere vlastnosti uzlu dokument: // alert(document.title); // lze i priradit // alert(document.url); // cela adresa stranky (z adresoveho radku) // document.domain // domena z adresy // document.referer // odkud byla stranka volana // Komentare mimo element html - nektere prohlizece vytvareji uzly pro // komentare pred html, jine ne. Komentare za html vetsina ignoruje // Potomci uzlu - childnodes - tvori typ NodeList // Pristup k prvkum: uzel.childnodes.item(2) nebo // jako k prvkum pole uzel.childnodes[2] (castejsi) // childnodes NENI pole - vzdy odrazi aktualni stav dokumentu!! P. Štěpán PHP BI-PHP, výpis 11 2/5

3 // alert(html.childnodes[0].nodename + "; " + html.childnodes[0].nodevalue); // podobne.firstchild,.lastchild: // potomekbody = text - whitespace!! (IE je ignoruje!!) var potomekbody = document.body.firstchild; // alert(potomekbody.nodename + "; " + potomekbody.nodevalue + // "; " + potomekbody.nodetype); var h1 = potomekbody.nextsibling; // sourozenec; není - vrati null // podobne previoussibling // alert(h1.nodename + "; " + h1.nodevalue); // text v elementu je jeho potomkem!! // alert("pocet potomku:" + document.body.childnodes.length); // alert("h1 ma potomky: " + h1.haschildnodes()); // alert(h1.firstchild.nodename + "; " + h1.firstchild.nodevalue + // "; " + h1.firstchild.nodetype); // h1.ownerdocument // odkaz na dokument // Vyhledavani elementu: // podle ID: // pozor na velka/mala (nerozlisuji starsi IE) var div = document.getelementbyid("mujdiv"); // alert(div.nodename); // vyhledavani podle nazvu tagu: // (obvykle nezalezi na velikosti pismen nazvu) var paragraphs = document.getelementsbytagname("p"); // vrati HTMLCollection (opet ma.length, lze zpristupnovat prvky // zavorkovou notaci nebo pomoci metody item,... // alert("pocet paragrafu:" + paragraphs.length); // prvky lze zpristupnovat pres indexy nebo name // alert(paragraphs[1].firstchild.nodevalue); // alert(paragraphs["druhy"].firstchild.nodevalue); // vyhledani podle atributu name var radios = document.getelementsbyname("cisla"); // alert(radios[1].value); // 2 // preddefinovane kolekce (casto jen usnadneni) // documens.achors,.applets,.images,.links P. Štěpán PHP BI-PHP, výpis 11 3/5

4 // prace s atributy: // alert(div.getattribute("id")); // standardni atributy jsou pristupne tezjako vlastnosti!! // alert(div.id); // pozor: není class, ale classname!! // kolekce atributu elementu (NamedNodeMap) - vlastnost attributes var attribs = div.attributes; var attrid = attribs.getnameditem("id"); // alert(attrid.nodevalue); // dalsi mozne pristupy k prvkum (totez) // alert(attribs["id"].nodevalue); // alert(attribs[0].nodevalue); // vytvareni elementu var div2 = document.createelement("div"); // pridani elementu do documentu (NUTNE!!) // document.body.appendchild(div2); // pripoji na konec potomku // lze pridat i existujici uzel; Ten je odpojen z puvodni pozice // a umisten na novou pozici // vlozeni textu do elementu: // vytvoreni textoveho uzlu: var txt = document.createtextnode("pridany DIV"); // alert("pokracovat"); // vlozeni do elementu: div2.appendchild(txt); // lze vlozit vice textu; metoda normalize elementu je spoji; // pomoci splittext naopak rozdeli textovy uzel na dane pozici na dva // vytvoreni atributu div2.setattribute("id", "druhydiv"); // zmena hodnoty existujiciho atributu div2.id = "seconddiv"; // vytvoreni kopie elementu var cpy = div2.clonenode(true); // true - deep copy // vlozeni elementu PRED zvoleny prvek var rbsdiv = document.getelementbyid("rbsdiv"); // vlozit PRED potomka c. 4 // document.body.insertbefore(cpy, rbsdiv.childnodes[4]); // nahrazeni uzlu var ret = div.replacechild(div2,div.firstchild); // lze vytvaret i komentare a dalsi prvky P. Štěpán PHP BI-PHP, výpis 11 4/5

5 // zruseni atributu (u IE 6 a starsich nechodi) div2.removeattribute("id"); // odstraneni uzlu var removed = div.removechild(div.firstchild); // casto se vyskytujici rozsireni (ne ve vsech prohlizecich) // posune tak, aby byl dany element viditelny // div2.scrollintoview(); // vlastnost innertext elementu (ne u vsech browseru) - cely obsah var prvni = document.getelementbyid("prvni"); // alert("zmenim 1. odstavec"); prvni.innertext = "First paragraph"; // outertext - obsah vcetne obklopujiciho elementu // innerhtml a outerhtml - dovoluje i HTML elementy // kolekce children - HTMLCollection, ktera obsahuje jen elementy // - ne whitespaces apod. // var deti = document.body.children; // opet ne u vsech browseru // alert(deti[0].nodename); // pro tabulky existuje mnoho metod a vlastnosti pro snazsi praci: // (lze samozrejme zpracovavat bezne v ramci DOM) // caption, thead, tfoot, tbodies, rows (vsechny radky tabulky), // createthead, deletethead, insertrow(pozice), deleterow(pozice),... // element tr ma kolekci cells a metody insertcell(pozice) a // deletecell(pozice) // Zapis do dokumentu. Pri vytvareni dokumentu zapise na dane místo // (kde je write nebo writeln). // U hotoveho dokumentu (treba uvnitr eventu) prepise cely dokument!! // Pozor, obsahuje-li retezec konec tagu script - chapal by se jako // konec vnejsiho scriptu. Proto napr. takto: "</scr" + "ipt>" // Nefunguje u XHTML document.writeln("<br><b>zobrazeno v " + (new Date()).toString() + "</b>"); </script> </body> </html> P. Štěpán PHP BI-PHP, výpis 11 5/5

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 Dědičnost objektů BI-JSC Evropský sociální fond