JavaScript programowanie reszta materiałów

Wyświetlanie informacji na stronie i działania na zmiennych

Kilka podstawowych zasad

Pracując z JavaScriptem, powinniśmy pamiętać o kilku fundamentalnych kwestiach. Po pierwsze, interpreter kodu rozróżnia tekst pisany wielkimi i małymi literami. Musimy być więc niezwykle ostrożni, aby nie popełnić błędu – na przykład wywołując wcześniej zdefiniowaną funkcję „program()” za pomocą instrukcji „Program()”. W takim wypadku przeglądarka zwróci błąd, a początkujący programista może mieć duże problemy ze zidentyfikowaniem jego przyczyny. Czynnością należącą już raczej do katalogu dobrych praktyk jest ponadto umieszczanie na końcu każdej instrukcji średnika – głównie w sytuacji, gdy w jednej linii tekstu chcemy zawrzeć kilka poleceń. Ma to często miejsce na przykład podczas konstruowania pętli. Przejrzystości kodu służy także umiejętne stosowanie spacji. Odstępy nie są „widoczne” dla interpretera, ale zdecydowanie ułatwiają naszą pracę ze skryptem lub też zapoznanie się innych użytkowników z jego budową.

Instrukcja document.write

Naszym pierwszym krokiem na drodze do praktycznego opanowania programowania w języku JavaScript będzie stworzenie prostego skryptu, wyświetlającego na ekranie zaprojektowany tekst. Posłużymy się w tym wypadku instrukcją document.write. Document to obiekt JavaScript, który reprezentuje akurat wyświetlaną stronę, write to natomiast jego metoda, czyli funkcja wykonująca określone działania na obiekcie – w tym wypadku wpisująca tekst. Nasz tekst umieszczamy w nawiasach jako argumenty wywołania metody. Postępujemy więc zgodnie z ogólną regułą składni, która wygląda następująco: obiekt.metoda(argumenty metody). Nasz pierwszy program, „Hello World”, będzie więc wyglądał tak:

document.write("Witaj, świecie!");

Listing 7 – zastosowanie metody write

Jako składników tekstu możemy także używać znaczników HTML, dbając 
oczywiście o to, żeby w odpowiednich miejscach otwierać je i zamykać:

document.write("<h1>Strona tytułowa</h1>"); document.write("<b>Spis treści</b>");

Listing 8 – metoda write – użycie znaczników HTML

W tym miejscu powinniśmy zwrócić naszą uwagę na pewien istotny fakt: otóż łańcuch znaków przekazywany metodzie write ograniczony jest z obu stron podwójnym cudzysłowem. Co zrobić zatem w wypadku, gdy w tym łańcuchu będziemy chcieli umieścić znaczniki HTML, których atrybuty również używają cudzysłowu? Jeżeli użyjemy symbolu ", popełnimy błąd, gdyż interpreter JavaScriptu przyjmie, że w tym miejscu zakończyliśmy wprowadzanie łańcucha znakowego do metody write. Aby uniknąć wynikających z tego problemów, musimy stosować zamiennie znaki " oraz '. Jeżeli będziemy pamiętali o tym, że powinny się one parami otwierać i zamykać, możemy wielokrotnie zagnieżdżać jedne w drugich, stosując je przemiennie: "1 '2 "3 – 3" 2' 1".

Nieco łatwiej przyjdzie nam rozstrzygnąć problem ewentualnego użycia cudzysłowu w samym tekście, który chcemy umieścić na stronie. Zarówno cudzysłów, jak i inny znak specjalny powinniśmy w takim wypadku poprzedzić backslashem – czyli znakiem \ lub specjalnymi sekwencjami podstawienia HTML.

document.write("Witamy na naszej stronie filmowej."); document.write("Polecamy film \"Władca Pierścieni\""); document.write("<b><a href='spis.htm'>Spis treści</a></b>");

Listing 9 – metoda write – użycie cudzysłowów w łańcuchu znaków

Zmienne

W przedstawionych wyżej przykładach metoda write przyjmuje jako argument string – czyli łańcuch znakowy – dlatego jest on umieszczony w cudzysłowie. Można jednak jako argument podać również liczbę całkowitą (integer) lub 
zmiennoprzecinkową (float):

document.write(2004)

Listing 10 – metoda write – liczba całkowita

Jeżeli chcemy w naszym skrypcie korzystać z dłuższych tekstów bądź też operować skomplikowanymi liczbami, wygodniej jest przypisać je do zmiennej. W JavaScripcie nie musimy deklarować, jakiego typu zmiennej będziemy używali. Ponadto typ zmiennej elastycznie dopasowuje się do naszych potrzeb, dlatego nic nie stoi na przeszkodzie, aby przypisywać na zmianę typ łańcuchowy i liczb całkowitych. Jedyne, co musimy zrobić, to poinformować interpreter o korzystaniu ze zmiennej. Używamy w tym celu instrukcji postaci: var nazwa zmiennej = wartość zmiennej. Jak w poniższym przykładzie, w którym na ekranie przeglądarki powinien pojawić się tekst opisujący wiek i imię zdefiniowanego wcześniej „użytkownika”:

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

Listing 11 – zastosowanie instrukcji var

Nazwy zmiennych zaczynamy od litery i konstruujemy je w całości z liter, cyfr lub znaku podkreślenia (_). Powinniśmy też zadbać, aby nazwa była zrozumiała dla osoby czytającej kod – na przykład wiązała się określonym elementem czy funkcją. Wszystko to oczywiście po to, byśmy w przyszłości nie musieli się zastanawiać, z jakich przyczyn daną zmienną w kodzie umieściliśmy.

Operatory

Operatory służą dokonywaniu działań na wartościach zmiennych. Już w powyższym przykładzie zastosowania funkcji var użyliśmy operatora łączenia łańcuchów tekstu – +. Stosując go, możemy wpisywać do ciągu złożone zdania, zmieniające się w zależności od wartości wprowadzanych zmiennych. Należy przy tym pamiętać, że jeśli przy łączeniu różnych typów zmiennych występuje łańcuch znakowy (string) i operator łączenia +, pozostałe zmienne są również przekształcane na typ string.

Ważniejszym jeszcze od manipulacji tekstem zastosowaniem operatorów będą oczywiście działania matematyczne. Możemy przy tym wykorzystać szeroką ich gamę – JavaScript oddaje nam do dyspozycji nie tylko operatory arytmetyczne, ale także logiczne oraz operatory przypisania i porównania. Poniższe tabele w sposób wyczerpujący prezentują wszystkie dostępne nam możliwości.

Operatory arytmetyczne
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
++		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:prawda
<	jest mniejsze	2<3 wynik:prawda
>=	większe lub równe	25>=3 wynik:prawda
<=	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