DOM DHTML JQuery2013

• DOM (Document Object Model)

• jQuery

• DHTML (Dynamic HTML)

K. Dziubich p.518

dziubkry@eti.pg.gda.pl

 static web page

 dynamic web page

Definicja DOM

Document Object Model

• Niezależna od platformy i języka konwencja

reprezentacji dokumentu HTML, XHTML oraz
XML i dostępu do jego treści w celu jej

modyfikacji.

• Obecnie: tworzenie, dodawanie, usuwanie,

modyfikacja węzłów (nodes) ich treści lub
atrybutów (w tym atrybutu style)

• (zespół klas DOM + API DOM).
• Dostępny również dla języków programowania

do obróbki plików XML np. Apache Xerces, MS
XML, biblioteka libxml2

/alternatywa parsery SAX/

DOM (Document Object Model)

• Do wyświetlenia strony przeglądarka nie

musi korzystać z modelu DOM, ale JS z
niego korzysta aby dostać się do treści
dokumentu;

• Przeglądarki wykorzystują różne silniki przy

wczytywaniu dokumentu do struktury
obiektów DOM; implementacja DOM różna
w różnych silnikach;

• Interfejs DOM nie jest częścią standardu

ECMAScript;

[Demo: javascript_DOM_przyklady]

Poziomy DOM

• „

poziom 0”- DOM Level 0: nie standard; użyty w

Netscape Navigator 3.0 ok. 1996 r.; skopiowany
przez innych dostawców przeglądarek; daje prosty
dostęp do elementów form, link, image

document.formName.inputName
document.forms[0].elements[0]

• „intermediate DOM” - od 1997 NN4.0 i IE 4.0 różne
i rozbieżne implementacje DOM tworzone
równolegle; daje wsparcie dla prostego DHTML

NN - > document.layers[] -
IE -> document.all[]

dalej dostępny dla wstecznej

zgodności narzędzi

Poziomy DOM

• „

poziom 1”- DOM Level 1: 1998 r. – dostęp do

treści dokumentu na zasadzie dostępu do węzłów i
ich atrybutów (modyfikacja CSS) dla dokumentów
HTML i XML;

IE 5.0 częściowo go wsparło

„poziom 2” – DOM Level 2: W3C 2000 r.
przeglądarki + języki programowania

np. getElementById()
Model obsługi zdarzeń
Wsparcie dla przestrzeni nazw XML
Wsparcie dla modyfikacji CSS

Poziomy DOM

• „

poziom 3”- DOM Level 3: W3C 2004 r. zawiera

specyfikacje:

• Core (W3C Recommendation 2004)
• Load and Save (serializacja do XML) (W3C

Recommendation 2004)

• XPath (W3C Working Group Note 26 February 2004)
• Views and Formating (W3C Working Group Note 26 February

2004)

• Requirements (W3C Working Group Note 26 February 2004 )
• Validation (W3C Recommendation 2004)
• Event (W3C Working Draft 07 September 2010 – Last Call)

Od 2005 spora część level 3 wspierana przez przeglądarki

• „poziom 4”- DOM level 4: draft ver. 4 od 12.2012

Typy węzłów

DOM Level 2

• Node.ELEMENT_NODE == 1
• Node.ATTRIBUTE_NODE == 2
• Node.TEXT_NODE == 3
• Node.CDATA_SECTION_NODE == 4
• Node.ENTITY_REFERENCE_NODE == 5
• Node.ENTITY_NODE == 6
• Node.PROCESSING_INSTRUCTION_NODE == 7
• Node.COMMENT_NODE == 8
• Node.DOCUMENT_NODE == 9
• Node.DOCUMENT_TYPE_NODE == 10
• Node.DOCUMENT_FRAGMENT_NODE == 11
• Node.NOTATION_NODE == 12

var node = document.documentElement.firstChild;
If (node.nodeType != Node.COMMENT_NODE)
alert("You should comment your code well!");

<body><p>Przykładowe węzły w<span

id=„skr”>DOM</span></p></body>

TYP węzła

Nazwa węzła

Wartość

węzła

Kolejność

w drzewie

1- Element

body

null

1 - Element

null

3 - Text

#text

Przykładowe

węzły w

1- Element

span

null

3 - Text

#text

DOM

[Demo wezly.html]

XHTML modyfikowany dynamicznie przez JS

Trzymajmy się standardów
– ograniczymy liczbę błędów

[Demo test_popr.xht w FF lub Operze]

Dostępność API DOM

Zestawienie dostępności funkcji API DOM w
różnych przeglądarkach:

http://www.quirksmode.org/dom/w3c_core.html

[demo testDOM_IE8_9.html

• Sprawdzać obsługę funkcji a nie wersje przeglądarki

–

if (document.layers){ …}

–

var iedom=document.all||document.getElementById

–

var ns4up = (document.layers) ? 1 : 0;

– Łapanie wyjątków gdy użyty element niedostępny w

przeglądarce

try { var b = document.getElementsByClassName("tu"); alert(b); }

catch (e) { alert(e.message);}

– Sprawdzenie dostępności funkcji

var hasVideo = !!(document.createElement('video').canPlayType);

//!! Zamienia wynik w wartość logiczną

if (hasVideo)

{ //możesz spokojnie używać znacznika video…… }

if ( typeof document.getElementsByClassName === "undefined"

)

{ .. Funkcja

nie jest zdefiniowana .. } else { b = document.getElementsByClassName("tu"); }

• Trudności z napisaniem uniwersalnego kodu

– pomocne frameworki języka JS :

Najczęściej wykorzystywane

wersje jQuery

Dokumentacja, przewodniki jQuery: docs.jquery.com

-> http://docs.jquery.com/Browser_Compatibility

http://trends.builtwith.com/javascript

http://

blog.builtwith.com/2011/10/31/jquery-version-and-usage-report

Używane wersje jQuery:

Popularne rozszerzenia jQuery:

jQuery

(http://jquery.com)

Programistyczna biblioteka JavaScript zaprojektowana do uproszczenia

tworzenia JS wykonywanych po str.klienta

•

Dostosowana do różnych przeglądarek

•

Ułatwia manipulację drzewem DOM



wybieranie elementów drzewa DOM,



ustawianie ich atrybutów, dodawanie, usuwanie

•

Ułatwia tworzenie animacji i efektów

•

Ułatwia obsługę zdarzeń

•

Ułatwia użycie AJAX-a

Oprogramowanie darmowe, open source
Wykorzystywane w dynamicznych stronach
HTML i aplikacjach webowych

(demo: dancing-menu, imagemenu, memory-game)

http://www.hscripts.com/scripts/jquery/

Wersja deweloperska a wer. minified

Deweloperska

•

jquery-1.8.2.js 261 kB

Minified

•

jquery-1.8.2.min.js 92 KB

(

function

( window, undefined ) {

// Use the correct document accordingly with window
argument (sandbox)

var

document = window.document;

var

jQuery = (

function

() {

// Define a local copy of jQuery

var

jQuery =

function

( selector, context ) {

// The jQuery object is actually just the i

nit constructor 'enhanced'

return

new

jQuery.fn.init( selector, contex

t );

// Map over jQuery in case of overwrite

_jQuery = window.jQuery,

(

function

(E,B){

function

ka(a,b,d){

(d===B&&a.nodeType===1){d

=a.getAttribute(

"data-

+b);

(

typeof

d===

"string"

){

try

{d=d===

"true"

true

:d===

"false

false

:d===

"null"

null

:!c.isNaN(d)?parseFloat(d):Ja.test(d)?

c.parseJSON(d):d}

catch

(e){}c.data(a,b,d)}

else

d=B}

return

nction

U(){

return

false

}

function

ca(){

return

true

}

function

(a,b,d){d[0].type=a;

return

c.event.handle.apply(b,d)}

function

Ka(a){

var

b,d,e,f,h,l,k,o,x,r,A,C=[];f=[];h=c.data(

this

.nodeType?

"events"

"__events__"

);

(

typeof

h===

"function"

)h=

h.events;

(!(a.liveFired===

this

||!h||!h.live||a.button&&a.ty

pe===

"click"

)){

(a.namespace)A=RegExp(

"(^|\\.)"

+a.namespace.

split(

"."

).join(

"\\.(?:.*\\.)?"

"(\\.|$)"

);a.liveFired=

this

;

var

J=h.live.slice(0);

for

(k=0;k<J.length;k++){h=J[k];h.origTy

pe.replace(X,

)===a.type?f.push(h.selector):J.splice(k--

,1)}f=c(a.target).closest(f,a.currentTarget);o=0;

for

(x=f.leng

th;o<x;o++){r=f[o];

for

(k=0;k<J.length;k++){h=J[k];

(r.select

or===h.selector&&(!A||A.test(h.namespace))){l=r.elem;e=

null

;

(h.preType===

"mouseenter"

h.preType===

"mouseleave"

){a.type=h.preType;e=c(a.relatedTarge

t).closest(h.selector)[0]}

(!e||e!==l)C.push({elem:l,handleO

bj:h,level:r.level})}}}o=0;

for

(x=C.length;o<x;o++){f=C[o];

(

d&&f.level>d)

break

;a.currentTarget=f.elem;a.data=f.handleObj.

data;a.handleObj=f.handleObj;A=f.handleObj.origHandler.apply(
f.elem,arguments);

(A===

false

||a.isPropagationStopped()){d=f

.level;

(A===

false

)b=

false

;

(a.isImmediatePropagationStoppe

d())

break

}}

return

b}}

function

Y(a,b){

return

(a&&a!==

"*"

?a+

"."

)+b.replace(La,

jQuery API

Użycie funkcji $ jest równoznaczne z użyciem

obiektu jQuery

Funkcja $ zwracająca obiekt jQuery, na którym

wykonuje się kolejne komendy

Każda z komend również zwraca obiekt jQuery

Wywołania komend można łączyć w łańcuchy komend

div

="mainDiv">

Litwo! Ojczyzno moja! ty jesteś jak zdrowie.

span

style

display

: none">

Komentarz 1

span

Ile cię trzeba cenić, ten tylko się dowie,

span

style

display

: none">

Komentarz 2

span

div

"#mainDiv"

)

.addClass(

"poem-text"

)

.children(

"p"

)

.addClass(

"poem-line"

)

.children(

span

)

.addClass(

"poem-comment"

)

.toggle(

fast

);

Przykład użycia

(test1.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Przyład testowy</title>

function dzialaj() {

$("#mainDiv").addClass("poem-text").children("p").addClass("poem-line").children("span").

addClass("poem-comment").toggle("slow"); }

</script>

</head>

<body>

<div id="

mainDiv

" onmouseover ="dzialaj()" >

<p>Litwo! Ojczyzno moja! ty jestś jak zdrowie.<span >Komentarz 1</span></p>

<p>Ile cię trzeba cenić, ten tylko się dowie...........<span style="display: none">Komentarz 2</span></p>

</div></body></html>

Selektory

div

="mainDiv">

div

Wewnętrzny div

div

class

="poem-line">

Stylowy div

div

title

="Tytuł">

Pierwszy akapit

Drugi akapit

Trzeci akapit

div

Bazują na selektorach z CSS 1-3
Pozwalają wybierać grupy elementów z drzewa DOM

Selektory

DIV id=mainDiv

DIV

DIV class=poem-line

P title=Tytuł

DIV

Child

DIV id=mainDiv

DIV

DIV class=poem-line

P title=Tytuł

DIV

"#mainDiv > *"

)

Descendant

DIV id=mainDiv

DIV

DIV class=poem-line

P title=Tytuł

DIV

"#mainDiv *"

)

Class

DIV id=mainDiv

DIV

DIV class=poem-line

P title=Tytuł

DIV

".poem-line"

)

Attribute

DIV id=mainDiv

DIV

DIV class=poem-line

P title=Tytuł

DIV

"[title]"

)

All

DIV id=mainDiv

DIV

DIV class=poem-line

P title=Tytuł

DIV

"*"

)

Element

DIV id=mainDiv

DIV

DIV class=poem-line

P title=Tytuł

DIV

"p"

)

Atrybuty i style

.addClass() , .removeClass() oraz .toggleClass()

Dodawanie, usuwanie, przełączanie klas

.css()

Dostęp do styli

.attr()

Dostęp do atrybutów

.val()

Dostęp do wartość np. texboxa

.text() oraz .html()

Dostęp do innerText i innerHtml

Trawersowanie DOM

.add()

Dodaje zbiór elementów do aktualnego zbioru

.children()

Wybiera dzieci każdego z elementów aktualnego zbioru

.find()

Wybiera potomków każdego z elementów aktualnego

zbioru

.each()

Pozwala wywołać funkcję na każdym z elementów

aktualnego zbioru

Zdarzenia

$(document).ready()

Po załadowaniu drzewa
Przed załadowaniem obrazków
Możliwość podpięcia z kilku miejsc (jak delegat)

$(element).load()

Po załadowaniu elementu
Dopuszczalne elementy:

Image
Script
Frame
Iframe
Window

Zdarzenia

Standardowe zdarzenia znane z aplikacji

desktopowych

.focus() / .blur()
.change()
.click()
.keydown() / .keyup()
.mousemove()

mousedown

(

function () {

$('#log').append('<div>Handler for .mousedown() called.</div>');

}

);

</script>

AJAX w jQuery

.ajax()

Wysyła asynchroniczne żądanie AJAX
Najbardziej rozbudowana funkcja

.get()

Wysyła metodą żądanie get

.post()

Wysyła metodą żądanie post

.load()

Pobiera zawartość strony i umieszcza ją we wskazanym

elemencie

Pluginy w JQuery

Przykład pluginu: http://sorgalla.com/jcarousel/
•

Pobrać i załączyć styl oraz js

•

Zbudować strukturę z listą grafik

<div id="plugin"><p>przykład wykorzystania pluginu http://sorgalla.com/jcarousel/ </p>
<ul id="mycarousel" class="jcarousel-skin-tango">

</ul></div>

•

Dodać funkcję js:

function mycarousel_initCallback(carousel) {…. }

•

Zdefiniować w js wystartowanie karuzeli

$(document).ready(function () { jQuery('#mycarousel').jcarousel({
auto: 2,
wrap: 'last',
initCallback: mycarousel_initCallback
});
});

Definicja

DHTML

• Dynamic HTML- określenie wykorzystania

jednocześnie zbioru technologii (HTML, CSS, JS,

DOM) w celu utworzenia interaktywnej i

animowanej strony webowej.

• DHTML pozwala za pomocą języka skryptowego

na zmianę wyglądu (formatowanie CSS), treści

(zawartość strony) i funkcjonalności strony po

tym jak strona taka zostanie załadowana i

wyświetlona bez dodatkowych żądań do strony

serwera

(Demo: noScript.html oraz bezSkryptuInaczej.html)

• Przy czym podstawowa treść/formatowanie

strony i funkcje JS operujące na tej stronie są

takie same dla kolejnych wywołań tej strony

Zastosowania DHTML

• Dostawianie nowych elementów treści w zależności

od wyboru użytkownika;

• Animowane teksty i rysunki według predefiniowanej

ścieżki;

• Przyciski zmieniające wygląd po ich wybraniu

(najechaniu na nie);

• Menu rozwijalne;

• Przechwycenie danych wprowadzonych przez

użytkownika do formy i przetworzenie

– podjęcie określonej akcji zależnej od wyniku

przetworzenia,

– prośba o poprawienie danych błędnych przed

wysłaniem do serwera.

•

załączone przykłady JS + DOM różnych poziomów

(

javascript_DOM_przykłady

) z różnym poziomem zadbania o

prawidłową obsługę skryptów w różnych przeglądarkach

IE 9 Narzędzia Deweloperskie

Debugowanie JS (w IE 9)

Klasyfikacja stron webowych z

uwagi na złożoność

Statyczna strona

(static web page)

Użytkownicy żądający danego zasobu np.
http://www.eti.pg.gda.pl/index.html
w różnych punktach czasowych otrzymują zawsze
taką samą treść w takiej samej formie tak, jak
została zapisana w żądanym zasobie
(o ile w danym przedziale czasowym źródła tego
zasobu nie zostały zmodyfikowane).

np. pliki .html (+.css, .js) do pobrania ze strony
serwera z wykorzystaniem protokołu HTTP.

Dynamiczna strona

(dynamic web page)

Dla każdego żądania klienta zawartość strony i/lub jej
układ jest przygotowywany na nowo w oparciu o aktualne
informacje (np. z bazy, plików xml).
Generowana zawartość może być zależna od specyficznych
zmiennych np. IP (inne reklamy), licznika wywołań strony,
bieżącego czasu (inne formatowanie CSS), interakcji
użytkownika (wyświetlana tylko podgrupa produktów), jego
identyfikatora (złożone zamówienia) lub ich kombinacji.

-Wykonane przez skrypty strony serwera (PHP, Perl, JSP,
ASP.NET) zanim zawartość zostanie odesłana do klienta.

• jquery.com

• Lynn Beighley: „jQuery for dummies”; Wiley 2010;

isbn:978-0-470-58445-3

• 1500+ Best Jquery Plugins & Tutorials: http://www.jqueryrain.com/

•

http://www.syncfusion.com/resources/techportal/ebooks: jQuery_Succinctly

• 15 Most Popular jQuery Plugins of June 2012 :

http://www.moretechtips.net/2012/07/15-most-popular-jquery-plugins-of-june.html

• http://wowslider.com/jquery-slideshow-huge-demo.html

Literatura:

Wyszukiwarka

Podobne podstrony:
Dom dla burka
26 Dom
budujemy dom poradnik FIHDKP7AHWUJQT2P245F7GPT6ST3VMXRSU2MDZQ
dom energo
Elektronik Inteligentny dom Transmisja Danych Siecia id 158
Dom budowany na gruncie żony nie należy do męża
madry dom bogaty dom
KTO BUDUJE DOM egz probny test 2003, kartoteka
Projekt dom opis tech 01, UCZELNIA ARCHIWUM, UCZELNIA ARCHIWUM WIMiIP, Budownictwo, stare
DOM DZIECKA JAKO ŚRODOWISKO WYCHOWAWCZE, PSYCHOLOGIA, adopcja, dom dziecka, rodzina zastępcza, opiek
Przebieg zajec DZIEN DZIECKA MOJ DOM, klasa 0
DOM PRAWA kodeksy, STUDIA, WSB, prawo
!Opis struktury - dom dziecka, Praktyka - konspekty
konspekt E. lipska dom dziecka, POLONISTYKA
zgloszenie budowy, Budujemy dom, Druki,wnioski
Tematy, dom, STUDIA, semestr I, Filozofia
Przepisy na domowe środki czystości, hobby#=, Dom bez chemii

więcej podobnych podstron