Czym jest JavaScript? 1

JavaScript - wprowadzenie -9h 1. 2. 3. 4. 5. 6. 7. 8. 9. Co to jest JavaScrit JavaScript a Java Umieszczanie skryptu na stronie Kod źródłowy zagnieżd...
Author: Alojzy Adamczyk
21 downloads 2 Views 587KB Size
JavaScript - wprowadzenie -9h 1. 2. 3. 4. 5. 6. 7. 8. 9.

Co to jest JavaScrit JavaScript a Java Umieszczanie skryptu na stronie Kod źródłowy zagnieżdżony w HTML Kod źródłowym umieszczony w oddzielnym pliku Jak zadbać o przeglądarki nie obsługujące JavaScript Komentarze do kodu Instrukcje dokument.write 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.

Java 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

1

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 i : //dla HTML5 ...instrukcje skryptu //dla HTML4 ...instrukcje skryptu

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



defer="defer" - powoduje rozpoczęcie wykonywania skryptów dopiero po załadowaniu całej strony (stosowane dla IE)

...



src="..." - podaje adres pliku ze skryptami js

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

kod skryptu kod skryptu /* może być więcej rozgraniczonych znacznikami kodów na jednej stronie */ tu - w dowolnym miejscy sekcji BODY - też można umieścić kod źródłowy skryptu

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 . O tym, że kod źródłowy jest w pliku zewnętrznym informujemy przeglądarkę wykorzystując atrybut src:

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 . Uwzględniając wszelkie powyższe wskazówki, szablon naszej strony HTML będzie wyglądał następująco: 3

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... kod HTML strony

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 . Powyższy szablon zmieni się na: 4

// 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... */ kod HTML strony

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 zostanie zignorowany i wyświetlone zostanie wszystko aż do początku komentarza HTML czyli

Przeglądarka nieobsługująca skryptów po napotkaniu nieznanej sobie etykiety 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 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 . Wówczas tekst, który ma być wyświetlony w przeglądarce nieobsługującej skryptów umieszamy pomiędzy znacznikami i Twoja przeglądarka nie obsługuje JavaScript. Sugerujemy użycie przeglądarki Internet Explorer lub Natscape Navigator.

Przykładowy skrypt:

6

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 i , czyli w bloku tekstu preformatowanego. document.writeln("Ten tekst został napisany"); document.write("dzięki JavaScript") A to jest już normalny dokument HTML

7

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.

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

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

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

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. 9



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 10

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:

Po wczytaniu takiej strony ukaże się napis:

Przeanalizujmy: 1. 2. 3. 4. 5.

zadeklarowaliśmy dwie zmienne o nazwach zmienna_1 i zmienna_2 zmiennej zmienna_1 przypisaliśmy ciąg znaków Urodziłam się w zmiennej zmienna_2 przypisaliśmy wartość liczbową 1979 zmiennych tych użyliśmy jako argumentów funkcji write() 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

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.

12

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 , pomijamy oczywiście funkcję nacisnij a zamiast instrukcji alert używamy instrukcji wyświetlającej tekst na ekranie, czyli document.write:

Operatory Zestawienie operatorów używanych w JavaScript:

Operatory Arytmetycze Operator +

Opis Dodawanie

-

Odejmowanie

Przykład x=3 x=x+4 x=4 x=6-x

Wynik 7 2

13

*

Mnożenie

/

Dzielenie

%

Modulo (reszta z dzielenia)

++

Zwiększanie o 1

--

Zmniejszanie o 1

x=3 x=x*5 10/5 9/2 4%3 12%8 8%2 x=2 x++ x=4 x--

15 2 4.5 1 4 0 x=3 x=3

Operatory przypisania Operator = += -= *= /= %=

Przykład x=y x+=7 x-=3 x*=y x/=y x%=y

Równoważne z x=x+7 x=x-3 x=x*y x=x/y x=x%y

Operatory porównania Operator == != > < >= 30 wynik:fałsz 2=3 wynik:prawda 2 2) wynik:prawda x=3 y=4 (x==8 || y==6) 14

!

zaprzeczenie

wynik:fałsz 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("" + zmienna_1 + zmienna_2 +" roku ");

Pierwsze skrypty: Ćw.1. Napisz poniższe skrypty: a)

Ćw. 2 Deklaracja zmiennych:

Ćw.3. Komentarze: Przepisz poniższy skrypt: document.write ("Jaki miły mamy dzień!")

15

// Koniec kodu JavaScript --> /*inny komentarz*/ Ć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

Ćwiczenie 6. Zmienne:

Ćwiczenie 7.

17

Ćwiczenie 8 -instrukcja if

Ćwiczenie 9 –instrukcja else if

Ćwiczenie 10 instrukcja case 18

Ćwiczenie 11 – pętla for a)

b)

Ćwiczenie 12 Wypisz liczby parzyste od 1 do 20

19

Ćwiczenie 13 petla do …while

Ćwiczenie 14. Definiowanie funkcji

Ćwiczenie 15. Funkcja zwracająca wartość

20

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

b)

21

Ćwiczenie 17 a)

b)

22

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

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 else if (a > alert("a else alert("a

jest równe zero"); 0) jest większe od zera"); 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"); break; case 1: alert("a jest równe jeden"); break;

24

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.

25

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