Blog literacki, portal erotyczny - seks i humor nie z tej ziemi
JAVASCRIPT WORKSHOP
[JavaScript Workshop]
[podstawy]
[przykłady]
[ips&tricks]
[linki]
Lekcja 2
Dokument HTML
Hierarchia JavaScript
JavaScript organizuje wszystkie elementy na stronie WWW hierarchicznie. Każdy element jest rozumiany jako obiekt, któremu przypisano ospowiednie właściwości i metody. Za pomocą JavaScript można w łatwy sposób operować na obiektach.
Poniżej zostało przedstawione źródło prostej strony WWW.
<html>
<head>
<title>Moja strona domowa
</head>
<body bgcolor=#ffffff>
<center>
<img src="home.gif" name="obraz1" width=200 height=100>
</center>
<p>
<form name="mojFormularz">
Name:
<input type="text" name="name" value=""><br>
e-Mail:
<input type="text" name="email" value=""><br><br>
<input type="button" value="Push me" name="myButton" onClick="alert('Spoko')">
</form>
<p>
<center>
<img src="ruler.gif" name="pic4" width=300 height=15>
<p>
<a href="http://friko3.onet.pl/ka/szewo">My homepage</a>
</center>
</body>
</html>
Poniżej przedstawiono wygląd takiej strony:
Widzimy dwa obrazki, jeden odsyłacz oraz formularz z dwoma polami tekstowymi i jednym przyciskiem.
Z punktu widzenia JavaScript okno jest rozumiane jako obiekt(window-object). Obiekt ten zawiera elementy jak na przykład pasek stanu. Do okna możemy otworzyć stronę HTML (można także otworzyć pliki innego typu, ale tym na razie się nie interesujemy). Stronę tą nazywamy obiektem dokumentu (document-object). Oznacza to, że obiekt dokumentu (document-object) reprezentuje dokument HTML, który jest aktualnie otwarty. Przykładem właściwości tego obiektu może być kolor tła strony. Istnotnym jest, że wszystkie obiekty HTML są właściowściami document-object. Obiekty HTML to na przykład: obrazki, odsyłacze, itp.
Poniższy schemat przedstawia hierarchię reprezentującą nasz przykład strony:
Pierwszy obiekt to document. Pierwszy obrazek jest reprezentowany przez obiekt images[0]. Oznacza to, że mamy dopstęp do tego obiektu w JavaScript poprzez document.images[0].
Jeżeli na przykład chcesz wiedzieć co użytkownik wpisał w pierwszy element formularza najpierw musisz wiedzieć jak się do tego obiektu dostać. Zaczynając od szczytu hierarchii zmierzamy do obiektu elements[0]. Oznacza to, że dostęp do pierwszego elementu formularza odbywa się poprzez:
document.forms[0].elements[0]
Element pola tekstowego ma właściowść value. Jest to tekst wprowadzony do pola tekstowego. Możemy przeczytać zapisany w nim tekst w następujący sposób:
name= document.forms[0].elements[0].value;
Powyższy przykład deklaruje zmienną name. Teraz możemy na przykład wyświetlić okienko alert("Witaj " + name). Jeżeli wprowadzimy w pole tekstowe name tekst Wojtek, komendą alert("Witaj " + name) otworzymy okienko z napisem 'Witaj Wojtek'
Na większej stronie WWW dostęp do obiektów poprzez ich numerowanie, np.document.forms[3].elements[17] może sprawiać trudności. W celu uniknięcia takich problemów można nadawać obiektom nazwy. Zobaczymy poniższy przykład:
<form name="mojFormularz">
Name:
<input type="text" name="name" value=""><br>
...
Oznacza to, że obiekt forms[0] jest także nazwany mojFormularz. Zamiast wpisywania elements[0] można użyć name (gdzie name jest parametrem znacznika <input ). NA przykład zamiastwpisywania:
name= document.forms[0].elements[0].value;
można napisać:
name= document.mojFormularz.name.value;
Nadawanie nazw obiektom poprawia orientację na dużych stronach z duża liczbą obiektów. Należy podkreślić, że nazwy obiektów muszą być pisane taką samą wielkością liter, tzn. że mogą istniec dwa obiekty o nazwach: mojFormularz i mojformularz.
Wiele właściwości obiektów JavaScript nie jest ograniczonych do odczytywania wartości, np. tekstów, ale także można je wykorzystywać do wprowadzania wartości, np.:
Oto kod do powyższego przykładu. Ciekawe zagadnienie stanowi część wewnątrz właściwości onClick w drugim znaczniku <input:
<form name="mojFormularz">
<input type="text" name="input" value="bla bla bla">
<input type="button" value="Wypisz"
onClick="document.mojFormularz.input.value= 'Spoko'; ">
Trudno byłoby przedstawić wszystkie zagadnienia związane z powyższym przykładem. Użytkownik może znaleźć wyjaśnienia niektórych fragmentów powyższego przykładu w dalszej częsci kursu języka JavaScript.
Przeanalizujmy kolejny przykład, którego źródło przedstawiono poniżej, a działanie możemy sprawdzić naciskając przycisk:
<html>
<head>
<title>Objekty</title>
<script language="JavaScript">
<!-- ukryj
function first() {
alert("Pole tekstowe ma wartość: " +
document.mojFormularz.mojTekst.value);
}
function second() {
var mojString= "Pole wyboru ma wartość:";
if (document.mojFormularz.mojCheckbox.checked) ,mojString+= "wybrany"
else mojString+= "nie wybrany";
// output string
alert(mojString);
}
// -->
</script>
</head>
<body bgcolor=lightblue>
<form name="mojFormularz">
<input type="text" name="mojTekst" value="bla bla bla">
<input type="button" name="przycisk1" value="Przycisk 1"
onClick="first()">
<br>
<input type="checkbox" name="mojCheckbox" CHECKED>
<input type="button" name="przycisk2" value="Przycisk 2"
onClick="second()">
</form>
<p><br><br>
<script language="JavaScript">
<!-- ukryj
document.write("Kolorem tła jest: ");
document.write(document.bgColor + "<br>");
document.write("Tekst na drugim przycisku: ");
document.write(document.mojFormularz.przycisk2.value);
// -->
</script>
</body>
</html>
Obok obieków typu window i document jest jeszcze jeden ważny obiekt: obiekt location (location-object). Reprezentuje on adres otwartego dokumentu HTML. Jeżeli jest otwarta strona http://friko3.onet.pl/ka/szewo/index.htm wówczas adres możemy odczytać poprzez: location.href.
Ważne jest, że możemy zmieniać wartośc obiektu location. Poniższy przykład otwiera w aktualnym oknie strone o adresie: http://friko3.onet.pl/ka/szewo/index.htm:
<form>
<input type=button value="SZEWO'S offICIAL SITE"
onClick="location.href='http://friko3.onet.pl/ka/szewo'; ">
</form>