Kurs JavaScript - Instrukcja warunkowa switch  

Autor: Bożena Jurczyk

Opublikowano: 2011-12-16

Instrukcja warunkowa if pozwala na wykonanie pewnych czynności w kodzie, w zależności od spełnienia jednego lub też kilku warunków. Jednakże często bywa tak, iż chcesz wykonać poszczególne bloki swojego kodu, w zależności od konkretnych wartości, otrzymanych np. z formularza, wypełnionego przez użytkownika. W tym celu możesz wielokrotnie zastosować instrukcję if-else, lub też użyć drugiej instrukcji warunkowej – switch.

Przed wykonaniem zadań powinieneś wiedzieć:

1. jak tworzyć strony internetowe,
2. jak używać operatorów w języku JavaScript.

Po wykonaniu zadań nauczysz się:

• jak używać instrukcji warunkowej switch w języku JavaScript.

Implementacja

W przeglądarce Internet Explorer (od wersji 8) otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip. Jeśli nie możesz pobrać pliku, zapoznaj się z informacjami zawartymi w samouczku Jak przygotować stronę samouczka JavaScript.

Twoim zadaniem będzie sprawdzenie, jak posługiwać się instrukcją warunkową switch w języku JavaScript.

Prosta instrukcja warunkowa switch

Za pomocą instrukcji warunkowej switch, możesz, w zależności od wartości pewnej zmiennej, wykonywać poszczególne bloki kodu. W przeciwieństwie do instrukcji if, nie muszą one być otaczane nawiasami klamrowymi { }.

Składnia instrukcji:

switch(zmienna)
 {
 case wartosc1:
  //gdy zmienna=wartosc1  
   break;
 case wartosc2:
  //gdy zmienna=wartosc2  
   break;
 default:
   //kod wykonywany, gdy zmienna przyjmuje inną niż powyższe wartości
 }

1. Otwórz stronę internetową jTest.html, znajdź pole tekstowe i wpisz liczbę 5.
2. Następnie wciśnij przycisk F12 lub wybierz Tools­>F12 developer tools.
3. W oknie, kliknij na zakładkę Script (oznaczoną 1 na Rys.1.), a w wierszu, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.), wpisz:

function checkAge(val){
    var text = 'Wybrana przez Ciebie wartość to: '; 
    switch(val){
        case '1': text += 'I – jeden';
        case '2': text += 'II – dwa';
        case '3': text += 'III – trzy';
        case '4': text += 'IV – cztery';
        case '5': text += 'V – pięć';
    }
    return text;
}

var val = document.getElementById('mojTekst').value;
alert(checkAge(val));

Rys. 1. Narzędzia programistyczne do JavaScript w Internet Explorer 9.

4. Wciśnij przycisk Run Script.
5. Na stronie powinien pojawić się alert Rys. 2.

Rys. 2. Alert informujący o wybranej wartości.

6. W polu tekstowym wpisz liczbę 3, a następnie wciśnij przycisk Run Script.
7. Na stronie powinien pojawić się alert Rys. 3.

Rys. 3. Błąd wyświetlania kilku wartości case.

Informacja

Instrukcja switch działa jak wielokrotne użycie instrukcji if ... else. Wszystkie warunki, reprezentowane poprzez poszczególne instrukcje case, sprawdzane są od pierwszej do ostatniej. Dlatego też w drugim przykładzie, wykonany został kod, zarówno z case:3, jak i case:4 oraz case:5. Aby temu zapobiec, należy w każdym bloku, jako ostatnią instrukcję, dodać break.

Instrukcja switch

Aby zabezpieczyć się przed sytuacją, kiedy żaden warunek nie będzie spełniony w instrukcji switch, należy użyć instrukcji default.

1. Otwórz stronę internetową jTest.html, znajdź pole tekstowe i wpisz jeden skrót języka ze zbioru: en, de, fr, it, lt, ru.
2. Otwórz okno narzędzi programistycznych przeglądarki Internet Explorer, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.) wpisz:

function switchLang(val){
    var text = '';  
    switch(val){        
        case 'en': text = 'Good morning. Welcome!';
            break; 
        case 'de': text = 'Guten Morgen. Herzlich Willkommen!';
            break;
        case 'fr': text = 'Bonne matin. Bienvenue!';
            break;
        case 'it': text = 'Buongiorno. Benvenuti!';
            break;
        case 'lt': text = 'Labas rytas. Sveiki atvykę!';
            break;
        case 'ru': text = 'Доброе утро. Добро пожаловать!';
            break;
        default: text = 'Witaj (język domyślny)';
    }
    return text;
}

var val = document.getElementById('mojTekst').value;
alert (switchLang(val));

3. Wciśnij Run script.
4. W wyniku powinien pojawić się alert o treści zależnej od podanej wartości. Dla "de" będzie to Rys. 4.

Rys. 4. Prawidłowa realizacja instrukcji case.

Informacja

Wykorzystana w ćwiczeniu instrukcja switch, pozwala na to, aby w zależności od wybranego skrótu, wyświetlić komunikat w odpowiednim języku. Z kolei instrukcja break służy do tego, aby przerwać wykonywanie pozostałych linii kodu. Instrukcja default zawiera kod, który zostanie wykonany, kiedy podana przez użytkownika wartość nie spełnia żadnego kryterium z określonych warunków, czyli w tym zadaniu wpisana wartość nie zawiera się w zdefiniowanym na początku zadania zbiorze skrótów różnych języków.

Podsumowanie

W tym samouczku nauczyłeś się, jak działa instrukcja warunkowa switch w języku JavaScript. Dowiedziałeś się również, jaką rolę odgrywają w niej instrukcje break i default oraz w jaki sposób ich użyć, aby instrukcja warunkowa switch działała poprawnie.

W kolejnym samouczku nauczysz się, jak używać pętli for w języku JavaScript – Pętla - for.

 

---