Informatyka dla klas III

JavaScript

Języki programowania dzielimy na dwa rodzaje:

1. Języki kompilowane - programista tworzy kod źródłowy w edytorze tekstu, następnie ten kod jest zamieniany na binarne instrukcje dla procesora przez kompilator. Przykładami języków kompilowanych są C, C++, Pascal.
2. Języki interpretowane - programista tworzy kod programu za pomocą odpowiednich reguł. W fazie wykonania kod jest analizowany i wykonywany przez tzw. interpreter. Interpreter rozpoznaje w kodzie odpowiednie rozkazy i wykonuje dla nich właściwe procedury. W tym przypadku tekst programu jest bezpośrednio programem wykonywanym. Język JavaScript jest właśnie językiem interpretowanym.

Programy w języku JavaScript będziemy nazywali skryptami. Skrypty mogą być osadzane w prosty sposób wewnątrz plików html. Wykonawcą skryptów JavaScript jest przeglądarka internetowa, która zawiera odpowiedni interpreter. Składnia języka JavaScript bardzo przypomina składnię języka C++.

Istnieje kilka metod dołączania skryptu JS do kodu HTML strony WWW, które teraz kolejno zademonstrujemy.

Uruchom edytor Bluefish i zapisz stronę w przygotowanym wcześniej katalogu. W sekcji BODY strony WWW umieść następujący wpis:

<script type="text/javascript">
    // To jest mój pierwszy skrypt
    document.write("<b>Witaj w <u>JavaScript</u></b><br><i>To jest wynik pracy skryptu.</i><br>");
    for(i = 1; i <= 15; i++) document.write(i + " ");
</script>

Po wyświetleniu tej strony w przeglądarce Firefox pojawi się napis:

Witaj w JavaScript
To jest wynik pracy skryptu
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Całość naszego skryptu umieszczona jest wewnątrz znacznika <script>. W znaczniku otwierającym powinniśmy dodać atrybut type="text/javascript". Atrybut ten określa język skryptu - w naszym przypadku jest to oczywiście JavaScript.

Operacje wejścia/wyjścia w JavaScript różnią się od operacji we/wy w C++. Do wyprowadzania danych używamy tutaj obiektu document, który odnosi się do całej strony WWW. Obiekt ten posiada wiele funkcji, które umożliwiają obsługę różnych jego cech. Funkcja document.write(tekst) zapisuje tekst na stronie WWW. Tekst może zawierać znaczniki HTML, które posłużą do jego sformatowania. W naszym tekście posłużyliśmy się czterema znacznikami:

<b>...</b> - pogrubia objęty tekst (b - ang. bold = pogrubiony)
<u>...</u> - podkreśla objęty tekst (u - ang. underlined = podkreślony)
<i>...</i> - zapisuje objęty tekst kursywą (i - ang. italics = pismo pochyłe)
<br> - przechodzi z wydrukiem do nowego wiersza

Ostatnim elementem naszego skryptu jest pętla for, którą znamy z języka C++. Składnia tej pętli jest identyczna jak w języku C++. Oprócz pętli for, w JavaScript mamy pętlę while oraz do...while. Również w znany sposób możemy korzystać z instrukcji if(), switch(), instrukcji przypisania i modyfikacji. Pętla for wykonuje się 15 razy. W każdym obiegu wypisujemy numer obiegu oraz jedną spację.

Tak umieszczony skrypt jest wykonywany w czasie przetwarzania strony WWW przez przeglądarkę internetową. W dokumencie html możemy osadzać dowolną ilość skryptów. Jeśli zawierają one kod bezpośredni, to zostaną wykonane w momencie ładowania i wyświetlania strony WWW - później zobaczymy jak wykonywać kod skryptu w odpowiedzi na działania użytkownika.

Jeśli wiele stron wykonuje taki sam skrypt, to zamiast umieszczać go w każdej z nich, możemy cały skrypt umieścić w pliku tekstowym i zapisać ten plik obok pliku strony. Pliki JavaScript posiadają zwykle rozszerzenia js i możemy je przygotować w zwykłym notatniku Windows.

Przekopiuj do notatnika poniższy skrypt i zapisz go w tym samym katalogu co strona w pliku o nazwie "kod.js".

// To jest mój drugi skrypt

document.write("<b>Skrypt nr 2</b><br>")

p = 1

for(i = 1; i <= 32; i++)
{
   p *= 2
   document.write("2<sup>" + i + "</sup> = " + p + "<br>")
}  

W skrypcie posługujemy się dwoma zmiennymi p  oraz i. Zwróć uwagę, że zmiennych tych nie deklarowaliśmy, jak było to obowiązkowe w języku C++. Powodem jest to, iż zmienne w skryptach Java nie posiadają stałych typów, lecz typy dynamiczne. Zmienna może przechowywać tekst, liczbę lub obiekt. Zatem zmiennych nie musimy deklarować (chociaż istnieje odpowiednie polecenie var), ale przed pierwszym użyciem musimy nadawać wartość. Kolejnym uproszczeniem w stosunku do C++ jest brak obowiązku kończenia każdej instrukcji średnikiem (jego stosowanie nie jest też zabronione, więc jeśli jesteś do tego przyzwyczajony, stosuj średniki).

Teraz zastąp poprzedni znacznik <script> na stronie WWW następującym tekstem:

<script type="text/javascript" src="kod.js"></script> 

W tym przypadku znacznik <script> nie obejmuje kodu JavaScript. Atrybut src (ang. source = źródło) informuje przeglądarkę, że tekst skryptu umieszczony jest w zewnętrznym pliku o nazwie kod.js. Plik ten zostaje pobrany, a zawarty w nim kod uruchomiony. Na ekranie otrzymamy 32 kolejne potęgi liczby 2.

Skrypt nr 2
2¹ = 2
2² = 4
2³ = 8
2⁴ = 16
2⁵ = 32
2⁶ = 64
2⁷ = 128
2⁸ = 256
2⁹ = 512
2¹⁰ = 1024
2¹¹ = 2048
2¹² = 4096
2¹³ = 8192
2¹⁴ = 16384
2¹⁵ = 32768
2¹⁶ = 65536
2¹⁷ = 131072
2¹⁸ = 262144
2¹⁹ = 524288
2²⁰ = 1048576
2²¹ = 2097152
2²² = 4194304
2²³ = 8388608
2²⁴ = 16777216
2²⁵ = 33554432
2²⁶ = 67108864
2²⁷ = 134217728
2²⁸ = 268435456
2²⁹ = 536870912
2³⁰ = 1073741824
2³¹ = 2147483648
2³² = 4294967296

W podanych powyżej metodach dołączania skryptów do stron WWW kod programu jest uruchamiany w czasie ładowania strony, gdy przeglądarka analizuje jej kod i wyświetla ją na ekranie. Często jednakże chcemy wykonywać określone operacje w reakcji na działania użytkownika - np. ruchy myszką, naciśnięcia przycisków myszki lub klawiszy. Umożliwiają nam to tzw. zdarzenia, na które reagują znaczniki html. W odpowiedzi na określone zdarzenie przeglądarka może wykonać wskazany skrypt.

Usuń ze strony html poprzednio wprowadzony znacznik <script>. W sekcji BODY dodaj następujący fragment:

<p>TEKST NR 1</p>
<p>TEKST NR 2</p>
<p>TEKST NR 3</p>

Zdefiniowaliśmy trzy paragrafy. Do tworzenia paragrafów w języku HTML używamy znaczników <p>. Jeśli uruchomisz stronę w przeglądarce IE, to zobaczysz poniższy tekst:

TEKST NR 1

TEKST NR 2

TEKST NR 3

Zastąp każdy znacznik <p> wpisem:

<p onMouseOver="this.style.backgroundColor='Red'" onMouseOut="this.style.backgroundColor='White'"> 

Co zrobiliśmy? Otóż poinformowaliśmy przeglądarkę, że w przypadku dwóch wybranych zdarzeń związanych ze znacznikami <p> ma wykonywać wskazany kod JavaScript. Te dwa zdarzenia to:

W przypadku onMouseOver ma być wykonany kod: this.style.backgroundColor='Red'. Kod ten ustawia kolor tła paragrafu na czerwony.

Przy onMouseOut ma być wykonany kod this.style.backgroundColor='White', który z kolei przywraca kolor biały dla tła paragrafu.

Zatem gdy kursor myszki wchodzi w obszar paragrafu, tło tego paragrafu zmienia się na czerwone. Gdy kursor myszki wychodzi poza ten obszar, tło powraca do koloru białego. Zwróć uwagę, iż w skrypcie JS odwołaliśmy się do paragrafu za pomocą słowa this. Jest to słowo specjalne i w tym przypadku oznacza obiekt, który wywołał dane zdarzenie, czyli ten obiekt, a nie jakiś inny w dokumencie html. W obiekcie this odwołujemy się do własności style.backgroundColor (ważna pisownia dużych i małych liter!). Własność ta określa bieżący kolor tła. Nadajemy jej symboliczną wartość Red lub White, które odpowiednio zinterpretuje przeglądarka. Określenia kolorów są tekstem i muszą być umieszczone w apostrofach, gdyż cudzysłów został już użyty do samego skryptu JS.

Jeśli kod JS dla zdarzenia jest długi i często się powtarza, to możemy wykorzystać funkcję JavaScript. W tym celu osadzamy na stronie skrypt: (kod może być w zewnętrznym pliku, jak w poprzednim przykładzie, jeśli powtarza się na wielu stronach):

<script type="text/javascript">

function z1(v)
{
    v.style.backgroundColor="Green"
}

function z2(v)
{
    v.style.backgroundColor="White"
}

</script> 

Skrypt ten umieśćmy w sekcji HEAD. Jeśli skrypt zawiera funkcje, to nie będą one automatycznie wykonane w momencie tworzenia strony. Muszą zostać wywołane przez inny kod JS. W naszym skrypcie są dwie funkcje z1() i z2(). Obie przyjmują dodatkowy parametr v, który określa obiekt do zmiany koloru tła. Funkcja z1() ustawia tło zielone, a z2() ustawia tło białe. Zwróć uwagę, że teraz możemy umieścić nazwy kolorów w cudzysłowach, gdyż nie używamy ich tutaj do objęcia kodu JS.

Teraz zastąpmy każdy znacznik <p> poniższym wpisem:

<p onMouseOver="z1(this)" onMouseOut="z2(this)">

Zdarzenie onMouseOver wywołuje funkcję z1(), do której zostanie przekazany obiekt paragrafu wywołujący to zdarzenie. W tym paragrafie funkcja z1() ustawi tło zielone. Zdarzenie onMouseOut wywołuje funkcję z2() z obiektem paragrafu. Funkcja ustawi w tym paragrafie biały kolor tła.

Zastąp trzy paragrafy na stronie wpisem:

<p align=center onClick="z3(this)">KLIKNIJ MNIE</p> 

Następnie skrypt zastąp poniższym:

<script type="text/javascript">

t = 1;

function z3(v)
{
    if(t == 1) v.innerHTML = "<b><i>AUAJ! NO, CO TY?</i></b> KLIKNIJ JESZCZE RAZ!"
    else       v.innerHTML = "KLIKNIJ MNIE"
    t *= -1
}

</script> 

Funkcja z3() zmienia tekst wewnętrzny znacznika w zależności od zmiennej t. Zmienna t jest globalna i inicjowana na 1 podczas przetwarzania strony WWW przez przeglądarkę. Później każde wywołanie z3() zmienia ją na -1 lub 1. Własność innerHTML odnosi się do kodu HTML objętego znacznikiem. Zmiana powoduje zastąpienie wyświetlanego przez znacznik tekstu nowym tekstem. Funkcja ta jest wywoływana przez zdarzenie onClick, które powstaje po kliknięciu obszaru znacznika lewym klawiszem myszki.