Obiekty DOM.

Slides:



Advertisements
Podobne prezentacje
Implementacja procesora XSLT w języku Ocaml
Advertisements

Wprowadzenie do języka skryptowego PHP
XHTML Podstawowe różnice.
Polsko-Japońska Wyższa Szkoła Technik Komputerowych
Komponenty bazy danych Baza danych Jest to uporządkowany zbiór powiązanych ze sobą danych charakterystycznych dla pewnej klasy obiektów lub zdarzeń,
XPath XSLT – część XPath. XSLT – część 12 XPath – XML Path Language Problem: –jednoznaczne adresowanie fragmentów struktury dokumentu XML.
XPath. XSLT – część XPath. XSLT – część 12 XPath – XML Path Language Problem: –jednoznaczne adresowanie fragmentów struktury dokumentu XML.
11 XML a SGML. Standardy pokrewne.. 22 SGML a XML – różnice Deklaracja SGML: konfiguracja wyglądu znaczników, ich maksymalnej długości, itp., definicja.
XSL Extensible Stylesheet Language 6 listopada 2003.
OOPSmalltalk - stałe, klasy, bloki, instrukcje sterujące1 Komunikaty do self Odbiorcą jest obiekt, w którym wykonuje się ten komunikat Szukanie metody.
XML. Pierwszy dokument XML Witaj świecie! Elementy i atrybuty niezwykle oryginalny Witaj świecie! Druga możliwość: Witaj świecie!
Wykład 2 struktura programu elementy języka typy zmienne
Tworzenie stron w języku WML jest zbliżone do tworzenia stron w HTML. W obydwu przypadkach używa się do tego celu znaczników (tagów). Zadaniem znaczników.
Projektowanie warstwy serwera Współpraca z XML. Projektowanie warstwy serwera Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu.
Podstawy programowania II Wykład 2: Biblioteka stdio.h Zachodniopomorska Szkoła Biznesu.
System webowy do tworzenia kolektywnych prototypów aplikacji sieciowych i mobilnych Łukasz Przywarty
Tajemnice klawiatury.
Instytut Tele- i Radiotechniczny WARSZAWA
Pliki tekstowe. Operacje na plikach. mgr inż. Agata Pacek.
HTML DOM, XHTML – cel, charakterystyka
Wstęp do JavaScriptu Marek Magiera Październik 2003r.
ZESTAW DO NAUKI JAVASCRIPT
Otwieranie elementów w różnych ramkach
Wprowadzenie do HTML, CSS, JavaScript, PHP
TECHNOLOGIE INTERNETOWE
ANNA BANIEWSKA SYLWIA FILUŚ
Budowanie tabel i relacji
Systemy wejścia i wyjścia Michał Wrona. Co to jest system wejścia i wyjścia? Pobierania informacji ze źródeł danych, zdolnych przesyłać sekwencje bajtów,
XML – eXtensible Markup Language
Tworzenie Aplikacji Internetowych dr Wojciech M. Gańcza 8.
Programowanie w językach skryptowych
OBIEKTY Utworzenie obiektu var osoba = { „imię”:”Anna”,
Wprowadzenie do HTML Informatyka Cele lekcji: Wiadomości:
Projektowanie stron WWW
Aplikacje internetowe
Aplikacje internetowe
Wykład 3 Programowanie obiektowe. Dokument HTML składa się z obiektów (standardowych i utworzonych przez użytkownika). Głównym obiektem jest document,
J A V A S C R I P T Obiekty Opracowała: Anna Śmigielska.
Temat 4: Typy danych.
Projektowanie Aplikacji Internetowych
System plików.
Temat 3: Okno dialogowe.
Temat 11: Zdarzenia.
DOM Ewa Dukała Piotr Muszyński. DOM DocumentBuilder Factory Document Builder XML Data object obiectobject DocumentDOM.
Temat 4: Klasy i identyfikatory
CSS - Selektory. Selektory Selektorem można nazwoć dowolny element języka HTML, dla którego chcemy zdefiniować parametry formatowania. Wyróżniamy następujące.
Drzewo dokumentu html.
JQuery.
Formatowanie dokumentów
Iga Lewandowska I EMII MU
Adresowanie elementów struktury dokumentów - XPath.
Waldemar Bartyna 1 Programowanie zaawansowane LINQ to XML.
Kurs WWW – wykład 6 Paweł Rajba
Podsumowanie wiedzy MPDI2 sem.3 INFORMATYKA. tworzenie nowego pliku i katalogu, nawigacja po katalogach, listowanie zawartości katalogu, zmiana nazw,
Kaskadowe arkusze stylów CSS. Reguła CSS – definiuje sposób formatowania elementów na stronie WWW Części składowe reguły CSS selektor{ właściwość: wartość;
Aplikacje internetowe Posługiwanie się ramkami. Zastosowanie ramek Wprowadzenie obsługi ramek w przeglądarce Netscape 2.0 otworzyło nową erę dla twórców.
Wykład 2 Programowanie obiektowe. Programowanie obiektowe wymaga dobrego zrozumienia działania funkcji definiowanych przez użytkownika, w ten sposób będziemy.
Portal edukacyjny J A V A S C R I P T JĘZYK PROGRAMOWANIA STRON HTML Opracowała: Anna Śmigielska.
Wykład 5 Informatyka MPDI 3 semestr Język JavaScript.
Aplikacje internetowe XML Paweł Lenkiewicz. Aplikacje internetowe – XML2 eXtensible Markup Language Uniwersalny język opisu danych Często używany we współpracy.
ASP.NET Dostęp do bazy danych z poziomu kodu Elżbieta Mrówka-Matejewska.
P ASCAL Definicje, deklaracje, podstawowe instrukcje 1.
AJAX w PHP.
JavaScript.
SQL Server Analysis Services Action!
T. 18. E Proces DGA - Działania (operatorka).
Programowanie Obiektowe – Wykład 2
Aplikacje i usługi internetowe
Aplikacje i usługi internetowe
PGO - Projektowanie i implementacja pierwszych klas
Zapis prezentacji:

Obiekty DOM

DOM Document Object Model 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. 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ą. 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

Tworzenie obiektów modelu DOM <HTML> <HEAD>… </HEAD> <BODY> <FORM NAME=f1> <INPUT TYPE=TEXT NAME=p1> <INPUT TYPE=SUBMIT> </FORM> <IMG NAME=obraz SRC=”o.gif”> </BODY> </HTML> window.document.f1.p1 window.document.obraz

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ść

Obiekt – metody nazwaObiektu.nazwaMetody() 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(parametry)

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. <INPUT TYPE=BUTTON onClick=”window.alert(’hej!’)”> <BODY onLoad=”start()”>

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

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

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

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)

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 !!!

Przykład <p id="paragraf">Ten napis zawiera <strong id="bold"> pogrubiony tekst</strong></p> <p>Lorem ipsum</p> 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].getElementsByTagName('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  

document. getElementById('paragraf')[1] 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

Dziękuję za uwagę