ZAAWANSOWANE TECHNIKI WWW (zajęcia r.)

Transkrypt

1 ZAAWANSOWANE TECHNIKI WWW (zajęcia r.) 1) Mediaqueries - szablon podstawowy Przykład z szablonu strony który dostosowuje się w zalezności od dostępnej szerokości ekranu dostępny jest pod adresem: W przykładzie tym stworzona dwa pliki CSS które osbługują rózne szerokości ekranu. Zostały włączone za pomocą linkowania i atrybutu media : <link href="xstyle.css" rel="stylesheet" media="screen and (min-width: 1024px)"> <link href="mstyle.css" rel="stylesheet" media="screen and (max-width: 1023px)"> 2) Twitter Bootstrap - podstawy użytkowania Biblioteka Bootstrap (a właściwie Twitter Bootstrap) jest zestawem gotowych wzorców i elementów CSS które służą do budowy responsywnych (RWD) stron internetowych. Adres strony projektu to: Obecna wersja produkcyjna to Niebawem ukaż się wersja a) Włączenie biblioteki do własnego kodu Biblioteka Bootstrap składa się z kilku elementów. Aby jej użyć na własnej stronie internetowej nalezy pobrac pakiet zawierający wszystkie niezbędne pliki: st.zip Lub można dla lepszej efektywności własnej witryny dołączyć pliki z serwera CDN: <link rel="stylesheet" href=" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> Potrzebne są również biblioteki JavaScriptowe samego Bootstrapa oraz biblioteki jquery: <script src=" "></script> <script src=" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous"></script>

2 Druga wersja pozwala na przyspieszenie ładowania strony ponieważ odciążamy nasz własny serwer, a po drugie możliwe że już odwiedzaliśmy stronę która kożysta z biblioteki Bootstrap i odpowiednie pliki mamy już w pamięci cache naszej przeglądarki. Przykładowy szablon strony wygląda następująco: <!DOCTYPE html> <html lang="pl"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>bootstrap 101 Template</title> <link rel="stylesheet" href=" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> </head> <body> <h1>hello, world!</h1> <script src=" <script src=" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous"></script> </body> </html> b) Struktura siatki w Bootstrap: Biblioteka Bootstrap ma ułatwiać tworzenia responsywnych ale stron internetowych, które będą wyświetlać się na dowolnym urządzeniu (PC, smartphone, tv etc). Dla realizacji tego celu Bootstrap wprowadza system tzw. Gridu (siatki) która dzieli obszar okna przeglądarki na 12 kolumn i dowolną ilośc wierszy. Dzięki temu jest możliwe stworzenie czterech niezależnych widoków na najpopularniejsze szerokości ekranu. Do tego celu wykorzystywana jest klasa podstawowa container. Ma ona cztery możliwości dopasowania się do urządzenia: - Dla szerokości ekranu poniżej 768px, klasa container ustawia automatyczną szerokość dla elementu blokowego. - Dla szerokości powyżej 768px, klasa container ustawia 750px dla elementu blokowego. - Dla szerokości powyżej 992px, klasa container ustawia 970px dla elementu blokowego. - Dla szerokości powyżej 1200px, klasa container ustawia kontener na 1170px dla elementu blokowego. Podstawowy element na stronie klasy container powinien wyglądać następująco:

3 <div class="container"> Treść strony </div> (Proszę za pomoca narzędzie Developerskiego wbudowanego w przeglądarkę sprawdzić czy faktycznie przedstawione wartości szerokości elementu blokowego są prawdziwe). Wróćmy do siatki Booststrap: system ten składa się z wierszy i kolumn w których umieszczane są poszczególne elementy strony. Wiersz pełni rolę lokalizatora poziomego elementów na stronie i powinien być umieszczony w następujący sposób w kontenerze: <div class="container"> </div> <div class="row"> </div> Treść strony Natomiast jak już wspomniano Bootstrap dzieli dostępną przestrzeń kontenera w ramach jednego wiersza na 12 kolumn. Po przekroczeniu tej liczby na wiersz kolejna kolumna przejdzie do nowej linii. Dzięki już wspomnianym sztywnemu podziałowi na poszczególne dostępne szerokości ekranu Bootstrap udostępnia 4 rodzaje kolumn: - Komputery PC (duże ekrany > 1200 px, dla tego typu urządzeń mamy dostępną klasę: col-l-*, gdzie zamiast gwiazdki możemy wstawić liczbę od 1-12, która oznacza liczbę kolumn. Kolumny te mają zadaną szerokość dla ekranów powyżej 1200 px. Natomiast jeśli szerokość będzie mniejsza to kolumny ustawią się jedna pod drugą. Należy jednak pamiętać, że w żadnym wypadku nie należy przekroczyć w sumie liczby 12. Tzn. że możemy mieć na stronie np. 1 kolumnę o szerokości 6 jednostek oraz 3 kolumny o szerokości 2 jednostki. W sumie jest to 12 jednostek. Przykładowo: <div class="container"> <div class="row"> </div>

4 <div class="row"> <div class="col-lg-6">.col-lg-6</div> <div class="col-lg-2">.col-lg-2</div> <div class="col-lg-2">.col-lg-2</div> <div class="col-lg-2">.col-lg-2</div> </div> </div> - Laptopy powyżej 992px: klasa col-md-* zasada jest ta sama co poprzednio (tutaj plusem jest to że ta klasa będzie działać również na PC). - Tablet powyżej 768px: klasa col-sm-*. - Smartphony poniżej 768px: klasa col-xs-*. Istotnym elementem systemu siatki jest możliwość przesuwania kolumn przez wprowadzenie tzw. Offsetu. Podobnie jak poprzednio dostępna jest klasa która przesuwa daną kolumnę o żądaną jednostkę (w ilości kolumn) dla zadanej szerokości ekranu: col-?-offset-*, gdzie? oznacza wybraną szerokość ekrany (lg, md, sm, xs), a gwiazdka liczbę kolumn o ile ma zostać przesunięta dana kolumna. Przykład: <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 +.col-md-offset-4</div> </div> Przesuwamy druga kolumnę w stosunku do pierwszej o 4 jednostki, pamiętając cały czas że suma nie może przekroczyć 12. Wiersze i kolumny można zagnieżdzać. Należy przy tym pamiętać, że każdy nowy zagnieżdzony wiersz znów ma dostępne 12 kolumn które możemy podzielić i zagnineżdzać. Więcej informacji na temat siatki dostępnej jest w dokumentacji Bootstrap: Zadanie 1. Prosze stworzyć podstawowy szablon strony w Bootsrap i przetestować system siatki na wszystkie rozdzielczości. 3) Twitter Bootstrap - przykłady elementów graficznych - Wyrównanie tekstu w paragrafie: <p class="text-left">do lewej.</p> <p class="text-center">do środka.</p> <p class="text-right">do prawej</p> <p class="text-justify">tekst wyjustowany</p>

5 - Przypis w tekście: <p> <abbr title="(zjawisko fotoelektryczne, fotoefekt, fotoemisja)"> Efekt fotoelektryczny </abbr> zjawisko fizyczne polegające na emisji elektronów z powierzchni przedmiotu, zwane również precyzyjniej zjawiskiem fotoelektrycznym zewnętrznym dla odróżnienia od wewnętrznego. </p> - Cytowanie w tekście: <blockquote> <p> </p> Efekt fotoelektryczny - zjawisko fizyczne polegające na emisji elektronów z powierzchni przedmiotu, zwane również precyzyjniej zjawiskiem fotoelektrycznym zewnętrznym dla odróżnienia od wewnętrznego. </blockquote> 4) Podstawowe informacje o języku JavaScript Aby użyć w dokumencie hipertekstowym skryptu napisanego w języku Javascript należy kod tego skryptu osadzić wewnątrz dokumentu HTML lub dołączyć go w postaci zewnętrznej biblioteki: a.) Osadzanie skryptu wewnątrz dokumentu hipertekstowego: <!DOCTYPE html> <html> <head> <title>testowanie JS</title> <script type="text/javascript">  </script> <noscript> <center style="color:red;">!!!! Twoja przeglądarka nie obsługuje lub ma wyłączony JS!!!!</center> </noscript> </head>

6 <body> <h2>test JavaScriptu</h2> Akcja wywołana przed zdarzeniem OnLoad(); w momencie ładowania strony <hr/> </body> </html> b.) Dołączenie skryptu w postaci zewnętrznej biblioteki w pliku external.js : <!DOCTYPE html> <html> <head> <title>testowanie JS</title> <script type="text/javascript" src="external.js"></script> <noscript> <center style="color:red;">!!!! Twoja przeglądarka nie obsługuje lub ma wyłączony JS!!!!</center> </noscript> </head> <body> </body> </html> 5) Zmienne i operacje artmetyczne: W języku JS nie ma statycznej kontroli typu zmiennej dlatego zmienne deklarujemu za pomocą słowa kluczowego var, a typ określamy w momencie przypisania wartości zmiennej: <script type="text/javascript">  </script> - Dyrektywa document.write() pozwala na pisanie dowolnego tekstu do części body dokumentu hipertekstowego. - metoda alert() pozwala na wypisanie informacji na ekran w postaci

7 wyskakującego okna komunikatu. - metoda pozwala typeof() na sprawdzenie typu zmiennej. Parsowanie zmiennych pozwala np. na zmiane typu zmiennej z String na Integer, lub z String na Float, służą do tego dwie metody parseint() oraz parsefloat() : <script type="text/javascript">  </script> 6) Tablice numerowane indeksem naturalnym: W Java Script bardzo pomocnym obiektem są tablice. Przykładu deklaracji tablicy: var tab1 = new Array(); // tablica bez deklaracji var tab2 = new Array(5); // 5 elementow tablica bez deklaracji wartosci elementow var tab3 = new Array(1,2,3,4,5); // tablice nie maja ograniczenie na typ a wiec mozna: var tab4 = new Array(2001, "Marcin", "Zielinski", 30, 5.0); 7) Pętle wyliczeniowe: Dzięki pętlom można wyłuskiwać informacje np. z tablic lub obiektów. // standardowa petla for for(n=0; n < 5; n++){ document.write(n); document.write("<hr/>"); // petla for-in - wyliczanie wszystkich elementów var tablica; tablica = new Array("a","b","c","d","e"); for (n in tablica){ document.write(n); document.write(tablica[n]+"<br/>");

8 W pętli for-in rolę indeksu pełni zminna n, dzęki której następuje iterowanie po kolejnych elementach tablicy. Uwaga w odróżnieniu od PHP tam konstrukcja wyglądała następująco a zmienna n miała inne znaczenie: // petla for-each - wyliczanie wszystkich elementów $a = array(1, 2, 3, 17); // deklaracja tablicy $i = 0; // zmienna pomocnicza dla ilustracji foreach ( $a as $v ) { echo "\$a[$i] => $v.\n"; $i++; W przypadku PHP w konstrukcji pentli pojawiała się zmienna która przechowywała bezpośrednio wartość elementu tablicy a nie indeksu. 8) Tablice asocjacyjne: Tablice asocjacyjne to tablice które nie sa numerowane indeksem naturlanym tylko dowolnym kluczem: // - przykład 1 var tablica = new Array() tablica['imie'] = "Jan"; tablica['nazwisko'] = "Kowalski"; tablica['pesel'] = " "; Pzypisanie wartości do nieistniejącej właściwości obiektu nie skończy się błędem ale zostanie utworzona nowa właściwość obiektu i przypisana zostanie do niej wartość. // - przykład 2 var tab = new Object(); tab["ala"] = "kot"; tab["pi"] = ; document.write(tab5["ala"] + "<br>" + tab5["pi"]); document.write("<hr/>"); var tablica = new Object(); tablica["ala"] = "kot"; tablica["pi"] = ; for (var klucz in tablica) document.write(klucz + ": " + tablica[klucz] + "<br>"); 9) Funkcje i metody: Definiowanie funkcji przebiega w podobny sposób jak w językach kompilowalnych z tym że

9 w JavaScript funkcje nie mają określonego typu oraz nie musza zwracą wartości (chociaż moga). // definiowanie funkcji function Wypisz(imie){ document.write("witaj "+imie); Wypisz("Jan"); // funkcja która zwraca wartość function Dodaj(a,b){ return a+b; document.write(dodaj(5,7)); // konstruktor function Wspolrzedne(x,y){ this.x = x; this.y = y; // tworzenie obiektu klasy -> operator new var punkt = new Wspolrzedne(2,5); //odwolanie do pol obiektu przez. document.write("x: "+punkt.x+" Y: "+punkt.y); document.write("<hr/>"); // inny przyklad function NaEkran(){ document.write("wynik: "+this.a); function Potega(a){ this.a = a*a; this.wypisz = NaEkran; var zmp = new Potega(5); zmp.wypisz(); document.write("<hr/>"); Zadanie: Proszę napisać skrypt który w tablicy przechowuje informację o położeniu 3 obrazków na dysku. Następnie proszę napisać funkcje która będzie przy każdym załadowaniu strony lowowo pokazywała inny obrazek ze zdefiniowanej list. Obrazek proszę osadzić za pomocą elementu <img>. 10) Dziedziczenie prototypowe JavaScript jak już wielokrotnie wspominano jest językiem bezklasowym i nie przenosi typowego z języków kompilowalnych sposobu dziedziczenie. Sposób dziedziczenia w JS różni się od klasycznego podejścia a tym samym i w NODE.JS. Dziedziczenie w językach klasycznych ma przede wszystkim za zadanie umożliwiać wielokrotne wykorzystanie tego samego kodu: np.jeśli dwie klasy są podobne, należy określić tylko dzielące je

10 różnice. Po drugie dziedziczenie ma w sobie specyfikację typów co pozwala na zmniejszenie konieczności rzutowania, nadomiast JS nie posiada typów dlatego w tym przypadku mamy tzw. dziedziczenie prototypowe. W języku JavaScript (a tym samym we wszystkich środowiskach programistycznych opartych o ten język) dziedziczenie odbywa się w sposób prototypowy. Każdy obiekt w JavaScript można traktować jako prototyp który w dowolnym momencie można rozszerzać, a jego własności przekazywać (cedować) na inne dziedziczące obiekty. W takim podejściu obiekty dziedzicza po obiektach gdzie każdy obiekt posiada własność prototype object.prototype Właściwość prototype posiadają obiekty które są tworzone przez funkcję konstruktora. Jednocześnie sam prototyp jest obiektem. Często dziedziczenie w JS określa się mianem dziedziczenia opartego o instancje. var Obiekt = function() {; var o = new Obiekt(); console.log(o.czesc); Na tym etapie nie obiekt nie wie czym jest metoda/własność czesc. Do zmiany lub rozszerzenia utworzonego obiektu możemy użyć własności prototype (który też jest obiektem): object.prototype.nowa_wlasnosc Zatem poprzedni przykłąd możemy zmodyfikowac następująco: var Obiekt = function() {; var o = new Obiekt(); console.log(o.czesc); Obiekt.prototype.czesc = 'czesc'; // do tego momentu własność cześć console.log(o.czesc); // jest zdefiniowana Rozszerzamy istniejący obiekt o nowe własności: var Obiekt = function() {; var o = new Obiekt(); console.log(o.czesc); Obiekt.prototype.czesc = 'czesc'; console.log(o.czesc); var p = new Obiekt(); console.log(p.czesc); Obiekt.prototype.PowedzCzesc = function(){ console.log(this.czesc); o.powedzczesc(); p.powedzczesc();

11 Kolejny przykład: var Wspolrzedne = function(x,y){ this.x = x; this.y = y; this.dodaj = function(){ return this.x + this.y; ; ; var f = new Wspolrzedne(4,7); Wspolrzedne.prototype.pokazX = function(){ console.log(this.x); ; Wspolrzedne.prototype.pokazY = function(){ console.log(this.y); ; Wspolrzedne.prototype.pomnoz = function(){ return this.x * this.y; ; Wspolrzedne.prototype.pokazWynikDodaj = function(){ console.log(this.dodaj()) ; Wspolrzedne.prototype.pokazWynikPomnoz = function(){ console.log(this.pomnoz()) ; f.pokazx(); f.pokazy(); f.pokazwynikdodaj(); f.pokazwynikpomnoz(); 11) Callback (wywołania zwrotne) Z funkcjami zwrotnymi mieliśmy już styczność, ale przyjrzyjmy się im bardziej dokoładnie. Callback [wywołanie zwrotne] - jest to pojęcie które opisuje kod programu przekazany do funkcji w postaci argumentu, czekający na wykonanie w odpowiednim czasie (asynchronicznie). Przykład tworzenia i użycia wyowołań zwrotnych: function Komunikat(x,y, callback ){ console.log('wczytalem dwie liczby x= ' + x + ' i y= ' + y); if( callback ) { callback(x,y); function pomnoz(x,y){ var iloczyn = x*y; console.log('iloczyn: '+ iloczyn);

12 function dodaj(x,y){ var suma = x+y; console.log('suma: '+ suma); Komunikat(4,5,pomnoz); // rejestracja wywołania zwrotnego Komunikat(7,5,dodaj); Zadanie: Proszę zmodyfikowac przykłąd tak aby operacja sumowania wykonywała się najpierw a w drugiej koljności iloczyny mmimo że ich wywołania są w innej kolejności. Do tego celu można użyć metody settimeout( function(){, czas[ms] 12) Zdarzenia w JavaScript Zdarzenia są sygnałami generowanymi w chwili wykonywania ściśle określonych czynności. JavaScript dysponuje narzędziami do informowania o zdarzeniach oraz pozwala skryptom na obsługę konkretnych zdarzeń. Przykładowo, zdarzenia mogą się pojawić, gdy użytkownik postawi wskaźnik myszy na tekście hiperpołączenia, zmieni dane w formularzu albo gdy zostanie zakończone ładowanie strony. Nazwa Zdarzenia Opis abort Zachodzi, gdy użytkownik przerywa ładowanie obrazka. blur Zachodzi, gdy miejsce wprowadzania zostaje przesunięte do innego pola formularza lub okna. Click Zachodzi, gdy użytkownik kliknie na połączeniu lub elemencie formularza. Change Zachodzi, gdy zawartość pola formularza ulegnie zmianie. Error Zachodzi, gdy podczas ładowania strony lub obrazka wystąpi błąd. Focus Zachodzi, gdy miejsce wprowadzania zostaje umieszczone w polu. Load Zachodzi, gdy ładowanie strony zostanie zakończone. Mouseout Zachodzi, gdy użytkownik przesunie wskaźnik myszy poza tekst połączenia lub aktywny obszar mapy graficznej.

13 Mouseover Zachodzi, gdy użytkownik przesunie wskaźnik myszy poprzez tekst połączenia lub aktywny obszar mapy graficznej. Reset Zachodzi, gdy użytkownik zażąda wyczyszczenia pól formularza poprzez kliknięcie na przycisku Reset. Select Zachodzi, gdy użytkownik wybierze jedno z pól formularza. Submit Zachodzi, gdy dane z formularza zostaja wysłane (zazwyczaj po kliknięciu przycisku Submit). Unload Zachodzi, gdy użytkownik zmienia wyświetlaną stronę. Kiedy coś dzieje się na stronie WWW, przeglądarka generuje zdarzenie (z ang. event). Jako skutek, powstaje obiekt zdarzenia, który to zdarzenie opisuje. Jednocześnie, badane jest, czy istnieje procedura obsługi zdarzenia jeśli tak, jest wykonywana. Można zatem powiedzieć, że procedury obsługi zdarzeń są to pisane przez programistę skrypty, będące dodatkowymi argumentami określonych etykiet HTML. Te, tworzone przez programistę procedury obsługi wykonywane są w chwili wystąpienia odpowiedniego zdarzenia. Oto podstawowa składnia JavaScriptu, używana do definiowania procedur obsługi zdarzeń. <Znacznik Atrybuty ProceduraObsługi="JS_Program" > Przykład: <div onclick = " alert(przecież było napisane: nie klikać!); "> Nazwa zdarzenia Opis Elementy HTML obsługujące zdarzenie onabort ładowanie obrazu zostanie przerwane. img onblur element utraci fokus, np. gdy miejsce wprowadzania zostaje przesunięte do innego pola formularza lub okna. Większość elementów strony.

14 onchange element utraci fokus i jednocześnie zmieni się zawartość tego elementu (np. pola tekstowego). input, select, textarea onclick element zostanie klikniety. Większość elementów strony. ondblclick element zostanie dwukrotnie klikniety. Większość elementów strony. onerror przy ładowaniu obrazu wystąpi błąd. img onfocus element otrzyma fokus. Większość elementów strony. onkeydown zostanie naciśnięty klawisz klawiatury. Większość elementów strony. onkeypress klawisz klawiatury zostanie naciśnięty i puszczony. Większość elementów strony. onkeyup klawisz klawiatury zostanie puszczony. Większość elementów strony. onload przegladarka zakończy ładowanie strony lub ramki. body, frameset onmousedow n klawisz myszy zostanie naciśnięty nad elementem. Większość elementów strony. onmousemov e kursor myszy jest przesuwany nad Większość elementów

15 elementem. strony. onmouseover kursor myszy wejdzie w obszar elementu. Większość elementów strony. onmouseup klawisz myszy zostanie zwolniony nad elementem. Większość elementów strony. onreset formularz zostanie zresetowany (np. przez kliknięcie przycisku reset). form onresize zmieni się rozmiar okna. body, frameset onselect fragment tekstu zostanie zaznaczony. input (text, textarea) onsubmit formularz zostanie wysłany (np. przez kliknięcie przycisku submit). form onunload przegladarka usunie bieżący dokument. body, frameset Przykład zdarzenia onchange : <INPUT TYPE="text" SIZE="8" value="0" onchange=" if(parseint(this.value)<=5) { alert('proszę podać liczbę większą od 5!'); "> Słowo kluczowe this odnosi się tutaj do aktualnego obiektu. W rozważanym przykładzie tym obiektem jest bieżące pole formularza (które to pole jest jednocześnie obiektem i właściwością obiektu wyższego rzędu formularza). Przykład zdarzenia onclick na elemencie <div>:

16 <div id="datadiv" style="background-color:silver;width:200px;heigth:30px; text-align:center;" onclick=" alert('kliknąłeś w element strony!'); " > Ten sam przykłąd tylko z rozbudowaną funkcjonalnością: <script> function datadivclick() { var datadiv = document.getelementbyid("datadiv"); datadiv.innerhtml = "Warstwa została kliknięta."; </script> <div id="datadiv" style="background-color:silver;width:200px;heigth:30px; text-align:center;" onclick=" datadivclick(); " > Przykład utworzenia linku na zdarzeniu onclick : <p style="cursor:pointer;" onclick=" location.href=' "> Witryna Wydziału Fizyki, Astronomii i Informatyki Stosowanej </p> 13) Emulowanie zdarzeń: Emulowanie zdarzeń może się okazać przydatne, gdy np. trzeba wysłać formularz bez konieczności proszenia użytkownika o kliknięcie na przycisku Submit lub gdy trzeba np. zmienić miejsce wprowadzania informacji w zależności od czynności podejmowanych przez użytkownika. I tak, po wypełnieniu formularza, użytkownik mógłby kliknąc na przycisk Zamów, co powinno wywołac odpowiedni skrypt sprawdzający, czy fomularz jest poprawnie wypełniony. Dopiero pozytywny wynik tego sprawdzenia generowałby (emulowałby) zdarzenie submit w celu ostatecznego wysłania danych z formularza do serwera. Poniżej zestawiono listę najczęściej wykorzystywanych funkcji, dostępnych w JavaScripcie, emulujących zdarzenia: blur() click() focus() reset() select() submit() Przykład emulowania zdarzenia click :

17 <form> <input type="checkbox" id="mycheck" onmouseover=" myfunction() " onclick=" alert('kliknąłeś mnie')" > </form> <script> function myfunction() { document.getelementbyid("mycheck").click(); </script> Zadanie: Prosze napisać skrypt, który będzie za pomoca zdarzenia onload elementu <body> losowo otwierał stonę internetową o okreslonym adresie URL (prosze zdafiniowac przynajmniej 4 takie adresy). Adresy prosze trzymac w tablicy, a realizację otwarcia strony wykonać za pomocą metody window.open(array[], string);. 14) Wprowadzenie do formatu JSON JSON czyli z ang. JavaScript Object Notation (Notacja Obiektowa JavaScriptu), to tekstowy format wymiany danych podobny funkcjonalnie do XML-a, oparty na literałach obiektowych JavaScriptu. Definicyjnie JSON należy on do samego JavaScriptu i w zasadzie jest jego podzbiorem, ale ze względu na tekstowy charakter jest przenaszalny i niezależny oraz może zostac wykorzystany w każdym języku programowania. Format tekstowy (podobnie zresztą jak XML-a) zapewnia czytelność nie tylko dla parserów, ale również dla ludzi. Implemantacja i i użycie JSONa w większości języków jest ułatwiona przez zastosowanie gotowych bibliotek parujących. JSON posiada sześć rodzajów wartości: 1. obiekty, 2. tablice, 3. łańcuchy, 4. liczby, 5. wartości logiczne (TRUE FALSE), 6. wartość NULL. Białe znaki takie jak tabulacje, spacje, przejścia do nowej linii mogą być umieszczne w przed lub po każdej wartości w JSON dla zachowania przejrzystości i łatwiejszego czytania i analizy plików. Natomiast podobnie jak w XML-u znaki te mogą zostać pominięte dla zmniejszenia kosztów przesyłania danych. Typowy obiekt w formacie JSON jest nieuporządkowanym zbiorem par klucz : wartość, gdzie klucz jest dowolnym łańcuchem tekstowym, natomiast wartość musi być jednym z dozwolonych typów wymienionych powyżej. Obiekty JSON można zagnieżdzać w dowolnym stopniu jednak z reguły dla zachowania przejrzystości stosowana jest zasada im bardziej płaska struktura tym lepiej. Jednak nie w każdym przypadku i dla wszystkich zastosowań jest to możliwe do utrzymania. Format zapisu obiektu w formacie JSON jest anstępujący: { klucz-json : wartość-json Natomiast tablica w formacie JSON jest uporządkowanym ciągiem wartości które znów mogą byc dowolnego typu włącznie z obiektami i tablicami. Format zapisu tablic w JSON jest następujący:

18 [ wartosc1, wartosc2,, wartoscn ] Łańcuchy w JSON są ogranicozne znakami podwójnego cudzysłowu łańcuch, z zachownaiem znaku specjalnego ukośnika \ dzięku któremu możemy zapisywań inne znaki specjalne. Natomiast liczby w JSON zapisywane są w formacie JavaScvriptu, z zastrzeżeniem że w liczbach całkowitych nie można na początku podawać zera poniewąż wtedy może ona zostać potraktowana jako zapis liczby w formacie ósemkowym. Pierwszy przykład zapisu danych w formacie JSON: { first : Jan, last : Kowalski. born : 1980, address : ul. Reymonta 4 W formacie XML dane te wyglądały by następująco: <?xml version='1.0' encoding='utf-8'?> <person> <first>jan</first> <last>kowalski</last> <born>1980</born> <address>ul. Reymonta 4</address> </person> Do analizy struktury danych zapisanych w formacie JSON można uzyć przegląderek online np: 1) 2) Inny przykład teraz z tablicą obiektów: { samochod : [ { Marka : VW, Model : Golf, Rocznik : 1999, { Marka : BMW, Model : S6, Rocznik : 2007, { Marka : Audi, Model : A4, Rocznik : 2009 ] Te same dane w formacie XML:

19 <?xml version="1.0" encoding="utf-8"?> <KOMIS> <Samochod> <Marka>VW</Marka> <Model>Golf</Model> <Rok>1999</Rok> </Samochod> <Samochod> <Marka>BMW</Marka> <Model>S6</Model> <Rok>2007</Rok> </Samochod> <Samochod> <Marka>Audi</Marka> <Model>A3</Model> <Rok>2009</Rok> </Samochod> </KOMIS> Kolejny przykład: { "id": 10, "tytul": "Podstawy fizyki wysokich energii", "autors": [ "D. Perkins", "J.A. Zakrzewski" ], "roczniki": [ 1967, 1984, 1985, 1989, 2005 ], "wypozyczony": true ZADANIE: Proszę przygotować plik JS zawierający dowolne dane. Dane docelowo można zapisać w pliku o rozszerzeniu.js 15) Biblioteka jquery ( ) - wprowadzenie Biblioteka napisana w języku JavaScript o lekkim charakterze, obsługująca przestrzenie nazw z mechanizmem łatwej rozszerzalności umożliwiająca manipulowanie elementami struktury DOM (Document Object Model). Najnowsze wydanie stabilne: jquery ( z maja 2016 r.) Biblioteka występuje w 2 wersjach: a. normalnej - b. skompresowanej - Dla zwiększenia wydajności aplikacji lepiej używać wersji (b). Opcjonalnie można używac wersji udostępnianej na zewnętrznym serwerze np. Aby dodać funkcjonalności biblioteki jquery do naszej aplikacji, musimy ją tą bibliotekę jako skrypt używając znaczników <script>:

20 <!DOCTYPE html> <html> <head> <title>pierwsza strona z jquery</title> <script type= text/javascript src= jquery min.js ></script> </head> <body> <h1>testujemy bibliotekę jquery</h1> </body> </html> Pierwszą funkcją ją możemy napisac jest wyświetlenie komunikatu: <head> <title>pierwsza strona z jquery</title> <script type= text/javascript src= jquery min.js ></script> <script type= text/javascript > $(document).ready(function(){ alert( Pierwsza operacja jquery ); ); </script> </head> Zaprezentowana konstrukcja: $(document).ready( ); tworzy nowy obiekt na podstawie argumentu document i wykonuje na nim metodę ready(). Jest to skrótowy zapis składni jquery gdzie znak $ wskazuje na przestrzeń nazw jquery. Konstrukcja ta w wersji pełnej wygląda nasępująco: Dodatkowo metoda ready() jest tak naprawde funkcją obsługi zdarzenia ready, oznaczająca załadowanie całego dokumentu hipertekstowego. Natomiast funkcja która jest przekazywana jako argument funkcji ready() jest tzw. funkcją anonimową, (bez nazwy) i w tym konkretnym wypadku pełni rolę wywołania zwrotnego tzw. callbacka. Jako że większość, metod jquery chemy wykonywać po załadowaniu dokumenty hiperteksotwego można tą konstrukcję skrócić jeszcze bardziej do: $(function(){ alert( Pierwsza operacja jquery ); ); Funkcja ta realizuje proste wyświetlanie komunikaty alert(). 16) Selektory i zdarzenia w jquery Biblioteka jquery wspiera operacje pozwalające na manipulowanie struktura drzewa DOM. Aby operacje te mogły być wykonywane musimy określić które elementy drzewa DOM mają zostać zmodyfikowane. W jquery robimy to stosując te same selektory co w przypadku arkuszy styli CSS. Przykłady:

21 $( div ) wybiera <div> </div> $( h1 ) wybiera <h1> </h1> $( #tresc ) wybiera <div id= tresc > </div> $(.tresc ) wybiera <div class= tresc > </div> Zatem można poruszać się po drzewie wykorzystując te same własności co w CSS. Dodatkowo obowiązują te same zależności dziedziczenia pomiędzy selektorami co w przypadku CSS. Poza selektorami dla w jquery możamy używać tych samych funkcji obsługi zdarzeń co w normlanym języku JavaScript umożliwiając aplikacji reagowanie na dziłania podejmowane przez użytkownika. Napopularniejszymi zarzeniami są: click(), mouseover(), mouseout(). Przykład zastosowania selektora i zdarzenia click: <script type= text/javascript > $(function(){ $( #button ). mouseover( function(){ alert( Klikam w link do strony UJ ); ); ); </script> To pokazuje jak w łatwy sposób można pisać sterowniki modyfikujące zawartość DOM. 17) Modyfikacja wyglądu strony za pomocą CSS W jquery możemy wpływać na wygląd styli CSS używając metody css() na dowolnym elemencie. Metoda ta przyjmuje jako dwa argumenty: cechę i wartość cechy którą chcemy nadać elementowi DOM (cecha i warość muszą być podane jako string). Przykład: <script type= text/javascript > $(function(){ $( span ). css( background, #CCC000 ); ); </script> Zatem nadaliśmy cechy pojedyńczemu elementowi. Możlwie jest również odczytywanie warości cech CSS elementów i nadawanie ich innym elementom: <script type= text/javascript > $(function(){ $( div#tresc ).mouseover(function(){ $( p ).css( background, $( this ).css( background-color )); ).mouseout(function(){ $( p ).css( background, white ); ); ); </script>

22 Ważne aby odczytywana cechy była cechą JEDNOWARTOŚCIOWĄ. Pojawijące się w tym kontekście słowo kluczowe this wskazuje na element drzewa który wywołał funkcję obsługi zdarzenia mousover(). Możemy poszczególnym elementom nadawać cechy CSS dodając ich do odpowiednich klas lub usuwając je z nich: <style type= text/css >.wazny { color: red; </style> <script type= text/javascript > $(function(){ $( li ).mouseover(function(){ $( this ).addclass( wazny ); ).mouseout(function(){ $( this ).removeclass( wazny ); ); ); </script> Zatem możemy przygotować w CSS odpowiednie definicje reguł i w zależności od systuacji nadawać je elementom. W powyższym przykładzie widać również ważna cechę jquery, tzw. łancuch wywołań (omówiliśmy go na wykładzie)> 18) Ukrywanie elementów DOM W jquery możemy wykorzystać trzy metody do ukrywania i pokazywania elementów: hide(), show(), toggle(). Przykłady użycia: $(function(){ $( button#hide ).click(function(){ $( p ).hide(); ); $( button#show).click(function(){ $( p ).show(); ); ); To samo na jednym elemencie można uzyskać za pomocą metody toggle: $(function(){ $( button ).click(function(){ $( span ).toggle(); ); ); 19) Modyfikacja elementów DOM jquery został stworzony do modyfikacji elementów DOM. Dwom najprostszymi operacjiami jakie chcemy wykonywac jest dodawanie teksu i nowych znaczników.

23 $(function(){ $( div#tresc1 ).text( Nowa treść wpisana dynamicznie w jquery ); $( div#tresc2 ).html( Nowa treść wpisana dynamicznie w jquery ); ); Różnica polega na tym że metoda text() sparsuje wszystkie znaki specjalne i zamieni je na enecje HTML. $(function(){ $( div#tresc1 ).text( <span> To jest treść</span> ); $( div#tresc2 ).html( <span> To jest treść</span> ); ); Proszę przetestować działałanie obu metod. 20) Modyfikacja atrybutów elementów DOM jquery możemy również manipulować atrybutami konkretnych elemntów DOM, służy do tego metoda attr(). Przykłąd zastosowania: $(function(){ $( img ).attr( src, obrazek.png ); ); <img src= alt= obrazek />