Kurs JavaScript - Instrukcja warunkowa if  

Autor: Bożena Jurczyk

Opublikowano: 2011-12-15

W samouczku, opisującym wyrażenia w języku JavaScript, wspomniałam, iż instrukcje warunkowe, jak też ich skrócona forma, którą są wyrażenia warunkowe, wymagają sformułowania konkretnego warunku. Zwróci on zawsze jedną z dwóch wartości – prawdę lub fałsz. Za pomocą operatorów logicznych, możesz dowolnie rozbudowywać warunek, który jednocześnie może np. sprawdzić, czy wprowadzona przez Ciebie liczba mieści się w odpowiednim zakresie i jednocześnie jest liczbą parzystą.

Przed wykonaniem zadań powinieneś wiedzieć:

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

Po wykonaniu zadań nauczysz się:

• jak używać instrukcji warunkowej if 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ą if w języku JavaScript.

Instrukcja if

Za pomocą instrukcji warunkowej if, możesz mieć pewność, iż pewne instrukcje wykonane zostaną wyłącznie wtedy, gdy spełniony zostanie określony warunek.

Składnia polecenia:

if (warunek)
   {
   //kod, który zostanie wywołany, jeśli warunek zostanie spełniony
   }

1. Otwórz stronę internetową jTest.html, znajdź pole tekstowe i wpisz liczbę 18.
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:

var val = document.getElementById('mojTekst').value;
if (val >= 0 && val%2 == 0) {
    alert('Witaj. Liczba ' + val + ' jest parzystą liczbą dodatnią.'); }

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. Informacja o wprowadzonej liczbie.

Informacja

Użyta instrukcja warunkowa sprawdza, czy wprowadzona do pola tekstowego wartość jest parzystą liczbą dodatnią. Tylko w przypadku spełnienia tych dwóch warunków jednocześnie na ekranie zostanie wyświetlony alert.

Instrukcja if – else

Rozbudowana instrukcja warunkowa może składać się z kilku warunków, rozpatrywanych oddzielnie poprzez wyrażenie if – else, a także może zawierać instrukcje zagnieżdżone.

Składnia polecenia:

if (warunek)
   {
   //kod, który zostanie wywołany, jeśli warunek zostanie spełniony
   }
else
   {
   //kod, który zostanie wywołany, jeśli warunek nie zostanie spełniony
   }

1. Otwórz okno narzędzi programistycznych przeglądarki Internet Explorer, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.) wpisz:

function checkValue(val){
    var text;
    if(val > 0){
        if(val <= 1){
            text = val + '. rok życia – Wiek niemowlęcy'; }
        else if(val > 1 && val<= 3){
            text = val + '. rok życia – Wiek poniemowlęcy'; }
        else if(val > 3 && val<= 6){
            text = val + '. rok życia – Wiek przedszkolny'; }
        else if(val > 6 && val<= 12){
            text = val + '. rok życia – Wiek szkolny'; }
        else if(val > 12 && val<= 15){
            text = val + '. rok życia – Wiek dorastania'; }
        else if(val > 15 && val<= 23){
            text = val + '. rok życia – Wiek młodzieńczy'; }
        else if(val > 23 && val<= 40){
            text = val + '. rok życia – Wiek dorosłości'; }
        else if(val > 40 && val<= 60){
            text = val + '. rok życia – Wiek średni'; }
        else{
            text = val + '. rok życia – Wiek starzenia się'; }
        } 
    else{
        text = 'Podana wartość nie jest liczbą'; }
    return text;
}

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

2. Wciśnij przycisk Run script.
3. W wyniku powinien pojawić się alert o treści zależnej od podanej wartości.

Informacja

Pierwsza instrukcja warunkowa sprawdza, czy wprowadzona wartość jest liczbą dodatnią. Jeżeli nie, to wyświetlona zostanie informacja: "Podana wartość nie jest liczbą". Zagnieżdżona instrukcja if, bada następnie tę liczbę pod względem zawierania się w poszczególnych przedziałach liczbowych. W zależności od spełnionego warunku, wyświetlana jest informacja na temat wieku człowieka.

Podsumowanie

W tym samouczku nauczyłeś się, jak działa instrukcja warunkowa if w języku JavaScript. Poznałeś także bardziej rozbudowaną wersję, umożliwiającą wielostopniowe sprawdzanie warunków i wykonywanie instrukcji w zależności od wyniku.

W kolejnym samouczku nauczysz się, jak używać w kodzie instrukcji warunkowej switch – Instrukcja warunkowa – switch.

 

---