Technologie Internetu wykład 3: Technologie dynamicznego HTML Piotr Habela

1. Technologie Internetu wykład 3:Technologie dynamicznego HTML Piotr Habela Polsko-Japońska Wyższa Szkoła Technik Komputerowych 1

2. W poprzednim odcinku… • WWW jako usługa o specyficznym wzorcu dostępu (brak własności lokalności odwołań); • HTTP jako prosty protokół udostępniania zasobów WWW: • bezstanowość; • żądania klienta zawierają adres zasobu URL; • przewiduje możliwość komunikowania parametrów. • HTML jako język opisu struktury dokumentu: => stopniowo uzupełniany o polecenia określające sposób wizualizacji. => dokumenty statyczne; • Wyróżnienie 3 kategorii dokumentów WWW: statycznych, dynamicznych i aktywnych. 2

3. Plan wykładu • Niedostatki tradycyjnych dokumentów WWW • Języki skryptowe w środowisku przeglądarki – możliwości • Przechowywanie stanu interakcji; cookies • Kaskadowe Arkusze Stylów (CSS) • Dynamic HTML (DHTML) • Document Object Model (DOM) 3

4. Niedostatki tradycyjnych dokumentów WWW • Bezstanowość protokołu HTTP; • Statyczny charakter dokumentów; • Ściśle splecione zawartość, opis struktury oraz opis sposobu wizualizacji dokumentu; => niemożność efektywnej personalizacji serwisu; => bardzo ograniczone możliwości autoryzacji użytkownika; => utrudnione zarządzanie stylem wizualizacji w przypadku większych dokumentów; 4

5. Język skryptowy JavaScript • Interpretowany język skryptowy o luźnej kontroli typów. • Stworzony w roku 1995 dla przeglądarki Netscape, pierwotnie pod nazwą LiveScript. Wprowadził podstawową funkcjonalność skryptową do ówczesnych przeglądarek. • Od początku planowany jako rozszerzenie możliwości stron WWW, przystosowane do użycia przez nieprofesjonalistów. Ważnym pierwotnie zakładanym zastosowaniem miała być interakcja z apletami Javy. • Przyjęty jako otwarty standard. Obecnie zaimplementowana (Netscape 6.0), wersja 1.5. W wydaniu Microsoft – występuje pod nazwą JScript (inna numeracja wersji – ww. wersji 1.5 odpowiada JScript 5.0, 5.5); brak istotnych rozbieżności dot. samego języka. • Ustandaryzowany jako ECMAScript przy wsparciu European Computer Manufacturers Association (ECMA) w roku 1997 (rok później jako standard ISO). • Dojrzałość języka zapewnia, że jest wspierany przez wszystkie nowoczesne przeglądarki, co czyni zeń jedno z najpopularniejszych narzędzi zapewniania interakcyjności stron WWW. 5

6. JavaScript - zastosowanie Łączenie skryptów z dokumentem HTML: określana jest reakcja na predefiniowane (dla poszczególnych rodzajów elementów strony) zdarzenia. Nie tylko wciśnięcie przycisku formularza, ale również bardzo liczne inne zdarzenia myszy, klawiatury oraz stanu otwierania okna. • Umożliwienie modyfikowania wyglądu dokumentu, czy też np. nawigowania w historii bieżącego okna; • Wykonywanie operacji zależnych od platformy (przeglądarka, system operacyjny); • Wykonywanie prostych obliczeń po stronie klienta; • Kontrola poprawności wypełnienia formularza; • Określanie aktualnej daty i czasu; • Generowanie lokalnie dokumentów HTML. 6

7. Środowisko działania skryptów • Środowisko jest ograniczone do manipulowalnych przez język elementów dokumentu oraz do standardowych obiektów przeglądarki (okno, pasek adresu, status, ramki). • Nie są możliwe tzw. operacje uprzywilejowane, jak dostęp do lokalnych plików czy drukowanie. • Rodzaje zdarzeń - dotyczące: • myszy: onMouseOver, onMouseOut, onClick, onMouseDown, onMouseUp; • klawiatury: onBlur, onFocus, onChange, onSelect, onSubmit; • inne: onLoad, onUnload, onError, onAbort; • Tradycyjnie dostępne następujące obiekty standardowe: -> window: location, frames, history, navigator, event, screen; document: links, anchors, images, filters, forms, applets, embeds, plug-ins, frames scripts, all, selection, stylesheets, body. 7

8. Język JavaScript – podstawowe właściwości (1) • Wyróżnione typy danych: "number", "string","boolean", "function", "object", "undefined". Możliwość sprawdzenia typu: funkcjastring typeof(zmienna_lub_stała). • Operatory logiczne, arytmetyczne i bitowe -> składnia podobnie jak w Javie; • Instrukcje warunkowe i pętle -> podobnie jak w Javie; • Możliwość deklarowania w kodzie zmiennych i tablic zmiennych; w dowolnym miejscu kodu: var zmienna = wartość; var zmienna; zmienna=wartość; var zmienna = new Array(); var zmienna = new Array(wartość1, wartość2); 8

9. Język JavaScript – podstawowe właściwości (2) • Dostęp do elementów tablicy; poprzez indeks – np.tab1[0]=”wartość”;Sprawdzenie rozmiaru – właściwość length:for(var i=0;i<tab.length;i++) … • Deklarowanie własnych klas – konstruktor:function Licznik(poczatek) { this.stan = poczatek;} • Metody własnych klas:function zwiekszaj(){ this.stan++; } • Parametry metody deklarowane samą nazwą (bez wskazania typu). Możliwa jest rekurencja. • Sprawdzenie wartości: • Przyrównanie do null; • Funkcja isNaN(wartość) stwierdza niezgodność z formatem liczb. 9

10. Włączanie skryptów do dokumentu • Deklaracje używanych funkcji i globalnych zmiennych umieszczane zwykle w nagłówku dokumentu HTML (tag. head ). Oznaczony następująco:<SCRIPT language=”JavaScript”> kod </SCRIPT> • Wstawienie kodu z osobnego pliku: <SCRIPT language=”JavaScript” src=”plik.js”> </SCRIPT> • Reagowanie na brak wsparcia dla JavaScript: • ukrywanie kodu w komentarzach, aby nie generował błędów w starych przeglądarkach:otwarcie komentarza HTML na początku wnętrza tagu SCRIPT; • Reagowanie treścią na brak wsparcia skryptów:tag <NOSCRIPT></NOSCRIPT> 10

11. Łańcuchy tekstowe i konwersje • Symbole specjalne oznaczane w łańcuch przez „\” • Tekst wytyczany cudzysłowami lub apostrofami • Możliwość konwersji na string: zmienna+=”” • Obróbka tekstu: • substring(indeksPocz, IndeksKońcowy) • indexOf(łańcuch) • escape(łańcuch), unescape(łańcuch) //URL encoding • Konwersje liczb: • Zmiana reprezentacji: (liczba)toString(podstawa) • Odzyskanie liczby: parseInt(łańcuch, podstawa), parseInt(łańcuch), parseFloat(łańcuch) 11

12. Jak przekazywać parametry? • Składowanie parametru w pliku cookie(zob. dalej) • Składowanie parametru w zmiennej innego okna lub ramki • Składowanie parametru w zmiennejtop.name (czyli w nazwie okna głównego) • Doklejanie parametru do wołanego URL(jako tzw. query string) 12

13. Obsługa okien i dialogów • Standardowe dialogi: • Prosty komunikat: alert(komunikat); • Potwierdzenie: boolean confirm(Tekst zapytania) • Prośba o wpisanie parametru:prompt(Tekst zapytania, wartość domyślna) • Okna przeglądarki: • Otwarcie: window window.open(adres, tytuł, opcje)np. 'left=50,top=50,width=500,height=400,toolbar=1,resizable=0‘ • Zmiana rozmiaru: resizeTo(szer, wys); • Pisanie wewnątrz okna: ok1.document.writeln(tekst); • Sprawdzenie stanu i zamykanie: właściwość closed, metoda close(). 13

14. Inne udogodnienia • Obiekt Math: • Liczne funkcje i stałe matematyczne; • Metoda random(): zmienna = Math.random(); • Obiekt Date: data, czas, możliwość walidacji daty: • konstruktor: Date(”December 31, 2000 23:59:59”) • albo numery roku, miesiąca, dnia; • Funkcje: • getDate() -> zwraca dzień miesiąca z podanej daty; • getDay () -> dzień tygodnia; • getHours (), getMinutes (), getSeconds (); • getMonth (), getYear (); • getTime () -> milisekundy; • Wykonanie z opóźnieniem: • setTimeout(‘operacja()’, milisekundy) 14

15. Obsługa formularzy • Dostęp do obiektów zgodnie z ich hierarchią, możliwy wg atrybutu name lub id danej kontrolki; • Użyteczne zdarzenia zdefiniowane dla elementów formularza: onBlur, onChange, onClick, onSelect • Obsługa zdarzenia onSubmit formularza: powinna być funkcją logiczną; tylko w wypadku wartości true wysyłanie jest kontynuowane. • Informacje dodatkowe lub kondensowane można „upakowywać” w pola ukryte (hidden) formularza. • Metody reset() i submit () pozwalają symulować odpowiadające im polecenia użytkownika. 15

16. Słowa zarezerwowane • var, const, typeof, function; • Praktycznie wszystkie słowa kluczowe Javy; • Nazwy obiektów w środowisku przeglądarki: np. location, navigator; • nazwy specjalne okien:top -> główne okno,self -> bieżące okno; 16

17. Ograniczenia JavaScript • Znaczne niezgodności modeli obiektów w poszczególnych przeglądarkach, która pojawiła się zwłaszcza w wersjach „4” – konieczność tworzenia wariantowego kodu; • Niemożność ukrycia kodu źródłowego: problem ochrony własności intelektualnej; • Niedostatki w zakresie międzyplatformowego debuggera; • Ograniczenia: • drukowanie i dostęp do lokalnych plików; • bezpośredni dostęp do plików na serwerze WWW. 17

18. Aplety • Trzy zasadnicze komponenty tej technologii: • język programowania; • system wykonawczy; • biblioteka klas; • Możliwość wykonywania operacji na plikach; • Możliwość cyfrowego podpisania apletu celem udostępnienia mu operacji uprzywilejowanych; • Większa skalowalność, możliwość tworzenia bardziej wyrafinowanego kodu; • Udostępnianie apletu: • bezpośrednie wskazanie w URL pliku .class zawierającego aplet; • osadzenie apletu w dokumencie HTML: <APPLET CODEBASE=”serwer/scieżka” CODE=”nazwaApletu.class”> 18

19. Cookies - zastosowanie • Plik tekstowy przechowywany po stronie klienta. Tradycyjny termin informatyczny oznaczający nieprzejrzysty element danych przechowywany przez pośrednika. • Zastosowanie: • kto odwiedza stronę? Ilu jest użytkowników, ilu nowych? • personalizacja strony; • zachowanie stanu współpracy ze stroną; • umieszczenie identyfikatora “koszyka”; • Ciasteczka stają się użyteczne dopiero przy wykorzystaniu skryptów (po stronie klienta lub po stronie serwera) • Zob. RFC 2965: HTTP State Management Mechanism 19

20. Cookies - ograniczenia • Oparcie na protokole HTTP => każda para żądanie – odpowiedź jest niezależna: • Ciasteczko może być założone, usunięte lub zmienione na skutek odpowiedzi serwera, zaś zawarta w nim informacja zostanie przekazana przy następnym wezwaniu. • Stąd dopiero przy następnym wezwaniu jesteśmy w stanie zorientować się, że użytkownik nie przyjmuje ciasteczek. • Serwer może zażądać tylko ciasteczka, które sam zapisał u klienta (zgodność domeny w żądaniach). • Pierwotna specyfikacja RFC 2109 określała ograniczenie na liczbę przechowywanych ciasteczek: maks. 300 łącznie, maks. 20 z danej domeny; • Główne ograniczenie – możliwość wyłączenia obsługi. 20

21. Parametry ciasteczka • Znaki niedrukowane, jak i pewne znaki zarezerwowane (”=” czy ”;”) muszą zostać zapisane w postaci heksadecymalnej, poprzedzonej symbolem „%”. Wymagane w treści ciasteczka, tak samo jak w URL (zob. funkcja escape(łańcuch) w JavaScript). • Własność expires – sposoby użycia: • odległa przyszła data => ciasteczko trwałe; • wybrana data przyszła => terminowe; • brak własności expires => do momentu zamknięcia okna przeglądarki; • data przeszła => usunięcie ciasteczka. • Własności path i server => ograniczenie dostępu do informacji zawartej w ciasteczku. Muszą być zgodne co do ostatnich dwóch lub trzech członów z adresem twórcy ciasteczka. W przypadku braku jest ustawiany domyślnie najbardziej specyficzny zakres. • security = secure => ciasteczko przesyłane tylko wtedy, jeśli ustanowione połączenie jest bezpieczne. 21

22. Obsługa cookie w JavaScript • Poprzez dostęp do właściwości document.cookie: jeśli mamy przygotowane parametry nazwa, wartość i datę ważneDo, to możemy ustawić: document.cookie = nazwa+"="+escape(wartość) + ";expire="+ ważneDo.toGMTString(); • Przy pobieraniu wartości użyteczne będą: • document.cookie.length; • Operacje na tekście:indexOf(tekst), indexOf(tekst, offset);substring(pocz, koniec), unescape(tekst). 22

23. Kaskadowe Arkusze Stylów (CSS) • Style wprowadzono w HTML v. 4. Zwykle przechowywane w arkuszach stylów: Cascading Style Sheets. • Motywacja: • Umożliwienie separacji stylów względem struktury i treści dokumentu. • Bardziej precyzyjna kontrola nad układami, fontami, kolorami, tłem, efektami typograficznymi; • Możliwość modyfikowania większego zbioru stron poprzez edytowanie pojedynczego dokumentu; b. ważne dla pielęgnacji! • Zapewnienie zgodności pomiędzy przeglądarkami; zapewnienie sprawnego ładowania stron. • Źródło specyfikacji = WWW Consortium: • CSS1 – rok 1996; CSS2 – rok 1998: rozszerzenia dla wydruków, i innych mediów (urządzenia dźwiękowe); ładowalne fonty; pozycjonowane elementy, formatowanie tabel; CSS3 – w przygotowaniu; 23

24. CSS - składnia • Uwaga! Definicje bardzo czułe na błędy składniowe! • Styl opisywanego elementu definiowany następująco:selektor {właściwość: wartość} np. body {color: green} • Dwuwyrazowe wartości wymagają ujęcia w cudzysłów; • Pakiety kilku właściwości są rozdzielane średnikami. • Grupowanie selektorów (np. h1, h2, p) = lista rozdzielona przecinkami. Oznacza zastosowanie do wymienionych elementów tego samego stylu. • Definicje dla złożeń selektorów = lista rozdzielona spacjami. • Dodatkowa klasyfikacja elementów -> klasy. Np. <p class=”tresc_polecenia”>…</p>opiszemy selektorem p.tresc_polecenia { … } 24

25. CSS - składnia • Dla klasy stosującej się do więcej niż jednego rodzaju elementów stosuje się składnię selektora: .nazwa_klasy • Można się też odwoływać do pojedynczego elementu w każdym dokumencie, poprzez podanie jego identyfikatora po symbolu „#”:np. dla tagu <h1 id=”bibliografia”>…</h1>Możemy określić indywidualny styl selektorem p#bibliografia • Całość umieszczana w tagu STYLE. Użycie komentarza celem ukrycia przed starszymi przeglądarkami. Np. <STYLE TYPE="text/css"><!--H1 { color: green; font-size: 37px; font-family: impact }P { text-indent: 1cm; background: yellow; font-family: courier }--> </STYLE> 25

26. Style – sposoby umieszczania w dokumencie • Osadzenie w dokumencie (wewnątrz nagłówka) – j.w. • Odnośnik do zewnętrznej definicji stylu w dokumencie: <LINK REL=stylesheet HREF="naszeStyle.css" TYPE="text/css"> • Import zewnętrznej definicji stylu do dokumentu (umożliwia kombinowanie deklaracji globalnych z lokalnymi): <STYLE TYPE="text/css"><!--@import url(naszArkusz.css);H1 { color: orange; font-family: impact }--> </STYLE> • Wpisywanie definicji stylu do poszczególnych tagów: <H1 STYLE="color: orange; font-family: impact">Treść nagłówka</H1> 26

27. CSS – właściwość „kaskadowości” • Definicje stylów posiadają określone (dość intuicyjne priorytety). Przypominają nieco przesłanianie definicji zmiennych w lokalnych podprogramach: • Style specyfikowane specjalnie dla danego tagu • Style osadzone w nagłówku • Style połączone referencją • Style zaimportowane • Style domyślne przeglądarki 27

28. CSS – ogólne możliwości • Definiowanie tła (własność background): grafika w tle, barwa tła; • Tekst (własność tekst): barwa, odstępy, zmiana wielkości liter, ozdobniki, wcięcia, wyrównianie; • Font (własność font): rodzaj fontu, rozmiar (procenty lub punkty), modyfikator (pochylenie itp.), wariant (np. wersaliki), rozciągnięcie tekstu; • Rodzaje obramowań (właściwość border); • Rozmiary marginesów elementy (właściwość margin); • Marginesy komórek (właściwość padding); • Wypunktowanie i numeracja (właściwość list-style); 28

29. Dynamic HTML • Nie jest to wyodrębniona technologia jak np. JavaScript czy ActiveX. • Definicja: zawartość HTML mogąca zmieniać swój wygląd już po załadowaniu do przeglądarki. • Umożliwia manipulację elementami dokumentu WWW wcześniej traktowanymi jako niezmienne. Na ogół pisane w JavaScript lub VBScript. Wyróżnik – dostęp skryptu do właściwości DHTML dostępnych w przeglądarkach 4 generacji, choć wówczas rozbieżności były frustrująco duże. • Podział odpowiedzialności: • HTML -> zawartość, kontekst, struktura; • CSS -> sposób prezentacji treści; • Za pośrednictwem DOM (zob. dalej) -> jednolity model obiektowy i API dla interakcji z HTML i CSS. 29

30. Document Object Model (DOM) • Ograniczenia tradycyjnych sposobów dostępu do obiektów dokumentu: • Znaczące niezgodności; • obsługa tylko wybranych typów obiektów (np. tablica document.images ). • Ponadto pierwotnie wspomniane elementy dokumentu były manipulowalne jedynie z poziomu JavaScript, zatem kod innych języków (np. aplety) musiał się doń odwoływać. • DOM udostępnia kompletny i ustandaryzowany model dokumentu jako strukturę zarządzaną przez przeglądarkę. Wprowadza również wsparcie dla zdarzeń myszy i klawiatury względem wszystkich elementów dokumentu. • Możliwości dla DHTML: • Dynamiczne modyfikowanie zawartości; • Dynamiczna zmiana stylów; 30

31. Interfejs DOM • Interfejs zdefiniowany w postaci CORBA IDL, jak również bezpośrednio dla Java oraz ECMAScript. • Pozwala na manipulowanie obiektami dokumentu: • posiadającymi właściwości; • mogącymi zawierać inne obiekty. => możliwość nawigowania w tej hierarchii, albo dostępu poprzez identyfikator (atrybut ID obiektu). • Właściwości są dostępne jako hierarchiczna struktura węzłów (nodes), najczęściej następujących typów: element, text, attribute. 31

32. Węzły DOM • Rodzaje węzłów: • Element: odpowiada tagowi lub parze tagów; może zawierać zagnieżdżone elementy (typu element) lub węzły tekstowe (typu text). • Text: odpowiada danym znakowym. Nie posiada elementów potomnych. • Attribute: określają atrybuty elementów. Wartością atrybutu jest zawsze string. Również nie zawiera elementów pochodnych. • Document: specjalizacja typu element. Stanowi pojedynczy korzeń dokumentu i udostępnia specyficzne operacje dla globalnego przeszukiwania. 32

33. Nawigacja w drzewie DOM • Posiadając referencję do węzła elementu, możemy nawigować używając właściwości: • firstChild, lastChild; • childNodes.length, childNodes[indeks] • parentNode; • nextSibling, prevSibling; • Można z nich budować wyrażenia ścieżkowe oraz dokonywać podstawień. • Możliwa również modyfikacja metodami: • insertBefore() • replaceChild() • removeChild() • appendChild() • cloneNode() 33

34. Dostęp do struktury dokumentu • JavaScript definiuje obiekt document, udostępniający właściwości elementu specjalnego Document. Document udostępnia dodatkowo następujące metody: • getElementById(ident) • getElementsByTagName(nazwa) -> zwraca tablicę elementów • createElement(…) // Uwaga! Na razie bez osadzenia • createAttribute(nazwa) // w dokumencie! • createTextNode(…) • Dla zapewnienia zgodności w dół udostępniane są również tradycyjne właściwości dokumentu np. tablice document.images, document.links czy właściwości document.bgColor document.fgColor, określane niekiedy jako DOM level 0. 34

35. Obsługa atrybutów • Można utworzyć atrybut dla dokumentu:a = document.createAttribute("nazwa"); • Następnie przypisać wartość: a.value="wartość"; • … oraz umieścić w wybranym węźle:w2.setAttributeNode(a); • Krócej: w2.setAttribute("nazwa", "wartość"); • Dostęp do atrybutu: • Bezpośrednio: w2.nazwa; • Poprzez metodę w2.getAttribute("nazwa"); • Usuwanie atrybutu: • w2.removeAttribute("nazwa"); • w2.removeAttributeNode("nazwa"); 35

36. Możliwości manipulacji stylami • Możliwość przypisania innego stylu lub klasy dokumentu; • Atrybut style dostępny jako obiekt, co pozwala na bardziej precyzyjną tj. wybiórczą manipulację. Np. zob. atrybut textAlign danego stylu: document.getElementById('sample2').style.textAlign = 'right'; • Konwencja nazwowa: w miejsce atrybutów stylu występujących w CSS jako człony połączone myślnikiem, tu stosuje się konwencję nazw znaną z Javy, tj. np: text-align => textAlign. • Można też wstawiać styl dla tagów, gdzie oryginalnie nie był określony. 36

37. Manipulacje węzłami tekstowymi • Modyfikacja zawartości tekstowej: przypisanie nowej wartości do odpowiedniej nodeValue węzła tekstowego – np. w2.firstChild.nodeValue ='Nowy, zmieniony tekst'; • Uwaga – otagowanie w HTML danego tekstu spowoduje rozbudowę logicznej struktury dokumentu. • Tworzenie węzłów tekstowych: var wTekstowy = document.createTextNode("nowy tekst"); • Dodanie tekstu wewnątrz danego tagu: wElementu.appendChild(text); • Usunięcie:if (el.hasChildNodes()) el.removeChild(el.lastChild); • Metoda normalize() -> skleja wszystkie wstawione przyległe fragmenty tekstu w jeden Text Node. • Analogicznie – metoda splitText(offset) pozwala na podzielenie jednego węzła tekstowego na dwa węzły tekstowe. 37