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 znaczniki <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ła zdolną 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 przukł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ącą 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ć numer 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 się 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 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ły by 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ą motody '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 te 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 aż 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, ch ociaż 'winy' za to nie będziesz przypisywał obrazkowi. A zatem podaj te wrtości, jeśli chcesz uniknąć kłopotu.

<img src="mycool.gif" height=100 width=100>



Indeks - Część 1 - Część 3 - Część 4 - Część 5 - Część 6 - Część 7


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