Co to jest JavaScript?1 JavaScript a Java

Transkrypt

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
Co to 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 jest to język, za pomocą można ożywić statycznie strony WWW (jeżeli nie liczyć
animowanych obrazków, obiektów Flash, filmików, itp.). Obecnie jest on wspierany przez
wszystkie liczące się na rynku przeglądarki internetowe. Jest to język obiektowy , o składni
wywodzącej się z języka C++.
JavaScript a Java
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ą którego 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 tzw. 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 jest zagnieżdżony w
Kod programu jest niezależny od kodu HTML
1
http://eduzone.republika.pl/kurs_java_script/wstep.html#czym_jest_javascript
http://javascript.rzeźniczak.pl/01lekc1.php
1
kodzie HTML
i znajduje się 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łania 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ą
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.
Umieszczanie skryptu na stronie
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>
2
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>
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:
3

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

Ćw.3. Komentarze:
Przepisz poniższy skrypt:
<SCRIPT LANGUAGE = "JavaScript">

document.write ("Jaki miły mamy dzień!")
/*inny
14
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:
15
Ćwiczenie 6.
Zmienne:
Ćwiczenie 7.
16
Ćwiczenie 8 -instrukcja if
Ćwiczenie 9 –instrukcja else if
Ćwiczenie 10 instrukcja case
17
Ćwiczenie 11 – pętla for
a)
b)
Ćwiczenie 12
Wypisz liczby parzyste od 1 do 20
18
Ćwiczenie 13 petla do …while
Ćwiczenie 14. Definiowanie funkcji
Ćwiczenie 15. Funkcja zwracająca wartość
19
Ćwiczenie 16. Funkcje z wartością
a)
b)
20
Ćwiczenie 17
a)
b)
21
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;
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.
Warunek
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)
{
22
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)
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;
23
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.
24
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.
25
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);
}
26
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;
27
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:
28
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;
...
}
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).
NazwaFunkcji
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);
29
}
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;
}
30
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;
case 77:imgkur.style.top=imgkur.offsetTop-20+"px";
break;
31
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>
</body>
</html>
32

Co to jest JavaScript?1 JavaScript a Java

Transkrypt

Podobne dokumenty

Podstawy JavaScript – ćwiczenia

Instrukcja pierwsza wraz z ćwiczeniami

JavaScript- Podstawy programowania na potrzeby

Zadanie 1