Pisanie tekstu na stronie i działania na zmiennych
1. Instrukcja document.write
Nasz pierwszy skrypt będzie wypisywał na ekranie tekst. Posłużymy się do tego instrukcją document.write. Document jest to obiekt JavaScript, który reprezentuje aktualnie wyświetlaną stronę, natomiast write - to jego metoda, czyli funkcja wykonująca określone działania na obiekcie - w tym wypadku wypisuje tekst. Nasz tekst umieszczamy w nawiasach, jako argumenty wywołania metody. Ogólnie postępujemy następująco:
obiekt.metoda( argumenty metody )
Zatem nasz standardowy program "Hello World" będzie wyglądał następująco:
document.write("Witaj świecie!")
Wewnątrz możemy używać znaczników HTML, dbając oczywiście o to, żeby je w odpowiednich miejscach otwierać i zamykać:
document.write("< h1> Strona tytułowa< /h1>")
document.write("< b> < a href='spis.htm'> Spis treści</a> < /b>")
Tu zwróćmy uwagę na pewną istotną rzecz: otóż łańcuch znaków przekazywany metodzie write ograniczony jest z obu stron podwójnym cudzysłowem. Ale co zrobić w przypadku, gdy umieszczamy wewnątrz znaczniki HTML, których atrybuty również używają cudzysłowia? Jeżeli użyjemy " popełnimy błąd, gdyż JavaScript pomyśli, że zakończyliśmy wprowadzanie łańcucha znakowego do metody write, podczas gdy za znakiem " znajduje się jeszcze to, co chcemy wypisać w dokumencie. Dlatego musimy stosować zamiennie znaki " oraz '. Jeżeli będziemy pamiętali o tym, że muszą się one parami otwierać i zamykać, możemy wielokrotnie zagnieżdżać jedne w drugich, przy czym stosując przemiennie: "1 '2 "3 - 3" 2' 1".
A co zrobić żeby wypisać znak cudzysłowu na stronie, lub użyć innego znaku specjalnego? Znaki takie poprzedzamy backslashem - czyli \ lub specjalnymi sekwencjami podstawienia HTML
document.write("Na ekranie zobaczysz< br> C:\\>")
document.write("Polecam film \"Wladca Pierścieni\"")
document.write("< b> < a href=\"spis.htm\"> Spis treści< /a> </b>")
2.Zmienne
Metoda write w powyższych przykładach przyjmuje jako argument string - czyli łańcuch znakowy - dlatego jest on umieszczony w cudzysłowu. Można jako argument podać liczbę całkowitą (integer) lub zmiennoprzecinkową (float):
document.write(2004)
Jeżeli chcemy korzystać w skrypcie z długich tekstów, bądź wypisywać skomplikowane liczby, wygodnie jest przypisać je do zmiennej. W JavaScript nie musimy deklarować, jakiego typu jest zmienna. Poza tym, typ zmiennej elastycznie dopasowuje się do naszych potrzeb, dlatego nic nie stoi na przeszkodzie, aby przypisywać na zmianę typ łańcuchowy i całkowitoliczbowy. Jedyne co musimy zrobić, to powiadomić przeglądarkę o zmiennej. Robi się to poprzez instrukcję
var:
var nazwa_zmiennej
Nazwy zmiennych zaczynamy od litery i pozostajemy wierni zasadzie, że składa się ona z liter, cyfr i znaku podkreślenia _. Dodatkowo dbamy o to, żeby nazwa reprezentowała coś sensownego - czyli była samotłumacząca się - żebyśmy w przyszłości nie zastanawiali się, co to za zmienna i po co była użyta w kodzie.
var imie="Janek" // zmienna typu string
var wiek=20 // zmienna typu integer
document.write("Nasz gość ma na imie "+imie+".")
document.write(imie+" ma "+wiek+" lat")
3 Operatory
W dwóch powyższych linijkach kodu użyliśmy operatora + łączenia stringów. Dzięki niemu możemy wypisywać złożone zdania, zmieniające się w zależności od zmiennych. Jeżeli przy łączeniu różnych typów zmiennych występuje string i operator łączenia +, pozostałe zmienne są przekształcane również na string.
Zestawienie operatorów używanych w JavaScript:
Operatory Arytmetycze
Operator Opis Przykład Wynik
+ Dodawanie x=3
x=x+4 7
- Odejmowanie x=4
x=6-x 2
* Mnożenie x=3
x=x*5 15
/ Dzielenie 10/5
9/2 2
4.5
% Modulo (reszta z dzielenia) 4%3
12%8
8%2 1
4
0
++ Zwiększanie o 1 x=2
x++ x=3
-- Zmniejszanie o 1 x=4
x-- x=3
Operatory przypisania
Operator Przykład Równoważne z
= x=y
+= x+=7 x=x+7
-= x-=3 x=x-3
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=x%y
Operatory porównania
Operator Opis Przykład
== jest równe 2==3 wynik:fałsz
!= nie jest równe 2!=3 wynik:prawda
> jest większe 25>3 wynik:fałsz
< jest mniejsze 2<3 wynik:prawda
>= większe lub równe 25>=3 wynik:fałsz
<= mniejsze lub równe 2<=3 wynik:prawda
Operatory logiczne
Operator Opis Przykład
&& i x=3
y=4
(x < 9 && y > 2)
wynik:prawda
|| lub x=3
y=4
(x==8 || y==6)
wynik:fałsz
! zaprzeczenie x=3
y=4
!(x==y) wynik:prawda