Multimedia. Główne składowe DHTML a DHTML HTML. CSS (Cascading Style Sheets kaskadowe arkusze stylów) JavaScript

Wielkość: px

Rozpocząć pokaz od strony:

Download "Multimedia. Główne składowe DHTML a DHTML HTML. CSS (Cascading Style Sheets kaskadowe arkusze stylów) JavaScript"

Marcin Jastrzębski
7 lat temu
Przeglądów:

1 Multimedia DHTML mgr inż. Piotr Odya Główne składowe DHTML a HTML CSS (Cascading Style Sheets kaskadowe arkusze stylów) JavaScript 1

2 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

one atrybut NAME lub unikatowy identyfikator ID Style CSS - Cascading Style Sheets zasady stylu definiują układ

3 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

wyżej o ile nie nadano im oddzielnego formatowania Podział atrybutów styli wygląd czcionki i jej styl

4 Definicja stylu <H1 style="definicja style"></h1> <head> <style> [...] </style> </head> <link rel="stylesheet" type="text/css" href="formaty.css" title="nazwa"> 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

css" title="nazwa"> <style> @import url("adres arkusza"); </style> Budowa stylu Selektor { cecha1:

5 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

odpowiada za umieszczenie elementów na płaszczyźnie dokumentu absolute -umiejscawia dany blok w sposób bezwzględny relative

6 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

nazwaobiektu.właściwośćstylu document.layers["nazwaobiektu"].

7 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

all słowo kluczowe NazwaObiektu nazwa nadana danemu obiektowi style słowo kluczowe oznaczające, że zmieniane będą właściwości

8 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

0 Microsoftowa wersja nosi nazwę Jscript pełna niezależność od platformy Właściwości JavaScriptu interpretowany jest na

9 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

odgrywa rolę Struktura języka obiekty zgrupowane elementy strony tworzące strukturę odpowiadającą zawartości strony

10 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

dokument location : zawiera informacje na temat adresu (URL) aktualnie załadowanej strony document :

11 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

najwyżej okna przeglądarki Obiekt location przyporządkowany obiektowi window odwołanie wymaga podania

12 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

Obiekt document zawiera informacje na temat zawartości okna przykładowe pola danych:

13 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

systemie lub czynności wykonywanych przez użytkownika zdarzenia generowane przez poszczególne elementy kontrolne umieszczone na

14 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

$typów funkcji ani argumentów function zrob_cos (liczba) {$

15 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

Podobne dokumenty

Techniki Prezentacji Medialnych

Techniki Prezentacji Medialnych HTML i DHTML Plan wykładu zastosowanie HTML a do tworzenia multimediów podstawy HTML a obrazy, dźwięk i wideo na stronie style JavaScript PHP mgr inż. Piotr Odya piotrod@sound.eti.pg.gda.pl