Ćw.2

Transkrypt

Ćw.2

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ść
linkColor
bgColor
fgColor
lastModified
location
title
body
domain
links
title
URL
Niektóre metody:
Metoda
write() writeln()
Opis
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
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="http://www.youtube.com">Youtube</A>
<A href="http://www.facebook.com">Facebook</A>
<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]);
</SCRIPT>
</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
kolekcja węzłów dla elementu - zawiera atrybut
length (liczba elementów kolekcji)
element.style
dostęp do ustawiania atrybutu style elementu
element.attributes
kolekcja atrybutów elementu - mają właściwości
length – liczba atrybutów
name – nazwa
[nr].value – wartość atrybutu
element.innerHTML
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)
powielenie elementu
element.removeChild(element_dziecko);
usunięcie elementu
element.replaceChild(el_nowy,el_stary);
podmiana elementu innym elementem
Atrybut style jest również obiektem, poniżej ważniejsze właściwości:
Właściwość
backgroundColor
border
borderStyle
borderColor
borderBottom
borderBottomColor
borderBottomStyle
borderBottomWidth
borderLeft
borderTop
borderRight
margin
marginBottom
marginLeft
marginRight
marginTop
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
podobnie – j.w.
margines np. "12px 20mm 2 cm 20px" – (górny prawy dolny lewy)
width
szerokość elementu (np. "40px" lub "4cm") - ustalenie lub pobranie
height
wysokość elementu – jak wyżej - ustalenie lub pobranie
color
ustawienie (np. "14px solid red") lub pobranie koloru czcionki
fontFamily
ustawienie (np. "Arial") lub pobranie rodziny czcionki
fontSize
ustawienie (np. "15px") lub pobranie rozmiaru czcionki
fontStyle
ustawienie (np. "italic") lub pobranie stylu czcionki
fontWeight
ustawienie (np. "bold") lub pobranie grubości czcionki
textAlign
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. http://www.w3schools.com/jsref/dom_obj_style.asp
Pełny opis dla CSS np. http://www.signs.pl/html/o/style.php
Obsługiwane zdarzenia: http://www.w3schools.com/jsref/dom_obj_event.asp
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>
<P> Przykłady dostępu do elementów </P>
<P> Elementy na stronie utworzone w HTML</P>
<A href="http://www.youtube.com">Youtube</A>
<A href="http://www.facebook.com">Facebook</A>
<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>
//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);
}
}
</SCRIPT>
</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-
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>
<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("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">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.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.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ć 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
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
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>
<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>
Przykład:
<HTML>
<HEAD>
<SCRIPT language="javascript">
function f1()
{
var t1=document.createTextNode("PIERWSZY");
d1.innerHTML="";
d1.appendChild(t1);
}
function f2()
{
var t2=document.createTextNode("DRUGI");
d2.innerHTML="";
d2.appendChild(t2);
}
</SCRIPT>
</HEAD>
<DIV id="div1" style="clear:left" onclick="f1()">Napis 1 </DIV>
<DIV id="div2" onclick="f2()">Napis 2 </DIV>
</SCRIPT>
</BODY></HTML>

Ćw.2

Transkrypt

Podobne dokumenty

JAVAScript obiekty – modyfikacja drzewa obiektów

Multimedia

przeglądarka firefox

JAVAScript - obiekty HTML

Kontakt - AGRO EFEKT - maszyny rolnicze, środki ochrony roślin