Wstęp
Kurs przedstawia podstawowe zasady posługiwania się językiem JavaScript i jest przeznaczony dla osób początkujących.
Aby przystąpić do kursu, należy znać język HTML, przynajmniej w stopniu podstawowym.
Polecam dokładne przestudiowanie kursu języka HTML
autorstwa Pawła Wimmera. Jest to doskonały przewodnik dla webmasterów (zarówno dla początkujących, jak i bardziej zaawansowanych).
Co to jest JavaScript?
JavaScript jest językiem skryptowym przeznaczonym dla dokumentów HTML. Język ten pozwala nadać stronom pewne dynamiczne elementy, przy czym dynamika ta jest realizowana po stronie klienta. To znaczy, że po ściągnięciu skryptu z serwera, jest on interpretowany przez przeglądarkę.
Jak umieścić skrypt w dokumencie HTML?
Skrypt umieszczamy bezpośrednio w dokumencie obejmując go znacznikiem <script> np.
<script type="text/javascript">
document.write('<B>Tekst napisany za pomocą skryptu</B>');
</script>
Powyższy skrypt zawiera tylko jedną instrukcję, która powoduje wpisanie określonego kodu HTML w dokumencie. Jeżeli w skrypcie występuje więcej niż jedna instrukcja, powinny być one rozdzielone znakiem średnika. Średnik nie jest konieczny, gdy każda z instrukcji występuje w osobnej lini lub w przypadku, gdy jest tylko jedna instrukcja.
Skrypt można również umieścić w zewnętrznym pliku, a w miejscu w którym ma być wywołany należy umieścić:
<script type="text/javascript" src="plik_zewnetrzny.js"> </script>
Skrypty można umieszczać w dowolnym miejscu dokumentu HTML, lecz jeśli chodzi o definicje funkcji, to najlepiej jest umieszczać je w sekcji <head>, ponieważ będą one załadowane przed główną częścią dokumentu. Tak więc klasyczna struktura dokumentu HTML wykorzystującego JavaScript powinna wyglądać następująco:
<html> <head> <script type="text/javascript"> /* Definicje funkcji oraz instrukcje, które mają być wykonane przed rozpoczęciem ładowania głównej części dokumentu */ </script> </head> <body> <script type="text/javascript"> /* Wywołania funkcji oraz instrukcje JavaScript, które mają być wykonane podczas ładowania się głównej części dokumentu */ </script> </body> </html>
document.write()
Pierwszym poleceniem JavaScript, jakie poznaliśmy była metoda obiektu document:
document.write("kod html");
Ktoś mógłby zadać pytanie: Po co komplikować sobie życie pisząc kod HTML za pomocą JavaScript, skoro można to zrobić normalnie, bez użycia skryptu?
Tak, to prawda, ale tylko wtedy gdy wiemy z góry jak ten kod ma wyglądać.
Zanim użyjemy metody document.write(), możemy sprawdzić na przykład jakiej przeglądarki używa osoba, która
ogląda naszą stronę lub też w jakiej rozdzielczości pracuje jej monitor i w zależności od tych czynników możemy odpowiednio dostosować kod HTML
(lub fragmenty tego kodu).
Przykład:
<html>
<head>
</head>
<body>
<h2>Przegladarka, której używasz to</h2>
<script type="text/javascript">
var nazwa=navigator.appName;
var wersja=navigator.appVersion;
document.write(""+ nazwa +" w wersji "+
wersja +"");
</script>
</body>
</html>
W powyższym przykładzie, zanim skrypt wypisał fragment kodu HTML, przekazaliśmy do zmiennych
nazwa i wersja nazwę i wersję przeglądarki jakiej używa osoba oglądająca stronę.
Informacje te uzyskaliśmy za pomocą właściwości appName i appVersion (które poznamy dokładniej w dalszej części kursu).
Definiując metodę document.write(), połączyliśmy łańcuchy znakowe
(czyli tekst zamknięty w cudzysłowiach) ze zmiennymi nazwa i wersja. W wyniku działania tego kodu,
na ekranie użytkownika pojawi się tekst, którego treść będzie uzależniona od rodzaju przeglądarki jakiej używa.
Takiego efektu, nigdy nie uzyskalibyśmy w "czystym" HTML-u, bez użycia skryptu.
Zmienne
Skoro w poprzednim przykładzie użyliśmy zmiennych, to powiedzmy sobie również kilka słów na ten temat.
Zmienna to dowolna nazwa (lecz bez spacji i polskich znaków), której możemy nadać dowolną wartość i wykorzystać ją w dalszej części skryptu.
Zmienne deklarujemy przy użyciu słowa kluczowego var.
Na przykład:
var Moja_zmienna;
Jeżeli, deklarując zmienną, nie nadamy jej żadnej wartości (tak jak powyżej), to wartością tej zmiennej jest undefined.
Podczas deklaracji zmiennej, możemy jej nadać określoną wartość, używając operatora przypisania =.
Na przykład:
var Moja_zmienna = 2;
var druga_zmienna = 3.5 + Moja_zmienna;
/* druga_zmienna będzie miała wartość 5,5.
Pamiętajmy, że w liczbach używamy kropki a nie przecinka */
Użycie słowa kluczowego var w tym przypadku nie jest konieczne, lecz taki sposób deklaracji (bez var) powoduje, że zmienna staje się zmienną globalną nawet wtedy,
gdy zostanie zadeklarowana wewnątrz funkcji (więcej szczegółów na temat zmiennych lokalnych i globalnych w dalszej części kursu).
Oprócz wartości liczbowych, zmienna może też przybrać wartość, którą jest łańcuch znakowy (czyli tekst)
Na przykład:
var Moja_zmienna = "jakiś tekst";
lubvar Moja_zmienna = 'jakiś tekst';
Innym typem wartości jest wartość logiczna, która może mieć tylko dwie wartości: true (prawda) lub false (fałsz).
Na przykład:
var Moja_zmienna = true;
Należy pamiętać, że wielkość liter w nazwie zmiennej ma znaczenie. Moja_zmienna i moja_Zmienna to dwie różne zmienne.