Wprowadzenie od JavaScript
Część 6
Otrzymałem wiele listów dotyczących kwestii, jak można załadować dwie strony
za pomocą jednego kliknięcia myszką. W zasadzie są trzy różne rozwiązania
tego problemu. Pierwsze polega na utworzeniu przycisku, który - po naciśnięciu -
wywołuje funkcję, która ładuje jednocześnie dwie strony - kążda do osobnej
ramki czy też okna. Nie jest to trudne do zrealizowania, jeśli tylko przyjrzałeś sie przykładom w
innych częściach tego Wprowadzenia. Mamy bowiem wszystkie potrzebne do tego elementy.
Tworzyny trzy ramki. Pierwsza będzie wykorzystana dla przycisku. Pierwsza
strona HTML jest potrzebna tylko po to, aby otworzyć te ramki i
odpowiednio jej nazwać. Nie jest to nic nowego, gdyż w części trzeciej
używaliśmy tej techniki, aby poeksperymentować z ramkami. Zresztą zaraz to pokażę.
(Nie wiem, czy też masz takie wrażenie, ale autor książki komputerowej
zawsze myśli, że nie trzeba o wszystkim pisać, gdyż jest to proste - z tym
właśnie mam problem. A zatem do dzieła :)
frames2.htm
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET COLS="295,*">
<FRAMESET ROWS="100%,*">
<FRAME SRC="loadtwo.htm" NAME="fr1">
</FRAMESET>
<FRAMESET ROWS="75%,25%">
<FRAME SRC="cell.htm" NAME="fr2">
<FRAME SRC="cell.htm" NAME="fr3">
</FRAMESET>
</FRAMESET>
</HTML>
Dokument loadtwo.htm jest ładowany do pierwszej ramki - jest to ta ramka z
przyciskiem.
loadtwo.htm
<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
function loadtwo(page2, page3) {
parent.fr2.location.href=page2;
parent.fr3.location.href=page3;
}
// -->
</script>
</HEAD>
<BODY>
<FORM NAME="buttons">
<INPUT TYPE="button" VALUE="2 in a row" onClick="loadtwo('frtest1.htm','frtest2.htm')"></FORM>
</BODY>
</HTML>
Funkcja 'loadtwo()' zostaje wywołana, gdy naciśnięty zostanie przycisk.
Funkcji tej przekazane zostają dwa stringi. Jeśli przyjrzysz się funkcji
'loadtwo()', to zobaczysz, że druga ramka fr2 ładuje stronę, która
została zdefiniowana przez pierwszy string w tym wywołaniu.
Jeśli masz różne przyciski otwierające różne strony, to możesz taką
funkcję ponowanie wykorzystać. Musisz tylko przekazać URL-e
(adresy) odpowiednich stron.
Druga technika wykorzystuje "hiperlinki" czyli hipertekstowe odsyłacze. W
Internecie krążą przykłady zawierające coś takiego:
<a href="twoj_link.htm onCLick="twoja_funkcja()">
Wydaje się, że ten sposób nie sprawdza się na wszystkich platformach
sprzętowych, a zatem lepiej go nie używać. Nie jestem pewien, czy w ogóle
może to działać - ale nie musimy się tym martwić, gdyż jest jeszcze inny
sposób implementacji. Możemy bowiem wywołać funkcję następująco:
<a href="javascript:moja_funkcja()">Mój Link</a>
Jest to naprawdę proste i co ważniejsze - zdaje się działać bez problemów
w wszystkich przeglądarkach. Wystarczy, że napiszesz javascript: a
następnie podasz nazwę twojej funkcji jako 'link'. Jeśli wywołujesz funkcję
'loadtwo()' z powyższego przykładu, to możesz zaktualizować dwie ramki za
pomocą jednego kliknięcia na odsyłaczu.
Trzecia technika załadowania dwóch stron za jednym kliknięciem może
wykorzystać albo przyciski, albo normalne "hiperlinki". Możemy to
osiągnąć za pomocą drugiej pokazanej wyżej metody, ale podejście, które
teraz zaprezentuję, wydaje się bardziej właściwe. Chodzi o to, aby
jedną stronę HTML załadować do jednej ramki. Robi się to tak:
<a href="getfr2.htm" target"fr2">Naciśniej tu!</a>
Już to znasz. Teraz dodamy własność 'onLoad' ładowanemu plikowi.
Plik 'getfr2.htm' mógłby wyglądać następująco:
<HTML>
<BODY onLoad="parent.fr3.location.href='getfr3.htm'; return true;">
bla bla bla
</body>
</html>
Oczywiście musisz to dodać do każdego dokument ładowanego do drugiej
ramki.
Innym, często pojawiającym się problem jest się kwestia, jak nowe
strony można załadować do okna. Okno powinno się otworzyć, gdy użytkownik
kliknie na odsyłaczu. Musisz tylko dodać ponownie własność 'target' do
swojego znacznika <a href...>. Wygląda to tak:
<a href="goanywhere.html" target="Okno zasobów">Go!</a>
Teraz chcemy przyjrzeć się różnym operatorom, które możesz użyć w
JavaScript. Operatory są silnym narzędziem pozwalając skrócić i
udoskonalić skrypt. Jeśli na przykład chcesz sprawdzić, czy zmienną
x jest większa od 3 i mniejsza od 10, to mogłbyś napisać to w ten
sposób:
if (x>3)
if (x<10)
doroboty();
Funkcja 'doroboty()' jest wywoływana, jeśli x>3 i x<10.
Jest jednak szybszy sposób zapisania:
if (x>3 && x<10) doroboty();
The && nazywa sie operatorem AND (logiczne 'i'). Jest też operator
OR (logiczne 'lub'). Możesz go użyć, jeśli chcesz sprawdzić, czy spełniony
jest warunek: zmienna x jest równa 5 'lub' zmienna y
jest równa 17:
if (x==5 || y==17) doroboty();
Funkcja 'doroboty()' zostaje wywołana gdy x==5 lub y==17, jak też
gdy oba te porównania są prawdziwe.
Porównań dokonuje się za pomocą operatora (są też oczywiście operatory
<,>,<= and >=). Jeśli znasz C/C++, to i je znasz. Pojedynczy znak
równości '=' jest używany do przypisania wartości pewnej zmiennej. Jeśli
znasz język Pascal, to może to być trochę mylące, gdyż w Pascalu używa się
znaku ':=' jako symbolu przypisania natomiast znaku '=' jako symbolu
porównania.
Jeśli chcesz wiedzieć, czy wartość jakiejś zmiennej nie jest równa pewnej
liczbie, to bez użycia operatorów mogło by to być dość skomplikowane.
Dokonuje się to stosując po prostu '!=' ("nie jest równe"). Nasz przykład
można zatem zapisać następująco:
x != 17.
Jest wiele innych bardziej interesujących operatorów, które mogą uczynić
twój program bardziej efektywnym. Zajrzyj do dokumentacji dostarczonej
przez Netscape, aby zapoznać się z pełnym zakresem operatorów, które
możesz używać w JavaScript.
Indeks -
Część 1 -
Część 2 -
Część 3 -
Część 4 -
Część 5 -
Część 7
Aktualizacja: 11 maja 96
(c) 1996 by Stefan Koch
zanotowane.pldoc.pisz.plpdf.pisz.plteen-mushing.xlx.pl