Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Obiekty DOM.  stworzony przez W3C model ułożenia elementów na stronie - czyli hierarchia  sposób przedstawienia dokumentu.  zestaw metod i pól, które.

Podobne prezentacje


Prezentacja na temat: "Obiekty DOM.  stworzony przez W3C model ułożenia elementów na stronie - czyli hierarchia  sposób przedstawienia dokumentu.  zestaw metod i pól, które."— Zapis prezentacji:

1 Obiekty DOM

2  stworzony przez W3C model ułożenia elementów na stronie - czyli hierarchia  sposób przedstawienia dokumentu.  zestaw metod i pól, które umożliwiają odnajdywanie, zmienianie, usuwanie i dodawanie elementów.  jest podzielony na dwie części. 1. podstawowa (ang. core) to ogólny sposób reprezentowania dokumentów XML. Przedstawia dokument jako drzewo zawierające węzły (ang. node). Każdy węzeł może być elementem, fragmentem tekstu, komentarzem, instrukcją preprocesora (np. dołączonym fragmentem JavaScript) albo encją. 2. typowy dla przeglądarek DOM HTML. Jest to zestaw metod ułatwiających tworzenie dynamicznych stron oraz zapewniających kompatybilność wstecz. DOM HTML przedstawia dokument jako kilka kolekcji obiektów określonych typów (np. formularze, obrazki) DOM Document Object Model

3

4 Tworzenie obiektów modelu DOM … window.document.f1.p1 window.document.obraz

5 Obiekt – właściwości Właściwości określają pewne atrybuty obiektów. Właściwości można odczytywać i/lub zmieniać. Niektóre właściwości są tylko do odczytu lub tylko do zapisu!!!  Odczytanie wartości właściwości: nazwaObiektu.nazwaWłaściwości  Zmiana wartości właściwości nazwaObiektu.nazwaWłaściwości=wartość

6 Obiekt – metody Metoda definiuje akcje (czynności), jakie można wykonać na obiekcie. Wywołanie metody dla obiektu powoduje wykonanie akcji. Metodę można przyrównać do funkcji skojarzonej z obiektem.  nazwaObiektu.nazwaMetody()  NazwaObiektu.nazwaMetody(para metry)

7 Obiekt – zdarzenia Każdy obiekt może reagować na pewne zdarzenia. Obsługa zdarzenia polega na wykonaniu zdefiniowanych dla danego obiektu i zdarzenia instrukcji języka. 

8 Zdarzenia  onAbort  onBlur  onChange  onClick  onDrag  onError  onFocus  onKeyDown  onKeyPress  onKeyUp  onLoad onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp onMove onReset onResize onSelect onSubmit onUnload

9 Obiekt - window Wybrane właściwości: status, self, parent, name, opener, document Wybrane metody: open(URL, nazwaOkna, parametry) close() alert(tekst) confirm(tekst) zwraca true lub false prompt(tekst, wartpocz) zwraca wartość lub null

10 Obiekt - document Wybrane właściwości: bgColor, forms[ ], images[ ], title Wybrane metody: document.write(tekst) document.writeln(tekst) document.close()

11 Obiekt - ciąg tekstowy Właściwości obiektu string: length Metody obiektu string: string.toUpperCase() string.toLowerCase() string.charAt(pozycja) string.substring(n,m) string.substr(n,ile) string.indexOf(wzorzec,poz)

12 Nazwy obiektów i identyfikatorów Nazwy obiektów HTML nadawane są przez parametr NAME= dowolnego znacznika Nazwa identyfikatora:  musi zaczynać się od litery lub znaku podkreślenia _  może zawierać wyłącznie litery, cyfry i znak podkreślenia  wielkość liter jest rozróżniana !!!

13 Przykład Ten napis zawiera pogrubiony tekst Lorem ipsum document.getElementById('paragraf') //wskazuje na akapit document.getElementById('bold') //wskazuje na znacznik strong document.getElementsByTagName('p') //kolekcja akapitów document.getElementsByTagName('p')[0] //wskazuje na pierwszy akapit document.getElementsByTagName('p')[0].getElementsByTagNa me('strong')[0] //pobieramy pierwszy akapit, a w nim pobieramy pierwszy strong document.getElementById('paragraf').getElementsByTagName( 'strong') //kolekcja znaczników strong znajdujących się w akapicie paragraf

14 document.getElementById('paragraf')[1].firstChild //pierwsze dziecko 2 akapitu document.getElementById('cos').childNodes[1] //drugie dziecko elementu cos document.getElementById('cos').parentNode //element rodzic w którym leży element cos

15 Dziękuję za uwagę


Pobierz ppt "Obiekty DOM.  stworzony przez W3C model ułożenia elementów na stronie - czyli hierarchia  sposób przedstawienia dokumentu.  zestaw metod i pól, które."

Podobne prezentacje


Reklamy Google