Pobierz div x

Transkrypt

Pobierz div x

ICT
Wykład 2
Style CSS – definicja i wykorzystanie klasy
Plik style.css
p {font-size: 44px;}
.czerwony {background-color:#ff0000;}
Plik index.html
<HTML><HEAD><TITLE>Indeks: elementy</TITLE>
<LINK rel="stylesheet" href="style.css" type="text/css" />
</HEAD>
<BODY>
<P class="czerwony"> To jest tekst 1</P>
<TABLE class="czerwony">
<TR><TD>AAA</TD></TR>
</TABLE>
</BODY></HTML>
Można też zawężać definicję klasy do pewnych typów
znaczników
p.czerwony {background-color:red;}
tylko akapity klasy czerwony będą miały
czerwone tło
Znaczniki mogą należeć do wielu klas
<HTML>
<HEAD>
<STYLE type="text/css">
.szary{background-color:lightgrey;}
.czerwony{color:red}
.duzy{font-size:30px}
</STYLE>
</HEAD>
<BODY style="margin:130 140 140 140">
<P class="czerwony szary duzy">Szare tło</P>
<TABLE style="border:1px solid green">
<TR>
<TD class="czerwony duzy"> tekst1</TD><TD> tekst</TD><TD> tekst </TD>
</TR>
<TR>
<TD> tekst</TD><TD> tekst</TD><TD> tekst </TD>
</TR>
</TABLE>
</BODY>
</HTML>
Przypisanie cech znacznikom posiadającym identyfikatory
<HTML>
<HEAD>
<TITLE> Moja strona testowa </TITLE>
#szary {background-color:lightgrey;}
.czerwony{color:red}
.duzy{font-size:30px}
</STYLE>
</HEAD>
<BODY style="margin:130 140 140 140">
<P id="szary" class="czerwony duzy">Szare tło</P>
</BODY>
</HTML>
Przykład skryptu HTML z arkuszem stylów
<HTML>
<HEAD>
<TITLE> Moja strona </TITLE>
plik style.css
<LINK rel="stylesheet" href="style.css" type="text/css" />
body{ background-color:yellow;
</HEAD>
font-size:30px}
<BODY>
table{border:3px solid red;}
#inna {background-color:orange}
<TABLE>
.lista {font-size:37px}
<TR> <TD> AA </TD> <TD> AB </TD></TR>
<TR> <TD> BA </TD> <TD> BB </TD> </TR>
<TR> <TD id="inna"> CA </TD> <TD> CB </TD> </TR>
</TABLE>
<UL class="lista">
<LI> <A HREF="http://www.onet.pl">Onet</A> </LI>
<LI> <A HREF="http://www.google.pl">GOOGLE</A> </LI>
<LI> <A HREF="http://www.interia.pl">INTERIA</A> </LI>
</UL>
</BODY>
</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).
Wykorzystamy to używając języka Java Script do
stworzenia pewnych funkcjonalności, mogących być
użytecznymi dla portalu biznesowego
Przypomnienie
węzeł tekstowy
Obiekt document
Obiekt document zawiera informacje o bieżącej stronie i dostarcza
wielu sposobów wyświetlania strony HTML.
Składnia wykorzystania właściwości i metod:
document.właściwość
lub
document.metoda( )
UWAGI
Właściwości mogą być tekstem, obiektem, kolekcją obiektów.
Właściwość może być kolekcją, do jej elementów mamy dostęp
jak do tablicy (indeks zaczyna się od 0), np.:
p=x.childNodes[4]
p jest piątym obiektem podrzędnym obiektu x
Metoda może zwracać kolekcje, do poszczególnych składowych
mamy dostęp jak do tablicy (indeks zaczyna się od 0)
x=document.getElementsByTagname("DIV")[0]
x jest pierwszym obiektem typu DIV dokumentu html
Liczbę elementów w kolekcji zawiera właściwość length.
Jeśli właściwości są typu obiektowego to mają kolejne
właściwości.
Właściwościom nadajemy wartości, badamy je lub wypisujemy
Metody (funkcje) wykonujemy w osobnej instrukcji.
Wybrane właściwości obiektu document
Właściwość
document.linkColor
document.bgColor
document.fgColor
document.lastModified
document.location
document.title
document.body
document.links
document.title
document.URL
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 kolekcję wszystkich hiperłączy w
dokumencie – kolekcja (TABLICA - zawiera
właściwość length - liczba elementów kolekcji)
zawiera tytuł dokumentu
zawiera pełny URL dokumentu
Metody obiektu document
styl "wielbłądzi" nazw
wyprowadzenie na ekran
document.write()
document.writeln()
dostęp do elementów
document.getElementById("id")
document.getElementsByTagName("znacznik")
zwraca kolekcję elementów
document.getElementsByName("nazwa")
kolekcja
tworzenie nowego elementu
document.createTextNode("tekst")
document.createElement("znacznik")
<HTML><HEAD> <TITLE>TEST obiektu document</TITLE></HEAD>
<BODY style="font-size:18px">
<P>Przykłady wykorzystania obiektu document</P>
<P> Akapit 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);
document.writeln("Linków jest:", document.links.length);
//elementy kolekcji w pętli
for (k=0;k<document.links.length;k++)
document.writeln("Link ",k,":",document.links[k]); //jak tablica (indeks)
</SCRIPT>
</PRE></BODY></HTML>
Wykorzystanie własnej funkcji do ustawienia właściwości
<HTML><HEAD>
<TITLE> Przykłady wykorzystania obiektu document</TITLE>
function czerwony()
{document.bgColor="red";}
function zielony()
{document.bgColor="green";}
</SCRIPT>
</HEAD>
<INPUT type="button" value="czerwone" onclick="czerwony()">
<INPUT type="button" value="zielone" onclick="zielony()">
</BODY></HTML>
.. albo inaczej – jedna funkcja z argumentem…
<HTML><HEAD>
<TITLE> Przykłady wykorzystania obiektu document</TITLE>
function setKolor(k)
{
document.bgColor=k;
}
</SCRIPT>
</HEAD>
<INPUT type="button" value="czerwone" onclick="setKolor('red')">
<INPUT type="button" value="zielone" onclick="setKolor('green')">
</BODY></HTML>
Uwaga: ' ' wewnątrz " "
Dostęp do elementów strony
Tworzenie referencji do istniejącego elementu (obiektu) – zmiennej
reprezentującej element na stronie - najwygodniej wykonać instrukcją:
var element = document.getElementById ("identyfikator");
pobierz element dokumentu o pewnym id
albo
var element
= document.getElementsByTagName ("znacznikHTML");
pobierz wszystkie elementy dokumentu o pewnym znaczniku HTML
to będzie kolekcja - TABLICA
Ważniejsze właściwości tak pobranego elementu:
node(ang. węzeł)
element.childNodes kolekcja węzłów dla elementu - zawiera
atrybut length (liczba elementów kolekcji),
każdy węzeł ma nodeName, nodeType i
jeśli węzeł tekstowy ma nodeValue
element.style
dostęp do ustawiania atrybutu style
elementu
element.attributes
kolekcja atrybutów elementu - mają one
właściwości:
length – liczba atrybutów
[nr].name – nazwa
[nr].value – wartość atrybutu
element.innerHTML suma wartości węzłów tekstowych
Przykład1 – mamy tak zagnieżdżające się znaczniki
<HTML><HEAD></HEAD><BODY>
<DIV id="d1" style="border:1px solid red; width:70%">
11111111
<DIV>
AAAAAAAAAAAAA
</DIV>
222222222222
<DIV>
BBBBBBBBBBBBB
</DIV>
3333333333333
</DIV>
5 węzłów
var x=document.getElementById("d1") //pobierz element
document.write("DIV d1 ma "+x.childNodes.length+" węzłów<BR />")
document.write("Czyli: 1text 2DIV 3text 4DIV 5text<BR />")
document.write("DIV childNodes[0] :",x.childNodes[0],"<BR />")
document.write("Węzeł 0:<BR />")
document.write("DIV childNodes[0].nodeName :",x.childNodes[0].nodeName, "<BR />")
document.write("DIV childNodes[0].nodeType :",x.childNodes[0].nodeType, "<BR />")
document.write("DIV childNodes[0].nodeValue :",x.childNodes[0].nodeValue, "<BR />")
document.write("i inne........:<BR />")
document.write("DIV childNodes[1].nodeType :",x.childNodes[1].nodeType,"<BR />")
document.write("DIV childNodes[1].nodeName :",x.childNodes[1].nodeName,"<BR />")
document.write("DIV childNodes[2].nodeValue :",x.childNodes[2].nodeValue,"<BR />")
document.write("DIV childNodes[4].nodeValue :",x.childNodes[0].nodeValue,"<BR />")
document.write("Można też tak:<BR />")
document.write("DIV childNodes.item(0) :",x.childNodes.item(0),"<BR
/>")
/>")
/>")
/>")
/>")
document.write("DIV childNodes[0]: ",x.childNodes[0],"<BR
pierwszy potomek
/>")
/>")
/>")
/>")
/>")
document.write("DIV firstChild: ",x.firstChild,"<BR />")
document.write("DIV firstChild.nodeValue: ",x.firstChild.nodeValue,"<BR /> /")
document.write("DIV firstChild.nextSibling: ",x.firstChild.nextSibling,"<BR />")
document.write("Atrybut 0 naszego DIV ma nazwę: ", x.attributes[0].name)
document.write("<BR /><BR /><B>InnerHTML:</B><BR />",x.innerHTML)
następny brat (rodzeństwo)
</SCRIPT></BODY></HTML>
lub pętla…
<DIV id="d1" style="border:1px solid red;width:70%">
11111111
<DIV class="z">
AAAAAAAAAAAAA
</DIV>
222222222222
<DIV class="z">
BBBBBBBBBBBBB
</DIV>
3333333333333
</DIV>
var x=document.getElementById("d1") //pobierz element
document.write("DIV ma "+x.childNodes.length+" węzłów<BR />")
document.write("Czyli: 1text 2DIV 3text 4DIV 5text<BR />")
for (n=0;n< x.childNodes.length;n++)
document.write("DIV childNodes[",n,"] :",x.childNodes[n],"<BR />")
</SCRIPT>
inny przykład…
<HTML><HEAD> <TITLE> Przykłady obiektowe</TITLE>
</HEAD>
<DIV name="c1" style="color:red">A</DIV>
<DIV name="c1" style="color:green">B</DIV>
<DIV name="c1" style="color:blue">C</DIV>
<HR />
document.write(document.getElementsByName("c1").length,"<BR />");
for (k=0; k<document.getElementsByName("c1").length;k++){
document.write(document.getElementsByName("c1")[0].innerHTML,"<BR />");
}
</SCRIPT>
</BODY></HTML>
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 znaczenia
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 – np. "blue"
dolna krawędź obramowania – styl – np. "dotted"
dolna krawędź obramowania – szerokość
podobnie – j.w.
color
fontFamily
fontSize
fontStyle
fontWeight
textAlign
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
margines np. "12px 20mm 2 cm 20px" – góra prawy dolny lewy
j.w.
Zmiana stylu znacznika
<HTML><HEAD> <TITLE> Przykłady obiektowe</TITLE></HEAD>
<TABLE style="border:1px solid red;font-size:25px">
<TR><TD>a1</TD> <TD>a2</TD><TD>a3</TD></TR>
<TR><TD>b1</TD> <TD>b2</TD><TD>b3</TD></TR>
</TABLE>
x=document.getElementsByTagName("TD") //pobierz elementy wg znacznika!
x[0].style.border="6px solid red";
x[1].style.backgroundColor="blue";
document.write(x[1].style.backgroundColor);
</SCRIPT>
</BODY></HTML>
Interakcyjna zmiana stylu znacznika
function setRamka(n, kolor){
var x=document.getElementsByTagName("TD") //pobierz elementy TD!
x[n].style.border="3px solid "+kolor
uwaga na spację po
}
</SCRIPT>
solid
</HEAD>
<TABLE style="border:1px solid red">
<TR><TD>a1</TD> <TD>a2</TD><TD>a3</TD></TR>
<TR><TD>b1</TD> <TD>b2</TD><TD>b3</TD></TR>
</TABLE>
Wpisz numer od 1 do 6<INPUT type="text" id="pole">
<INPUT type="button" value="Ustaw kolor" onclick="setRamka(pole.value-1, 'red')">
</BODY></HTML>
Proste sterowanie położeniem przez cechę margin
function setMargin(m){
var x=document.getElementsByTagName("DIV") //pobierz elementy wg znacznika!!!!
x[0].style.marginLeft=m+"px"
}
</SCRIPT>
</HEAD>
<DIV style="border:1px solid red; width:100px;height:100px; marginleft:200px;border:3px solid red">
</DIV>
<INPUT type="button" value="Prawo" onclick="setMargin(300)">
<INPUT type="button" value="Lewo" onclick="setMargin(100)">
</BODY></HTML>
…albo reakcja na kliknięcie obiektu
<HTML><HEAD> <TITLE> Przykłady sterowania margin2</TITLE>
function setMargin(){
var x=document.getElementsByTagName("DIV") //pobierz elementy wg
znacznika!!!!
if (x[0].style.marginLeft=="200px")
x[0].style.marginLeft="300px"
else
x[0].style.marginLeft="200px"
}
</SCRIPT>
</HEAD>
<DIV style="border:1px solid red; width:100px;height:100px; marginleft:200px;border:3px solid red" onclick="setMargin()">
</DIV>
</BODY></HTML>
Sterowanie na płaszczyźnie
<HTML><HEAD> <TITLE> Przykłady sterowania</TITLE>
div.x{border:1px solid red; width:100px;height:100px;background-color:red; marginleft:0px;}
div.z{
border:1px solid red; width:300px;height:300px;border:1px solid green; marginleft:200px;}
</STYLE>
function setMargin(m){
var x=document.getElementById("d1") //pobierz element o id=d1
x.style.marginLeft=m+"px"
}
function setMargin2(m){
var x=document.getElementById("d1") //pobierz element o id=d1
x.style.marginTop=m+"px"
}
</SCRIPT>
</HEAD>
cd
…..
<INPUT type="button" value="Prawo" onclick="setMargin(200)">
<INPUT type="button" value="Lewo" onclick="setMargin(0)">
<INPUT type="button" value="Dół" onclick="setMargin2(200)">
<INPUT type="button" value="Góra" onclick="setMargin2(0)">
<DIV class="z">
<DIV id="d1" class="x">
</DIV>
</DIV>
</BODY></HTML>
Przydatne metody dla zmian struktury obiektów
document.createElement(typ)
document.createTextNode(tekst)
utworzenie elementu o typie znacznika
utworzenie węzła tekstowego
element.appendChild(element_dołączany)
dołączanie elementu do innego elementu
(na końcu)
powielenie elementu - klonowanie
usunięcie elementu podrzędnego
podmiana elementu podrzędnego
ustawianie atrybutu
pobieranie atrybutu
element.cloneNode(true)
element.removeChild(element_dziecko);
element.replaceChild(el_nowy,el_stary);
element.setAttribute(nazwa, wartość)
element.getAttribute(nazwa)
append = dołącz
create = utwórz
clone = klonuj, kopiuj
remove = usuń
replace= zamień
set = ustaw
get = pobierz
Tworzenie nowego elementu na końcu strony
<HTML><HEAD>
<SCRIPT language="javascript">
function fun(d1) {
//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";
//tworzymy węzeł tekstowy
var t2=document.createTextNode("DRUGI DIV");
//dołaczamy węzeł tekstowy do nowego div'a
d2.appendChild(t2);
//dołączamy DIV na końcu strony – dołączenie do BODY
document.body.appendChild(d2);
cd.
}</SCRIPT> </HEAD>

<DIV onclick="fun(this)">Kliknij tu.. </DIV>
</BODY></HTML>
funkcja uruchamiana
kliknięciem w ten DIV
Słowo kluczowe this
Nadając i wykorzystując identyfikatory właściwości i metod
korzystamy ze słowa kluczowego this. Rozumiane jest ono jako
obiekt bieżący, właściciel metody lub właściwości. Poniżej
prosty przykład:
Przykład
<HTML>
<HEAD> </HEAD>
<P> AKAPIT</P>
<PRE>
function kolor1( ) {
this.document.bgColor = "red";
}
function kolor2(e) {
e.style.color = "yellow";
}
</SCRIPT>
</PRE>
<INPUT type="button" value="Kolor dla tła okna" onclick="kolor1( )">
<INPUT type="button" value="Kolor napisu przycisku" onclick="kolor2(this)">
</BODY>
</HTML>
W powyższym przykładzie mamy dwie własne funkcje.
W pierwszej o nazwie kolor1 ustalamy kolor tła dla
bieżącego obiektu (this) - którym jest domyślnie window.
Druga funkcja o nazwie kolor2 zmienia kolor czcionki
przekazanego do funkcji obiektu e - wywoływana jest
kliknięciem w przycisk z przekazaniem odniesienia do
tego właśnie przycisku (this), a więc zmienia się kolor
napisu na przycisku.
Tworzenie elementu potomnego do istniejącego elementu
..uzupełnić poprzedni kod o funkcję…
function fun2(d)
{
//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
tp1=document.createTextNode("Akapit potomny do DIV");
//trzeba dołączyć węzeł tekstowy do akapitu
p1.appendChild(tp1);
//… i dołączyć akapit do div
d.appendChild(p1);
}
a w fun dopisać..
d2.setAttribute("onclick","fun2(this)");
Usuwanie elementu
<HTML><HEAD>
function usun(d) {
document.body.removeChild(d);
}
</SCRIPT> </HEAD>
<DIV onclick="usun(this)">DIV1</DIV>
<DIV onclick="usun(this)">DIV2</DIV>
</BODY></HTML>
Uwaga: tu usuwamy element bezpośrednio potomny
do body
Jeśli chcemy usunąć element w bardziej złożonej,
głębszej strukturze, to należy wykorzystać jego
element nadrzędny (parentNode – węzeł "rodzic")
<HTML><HEAD>
function usun(d) {
d.parentNode.removeChild(d);
}
</SCRIPT> </HEAD>
<DIV>
<DIV onclick="usun(this)">DIV wewnętrzny</DIV>
</DIV>
</BODY></HTML>
<HTML>
<HEAD>
function Fun() {
var oryg = document.getElementById("Lista2").lastChild;
var klon = oryg.cloneNode(true);
document.getElementById("Lista1").appendChild(klon);
}
</SCRIPT>
</HEAD><BODY>
<UL id="Lista1"><LI>Kawa</LI><LI>Herbata</LI></UL>
<UL id="Lista2"><LI>Woda</LI><LI>Mleko</LI></UL>
<P>Kopiowanie z jednej listy na drugą.</P>
<BUTTON onclick="Fun()">Klonuj</BUTTON>
</BODY></HTML>
Koniec listy bezpośrednio za ostatnim
elementem, bo inaczej ostatnim będzie węzeł
tekstowy

Pobierz div x

Transkrypt

Podobne dokumenty

Multimedia

JavaScript cd. (2)

JAVAScript w dokumentach HTML (2)

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

Wprowadzenie do języka html

JAVAScript obiekty – modyfikacja drzewa obiektów