Multimedia

Transkrypt

Multimedia

Multimedia
DHTML
mgr inż. Piotr Odya
[email protected]
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