Programování v jazyce JavaScript

Podobné dokumenty
Programování v jazyce JavaScript

Programování v jazyce JavaScript

Programování v jazyce JavaScript

Programování v jazyce JavaScript

Programování v jazyce JavaScript

Programování v jazyce JavaScript

Programování v jazyce JavaScript

Programování v jazyce JavaScript

Programování v PHP. Katedra softwarového inženýrství Fakulta informačních technologií České vysoké učení technické v Praze. Další možnosti formulářů

(X)HTML, CSS a jquery

Ajax - úvod. Klíčové pojmy: Ajax, skriptování na straně klienta a serveru, objekt XMLHttpRequest, DOM model.

Parsování HTML. Pro účely testování jsem vytvořil stránku parsovani.html. Zdrojový kód:

NSWI096 - INTERNET JavaScript

HTML - Úvod. Zpracoval: Petr Lasák

Název Live prez Sear enta Maps

Rozhraní pro práci s XML dokumenty. Roman Malo

Tvorba WWW stránek. Mojmír Volf

Základy HTML, URL, HTTP, druhy skriptování, formuláře

(X)HTML-TAGY. VOŠ a SŠT Česká Třebová

Formuláře. Internetové publikování. Formuláře - příklad

Tvorba webu. Úvod a základní principy. Martin Urza

Mgr. Vlastislav Kučera lekce č. 2

Mgr. Vlastislav Kučera přednáška č. 2

NSWI096 - INTERNET. Úvod do HTML

WWW a HTML. Základní pojmy. Ivo Peterka

Jazyk C# a platforma.net

Úvod do aplikací internetu a přehled možností při tvorbě webu

Programování v jazyce JavaScript

Jazyk C# - přístup k datům

Mgr. Stěpan Stěpanov, 2013

Mgr. Vlastislav Kučera Struktura stránky, hlavička,

KAPITOLA 6. XML, XPath a XSLT. Podpora XML v prohlížečích. XML DOM v IE

Úvod do tvorby internetových aplikací

Uspořádání klient-server. Standardy pro Web

PŘEHLED A MOŽNOSTI VYUŽITÍ WEBOVÝCH MAPOVÝCH SLUŽEB

Inovace výuky prostřednictvím šablon pro SŠ

!!Via!AUREA,!s.r.o.!

HTML stránka vložení obrázku

Koláčky, sezení. Martin Klíma

TNPW1 Cvičení aneta.bartuskova@uhk.cz

Tvorba webových stránek

HTML stránka odkaz, zvýraznění textu

Základy (X)HTML. WWW stránka WWW stránka dokument (soubor) s informacemi a pokyny pro jejich zobrazení

Úvod do jazyka HTML (Hypertext Markup Language)

Základy HTML (2. přednáška)

Kolekce, cyklus foreach

Obsah přednášky 7. Základy programování (IZAPR) Přednáška 7. Parametry metod. Parametry, argumenty. Parametry metod.

13. Vytváření webových stránek

Jazyk C# - přístup k datům

Vývoj Internetových Aplikací

Tvorba stránek v HTML ve Wordu

Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování

Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka

Formuláře. Internetové publikování

GIS integrované využití 6 sem podtitul nebo stručně obsah. OpenLayers

VÝVOJ INTERNETOVÝCH APLIKACÍ - VIA

Obsah. Stručná historie World Wide Webu 7

Formuláře. Aby nám mohli uživatelé něco hezného napsat třeba co si o nás myslí!

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák

Michal Krátký. Úvod do programovacích jazyků (Java), 2006/2007

Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN

DUM 14 téma: Interakce s uživatelem

HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy

CSS Stylování stránek. Zpracoval: Petr Lasák

TNPW1 Cvičení aneta.bartuskova@uhk.cz

Jak vytva r et webove stra nky pomocı XHTML a CSS.

Vývoj Internetových Aplikací

JavaScript v jazyku HTML

Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku:

Internet WEB stránky HTML, Hypertext MarkUp Language - nadtextový jazyk - Místo příkazů obsahuje tagy - značky

Kaskádové styly. CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

2) Napište algoritmus pro vložení položky na konec dvousměrného seznamu. 3) Napište algoritmus pro vyhledání položky v binárním stromu.

Obsah přednášky. 12. Dokumentace zdrojového kódu Tvorba elektronické dokumentace UML. Co je diagram tříd. Ing. Ondřej Guth

XSLT pomocí JavaScriptu v Mozille (... Opeře a Safari)

HTML Hypertext Markup Language

JavaScript v praxi: Sokoban (5. přednáška)

Ing. Přemysl Brada, MSc., Ph.D. Ing. Martin Dostal. Katedra informatiky a výpočetní techniky, FAV, ZČU v Plzni

(X)HTML. Internetové publikování

12. Základy HTML a formuláře v HTML

Printris. Hra Printris je psána pomocí příkazů Javascriptu a standardních příkazů HTML.

24. XML. Aby se dokument XML vůbec zobrazil musí být well-formed (správně strukturovaný). To znamená, že splňuje formální požadavky specifikace XML.

4. POČÍTAČOVÉ CVIČENÍ

25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY

VYHLEDÁVACÍ BANNER PRO WEBOVÉ STRÁNKY

Webová stránka. Matěj Klenka

Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

<!DOCTYPE html> <html lang="cs"> <head> <meta charset="utf-8" /> <title>název stránky v titulkovém pruhu prohlížeče</title> </head>

Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

Vývoj Internetových Aplikací

Obsah přednášky. XML DOM SAX XPath XSL transformace 1/46

Maturitní projekt do IVT Pavel Doleček

JavaScript 101. "Trocha života do statických stránek"

Internet 2 css, skriptování, dynamické prvky

HTML - pokračování. Co už víme?

XHTML 1. Značkovací jazyky (mark-up): Součastí prostředků je systém m značek

Oracle XML DB. Tomáš Nykodým

Tvorba webových stránek

Inovace a zkvalitnění výuky prostřednictvím ICT Tvorba webových stránek. Ing. Zelinka Pavel Číslo: VY_32_INOVACE_35 17 Anotace:

Část 1 Moderní JavaScript

Programování v C++ 1, 5. cvičení

Transkript:

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

<!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

// 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

// 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

// 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