XML extensible Markup Language część 5
XML ważne zastosowanie Jak często pracujemy z plikami XML? Wróćmy jeszcze do wykładu poprzedniego. A dokładnie do pliku zawierającego ten wykład. xml_2017_wyklad_4.pptx Czy ma to jakiś związek z XML?
XML ważne zastosowanie Zmieniamy rozszerzenie pliku: xml_2017_wyklad_4.pptx xml_2017_wyklad_4.zip Spróbujmy rozpakować ten plik zip.
XML ważne zastosowanie Zawrtość rozpakowanego pliku to folder o następującej strukturze podfolderów:
XML ważne zastosowanie Co zawierają podfoldery? Co zawiera?
XML ważne zastosowanie Plik core.xml:
XML ważne zastosowanie Co zawierają podfoldery? Co zawierają te pliki?
XML ważne zastosowanie Slajd2:
XML ważne zastosowanie Plik slajd2.xml:
XML ważne zastosowanie Plik slajd2.xml (cd):
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 plików 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 oraz 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>
Przydatne obiekty 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
Obiekty w JavaScript Deklaracje zmiennych: var a=123; var miasto="łódź"; Powyższe zmienne są zmiennymi prostymi posiadają jedną wartość. W JS zmienna (a dokładnie obiekt) może posiadać wiele tzw. właściwości czyli par: właściwość:wartość
Obiekty w JavaScript Jak tworzymy własne obiekty? Przykład <body> <script> var obrazek = { plik:"pic11.jpg", opis:"pobyt nad morzem", data:"2011-07-28", numer:121 }; </script> </body> </html>
Właściwości Jak docieramy do właściwości obiektów? Dwa sposoby: obiekt.własciwość obiekt["własciwość"]
Właściwości Przykład <body> <script> var obrazek = { plik:"pic11.jpg", opis:"pobyt nad morzem", data:"2011-07-28", numer:121 }; alert(obrazek.numer+" "+obrazek.opis); </script> </body> </html>
Właściwości Przykład <body> <script> var obrazek = { plik:"pic11.jpg", opis:"pobyt nad morzem", data:"2011-07-28", numer:121 }; alert(obrazek["numer"]+" "+obrazek["opis"]); </script> </body> </html>
Właściwości Przykład <body> <script> var obrazek = { plik:"", opis:"", POPRAWNIE data:"", numer:0 }; alert(obrazek["numer"]+" "+obrazek["opis"]); </script> </body> </html>
Właściwości Przykład <body> <script> var obrazek = { plik:"", opis:, BŁĘDY!!! data:"", numer: }; alert(obrazek["numer"]+" "+obrazek["opis"]); </script> </body> </html>
Właściwości Przykład <body> <script> var obrazek = { plik:"pic11.jpg", opis:"pobyt nad morzem", data:"2011-07-28", numer:121 }; obrazek.numer=134; alert(obrazek["numer"]+" "+obrazek["opis"]); </script> </body> </html>
Metody Do obiektów możemy dodawać metody. Metody dodawane są jako wartości właściwości. właściwośćmetoda:function(){ //ciało funkcji } Wywoływanie metod: obiekt.właściwośćmetoda() Dostęp do definicji funkcji (bez końcowych nawiasów): obiekt.właściwośćmetoda
Właściwości Przykład var obrazek = { plik:"pic11.jpg", opis:"pobyt nad morzem", data:"2011-07-28", numer:121, info:function() { return obrazek["numer"]+" "+obrazek["opis"]; } }; alert(obrazek.info());
Właściwości Przykład var obrazek = { plik:"pic11.jpg", opis:"pobyt nad morzem", data:"2011-07-28", numer:121, info:function() { return obrazek["numer"]+" "+obrazek["opis"]; } }; alert(obrazek.info); BRAK ()
Właściwości Przykład var obrazek = { plik:"pic11.jpg", opis:"pobyt nad morzem", data:"2011-07-28", numer:121, info:function(a) { return obrazek["numer"]+" +obrazek["opis"] +a; } }; alert(obrazek.info(145));
Właściwości Przykład var obrazek = { plik:"pic11.jpg", opis:"pobyt nad morzem", data:"2011-07-28", numer:121, info:function(a) { obrazek.numer = a; return obrazek["numer"]+" +obrazek["opis"]; } }; alert(obrazek.info(145));
Właściwości Przykład var obrazek = { plik:"pic11.jpg", opis:"pobyt nad morzem", data:"2011-07-28", numer:121, info:function() { obrazek.numer = prompt("podaj numer!"); }; obrazek.info(); alert(obrazek.numer);
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 ) 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>