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. 30 października 2017 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 30 października 2017 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/>"); 30 października 2017 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 30 października 2017 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. 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; 30 października 2017 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 wciśnięciu klawisza.") <h3>obsługa zdarzenia onclik</h3> <form> <input type="button" name="test" value="naciśnij" onclick="inform()"> </form> 30 października 2017 Strona 6

7 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. 30 października 2017 Strona 7

8 Obsługa formularzy 1. Odczyt danych wprowadzanych do pól formularza - skrypt plik6a.html plik6a.html <title>javascript formularz</title> <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> 30 października 2017 Strona 8

9 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"> <p> <select name="test" size="1"> <option value="7">abacki</option> <option value="8">babacki</option> <option value="9">cabacki</option> <option value="10">dadacki</option> </select> </p> <input type="button" name="b1" value="opis wybranej pozycji" onclick="status(); " /><br/> </form> 30 października 2017 Strona 9

10 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> <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> 30 października 2017 Strona 10

11 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> 30 października 2017 Strona 11

12 6. Walidacja wprowadzanych danych do formularza onsubmit skrypt plik6e.html plik6e.html <title>javascript walidacja formularza</title> 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> 30 października 2017 Strona 12

13 7. Prosty kalkulator wykonujący podstawowe cztery działania arytmetyczne skrypt plik6f.html plik6f.html <title>kalkulator</title> <meta charset="iso "> <form name="calculator"> <input type="text" disabled id="total" style="text-align: right; background: white; width:" /> </form> <table> <tr> <td><input type="button" value="c" style="width: 100%" onclick="calculator.total.value = ''"></td> <td><input type="button" value="/" style="width: 100%" onclick="calculator.total.value += '/'"></td> <td><input type="button" value="*" style="width: 100%" onclick="calculator.total.value +='*'"></td> <td><input type="button" value="-" style="width: 100%" onclick="calculator.total.value += '-'" ></td> </tr> <tr> <td><input type="button" value="7" onclick="calculator.total.value += '7'"></td> <td><input type="button" value="8" onclick="calculator.total.value += '8'"></td> <td><input type="button" value="9" onclick="calculator.total.value += '9'"></td> <td rowspan="2"><input type="button" onclick="calculator.total.value += '+'" style="height: 50px;vertical-align: middle" value ="+"></td> </tr> <tr> <td><input type="button" value="4" onclick="calculator.total.value += '4'"></td> <td><input type="button" value="5" onclick="calculator.total.value += '5'"></td> <td><input type="button" value="6" onclick="calculator.total.value += '6'"></td> </tr> <tr> <td><input type="button" value="1" onclick="calculator.total.value += '1'"></td> <td><input type="button" value="2" onclick="calculator.total.value += '2'"></td> <td><input type="button" value="3" onclick="calculator.total.value += '3'"></td> <td rowspan="2"><input type="button" onclick="calculator.total.value = eval(calculator.total.value)" style="height: 50px; vertical-align:middle" value ="="></td> </tr> <tr> <td colspan="2"><input type="button" style="width: 68px; text-align: center" value="0" onclick="calculator.total.value += '0'"></td> <td><input type="button" value="." style="width: 100%" onclick="calculator.total.value += '.'"></td> </tr> </table> 30 października 2017 Strona 13

14 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><td>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; 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> 30 października 2017 Strona 14

15 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"; <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> 30 października 2017 Strona 15

16 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> 30 października 2017 Strona 16

17 3. Dynamiczne menu skrypt plik8c.html plik8c.html <title>rozwijane menu</title> <style type="text/css"> #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"> 30 października 2017 Strona 17

18 <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> </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> 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). wypełniony prostokąt, 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ść października 2017 Strona 18

19 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();"> <canvas id="test" width="150" height="150"></canvas> 30 października 2017 Strona 19

20 plik10b.html <title>canvas test</title> function draw(){ var canvas = document.getelementbyid('test'); if (canvas.getcontext){ var ctx = canvas.getcontext('2d'); ctx.strokestyle = '#990000';//kolor linii ctx.strokerect(20,30,100,50);//rysujemy prostokšt bez wypełnienia ctx.fillstyle = 'green'; //definicja koloru wyepłnienie wypełnienia ctx.fillrect(21,31,98,48); //rysujemy prostokšt z wypełnieniem ctx.fillstyle = 'green'; //definicja koloru wyepłnienie wypełnienia ctx.fillrect(21,31,98,48); //rysujemy prostokšt z wypełnieniem var gradient = ctx.createradialgradient(75,75,20,75,75,45); //Tworzy obiekt gradientu radialnego // od koła o rodku (x0, y0) i promieniu r0 //do koła o rodku (x1, y1) i promieniu r1 gradient.addcolorstop(0, 'red'); //Dodaje znacznik zatrzymania koloru. Offset może być z przedziału od 0 do 1.0 gradient.addcolorstop(1, 'yellow'); ctx.fillstyle = gradient;//ustawia wypełnienie na gradient ctx.fillrect(0,81,150,70); //rysujemy prostokšt z wypełnieniem <style type="text/css"> canvas { border: 1px solid black; </style> <body onload="draw();"> <canvas id="test" width="150" height="150"></canvas> 30 października 2017 Strona 20

21 Prosta animacja plik10c.html plik10c.html <!DOCTYPE html> <meta charset="utf-8" /> <title>canvas Test</title> <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); 30 października 2017 Strona 21

22 //funkcja zarzadzajaca animacja function init() { canvas = document.getelementbyid("canvas"); ctx = canvas.getcontext("2d"); //funkcja rysujaca jest uruchamiana co 20ms return setinterval(draw, 20); //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> 30 października 2017 Strona 22