Transcript Document

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)
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
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:
1.
2.
3.
4.
5.
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
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()
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