Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk
Moduł 6 JavaScript w przeglądarce
Agenda Skrypty na stronie internetowej Model DOM AJAX
Skrypty na stronie internetowej Gdzie umieszczać skrypty? Znacznik <script>
Gdzie umieszczać skrypty? Skrypty JavaScript można umieszczać: w elementach HTML (przypisując skrypt bezpośrednio do zdarzenia w elemencie) w znaczniku script wewnątrz strony internetowej w osobnym pliku
Znacznik <script> Znacznik, w którym można umieszczać skrypty JavaScript <script type="text/javascript"> alert("ala ma kota"); </script> Może być umieszczony w dowolnym miejscu strony Renderowanie strony zostanie zatrzymane do momentu wykonania skryptu
Model DOM Czym jest model DOM? Pobieranie elementów modelu DOM Manipulowanie elementami modelu DOM Zdarzenia
Czym jest model DOM? DOM (ang. Document Object Model) Model umożliwiający obiektowy opis strony internetowej oraz podstawowe API pozwalające na wykonywanie operacji na strukturze dokumentu W modelu tym strona przedstawiana jest w postaci drzewa, gdzie: Węzłami wewnętrznymi, są zawsze tagi HTML Liśćmi drzewa są tagi HTML, lub elementy tekstowe
Czym jest model DOM? <html> <head> <title>przyklad</title> <style> h {color:red} </style> </head> <body> <h1>naglowek</h1> <p>jakis tekst <span>cos</span> <a href="adres"> link </a> </p> </body> </html> title head style document h1 body span p a
Czym jest model DOM? Każdy węzeł posiada m. in następujące właściwości i metody Właściwości attributes[] classname id innerhtml nodename nodetype nodevalue style Metody appendchild clonechild createtextnode hasattribute / hasattributes getattribute / getattributes haschildnodes insertbefore removeattribute removechild replacechild
Pobieranie elementów modelu DOM Do elementów modelu DOM możemy dostać się za pomocą jednej z trzech funkcji: document.getelementbyid document.getelementsbytagname document.getelementsbyclassname <h1 id="naglowek">zawartosc</h1> <script type="text/javascript"> var element = document.getelementbyid("naglowek"); </script> Dostęp do elementów modelu DOM możliwy jest dopiero po jego załadowaniu i wygenerowaniu
Manipulowanie elementami modelu DOM Elementy drzewa DOM można modyfikować (dodawać, modyfikować, usuwać) z poziomu JavaScript. Zamiast wykorzystywać jednak wbudowane funkcje JavaScript bezpośrednio wygodniej jest korzystać z bibliotek np. JQuery. <h1 id="naglowek">zawartosc</h1> <script type="text/javascript"> var element = document.getelementbyid("naglowek"); element.innerhtml = "Ala ma kota"; </script>
Zdarzenia (1) Zdarzenie - umożliwia obiektowi powiadomić inne obiekty o zmianie swego stanu. Procedura obsługi zdarzenia - funkcja, której kod ma się wykonać w momencie wystąpienia danego zdarzenia. Akcja domyślna - działanie, które przeglądarka normalnie wykonuje, w momencie wystąpienia danego zdarzenia. Akcje domyślne przypisane są do takich zdarzeń, jak: naciśnięcie linku przez użytkownika zatwierdzenie formularza przeniesienie "focus" do następnego elementu, gdy użytkownik naciśnie klawisz TAB.
Zdarzenia (2) Procedurę obsługi zdarzenia można przypisać bezpośrednio: element.onzdarzenie = proceduraobslugizdarzenia przykład: function linkonclick() { alert("komunikat"); } var link = document.getelementbyid("link"); link.onclick = linkonclick;
Zdarzenia (3) Z tradycyjnym modelem obsługi zdarzeń w JavaScriptwiąże się kilka problemów: brak możliwości przypisania więcej niż jednej funkcji do danego zdarzenia. w sytuacji, gdy użytkownik kliknie na link w stronie: function kliknieciediv() { alert("kliknieciediv"); } function kliknieciea() { alert("kliknieciea"); } <div click="kliknieciediv"> <a href="strona.html" click=" kliknieciea">link</a> </div>
Zdarzenia (4) Event listener Za pomocą tzw. "Event listeners" można, do pojedynczego elementu, przypisać wiele procedur obsługi zdarzeń. element.addeventlistener("zdarzenie", procobslugi, przechwytuj) function linkonclick() { alert("komunikat"); } var link = document.getelementbyid("link"); link.addeventlistener("click",linkonclick, false);
Zdarzenia (5) Do właściwości i metod obiektu, który wywołał dane zdarzenie, można dostać się za pomocą słowa kluczowego this. function onclick() { alert(this.innerhtml); return false; } var element1 = document.getelementbyid("link1"); var element2 = document.getelementbyid("link2"); element1.addeventlistener("click", onclick, false); element2.addeventlistener("click", onclick, false); <a href="http://onet.pl" id="link1">link do onet.pl</a> <a href="http://wp.pl" id="link2">link do wp.pl</a>
Zdarzenia (6) Zdarzenia load, DOMContentLoaded pozwalają na wykonywanie kodu w momencie całkowitego załadowania strony, załadowania drzewa DOM. <!DOCTYPE html> <html><head> <script type="text/javascript"> window.addeventlistener("load", function () { alert("onload"); }, false); document.addeventlistener("domcontentloaded", function() { alert("ondomloaded"); }, false); </script></head> <body> <h1 id="naglowek">naglowek</h1> <p id="tresc">tresc <img src="obraz.jpg" /></p> </body> </html>
Zdarzenia (7) Obiekt event umożliwia dostęp do dodatkowych informacji dotyczących się danego zdarzenia. Właściwości altkey, ctrlkey, shiftkey Bubbles button* cancelable charcode clientx, clienty keycode eventphase target type Metody preventdefault() stoppropagation()
AJAX Czym jest AJAX? XMLHttpRequest JSON
Czym jest AJAX? (1) AJAX = Asynchronous JavaScript and XML AJAX pozwala na tworzenie aplikacji internetowych w taki sposób aby odczucia użytkownika były jak najbardziej zbliżone do aplikacji desktopowych. W skład AJAX wchodzą: Standardowa reprezentacja internetowa HTML + CSS Document Object Model XML JavaScript XMLHttpRequest
Czym jest AJAX? (2) Klasyczny model aplikacji WWW KLIENT Interfejs żądanie HTTP HTML + CSS Serwer HTTP Systemy dodatkowe SERWER
Czym jest AJAX? (3) Interakcja synchroniczna KLIENT aktywność użytkownika aktywność użytkownika aktywność użytkownika CZAS SERWER przetwarzanie przetwarzanie
Czym jest AJAX? (4) Model aplikacji AJAX JavaScript KLIENT Interfejs HTML + CSS Silnik AJAX żądanie HTTP XML / JSON / HTML + CSS Serwer HTTP Systemy dodatkowe SERWER
Czym jest AJAX? (5) Interakcja synchroniczna aktywność użytkownika wejście wejście wejście KLIENT przetwarzanie wyjście wyjście wyjście CZAS SERWER przetwarzanie przetwarzanie
XMLHttpRequest(1) Obiekt XMLHttpRequest jest rdzennym elementem AJAX-u odpowiedzialnym za obsługę komunikacji klienta z serwerem. Pozwala na wysyłanie żądania HTTP lub HTTPS bezpośrednio do serwera HTTP, z poziomu języka skryptowego, oraz odbierania odpowiedzi również z poziomu języka skryptowego. XMLHttpRequest jest dostępny jako obiekt JavaScript.
XMLHttpRequest(2) Właściwości i zdarzenia Nazwa Opis status Kod odpowiedzi serwera statustext Opis statusu readystate Wartość liczbowa wskazująca obecny stan obiektu responsetext Odpowiedź serwera w postaci łańcucha tekstowego responsexml Odpowiedź serwera w postaci łańcucha XML Nazwa onreadystatechange Opis Funkcja obsługizdarzenia wywoływana, gdy zmieni się stan obiektu
XMLHttpRequest(3) Metody Nazwa abort() getallresponseheaders() getresponseheader("nazwa") open("metoda", "URL", asyncflag, "login", "haslo") send(treść) setrequestheader("nazwa", "wartość") Opis Anuluje obecne żądanie HTTP pobiera wartości nagłówków HTTP z odpowiedzi serwera zwraca wartośc nagłówka HTTP o podanej nazwie Inicjalizuje żądanie wysyła żądanie HTTP do serwera i odbiera odpowiedź Ustawia wartość nagłówka żądania HTTP
XMLHttpRequest(4) Właściwość readystate Kod Nazwa Opis 0 Niezainicjalizowany obiekt nie jest zainicjalizowany 1 Wczytywany obiekt wczytuje dane 2 Załadowany obiekt wczytał dane 3 Interaktywny możliwa jest interakcja z obiektem, choć może on nie być w pełni zainicjalizowany 4 Gotowy obiekt jest w pełni zainicjalizowany
JSON JavaScript Object Notation { "Imie": "Łukasz", "Nazwisko": "Bartczuk" } [{ "Imie": "Łukasz", "Nazwisko": "Bartczuk"}, { "Imie": "Piotr", "Nazwisko": "Dziwiński"}]