DOM i JavaScript DOM W3C

Transkrypt

1 DOM W3C DOM (ang. Document Object Model, obiektowy model dokumentu) to API dla dokumentów HTML i XML. Wprowadza strukturalne odwzorowanie dokumentu, pozwalając modyfikować jego zawartość i warstwę prezentacji podstawowy (ang. core) - ogólny sposób reprezentowania dokumentów XML; przedstawia dokument jako drzewo zawierające węzły (ang. node). Każdy węzeł może być elementem, fragmentem tekstu, komentarzem, instrukcją preprocesora (np. dołączonym fragmentem PHP) albo encją. DOM HTML (typowy dla przeglądarek) - to zestaw metod ułatwiających tworzenie dynamicznych stron oraz zapewniających kompatybilność wstecz z wcześniejszym prostym DOM Netscape. DOM HTML przedstawia dokument jako kilka kolekcji obiektów określonych typów (np. formularze, obrazki) oraz dodaje pola/metody ułatwiające dostęp do funkcjonalności specyficznej dla HTML, jak np. odczyt pól formularza. 14 kwietnia 2015 Strona 1

2 Węzeł główny to. Wszystkie inne węzły w dokumencie są zawarte w. Węzeł ma dwoje dzieci, węzły i. itd Tekst jest zawsze przechowywany w węźle tekstowym <title>dom Tutorial</title> węzeł <title> zawiera węzeł tekstowy o wartości DOM Tutorial DOM Tutorial nie jest wartością węzła <title> API DOM definiuje standardowe właściwości i metody. Właściwości określają coś (np. nazwa węzła). Metody określają co się dzieje (np. usunąć węzeł) Obiekty DOM directories - obiekt, udostępnia pasek z adresami history - obiekt, udostępnia historię oglądanych stron WWW location - obiekt, udostępnia adres aktualnej strony locationbar - obiekt, udostępnia pasek z adresem strony menubar - obiekt, udostępnia pasek z menu personalbar - obiekt, udostępnia pasek osobisty scrollbars - obiekt, udostępnia paski przewijania statusbar - obiekt, udostępnia pasek statusu toolbar - obiekt, udostępnia pasek narzędziowy window - obiekt, udostępnia zawartość okna przeglądarki document - główny element dokumentu reprezentuje całą stronę HTML/XHTML Przykładowe właściwości: x.innerhtml - the text value of x x.nodename - the name of x x.nodevalue - the value of x x.parentnode - the parent node of x x.childnodes - the child nodes of x x.attributes - the attributes nodes of x document.root korzeń dokumentu document.body ciało dokumentu Przykładowe metody (x węzeł element HTML): x.getelementbyid(id) - get the element with a specified id 14 kwietnia 2015 Strona 2

3 x.getelementsbytagname(name) - get all elements with a specified tag name x.appendchild(node) - insert a child node to x x.removechild(node) - remove a child node from x JavaScript JavaScript jest obiektowym językiem skryptowym. Jest językiem interpretowanym, nie kompilowanym. Jest wbudowany w język HTML. Umożliwia tworzenie aplikacji po stronie klienta lub serwera. JavaScript umożliwia interakcję z użytkownikiem, automatyczne tworzenie stron WWW. JavaScript umożliwia tworzenie aplikacji łączących technologie po stronie klienta i po stronie serwera. JavaScript nie jest Javą Skrypty JavaScript w kodzie strony HTML 1. Skrypt JavaScript wewnątrz elementu dokumentu HTML plik1.html 2. Skrypt JavaScript wewnątrz elementu dokumentu HTML plik2.html 3. Skrypt JavaScript w pliku zewnętrznym plik3.html i plik3.js plik1.html <meta charset="iso "> <title>javascript - skrypt 1</title> <h3> document.write("pierwszy skrypt w języku JavaScript"); </h3> document.write("<hr />"); document.write("<p>skrypt wewnątrz elementu body dokumentu HTML</p>"); document.write("<hr/>"); 14 kwietnia 2015 Strona 3

4 plik2.html <title>javascript - skrypt 2</title>  <h3>pierwszy skrypt w języku JavaScript</h3> plik3.html <title>javascript - skrypt 3</title> <script src="plik3.js" > <h3>pierwszy skrypt w języku JavaScript</h3> plik3.js // JavaScript Document document.write("<hr />"); document.write("<p>skrypt wewnątrz dodatkowego pliku.</p>"); document.write("<hr/>"); Funkcje komunikatorów 1. Sprawdzamy funkcjonalność funkcji alert(), confirm() i prompt() skrypt plik4.html 2. Modyfikujemy zawartość pliku z punktu poprzedniego dodając funkcjonalność wydruku odpowiedzi otrzymanych z funkcji confirm() i prompt() wymagany kod do modyfikacji w skrypcie plik4a.html 14 kwietnia 2015 Strona 4

5 plik4.html <title>javascript - skrypt 2</title>  plik4a.html  Obsługa zdarzeń Zdarzenia w JavaScript jest to ogólny mechanizm pozwalający na uruchomienie dowolnego fragmentu skryptu JavaScript w momencie gdy wystąpi określone zdarzenie, np. przycisk zostanie kliknięty. Standard HTML 4.01/XHTML 1.0 opisuje 18 różnych zdarzeń. Standard DOM dokłada do tego jeszcze kilka kolejnych. Aby obsłużyć dowolne zdarzenie, należy przypisać mu funkcję obsługi zdarzenia. Zdarzenia myszy onclick - pojedyncze kliknięcie (naciśnięcie i zwolnienie klawisza myszki); ondblclick - podwójne kliknięcie; onmousedown - wciśnięcie klawisza myszki; onmouseup - zwolnienie klawisza myszki; 14 kwietnia 2015 Strona 5

6 onmouseover - kursor myszki znalazł się w obszarze obiektu; onmousemove - kursor myszki został przesunięty; onmouseout - kursor myszki opuścił obszar obiektu. Zdarzenia klawiatury onkeypress - klawisz alfanumeryczny został wciśnięty; onkeydown - klawisz został naciśnięty; onkeyup - klawisz został zwolniony. Zdarzenia formularza onsubmit - formularz będzie wysłany. onreset - zawartość formularza jest czyszczona. Zdarzenia kontrolek formularza onfocus - kontrolka otrzymała fokus (dane z klawiatury będą trafiać właśnie do niej); onblur - kontrolka straciła fokus; onselect - kontrolka została wybrana (wybranie kontrolki nie zawsze wiąże się z przekazaniem jej fokusu); onchange - zawartość kontrolki się zmieniła.. Zdarzenia dokumentu onload - strona została załadowana; onunload - strona jest zamykana; 1. Obsługa zdarzenia onclick() wywołanego przez myszkę skrypt plik5a.html 2. Obsługa zdarzenia onmouseover() i onmouseout() skrypt plik5b.html 3. Obsługa zdarzenia onload() skrypt plik5c.html plik5a.html <title>javascript - skrypt 3</title> function inform(){ alert("informacja pojawia się po wcinięciu klawisza.") <h3>obsługa zdarzenia onclik</h3> 14 kwietnia 2015 Strona 6

7 <form> <input type="button" name="test" value="naciśnij" onclick="inform()"> </form> plik5b.html <title>przyklad 3</title> <p> Obsługa zdarzeń przy ruchu kursorem myszy </p> <br /> <a href="lab3_5b.html" onmouseover="alert('test 1 ')" >Kursor na linii ==1== </a> <br /> <a href="lab3_5b.html" onmouseover="alert('test 2 ')" >Kursor na linii ==2== </a> plik5c.html <title>javascript - skrypt 3</title> function finish(){ alert('strona została załadowana!'); <body > <h3>obsługa zdarzenia onload</h3> Dodajemy do elementu atrybut - onload="finish();" i sprawdzamy ponownie działanie skryptu. Obsługa formularzy 1. Odczyt danych wprowadzanych do pól formularza - skrypt plik6a.html plik6a.html <title>javascript formularz</title> 14 kwietnia 2015 Strona 7

8 <h3>formularze w JS</h3> <form name="form1"> <input type="text" size="10" value="zajecia z JS" name="pole1"> <input type="button" value="sprawdź" onclick="alert(document.form1.pole1.value)"> </form> 2. Funkcja eval() prosty skrypt obliczeniowy modyfikacja skryptu plik6a.html. W części nagłówkowej dodajemy funkcję calc() realizującą funkcję eval(), natomiast w części body dodajemy nowy formularz form3 po istniejącym formularzu form1. - skrypt plik6a.html function cal() { document.form3.wynik.value=eval(document.form3.calculator.value); <form name="form3"> <input type="text" size="20" name="calculator"> <input type="button" name="c1" value="wylicz" onclick="cal()"> <input type="reset" name="c2" value="skasuj"> <br/> Wynik:<input type="text" size="20" name="wynik"> </form> 3. Odczyt wartości wybranych poleceniem <select> w ramach formularza skrypt plik6b.html plik6b.html <title>javascript walidacja formularza</title> function status(){ var indeks = document.grupa.test.options.selectedindex; var text0 = document.grupa.test.options.length; var text1 = document.grupa.test.options[0].value; var text2 = document.grupa.test.options[0].text; var text3 = document.grupa.test.options[indeks].value; var text4 = document.grupa.test.options[indeks].text; var text = "Liczba pozycji: "+text0+"\n"; text += "Klucz pozycji pierwszej: "+text1+"\n"; text += "Opis pozycji pierwszej: "+text2+"\n"; text += "Indeks pozycji wybranej: "+indeks+"\n"; text += "Klucz pozycji wybranej: "+text3+"\n"; text += "Opis pozycji wybranej: "+text4+"\n"; alert ( text ); <form name="grupa"> 14 kwietnia 2015 Strona 8

9 <p> <select name="test" size="1"> <option value="1">abacki</option> <option value="2">babacki</option> <option value="3">cabacki</option> <option value="4">dadacki</option> </select> </p> <input type="button" name="b1" value="opis wybranej pozycji" onclick="status(); " /><br/> </form> 4. Prosta aplikacja z wyborem uczestnika kursu skrypt plik6c.html plik6c.html <title>javascript walidacja formularza</title> var student=new Array() student[0]="" student[1]=["abacki A.Abacki", "Babacki W.Babacki", "Dadacki Z.Dadacki", "Kowalski M.Kowalski", "Zazacki A.Zazacki"] student[2]=["cabacki N.Cabacki", "Kowalski H.Kowalski", "Mamacki M.Mamacki", "Opalski Z.Opalski"] student[3]=["tatarski L.Tatarski", "Zawadzki E.Zawadzki", "Bracki B.Bracki", "Nanacki L.Nanacki", "Opacki S.Opacki"] function updategrupa(selectedstudentgrupa){ var grupalist=document.form1.grupa; var studentlist=document.form1.student; studentlist.options.length=0 if (selectedstudentgrupa>0){ for (i=0; i<student[selectedstudentgrupa].length; i++) studentlist.options[studentlist.options.length]=new Option(student[selectedStudentGrupa][i].split(" ")[0], student[selectedstudentgrupa][i].split(" ")[1]) <form name="form1"> <select name="grupa" size="4" onchange="updategrupa(this.selectedindex)" style="width: 150px"> <option selected>wybierz grupę</option> <option value="1">grupa 1</option> 14 kwietnia 2015 Strona 9

10 <option value="2">grupa 2</option> <option value="3">grupa 3</option> </select> <select name="student" size="4" style="width: 150px" onclick="alert(this.options[this.options.selectedindex].value)"> </select> </form> 5. Walidacja wprowadzanych danych do formularza wykorzystamy onblur skrypt plik6d.html plik6d.html <title>javascript walidacja formularza</title> function check(){ var string1=document.form1. .value; if alert("proszę podać poprawny adres !"); document.form1. .focus(); <form name="form1"> <p>adres </p> <input type="text" size="20" name=" " onblur=" check()" /> <p>tekst informacji:</p> <textarea name="s1" rows="2" cols="20"></textarea> <input type="submit" name="b1" value="wyślij" /> </form> 6. Walidacja wprowadzanych danych do formularza onsubmit skrypt plik6e.html plik6e.html <title>javascript walidacja formularza</title> 14 kwietnia 2015 Strona 10

11 function validate(){ if ((document.form1.pole1.value=="") (document.form1.pole2.value=="")){ alert ("Należy wypełnić wszystkie pola wymagane!"); return false; else return true; <form name="form1" onsubmit="return validate()"> <p>adres (*pole wymagane)</p> <input type="text" size="20" name="pole1" /><br/> <p>informacja zwrotna: (*pole wymagane)</p> <textarea name="pole2" rows="3" cols="25"></textarea><br/> <p>adres domowy: (pole nie wymagane)</p> <input type="text" size="35" name="pole3" /><br/> <input type="submit" name="b1" value="submit" /> </form> Tworzenie nowej treści na stronie WWW - innerhtml 1. Zmiana zawartości elementu <div> z wykorzystaniem własności innerhtml skrypt plik7.html plik7.html <title>javascript walidacja formularza</title> function update(index){ var tekst = "Przykładowy tekst w ramach bloku." ; var tabelka = "<table border='1'><tr><th>kol1</th><th>kol2</th></tr><tr><td>w11</td><td>w12</td></tr><tr><t d>w21</td><td>w22</td></tr></table>" ; var obrazek = "<img src=' alt='obrazek' />" ; var link = "<a href=' >Kurs JavaScript</a>"; switch (index) { case 0: document.getelementbyid("test").innerhtml = tekst; break; case 1: document.getelementbyid("test").innerhtml = tabelka; break; case 2: document.getelementbyid("test").innerhtml = obrazek; 14 kwietnia 2015 Strona 11

12 break; case 3: document.getelementbyid("test").innerhtml = link; break; <form name="form1"> <select name="wybor" onchange="update(this.selectedindex)"> <option value="1">tekst</option> <option value="2">tabelka</option> <option value="3">obrazek</option> <option value="4">link</option> </select> </form> <div id="test">to jest miejsce do wprowadzania nowej zawartoci.</div> Modyfikowanie zawartości strony (zmiana grafiki, styli) 1. Dynamiczna zmiana styli wyświetlających stronę WWW skrypt plik8a.html plik8a.html <!DOCTYPE HTML > <title>dynamiczne wartości CSS</title> <meta charset="iso "> <style type="text/css"> #box1{ position: absolute; top: 20px; left: 50px; width: 200px; border: solid #ff0000 3px; background-color: #ffff00; color: #000000; padding: 10px; </style> <script language="javascript"> function change(){ document.getelementbyid("box1").style.bordercolor = "#0000ff"; document.getelementbyid("box1").style.backgroundcolor = "#000000"; document.getelementbyid("box1").style.color = "#ffffff"; function change_back(){ document.getelementbyid("box1").style.bordercolor = "#ff0000"; document.getelementbyid("box1").style.backgroundcolor = "#ffff00"; document.getelementbyid("box1").style.color = "#000000"; 14 kwietnia 2015 Strona 12

13 <div style="border-color: rgb(255, 0, 0); background-color: rgb(255, 255, 0); color: rgb(0, 0, 0);" id="box1" onmouseover="change()" onmouseout="change_back()"> <p>zawartość wewnątrz bloku zmienia się za każdym razem po najechaniu myszką na obszar.</p> </div> 2. Zmiana elementów graficznych prze najechaniu na obszar rysunku kursorem myszki skrypt plik8b.html plik8b.html <title>zmiana elementów graficznych</title> <script language="javascript" > var logo_on = new Image() ; var logo_off = new Image() ; logo_on.src = 'logo_on.gif'; logo_off.src = 'logo_off.gif' ; function activate (image) { var imagesrc = eval(image + '_on.src') ; document[image].src = imagesrc ; function deactivate (image) { var imagesrc = eval(image + '_off.src') ; document[image].src = imagesrc ; <a href="plik8b.html" onmouseover="activate('logo'); return true" onmouseout ="deactivate('logo'); return true" > <img src="logo_off.gif" alt="[logo]" style="border:none" name="logo"></a> 3. Dynamiczne menu skrypt plik8c.html plik8c.html <title>rozwijane menu</title> <style type="text/css"> 14 kwietnia 2015 Strona 13

14 #master { width:500px; border:solid 2px skyblue; h1 { color: blue; font-size: 14pt; text-align:center td.text { color:blue; font-style:italic </style> <script language="javascript"> function pokaz (nid) { if ( document.getelementbyid('opis_' + nid).style.display == "none") { document.getelementbyid('opis_' + nid).style.display = ""; else { document.getelementbyid('opis_' + nid).style.display = "none"; <div id="master"> <h1>dynamiczne menu</h1> <table class="plan" > <tr> <td>1.</td> <td><a class="item" href="javascript:pokaz('01');">pierwsza pozycja menu</a></td> </tr> <tr style="display:none" id="opis_01"> <td /> <td class="text"> To jest tekst, który pojawia się po kliknięciu na pierwszą pozycję menu. </td> </tr> <tr> <td>2.</td> <td><a class="item" href="javascript:pokaz('02');">druga pozycja menu</a></td> </tr> <tr style="display:none" id="opis_02"> <td /> <td class="text"> To jest tekst, który pojawia się po kliknięciu na drugą pozycję menu. </td> </tr> <tr> <td>3.</td> <td><a class="item" href="javascript:pokaz('03');">trzecia pozycja menu</a></td> 14 kwietnia 2015 Strona 14

15 </tr> <tr style="display:none" id="opis_03"> <td /> <td class="text"> To jest tekst, który pojawia się po kliknięciu na trzecią pozycję menu. </td> </tr> </table> </div> Obsługa ciasteczek w języku JavaScript 1. Sprawdzimy ciasteczka umieszczone dla witryny wykonując skrypt. plik9a.html plik9a.html <title>lista zmiennych Cookie</title> <meta charset="iso "> <script language="javascript" > window.onload = showcookies ; function showcookies() { var outmsg = ''; if (document.cookie.length = 0 ) { outmsg = " Brak ciasteczek " ; else { outmsg += "<table><tr><th>nazwa ciasteczka</th><th>zawartosć ciasteczka</th></tr>" ; var thiscookie = document.cookie.split(";"); for ( var i=0; i<thiscookie.length; i++ ) { outmsg += "<tr><td>" + thiscookie[i].split("=")[0] + "</td>"; outmsg += "<td>" + thiscookie[i].split("=")[1] +"</td></tr></tr>"; outmsg += "</table>"; document.getelementbyid("cookiedata").innerhtml = outmsg ; <h3>lista ciasteczek</h3> <p id="cookiedata"> </p> 14 kwietnia 2015 Strona 15

16 2. W kolejnym skrypcie plik9b.html tworzymy nowe ciasteczko, które umożliwi wypełnienie pola po wczytaniu ponownym skryptu.. plik9b.html <title>zmiana elementów graficznych</title> <meta charset="iso "> window.onload = namefieldinit ; function namefieldinit() { var username = ''; if (document.cookie.length > 0 ) { var dimcookie = document.cookie.split(";") ; for ( var i=0; i<dimcookie.length; i++ ) { datacookie = dimcookie[i].split("=") ; // alert ( datacookie[0]+" => "+datacookie[1]) ; if ( "username" == datacookie[0] ) { username = datacookie[1] ; document.getelementbyid("namefield").value = username; document.getelementbyid("namefield").onblur = setcookie; function setcookie() { var expiredate = new Date(); expiredate.setmonth(expiredate.getmonth()+6); var username = document.getelementbyid("namefield").value; document.cookie = "username=" + username + ";expires=" + expiredate.togmtstring(); <form onsubmit="setcookie()" > <p>podaj swoje imię: <input type="text" id="namefield" /> </p> <input type="submit" /> </form> 3. Przechowywanie ustawiania styli na stronie www w ciasteczkach skrypt plik9c.html. 14 kwietnia 2015 Strona 16

17 plik9c.html <title>zmiana koloru tla</title> <meta charset="iso "> <style type="text/css"> body { background-color:white; </style> function get_cookie(name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexof(search) // if cookie exists if (offset!= -1) { offset += search.length // set index of beginning of value end = document.cookie.indexof(";", offset); // set index of end of cookie value // -- alert ( "[ offset = "+offset+", end = "+end+" ]" ); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) return returnvalue; function setcolor(what){ document.body.style.backgroundcolor=what document.cookie="bgcolor="+what function setcolor1(){ if (get_cookie("bgcolor")!= "") { var bgcolor = get_cookie("bgcolor"); document.body.style.backgroundcolor = bgcolor; <body onload="setcolor1();"> <form name="a1"> <p><select name="a2" size="1"> <option value="white">select background color </option> <option value="#f0f0f0">light gray</option> <option value="#80ffff">sky blue</option> <option value="#c6c6ff">purple</option> <option value="white">white</option> </select> <input type="button" value="go" onclick="setcolor(document.a1.a2.options[document.a1.a2.selectedindex].value)"></p> </form> 14 kwietnia 2015 Strona 17

18 HTML 5 element <canvas> Element <canvas> służy on do tworzenia grafiki rastrowej w oknie przeglądarki za pomocą języka JavaScript. Możesz go wykorzystać między innymi do: rysowania wykresów, tworzenia galerii zdjęć, tworzenia animacji. Jeżeli nie są oddane parametry width, oraz high przyjmują one wartości defaultowe odpowiednio 300 pixeli szerokość i 150 pixeli wysokość. Element <canvas> jest początkowo pusty żeby w nim coś wyświetlić skrypt musi mieć dostęp do jego kontekstu (czyli API). (canvas_test.html) wypełniony prostokąt (czarny), którego lewy górny róg będzie w punkcie (50,30) 50 to odległość od lewej krawędzi, 30 od górnej. Szerokość wynosi 100 a wysokość 130. plik10a.html kwadraty z rożną transparentnością plik10a.html <title>canvas test</title> <script type="application/javascript"> function draw() { var canvas = document.getelementbyid("test"); if (canvas.getcontext) { var ctx = canvas.getcontext("2d"); ctx.fillstyle = "rgb(200,0,0)"; ctx.fillrect (10, 10, 55, 50); ctx.fillstyle = "rgba(0, 0, 200, 0.5)"; ctx.fillrect (30, 30, 55, 50); <body onload="draw();"> 14 kwietnia 2015 Strona 18

19 <canvas id="test" width="150" height="150"></canvas> plik10b.html <title>canvas test</title> <script type="application/javascript"> function draw() { var canvas = document.getelementbyid("test"); if (canvas.getcontext) { var ctx = canvas.getcontext("2d"); ctx.fillstyle = "rgb(200,0,0)"; ctx.fillrect (10, 10, 55, 50); ctx.fillstyle = "rgba(0, 0, 200, 0.5)"; ctx.fillrect (30, 30, 55, 50); <body onload="draw();"> <canvas id="test" width="150" height="150"></canvas> Prosta animacja plik10c.html plik10c.html <!DOCTYPE html> <meta charset="utf-8" /> <title>canvas Test</title> 14 kwietnia 2015 Strona 19

20 <section> <div> <canvas id="canvas" width="400" height="300"> This text is displayed if your browser does not support HTML5 Canvas. </canvas> </div> //te zmienne przechowuja wezel canvas i jego kontekst var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); //aktualne polozenie pileczki var x = 390; var y = 290; //o ile porusza sie pileczka w jednym kroku var dx = 2; var dy = 4; //wielkosc plotna var WIDTH = 400; var HEIGHT = 300; //rysuje pileczke function circle(x,y,r) { ctx.beginpath(); ctx.arc(x, y, r, 0, Math.PI*2, true); ctx.fill(); //rysuje prostokąt function rect(x,y,w,h) { ctx.fillrect(x,y,w,h); //czysci plotno function clear() { ctx.clearrect(0, 0, WIDTH, HEIGHT); //funkcja zarzadzajaca animacja function init() { canvas = document.getelementbyid("canvas"); ctx = canvas.getcontext("2d"); //funkcja rysujaca jest uruchamiana co 20ms return setinterval(draw, 20); 14 kwietnia 2015 Strona 20

21 //funkcja rysujaca klatki animacji function draw() { //czyscimy plotno clear(); //malujemy tlo animacji ctx.fillstyle = "#80ff00"; rect(0,0,width,height); //rysujemy pileczke ctx.fillstyle = "#444444"; circle(x, y, 10); //ustawiamy nowe polozenie pileczki x += dx; y += dy; //jesli dochodzimy do krawedzi to odbijamy sie if (x + dx + 10 > WIDTH x + dx - 10 < 0) dx = -dx; if (y + dy + 10> HEIGHT y + dy -10 < 0) dy = -dy; init(); </section> ZADANIE Proszę wykonać ćwiczenie 14 kwietnia 2015 Strona 21