JavaScript struktura i pętle

JavaScript struktura i pętle

  1. Struktury JavaScriptu

Podstawowymi strukturami JavaScript są:

  • struktury warunkowe – rozgałęzienia

  • pętle ( iteracyjne )

Wszystkie instrukcje w JavaScripcie zaliczają się do jednej z tych kategorii struktur, może z wyjątkiem funkcji. Funkcje są niezależnymi instrukcjami prostymi lub złożonymi, lecz instrukcje wewnątrz funkcji zaliczają się do jednej z powyższych struktur.

Przykład skryptu wykorzystującego obydwie struktury :

<script language=”JavaScript”>

var counter = 0;

var endIt = 14;

while ( counter < endIt ) { // początek pętli

if (counter == 7) { // początek warunku

alert( “Jesteśmy w połowie skryptu”);

} // koniec warunku

counter++

} // koniec pętli

var message = „Licznik ma teraz wartość: „ + counter;

document.write(message)

</script>

Pomiędzy strukturami nie zachodzą żadne konflikty, a jedna struktura może być używana w połączeniu z inną lub nawet wewnątrz niej – np. w powyższym skrypcie struktura warunkowa jest zagnieżdżona wewnątrz struktury pętli.

    1. Struktury warunkowe

Instrukcja warunkowa to instrukcja, której można użyć do wykonania fragmentu kodu na podstawie warunku lub do wykonania czegoś innego jeżeli dany warunek nie jest spełniony.

      1. Instrukcja if

Przy testowaniu warunku w celu wykonania jednej lub kilku instrukcji najczęściej używana jest instrukcja if. Posiada ona następujący format ogólny :

if (warunek ) {

instrukcje warunkowe

}

Instrukcja warunkowa będzie wykonana tylko wtedy, gdy warunek da wartość boolowską true. W przeciwnym razie skrypt przejdzie bezpośrednio do pierwszego wiersza po zamykającym nawiasie klamrowym.

<script language=”JavaScript”>

var alpha =”High”;

var beta = “Low”;

var message = “Warunek nie spełniony”;

if (alpha > beta) {

message = “Warunek został spełniony”;

}

document.write(message);

</script>

Jeżeli warunek będzie zmieniony na

if (beta > alpha)

wówczas warunek będzie prawdziwy, wartość zmiennej message zostanie zmieniona na „Warunek został spełniony”.

W instrukcji if mogą występować wewnątrz nawiasów klamrowych instrukcje wielokrotne, co pozwala na wystąpienie kilku zdarzeń :

<script language=”JavaScript”>

var alpha = “Zebry”;

var beta = “Małpy”;

if (alpha > beta) {

var polite = “Napisz jak się nazywasz”;

var yourName = prompt(polite);

alert (“Cześć “ + yourName);

}

</script>

      1. Słowo kluczowe else

Samą instrukcję if cechuje brak alternatywnej gałęzi kodu na wypadek fałszywego wyniku. Wobec tego dodano słowo kluczowe else:

If(warunek) {

Instrukcje warunkowe

} else {

inne instrukcje warunkowe

}

W poniższym skrypcie wynik boolowski wymusza różne gałęzie ( instrukcje warunkowe) dla wartości true i false.

<script language=”JavaScript”>

var ciaglePale = “uwięziony”;

var rzucilemPalenie = „wolny”;

if ( ciaglePale > rzucilemPalenie) {

alert(„Już długo nie pożyjesz!”);

} else {

alert („Tak trzymać!”);

}

</script>

Instrukcja else jest interpretowana tylko, jeśli pierwszy warunek jest nieprawdziwy.

      1. Zagnieżdżanie instrukcji warunkowych – konwencja else if.

Czasem potrzeba rozważyć kilka opcji i udostępnić kilka różnych możliwości.

Rozgałęzienie else odbywa się do kolejnej instrukcji if. Wobec tego ostatnią instrukcją w sekwencji else if jest samotna instrukcja else.

Format else if :

if(warunek1) {

Instrukcje warunkowe 1;

}

else if (warunek2) {

Instrukcje warunkowe 2;

}

else {

nstrukcje warunkowe3;

}

Przykład zastosowania:

var pies = prompt(“Jakiego chciałbyś psa ?”, ” ”);

var piesLC = pies.toLowerCase();

if (piesLC == „bernardyn”) {

alert(“Tak, mamy bernardyny !”);

}

else if (piesLC ==”dog niemiecki”) {

alert(„Tak mamy wspaniałe dogi niemieckie!”);

}

else { alert(„Sprzedajemy tylko wielkie psy”);

pies = „informacja gdzie możesz dostać takie psy”;

}

var message = „<p>Odwiedź nas, czeka na Ciebie <b>” + pies;

message += „</b> w firmie Goliath\’s Breeders”;

document.write(message)

</script>

      1. Instrukcje switch i case.

Seria połączonych instrukcji else if dokonuje wielokrotnych porównań z warunkiem. Metoda alternatywna wobec wielokrotnego sprawdzania warunku stosuje instrukcje switch i case:

switch(wyrażenie) {

case alfa:

wykonaj instrukcję alfa

break; // pomiń pozostałe przypadki, jeżeli case alfa == wyrażenie

case beta:

wykonaj instrukcję alfa

break; // pomiń pozostałe przypadki, jeżeli case beta == wyrażenie

default: // jeśli nie ma dopasowania wykonaj poniższe instrukcje

Powiedz użytkownikowi, że nic nie pasuje

}

W zastosowaniu switch i case jako instrukcji, switch zawiera w efekcie warunek prawdziwy, porównywany z różnymi przykładami. Jeśli case pasuje do wyrażenia w instrukcji switch, wówczas zostają wykonane instrukcje w tej strukturze case. Skrypt przechodzi do kolejnego wiersza i następnej instrukcji case. Aby temu zapobiec, jedną z instrukcji w każdym wyrażeniu case powinien być break. Jeżeli case da wynik true to break przenosi wykonanie skryptu poza większy warunek switch ( poza nawiasy klamrowe ) do następnego wiersza.

<script language=”JavaScript”>

var pies = prompt(“Jakiego chciałbyś psa?”);

pies = pies.toLowerCase()

var found;

switch(pies) {

case “bernardyn”:

alert(“Sklep A sprzedaje bernardyny”);

found = „Numer telefonu : 012 2222222”;

break;

case „dog niemiecki”:

alert(“Sklep B sprzedaje dogi niemieckie”);

found = „Numer telefonu : 012 1111111;

break;

case “owczarek szwajcarski”:

alert(“Sklep C sprzedaje owczarki szwajcarskie”);

found = „Numer telefonu : 012 3333333”;

break;

default:

alert(„O inne rasy proszę pytać w Klubie Hodowcy.”);

found = „ Klub Hodowcy: 012 1234567”;

}

var message= „ <p> Proszę zadzwonić tam jak najszybciej !”;

message += „<h2>” + found + „</h2>”

document.write(message);

</script>

      1. Skróty instrukcji warunkowych

Trzyargumentowy operator warunkowy może zastąpić prostą instrukcję if/else i dzięki niemu można zaoszczędzić czasu na kodowaniu.

Przykład :

2 > 3 ? alert(„To prawda”) : alert(„Nieprawda”);

zamiast

if (2 > 3) {

alert(„To prawda”);

} else {

alert (“ Nieprawda”)

}

    1. Pętle

Pętla jest blokiem kodu, który pozwala powtórzyć sekcję kodu pewną liczbę razy, być może zmieniając pewne wartości zmiennych za każdym razem, gdy kod ten jest wykonywany. Używając pętli można często skrócić pewne zadania do kilku wierszy kodu, zamiast pisać ten sam wiersz wciąż od nowa.

      1. Pętla for

Jest to jedna z najczęściej używanych i znanych pętli. Pętla ta powtarza ciąg instrukcji liczbę razy określoną przez warunek. Warunkiem może być stała liczbowa lub stała matematyczna, albo też liczba iteracji może być zmienna.

for (wartość początkowa; warunek zakończenia; inkrementacja/dekrementacja) {

Instrukcje

}

Wartość początkowa oznacza wstępną wartość zmiennej licznika. Przy pierwszym przejściu przez pętlę wartość licznika jest równa początkowej.

Warunek zakończenia jest testem ustalającym, czy zmienna licznika spełniła warunek kończący pętlę.

Inkrementacja lub dekrementacja ustala, ile należy odjąć lub dodać do zmiennej licznika.

Typowym zastosowaniem pętli jest analiza znaków w łańcuchu. Długość łańcucha służy jako warunek zakończenia.

<script language=”JavaScript”>

var emailAd = prompt(“Podaj swój adres e-mail : “);

var found = “W adresie brakuje symbolu @ !“;

for (var counter = 0; counter = emailAd.length; counter++) {

var findAt = emailAd.charAt(counter);

if (findAt ==”@”) {

found = “Adres zawiera symbol @. “;

}

}

document.write(found);

</script>

Funkcja charAt(n) sprawdza n-ty znak łańcucha.

Skrypt weryfikuje czy użytkownik pamiętał o dodaniu znaku @ przy adresie e-mail.

      1. Pętla for/in

Gdy używana jest ta instrukcja, wówczas licznik i warunek zakończenia są ustalane przez długość obiektu. Format ogólny :

for ( zmienna licznika w obiekcie) {

Instrukcje

}

Używając for/in nie trzeba znać liczby właściwości obiektu, ponieważ instrukcja nadaje na początku zmiennej licznika wartość początkową 0 i kończy pętlę, gdy zostaną wyczerpane wszystkie właściwości obiektu.

<script language=”JavaScript”>

var airFlock=””;

var samolot = new Array(“Cessna”, “Boeing”, “Piper”, “Maule”);

for (var counter in samolot) {

airFlock +=samolot[counter] + “<br>”;

}

document.write(airFlock);

</script>

Ponieważ w JavaScripcie zmienne są obiektami, każdy znak zmiennej łańcuchowej jest właściwością zmiennej.

A teraz zmodyfikowany skrypt sprawdzający adres e mail:

<script language=”JavaScript”>

var complete = “ W adresie brakuje symbolu @”;

var emailAd = prompt(„Podaj swój adres email :”,””);

for ( var counter in emailAd) {

if (emailAd[counter] == “@”) {

complete = “Symbol @ został wpisany.”;

}

}

document.write(complete)

</script>

      1. Pętla while

Pętla while zaczyna się od warunku zakończenia i powtarza się dopóki ten warunek nie zostanie spełniony.

Ogólny format pętli while :

wstępna deklaracja wartości

while (warunek zakończenia) {

Instrukcje

Instrukcja inkrementacji lub dekrementacji

}

Dopóki warunek zakończenia nie zostanie spełniony, instrukcje będą wykonywane, a zmienna licznika będzie zwiększała lub zmniejszała swą wartość.

Poniższy przykład ilustruje dekrementacje zmiennej licznika z krokiem równym 5:

<script language=”JavaScript”>

var counter = 50;

var teamGroups = “”

while(counter > 0 ) {

teamGroups += “Drużyna” + counter + “<br>”;

counter -= 5;

}

document.write(teamGroups)

</script>

W wyniku wyświetlonym na ekranie nie istnieje drużyna 0. W chwili, gdy warunek zakończenia zwrócił wartość false, pętla została zakończona.

      1. Pętla do/while

W przeciwieństwie do pętli while, pętla do/while zawsze w pierwszej iteracji wykonuje instrukcje wewnątrz pętli. Warunek zakończenia położony jest na końcu pętli. Ogólny format:

do {

Instrukcje

Instrukcja inkrementacji lub dekrementacji

} while (warunek zakończenia)

Słowo kluczowe while mieści się na zewnątrz nawiasów klamrowych.

Poniższy przykład ilustruje wydobywanie właściwości z tablicy za pomocą tej pętli:

<script language=”JavaScript”>

var Miasta = new Array(“Tokio”, “Meksyk”, “Nowy Jork”, “Los Angeles”, “Londyn”, “Berlin”);

var counter = 0;

var metropolis = “”;

Miasta.sort();

do {

metropolis +=Miasta[counter] + „<br>”;

counter++

} while (counter < Miasta.length)

document.write (metropolis);

</script>

Instrukcja Miasta.sort() porządkuje elementy tablicy wg alfabetu przed umieszczeniem tablicy w pętli.. Następnie pętla powtarza się, dopóki zmienna licznika nie zwróci wartości false w oparciu o długość tablicy.

      1. Instrukcja with

Instrukcja ta, podobnie jak operator trzyargumentowy jest skrótem. Zamiast wymieniać wszystkie właściwości obiektu można określić całość obiektu przez instrukcję with, a następnie właściwości wewnątrz kontekstu instrukcji with. Przykładem niech będzie typowy obiekt formularza.

Najpierw trzeba określić obiekt :

document.nazwaFormularza…

Następnie podać nazwy i wartości elementów:

document.nazwaFormularza.nazwaElementów.value

Typowy formularz może zawierać kilka różnych elementów, np. imię, nazwisko, adres, miasto, kod pocztowy i wszelkie inne dane. Za pomocą instrukcji with można raz podać nazwę obiektu, po której będą następować wszystkie właściwości i ich wartości w następującym formacie :

with (obiekt) {

instrukcje z samymi właściwościami

}

Instrukcjami są zwykle wartości właściwości.

Przykład:

<html>

<head>

<script language=”JavaScript”>

function showEm() {

with(document.customer) {

var alpha = imie.value;

var beta = nazwisko.value;

var gamma = adres.value;

var delta = miasto.value;

}

var fullName = alpha + “ “ + beta + “\n”;

var livesHere = gamma + “\n” + delta;

alert (fullName + livesHere);

}

</script>

</head>

<body bgcolor= “teal”>

<form name = „customer”>

Imię : <input type=text name=”imie”>

Nazwisko : <input type=text name=”nazwisko”>

<br>

Adres : <input type=text name=”adres”>

<br>

Miasto : <input type=text name=”miasto”>

<br>

<input type=button value =”Kliknij tu” onClick=”showEm()”>

</body>

</html>

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *