Programowanie obiektowe ćw.4 JAVAScript obiekty modyfikacja drzewa obiektów 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> // 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("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' " //koniec definicji funkcji document.writeln("<b>przed wykonaniem funkcji</b>"); document.writeln("z_g=",z_g); fun( );//wykonanie funkcji document.writeln("<b>po wykonaniu funkcji</b>");
document.writeln("z_g=",z_g); 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"> <!-- Istniejący DIV komentarz HTML --> <DIV id="div1">mechatronika </DIV> <SCRIPT language="javascript"> //dostęp do elementu - przypomnienie d1 = document.getelementbyid("div1"); //ustawianie parametrów stylu istniejącego DIV d1.style.color="red"; d1.style.fontsize="28px"; 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> 1. Zmodyfikować poniższy 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 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 typu button zaobserwować dziedziczenie parametrów czcionki od elementu DIV. Klonowanie elementu 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" /> 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;
</BODY></HTML> Zwrócić uwagę na nową dla nas formę przypisania zdarzenia onclick do przycisku. Zadania 1. Sprawdzić powyższy kod wstawiania elementu przed element. 2. 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. 3. 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. 4. Wypróbować samodzielnie metodę replacechild według własnego pomysłu. Omawiany na laboratoriach 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> 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>