XML extensible Markup Language. część 5

Save this PDF as:
 WORD  PNG  TXT  JPG

Wielkość: px
Rozpocząć pokaz od strony:

Download "XML extensible Markup Language. część 5"

Transkrypt

1 XML extensible Markup Language część 5

2 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?

3 XML ważne zastosowanie Zmieniamy rozszerzenie pliku: xml_2017_wyklad_4.pptx xml_2017_wyklad_4.zip Spróbujmy rozpakować ten plik zip.

4 XML ważne zastosowanie Zawrtość rozpakowanego pliku to folder o następującej strukturze podfolderów:

5 XML ważne zastosowanie Co zawierają podfoldery? Co zawiera?

6 XML ważne zastosowanie Plik core.xml:

7 XML ważne zastosowanie Co zawierają podfoldery? Co zawierają te pliki?

8 XML ważne zastosowanie Slajd2:

9 XML ważne zastosowanie Plik slajd2.xml:

10 XML ważne zastosowanie Plik slajd2.xml (cd):

11 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.

12 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

13 JavaScript w dokumencie HTML Wykorzystujemy znacznik <script> Przykład <html> <body> <script type="text/javascript"> document.write("<h1>hello World!</h1>"); </script> </body> </html>

14 JavaScript w dokumencie HTML Wykorzystujemy znacznik <script> Przykład <html> <body> <script type="text/javascript"> <!-- document.write("hello World!"); //--> </script> </body> </html>

15 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 ;

16 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;

17 Operatory arytmetyczne Załóżmy, że y=5. Wówczas:

18 Operatory przypisania Załóżmy, że x=10 i y=5. Wówczas:

19 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

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

21 Operatory porównania Załóżmy, że x=5. Wówczas:

22 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 ";

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

24 Popup boxes alert wypisanie informacji dla użytkownika alert( tekst ) confirm potwierdzenie ze strony użytkownika confirm( tekst )

25 Popup boxes prompt pobranie wartości od użytkownika prompt( tekst )

26 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.

27 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 }

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

29 Funkcje w JavaScript Przykład

30 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ść

31 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 }

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

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

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

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

36 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.

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

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

39 Przydatne obiekty String Object Date Object Math Object

40 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ść

41 Obiekty w JavaScript Jak tworzymy własne obiekty? Przykład <body> <script> var obrazek = { plik:"pic11.jpg", opis:"pobyt nad morzem", data:" ", numer:121 }; </script> </body> </html>

42 Właściwości Jak docieramy do właściwości obiektów? Dwa sposoby: obiekt.własciwość obiekt["własciwość"]

43 Właściwości Przykład <body> <script> var obrazek = { plik:"pic11.jpg", opis:"pobyt nad morzem", data:" ", numer:121 }; alert(obrazek.numer+" "+obrazek.opis); </script> </body> </html>

44 Właściwości Przykład <body> <script> var obrazek = { plik:"pic11.jpg", opis:"pobyt nad morzem", data:" ", numer:121 }; alert(obrazek["numer"]+" "+obrazek["opis"]); </script> </body> </html>

45 Właściwości Przykład <body> <script> var obrazek = { plik:"", opis:"", POPRAWNIE data:"", numer:0 }; alert(obrazek["numer"]+" "+obrazek["opis"]); </script> </body> </html>

46 Właściwości Przykład <body> <script> var obrazek = { plik:"", opis:, BŁĘDY!!! data:"", numer: }; alert(obrazek["numer"]+" "+obrazek["opis"]); </script> </body> </html>

47 Właściwości Przykład <body> <script> var obrazek = { plik:"pic11.jpg", opis:"pobyt nad morzem", data:" ", numer:121 }; obrazek.numer=134; alert(obrazek["numer"]+" "+obrazek["opis"]); </script> </body> </html>

48 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

49 Właściwości Przykład var obrazek = { plik:"pic11.jpg", opis:"pobyt nad morzem", data:" ", numer:121, info:function() { return obrazek["numer"]+" "+obrazek["opis"]; } }; alert(obrazek.info());

50 Właściwości Przykład var obrazek = { plik:"pic11.jpg", opis:"pobyt nad morzem", data:" ", numer:121, info:function() { return obrazek["numer"]+" "+obrazek["opis"]; } }; alert(obrazek.info); BRAK ()

51 Właściwości Przykład var obrazek = { plik:"pic11.jpg", opis:"pobyt nad morzem", data:" ", numer:121, info:function(a) { return obrazek["numer"]+" +obrazek["opis"] +a; } }; alert(obrazek.info(145));

52 Właściwości Przykład var obrazek = { plik:"pic11.jpg", opis:"pobyt nad morzem", data:" ", numer:121, info:function(a) { obrazek.numer = a; return obrazek["numer"]+" +obrazek["opis"]; } }; alert(obrazek.info(145));

53 Właściwości Przykład var obrazek = { plik:"pic11.jpg", opis:"pobyt nad morzem", data:" ", numer:121, info:function() { obrazek.numer = prompt("podaj numer!"); }; obrazek.info(); alert(obrazek.numer);

54 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

55 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ść

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

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

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

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

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

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

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

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

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

65 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.

66 Przykład Kod strony WWW: <html> <body> Domena: <script type="text/javascript"> document.write(document.domain); </script> </body> </html>

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

XML extensible Markup Language. część 5

XML extensible Markup Language. część 5 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

Bardziej szczegółowo

Funkcje i instrukcje języka JavaScript

Funkcje i instrukcje języka JavaScript Funkcje i instrukcje języka JavaScript 1. Cele lekcji a) Wiadomości Uczeń : zna operatory i typy danych języka JavaScript, zna konstrukcję definicji funkcji, zna pętlę If i For, Do i While oraz podaje

Bardziej szczegółowo

Podstawy JavaScript ćwiczenia

Podstawy JavaScript ćwiczenia Podstawy JavaScript ćwiczenia Kontekst:

Bardziej szczegółowo

TECHNOLOGIE INTERNETOWE WYKŁAD 6. JavaScript Funkcje i obiekty

TECHNOLOGIE INTERNETOWE WYKŁAD 6. JavaScript Funkcje i obiekty 1. Co to jest funkcja? Funkcja jest oddzielnym blokiem kodu, który może być wielokrotnie wykonywany w danym programie, poprzez jej wielokrotne wywoływanie. Do funkcji przekazujemy przeważnie jakieś argumenty,

Bardziej szczegółowo

JAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania.

JAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. IŚ ćw.8 JAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. Skrypty JavaScript są zagnieżdżane w dokumentach HTML. Skrypt JavaScript

Bardziej szczegółowo

Krótki kurs JavaScript

Krótki kurs JavaScript Krótki kurs JavaScript Java Script jest językiem wbudowanym w przeglądarkę. Gdy ma się podstawy nabyte w innych językach programowania jest dość łatwy do opanowania. JavaScript jest stosowany do powiększania

Bardziej szczegółowo

Zajęcia 4 - Wprowadzenie do Javascript

Zajęcia 4 - Wprowadzenie do Javascript Zajęcia 4 - Wprowadzenie do Javascript Co to jest Javascript Javascript jest językiem skryptowym pozwalającym na dołączanie dodatkowej funkcjonalności do stron WWW. Jest ona najczęściej związana z modyfikacją

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 10

Tworzenie Stron Internetowych. odcinek 10 Tworzenie Stron Internetowych odcinek 10 JavaScript JavaScript (ECMAScript) skryptowy język programowania powszechnie używany w Internecie. Skrypty JS dodają do stron www interaktywność i funkcjonalności,

Bardziej szczegółowo

JAVAScript w dokumentach HTML - przypomnienie

JAVAScript w dokumentach HTML - przypomnienie Programowanie obiektowe ćw.1 JAVAScript w dokumentach HTML - przypomnienie JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. Skrypty JavaScript są zagnieżdżane w

Bardziej szczegółowo

Zdarzenia Zdarzenia onload i onunload

Zdarzenia Zdarzenia onload i onunload Zdarzenia Zdarzenia onload i onunload Ćwiczenie 1. Rysunek 1. Okno powitalne wykorzystujące zdarzenie onload Na stronie mogą zachodzić różne zdarzenia, np. użytkownik kliknie myszą lub zacznie wprowadzać

Bardziej szczegółowo

Zaawansowane aplikacje internetowe

Zaawansowane aplikacje internetowe Zaawansowane aplikacje internetowe AJAX 1 Celem tego laboratorium jest pokazanie moŝliwości technologii AJAX. W ramach ćwiczeń zostanie zbudowana prosta aplikacja, przechwytująca kliknięcia uŝytkownika

Bardziej szczegółowo

JAVAScript w dokumentach HTML (2)

JAVAScript w dokumentach HTML (2) Informatyka ćw.6 JAVAScript w dokumentach HTML (2) Interakcyjne wprowadzanie danych Jednym ze sposobów jest stosowanie metody prompt dla wbudowanego obiektu window: zmienna= prompt("tekst zachęty, np.

Bardziej szczegółowo

Rys.2.1. Drzewo modelu DOM [1]

Rys.2.1. Drzewo modelu DOM [1] 1. CEL ĆWICZENIA Celem ćwiczenia jest przedstawienie możliwości wykorzystania języka JavaScript do tworzenia interaktywnych aplikacji działających po stronie klienta. 2. MATERIAŁ NAUCZANIA 2.1. DOM model

Bardziej szczegółowo

Cw.12 JAVAScript w dokumentach HTML

Cw.12 JAVAScript w dokumentach HTML Cw.12 JAVAScript w dokumentach HTML Wstawienie skryptu do dokumentu HTML JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania.skrypty Java- Script mogą być zagnieżdżane

Bardziej szczegółowo

Obiektowe bazy danych

Obiektowe bazy danych Obiektowe bazy danych Wykład 7 Paweł Gmys Interfejs uŝytkownika C++ JAVA PERL PHP 2006-05-14 Paweł Gmys wykład 8 2 Czym są skrypty PHP? Programy umieszczane w treści stron WWW. Wykonywane przez serwer

Bardziej szczegółowo

Pierwszy program. else1