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