-------------------------------------------------
drukarnia krakow druk offset w krakowie druk ofset krakow Kraków plakaty wizytówki zaproszenia katalogi prindor druk
offset ofset uszlachetnianie druku heidelberg planeta romaior
yyyyy
JAVASCRIPT DLA BAAARDZO POCZATKUJACYCH
Ten tutorial jest (jak sam tytuł wskazuje) przeznaczony dla osób, które stawiają dopiero pierwszy krok w Javascricie.
Javascript jest to język skryptowy, obsługiwany po stronie przeglądarki. Co to oznacza ? Ano to, że skrypty wykonuje przeglądarka, a nie serwer, wiec działa niezależnie od konfiguracji, rodzaju itp serwera. To dobra wiadomosc, a zła, to ta, że nie wszystkie przeglądarki wykonuja wszystkie skrypty tak samo. Ale nie przejmuj się - da sie napisać nawet skomplikowany skrypt tak, żeby wiekszość przeglądarek wykonywała go prawidłowo, a proste skrypty wszystkie znane mi przeglądarki wykonuja tak samo. Które przeglądarki różnia się w wykonywaniu skryptów ? Największe różnice wystepują pomiedzy MSIE i Netscapem/Mozilla/Safari.
Co trzeba wiedzieć, żeby zaczac ?
Trzeba znac podstawy HTMLa. NIE trzeba znać się na programowaniu komputerów ani byc zawodowym informatykiem.
Co daje javascript czego nie daje HTML ?
HTML jest statyczny - tzn bez względu na to co robi użytkownik, raz załadowana stona HTML zachowuje sie tak samo. Javascript pozwala wprowadzic "dynamike", czyli modyfikowac "zachowanie" przegladarki w zaleznosci od tego np. jaki okres czasu upłynął od jakiegoś momentu, jaki przycisk uzytkownik nacisnał (no, to html w pewnym stopniu też potrafi) albo gdzie przesunął kursor myszki, czy wypelnił pole formularza, czy nie, czy w adresie e-mailowym wpisanym do formularza jest znak "@" czy nie, oraz wiele, naprawde wiele innych rzeczy.
PIERWSZY SKRYPT
No to pora, żeby zobaczyć jak to działa. Nasz pierwszy skrypt bedzie wyswietlał komunikat (alert) z informacją dla oglądającego:
<html>
<head>
<title>Pierwszy skrypt</title>
<body bgcolor="#FFFFFF" onLoad="alert('Javascript nie jest taki trudny')">
<center>PIERWSZY SCRYPT</center>
</body>
</html>
"onLoad" - to wbudowana funkcja html'a i (pisane 'onload') Javascriptu (ang. "event handler"), która wykonuje skrypt przy ładowaniu strony (load(ang.) = ładowac). Funkcje onLoad umieszczamy w znaczniku <body>.
Analogicznie działa funkcja "onUnload" - z tym, że, oczywiście, wykonuje skrypt, kiedy stronę opuszczamy (unload(ang.)=rozładować).
Zobacz jak to działa: Kliknij, a potem wpisz inny adres http, albo kliknij przycisk "powrót", który zamyka okno, albo sam zamkinj okno przeglądarki.
"alert" - to wyskakujące okienko z informacją i tylko jednym przyciskiem , który zamyka okienko.
Javesript ma jeszcze okienko "prompt" i "confirm", ale o nich póżniej
W tym miejscu najwyższy jest czas wspomnieć o ważnej cesze javascriptu - popatrzmy na poniższy przyklad:
<body bgcolor="#FFFFFF" onLoad="Alert('Javascript nie jest taki trudny')">
<center>PIERWSZY SKRYPT
</body>
</html>
Wpisz powyższy kod w swoim ulubionym edytorze tekstów, zapisz jako plik .html otworz w ulubionej przeglądarce.
No cóz, nie działa. Dlaczego ? Javascript jest "wrażliwy" na wielkość liter (ang. case sensitive), to znaczy rozróżnia duże i male litery (a np. Visual Basic Script - nie). To znaczy, że np. "Alert" i "alert" to dla Javascriptu dwa rózne słowa (i tylko "'alert' jest funkcja javascriptu).
W tym miejscu należy również zaznaczyć, że funkcja html "onMouseover" w javascripcie jest pisana z małych liter - "onmouseover". To samo tyczy się wszystkich innych funkcji obsługi zdażeń.
DRUGI SKRYPT
Drugi skrypt będzie zmieniał kolor tła strony po najechaniu (onMouseover) myszką nad przycisk (button).
Popatrzmy na poniższy przyklad:
W momencie przesunęcia kursora myszki nad przycisk, tło zmienia kolor na czerwony.
Osiagnięte jest to za pomoca:
document.bgColor='red'
Javascript posługuje sie notacja (zpisem) kropkowym (ang. dot notation).
Ta niezwykle skomplikowana nazawa oznacza, że Javscript posługuje się kropka w celu odwołania się do jakiegoś
elementu (obiektu) albo jago wlasciwości albo metody . Tak więc odwołanie się do właściwości dokumentu jaką jest kolor tła wygląda "document.bgColor='red'".
W tym miejscu nalezy zwrócić baczna uwagę na cudzysłów.
Kolor tła - 'red' ujęty jest w pojedynczy cudzysłów, natomiast całosc wyrażenia, w podwójny - z tąd na koncu znajduje się '", czyli pojedynczy cudzysłów, a zaraz za nim podwójny. Wygląda to na pierwszy rzut oka podejżanie, jest jednak poprawne.
Teraz nic nie stoi na przeszkodzie, aby kolor tła przywrócic do pierwotnego wyglądu. Uczynimy to używając wyrażnie onMouseout: