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

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

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

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

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

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

Ś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

Język JavaScript – podstawowe właściwości (1) Wyróżnione typy danych: "number", "string", "boolean", "function", "object", "undefined". Możliwość sprawdzenia typu: funkcja string 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

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

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

Ł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

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

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

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) Wykonania cykliczne: setInterval i removeInterval 14

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

var, const, typeof, function; 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Pozwala na manipulowanie obiektami dokumentu: 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

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

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() cloneNode – zwraca referencję do (luźnej) kopii danego węzła, zawierającej atrybuty i – opcjonalnie – węzły potomne. 33

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

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

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

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