Czym jest JavaScript? 1 -...

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 Java

Język interpretowany na komputerze klienta.

Język kompilowany do b-kodu,

wykonywanego następnie za pomocą wirtualnej maszyny Javy na komputerze

klienta

Język oparty na predefiniowanych obiektach,

niepozwalający jednak na stosowanie

mechanizmów programowania obiektowego jak

np. dziedziczenie

Język zorientowany obiektowo z obsługą wszystkich mechanizmów obiektowości.

Kod programu zagnieżdżony w kodzie HTML

Kod programu jest niezależny od kodu

HTML i znajduje sie w oddzielnych

plikach

Zmienne i ich typ nie muszą być deklarowane

przed użyciem

Zmienne i ich typ muszą być zadeklarowane przed ich użyciem w

programie

Odwołanie do obiektów i funkcji są wykonywane

podczas uruchamiania programu

Wszystkie odwołania do obiektów i

funkcji są sprawdzane na etapie

kompilacji

Ze względów bezpieczeństwa nie ma możliwości

zapisu na dysk twardy

Ze względów bezpieczeństwa aplety, w

przeciwieństwie do aplikacji, nie mają

1 http://eduzone.republika.pl/kurs_java_script/wstep.html#czym_jest_javascript http://javascript.rzeźniczak.pl/01lekc1.php

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>

3

<script type="text/javascript">

kod skryptu

</script>


kod skryptu

/* może być więcej rozgraniczonych znacznikami <script> kodów na jednej stronie */

</script>

</head>

<body>


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:

4

<html>

<head>




</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:

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.

blokowy:

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:

5

<html>

<head>


// 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-8859-2">

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

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>


</HEAD>


<!-- Ukrycie przed przegladarkami nieobsługującymi JavaScript

document.write("To jest tekst napisany dzięki 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:

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>


</HEAD>

<PRE>


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>

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.



alert("To jest właśnie okno dialogowe")


</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



confirm("\nJeśli się zgadzasz kliknij OK\n \nJeśli rezygnujesz wciśnij

Anuluj")


</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ć:

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



data = new Date();

dzien = data.getDate();

miesiac = data.getMonth() + 1;

rok = data.getYear();

godzina = data.getHours();

minuta = data.getMinutes();

if (miesiac<10) miesiac="0"+miesiac;

if (dzien<10) dzien="0"+dzien;

if (minuta<10) minuta="0"+minuta;

document.write("Witam wszystkich. Dzisiaj jest " + dzien +"."+ miesiac +"."

+ rok +" rok. Godzina: " + godzina + ":" + minuta);

//-->

</SCRIPT>

Witam wszystkich. Dzisiaj jest 12.12.113 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.

10



document.write("Ostatnia aktualizacja: " + document.lastModified);

//-->

</SCRIPT>

A wygląda to tak:

Ostatnia aktualizacja: 12/12/2013 11: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

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>


</HEAD>


<!-- Ukrycie przed przeglądarkami nieobsługującymi JavaScript

var zmienna_1 = "Urodziłam się w ";

var zmienna_2 = 1979;

document.write("<H3>" + zmienna_1 + zmienna_2 +" roku </H3>");


</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ą 1979 4. 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)

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>


</HEAD>



function nacisnij() {

var imie = prompt("Podaj swoje imię", "");

if (imie == null) {

alert("Dlaczego nie chcesz podać swojego imienia? :(");

}

else {

alert ("Cześć " + imie + " :-)");

}

}


</SCRIPT>

<BODY>

<form>

<input type="button" name="Button1" value="Naciśnij mnie"

onclick="nacisnij()">

</form>

</BODY>

</HTML>

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>


</HEAD>



var imie = prompt("Podaj swoje imię", "");

if (imie == null) {

document.write("Dlaczego nie chcesz podać swojego imienia? :(");

}

else {

document.write("Cześć " + imie + " :-)");

}


</SCRIPT>

<BODY>

</BODY>

</HTML>

Operatory

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

14

* 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>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)

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ń!")

16


/*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:

17

Ćwiczenie 6.

Zmienne:

Ćwiczenie 7.

18

Ćwiczenie 8 -instrukcja if

Ćwiczenie 9 –instrukcja else if

Ćwiczenie 10 instrukcja case

19

Ćwiczenie 11 – pętla for

a)

b)

Ćwiczenie 12

Wypisz liczby parzyste od 1 do 20

20

Ćwiczenie 13 petla do …while

Ćwiczenie 14. Definiowanie funkcji

Ćwiczenie 15. Funkcja zwracająca wartość

21

Ćwiczenie 16. Funkcje z wartością

a)

b)

22

Ćwiczenie 17

a)

b)

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)

{

24


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)


else if (a > 0)


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)


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:


break;

case 1:

alert("a jest równe jeden");

break;

25

case 2:

alert("a jest równe dwa");

break;

case 3:

alert("a jest równe trzy");

break;

default:

alert("a ma inną wartość");

break;

}

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

break;

default:

alert("Niepoprawna wartość a!");

break;

}

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.

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.

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)

break;

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

}

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


{

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;


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:

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

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;

}

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


//pod FF

function przesun(e){

var imgkur=document.getElementById("samochodzik");

switch(e.which){

case 83:imgkur.style.top=imgkur.offsetTop+20+"px";

break;

case 65:imgkur.style.top=imgkur.offsetTop-20+"px";

break;

case 90:imgkur.style.left=imgkur.offsetLeft-20+"px";

break;

case 87:imgkur.style.left=imgkur.offsetLeft+20+"px";

break;}

}

//pod IE

function przesun2(){

var imgkur=document.getElementById("samochodzik");

switch(window.event.keyCode){

case 83:imgkur.style.posTop+=20;

break;

case 65:imgkur.style.posTop-=20;

break;

case 90:imgkur.style.posLeft-=20;

break;

case 87:imgkur.style.posLeft+=20;

break;

}

}

//pod FF

function przesun9(e){

var imgkur=document.getElementById("samochodzik1");

switch(e.which){

case 73:imgkur.style.top=imgkur.offsetTop+20+"px";

break;

33

case 77:imgkur.style.top=imgkur.offsetTop-20+"px";

break;

case 74:imgkur.style.left=imgkur.offsetLeft-20+"px";

break;

case 76:imgkur.style.left=imgkur.offsetLeft+20+"px";

break;}

}

//pod IE

function przesun99(){

var imgkur=document.getElementById("samochodzik1");

switch(window.event.keyCode){

case 73:imgkur.style.posTop+=20;

break;

case 77:imgkur.style.posTop-=20;

break;

case 74:imgkur.style.posLeft-=20;

break;

case 76:imgkur.style.posLeft+=20;

break;

}

}

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






if(document.addEventListener){

document.addEventListener("keydown", przesun,true);}

else if(document.attachEvent){

document.attachEvent("onkeydown",przesun2);}

</script>


if(document.addEventListener){

document.addEventListener("keydown", przesun9,true);}

else if(document.attachEvent){

document.attachEvent("onkeydown",przesun99);}

</script>

34

</body>

</html>

Czym jest JavaScript? 1 -...

Documents

Transcript of Czym jest JavaScript? 1 -...