JAVAScript obiekty – modyfikacja drzewa obiektów

Transkrypt

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>
<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' "
}//koniec definicji funkcji
document.writeln("<B>Przed wykonaniem funkcji</B>");
fun( );//wykonanie funkcji
document.writeln("<B>Po wykonaniu funkcji</B>");
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");
</SCRIPT><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
dostęp do atrybutu style elementu
element.nextSibling
następny węzeł sąsiadujący (też element)
element.parentNode
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>

<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);
</SCRIPT>
</BODY></HTML>
Zadanie
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
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 typu button – zaobserwować
dziedziczenie parametrów czcionki od elementu DIV.
Klonowanie elementu
Zadanie
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>
<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;
</SCRIPT>
</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>
<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
}
//=========================================
</SCRIPT>
<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>

JAVAScript obiekty – modyfikacja drzewa obiektów

Transkrypt

Podobne dokumenty

JAVAScript - obiekty HTML

Wykorzystanie stylów w edytorze tekstu

Ćw.2

Pobierz div x