jkurs2

Kurs Java Script część 2

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">

</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">
</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ść. Zauw
aż, że nie
musieliśmy tu nigdzie deklarować zmiennej today.
To właśnie różni Javę 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">

</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łbe 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>

Wyszukiwarka