XML extensible Markup Language część 5
JavaScript Co to jest JavaScript? JavaScript był zaprojektowany w celu dodania interaktywności do stron HTML JavaScript jest językiem skryptowym JavaScript jest zwykle osadzony w dokumentach HTML JavaScript jest językiem interpretowalnym (brak kompilacji) Używanie JavaScript jest darmowe i nie ma potrzeby wykupywania licencji.
Co potrafi język JavaScript? JavaScript umożliwia dynamiczne wstawianie tekstu na stronę HTML JavaScript potrafi reagować na zdarzenia np. zakończenie ładowania strony, kliknięcie w jakiś element strony JavaScript potrafi czytać i zmieniać zawartość elementów HTML JavaScript może być wykorzystywany do walidacji danych przed wysłaniem na serwer JavaScript może być wykorzystany do detekcji przeglądarki użytkownika JavaScript może być wykorzystany do stworzenia pliku cookie
JavaScript w dokumencie HTML Wykorzystujemy znacznik <script> Przykład <html> <body> <script type="text/javascript"> document.write("<h1>hello World!</h1>"); </script> </body> </html>
JavaScript w dokumencie HTML Wykorzystujemy znacznik <script> Przykład <html> <body> <script type="text/javascript"> <!-- document.write("hello World!"); //--> </script> </body> </html>
Zmienne w JavaScript Zmienne wykorzystywane są do przechowywania wartości lub wyrażeń Zmienne mogą posiadać nazwy krótkie (np. x) lub długie (np. imię) przy czym: Wielkość liter w nazwach zmiennych ma znaczenie Nazwa zmiennej zaczyna się od litery bądź podkreślnika Deklaracja (tworzenie) zmiennych: var x; var carname= Fiat ;
Zmienne w JavaScript Deklaracja zmiennych i przypisanie wartości: var x=5; var carname= Fiat ; Przypisanie wartości do niezadeklarowanej zmiennej (zmienna jest deklarowana automatycznie): x=5; carname= Fiat ; Redeklaracja zmiennej (zmienna nie traci swojej wartości): var x=5; var x;
Operatory arytmetyczne Załóżmy, że y=5. Wówczas:
Operatory przypisania Załóżmy, że x=10 i y=5. Wówczas:
Operatory w JavaScript Operator konkatenacji Operatorem konkatenacji jest +. Przykład txt1="what a very "; txt2="nice day"; txt3=txt1+txt2; Zmienna txt3 wynosi: What a very nice day txt1="what a very"; txt2="nice day"; txt3=txt1+txt2; Zmienna txt3 wynosi: What a verynice day
Operatory w JavaScript <script type="text/javascript"> x=5+5; document.write(x); document.write("<br />"); x="5"+"5"; document.write(x); document.write("<br />"); x=5+"5"; document.write(x); document.write("<br />"); x="5"+5; document.write(x); document.write("<br />"); </script> <p>uwaga: Wynikiem dodania liczby do stringu jest string.</p>
Operatory porównania Załóżmy, że x=5. Wówczas:
Operatory logiczne Załóżmy, że x=6 i y=3. Wówczas: Operator warunkowy Składnia: Przykład: variablename=(condition)?value1:value2 greeting=(visitor=="pres")?"dear President ":"Dear ";
Instrukcja warunkowa Przykład <script type="text/javascript"> var d = new Date(); var time = d.gethours(); if (time < 10) { document.write("good morning!"); } else { document.write("good day!"); } </script>
Popup boxes alert wypisanie informacji dla użytkownika alert( tekst ) confirm potwierdzenie ze strony użytkownika confirm( tekst )
Popup boxes prompt pobranie wartości od użytkownika prompt( tekst )
Funkcje w JavaScript Funkcje wykorzystujemy m.in. wtedy gdy nie chcemy aby skrypt był wykonany w czasie ładowania strony. Funkcja zawiera instrukcje, które będą wykonane wtedy gdy zajdzie pewne zdarzenie lub gdy wywołamy funkcję. Funkcja może być zdefiniowana w sekcji <body> lub <head>. Zdefiniowanie funkcji w sekcji <head> daje gwarancję, że funkcja jest czytana/załadowana przed wywołaniem. Funkcja może być też zdefiniowana w zewnętrznym pliku z rozszerzeniem js. Plik ten musi być dołączony do strony.
Funkcje w JavaScript Składania: Uwagi: function nazwafunkcji(var1,var2,...,varx) { cialo funkcji } Słowo function jest pisane z małej litery. W przypadku gdy funkcja nie ma parametrów nawiasy ( i ) pozostają tzn. function nazwafunkcji() { cialo funkcji }
Funkcje w JavaScript Przykład <html> <head> <script type="text/javascript"> function message() { alert("hello World!"); } </script> </head> <body> <form> <input type="button" value="click me!" onclick="message()"/> </form> </body> </html>
Funkcje w JavaScript Przykład
Funkcje w JavaScript Przykład <html> <head> <script type="text/javascript"> function product(a,b) { return a*b; } </script> </head> <body> <script type="text/javascript"> document.write(product(4,3)); </script> </body> </html> Funkcja może zwracać wartość
Pętle w JavaScript Składnia pętli for for(var=startvalue;var<=endvalue;var=var+increment) { instrukcje } Składnia pętli while while (var<=endvalue) { instrukcje }
Pętle w JavaScript Przykład <html> <body> <script type="text/javascript"> var i=0; for (i=0;i<=5;i++) { document.write("the number is " + i); document.write("<br />"); } </script> </body> </html>
Pętle w JavaScript Przykład <html> <body> <script type="text/javascript"> var i=0; while (i<=5) { document.write("the number is " + i); document.write("<br/>"); i++; } </script> </body> </html>
Pętle w JavaScript Przykład <html> <body> <script type="text/javascript"> var i=0; for (i=0;i<=10;i++) { if (i==3) { break; } document.write("the number is " + i); document.write("<br />"); } </script> </body> </html>
Pętle w JavaScript Przykład <html> <body> <script type="text/javascript"> var i=0 for (i=0;i<=10;i++) { if (i==3) { continue; } document.write("the number is " + i); document.write("<br />"); } </script> </body> </html>
Obiekty w JavaScript JavaScript jest językiem obiektowym tzn. możemy w nim definiować własne obiekty zmienne własnych typów. Każdy obiekt posiada swoje właściwości (pola) oraz metody (funkcje). Język JavaScript oferuje wiele bardzo przydatnych wbudowanych obiektów.
Obiekty w JavaScript Właściwości Właściwość to wartość związana z obiektem. Przykład <script type="text/javascript"> var txt="niedziela"; alert(txt.length); </script>
Obiekty w JavaScript Metody Metody to operacje, które mogą być wykonane na obiekcie. Przykład <script type="text/javascript"> var txt= niedziela"; alert(txt.touppercase()); </script>
Obiekty w JavaScript String Object http://www.w3schools.com/jsref/jsref_obj_string.asp Date Object http://www.w3schools.com/jsref/jsref_obj_date.asp Math Object http://www.w3schools.com/jsref/jsref_obj_math.asp
HTML DOM Co to jest HTML DOM? DOM to skrót od Document Object Model czyli Obiektowy Model Dokumentu DOM definiuje standard dostępu do dokumentów HTML i XML DOM jest niezależny od platformy i języka HTML DOM definiuje obiekty i właściwości elementów HTML oraz metody dostępu do nich DOM jest standardem W3C
HTML DOM document object Każdy dokument HTML wyświetlony w przeglądarce staje się obiektem (ang. document object). Obiekt ten umożliwia dostęp ze skryptu do wszystkich elementów dokumentu HTML. Tablice (kolekcje) obiektu dokumentu: Składnia: anchors[] tablica kotwic (anchors) forms[] tablica formularzy images[] tablica obrazków links[] tablica linków document.nazwa_tablicy.właściwość
Przykład Kod strony WWW: <html> <body> <a name="html">html</a><br/> <a name="css">css</a><br/> <a href="http://www.o2.pl">link</a><br/> <a name="xml">xml</a><br/> <p>anchors: <script type="text/javascript"> Właściwość document.write(document.anchors.length); </script></p> </body> </html>
Przykład Kod strony WWW: <html> <body> <a name="html">html</a><br/> <a name="css">css</a><br/> <a href="http://www.o2.pl">link</a><br/> <a name="xml">xml</a><br/> <p>linki: <script type="text/javascript"> Właściwość document.write(document.links.length); </script></p> </body> </html>
Przykład Kod strony WWW: <html> <body> <a name="html">html</a><br/> <a name="css">css</a><br/> <a href="http://www.o2.pl">link</a><br/> <a name="xml">xml</a><br/> <p>adres: <script type="text/javascript"> Właściwość document.write(document.links[0].href); </script></p> </body> </html>
Przykład Kod strony WWW: <html> <body> <a href="http://www.wp.pl">link 1</a><br/> <a href="http://www.rmf.fm">link 2</a><br/> <a href="http://www.o2.pl">link 3</a><br/> <p> <script type="text/javascript"> for(var i=0;i<document.links.length;i++) Właściwość document.write(document.links[i].href+"<br/>"); </script> </p> </body> </html>
Przykład Kod strony WWW: <html> <body> <a name="wp" href="http://www.wp.pl">link 1</a><br/> <a href="http://www.rmf.fm">link 2</a><br/> <a name="o2" href="http://www.o2.pl">link 3</a><br/> <p> <script type="text/javascript"> for(var i=0;i<document.links.length;i++) Właściwość document.write(document.links[i].name+"<br/>"); </script> </p> </body> </html>
Przykład Kod strony WWW: <html> <body> <form name="imie"></form> <form name="nazwisko"></form> <form name="wiek"></form> <p> <script type="text/javascript"> document.write(document.forms[0].name+"<br/>"); document.write(document.forms[1].name+"<br/>"); document.write(document.forms[2].name); </script> </p> </body> </html>
Przykład Kod strony WWW: <html> <body> <form name="dane"> <input type="text" name="liczba" value="1"> <input type="text" name="imie" value="marek"> </form> <p> <script type="text/javascript"> document.write(document.forms[0].liczba.value+"<br/>"); document.write(document.forms[0].imie.value+"<br/>"); </script> </p> </body> </html>
Przykład Kod strony WWW: <html> <body> <form name="dane"> <input type="text" name="liczba" value="1"> <input type="text" name="imie" value="marek"> </form> <p> <script type="text/javascript"> document.write(document.dane.liczba.value+"<br/>"); document.write(document.dane.imie.value+"<br/>"); </script> </p> </body> </html>
Przykład Kod strony WWW: <html> <body> <form name="dane"> <input type="text" name="liczba1" value="1"> <input type="text" name="liczba2" value="marek"> </form> <p> <script type="text/javascript"> document.write(document.dane.liczba1.value+document.dane.liczba2.value); </script> </p> </body> </html>
HTML DOM document object Właściwości obiektu dokumentu: cookie zwraca pary nazwa/wartość ciasteczek. domain zwraca domenę serwera. readystate (o tym później albo w ogóle?) referrer zwraca URL dokumentu, który załadował aktualny dokument. title zwraca tytuł dokumentu. URL zwraca URL dokumentu.
Przykład Kod strony WWW: <html> <body> Domena: <script type="text/javascript"> document.write(document.domain); </script> </body> </html>
Przykład Kod strony WWW: <html> <head> <title>jakis tytul</title> </head> <body> Tytul: <script type="text/javascript"> document.write(document.title); </script> </body> </html>
HTML DOM Zgodnie z modelem DOM wszystko w dokumencie HTML jest węzłem (ang. node). Cały dokument jest węzłem dokumentu (ang. document node) Każdy element HTML jest węzłem elementu (ang. element node) Tekst w elementach HTML to węzły tekstu (ang. text node) Każdy atrybut HTML jest węzłem atrybutu (ang. attribute node) Komentarze są węzłami komentarzy (ang. comment nodes)
HTML DOM Przykład <html> <head> <title>my title</title> </head> <body> <a href="">my link</a> <h1>my header</h1> <body> </html> Drzewo węzłów
HTML DOM Według modelu DOM dokument HTML to zbiór węzłów. Do węzłów mamy dostęp przy pomocy języka JavaScript lub innych języków programowania (w czasie zajęć będziemy wykorzystywać język JavaScript). Model DOM daje nam do dyspozycji właściwości oraz metody. Właściwość węzła to pewna jego cecha np. nazwa. Metoda węzła to operacja która może być wykonana na węźle np. usunięcie węzła.
HTML DOM Wybrane właściwości DOM: x.innerhtml zawartość elementu x x.nodename nazwa elementu x x.nodevalue wartość x x.parentnode rodzic elementu x x.childnodes dzieci elementu x x.attributes - atrybuty x gdzie x to nazwa węzła (element HTML).
HTML DOM Wybrane metody DOM: x.getelementbyid(id) - element z określonym id x.getelementsbytagname(name) elementy z określoną nazwą x.appendchild(node) do węzła x dodaj dziecko o nazwie node x.removechild(node) usuń dziecko węzła x o nazwie node gdzie x to nazwa węzła (element HTML).
innerhtml Właściwość ta umożliwia nam w prosty sposób modyfikację zawartości dowolnego elementu HTML. Właściwości innerhtml nie należy do specyfikacji HTML DOM, ale jest wspierana przez większość przeglądarek. Właściwość innerhtml jest przydatna w przypadku pobrania bądź zamiany zawartości elementu HTML (w tym <html> i <body>). Może być także użyta do podejrzenia zawartości strony, która została dynamicznie zmodyfikowana.
Przykład Kod strony WWW: Metoda Właściwość <html> <body> <p id="intro">hello World!</p> <script type="text/javascript"> txt=document.getelementbyid("intro").innerhtml; document.write("<p>tekst: " + txt + "</p>"); </script> </body> </html>
Przykład Kod strony WWW: <html> <body> <a name="wp" href="http://www.wp.pl">link 1</a><br/> <a href="http://www.rmf.fm">link 2</a><br/> <a name="o2" href="http://www.o2.pl">link 3</a><br/> <p> <script type="text/javascript"> for(var i=0;i<document.links.length;i++) document.write(document.links[i].innerhtml+"<br/>"); </script> </p> </body> </html>
Przykład Kod strony WWW: <html> <body> <a name="wp" href="http://www.wp.pl">link 1</a><br/> <a href="http://www.rmf.fm">link 2</a><br/> <a name="o2" href="http://www.o2.pl">link 3</a><br/> <p> Nazwa <script type="text/javascript"> document.write(document.links.wp.innerhtml+"<br/>"); document.write(document.links[1].innerhtml+"<br/>"); document.write(document.links.o2.innerhtml); </script> </p> </body> </html>
Przykład Kod strony WWW: Metoda Właściwość <html> <body> <p id="intro">hello World!</p> <script type="text/javascript"> txt=document.getelementbyid("intro").nodename; document.write("<p>tekst: " + txt + "</p>"); </script> </body> </html>
Przykład Kod strony WWW: Metoda Właściwość <html> <body> <p id="intro">hello World!</p> <script type="text/javascript"> txt=document.getelementbyid("intro").parentnode.nodename; document.write("<p>tekst: " + txt + "</p>"); </script> </body> </html>
Przykład Kod strony WWW: Metoda Właściwości <html> <body> <p id="intro">hello World!</p> <script type="text/javascript"> txt=document.getelementbyid("intro").childnodes[0]. nodevalue; document.write("<p>tekst: " + txt + "</p>"); </script> </body> </html>
Dostęp do węzłów Dostęp do węzłów można uzyskać na trzy sposoby: przez użycie metody getelementbyid() przez użycie metody getelementsbytagname() przez nawigację po drzewie węzłów wykorzystując zależności między węzłami
getelementbyid Metoda getelementbyid zwraca element z określonym ID. Składnia: node.getelementbyid("id")
getelementbyid Kod strony WWW: <html> <body> <p id="intro">hello World!</p> <script type="text/javascript"> txt=document.getelementbyid("intro").innerhtml; document.write("<p>tekst: " + txt + "</p>"); </script> </body> </html>
getelementbyid Kod strony WWW: <html> <head> <script type="text/javascript"> //patrz następny slajd </script> </head> <body> <div id="wr1" style="position:absolute;left:10px;top:100px;visibility: visible;"> <img width="200" id="rys1" src="auto.jpg" onmouseover="move()"> </div> <input type="button" value="move" onclick="move()"> </body> </html>
getelementbyid Java Script: function move() { var selector =document.getelementbyid('wr1').style; var oldleft = parseint(selector.left); var newleft = (oldleft + 20); selector.left = newleft + "px"; }
getelementbyid Kod strony WWW: <html> <head> <script type="text/javascript"> //patrz dwa slajdy dalej </script> </head> <body> <div id="wr1" style="position:absolute;left:10px;top:200px;visibility:hidden;"> <img width="200" id="rys1" src="sanfra.jpg" onclick="change('wr1')"> </div> <div id="wr2" style="position:absolute;left:280px;top:170px;visibility:hidden;"> <img width="200" id="rys1" src="auto.jpg" onclick="change('wr2')"> </div> //patrz następny slajd </body> </html>
getelementbyid Kod strony WWW: <div style="position:absolute;top:55px;"> <div style="position:absolute;left:20px;"> <img width="80" id="r1" src="sanfra.jpg"><br> <form> <input style="position:absolute;left:30px;" type="checkbox" name="wr1" onclick="show(this.form.wr1)"/> </form> </div> <div style="position:absolute;left:160px;"> <img width="80" id="r2" src="auto.jpg"><br> <form> <input style="position:absolute;left:30px;" type="checkbox" name="wr2" onclick="show(this.form.wr2)"/> </form> </div> </div>
getelementbyid Java Script: function show(f) { if (f.checked) document.getelementbyid(f.name).style. visibility="visible"; else document.getelementbyid(f.name).style. visibility="hidden"; }
getelementbyid Rezultat:
getelementbyid Rezultat:
getelementbyid Rezultat:
getelementbytagname Metoda getelementsbytagname zwraca listę elementów (ang. nodelist) o określonej nazwie. Składnia: node.getelementsbytagname("name") Do poszczególnych elementów listy odwołujemy się za pomocą indeksu przy czym pierwszy element posiada indeks = 0.
getelementbytagname Kod strony WWW: <html> <body> <p>hello World!</p> <script type="text/javascript"> x=document.getelementsbytagname("p"); document.write("tekst: " + x[0].innerhtml); </script> </body> </html>
getelementbytagname Kod strony WWW: <html> <body> <p>hello World!</p> <div id="main"> <p>niedziela</p> </div> <script type="text/javascript"> x=document.getelementbyid("main").getelementsbytagn ame("p"); document.write("pierwszy akapit w div: " + x[0].innerhtml); </script> </body> </html>
getelementbytagname Kod strony WWW: <html> <body> <p>hello World!</p> <p>niedziela</p> <script type="text/javascript"> x=document.getelementsbytagname("p"); document.write("tekst: "+x[0].innerhtml + "<br>"); document.write("tekst: "+x[1].innerhtml); </script> </body> </html>
getelementbytagname Kod strony WWW: <html> <body> <p>hello World!</p> <p>model DOM</p> <p>wlasciwosc length</p> <script type="text/javascript"> x=document.getelementsbytagname("p"); for (i=0;i<x.length;i++) { document.write(x[i].innerhtml); document.write("<br/>"); } </script> </body> </html>
Przechodzenie drzewa węzłów Następujące właściwości: parentnode węzeł będący rodzicem firstchild pierwsze dziecko lastchild ostatnie dziecko umożliwiają przechodzenie drzewa węzłów.
Przechodzenie drzewa węzłów Kod strony WWW: parentnode elementów p i div firstchild elementu body <html> <body> <p>hello World!</p> <div> <p>model DOM!</p> <p>zaleznosci miedzy wezlami</p> </div> </body> </html> lastchild elementu body i parentnode elementów p
Przechodzenie drzewa węzłów Kod strony WWW: <html> <body> <p id="intro">hello World!</p> <script type="text/javascript"> x=document.getelementbyid("intro"); document.write(x.firstchild.nodevalue); </script> </body> </html>
Przechodzenie drzewa węzłów Istnieją dwie szczególne właściwości dokumentu: document.documentelement węzeł będący rodzicem document.body dostęp do znacznika body
Przechodzenie drzewa węzłów Kod strony WWW: <html> <body> <p>hello World!</p> <div> <p>model DOM</p> </div> <script type="text/javascript"> x=document.body; alert(x.innerhtml); </script> </body> </html>
Właściwości węzłów W modelu DOM każdy węzeł jest obiektem. Obiekty posiadają właściwości i metody umożliwiające manipulowanie obiektami. Ważne właściwości węzłów: nodename nodevalue nodetype
Właściwość nodename Właściwość określająca nazwę węzła. nodename jest typu read-only nodename dowolnego węzła będącego znacznikiem to nazwa znacznika nodename dowolnego węzła będącego atrybutem to nazwa atrybutu nodename dowolnego węzła będącego tekstem (tekst) to #tekst nodename węzła dokumentu to #dokument
Właściwość nodevalue Właściwość określająca wartość węzła. nodevalue dla dowolnego węzła będącego znacznikiem brak nodevalue dowolnego węzła będącego atrybutem to wartość atrybutu nodevalue dowolnego węzła będącego tekstem to sam tekst
Przechodzenie drzewa węzłów Kod strony WWW: <html> <body> <p id="intro">hello World!</p> <script type="text/javascript"> x=document.getelementbyid("intro"); document.write(x.firstchild.nodevalue); </script> </body> </html>
Właściwość nodetype Właściwość zwraca typ węzła. Typ elementu Typ węzła Element 1 Atrybut 2 Tekst 3 Komentarz 8 document 9
Modyfikacje elementów HTML - przykłady Kod strony WWW: <html> <body> <script type="text/javascript"> document.body.bgcolor="lavender"; </script> </body> </html>
Modyfikacje elementów HTML - przykłady Kod strony WWW: <html> <body> <p id="p1">hello World!</p> <script type="text/javascript"> document.getelementbyid("p1").innerhtml=" New text!"; </script> </body> </html>
Modyfikacje elementów HTML - przykłady Kod strony WWW: <html> <body> <input type="button" onclick="document.body.bgcolor= blue';" value="change background color" /> </body> </html>
Modyfikacje elementów HTML - przykłady Kod strony WWW: <head> <script type="text/javascript"> function ChangeText() { document.getelementbyid("p1").innerhtml="new text!"; } </script> </head> <body> <p id="p1">hello world!</p> <input type="button" onclick="changetext()" value="change text" /> </body> </html>
Modyfikacje elementów HTML - przykłady Kod strony WWW: <html> <head> <script type="text/javascript"> function ChangeStyle() { document.getelementbyid("p1").style.color="blue"; document.getelementbyid("p1").style.fontfamily="ari al"; } </script> </head> <body> <p id="p1">hello world!</p> <input type="button" onclick="changestyle()" value="change style" /> </body> </html>
Kompletny opis obiektów JavaScript i HTML DOM można znaleźć na stronie: http://www.w3schools.com/jsref/default.asp