JavaScript
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 - każdą 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ę problemem jest 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órych 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 zmienna 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ę tego 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órych 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