Multimedia DHTML mgr inż. Piotr Odya piotrod@sound.eti.pg.gda.pl Główne składowe DHTML a HTML CSS (Cascading Style Sheets kaskadowe arkusze stylów) JavaScript 1
DOM Obiektowy Model Dokumentu drzewiasta struktura obiektów utworzona przez przeglądarkę podczas ładowania strony, oddająca budowę dokumentu HTML umożliwia dostęp do wszystkich elementów/obiektów wyświetlanych na stronie o ile posiadają one atrybut NAME lub unikatowy identyfikator ID Style CSS - Cascading Style Sheets zasady stylu definiują układ dokumentu, typograficzne i projektowe cechy, niezależnie od definicji struktury dokumentu rezygnacja z półśrodków (<font face=...> itp.) 2
Właściwości stylów kaskadowość oznacza możliwość łączenia informacji na temat stylu z wielu źródeł dziedziczenie elementy leżące niżej w hierarchii dokumentu dziedziczą formatowanie elementów leżących wyżej o ile nie nadano im oddzielnego formatowania Podział atrybutów styli wygląd czcionki i jej styl tło kolory i obrazy wyrównanie tekstu odstępy wygląd obramowań inne (w tym skalowanie, zawijanie tekstu i listy) 3
Definicja stylu <H1 style="definicja style"></h1> <head> <style> [...] </style> </head> <link rel="stylesheet" type="text/css" href="formaty.css" title="nazwa"> <style> @import url("adres arkusza"); </style> Budowa stylu Selektor { cecha1: wartość1; cecha2: wartość2 } Przykład: TD, BODY, P, UL { font-size : 11pt; font-family : verdana, helvetica; font-weight: normal; color: #001000; background : #FDFFFD; text-align: center; } 4
Klasy i identyfikatory pozwalają na różnicowanie elementu w zależności od potrzeb.male {font-size: 10pt} <p class=male>tekst</p> #male {font-size: 10pt} <p id="male">tekst</p> Przykładowe właściwości position odpowiada za umieszczenie elementów na płaszczyźnie dokumentu absolute -umiejscawia dany blok w sposób bezwzględny relative położenie jest określane względem innych obiektów strony static umieszcza obiekty jeden za drugim inherit dana właściwość jest dziedziczona fixed rozwinięcie umiejscowienia bezwzględnego 5
Przykładowe właściwości z-index pozwala kontrolować położenie obiektów na osi Z (obiekt z największym indeksem znajduje się najwyżej) visibility określa czy dany obiekt jest widoczny visible hidden Dostęp do elementu w Navigatorze document.layers.nazwaobiektu.właściwośćstylu document.layers["nazwaobiektu"].właściwośćstylu document słowo kluczowe layers słowo kluczowe informujące, że będziemy zmieniać właściwości warstwy NazwaObiektu nazwa nadana danemu obiektowi WłaściwośćStylu właściwość CSS, którą chcemy modyfikować 6
Dostęp do elementu w IE document.all.nazwaobiektu.style.właściwośćstylu document.all["nazwaobiektu"].style.właściwośćstylu document.all słowo kluczowe NazwaObiektu nazwa nadana danemu obiektowi style słowo kluczowe oznaczające, że zmieniane będą właściwości stylu WłaściwośćStylu właściwość CSS, którą chcemy modyfikować JavaScript -definicja Łatwy do użycia obiektowy język skryptowy, zaprojektowany do tworzenia aplikacji łączących obiekty i zasoby zarówno w przeglądarce użytkownika jak i na serwerze WWW 7
JavaScript mechanizm pozwalający uaktywnić elementy dokumentów HTML wymyślony przez firmy Netscape i Sun zaimplementowany po raz pierwszy w przeglądarce Netscape 2.0 Microsoftowa wersja nosi nazwę Jscript pełna niezależność od platformy Właściwości JavaScriptu interpretowany jest na komputerze klienta przez przeglądarkę plik z kodem źródłowym nie jest poddawany kompilacji jest językiem bazującym na obiektach, nie pozwala jednak definiować nowych klas ani stosować mechanizmów obiektowych 8
Właściwości JavaScriptu odwołania do obiektów są sprawdzane dopiero w trakcie działania programu zmienne nie muszą być deklarowane ani nie trzeba podawać ich typów redukuje obciążenie serwerów stosunkowo prosty do opanowania wielkość liter odgrywa rolę Struktura języka obiekty zgrupowane elementy strony tworzące strukturę odpowiadającą zawartości strony właściwości zmienne przechowujące różne atrybuty obiektów metody specjalne funkcje wykonujące czynności związane z konkretnym obiektem 9
Hierarchia obiektów window parent, frames, self, top location history document form link anchor Dostępne obiekty window : najważniejszy obiekt bazowy związany z oknem, do którego załadowany jest dokument location : zawiera informacje na temat adresu (URL) aktualnie załadowanej strony document : zawiera właściwości i metody należące do danej strony history : zawiera adresy (URL) ostatnio ładowanych stron 10
Obiekt window każdemu otwartemu przez przeglądarkę oknu przyporządkowywany jest jeden obiekt window można się do niego odwołać przy pomocy zmiennych self lub window top jest odniesieniem do postawionego najwyżej okna przeglądarki Obiekt location przyporządkowany obiektowi window odwołanie wymaga podania obiektu do którego należy: odniesienie_do_okna.location.pole np.: parent.body.location.href="strona1.htm" 11
Obiekt history zawiera adresy wczytanych przez użytkownika stron zawiera tylko jedno pole: length przykładowe metody: back(), go(-3) każde okno posiada własną historię Obiekt document zawiera informacje na temat zawartości okna przykładowe pola danych: cookie, form, location, title przykładowe metody: open(), clear(), close(), write() 12
Inne obiekty string : umożliwia operacje na ciągach znaków Math : udostępnia dość bogatą bibliotekę funkcji i stałych matematycznych Date : umożliwia operacje na datach (w tym także i czasie) Zdarzenia specjalne akcje wyzwalane pod wpływem czynności zachodzących w systemie lub czynności wykonywanych przez użytkownika zdarzenia generowane przez poszczególne elementy kontrolne umieszczone na stronie łączone są logicznie z odpowiednimi zdefiniowanymi wcześniej funkcjami np.: click (OnClick), load (OnLoad), mouseover (OnMouseOver) 13
Wstawianie JavaScriptu <SCRIPT language="javascript"> <!-- [...] //--> </SCRIPT> <SCRIPT SRC="plik.js"</SCRIPT> Funkcje zasadnicza część języka nie deklaruje się typów funkcji ani argumentów function zrob_cos (liczba) { liczba=liczba++; return liczba; } 14
Do zapamiętania Co to jest DOM? Do czego służą style i jakie są ich najważniejsze właściwości? Czym jest JavaScript i jakie są jego właściwości? Scharakteryzuj hierarchię obiektów występującą w JavaScript 15