Elementy j zyka JavaScript

Transkrypt

Do dyspozycji mamy cztery typy danych:
liczby,
warto ci logiczne,
ła cuchy znaków,
warto NULL.
Słu y do reprezentowania wszelkiego rodzaju liczb. Odmiennie ni w innych j zykach
programowania, jak np. C++, gdzie do reprezentacji liczb słu y co najmniej kilka typów danych, tutaj
u ywamy tylko jednego — liczbowego. Liczby całkowite — zarówno dodatnie, jak i ujemne —
mo emy przedstawi w postaci dziesi tnej, szesnastkowej lub ósemkowej. System dziesi tny jest nam
wszystkim znany; u ywamy w nim dziesi ciu cyfr. Przypomnijmy jednak pokrótce podstawy dwóch
pozostałych systemów.
W systemie szesnastkowym podstaw jest oczywi cie 16. Zatem do zapisu liczb w tym systemie nie
wystarczy nam cyfr arabskich (0 – 9), których jest tylko dziesi . U ywamy wi c dodatkowo sze ciu
liter: od A do F. Od zera do dziewi ciu liczymy identycznie jak w znanym nam systemie dziesi tnym.
Dalej jednak zamiast liczby dziesi pojawia si litera A, potem B i tak dalej do F (co odpowiada 15
w systemie dziesi tnym). Po F nast puje 10. W systemie ósemkowym natomiast, skoro podstaw jest
liczba 8, u ywamy 8 cyfr — od 0 do 7. Po liczbie 7 nast puje 10, potem 11 i tak dalej do 17, po której
nast puje 20. Odpowiadaj ce sobie liczby w systemie dziesi tnym, szesnastkowym i ósemkowym
przedstawia tabela 3.1.
Reprezentacja liczb w ró nych systemach
1
1
1
2
2
2
3
3
3
4
4
4
5
5
5
6
6
6
7
7
7
10
8
8
11
9
9
12
10
A
13
11
B
14
12
C
15
13
D
16
14
E
17
15
F
20
16
10
Wró my jednak do reprezentacji liczb w JavaScripcie. Liczby dziesi tne zapisujemy w sposób tradycyjny,
czyli np. 45, –124, 860. Liczby w systemie szesnastkowym musimy poprzedzi znakami 0x lub 0X,
np. szesna cie zapiszemy jako 0x10 (lub 0X10), dwadzie cia jeden jako 0x15 (lub 0X15). W systemie
ósemkowym przed liczb dodajemy po prostu zero, np. 010 (osiem dziesi tnie), 024 (dwadzie cia
dziesi tnie).
Drugi typ liczb reprezentowanych w JavaScripcie to liczby zmiennopozycyjne, czyli z cz ci
ułamkow . Mo e to by klasyczny sposób zapisu z kropk dziesi tn , np. 1.274, –56,8 b d zapis
wykładniczy typu 2E3, –123E–2 itp. Nie b dziemy si tutaj zagł bia w dalsze niuanse reprezentacji
liczb. Warto tylko pami ta , e zakres liczb, tzn. najwi ksza i najmniejsza warto , które mog one
przyjmowa , jest zale ny od systemu, na którym pracujemy.
!
"
Zmienne tego typu mog przyjmowa tylko dwie warto ci: TRUE i FALSE (prawda i fałsz). B d one
u ywane przy konstruowaniu wyra e logicznych, porównywania danych, wskazania, czy dana
operacja zako czyła si sukcesem. Dla osób znaj cych C czy C++ uwaga: warto ci TRUE i FALSE nie
maj przeło enia na warto ci liczbowe, jak w przypadku wymienionych j zyków.
#$ %
S to oczywi cie dowolne ci gi znaków zawartych pomi dzy znakami cudzysłowów lub apostrofów.
Mog zawiera znaki specjalne. Przykładami mog by : "Kot ma Al ", "liczby pierwsze: 1 3
5... ".
!& '())
Jest to pewien specjalny typ danych, który oznacza po prostu nic (null). Warto
przez niektóre funkcje. Bli ej zapoznamy si z ni w dalszej cz ci ksi ki.
ta jest zwracana
*
Poznali my ju typy danych, czas zapozna si ze sposobami deklarowania i wykorzystania
zmiennych. Zmienne s to konstrukcje programistyczne, które pozwalaj nam przechowywa dane.
Ka da zmienna na swoj nazw , która j jednoznacznie identyfikuje. Zwykle (w wi kszo ci j zyków
programowania) zmienna musi mie okre lony typ danych, który jest jej przypisany na stałe. Czasami,
np. w j zyku programowania Pascal, musi by jawnie zadeklarowana przed u yciem. Poniewa jednak
JavaScript jest stosunkowo prostym j zykiem skryptowym, nie ma narzuconych takich ogranicze .
Zmiennych bowiem nie musimy (aczkolwiek mo emy) deklarowa przed u yciem; ka da zmienna
mo e te przyjmowa dane z dowolnego typu opisanego wy ej. Co wi cej, typ danych
przypisywanych zmiennej mo e si równie zmienia . Wszystko stanie si ja niejsze po wykonaniu
pierwszego wiczenia.
+
Zadeklaruj dwie zmienne, przypisz im dowolne ci gi znaków i wyprowad je na ekran za pomoc
funkcji write().
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</HEAD>
<SCRIPT LANGUAGE = "JavaScript">

</SCRIPT>
<BODY>
</BODY>
</HTML>
Po wczytaniu takiej strony na ekranie uka e si napis „Mój komputer ma dysk o pojemno ci 30.7
GB” (rysunek 3.1). Przeanalizujmy wi c, co si tutaj stało. Zadeklarowali my dwie zmienne o
nazwach zmienna1 i zmienna2. Zmiennej zmienna1 przypisali my ci g znaków „Mój komputer”,
zmiennej zmienna2 natomiast warto
liczbow , dodatni liczb zmiennoprzecinkow 30.7.
Zmiennych tych u yli my jako argumentów funkcji write(). Musieli my równie tak poł czy
poszczególne ła cuchy tekstowe, aby otrzyma jeden, który ukazał si na ekranie. Do tego celu
u yli my operatora + (plus). Nazywa si to ł czeniem lub bardziej fachowo konkatenacj ła cuchów
znakowych.
, %
Wyprowadzenie
na ekran warto ci
dwóch zmiennych
Przekonajmy si teraz, e w JavaScripcie naprawd mo na zmienia typ danych przechowywanych w
zmiennej.
+
-
Zadeklaruj jedn zmienn . Przypisz do niej dowolny ła cuch znaków i wyprowadzi na ekran.
Nast pnie przypisz tej samej zmiennej warto liczbow i równie wyprowad na ekran.
<HTML>
<HEAD>
</HEAD>
var zmienna1 = "Mój komputer";
document.write ("<H3>" + zmienna1 + " ma dysk o pojemno ci ");
zmienna1 = 30.7;
document.write (zmienna1 + " GB.</H3>");
</SCRIPT>
<BODY>
</BODY>
</HTML>
Efekt b dzie taki sam jak na rysunku 3.1. W stosunku do skryptu z poprzedniego wiczenia obecny
kod jest dłu szy i chyba mniej przejrzysty, niemniej w niektórych sytuacjach u ycie jednej zmiennej
do kilku ró nych funkcji mo e by przydatne. Warto zwróci te uwag , e lepiej byłoby nadawa
zmiennym nazwy, które w jaki sposób symbolizowałyby ich przeznaczenie. Przy tak prostych
skryptach, jak w dwóch powy szych wiczeniach, nie ma to zapewne wielkiego znaczenia. Jednak
przy bardziej skomplikowanych programach, z wi ksz ilo ci zmiennych, takie nazewnictwo
doprowadzi do sytuacji, w której nie b dziemy w stanie zorientowa si , o co nam w programie
chodziło.
+
Wy wietl na ekranie okno pozwalaj ce u ytkownikowi na podanie np. jego imienia.
<HTML>
<HEAD>
</HEAD>
prompt ("Podaj swoje imi : ");
</SCRIPT>
<BODY>
</BODY>
</HTML>
Po wczytaniu tego skryptu na ekranie pojawi si okno dialogowe z pytaniem o imi . Okno to b dzie
miało nieco inny wygl d w ró nych przegl darkach, ale zawsze b dzie pozwalało na wprowadzenie
danych przez u ytkownika. Wygl d okna w przegl darce Internet Explorer widoczny jest na rysunku
3.2, natomiast w przegl darce Netscape Navigator na rysunku 3.3.
, %
Efekt działania
funkcji prompt()
w przegl darce
Internet Explorer
, %
Efekt działania
funkcji prompt()
w przegl darce
Netscape Navigator
Niestety w takiej wersji, jak w powy szym wiczeniu, skrypt nie potrafi nic zrobi z odpowiedzi
u ytkownika. Nale y wi c go odpowiednio zmodyfikowa .
+
.
Wy wietl na ekranie okno dialogowe pozwalaj ce na podanie przez u ytkownika imienia. Nast pnie
wyprowad na ekran napis powitalny zawieraj cy podane imi .
<HTML>
<HEAD>
</HEAD>
var imie = prompt ("Podaj swoje imi :");
document.write ("Cze
" + imie + "!");
</SCRIPT>
<BODY>
</BODY>
</HTML>
Zadeklarowali my zmienn o nazwie imie, której przypisali my warto zwracan przez funkcj
prompt(). Nast pnie wypisali my warto tej zmiennej, razem z tekstem powitania na ekran. Nie
musimy jednak wcale deklarowa zmiennej, aby uzyska taki sam efekt. Wystarczy, e wywołanie funkcji
prompt() umie cimy w argumencie funkcji write().
+
/
Wy wietl na ekranie okno dialogowe pozwalaj ce na podanie przez u ytkownika swojego imienia.
Nast pnie, nie u ywaj c zmiennych, wyprowad na ekran napis powitalny zawieraj cy podane imi .
<HTML>
<HEAD>
</HEAD>
" + prompt ("Podaj swoje imi :") + "!");
</SCRIPT>
<BODY>
</BODY>
</HTML>
Kod ten jest co prawda mniej czytelny, ni gdyby my u yli zmiennej pomocniczej, uzyskali my
jednak bardziej zwi zły zapis.
We wszystkich powy szych przykładach w okienku dialogowym jako warto domy lna pojawia si
napis „Undefined” (rysunki 3.1, 3.2, 3.3). Nie jest to po dany przez nas efekt; na szcz cie mo na
to zmieni . Je li chcemy, aby warto ci domy ln było co innego, dowolny napis lub liczba, musimy
poda j jako drugi argument funkcji prompt().
+
0
Spowoduj, aby w oknie dialogowym wywoływanym przez funkcj prompt() nie pojawiała si
warto „Undefined”, lecz pusty ła cuch znaków (rysunek 3.4).
, %
.
Okno wprowadzania
danych z pustym
ła cuchem znaków
jako warto ci
domy ln
<HTML>
<HEAD>
</HEAD>
" + prompt ("Podaj swoje imi :", "") + "!");
</SCRIPT>
<BODY>
</BODY>
</HTML>
1
%
%
Funkcja prompt() zwraca warto podan przez u ytkownika lub je li nie podał on adnej, warto
domy ln , tylko w przypadku naci ni cia przycisku OK. Je eli jednak u ytkownik wcisn ł przycisk
Anuluj (Cancel), zwrócona zostanie warto null. W taki przypadku na ekranie uka e si napis Cze
null!. Wida to na rysunku 3.5. Tego jednak chcieliby my unikn . Pomog nam w tym instrukcje
warunkowe.
, %
/
Efekt wci ni cia
przycisku Anuluj
(Cancel)
+
2
Wy wietl na ekranie okno dialogowe pozwalaj ce na podanie przez u ytkownika imienia. Wyprowad
na ekran napis powitalny zawieraj cy podane imi . W przypadku gdy u ytkownik naci nie przycisk
Anuluj (Cancel), ma pojawi si stosowny komunikat (rysunek 3.6).
, %
0
Komunikat pojawia
si po wci ni ciu
przycisku Anuluj
(Cancel) po wywołaniu
funkcji prompt()
<HTML>
<HEAD>
</HEAD>
var imie = prompt ("Podaj swoje imi :", "");
if (imie == null) {
document.write ("<H3>Czemu wcisn łe przycisk Anuluj? Nie chcesz poda
imienia?");
}
else {
" + imie + "!");
}
</SCRIPT>
<BODY>
</BODY>
</HTML>
swojego
Mamy tu kilka nowych elementów wymagaj cych wyja nienia. Na pocz tku deklarujemy zmienn
imie i przypisujemy jej od razu warto zwrócon przez funkcj prompt(). Jest to ci g znaków
wprowadzony przez u ytkownika lub warto null. Nast pnie za pomoc konstrukcji if...else
sprawdzamy, czy warto zmiennej imie jest równa null. Je li tak, wykonujemy ci g instrukcji
zapisany pomi dzy nawiasami { } po instrukcji if. W przeciwnym przypadku wykonujemy
instrukcje z bloku po wyst puj cego po instrukcji else. Ogólna konstrukcja if...else wygl da
nast puj co:
if (warunek logiczny) {
instrukcje do wykonania, je li warunek jest prawdziwy
}
else {
instrukcje do wykonania, je li warunek nie jest prawdziwy
}
W powy szym wiczeniu warunkiem logicznym jest (imie == null). Jest to porównanie warto ci
zmiennej imie i warto ci null. Je eli s one równe, warunek jest prawdziwy. Tzn. ma on warto
logiczn TRUE i wykonywany jest blok instrukcji wyst puj cy po if. Je eli warto ci te nie s równe
(np. imie = „Anna”), warunek ten ma warto logiczn FALSE i wykonywany jest blok instrukcji
wyst puj cy po else.
W tym miejscu małe wyja nienie dla osób, które do uruchomienia ostatniego skryptu u yły jednej ze
starszych wersji przegl darki Internet Explorer (wersje poni ej 4). Otó skrypt w tym przypadku nie
zadziałał tak jak powinien. Wczesne wersje tego programu po wci ni ciu przycisku Anuluj (Cancel)
nie zwracały warto ci null, ale pusty ła cuch znaków (zapisujemy go jako ""). Oczywi cie po
klikni ciu przycisku OK, gdy nic nie zostało wpisane w okienku dialogowym, równie zwracany był
pusty ci g znaków. Mieli my wi c identyczn reakcj na dwa ró ne zdarzenia, co uniemo liwiało
wykrycie wci ni cie przycisku Anuluj (Cancel). Na szcz cie ten problem został usuni ty i w nowych
wersjach przegl darki ju nie wyst puje.
3
Operacje dokonywane na zmiennych mo emy podzieli na:
operacje arytmetyczne,
operacje bitowe,
operacje logiczne,
operacje przypisania,
operacje porównania,
operacje na ła cuchach znaków.
3
Operacje arytmetyczne to standardowe dodawanie, odejmowanie, mno enie oraz dzielenie. Zapisujemy
je za pomoc znanych z matematyki znaków: +, –, *, /.
+
4
Zadeklaruj kilka zmiennych, wykonaj na ich standardowe operacje arytmetyczne i wyprowad wyniki
na ekran.
<HTML>
<HEAD>
</HEAD>
var zmienna1 = 12;
var zmienna2 = 5;
var zmienna3 = zmienna1 + zmienna2
document.write (zmienna3 + " " + (zmienna1 + 4) + " " );
zmienna3 = zmienna1 / 3;
document.write (zmienna3 + " " + zmienna1 * zmienna2);
</SCRIPT>
<BODY>
</BODY>
</HTML>
Wynikiem działania tego skryptu, nikt nie powinien chyba mie adnych w tpliwo ci, b dzie ci g
liczb: 17 16 4 60. Podkre lenia wymaga jedynie to, e wyra enie zmienna1 + 4 musi by uj te w
nawiasy. Dlaczego tak si dzieje, stanie si jasne przy wykonywaniu wicze dotycz cych operacji na
ła cuchach znakowych.
Do operatorów arytmetycznych nale y równie znak %. Nie oznacza on jednak obliczania procentów,
ale tzw. dzielenie modulo (reszt z dzielenia). Zakładaj c dane jak w wiczeniu 3.8, wyra enie
zmienna1 % zmienna2 przyjmie warto 2 (12%5 = 2). Do dyspozycji mamy równie operator
zmiany znaku oraz inkrementacji i dekrementacji. Zmiany znaku dokonujemy poprzez dostawienie
znaku minusa (–), np. po wykonaniu wyra enia zmienna1 = –zmienna1 warto ci zmiennej
zmienna 1 stanie si –12 (równie przy zało eniu danych jak w wiczeniu 3.8).
Du o ciekawszym operatorem jest operator inkrementacji, czyli zwi kszenia warto ci. Powoduje on
przyrost warto ci zmiennej o jeden. Operator ten, zapisywany jako „++”, mo e wyst powa w dwóch
formach: przyrostkowej b d przedrostkowej. Tzn. je li mamy zmienn , która nazywa si np. x,
forma przedrostkowa b dzie wygl da : ++x, natomiast przyrostkowa x++. Oba te wyra enia
zwi ksz warto zmiennej x o jeden, jednak wcale nie s sobie równowa ne. Otó operator x++
zwi ksza warto zmiennej po jej wykorzystaniu, natomiast ++x przed jej wykorzystaniem. I w brew
pozorom takie rozró nienie mo e by bardzo pomocne podczas pisania programów.
Nast pne wiczenie, zwi zane z operatorem inkrementacji, b dzie nietypowe.
+
5
Przeanalizuj poni szy kod. Nie wczytuj skryptu do przegl darki, ale zastanów si , jaki b dzie
wy wietlony ci g liczb. Nast pnie, po uruchomieniu skryptu, sprawd swoje przypuszczenia.
<HTML>
<HEAD>
</HEAD>
var x = 12;
var y;
/*1*/document.write (++x);
/*2*/document.write (" ");
/*3*/document.write (x++);
/*5*/document.write (x);
/*7*/y = x++;
/*8*/document.write (y);
/*10*/y = ++x;
/*11*/document.write (y);
</SCRIPT>
<BODY>
</BODY>
</HTML>
Wynikiem b dzie ci g znaków „13 13 14 14 16”. Zatem, jak to wszystko działa (dla ułatwienia opisu
wiersze skryptu zostały ponumerowane)? Otó w wierszu oznaczonym numerem 1 najpierw
zwi kszana jest warto zmiennej x o 1 (czyli x = 13), a nast pnie ten wynik jest wy wietlany. W
linii numer 3 najpierw jest wy wietlana aktualna warto zmiennej x (czyli 13), a nast pnie jest ona
zwi kszana o 1 (czyli x = 14). W wierszu nr 5 jest wy wietlana aktualna warto zmiennej x, czyli
14. W wierszu siódmym zmiennej y jest przypisywana warto zmiennej x, a nast pnie zmienna x jest
zwi kszana o 1 (czyli y = 14, x = 15). W wierszu dziesi tym najpierw jest zwi kszana warto
zmiennej x o 1 (czyli x =16), a nast pnie warto ta jest przypisywana zmiennej y (czyli y = 16 i x =
16). Na pocz tku mo e wydawa si to troch skomplikowane, ale po dokładnym przeanalizowaniu i
samodzielnym wykonaniu kilku własnych wicze operator ten nie powinien sprawia adnych
kłopotów.
Operator dekrementacji działa analogicznie, z tym e zamiast zwi ksza warto ci zmiennych, zmniejsza
je. Oczywi cie zawsze o jeden.
+
6
Zmie kod z wiczenia 3.9 tak, aby operator ++ został zast piony operatorem --. Nast pnie
przeanalizuj jego działanie i sprawd , czy otrzymany wynik jest taki sam jak na ekranie przegl darki.
<HTML>
<HEAD>
</HEAD>
var x = 12;
To zdaje si
do wyrzucenia. Nało yły si dwa
kody.
var y;
document.write
document.write
document.write
document.write
document.write
document.write
y = x--;
document.write
document.write
y = --x;
document.write
// Koniec kodu
</SCRIPT>
<BODY>
</BODY>
</HTML>
(--x);
(" ");
(x--);
(" ");
(x);
(" ");
(y);
(" ");
(y);
JavaScript -->
3
Operacje tego typu s wykonywane oczywi cie na bitach, w arytmetyce binarnej. Zestawienie tych
operacji przedstawione jest w tabeli 3.2.
- Operacje bitowe
,
7
bitowe AND
&
bitowe OR
|
XOR
^
przesuni cie bitowe w lewo
<<
przesuni cie bitowe w prawo
>>
przesuni cie bitowe w prawo z wypełnieniem zerami
>>>
3
Operacje przypisania s
dwuargumentowe i powoduj
przypisanie warto ci argumentu
prawostronnego do argumentu lewostronnego. Najprostszym operatorem tego typu jest oczywi cie
klasyczny znak równo ci. Oprócz niego mamy jeszcze do dyspozycji operatory ł cz ce klasyczne
przypisanie z innym operatorem arytmetycznym b d bitowym.
Operacje przypisania
8 "%
3
8 "%
X
+=
Y
-
X = X +Y
*
X
–=
Y
X = X –Y
X
*=
Y
X=X*Y
X
/=
Y
X=X/Y
X
%=
Y
X=X%Y
X
<<=
Y
X = X << Y
X
>>=
Y
X = X >> Y
X
>>>=
Y
X = >>> Y
X
&=
Y
X=X&Y
X
|=
Y
X=X|Y
X
^=
3
Y
X=X^Y
"
Argumentami operacji logicznych tego typu musz by wyra enia posiadaj ce warto logiczn , czyli
TRUE lub FALSE (prawda i fałsz). Np. wyra enie 10 < 20 jest niew tpliwie prawdziwe (10 jest
mniejsze od 20), zatem jego warto logiczna jest równa TRUE.
W grupie tej wyró niamy trzy operatory: logiczne: AND (&&), logiczne OR (||) i logiczna negacja —
NOT (!). AND (iloczyn logiczny) działa w taki sposób, e daje wynik TRUE tylko wtedy, je li oba
argumenty maj warto TRUE. Logiczne OR daje natomiast wynik TRUE wtedy, gdy przynajmniej
jeden z argumentów ma warto TRUE. Logiczne NOT jest po prostu negacj , tzn. zmienia warto
argumentu na przeciwny:
Operacje porównania porównuj dwa argumenty. Wynikiem porównania jest warto TRUE (je li jest
ono prawdziwe) lub FALSE (je li jest fałszywe). Argumentami mog by zarówno warto ci
numeryczne, jak i ła cuchy znaków. Do dyspozycji mamy operatory porównania przedstawione w
tabeli 3.4.
. Operacje porównania
3
*
==
Zwraca TRUE, je li argumenty s sobie równe.
!=
Zwraca TRUE, je li argumenty s ró ne.
<
Zwraca TRUE, je li argument prawostronny jest wi kszy od lewostronnego.
>
Zwraca TRUE, je li argument prawostronny jest mniejszy od lewostronnego.
>=
Zwraca TRUE, je li argument prawostronny jest mniejszy lub równy lewostronnemu.
<=
Zwraca TRUE, je li argument prawostronny jest wi kszy lub równy lewostronnemu.
+
Wy wietl na ekranie okno dialogowe pozwalaj ce na podanie przez u ytkownika swojego imienia.
Wyprowad na ekran napis powitalny zawieraj cy podane imi . W przypadku, gdy u ytkownik
naci nie przycisk Anuluj (Cancel) lub nie poda imienia i wci nie przycisk OK, ma si pojawi stosowny
komunikat.
<HTML>
<HEAD>
</HEAD>
var imie = prompt ("Podaj swoje imi :", "");
if ((imie == null) || (imie == "")){
document.write ("Dlaczego nie podałe swojego imienia?");
}
else{ document.write ("Cze
" + imie + "!");
}
</SCRIPT>
<BODY>
</BODY>
</HTML>
Znaczenie konstrukcji if ((imie == null) || (imie == "")) jest nast puj ce: je eli
zawarto zmiennej imie równa jest warto ci null lub warto zmiennej imie równa jest pustemu
ła cuchowi znaków, całe wyra enie przyjmuje warto TRUE, zatem jest wykonywany blok instrukcji
po if. Je eli jednak u ytkownik podał jak i warto zmiennej imie nie jest równa ani null, ani
pustemu ci gowi znaków, wykonujemy blok instrukcji wyst puj cy po else. W ten sposób
jednocze nie wykorzystali my instrukcje porównania i instrukcje logiczne.
3
7 $ %
Wyst puje tu tylko jeden operator, mianowicie + (plus). Powoduje on znan ju nam z wcze niejszych
wicze , konkatenacj , czyli ł czenie ła cuchów znakowych. Np. wynikiem działania operacji:
var napis = "Idziemy do " + "kina"
b dzie oczywi cie przypisanie zmiennej napis ci gu znaków „Idziemy do kina". Co jednak
ciekawe, a tej wła ciwo ci zwykle nie posiadaj zwykle inne j zyki programowania, mo na równie
do siebie dodawa zmienne tekstowe oraz liczbowe np. po wykonaniu
var x = "Mam " + 100 + " złotych"
zmienna x b dzie zawierała ci g znaków „Mam 100 złotych".
+
-
Dokonaj konkatenacji ła cucha znakowego oraz dowolnej liczby. Wynik wy wietl na ekranie.
<HTML>
<HEAD>
</HEAD>
x = "Mam " + 100 + " złotych"
document.write (x);
</SCRIPT>
<BODY>
</BODY>
</HTML>
Ponownie wró my teraz do wiczenia 3.8. Pojawił si w nim m.in. nast puj cy fragment kodu:
var zmienna1 = 12;
var zmienna2 = 5;
document.write (zmienna3 + " " + (zmienna1 + 4) + " " );
</SCRIPT>
Pisałem wtedy, i wyra enie zmienna 1 + 4 musi by uj te w nawiasy. Dzieje si tak dlatego, e w
przeciwnym wypadku zmienna1 najpierw zostanie przekształcona na ła cuch znaków, a nast pnie do
tego ła cucha zostanie dodana czwórka. Dałoby na ekranie wynik 124 (12 i 4) zamiast spodziewanych
16. Mo na tego unikn poprzez zrezygnowanie z tworzenia jednego ła cucha znakowego jako
argumentu funkcji write(), zast puj c go list argumentów.
+
U ywaj c listy argumentów funkcji write() przekształci
nast powało niepo dane ł czenie ła cuchów znakowych.
kod z
wiczenia 3.8, tak by nie
<HTML>
<HEAD>
</HEAD>
var zmienna1 = 12;
var zmienna2 = 5;
document.write (zmienna3, " ", zmienna1 + 4, " " );
</SCRIPT>
<BODY>
</BODY>
</HTML>
1
%
%
"
Instrukcja przetwarzania warunkowego pozwala, w niektórych przypadkach, na wygodne zast pienie
bloku if...else. Konstrukcja wygl da nast puj co:
(wyra enie warunkowe)?warto
1:warto
2
Nale y rozumie to w sposób nast puj cy: je eli warunek jest spełniony, tzn. wyra enie warunkowe
ma warto TRUE — cało przyjmuje warto warto 1, w przeciwnym przypadku warto 2.
Najłatwiej zrozumie ten zapis, wykonuj c kolejne wiczenie.
+
.
Wy wietl okno dialogowe umo liwiaj ce podanie przez u ytkownika dowolnej liczby. Korzystaj c z
instrukcji przetwarzania warunkowego, sprawd , czy liczba jest ujemna czy nieujemna. Wynik
wy wietl na ekranie.
<HTML>
<HEAD>
</HEAD>
var x = prompt ("Podaj liczb :", "");
var jaka = (x < 0)? "ujemna":"nieujemna";
document.write ("Ta liczba jest " + jaka);
</SCRIPT>
<BODY>
</BODY>
</HTML>
W powy szym przykładzie najpierw prosimy u ytkownika o podanie dowolnej liczby. Nast pnie
stosujemy poznane wła nie wyra enie warunkowe, które, o ile x < 0, przypisuje zmiennej jaka ci g
znaków ujemna, a w przeciwnym przypadku ci g znaków nieujemna.
+
/
Zmie kod z wiczenia 3.14 w taki sposób, aby zamiast wyra enia warunkowego u y bloku
instrukcji if...else.
<HTML>
<HEAD>
</HEAD>
var x = prompt ("Podaj liczb :", "");
var jaka;
if (x < 0) jaka = "ujemna";
else jaka = "nieujemna";
document.write ("Ta liczba jest " + jaka);
</SCRIPT>
<BODY>
</BODY>
</HTML>
Je li kto lubi nieco bardziej skomplikowany kod, mo e rozwi za zadania z powy szych dwóch
wicze bez u ycia jakichkolwiek zmiennych. Cało zapisa w jednego tylko wiersza kodu (nie
licz c oczywi cie znaczników HTML), wła nie dzi ki u yciu wyra enia warunkowego.
+
0
Wy wietl okno dialogowe umo liwiaj ce podanie przez u ytkownika dowolnej liczby. Nie u ywaj c
zmiennych, ani bloku if...else sprawd , czy liczba jest ujemna czy nieujemna. Wynik wy wietl na
ekranie.
<HTML>
<HEAD>
</HEAD>
document.write ("Ta liczba jest " + (((prompt ("Podaj
liczb ",""))<0)?"ujemna":"nieujemna"));
</SCRIPT>
<BODY>
</BODY>
</HTML>
Powy szy skrypt w pierwszej chwili mo e wydawa si jest jasny. Wystarczy go jednak spokojnie
przeanalizowa . Wszystkie elementy potrzebne do zrozumienia zostały ju omówione, a
funkcjonalnie odpowiada on programom z dwóm poprzednich wicze . Oczywi cie z takim
upraszczaniem zapisu nie nale y przedobrzy . Mo e si bowiem okaza si , e po kilku dniach sami
nie b dziemy mogli go zrozumie . Niemniej w tym przypadku, stopie skomplikowania nie jest du y,
natomiast zdecydowanie oszcz dzamy na ilo ci zmiennych.
Wykonajmy teraz skrypt obliczaj cy pierwiastki równania kwadratowego o zadanych przez
u ytkownika parametrach. Jak pami tamy ze szkoły delt równania w postaci A*x^2+B*x+C = 0
otrzymujemy ze wzoru: B^2-4*A*C. Je eli delta jest wi ksza od zera, mamy dwa pierwiastki: x1 =
(-B+√delta)/2*A i x2 = (-B-√delta)/2*A. Je eli delta jest równa zero, istnieje tylko jedno
rozwi zanie, mianowicie x = -B/2*A. W przypadku trzecim, delta mniejsza od zera, w zbiorze liczb
rzeczywistych rozwi za nie ma.
+
2
Napisz skrypt obliczaj cy pierwiastki równania kwadratowego o parametrach zadanych przez
u ytkownika. Wyniki wy wietl na ekranie (rysunek 3.7).
, %
2
Efekt działania
skryptu rozwi zuj cego
równania kwadratowe
<HTML>
<HEAD>
</HEAD>
<!-- Ukrycie przed przegl darkami nie obsługuj cymi JavaScriptów
var A = prompt ("Podaj parametr A równania kwadratowego: Ax^2 + Bx + C = 0","");
var B = prompt ("Podaj parametr B równania kwadratowego: Ax^2 + Bx + C = 0","");
var C = prompt ("Podaj parametr C równania kwadratowego: Ax^2 + Bx + C = 0","");
var delta = B * B - 4 * A * C;
if (delta < 0){
document.write ("To równanie nie ma rozwi za w zbiorze liczb rzeczywistych!");
}
else{
if (delta == 0){
document.write ("Rozwi zaniem jest liczba: x = ", - B / 2 * A)
}
else{
document.write ("<H3>Rozwi zaniem s liczby: x1 = ", ((- B + Math.sqrt
(delta)) / (2 * A)));
document.write (" i x2 = ", ((- B - Math.sqrt (delta)) / (2 * A)));
}
}
</SCRIPT>
<BODY>
</BODY>
</HTML>
Powy szy skrypt działa prawidłowo, warto mo e jednak pokusi si o wy wietlenie, oprócz wyniku,
tak e samego równania, którego parametry wprowadził u ytkownik. Nie jest to wcale banalne, gdy
je li chcemy, aby cało
wygl dała porz dnie, trzeba b dzie zastosowa kilka instrukcji
warunkowych.
+
4
Napisz skrypt obliczaj cy pierwiastki równania kwadratowego o parametrach zadanych przez
u ytkownika. Wy wietl na ekranie równanie oraz jego rozwi zania (rysunek 3.8).
, %
4
Skrypt wy wietlaj cy
równanie kwadratowe
o zdanych parametrach
oraz jego rozwi zania
<HTML>
<HEAD>
</HEAD>
<!-- Ukrycie przed przegl darkami nie obsługuj cymi JavaScriptów
var A = prompt ("Podaj parametr A równania kwadratowego: Ax^2 + Bx + C = 0","");
var B = prompt ("Podaj parametr B równania kwadratowego: Ax^2 + Bx + C = 0","");
var C = prompt ("Podaj parametr C równania kwadratowego: Ax^2 + Bx + C = 0","");
var delta = B * B - 4 * A * C;
var rownanie = "";
if (A != 0){
rownanie = (A == 1)?"x^2 ":A + "*x^2 ";
}
if (B != 0) {
if (A != 0)
rownanie += (B == 1)?"+ x ":((B < 0)?B + "*x ":"+ " + B + "*x ");
else
rownanie += (B == 1)?"x ":((B < 0)?B + "*x ":B + "*x ");
}
if (C != 0){
if ((A == 0) && (B == 0))
rownanie += C;
else
rownanie += (C < 0)?C:"+ " + C;
}
rownanie += " = 0";
document.write("Równanie: " + rownanie +"<BR><BR>");
if (delta < 0){
document.write ("To równanie nie ma rozwi za
}
w zbiorze liczb rzeczywistych!");
else{
if (delta == 0){
document.write ("Rozwi zaniem jest liczba: x = ", - B / 2 * A)
}
else{
document.write ("Rozwi zaniem s liczby: x1 = ", ((- B + Math.sqrt (delta))
/ (2 * A)));
document.write (" i x2 = ", ((- B - Math.sqrt (delta)) / (2 * A)));
}
}
</SCRIPT>
<BODY>
</BODY>
</HTML>
Jak wida , skrypt jest teraz bardziej skomplikowany. Wyja nienia mo e wymaga wiersz:
rownanie += (B == 1)?"+ x ":((B < 0)?B + "*x ":"+ " + B + "*x ");
Pierwsze wra enie — bardzo skomplikowanie, niemniej jest to jedynie zagnie d one wyra enie
warunkowe poznane w wiczeniu 3.14. Ogólna konstrukcja takiego wyra enia wygl dała nast puj co:
(wyra enie warunkowe)?warto
1:warto
2
W naszym przypadku warto 2 zast piona została po prostu przez kolejne wyra enie warunkowe.
Schematycznie mo na przedstawi jako:
(wyra enie warunkowe 1)?warto
1:((wyra enie warunkowe 2)?warto
3:warto
4)
Mimo e skrypt jest teraz dosy skomplikowany, nie oznacza to, e nie mo na go jeszcze usprawni .
Przede wszystkim nale ałoby sprawdza , czy na pewno równanie podane przez u ytkownika jest
równaniem kwadratowym, tzn. czy parametr A nie jest równy zero. Je li tak, nie nale y oblicza delty.
Warto te zainteresowa si , czy u ytkownik nie wcisn ł przy podawaniu parametrów przycisku
Anuluj (Cancel). Kod wy wietlaj cy samo równanie te mo na usprawni . W tej chwili, np. je li
parametr B równy jest jeden, nie wy wietlamy jedynki, a tylko „ +B” , je li jednak B jest równe –1,
wy wietlane jest -1 * B. Te poprawki pozostawmy jednak jako zadanie do samodzielnego wykonania.
9
P tle to wyra enia programowe słu ce do wykonywania powtarzaj cych si czynno ci. Np. je li
chcieliby my 150 razy wypisa na stronie To jest moja strona domowa, pomijaj c sensowno
takiej czynno ci, wklepanie w skrypcie 150 razy document.write („To jest moja strona
domowa”) byłoby niew tpliwie uci liwe. P tle pozwalaj na automatyzacj takiej czynno ci.
9
:
P tla typu for ma składni nast puj c :
for (wyra enie pocz tkowe; wyra enie warunkowe; wyra enie modyfikuj ce){
blok instrukcji
}
Wyra enie pocz tkowe jest stosowane do zainicjalizowania zmiennej u ywanej jako licznik ilo ci
wykona p tli. Wyra enie warunkowe okre la warunek, jaki musi by spełniony, aby dokona
kolejnego przej cia w p tli, wyra enie modyfikuj ce u ywane jest zwykle do modyfikacji zmiennej
b d cej licznikiem.
+
5
U yj p tli typu for do wy wietlenia na ekranie dowolnej sekwencji napisów (rysunek 3.9).
, %
5
Zastosowanie
p tli typu for
do wy wietlania
sekwencji napisów
<HTML>
<HEAD>
</HEAD>
for (var i = 1; i <= 150;i++){
document.write ("To jest moja strona");
}
</SCRIPT>
<BODY>
</BODY>
</HTML>
Kod nale y rozumie nast puj co: dopóki warto zmiennej i jest mniejsza b d równa 150, zwi kszaj i
o 1 oraz wykonuj instrukcj document.write („To jest moja strona"). Efekt działania
widoczny jest na rysunku 3.9.
P tle tego typu mo na zmodyfikowa , tak aby pozby si wyra enia modyfikuj cego. Dokładniej
przenie je do wn trza p tli w sposób nast puj cy:
for (wyra enie pocz tkowe; wyra enie warunkowe;){ blok instrukcji
wyra enie modyfikuj ce
}
+
-6
Zmodyfikuj p tle typu for tak, aby wyra enie modyfikuj ce znalazło si w bloku instrukcji.
<HTML>
<HEAD>
</HEAD>
for (var i = 1; i <= 150;){
i++;
}
</SCRIPT>
<BODY>
</BODY>
</HTML>
Wa n rzecz jest, aby pami ta o redniku wyst puj cym po wyra eniu i <= 150 — jest on bowiem
niezb dny dla prawidłowego funkcjonowania całego skryptu.
W podobny sposób mo na te „ pozby si ” wyra enia pocz tkowego, przenosz c je jednak nie do
wn trza p tli, a przed ni .
+
-
Usu wyra enie pocz tkowe poza p tl for.
<HTML>
<HEAD>
</HEAD>
var i = 1;
for (;i <= 150;){
i++;
}
</SCRIPT>
<BODY>
</BODY>
</HTML>
Skoro zaszli my ju tak daleko w pozbywaniu si wyra e steruj cych, usu my równie wyra enie
warunkowe. Jest to jak najbardziej mo liwe.
+
--
Umie wyra enia: warunkowe i modyfikuj ce we wn trzu p tli, natomiast wyra enie pocz tkowe
przenie poza p tl .
<HTML>
<HEAD>
</HEAD>
var i = 1;
for (;;){
if (i++ >= 150) break;
}
</SCRIPT>
<BODY>
</BODY>
</HTML>
Nale y zwróci tutaj uwag na dwie sprawy. Po raz kolejny zauwa redniki w wyra eniu for — tym
razem dwa, oba s niezb dne, inaczej skrypt nie zadziała. Wa ne jest równie odwrócenie kierunku
nierówno ci. W wiczeniu 3.20 było bowiem i++ <=150, obecnie jest i++ >= 150. W pierwszym
przypadku sprawdzali my warunek, czy p tla ma by dalej wykonywana, w drugim sprawdzamy, czy
p tla ma si zako czy . Na to zako czenie pozwala nowa instrukcja break. Po jej napotkaniu
nast puje przerwanie wykonywanie p tli, niezale nie od stanu zmiennej steruj cej (w naszym
przypadku i).
Drug instrukcj pozwalaj c na modyfikacj zachowania p tli jest continue. Po jej napotkaniu
nast puje przerwanie bie cej iteracji i rozpocz cie kolejnej. Mówi c pro ciej nast puje przeskok na
pocz tek p tli.
+
-
Wy wietl na ekranie wszystkie liczby pomi dzy 1 a 1 000 podzielne przez 2 (rysunek 3.10). Skorzystaj z
p tli for i instrukcji continue.
, %
6
Efekt
działania skryptu
wypisuj cego liczby
podzielne przez dwa
<HTML>
<HEAD>
</HEAD>
for (var i = 1; i <= 1000; i++){
if ((i % 2) != 0)
continue;
document.write (i + " ");
}
</SCRIPT>
<BODY>
</BODY>
</HTML>
Oczywi cie do realizacji zadania z wiczenia 3.22 nie jest konieczna instrukcji continue. Wystarczy
skorzysta tylko z instrukcji if. Sama p tla wygl dałaby wtedy nast puj co:
for (var i = 1; i <= 1000; i++){
if ((i % 2) == 0)
document.write (i + " ");
}
9
P tla typu while ma składni nast puj c :
while (wyra enie warunkowe){
blok instrukcji
}
Wyra enie warunkowe musi by spełnione, eby wykonana została kolejna iteracja.
+
-.
U yj p tli typu while do wy wietlenia na ekranie dowolnej sekwencji napisów (tak jak na rysunku 3.9).
<HTML>
<HEAD>
</HEAD>
i = 0;
while(i++ < 150){
}
</SCRIPT>
<BODY>
</BODY>
</HTML>
W p tli while mo na oczywi cie równie stosowa instrukcje break i continue.

Elementy j zyka JavaScript

Transkrypt

Podobne dokumenty

JavaScript - sosw.poznan.pl

JAVAScript w dokumentach HTML (2)

Krótki kurs JavaScript

CMS czyli systemy zarządzania treścią

Strona internetowa w systemach unix

Instrukcja pierwsza wraz z ćwiczeniami