Разгалінаваньне

Зараз, калі мы даведалі пра асновы маніпуляваньня старонкай з дапамогай jQuery, давайце дададзім трохі логікі ў нашыя прыкладаньні з дапамогай разгалінаваньняў. Вось прыклад:

drinks.html
<!DOCTYPE html>
    <html>
    <head>
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
        <link href="css/styles.css" rel="stylesheet" type="text/css">
        <script src="js/jquery-2.1.1.js"></script>
        <script src="js/scripts.js"></script>
        <title>Drinks</title>
    </head>
    <body>
        <div class="container">
            <div id="drinks">
                <h1>Drink menu</h1>

                <h2>Beer</h2>
                <ul>
                    <li>The King of Beer</li>
                    <li>The Queen of Beer</li>
                    <li>Real cold beer</li>
                </ul>

                <h2>Wine</h2>
                <ul>
                    <li>Red wine</li>
                    <li>White wine</li>
                    <li>Blue wine</li>
                </ul>
            </div>

            <div id="under-21">
                <h1>Sorry, we can't serve you.</h1>

                <p>It's illegal in the US. Try Mexico or Europe.</p>
            </div>
        </div>
    </body>
    </html>
styles.css
#drinks, #under-21 {
    display: none;
}
scripts.js
$(document).ready(function() {
    var age = parseInt(prompt("How old are you?"));

    if (age >= 21) {
        $('#drinks').show();
    } else {
        $('#under-21').show();
    }
});

Таму як prompt() вяртае радок, мы павінны зьмяніць яго на лік выкарыстоўваючы функцыю parseInt(). (Частка Int азначае integer, што ў сваю чаргу азначае цэлы лік. Калі б мы хацелі перавесьці радок у лік з кропкамі, мы б выкарысталі функцыю parseFloatfloating point – лікі з плаваючай кропкай.)

Новая частка JavaScript з якой Вы яшчэ не сутыкаліся завецца аператарам if...else або разгалінаваньем. Калі ўмова якая знаходзіцца паміж дужак праўдзіва, тады выконваецца першы блок. Інакш выконваецца блок які знаходзіцца пасьля ключавога слова else.

Зноў, звярніце ўвагу на водступы: ўсе што знаходзіцца ўнутры блока if і else мае 4 водступы.

Вы нават можаце зрабіць логіку больш складанай:

scripts.js
$(document).ready(function() {
    var age = parseInt(prompt("How old are you?"));

    if (age > 21) {
        $('#drinks').show();
    } else if (age == 21) {
        alert("Now don't go crazy!");
        $('#drinks').show();
    } else {
        $('#under-21').show();
    }
});

Звярніце ўвагу на аператар з дзьвумя знакамі роўна. Калі мы пытаем ці зьяўляецца што-небудзь аднолькавым, мы выкарыстоўваем == (2 знака роўна). Калі мы прысвойваем зьменнай нейкае значэньне, мы выкарыстоўваем =. Заблытацца з гэтымі дзвумя аператарам – вельмі частая памылка.

Калі JavaScript спрабуе даведацца ці зьяўляецца значэньне праўдзівым, ён прыводзіць усё да тыпа boolean. Ці памятаеце Вы што такое true і false? Яны вярталіся з функцыі confirm(). Выканайце зараз наступнае ў кансолі:

  • var age = 22;
  • age > 21;

Мы атрымліваем boolean, гэтак жа як і пасьля confirm(). Мы можам напісаць JavaScript для нашай старонкі такім чынам:

scripts.js
$(document).ready(function() {
    var over21 = confirm("Are you over 21? Click OK for yes or Cancel for no.");

    if (over21) {
        $('#drinks').show();
    } else {
        $('#under-21').show();
    }
});

Калі я раней казаў "Калі ўмова якая знаходзіцца паміж дужак праўдзіва, тады выконваецца першы блок" больш дакладна будзе сказаць "Калі ўмова, якая знаходзіцца паміж дужак вызначаецца роўнай true, тады выконваецца першы блок."

Вашая чарга:

  • Зрабіце старонку дзе ў чалавека па чарзе будзе запытвацца пра якія жывёлы ён хоча давецца. “Ці жадаеце даведацца пра цюленяў?” Калі так – адлюстраваць малюнак і тэкста пра цюленя. “Ці жадаеце даведацца пра сланоў?” Калі так – адлюстраваць малюнак і тэкст пра слана. І г.д.
  • Зрабіце старонка парка забаў, дзе будуць адлюстроўвацца толькі тыя атракцыёны, на які чалавек можа прайсьці па свайму росту.

Далей пра разгалінаваньне

Часам логіка прыкладаньня можа быць яшчэ больш складанай. Давайце пабудуем маленькае прыкладаньне, якое будзе ацэньваць кошт старохоўкі для кіроўца.:

car-insurance.html
<!DOCTYPE html>
<html>
<head>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-2.1.1.js"></script>
    <script src="js/scripts.js"></script>
    <title>Car insurance</title>
</head>
<body>
    <div class="container">
        <h1>Car insurance</h1>

        <p>To give you a quote, we need to know a little about you:</p>

        <form id="insurance">
            <label for="age">Age</label>
            <input id="age" type="text">
            <label for="gender">Gender</label>
            <select id="gender">
                <option value="female">Female</option>
                <option value="male">Male</option>
            </select>

            <button type="submit" class="btn">Calculate my quote</button>
        </form>

        <div id="quote">
            <p>You will have to pay $<span id="rate"></span> per month to get car insurance. You should probably just bike or take the bus.</p>
        </div>
    </div>
</body>
</html>
styles.css
.btn {
    display: block;
}

#quote {
    display: none;
}
scripts.js
$(document).ready(function() {
    $("form#insurance").submit(function(event) {
        var age = parseInt($("input#age").val());
        var gender = $("select#gender").val();

        var quote = (100 - age) * 3;

        $("#rate").empty().append(quote);
        $("#quote").show();

        event.preventDefault();
    });
});

Ня вельмі складана, так? Звычайна страхавыя кампаніі здымаюць нашмат больш з мужчын якім яшчэ няма 26 гадоў. Давайце дададзім $100 да кошта для такіх людзей:

scripts.js
$(document).ready(function() {
    $("form#insurance").submit(function(event) {
        var age = parseInt($("input#age").val());
        var gender = $("select#gender").val();

        var quote = (100 - age) * 3;
        if (gender === 'male' && age < 26) {
            quote += 100;
        }

        $("#rate").text(quote);
        $("#quote").show()

        event.preventDefault();
    });
});

Тут мы выкарысталі аператар && (і, т.б. калі дзве ўмовы па абодва бакі яго выканаюцца). Выраз gender === 'male' && age < 26 вызначаецца ў true толькі тады, калі дзве ўмовы вызначаюцца ў true. Вы можаце паспрабаваць пагуляць з гэтым аператарам у кансолі JavaScript.

Мы можам зьмяніць сваё меркаваньне і пачаць браць больш грошаў з усіх мужчынаў і усіх каму не споўнілася 26. Для гэтага можна скарыстацца аператарам || (або):

scripts.js
if (gender === 'male' || age < 26) {
    quote += 50;
}

Выраз gender === 'male' || age < 26 вызначаецца ў true калі прынамсі адна ўмова вызначылася ў true.

Далей давайце выправім кое-то на нашай старонцы. Калі пакінуць поле “ўзрост” пустым наша праграма будзе лічыць што ўведзена 0. Замест гэтага адлюструем памылку:

scripts.js
$(document).ready(function() {
    $("form#insurance").submit(function(event) {
        var age = parseInt($("input#age").val());
        var gender = $("select#gender").val();

        if (age) {
            var quote = (100 - age) * 3;
            if (gender === 'male' && age < 26) {
                quote += 100;
            }

            $("#rate").empty().append(quote);
            $("#quote").show();
        } else {
            alert('Please enter your age.');
        }

        event.preventDefault();
    });
});

Ці не падаецца Вам гэты код трошкі пацешным? Дагэтуль усе умовы якія мы пісалі ў аператаре if вярталі boolean. У гэты час мы напісалі туды радок. I Калі карыстальнік не ўвёў значэньне jQuery верне пусты радок (пры адчыненай старонцы са страхоўкамі выканайце $("input#age").val(); у кансолі каб ўпэўніцца самастойна). Пусты радок не зьяўляецца true або false.

Насамрэч JavaScipt мае такія канцэпты як праўдзівасьць і ілжывасьць значэньня. Да ілжывых значэньняў адносяцца пустыя радкі, лік 0, лік NaN, undefined, null (зь якім мы пакуль яшчэ не пазнаёміліся) і, канеше, false. Калі JavaScript бачыць любы зь іх ва ўмове аператара if, ён будзе паводзіць сябе зь імі як з false. Усё астатнія значэньні зьяўляюцца праўдзівымі.

Вось яшчэ адзін аператар пра які Вы павінны ведаць: Калі Вы хочаце праверыць што нешта не зьяўляецца праўдай, Вы можаце выкарыстоўваць аператар ! (не):

if (!under18) {
    // do something only adults can do
}

І, нарэшце, невялічкі трук. Гэты код:

if (something > 0) {
    return true;
} else {
    return false;
}

можа быць перапісаны на :

return something > 0;

Гэта таму што ўмова (something > 0) вызначаецца ў boolean – праўду або хлусню. Таму мы можам проста вярнуць гэты Boolean.

Яшчэ заданьні для Вас:

  • Старонка сайта знаёмстваў. Вы ўводзіце інфармацыя пра сябе, а сайт падказвае тых людзей, якія адпавядаюць Вашым крытэрам.
  • Тэст на ліберальнасьць/касэрватызм. Прыкладаньне пытае пытаньні на прадмет палітычных поглядаў карыстальнік і на выснове іх робіць выснову, да якіх з бакоў карыстальнік больш схіляецца.
  • Валідацыя формы. Праграма, якая праверая каб усе палі формы былі запоўненыя. Калі палі не запоўненыя адлюстраваць адзін alert з пералікам усіх праблемных палей. Таксама паглядзіце на класы валідацыя якія ёсьць ў Bootstrap у сэкцыі Validation states. Прымяніце гэтыя класы да палей з памылкамі.

Масівы

Да гэтуль мы заўсёды працавалі толькі з адной частка інфармацыі за раз: адзін лік, адзін радок, адзін элемент. Але звычайна элементы бываюць згрупаваны паміж сабой. Што напрыклад калі б мы хацелі каб у нас быў сьпіс месяцаў у гаду? Для гэтага існуе масіў – сьпіс рэчаў згрупаваных разам. Масіў можа выкладаць вось так:

  • var months = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "november", "december"];

Вось яшчэ масівы каб паспрабаваць у кансолі:

  • [2, 5, 7, 3423, 85, 65]
  • ["e", "p", "i", "c", "o", "d", "u", "s"]
  • ["word", 45, "blah", 123]

Вы таксама можаце зьмяшчаць зменныя ў масівах:

  • var variable = "i'm a variable";
  • [variable, "i'm not a variable"]
  • [62, 62 / 2]
  • ["string", 123, ["another string", 456], 321, "yet another string"]

Гэтак жа як лікі і радкі масівы маюць мэтады:

  • ["apple", "orange", "kiwi"].pop();
"kiwi"
  • [1, 2, 3].reverse();
[3, 2, 1]

Вы можаце дадаваць элементы ў масіў і нават камбінаваць два масівы:

  • var greetings = [];
  • greetings.push('hi');
  • greetings.push('hello');
  • greetings.concat(['hola', 'buenos dias']);

Звярніце ўвагу на тое, што concat() не зьмяняе масіў, а вяртае новы, які зьмяшчае элементы з двух.

Вы таксама можаце звярнуцца да хоць якога элемента ў масіве. Сінтаксіс з якім Вы пакуль не знаёмыя:

  • var letters = ['c', 'o', 'u', 'r', 's', 'e', 'b', 'y'];
  • letters[0]
  • letters[4]

Гэтак жа як і з масівамі мы пачынаем лічыць з нуля. нулявы элемент масіва – 'e', чацвёрты – 'o'.

Пагуляйце з масівамі самастойна:

  • Зрабіце масіў з Вашым сёстрамі і братамі ўключаючы Вас.
  • Зрабіце масіў з Вашымі бацькамі.
  • Скамбінуйце абодва выкарыстоўваючы concat() у масіў “сям’я”.
  • Пачытайце яшчэ пра мэтады масіваў: MDN. Паспрабуйце прынамсі пяць з іх.

Папярэдні занятак Наступны занятак