2.JAVAScript - obiekty HTML

Transkrypt

1 2.JAVAScript - obiekty HTML DOM model dokumentu HTML Dokument HTML składa się z obiektów (standardowych i utworzonych przez użytkownika). Głównym obiektem jest document, posiada strukturę drzewiastą składowych (obiektów wewnętrznychznaczników na stronie) tworzących tzw. DOM (Document Object Model). Jak widać elementy mają hierarchię, mogą się zagnieżdżać ("rodzice" i "dzieci"). Obiekt document Obiekt document jest ważnym obiektem JavaScript. Zawiera on informacje o bieżącej stronie i dostarcza wielu sposobów wyświetlania strony HTML. Składnia: document.właściwość lub document.metoda Wybrane właściwości: Właściwość Opis linkcolor bgcolor fgcolor lastmodified location title body domain links title URL Niektóre metody: Metoda write() writeln() określa kolor odsyłaczy określa kolor tła określa kolor tekstu zawiera datę i czas ostatniej modyfikacji dokumentu zawiera bieżący adres URL dokumentu zawiera zawartość znacznika <TITLE> zawiera element(obiekt) body zawiera nazwę domenową serwera, który załadował zawiera kolekcję wszystkich hiperłączy w dokumencie kolekcja zawiera atrybut length (liczba elementów kolekcji) zawiera tytuł dokumentu zawiera pełny URL dokumentu Opis wypisanie tekstów, wartości wyrażeń w dokumencie dostęp do elementów getelementbyid("id") dostęp do wszystkich elementów o konkretnej wartości atrybutu id, najczęściej jest jeden taki getelementsbytagname("znacznik") dostęp do wszystkich elementów o typie znacznika, np. P albo DIV getelementsbyname("nazwa") dostęp do wszystkich elementów o konkretnej wartości atrybutu name

2 createtextnode() createelement() tworzenie nowego elementu tworzenie węzła tekstowego tworzenie elementu Metodę write znamy wykorzystanie metody tworzenia elementów poznamy później. Przykład dostępu do właściwości, wyświetlania i zmiany wartości: <HTML><HEAD> <TITLE> Przykłady wykorzystania obiektu document</title></head> <BODY style="font-size:18px"> <P>Przykłady wykorzystania obiektu document</p> <P> Elementy na stronie</p> <A href=" <A href=" <PRE> <SCRIPT language="javascript"> //ustalanie właściwości dokumentu document.bgcolor="yellow"; document.linkcolor="red"; document.fgcolor="green"; //wyświetlanie właściwości document.writeln("data utworzenia:",document.lastmodified); document.writeln("url:",document.url); document.writeln("location:",document.location); document.writeln("tytuł:",document.title); //elementy kolekcji w pętli for (k=0;k<document.links.length;k++) document.writeln("link ",k,":",document.links[k]); </PRE></BODY></HTML> Dostęp do elementów strony Tworzenie referencji do istniejącego elementu (obiektu) zmiennej reprezentującej element na stronie - najwygodniej wykonać instrukcją JavaScript: var element=document.getelementbyid ("identyfikator"); pobierz element dokumentu o pewnym id Ważniejsze właściwości tak pobranego elementu: element.childnodes element.style element.attributes element.innerhtml kolekcja węzłów dla elementu - zawiera atrybut length (liczba elementów kolekcji) dostęp do ustawiania atrybutu style elementu kolekcja atrybutów elementu - mają właściwości length liczba atrybutów name nazwa [nr].value wartość atrybutu wartość węzła tekstowego Ważniejsze metody które wspomagają dołączanie do strony i usuwanie elementów poznamy je na następnym ćwiczeniu: element.appendchild(element_dołączany) dołączanie elementu do innego elementu (na końcu) element.clonenode(true) element.removechild(element_dziecko); element.replacechild(el_nowy,el_stary); powielenie elementu usunięcie elementu Atrybut style jest również obiektem, poniżej ważniejsze właściwości: podmiana elementu innym elementem

3 Właściwość backgroundcolor border borderstyle bordercolor borderbottom borderbottomcolor borderbottomstyle borderbottomwidth borderleft bordertop borderright margin marginbottom marginleft marginright margintop width height color fontfamily fontsize fontstyle fontweight textalign Opis działania ustalenie lub pobranie koloru tła elementu ustawienie (np."1px solid red") lub pobranie cech obramowania ustawienie (np. "solid") lub pobranie stylu obramowania ustawienie (np. "red") lub pobranie koloru obramowania dolna krawędź obramowania j.w. dolna krawędź obramowania kolor dolna krawędź obramowania kolor dolna krawędź obramowania kolor podobnie j.w. margines np. "12px 20mm 2 cm 20px" (górny prawy dolny lewy) szerokość elementu (np. "40px" lub "4cm") - ustalenie lub pobranie wysokość elementu jak wyżej - ustalenie lub pobranie ustawienie (np."14px solid red") lub pobranie koloru czcionki ustawienie (np."arial") lub pobranie rodziny czcionki ustawienie (np. "15px") lub pobranie rozmiaru czcionki ustawienie (np. "italic") lub pobranie stylu czcionki ustawienie (np. "bold") lub pobranie grubości czcionki ustawienie (np. "center") lub pobranie wyrównania tekstu Zauważmy, że cechy stylu mają podobne nazwy jak w CSS tylko zamiast myślnika mamy drugie słowo pisane dużą literą, np. w CSS "font-size", w JavaScript "fontsize". Nadając wartości cechom zawsze je traktujemy jako stałe tekstowe, czyli piszemy np: "12px" lub '12px '. Pełny opis dla JavaScript np. Pełny opis dla CSS np. Obsługiwane zdarzenia: Zapis reprezentujący wartość danej cechy stylu: zmienna_elementu.style.nazwa_właściwości Na przykład: var d1= document.getelementbyid("s1"); //pobranie elementu posiadającego id="s1" document.write(d1.style.fontsize); //wypisanie jego rozmiaru czcionki Na początek szerszy przykład do analizy: <HTML> <HEAD> <TITLE> Przykłady dostępu do elementów </TITLE> </HEAD> <BODY style="font-size:18px"> <P> Przykłady dostępu do elementów </P> <P> Elementy na stronie utworzone w HTML</P> <A href=" <A href=" <DIV name="xxx" id="ss" style="font-family:verdana, Arial, Helvetica, sans-serif;">napis 1</DIV> <DIV name="yyy" id="rr" style="color:red">napis 2</DIV> <HR /> <PRE> <SCRIPT language="javascript">

4 //pobranie referencji do pojedynczego elementu o znanym id var d1=document.getelementbyid("ss"); document.writeln("div id=ss ma:",d1.attributes.length," atrybutów"); document.writeln("div id=ss ma:",d1.style.fontfamily); //zmiana cechy stylu d1.style.fontsize="60px"; document.writeln("div ss ma teraz 60px czcionkę "); //inny sposób pobrania pewnej grupy elementów kolekcja DIV-ów var d2=document.getelementsbytagname("div"); var ile = d2.length; //ile jest elementów DIV document.writeln("drugi DIV ma kolor czcionki:",d2[1].style.color);// liczymy od 0, więc 1 to drugi document.writeln("drugi DIV ma tekst:",d2[1].innerhtml); document.writeln("dodajemy mu górną zieloną ramkę"); d2[1].style.bordertop="2px solid green"; document.writeln("w dokumencie znajduje się " + ile+ " elementów DIV"); //wyświetlenie wybranych atrybutów pętla for (var k=0;k<ile;k++) for (var m=0;m<d2[k].attributes.length;m++) if (d2[k].attributes[m].name=="id") document.write("div:",k,"-nazwa atrybutu ",m,":",d2[k].attributes[m].name); document.writeln("-wartość atrybutu:",d2[k].attributes[m].value); //znalezienie kolekcji elementów A var d2=document.getelementsbytagname("a"); var ile = d2.length;// ile ich jest document.writeln("w dokumencie znajduje się " + ile+ " elementów A"); //wyświetlenie wybranych atrybutów for (var k=0;k<ile;k++)//pętla po elementach for (var m=0;m<d2[k].attributes.length;m++) //pętla po atrybutach if (d2[k].attributes[m].name=="href") document.write("a:",k," Numer atrybutu:",m," Nazwa:",d2[k].attributes[m].name); document.writeln(" Wartość atrybutu:",d2[k].attributes[m].value); </PRE></BODY></HTML> Zadanie 1. Wykonać przykłady i zrozumieć kolejne operacje skryptu. Wykonać zmiany w skrypcie, np. wymusić zmianę tła elementu DIV, rozmiar czcionki, jej kolor, treść węzła tekstowego itp. 2. Sporządzić dokument HTML z kilkoma znacznikami, np. z obrazkiem i tabelą o 2 wierszach i 2 kolumnach. Nadać identyfikatory znacznikom oraz zdefiniować im wstępnie w atrybucie style kilka cech stylu i ich wartości. 3. Wyświetlić wybrane cechy w dokumencie z informacją który element, jaka cecha stylu i jaka jest jej wartość. 4. Nadać lub zmienić wartości wybranych cech stylu kodem JavaScript. 5. Spróbować zamknąć poszczególne składowe działania kodu JavaScript w ramach własnych funkcji oraz spróbować wykonać te funkcje przez obsługę umieszczonych na stronie przyci-

5 sków. Przykładowo: przycisk z napisem "Czerwona ramka" po kliknięciu wykonuje funkcję, w której kod ustala czerwoną ramkę dla jakiegoś znacznika, np. tabeli. 6. Wykonać prosty ruch obiektu HTML, np. obrazka (znacznik IMG) przy pomocy dwóch funkcji i dwóch przycisków, zmieniając funkcjami cechę stylu marginleft. Zarządzanie elementami strony Dla potrzeb skryptu JavaScript tworzymy zmienne referencji do elementu (znacznika HTML) zmienna ta ułatwia do niego dostęp. Dostęp do istniejącego elementu o znanym identyfikatorze: zmienna_ref=document.getelementbyid("identyfikator"); Dostęp do kolekcji elementów tego samego typu znacznika: zmienna_ref =document.getelementsbytagname("typ_znacznika") Tworzenie nowego elementu: zmienna_ref=document.createelement("typ_znacznika"); zmienna_ref=document.createtextnode("tekst"); Tak utworzone zmienne reprezentują element w skrypcie. Są one zmiennymi globalnymi, to znaczy są dostępne w całym skrypcie. Dla utworzenia zmiennych lokalnych używamy przed zmienną słowa kluczowego var (ang. variable): var zmienna=wyrażenie; Zasięg "widoczności" zmiennych wyjaśnia poniższy skrypt: <HTML> <HEAD> </HEAD> <BODY style="font-size:28px"> <PRE> <SCRIPT language="javascript"> // tworzymy dwie zmienne w części głównej skryptu globalną i lokalną z_g="globalna_zew";//globalna document.writeln("zmienna z_g jest typu ",typeof z_g); var z_l="lokalna_zew";//lokalna //wyświetlenie typu zmiennej document.writeln("zmienna z_l jest typu ",typeof z_l); //definicja funkcji function fun( ) //tworzymy dwie zmienne w "ciele" funkcji lokalną i globalną f_g="globalna_fun";//globalna var f_l="lokalna_fun";//lokalna document.writeln("<b>wewnątrz funkcji</b>"); document.writeln("z_g=",z_g); document.writeln("z_l=",z_l); document.writeln("f_g=", f_g); document.writeln("f_l=",f_l); //zmieniamy tekst zmiennej z_l z_l="nowa wartość zmiennej z_l - 'przesłonięta' " document.writeln("z_l=",z_l); //koniec definicji funkcji document.writeln("<b>przed wykonaniem funkcji</b>"); document.writeln("z_g=",z_g); document.writeln("z_l=",z_l);

6 fun( );//wykonanie funkcji document.writeln("<b>po wykonaniu funkcji</b>"); document.writeln("z_g=",z_g); document.writeln("z_l=",z_l); document.writeln("f_g=", f_g); //sprawdzenie czy istnieje zdefiniowany element document.writeln("zmienna f_l jest ", typeof f_l); if (typeof f_l == "undefined") document.writeln("po wykonaniu funkcji zmienna lokalna f_l definiowana w funkcji nie istnieje"); <PRE></BODY></HTML> Jak widzimy zmienne globalne i lokalne skryptu są dostępne wewnątrz funkcji, zaś zmienne lokalne utworzone wewnątrz funkcji nie są dostępne poza funkcją. Zwrócić uwagę na wykorzystanie słowa kluczowego typeof do ustalenia typu elementu (number, string, object, undefined itp.) Ważniejsze właściwości wykorzystywane do zarządzania strukturą strony element.childnodes kolekcja węzłów dla elementu - indeks od 0 element.style element.nextsibling element.parentnode dostęp do atrybutu style elementu następny węzeł sąsiadujący (też element) węzeł rodzica elementu (element) Ważniejsze metody document.getelementbyid("id") document.createelement("typ") document.createtextnode("tekst"); element.appendchild(element_dołączany) element.clonenode(true) element.removechild(element_potomny); element.replacechild(el_nowy, el_stary); element.insertbefore(el_nowy, element_pod) element.setattribute(nazwa, wartość) element.getattribute(nazwa) element.removeattribute(nazwa, wartość) pobranie elementu o danym identyfikatorze id utworzenie elementu o typie znacznika utworzenie węzła tekstowego dołączanie elementu do innego elementu (jako podrzędny, na końcu jeśli istnieją już inne podrzędne) powielenie elementu usunięcie elementu podrzędnego podmiana elementu podrzędnego wstawianie elementu przed innym podrzędnym ustawienie atrybutu elementu pobranie atrybutu elementu usunięcie atrybutu elementu Poniżej przykłady zastosowań powyższych właściwości i metod. Tworzenie nowych elementów Aby prawidłowo zarządzać strukturą elementów HTML, należy zwracać uwagę na wzajemną ich hierarchię według drzewa DOM. Tworzenie nowego elementu na końcu strony <HTML> <HEAD> </HEAD> <BODY style="font-size:28px">  <DIV id="div1">politechnika </DIV> <SCRIPT language="javascript"> //dostęp do element d1 = document.getelementbyid("div1"); //ustawianie parametrów stylu istniejącego DIV d1.style.color="red"; d1.style.fontsize="28px";

7 d1.style.border="4px solid blue"; d1.style.color="yellow"; d1.style.width="600px"; d1.style.marginleft="200px"; d1.style.background="green"; d1.style.textalign="center"; //tworzenie elementu - tworzymy drugi DIV d2=document.createelement("div"); //ustalamy style dla nowego DIV'a d2.style.border="4px solid red"; d2.style.margin="0px 100px 0px 100px"; d2.style.textalign="center"; d2.style.fontsize="32px"; d2.setattribute("id", "nowy"); document.writeln("atrybut id=",d2.getattribute("id")); d2.setattribute("id", "nowy"); //tworzymy węzeł tekstowy var t2=document.createtextnode("drugi DIV"); //dołączamy węzeł tekstowy do DIV'a d2.appendchild(t2); //dołączamy DIV na końcu strony dołączenie do BODY document.body.appendchild(d2); </BODY></HTML> Zadanie 1. Zmodyfikować przykład, by utworzenie drugiego DIV odbyło się na kliknięcie przycisku. Należy operacje tworzenia elementu i jego dołączania umieścić wewnątrz własnej funkcji np. o nazwie f1( ) następnie uruchamiać funkcję umieszczonym na stronie przyciskiem INPUT typu button. Zaobserwować, że wielokrotne kliknięcia tworzą nowe elementy. 2. Sprawdzić, że utworzenie węzła tekstowego możliwe jest także sposobem: document.getelementbyid(identyfikator).innerhtml="jakiś tekst" Tworzenie elementu potomnego do istniejącego elementu Zadanie Do poprzedniego skryptu dodać funkcję: function f2( ) //tworzymy akapit P p1=document.createelement("p"); p1.style.background="pink"; p1.style.marginleft="40px"; p1.style.marginright="40px"; // i tworzymy jego węzeł tekstowy var tp1=document.createtextnode("akapit potomny DIV1 - dziedziczy parametry czcionki po DIV"); //trzeba dołączyć węzeł tekstowy do akapitu p1.appendchild(tp1); // i dołączyć akapit do div1 d1.appendchild(p1); Uruchamiać funkcję f2( ) umieszczonym na stronie przyciskiem INPUT typu submit zaobserwować dziedziczenie parametrów czcionki od elementu DIV. Klonowanie elementu Zadanie

8 1. Do poprzedniego skryptu dodać funkcję: function f3( ) //klonujemy p1 jako p2 p2=p1.clonenode(true); //pobieramy jego pierwszy węzeł (tekstowy) y=p2.childnodes[0]; // i usuwamy go... p2.removechild(y); // tworzymy nowy jego węzeł tekstowy var tp2=document.createtextnode("sklonowany akapit - dziedziczy parametry czcionki po BODY"); // dołączamy węzeł tekstowy do akapitu p2.appendchild(tp2); //dołączamy akapit do strony na końcu body document.body.appendchild(p2); Uruchamiać funkcję przyciskiem INPUT. Zauważyć dziedziczenie parametrów czcionki po BODY, które jest nadrzędnym elementem dla drugiego DIV. 2. Umieścić na początku skryptu zapis ustalający czcionkę dla BODY. document.body.style.fontsize="60px"; Teraz nowy akapit dziedziczyć będzie nowy rozmiar czcionki. Zmiana tekstu dla węzła tekstowego Zmianę tekstu (węzła tekstowego) akapitu (lub innego elementu: DIV, TD itp.) można jak widać z powyższych przykładów wykonać metodą //pobieramy pierwszy potomny węzeł (tekstowy) akapitu (ustalona wcześniej zmienna p1). y=p1.childnodes[0]; //ustalamy jego nową treść y.nodevalue="tekst sklonowanego akapitu - jeszcze jeden"; lub prostszym sposobem: p1.innerhtml="nowy tekst" Sprawdzić działanie powyższych kodów. Wstawienie nowego elementu w dowolnym miejscu Dla powyższego zadania może być wykorzystana metoda: elementrodzic.insertbefore(nowyelement, danyelement) gdzie: nowyelement - element do wstawienia, danyelement element, przed którym nowyelement ma zostać wstawiony, elementrodzic - rodzic nowo wstawianego elementu. Wyjaśnia to poniższy przykład: <HTML> <HEAD> </HEAD> <BODY style="font-size:18px"> <P id="a">pierwszy akapit</p> <P id="b"> Drugi akapit </P> <INPUT type="button" id="przycisk" value="wstaw w środek" /> <SCRIPT language="javascript"> function wstawprzed() p2 = document.getelementbyid('b'); //pobieramy element -drugi akapit nowya = document.createelement("p"); nowya.innerhtml="tekst środkowego akapitu"; document.body.insertbefore(nowya,p2); //wstawiamy go przed p2 // koniec funkcji //pobieramy przycisk i przypisujemy mu zdarzenie onclick document.getelementbyid('przycisk').onclick = wstawprzed;

9 </BODY></HTML> Zwrócić uwagę na nową dla nas formę przypisania zdarzenia onclick do przycisku. Zadania 3. Sprawdzić powyższy kod wstawiania elementu przed element. 4. Dodać dodatkowy przycisk usuwający wybrany element - metoda removechild wykorzystywana w postaci: document.body.removechild(a1); gdzie a1 jest wyznaczoną uprzednio zmienną referencji do danego elementu (węzła). Sprawdzić, że odbywa się usunięcie węzła razem z węzłami potomnymi. 5. Utworzyć stronę, na której wstępnie utworzona jest tabela z jedną komórką (pamiętać o nadaniu znacznikowi tabeli i znacznikowi wiersza odpowiednich identyfikatorów). Kliknięcia umieszczonego na stronie przycisku mają powodować rozmnażanie komórek w wierszu. 6. Wypróbować samodzielnie metodę replacechild według własnego pomysłu. Przykład tworzenia tabeli <HTML><HEAD> </HEAD> <BODY style="font-size:18px"> <TABLE name="xxx" id="t1" style="margin-left:30px;border:1px solid black"> <TR id="w"></tr> </TABLE> <SCRIPT language="javascript"> function dodaj() var wiersz = document.getelementbyid("w");//referencja do obiektu id=w var kom=document.createelement("td") //styl komórki kom.style.border="2px solid red"; kom.style.textalign="center"; kom.style.fontsize="22px"; //tworzymy węzeł tekstowy var t3=document.createtextnode(wiersz.childnodes.length+1); //dołaczamy do tr'a kom.appendchild(t3); wiersz.appendchild(kom);// //========================================= function usun() var wiersz = document.getelementbyid("w");//referencja obiektu o identyfikatorze w wiersz.removechild(wiersz.childnodes[wiersz.childnodes.length-1]);//usuwamy ostatni //========================================= <DIV style="text-align:center;padding-top:30px"> <INPUT type="submit" value="dodaj" onclick="dodaj( )" /> <INPUT type="submit" value="usuń" onclick="usun( )" /> </DIV> </BODY></HTML> Przykład: <HTML> <HEAD> <SCRIPT language="javascript">

10 function f1() d1 = document.getelementbyid("div1"); var t1=document.createtextnode("pierwszy"); d1.innerhtml=""; //dołączamy węzeł tekstowy do DIV'a d1.appendchild(t1); function f2() d2 = document.getelementbyid("div2"); var t2=document.createtextnode("drugi"); d2.innerhtml=""; //dołączamy węzeł tekstowy do DIV'a d2.appendchild(t2); </HEAD> <BODY style="font-size:28px"> <DIV id="div1" style="clear:left" onclick="f1()">napis 1 </DIV> <DIV id="div2" onclick="f2()">napis 2 </DIV> </BODY></HTML>