Czym jest JavaScript? 1

Transkrypt

1 JavaScript - wprowadzenie -9h 1. Co to jest JavaScrit 2. JavaScript a Java 3. Umieszczanie skryptu na stronie 4. Kod źródłowy zagnieżdżony w HTML 5. Kod źródłowym umieszczony w oddzielnym pliku 6. Jak zadbać o przeglądarki nie obsługujące JavaScript 7. Komentarze do kodu 8. Instrukcje dokument.write 9. Zmienne i operatory Czym jest JavaScript? 1 JavaScript jest językiem skryptowym służącym do tworzenia niewielkich programów rozszerzających możliwości języka HTML w zakresie opisu stron WWW. JavaScript jak sama nazwa wskazuje ma wiele wspólnego z językiem programowania Java, jednakże nie należy tych dwóch jezyków mylić. Java jest w pełni obiegowym językiem programowania, za pomocą ktrego można tworzyć skompilowane aplikacje niezależnie od platformy sprzętowej. Poniżej zostały przedstawione najważniejsze różnice pomiędzy językami Java i JavaScript JavaScript Język interpretowany na komputerze klienta. Język oparty na predefiniowanych obiektach, niepozwalający jednak na stosowanie mechanizmów programowania obiektowego jak np. dziedziczenie Kod programu zagnieżdżony w kodzie HTML Zmienne i ich typ nie muszą być deklarowane przed użyciem Odwołanie do obiektów i funkcji są wykonywane podczas uruchamiania programu Ze względów bezpieczeństwa nie ma możliwości zapisu na dysk twardy Java Język kompilowany do b-kodu, wykonywanego następnie za pomocą wirtualnej maszyny Javy na komputerze klienta Język zorientowany obiektowo z obsługą wszystkich mechanizmów obiektowości. Kod programu jest niezależny od kodu HTML i znajduje sie w oddzielnych plikach Zmienne i ich typ muszą być zadeklarowane przed ich użyciem w programie Wszystkie odwołania do obiektów i funkcji są sprawdzane na etapie kompilacji Ze względów bezpieczeństwa aplety, w przeciwieństwie do aplikacji, nie mają

2 możliwości zapisu na dysk twardy. Co będzie potrzebne? Przede wszystkim przynajmniej podstawowa znajomość języka HTML. Do pisania samego kodu wystarczy Notatnik, chociaż osobiście polecam edytory:) Oczywiście należy mieć zainstalowaną przeglądarkę WWW: Microsoft Internet Explorer, Netscape Navigator, Opera lub Mozilla. Jak dodać skrypt do strony? 1. Kod źródłowy zagnieżdżony w HTML. Kod JavaScript musi być zawarty pomiędzy znacznikami HTMLa <script> i </script>: //dla HTML5 <script>...instrukcje skryptu </script> //dla HTML4 <script type="text/javascript">...instrukcje skryptu </script> Dodatkowymi atrybutami, które możemy użyć dla tego znacznika, są: charset="..." - który ustawia kodowanie dla skryptu. Najlepiej używać kodowania UTF-8 <script type="text/javascript" charset="utf-8">... </script> defer="defer" - powoduje rozpoczęcie wykonywania skryptów dopiero po załadowaniu całej strony (stosowane dla IE) <script type="text/javascript" defer="defer">... </script> src="..." - podaje adres pliku ze skryptami js <script type="text/javascript" src="..."></script> Jedna strona może zawierać wiele skryptów, które można zawierać zarówno w sekcji body jak i head. Przyjmuje się o ile to możliwe należy korzystać z sekcji head i nie przeplatać kodu html z kodem JavaScript. Kod HTML strony używającej JavaScript wygląda więc następująco: <html> <head> 2

3 <script type="text/javascript"> kod skryptu </script> <script type="text/javascript"> kod skryptu /* może być więcej rozgraniczonych znacznikami <script> kodów na jednej stronie */ </script> </head> <body> <script type="text/javascript"> tu - w dowolnym miejscy sekcji BODY - też można umieścić kod źródłowy skryptu </script> </body> </html> 2. Kod źródłowy zamieszczony w oddzielnym pliku. Bardzo dobrą praktyką jest wielokrotne wykorzystywanie napisanego wcześniej kodu. Aby pozbyć się problemu każdorazowego przeszukiwania dokumentów, otwierania, kopiowania i wklejania, kod źródłowy skryptu można umieścić w osobnym pliku. Jest to plik tekstowy o rozszerzeniu *.js, a kod skryptu pisany jest już bezpośrednio, bez znaczników <script>. O tym, że kod źródłowy jest w pliku zewnętrznym informujemy przeglądarkę wykorzystując atrybut src: <script type="text/javascript" src="nazwa_pliku.js"></script> Jak zadbać o przeglądarki nie obsługujące JavaScriptu? Mimo, że prawie wszystkie używane dziś przeglądarki nie będą miały problemu z kodem naszych skryptów - to nie zaszkodzi, jeżeli zadbamy o użytkowników, którzy takiego komfortu nie mają. Żeby oszczędzić im trudnych do przewidzenia zachowań przeglądarki lub komunikatów o błędach, kod umieszcza się w HTML-owych znacznikach komentarza:  Dodatkowo przed znacznikiem zamykającym komentarz dodaje się dwa znaki "/", żeby zadbać o Netscape Navigatora. Można dodatkowo poinformować użytkowników, że strona zawiera skrypty, które nie zostały wykonane przez ich przeglądarkę. W tym celu stosuje się znaczniki <noscript>. Uwzględniając wszelkie powyższe wskazówki, szablon naszej strony HTML będzie wyglądał następująco: 3

4 <html> <head> <script type="text/javascript">  </script> </head> <body> <noscript> Twoja przeglądarka nie obsługuje JavaScriptu. Aby zobaczyć stronę w pełnej funkcjonalności, zainstaluj inną przeglądarkę: Internet Explorer, Netscape Navigator, Mozilla, Opera... </noscript> kod HTML strony </body> </html> Komentarze do kodu. Bardzo pomocna rzecz, która ułatwia zorientowanie się w kodzie, który gdzieś kiedyś stworzyliśmy. Komentarze towarzyszą wszystkim językom programowania, a ponieważ i JavaScript umożliwia ich stosowanie, będziemy je umieszczali obok zawiłych instrukcji naszych skryptów. Mamy do wyboru dwa typy komentarzy: liniowy: blokowy: Zaczyna się od dwóch ukośników a kończy przy przejściu do następnej linii. Oznacza to, że przeglądarka zignoruje wszystko za znacznikiem // aż do końca linii, w której znacznik ten występuje. Rozpoczyna się od sekwencji: /* a kończy sekwencją: */. Oznacza to, że może on ciągnąć się przez wiele linii, przy czym niemożliwe jest jego zagnieżdżanie (czyli stosowanie jednego komentarza w innym). Dzięki komentarzom, możemy poinformować przeglądarkę, że nie obsługuje skryptów nie używając znacznika <noscript>. Powyższy szablon zmieni się na: 4

5 <html> <head> <script type="text/javascript"> // Twoja przeglądarka nie obsługuje JavaScriptu. /* Aby zobaczyć stronę w pełnej funkcjonalności, zainstaluj inną przeglądarkę: Internet Explorer, Netscape Navigator, Mozilla, Opera... */  </script> </head> <body> kod HTML strony </body> </html> W takiej sytuacji, jeżeli przeglądarka obsługuje JavaScript, będzie wiedziała, że pierwsze trzy linie kodu są komentarzami i nie wyświetli ich. W przeciwnym razie, znacznik <script> zostanie zignorowany i wyświetlone zostanie wszystko aż do początku komentarza HTML - czyli <!--. Polecam jednak stosowanie pierwszego scenariusza - stosowanie <noscript>, ponieważ przeglądarki tekstowe - takie jak lynx - rozpoznają znaczniki komentarza JavaScript (które są identyczne w wielu innych językach programowania jak Java i C++) i nie wyświetlą komunikatu, który chcemy przekazać użytkownikowi. Znacznik <NOSCRIPT> Z pomocą komentarzy możemy również poinformować użytkownika przeglądarki nieobsługującej JavaScript, że strona taki skrypt zawiera, tylko nie został wykonany. Kod, który po wczytaniu do przeglądarki nieobsługującej JavaScript wyświetli stosowny komunikat może mieć postać: <HTML> <HEAD> <meta http-equiv="content-type" content="text/html;charset=iso "> </HEAD> <SCRIPT language = "JavaScript"> <!-- Ukrycie przed przeglądarkami nieobsługującymi JavaScript // Twoja przeglądarka nie obsługuje JavaScript. // Sugerujemy użycie przeglądarki Microsoft Internet Explorer lub Natscape Navigator. document.write("ten tekst został napisany dzięki JavaScript") 5

6 // Koniec kodu JavaScript --> </SCRIPT> <BODY> </HTML> Przeglądarka nieobsługująca skryptów po napotkaniu nieznanej sobie etykiety <SCRIPT> ignoruje ją, następnie wyświetla dwa kolejne wiersze traktując je jako zwykły HTML. Następne wiersze są dla niej komentarzem, wiec je pomija. Natomiast dla przeglądarki obsługującej skrypty komentarzem są dwa wiersze następujące po etykiecie <SCRIPT> i to one są pomijane, natomiast kod document.write("ten tekst został napisany dzięki JavaScript"); jest interpretowany i wykonywany. Ponadto przeglądarki Netscape Navigator oraz Internet Explorer, od wersji 3.0, akceptują dodatkowy znacznik <NOSCRIPT>. Wówczas tekst, który ma być wyświetlony w przeglądarce nieobsługującej skryptów umieszamy pomiędzy znacznikami <NOSCRIPT> i </NOSCRIPT> <HTML> <HEAD> <meta http-equiv="content-type" content="text/html;charset=iso "> </HEAD> <SCRIPT language = "JavaScript">  </SCRIPT> <NOSCRIPT> Twoja przeglądarka nie obsługuje JavaScript. Sugerujemy użycie przeglądarki Internet Explorer lub Natscape Navigator. </NOSCRIPT> <BODY> </BODY> </HTML> Przykładowy skrypt: 6

7 Instrukcja document.write Instrukcja document.write()pozwala wyświetlić tekst w oknie przeglądarki. document to obiekt, który reprezentuje aktualną stronę, write to funkcja działajaca na obiekcie document i wyświetlająca tekst na ekranie. Tekst podajemy jako argument w nawiasach: ("Jakiś tam tekst"). Ogólnie można zapisać obiekt.metoda(argumenty metody) Taki ciąg jest instrukcją i powinien zostać zakończony średnikiem. W tym przypadku nie jest to konieczne, lecz gdy chcemy zapisać kilka instrukcji użycie średnika staje się niezbędne: document.writeln("witaj Wędrowcze"); document.write("na tej stronie"); Funkcja writeln() dziala tak samo jak write(), przy czym na końcu wyświetlonego ciągu znaków dodaje znak przejścia do nowego wiersza. Warunkiem poprawnego działania jest ujęcie całości kodu pomiędzy znacznikami <PRE> i </PRE>, czyli w bloku tekstu preformatowanego. <HTML> <HEAD> <meta http-equiv="content-type" content="text/html;charset=iso "> </HEAD> <PRE> <SCRIPT language = "JavaScript"> document.writeln("<b>ten tekst został napisany</b>"); document.write("<b>dzięki JavaScript</b>") </SCRIPT> </PRE> <BODY> A to jest już normalny dokument HTML </BODY> </HTML> 7

8 Efekt działania będzie następujący: Okno dialogowe Pokażemy teraz jak wyświetlić na ekranie okno dialogowe z zapytaniem lub informacją o wystąpieniu jakiegoś zdarzenia. Do wyświetlenia okna informującego użytkownika o wystąpieniu zdarzenia, najczęściej chodzi o sytuację, w której wystąpił błąd, używamy metody alert(). Komunikat, który jest tekstem wyświetlonym w okienku ujmujemy w nawiasy i cudzysłowy. W tego typu okienku mamy do dyspozycji jedynie przycisk OK. <SCRIPT language = "JavaScript">  </SCRIPT> Działanie skryptu można wypróbować klikając na poniższy przycisk. Jeśli chcemy wyświetlić okno dialogowe z przyciskami OK i Cancel/Anuluj stosujemy metodę confirm <SCRIPT language = "JavaScript">  </SCRIPT> Wykorzystaliśmy tutaj obiekt button, czyli klasyczny przycisk, który jest elementem formularza. Jego naciśnięcie spowodowało wyświetlenie okna informacyjnego. Wstawianie aktualnej daty Aby pobrać z komputera bieżącą datę systemową, a następnie wyświetlić ją na stronie trzeba skorzystać z obiektu daty. Składnia polecenia ma postać: 8

9 data = new Date() Po wykonaniu powyższej komendy zmienna new Date zawiera datę i czas ustawiony w komputerze użytkownika. Pobrana w ten sposób data może zostać wyświetlona za pomocą document.write(date()) Zapewne większość użytkowników chciałaby zdecydować o wyglądzie wyświetlanej daty. W tym celu trzeba odwołać się bezpośrednio do dnia, miesiaca i roku zapisanego w obiekcie Date, a następnie samodzielnie stworzyć napis przedstawiający datę. Możliwość dostępu do poszczególnych pól obiekty Date dają metody getday, getmonth i getyear. Do informacji o dacie można również dołaczyć informacje o czasie. Wówczas nalezy skorzystać z metody gethours, getminutes, getseconds, aby zapisać wartości godzin, minut i sekund do wybranych zmiennych. Nastepnie zmienne te nalezy umieścić w łańcuchu tekstowym wyświetlanym na ekranie. Zobaczmy jak będzie wyglądał cały kod skryptu <SCRIPT language = "JavaScript">  </SCRIPT> Witam wszystkich. Dzisiaj jest rok. Godzina: 11:20 Ostatnia aktualizacja Użycie składni document.lastmodified powoduje wypisanie ostatniej modyfikacji dokumentu. Nie jest jasne zachowanie Netscape Navigatora, który na jednych serwerach pokazuje poprawną datę (na dysku lokalnym zawsze), na innych zaś - datę 1 stycznia 1970 roku! To z kolei jest spowodowane nierozumieniem przez Netscape wszystkich używanych na świecie sposobów zapisu lokalnego czasu. Jeśli serwer przyśle datę w formacie zrozumiałym, wtedy Netscape ją prawidłowo pokazuje - jeśli nie, może pokazywać 1970 rok. Opera zachowuje się podobnie jak Netscape. Na dysku pokazuje poprawną datę, a na serwerze "niezrozumiałym" pokazuje 1 stycznia 1970 roku. Poniższy skrypt pokazuje datę (miesiąc/dzień/rok) i czas ostatniej aktualizacji dokumentu. 9

10 <SCRIPT language = "JavaScript">  </SCRIPT> A wygląda to tak: Ostatnia aktualizacja: 12/12/ :20:53 Elementy języka JavaScript 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") Zmienne W języku JavaScript do dyspozycji mamy cztery typy danych: liczbowy służy do reprezentowania wszelkiego rodzaju liczb; dopuszczalne są trzy systemy notacji: system dziesiętny system ósemkowy system szesnastkowy wartości logiczne zmienne tego typu mogą przyjmować tylko dwie wartości: TRUE i FALSE; używane przy konstruowaniu wyrażeń logicznych, porównywania danych, wskazania, czy dana operacja zakończyła się sukcesem łańcuchy znaków dowolne ciągi znaków zawarte pomiędzy znakami cudzysłowów lub apostrofów 10

11 wartość NULL daje w wyniku wartość zerową; może być pustym ciągiem tekstowym, albo liczbą o wartości 0; w przypadku null nie występuje żadna wartość, a zmienna tego typu nie jest definiowana; JavaScript zwraca wartość null, jeśli zostaje wciśnięty przycisk Anuluj/Cancel. Zmienne są to konstrukcje programistyczne, które pozwalają przechowywać dane. Każda zmienna ma swoją nazwę, która ją jednoznacznie identyfikuje. W JavaScript zmiennych nie musimy deklarować przed użyciem, każda zmienna może przyjmować dane z dowolnego typu, ponadto typ danych przypisanych zmiennej może się również zmienić. Rozpatrzmy przykład: <HTML> <HEAD> <meta http-equiv="content-type" content="text/html;charset=iso "> </HEAD> <SCRIPT language = "JavaScript">  </SCRIPT> <BODY> </BODY> </HTML> Po wczytaniu takiej strony ukaże się napis: Przeanalizujmy: 1. zadeklarowaliśmy dwie zmienne o nazwach zmienna_1 i zmienna_2 2. zmiennej zmienna_1 przypisaliśmy ciąg znaków Urodziłam się w 3. zmiennej zmienna_2 przypisaliśmy wartość liczbową zmiennych tych użyliśmy jako argumentów funkcji write() 5. poszczególne łańcuchy tekstowe połączyliśmy operatorem + aby otrzymać jeden, który ukazał się na ekranie (tzw. konkatencja łańcuchów znakowych) 11

12 Javascript udostępnia metodę typeof(), dzięki której możesz sprawdzać typ danych: var n = 3; document.write( typeof(n) ) //wypisze się "number" var s = "napis"; document.write( typeof(s) ) //wypisze się "string" var b = true; document.write( typeof(b) ) //wypisze się "boolean" var u; document.write( typeof(u) ) //wypisze się "undefined" Wprowadzanie danych Teraz zajmiemy się oknami dialogowymi, pozwalającymi na podanie pewnych danych przez użytkownika. Potrzebna nam będzie tutaj funkcja prompt(). Zobaczmy: Na ekranie pojawia się okno dialgowe pozwalające na podanie imienia przez użytkownika, a po wpisaniu imienia i kliknięciu OK pojawia się kolejne z napisem Cześć (imię). Natomiast gdy użytkownik wciśnie Anuluj, pojawia się komunikat z zapytaniem "Dlaczego nie chcesz podać swojego imienia?". Zobaczmy w takim razie jak wygląda kod skryptu. <HTML> <HEAD> <meta http-equiv="content-type" content="text/html;charset=iso "> </HEAD> <SCRIPT language = "JavaScript">  </SCRIPT> <BODY> <form> <input type="button" name="button1" value="naciśnij mnie" onclick="nacisnij()"> </form> </BODY> </HTML> 12

13 Na początku deklarujemy zmienną imie i przypisujemy jej od razu wartość zwróconą przez funkcję prompt(), czyli ciąg znaków wprowadzonych przez użytkownika lub wartość null. Następnie za pomocą instrukcji if... else sprawdzamy, czy wartość zmiennej imie jest równa null. Jeśli tak, wykonany zostanie ciąg instrukcji występujący po if. W przeciwnym przypadku wykonany zostanie blok instrukcji po else. if (warunek logiczny) instrukcja do wykonania, jeśli warunek jest prawdziwy else instrukcja do wykonania, jeśli warunek nie jest prawdziwy Kod ten można oczywiście zmodyfikować, tak aby skrypt uruchamiał się zaraz po wczytaniu strony, a tekst wyświetlił się na stronie, a nie w oknie dialogowym. Wówczas cały kod umieszczamy przed znacznikiem <BODY>, pomijamy oczywiście funkcję nacisnij a zamiast instrukcji alert używamy instrukcji wyświetlającej tekst na ekranie, czyli document.write: <HTML> <HEAD> <meta http-equiv="content-type" content="text/html;charset=iso "> </HEAD> <SCRIPT language = "JavaScript">  </SCRIPT> <BODY> </BODY> </HTML> Operatory Zestawienie operatorów używanych w JavaScript: Operatory Arytmetycze Operator Opis Przykład Wynik + Dodawanie x=3 7 x=x+4 - Odejmowanie x=4 x=6-x 2 13

14 * Mnożenie x=3 x=x*5 / Dzielenie 10/5 9/2 % Modulo (reszta z dzielenia) 4%3 12%8 8%2 ++ Zwiększanie o 1 x=2 x++ -- Zmniejszanie o 1 x=4 x x=3 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>30 wynik:fałsz < 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) 14

15 wynik:fałsz! zaprzeczenie x=3 y=4!(x==y) wynik:prawda Operacje na łańcuchach znaków Występuje tu tylko jeden operator: +, który poznaliśmy przy wprowadzaniu zmiennych, gdy łaczylismy poszczególne łańcuchy tekstowe: var zmienna_1 = "Urodziłam się w "; var zmienna_2 = 1979; document.write("<h3>" + zmienna_1 + zmienna_2 +" roku </H3>"); Pierwsze skrypty: Ćw.1. Napisz poniższe skrypty: a) Ćw. 2 Deklaracja zmiennych:  Ćw.3. Komentarze: Przepisz poniższy skrypt: <SCRIPT LANGUAGE = "JavaScript">  document.write ("Jaki miły mamy dzień!") 15

16 // Koniec kodu JavaScript --> /*inny komentarz*/ </SCRIPT> Ćw.4. Napisz skrypt wyświetlający okno powitalne z wprowadzonym imieniem Ćw. 5 Napisz skrypt wyświetlający dowolne okno dialogowe: Przykład 1 zastosowania Javascript: 16

17 Ćwiczenie 6. Zmienne: Ćwiczenie 7. 17

18 Ćwiczenie 8 -instrukcja if Ćwiczenie 9 instrukcja else if Ćwiczenie 10 instrukcja case 18

19 Ćwiczenie 11 pętla for a) b) Ćwiczenie 12 Wypisz liczby parzyste od 1 do 20 19

20 Ćwiczenie 13 petla do while Ćwiczenie 14. Definiowanie funkcji Ćwiczenie 15. Funkcja zwracająca wartość 20

21 Ćwiczenie 16. Funkcje z wartością a) b) 21

22 Ćwiczenie 17 a) b) 22

23 Instrukcje warunkowe: Do stworzenia prostego skryptu wystarczy użyć kilku (lub więcej) instrukcji, które zostaną wykonane sekwencyjnie (jedna po drugiej), tak jak były zapisane. W praktyce jednak takie proste skrypty są rzadkością - zdecydowanie częściej w skrypcie trzeba wykonać (lub nie) dany fragment kodu w zależności od tego czy określony warunek będzie spełniony (lub też odwrotnie). Do tego celu właśnie służą instrukcje warunkowe. Instrukcje warunkowe służą do decydowania który fragment kodu powinien zostać wykonany w zależności od spełnienia określonych warunków; inaczej mówiąc służą do rozgałęzienia ścieżki wykonywania skryptu. Podstawową instrukcją warunkową jest instrukcja if. Wygląda ona następująco: if (warunek) instrukcja; Warunek jest to dowolne wyrażenie zwracające wartość logiczną (typ Boolean), lub wyrażenie które da się skonwertować na taki typ, czyli praktycznie wszystko. Instrukcja jest to natomiast dowolna instrukcja JavaScript. Polecenie warunkowe if można zatem wykorzystać następująco: if (a > 0) alert("a jest większe od zera"); Często zdarza się że zamiast pojedynczej instrukcji trzeba wykonać grupę instrukcji. Aby to zrobić, należy otoczyć je nawiasami klamrowymi : if (a > 0) 23

24 alert("a jest większe od zera"); a = 0xCAFEBABE; Zgrupowane w ten sposób instrukcje nazywa się także instrukcją złożoną. Instrukcja if posiada także możliwość umieszczenia po słowie kluczowym else instrukcji (lub grupy instrukcji), która zostanie wykonana w przypadku gdy warunek nie będzie spełniony: if (a == 0) alert("a jest równe zero"); else alert("a jest różne od zera"); W niektórych przypadkach trzeba sprawdzić kilka różnych warunków, i wykonać odpowiednie instrukcje dla każdego z nich, np. wyświetlić jaki jest znak liczby. W takim przypadku można instrukcję else umieścić bezpośrednio po if: if (a == 0) alert("a jest równe zero"); else if (a > 0) alert("a jest większe od zera"); else alert("a jest mniejsze od zera"); Innym popularnym rozwiązaniem w skryptach JavaScript jest uzależnienie wykonywanych instrukcji od konkretnej wartości zmiennej lub parametru funkcji. Można to rozwiązać poprzez wielokrotne porównywanie zmiennej z kolejnymi wartościami: if (a == 0) alert("a jest równe zero"); else if (a == 1) alert("a jest równe jeden"); else if (a == 2) alert("a jest równe dwa"); else if (a == 3) alert("a jest równe trzy"); else alert("a ma inną wartość"); Taka konstrukcja jest na tyle często używana, że doczekała się specjalnej instrukcji switch. Wewnątrz niej poszczególne wartości umieszczone powyżej w instrukcjach if podaje się po słowie kluczowym case. Jeżeli jest potrzeba wykonania instrukcji występujących w powyższym przykładnie po ostatnim else, należy je umieścić po słowie kluczowym default. Powyższy przykład wyglądał zatem będzie następująco z użyciem instrukcji switch: switch (a) case 0: alert("a jest równe zero"); case 1: alert("a jest równe jeden"); 24

25 case 2: alert("a jest równe dwa"); case 3: alert("a jest równe trzy"); default: alert("a ma inną wartość"); Po instrukcjach case i default można umieścić kilka instrukcji bez konieczności otaczania ich nawiasami klamrowymi. Zwróć także uwagę na słowo kluczowe break umieszczone na końcu każdej z sekcji wewnątrz instrukcji switch. Instrukcja ta mówi w którym momencie ma zostać przerwane wykonywanie instrukcji switch. W przypadku gdyby jej nie było, wykonane byłyby także instrukcje z znajdującej się poniżej sekcji case (lub default). Zapomnienie o wstawieniu break jest przyczyną błędów w skryptach, które niekiedy mogą być trudne do wykrycia. Dlatego wstawiaj zawsze tą instrukcję, a jeżeli masz sytuację że nie chcesz jej wstawiać, umieść komentarz że brak instrukcji break jest zamierzony: switch (a) case 0: b += 2; // Wykonaj takze instrukcje ponizej case 1: b *= 3; alert("b = " + b); default: alert("niepoprawna wartość a!"); Pętle Zdarza się iż pewną operację lub sekwencję operacji warto byłoby wykonać wielokrotnie, chociażby z tego względu aby zaoszczędzić sobie pisania. Owszem można skopiować dany fragment skryptu tyle razy ile potrzeba, ale do jest kiepskie rozwiązanie. Po pierwsze tak przygotowany skrypt jest trudny w utrzymaniu - wyobraź sobie tylko że skopiowałeś(aś) go 20 razy, i musisz w tych 20 miejscach nanieść jakąś poprawkę. Po drugie takie podejście nie zawsze jest możliwe - czasami trzeba powtarzać daną operację, za każdym razem sprawdzając czy określony warunek jest spełniony (np. wczytywać od użytkownika kolejne liczby aż do momentu aż wpisze on liczbę zero). Do rozwiązania tego typu problemów stosuje się pętle. Użycie pętli spowoduje że określony fragment skryptu będzie wykonany określoną z góry ilość razy, lub też do momentu aż podany warunek zostanie spełniony. 25

26 Pętla for Posiada ona następującą składnię: for ( inicjalizacja; test_logiczny; inkrementacja ) instrukcja; lub for ( inicjalizacja; test_logiczny; inkrementacja ) instrukcja1; instrukcja2;... Jak pokazują powyższe przykłady, instrukcja for posiada trzy wyrażenia rozdzielone średnikami które można podać wewnątrz nawiasów okrągłych: inicjalizacja, test_logiczny i inkrementacja. Ich znaczenie jest następujące: inicjalizacja - instrukcja wykonywana tylko raz na samym początku pętli. Zwykle używa się jej do przypisania wartości początkowej do zmiennej która np. będzie zwiększana po każdym obiegu pętli. Zmienna taka zwykle nazywana jest też licznikiem pętli; test_logiczny - dowolny warunek który będzie sprawdzany przed każdym obiegiem pętli (także tym pierwszym). W momencie gdy będzie on fałszywy, wykonywanie pętli zostanie przerwane; inkrementacja - instrukcja która będzie wykonywana po każdym obiegu pętli, a która ma za zadanie np. zwiększenie wartości zmiennej pełniącej rolę licznika pętli. Zatem pętla która ma wypisać kolejne cyfry od 0 do 9 może wyglądać następująco: for (n = 0; n < 10; ++n) document.write(n); Zwróć uwagę na sposób w jaki testuję warunek zakończenia pętli - stosuję ostrą nierówność. Oczywiście można też użyć nieostrej nierówności i uzyskać ten sam rezultat: for (n = 0; n <= 9; ++n) document.write(n); W pewnych przypadkach gdy potrzebujesz coś wykonać 10 razy ale nie interesuje Cię wartość licznika pętli możesz też liczyć od 1 do 10: for (n = 1; n <= 10; ++n) zrob_cos_ciekawego(); Osobiście polecam tą pierwszą wersję (z ostrą nierównością) z prostego powodu - tablice w JavaScript są indeksowane od zera, i łatwo można odczytać ilość elementów w tablicy. Poza tym konsekwentne stosowanie jednej wersji zmniejsza prawdopodobieństwo że napiszemy pętlę która wykonuje się o jeden raz za mało lub za dużo, czyli uprości to uruchamianie własnych skryptów. 26

27 Każdy z trzech elementów znajdujących się wewnątrz okrągłych nawiasów pętli for może też być bardziej skomplikowanym wyrażeniem, np.: for (n = wartosc_startowa(); czy_kontynuowac(n); n = nastepna_wartosc(n)) zrob_cos_smiesnego(n); Można także napisać pętlę która posiada kilka liczników (lub inaczej mówiąc wykonuje kilka instrukcji). Można to zrobić w częściach inicjalizacja i inkrementacja, poprzez rozdzielenie wyrażeń za pomocą przecinka. Aby zrobić coś takiego w części test_logiczny, należy użyć jednego z operatorów logicznych. for (n = 0, k = 1; n < 10; ++n, k += 3) document.write(n * k); Pętle można też oczywiście zagnieżdżać - poniższy przykład po uruchomieniu wypisze wszystkie iloczyny liczb od 0 do 9: for (n = 0; n < 10; ++n) for (k = 0; k < 10; ++k) document.write(n * k); Instrukcja for może wewnątrz nawiasów okrągłych posiadać trzy części: inicjalizacja, test_logiczny i inkrementacja. Nie są one jednak obowiązkowe - każdą z nich można pominąć. Należy jedynie pamiętać o pozostawieniu średników. Można nawet pominąć wszystkie, w efekcie czego powstanie pętla nieskończona jak poniżej. Osobiście odradzam tworzenie takich pętli. Ponieważ jednak nowoczesne przeglądarki posiadają zabezpieczenie przed długo działającymi skryptami i po jakimś czasie zadają pytanie czy przerwać skrypt, jeżeli to Cię bardzo ciekawi możesz go spróbować uruchomić. for (;;) document.write("pętla nieskończona<br>"); W praktyce taką pętlę stosuje się rzadko. Jeżeli już, to razem z instrukcjami które pozwalają na jej przerwanie. Jedną z takich instrukcji jest break. Przy jej zastosowaniu można tak zapisać znaną już pętlę wypisującą cyfry od 0 do 9: for (n = 0; ; ++n) if (n == 10) document.write(n); Kolejną instrukcją którą warto poznać jest continue - jej wykonanie powoduje że pętla natychmiast zaczyna wykonywać kolejną iterację (czyli wykonuje inkrementację, a następnie sprawdza warunek kontynuacji pętli). Można w ten sposób np. wyświetlić tylko cyfry parzyste: for (n = 0; n < 10; ++n) if (n % 2!= 0) continue; document.write(n); 27

28 Oczywiście w praktyce lepiej jest inkrementować licznik o 2 - powyższy przykład umieściłem tylko dla zademonstrowania zastosowania komendy continue. Pętla while Pętla while posiada następującą składnię: while ( test_logiczny ) instrukcja; lub while ( test_logiczny ) instrukcja1; instrukcja2;... Jest ona funkcjonalnym odpowiednikiem następującej wersji pętli for: for ( ; test_logiczny; ) instrukcja; Zachowuje się też identycznie jak podana wersja pętli for, czyli najpierw sprawdza czy test_logiczny jest prawdziwy i jeżeli tak to wykonuje instrukcje, po czym powtarza to aż test_logiczny stanie się fałszywy. Taką pętlę stosuje się zwykle gdy nie występuje jawnie inicjalizacja pętli i/lub jej inkrementacja, lub też są one bardziej złożone i przez to zapisanie ich w ramach instrukcji for byłoby kłopotliwe. Znany nam już przykład z wypisywaniem cyfr od 0 do 9 wygląda tak z zastosowaniem pętli while: n = 0; while (n < 10) document.write(n); ++n; Wewnątrz pętli while można też stosować opisane wcześniej instrukcje break i continue. Pętla do/while Pętla do/while jest bardzo podobna do omówionej wcześniej pętli while. Posiada ona następującą składnię: do instrukcja; while ( test_logiczny ) 28

29 lub do instrukcja1; instrukcja2;... while ( test_logiczny ); W działaniu te dwie pętle różnią się momentem kiedy sprawdzana jest prawdziwość warunku test_logiczny - pętla while robi to przed wykonaniem instrukcji, natomiast pętla do/while robi to po. Oznacza to że gdy warunek będzie fałszywy już na początku pętli, to wtedy pętla while nie wykona się ani razu, ale pętla do/while wykona się jeden raz. W poniższych przykładach liczba 10 zostanie wypisana tylko w drugim przypadku: n = 10; while (n < 10) document.write(n); ++n; n = 10; do document.write(n); ++n; while (n < 10); Wewnątrz pętli while można też stosować opisane wcześniej instrukcje break i continue. Pętla for/in Pętla ta służy do łatwego wyliczania kolejnych elementów tablic i właściwości obiektów. Posiada ona następującą składnię: for (zmienna in tablica_lub_obiekt) instrukcja; lub for (zmienna in tablica_lub_obiekt) instrukcja1; instrukcja2;... zmienna jest to nazwa zmiennej która ma być użyta jako licznik tej pętli. tablica_lub_obiekt jest natomiast tablicą lub obiektem której/którego zawartość ma zostać wyliczona przez pętlę. Pętla ta w trakcie wykonywania się będzie do zmiennej zmienna przypisywać kolejne indeksy (klucze) tablicy. Przykładowo poniższy przykład wypisze kolejno cyfry od zero do trzy: 29

30 tablica = Array( 'a', 'b', 'c', 'd' ); for (n in tablica) document.write(n); Aby wypisać to co znajduje się w tablicy pod każdym z indeksów (czyli kolejne literki), trzeba dokonać niewielkiej modyfikacji tego kodu: tablica = Array( 'a', 'b', 'c', 'd' ); for (n in tablica) document.write(tablica[n]); Oczywiście w tej pętli można też stosować instrukcje break i continue. Funkcje Upraszczając sprawę funkcje w JavaScript jest to sposób na nadanie nazwy fragmentowi swojego skryptu, i możliwość późniejszego odwoływania się do niego z użyciem tej nazwy. Szkielet funkcji wygląda następująco: function NazwaFunkcji ( parametry ) instrukcja1; instrukcja2;... NazwaFunkcji jest to dowolna nazwa, która powinna spełniać takie same wymogi jak nazwy zmiennych (czyli pierwszym znakiem może być litera lub znak podkreślenia; kolejne znaki nazwy mogą być literą, cyfrą lub znakiem podkreślenia; nazwa nie może też być zarezerwowanym słowem kluczowym). parametry jest to lista nazw parametrów, rozdzielona przecinkami (nazwy parametrów również muszą spełniać wspomniane wcześniej wymagania). Lista parametrów może być pusta (pomiędzy nawiasami okrągłymi wtedy nic nie ma). W ciele funkcji może być umieszczona dowolna liczba instrukcji. Nawiasy klamrowe są obowiązkowe i nie można ich pominąć, nawet jeżeli funkcja zawiera tylko jedną instrukcję (lub nawet nie zawiera żadnej instrukcji - w pewnych przypadkach takie funkcje które nic nie robią też mogą być przydatne). Własne funkcje wywołuje się identycznie jak funkcje wbudowane - po prostu podaje się nazwę funkcji i w nawiasach okrągłych wartości parametrów. Prosta funkcja i jej wywołanie może wyglądać następująco: function Witaj(imie) document.write("witaj, " + imie); 30

31 Witaj("Daniel"); Funkcje mogą też zwracać pewną wartość. Do zwrócenia wartości z funkcji używa się komendy return, po której podaje się wartość która ma zostać zwrócona z funkcji: function Suma(a, b) return a + b; Ważną cechą instrukcji return jest to iż powoduje ona natychmiastowe przerwanie wykonywania funkcji i powrót do miejsca w skrypcie z którego funkcja była wywołana. Z tego też powodu możliwe jest także użycie komendy return bez podawania wartości która ma zostać zwrócona z funkcji, co jest użyteczne gdy piszemy funkcję która ma tylko coś zrobić (np. wypisać jakiś napis), ale nie ma zwracać żadnej wartości. Poniższa funkcja drukuje wszystkie wartości z przedziału określonego parametrami, ale kończy drukować jeżeli przekroczy liczbę 100. function DrukujLiczby(a, b) for (n = a; n <= b; ++n) if (n >= 100) return; document.write(n); Iteracja i rekurencja Iteracja i rekurencja są to dwa sposoby rozwiązywania problemów gdzie występuje konieczność wielokrotnego wykonywania pewnych operacji. Z iteracją mamy do czynienia gdy do rozwiązania problemu jest zastosowana pętla wewnątrz której prowadzone są właściwe obliczenia. Z kolei rekurencja polega na tym że funkcja wywołuje samą siebie, i w ten sposób wykonywane są obliczenia. Oczywiście w tym drugim przypadku należy też pamiętać aby określić warunek kiedy funkcja powinna bezpośrednio zwrócić wartość a nie wywoływać się po raz kolejny. Bez tego obliczenia nie mogłyby się zakończyć! Poniżej znajdują się dwa przykłady funkcji które liczą wartość silni podanej liczby naturalnej. Dla tych co zapomnieli co to jest silnia przypominam że jest to iloczyn liczb od 1 do n, np. 3! = 1 * 2 * 3 = 6. Dodatkowo 0! = 1. Pierwsza funkcja liczy silnię w sposób iteracyjny: function Silnia_I(n) wynik = 1; for (k = 1; k <= n; ++k) wynik *= k; 31

32 return wynik; Druga natomiast funkcja robi to samo, ale z wykorzystaniem rekurencji: function Silnia_R(n) if (n == 0) return 1; else return n * Silnia_R(n - 1); Przykład zastosowania funkcji ze zdarzeniami myszy <script type="text/javascript"> //pod FF function przesun(e) var imgkur=document.getelementbyid("samochodzik"); switch(e.which) case 83:imgkur.style.top=imgkur.offsetTop+20+"px"; case 65:imgkur.style.top=imgkur.offsetTop-20+"px"; case 90:imgkur.style.left=imgkur.offsetLeft-20+"px"; case 87:imgkur.style.left=imgkur.offsetLeft+20+"px"; //pod IE function przesun2() var imgkur=document.getelementbyid("samochodzik"); switch(window.event.keycode) case 83:imgkur.style.posTop+=20; case 65:imgkur.style.posTop-=20; case 90:imgkur.style.posLeft-=20; case 87:imgkur.style.posLeft+=20; //pod FF function przesun9(e) var imgkur=document.getelementbyid("samochodzik1"); switch(e.which) case 73:imgkur.style.top=imgkur.offsetTop+20+"px"; 32

33 case 77:imgkur.style.top=imgkur.offsetTop-20+"px"; case 74:imgkur.style.left=imgkur.offsetLeft-20+"px"; case 76:imgkur.style.left=imgkur.offsetLeft+20+"px"; //pod IE function przesun99() var imgkur=document.getelementbyid("samochodzik1"); switch(window.event.keycode) case 73:imgkur.style.posTop+=20; case 77:imgkur.style.posTop-=20; case 74:imgkur.style.posLeft-=20; case 76:imgkur.style.posLeft+=20; </script> </head> <body onload="alert('opis poruszania się samochodzików za pomocą klawiatury: niebieski: j-lewo,l-prawo,i-dół,m-góra; czerwony:a-gora,s-dół, w-prawo, z-lewo')"> <img id="samochodzik" src="pep.jpg" alt="" width="129" height="98" style="position:absolute" /> <img id="samochodzik1" src="sam1.jpg" alt="" style="position:absolute; right:200px;" />   <script type="text/javascript"> if(document.addeventlistener) document.addeventlistener("keydown", przesun,true); else if(document.attachevent) document.attachevent("onkeydown",przesun2); </script> <script type="text/javascript"> if(document.addeventlistener) document.addeventlistener("keydown", przesun9,true); else if(document.attachevent) document.attachevent("onkeydown",przesun99); </script> 33

34 </body> </html> 34