Wprowadzenie do JavaScript

Wprowadzenie od JavaScript
CzΩ╢µ 2

Funkcja The onMouseOver - w│a╢ciwo╢ci

Kolejn▒ cechΩ JavaScript ujrzysz przesuwaj▒c kursor myszy na wskazany tu odsy│acz. Sp≤jrz teraz na wiersz statusu u do│u ekranu. FunkcjΩ tΩ mo┐esz z powodzeniem │▒czyµ z innymi funkcjami JavaScript. Je╢li przesuniesz kursor na odsy│acz okno siΩ zamknie. A teraz poka┐Ω ci ╝r≤d│o obu tych efekt≤w:

<a href="stupid.htm" onMouseOver="window.status='Kolejny g│upi
odsy│acz ...'; return true">

Jedyne co musisz uczyniµ, to dodaµ w│a╢ciwo╢µ onMouseOver do znacznika <a>- tag. Zmienna 'window.status' pozwoli ci wprowadziµ napis do wiersza statusu twojej przegl▒darki. Jak widaµ, musisz zmieniµ cudzys│owy Nie mo┐esz u┐ywaµ wy│▒cznie znaku ", gdy┐ JavaScript nie by│aby zdolna rozpoznaµ ci▒gu znak≤w (stringu), kt≤ry chcesz umie╢ciµ w wierszu statusu. Po stringu musisz napisaµ ;return true.
Drugi z przyk│ad≤w u┐ywa JavaScript odwo│uj▒c siΩ do funkcji sygna│owej (alert-function). Oto kod ╝r≤d│owy:

<html>
<head>
<script language="JavaScript">
<!-- Hiding
     function hello() {
       alert("Hello!");
     }
// -->
</script>
</head>
<body>
<a href="" onMouseOver="hello()">link</a>
</body>
</html>

To jest ca│kiem proste. Wykorzystywana jest tu metoda onMouseOver a funkcja hello() zostaje wywo│ywana, gdy odpowiednie zdarzenie (umieszczenie kursora myszy) bΩdzie mia│o miejsce.

WiΩcej o funkcjach daty

ChcΩ teraz pokazaµ inny przyk│ad u┐ycia metod 'time' i 'date'. Widzia│e╢ ju┐ w dzia│aniu w│a╢ciwo╢µ lastModified. Teraz zamierzamy wprowadziµ lokalny czas do naszego dokumentu. Metoda ta wykorzystuje czas i datΩ twojej maszyny - je╢li wiΩc ustawi│e╢ datΩ systemow▒ na - powiedzmy - 5/17/1983 (miesi▒c/dzie±/rok), to oczywi╢cie otrzymasz b│Ωdn▒ datΩ. Czas i data nie s▒ pobierane z Internetu (lub z jakiego╢ innego zewnΩtrznego ╝r≤d│a).

Oto kod ╝r≤d│owy:

<script language="JavaScript">
<!-- Hiding
  today = new Date()
  document.write("The time now is: ",today.getHours(),":",today.getMinutes())
  document.write("
The date is: ",
today.getMonth()+1,"/",today.getDate(),"/",today.getYear());// end hiding
contents --></script>

Najpierw tworzymy zmienn▒ dla daty. Robi siΩ to deklaruj▒c today=new Date(). Je╢li nie okre╢limy wyra╝nie czasu i daty przegl▒darka wykorzysta czas systemowy i przypisze zmiennej today odpowiedni▒ warto╢µ. Zauwa┐, ┐e nie musieli╢my tu nigdzie deklarowaµ zmiennej today. To w│a╢nie r≤┐ni JS od wiΩkszo╢ci innych jΩzyk≤w programowania, kt≤re wymagaj▒ okre╢lenia typu zmiennych zanim mog▒ one zostaµ u┐yte. Utworzyli╢my zatem obiekt 'time', kt≤ry zawiera lokalny czas i datΩ. Teraz mo┐emy wprowadziµ jego warto╢µ do dokumentu. Musisz napisaµ today przed ka┐dym get...- method. W przeciwnym wypadku przegl▒darka nie wiedzia│aby, do kt≤rego objektu siΩ odwo│ujesz. Metoda getMonth() zwraca liczbΩ z zakresu od 0 do 11 (0 oznacza stycze± a 11 - grudzie±). Musimy wiΩc dodaµ do tej liczby 1, aby otrzymaµ w│a╢ciwy numer miesi▒ca.
Interesuj▒ce jest, jak zobaczysz, tworzenie daty - na przyk│ad daty utworzenia dokumentu. DziΩki temu mo┐esz obliczyµ, ile dni p≤╝niej tw≤j dokument jest przez kogo╢ odczytywany. I je╢li to jest wiΩcej ni┐ np. 10 dni, to mo┐esz mu powiedzieµ: "Hej - ten dokument naprawdΩ jest stary - nie czytaj go!"
Aby tego dokonaµ bΩdziesz potrzebowa│ bie┐▒cej daty, jak w przyk│adzie wy┐ej, oraz daty utworzenia dokumentu. TΩ ostatni▒ mo┐esz ustawiµ tworz▒c objekt 'date'. Wygl▒da to tak: docStarted= new Date(96,0,13)
Musisz najpierw podaµ rok, po╝niej miesi▒c (nie zapomnij zmniejszyµ numeru miesi▒ca o jeden) i dzie±. Mo┐esz te┐ podaµ czas: docStarted= new Date(96,0,13,10,50,0)
Pierwsze trzy liczby wskazuj▒ na datΩ. Za nimi nastΩpuj▒ godziny, minuty i sekundy.

Powiedzia│em, ┐e JavaScript nie posiada typ≤w danych. Ale, jak widaµ, radzi sobie z datami ca│kiem dobrze. Dzieje siΩ tak dlatego, ┐e daty reprezentowane s▒ przez liczby milisekund liczonych od 1/1/1970 0:0h. Brzmi do╢µ skomplikowanie, ale jest to powszechny spos≤b oblicznia daty na komputerach. Nie musisz siΩ zreszt▒ tym martwiµ. Musisz tylko u┐yµ odpowiednich funkcji, a to nie jest wcale trudne. Chcia│em to Ci powiedzieµ, aby╢ nie my╢la│, ┐e wprowadzi│em ciΩ w b│▒d.

Liczby losowe

Korzystanie z liczb losowych jest znanym problemem przy programowaniu i tworzeniu skrypt≤w. Obecnie JavaScript nie ma jeszcze funkcji generuj▒cej liczby losowe, ale wkr≤tce - jak s▒dzΩ - zostanie w nie wyposa┐ona. Na razie trzeba uciec siΩ do pewnych trik≤w. W istocie nie chodzi tu o ┐aden trik. Jest to dobrze znany spos≤b, z kt≤rego korzystaj▒ kompilatory ro┐nych jΩzyk≤w do wyliczenia liczb losowych. Tak, one je wyliczaj▒. Bior▒ czas i datΩ systemow▒ i w pewien spos≤b ni▒ manipuluj▒. S▒dzΩ, ┐e ostateczna wersja JavaScript bΩdzie tak┐e u┐ywa│a tej w│a╢nie metody (lub pewnej jej odmiany). Jak powiedzia│em wy┐ej, czas jest po prostu du┐▒ liczb▒. Mo┐e u┐yµ tej liczby jako argumentu do pewnych oblicze±. Na przyk│ad mo┐esz obliczyµ warto╢µ funkcji sinus i uwzglΩdniµ warto╢µ absolutn▒. BΩdzie to liczba z zakresu od 0 do 1. Skoro za╢ z up│ywem czasu biegn▒ te┐ milisekundy, to nie otrzymasz dwa razy pod rz▒d tej samej warto╢ci. Je╢li jednak chcesz obliczyµ wiele liczb losowych w kr≤tkim odcinku czasu, to nie powiniene╢ poprzestaµ jedynie na funkcji sinus, gdy┐ zwracane przez ni▒ warto╢ci odpowiada│yby krzywej sinusoidalnej, a wiΩc nie by│yby przypadkowe.

Je╢li jednak chcesz obliczyµ liczbΩ losow▒, powiedzmy co 20 sekund, to funkcja ta doskonale siΩ do tego nadaje.

Oto generacja liczby losowej:

Kod ╝r≤d│owy dla tego przyk│adu:

<html>
<head>
<script language="JavaScript">
function RandomNumber() {
  today = new Date();
  num= Math.abs(Math.sin(today.getTime()));
  return num;
}
</script>
</head>
<body>
<script language="JavaScript">
<!--
  document.write("Oto liczba losowa:", RandomNumber());
// -->
</script>
</body>
</html>

Pokazana tu funkcja generuj▒ca liczby losowe nie nadaje siΩ jednakowo do wszelkich zastosowa±. Jest tu tylko po to, aby╢ dowiedzia│ siΩ, jak dzia│a. Poni┐ej przedstawiΩ funkcjΩ, kt≤rej autorem jest Maynard Demmon. Musisz podaµ granice dla warto╢ µ zmiennej, np. - 100 a otrzymasz . 'dobr▒' warto╢µ przypadkow▒ z zakresu od 0 do 99. Oto kod ╝r≤d│owy:

  function random() {
     today = new Date();
     num = today.getTime();
     num = Math.round(Math.abs(Math.sin (num)*1000000)) % limits;
     return num;
  }

Tworzenie okien

Tworzenie okien jest wspania│▒ w│asno╢ci▒ JavaScript. Mo┐esz tworzyµ nowe okna. Odczytywaµ dokumenty HTML. Nawigowaµ poprzez Internet - wszystko za pomoc▒ JavaScript. Tu zamierzam pokazaµ, jak mo┐esz otworzyµ okno i co╢ w nim zapisaµ. Je╢li naci╢niesz ten przycisk, to siΩ dowiesz, co zamierzam ci dalej wyja╢niµ.

Zrywaj▒c z tradycj▒ nie napisa│em tu Hello world!...
Oto ╝r≤d│o:

<html>
<head>
<script language="JavaScript">
function WinOpen() {
   msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");
   msg.document.write("<HEAD><TITLE>Yo!</TITLE></HEAD>");
   msg.document.write("<CENTER><h1><B>To jest naprawdΩ fajne!
</B></h1></CENTER>
");}</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Naci╢nij mnie" onclick="WinOpen()">
</form>
</body>
</html>

Jak zwykle - widzisz tu przycisk, kt≤ry wywo│uje funkcjΩ. Funkcja WinOpen() tworzy nowe okno za pomoc▒ metody 'open'. Pierwsza para cudzys│ow≤w zawiera URL tej strony. Mo┐esz tam umie╢ciµ adres dokumentu HTML, kt≤ry chcesz odczytaµ. Je╢li nic nie podasz, to przegl▒darka nie za│aduje ┐adnej gotowej strony, ale bΩdziesz m≤g│ sam pisaµ na stronie za pomoc▒ JavaScript!.
Druga para cudzys│ow≤w zawiera nazwΩ okna. Tu mo┐esz napisaµ prawie wszystko, co chcesz - nie ma to znaczenia dla naszego przyk│adu. Ale otrzymasz komunikat o b│Ωdzie, je╢li napiszesz Display Window (ze spacja pomiΩdzy s│owami - Netscape bowiem siΩ myli, a ja przez p≤│ godziny nie mog│em znale╝µ b│Ωdu).
NastΩpna para cudzys│ow≤w zawiera w│a╢ciwo╢ci okna. To jest rzeczywi╢cie wa┐ne. Mo┐esz okre╢liµ, czy chcesz mieµ listwΩ z narzΩdziami (toolbar), suwaki (scrollbars) itd.
Je╢li napiszesz toolbar=yes to bΩdziesz mia│ toolbar w swoim oknie. Poni┐ej zestawi│em kilka r≤┐nych w│a╢ciwo╢ci, z kt≤rych mo┐esz skorzystaµ. Musisz je tylko zapisaµ w wy┐ej podany spos≤b. I zawsze bez spacji miΩdzy nimi. Oto, co mo┐esz zmieniµ na swojej stronie:

toolbar
location
directories
status
menubar
scrollbars
resizable
copyhistory
width=piksele
height=piksele

W miejscu piksele musisz podaµ liczbΩ pikseli. W ten spos≤b mo┐esz przekazaµ przegl▒darce, jaka powinna byµ wielko╢µ okna.
Po tym, jak otworzy│e╢ okno i nazwa│e╢ je 'msg' (poprzedza open- method), mo┐esz w nim pisaµ. Mo┐esz pisaµ wykorzystuj▒c normalne znaczniki HTML!. To naprawdΩ wspania│e. Mo┐esz tworzyµ dokument HTML u┐ywaj▒c podanych przez u┐ytkownika w formularzu w tym┐e dokumencie. Mo┐esz stworzyµ stronΩ, na kt≤rej u┐ytkownik podaje w formularzu swoje nazwisko i tworzony jest nowy dokument HTML zawieraj▒cy to nazwisko!. Jeszcze kilka miesiΩcy temu co╢ takiego by│o mo┐liwe tylko za pomoc▒ skrypt≤w CGI (dzia│aj▒cych na serwerze, a nie w przegl▒darce - przypis. tlum.).

Zauwa┐: Cokolwiek piszesz w oknie, powiniene╢ zawsze wstawiµ <br> po ostatniej linijce tekstu. W przeciwnym razie tej ostatniej linijki zapewne nie zobaczysz, gdy┐ przegl▒darki wypisuj▒ pe│ne wiersze - a kiedy nie ma w nich wyra╝nie zaznaczonego ko±ca wiersza - przegl▒darka czeka na pojawienie siΩ reszty tekstu.
Inna wa┐na sprawa: Je╢li chcesz umie╢ciµ jakie╢ obrazek w nowo utworzonym oknie, to musisz podaµ warto╢µ dla height i width zwi▒zanych ze znacznikiem <img>. W przeciwnym wypadku nie zobaczysz ┐adnego obrazka albo twoja siΩ rozwali. Mo┐e to bowiem spowodowaµ bardzo dziwacze zachowanie przegl▒darki, chocia┐ 'winy' za to nie bΩdziesz przypisywa│ obrazkowi. A zatem podaj te warto╢ci, je╢li chcesz unikn▒µ k│opotu.

Indeks - CzΩ╢µ 1 - CzΩ╢µ 3 - CzΩ╢µ 4 - CzΩ╢µ 5 - CzΩ╢µ 6 - CzΩ╢µ 7

Aktualizacja: 11 maja 96
(c) 1996 by Stefan Koch