41 JavaScript Instrukcje sterujące

I N S T R U K C J E
S T E R U J Ą C E

M W P

ZAGADNIENIA

■
Postać i zastosowanie instrukcji warunkowej

■
Instrukcja przetwarzania warunkowego

■
Zastosowani pętli

■
Pętle dostępne w JavaScript

■
Różnice między instrukcją warunkową a instrukcją switch

ZADANIE INSTRUKCJI

Zadaniem instrukcji sterujących jest sterowanie skryptem. Ich zadanie polega
na sprawdzeniu określonych warunków poprawnego działania skryptu
i odpowiedniej reakcji na ewentualnie błędnie wprowadzone dane przez
użytkownika aplikacji.

Do instrukcji sterujących stosowanych w JavaScript należą:

•
Instrukcje warunkowe - if...else oraz switch;

•
Pętle - for, while, do...while.

INSTRUKCJE WARUNKOWE

Służą do wykonywania określonych instrukcji zależnie od spełnienia warunków. Podobnie jak
w języku C++, istnieją instrukcje warunkowe – niepełna i pełna.

Instrukcja warunkowa niepełna wykonuje dane instrukcje, jeśli warunek przyjmuje wartość
TRUE.

Postać instrukcji:

if (warunek)

{

instrukcje;

}

ĆWICZENIE 1

<script>

var liczba=Number (prompt ("Podaj liczbę: "));

if (liczba %2==0)

{

alert("Liczba "+liczba+" jest parzysta"); }

</script>

INSTRUKCJA WARUNKOWA PEŁNA

Instrukcja warunkowa pełna pozwala na sprawdzenie warunku, a następnie
w zależności od jego spełnienia lub nie - na wykonywanie instrukcji.

Postać pełnej instrukcji warunkowej:
if (warunek)
{
instrukcjel;
}
else
{
instrukcje2;
}

ĆWICZENIE 2

<script>
var liczba=Number(prompt("Podaj liczbę: "));
if (liczba%2==0)
{
alert("Liczba "+liczba+" jest parzysta");
}
else
{

alert("Liczba "+liczba+" jest nieprzysta"); }

</script>

INSTRUKCJA PRZETWARZANIA
WARUNKOWEGO

W języku JavaScript istnieje jeszcze instrukcja przetwarzania warunkowego, która jest
skróconą wersją instrukcji if...else. Jeśli warunek ma wartość TRUE, to zostanie
wykonana pierwsza instrukcja. Jeśli natomiast warunek ma wartość FALSE, to
zostanie wykonana druga instrukcja.

Postać instrukcji:

(warunek)? {instrukcjal;}:{instrukcja2;}

<script>

var liczba=Number(prompt("Podaj liczbę: "));

var wynik=(liczba % 2==0)? "parzysta":"nieparzysta";
alert("Liczba "+liczba+" jest "+wynik);

</script>

OPCJA DOKONANIA KILKU KOLEJNYCH
SPRAWDZEŃ

ĆWICZENIE 3

<script>
var liczba=Number(prompt("Podaj liczbę: ")); if (liczba>0)
{

alert("Liczba "+liczba+" jest dodatnia"); }

else if(liczba<0)
{
alert("Liczba "+liczba+" jest ujemna");
}
else
{
alert("Liczba jest równa 0");
}
</script>

ĆWICZENIE 4

Napisz skrypt, który przy zastosowaniu instrukcji warunkowej pobierze trzy
wartości liczbowe i w oknie przeglądarki wyświetli największą z nich.

ROZWIĄZANIE ĆW. 4

INSTRUKCJA SWITCH

• Instrukcja wyboru switch pozwala w wygodny

sposób sprawdzić ciąg warunków i zależnie od
wyników porównywania wykonać różne
instrukcje.

• Jest to odpowiednik złożonej instrukcji

if. . . else if.

ĆWICZENIE 5

INSTRUKCJA
SWITCH

Każdą instrukcję SWITCH można zamienić na
zwykłą instrukcję warunkową, ale nie odwrotnie,
ponieważ w instrukcji IF warunkiem może być
wyrażenie określające dany zakres wartości, a nie -
pojedynczą liczbę.

PĘTLA FOR

Zadaniem pętli FOR jest powtarzanie instrukcji określoną liczbę razy.

Składnia tej instrukcji jest identyczna jak w języku C++:

for (wyr_początkowe; wyr_końcowe; wyr_modyfikujące)

{

instrukcje;

}

PRZYKŁAD

<script>

for (var i=1;i<=5;i++)

{

document.write("Oto mój skrypt!<br>");

}

</seript>

ĆWICZENIE 6

Napisz skrypt, który przy zastosowaniu pętli wyświetli na ekranie liczby od 1 do
20 i obliczający ich sumę.

ĆWICZENIE 7

Napisz skrypt, który przy zastosowaniu pętli FOR wczyta dwie liczby a i b za
pomocą funkcji prompt, a następnie wyświetli liczby nieparzyste z zakresu <a,b>
oraz obliczy ich liczbę, a wynik wyświetli w oknie przeglądarki.

PĘTLA WHILE

Pętla ma następującą składnię:

while (wyr_warunkowe) {

instrukcje;

}

Jeśli warunek w pętli jest spełniony, to zostaną wykonane instrukcje wewnątrz pętli. Jeśli
warunek przyjmuje wartość TRUE, to pętla będzie wykonywana do czasu, aż warunek osiągnie
wartość FALSE. Może zatem się zdarzyć, że instrukcje nie wykonają się ani razu, jeśli za
pierwszym razem warunek przyjmie wartość FALSE.

PĘTLA WHILE - PRZYKŁAD

<script>

var i=l;

while(i<=5)

{

document.write("Oto mój skrypt!<br>");

i++;

}

</script>

•

ĆWICZENIE 8

Efektem skryptu z ćwiczenia będzie tabela z
wylosowanymi liczbami.

PĘTLA DO...WHILE

Pozwala na wykonanie instrukcji wewnętrznych co najmniej raz, zanim zostanie

sprawdzony warunek logiczny.

Składnia pętli jest następująca:

do

{

instrukcje;

ł

while(warunek)

PRZYKŁAD

<script>

var i=l;

do

{

document.write("Oto mój skrypt!<br>");

}

while (i<=5);

</script>

UWAGA

Każdą pętlę FOR można przekształcić w WHILE bądź DO...WHILE, natomiast
odwrotna zasada nie zachodzi. FOR jest pętlą stosowaną, gdy znamy liczbę
wykonywanych iteracji, natomiast pozostałe dwie pętle mogą wykonywać się
nieokreśloną liczbę razy.

ZADANIE

1. Utwórz skrypt, który wczyta za pomocą okna dialogowego wartość zmiennej x.

Za pomocą FOR wyświetl liczby z zakresu od 1 do liczby x, a następnie oblicz,
ile liczb parzystych mieści się w tym przedziale. Wykonaj to zadanie z
zastosowaniem pętli WHILE.

2. Utwórz skrypt, który wygeneruje 20 liczb z przedziału <50,100> i wyświetli je

w postaci tabeli złożonej z 20 kolumn i jednego wiersza. Zadanie wykonaj za
pomocą pętli DO...WHILE.

SPRAWDŹ SWOJĄ WIEDZĘ

1.

Jaka jest różnica między instrukcją warunkową a instrukcją przetwarzania
warunkowego?

2.

Podaj postać wszystkich instrukcji warunkowych.

3.

Jaka jest różnica w zastosowaniu pętli FOR i pętli WHILE?

4.

Jaka jest różnica w działaniu pętli WHILE i pętli DO...WHILE?

DZIĘKUJĘ!

M A LWA G P I E @ G M A I L . C O M