Prezentowane materiały są przeznaczone dla uczniów szkół ponadgimnazjalnych. Autor artykułu: mgr Jerzy Wałaszek, wersja1.0 |
©2010 mgr
Jerzy Wałaszek |
Języki programowania dzielimy na dwa rodzaje:
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.
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 NVU i zapisz stronę w przygotowanym wcześniej katalogu. Przejdź do zakładki "Źródło" i w sekcji HEAD lub 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 Internet Explorer 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
21 = 2
22 = 4
23 = 8
24 = 16
25 = 32
26 = 64
27 = 128
28 = 256
29 = 512
210 = 1024
211 = 2048
212 = 4096
213 = 8192
214 = 16384
215 = 32768
216 = 65536
217 = 131072
218 = 262144
219 = 524288
220 = 1048576
221 = 2097152
222 = 4194304
223 = 8388608
224 = 16777216
225 = 33554432
226 = 67108864
227 = 134217728
228 = 268435456
229 = 536870912
230 = 1073741824
231 = 2147483648
232 = 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:
onMouseOver - kursor myszki pojawił się ponad powierzchnią
dokumentu zajętą przez znacznik
onMouseOut - kursor myszki opuścił powierzchnię dokumentu zajętą przez znacznik.
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 skryp: (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.
UWAGA, gdy strona WWW zostanie już przetworzona w całości przez przeglądarkę, nie wolno stosować funkcji document.write(), gdyż usunie ona całą zawartość bieżącego dokumentu i zastąpi ją tekstem przesłanym do funkcji jako parametr. Wypisywanie tekstów na stronach uzyskujemy w takim przypadku inaczej - wykorzystując własności obiektów strony WWW.
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.
I Liceum Ogólnokształcące |
Pytania proszę przesyłać na adres email: i-lo@eduinf.waw.pl
W artykułach serwisu są używane cookies. Jeśli nie chcesz ich otrzymywać,
zablokuj je w swojej przeglądarce.
Informacje dodatkowe