5 ОСНОВИ HTML
Вбудована в браузер JavaScript-консоль, якою ми досі користувалися, гарна, коли потрібно протестувати невеликий фрагмент коду, але для створення більш масштабних програм знадобиться трохи більше гнучкий і універсальний засіб – на зразок веб-сторінки з вбудованим JavaScript-кодом. У цьому розділі ми якраз і навчимося створювати нескладні сторінки на мові HTML.
Гіпертекстова мова розмітки HTML призначена спеціально для створення веб-сторінок. Слово гіпертекстовий означає, що фрагменти тексту пов'язані між собою гіперпосиланнями - тобто посиланнями в документі на інші об'єкти. А мова розмітки - це спосіб вбудовувати в текст додаткову інформацію. Розмітка вказує програмам (таким як браузер), як відображати текст і що з ним робити.
У цьому розділі буде розглянуто, як створювати HTML-документи в текстовому редакторі - програмі, призначеної для роботи з простим текстом без форматування, на відміну від текстових процесорів на кшталт Microsoft Word. Документи текстових процесорів містять форматований текст (з різними типами і розмірами шрифтів, кольорами і т. п.), і влаштовані ці програми так, щоб форматування було легко міняти. Крім того, багато текстових процесорів дозволяють вставляти в текст картинки та інші графічні елементи.
Простий же текст є тільки текстом – без кольорів, стилів, розмірів і т. д. Вставити в такий текст картинку не вийде, хіба тільки скласти її з символів.
Текстові редактори
Ми будемо створювати HTML-документи в крос-платформенном (сумісному з Windows, Mac OS і Linux) редакторі Sublime Text. Завантажити Sublime Text можна безкоштовно, однак через деякий час вас попросять придбати ліцензію. На випадок, якщо вам такий варіант не до вподоби, є кілька повністю безкоштовних альтернатив. Хоча в цьому розділі я буду орієнтуватися на Sublime Text, робота з іншими редакторами буде не сильно відрізнятися - завдяки відносній простоті текстових редакторів як таких.
• Gedit - крос-платформний текстовий редактор, частина проекту GNOME (https://wiki.gnome.org/Apps/Gedit/).
• Для Microsoft Windows хорошою альтернативою буде Notepad ++ (http://notepad-plus-plus.org/).
• У Mac OS ви можете скористатися TextWrangler (http://www.barebones.com/products/textwrangler/).
Щоб встановити Sublime Text, зайдіть на сайт http: // www.sublimetext.com/. Інструкції по установці редактора відрізняються для кожної з операційних систем, але написані просто і зрозуміло.
У разі будь-яких проблем загляньте в розділ Support ( «Підтримка») на сайті програми.
Наш перший HTML-документ
Встановивши Sublime Text, запустіть його і створіть новий файл, вибравши File -New File. Потім виберіть File Save, щоб зберегти новий, порожній файл; назвіть його page.html і збережіть на робочий стіл. Настав час писати HTML-код. Введіть в файл page.html наступний текст:
<meta charset="UTF-8"> <h1>Привіт, світ!</h1> <p>Моя перша веб-сторінка.</p>
Збережіть оновлений файл page.html, вибравши File Save. Тепер подивимося, на що це буде схоже в веб-браузері. Відкрийте Chrome і, утримуючи CTRL, натисніть O. У вікні виберіть файл page.html, що знаходиться на робочому столі. Те, що ви повинні після цього побачити, зображено на рисунку нинжче.
Теги та елементи
HTML-документи складаються з елементів. Кожен елемент починається з відкриваючого тега і закінчується тегом, що закривається. Наприклад, в нашому першому документі поки всього два елементи: h1 і p (а також елемент meta, але його ми окремо тут розглядати не будемо. Він потрібен, щоб в браузері відображався текст кирилицею). Елемент h1 починається з відкриваючого тега <h1> і закінчується тегом </h1>, що закривається, а елемент p починається з відкриваючого тега <p> і закінчується тегом </ p>, що закривається. Все, що знаходиться між відкритим і закритим тегами, називають вмістом елемента.
Відкриті теги являють собою назву елемента в кутових дужках: <і>. Закриті теги виглядають так само, але перед ім'ям елемента в них ставиться похила риска (/).
Елементи заголовків
У кожного елемента є особливе призначення і спосіб застосування.
Наприклад, елемент h1 означає «це заголовок верхнього рівня».
Вміст, який ви введете між відкритим і закритим тегами <h1>, браузер відобразить на окремому рядку великим жирним шрифтом. Всього в HTML шість рівнів заголовків: h1, h2, h3, h4, h5 і h6.
Виглядають вони так:
<meta charset="UTF-8"> <h1>Заголовок першого рівня</h1> <h2>Заголовок другого рівня</h2> <h3>Заголовок третього рівня</h3> <h4>Заголовок четвертого рівня</h4> <h5>Заголовок п'ятого рівня</h5> <h6>Заголовок шостого рівня</h6>
Елемент p
Елемент p потрібен для поділу тексту на параграфи. Будь-який фрагмент тексту, який ви помістите між тегами <p>, буде відображено як окремий параграф, з відступами зверху і знизу. Давайте подивимося, що відбувається, якщо елементів <p> кілька. Для цього додайте новий рядок в документ page.html.
<meta charset="UTF-8"> <h1>Привіт, світ!</h1> <p>Моя перша веб-сторінка.</p> <p>Додамо ще параграф.</p>
Зверніть увагу, що кожен параграф відображений з нового рядка, а між параграфами зроблений відступ. Все це завдяки тегу <p>.
Пробіли в HTML і блокові елементи
А як наша сторінка буде виглядати без тегів? Давайте подивимося:
Мало того що пропало форматування, тепер весь текст відображається в один рядок! Справа в тому, що в HTML все пробільні символи перетворюються в єдиний пробіл. Пробільні символи - це будь-які символи, які відображаються в браузері як пробіли або відступи, - наприклад, це пробіл, табуляція і символ переведення рядка (той самий, який ви вводите, натискаючи ENTER або RETURN). Тому всі порожні рядки, які ви вставите між фрагментами тексту в HTML-документі, стиснуться до одного пробілу.
Елементи p і h1 - блокові; це означає, що їх вміст відображається окремими блоками тексту з нового рядка і будь-який вміст, що йде після такого блоку, теж почнеться з нового рядка.
Рядкові елементи
А тепер додамо до нашого документу ще два елементи, em і strong: на рисунку нижче показано, як виглядає сторінка з новими тегами.
<meta charset="UTF-8"> <h1>Привіт, світ!</h1> <p>Моя <em>перша</em> <strong>веб-сторінка</strong>.</p> <p>Додамо ще <strong><em>параграф</em></strong>.</p>
Елемент em відображає свій вміст курсивом, а елемент strong - жирним шрифтом. І em, і strong відносяться до рядкових елементів, оскільки вони, на відміну від блокових елементів, не виводять свій вміст окремим рядком. Щоб відобразити текст одночасно жирним шрифтом і курсивом, помістіть його усередину обох тегів. Зверніть увагу, що в останньому прикладі теги стояли в такій послідовності:
<Strong> <em> параграф </ em> </ strong>. Дуже важливо правильним чином вкладати елементи один в одного: якщо один елемент знаходиться всередині іншого елемента, то його відкритий тег і його закритий тег також повинні знаходитися всередині цього елемента.
Наприклад, такий варіант недопустимий:
Закритий тег </ strong> розташований тут перед закритим тегом </ em>. Як правило, браузери ніяк не сповіщають про подібні помилки, однак неправильно вкладені теги приведуть до неправильного відображенню сторінок.
Повноцінний HTML-документ
До сих пір ми мали справу лише з фрагментами HTML, тоді як повноцінний HTML-документ повинен включати деякі додаткові елементи. Давайте подивимося на закінчений HTML-документ і розберемося, навіщо потрібна кожна його частина. Додайте в файл page.html наступні елементи:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Моя первая настоящая HTML-страничка</title> </head> <body> <h1>Привіт, світ!</h1> <p>Моя <em>перша</em> <strong>веб-сторінка</strong>.</p> <p>Додамо ще <strong><em>параграф</em></strong>.</p> </body> </html>
Давайте по черзі розглянемо елементи з файлу page.html.
Тег <! DOCTYPE html> - всього лише оголошення, він повідомляє: «це HTML-документ ». Далі слідує відкритий тег <html> (закритий тег </ html> знаходиться в самому кінці коду). Кожен HTML-документ повинен містити елемент html верхнього рівня вкладеності.
Усередині елемента html знаходяться елементи head і body. Елемент head містить певну інформацію про HTML-документ, наприклад елемент title, що встановлює назву документа, - зверніть увагу, що текст на закладці браузера («Моя перша справжня HTML-сторінка») відповідає вмісту title. Елемент title знаходиться всередині елемента head, який, в свою чергу, знаходиться всередині елемента html.
Усередині елемента body ви побачите уміст, яке відображається в браузері. В даному випадку ми просто скопіювали ці дані з попереднього прикладу.
Ієрархія HTML
HTML-елементи підпорядковані суворій ієрархії, яку можна собі представити у вигляді перевернутого дерева. На рисунку у вигляді дерева показаний наш документ.
Зверху знаходиться елемент html. Він містить елементи head і body. У свою чергу, head містить елемент title, а body - елементи h1 і p. Браузер інтерпретує наш HTML згідно з цією ієрархією. На рисунку нижче показаний інший спосіб представлення ієрархії HTML - у вигляді вкладених прямокутників.
Додамо в HTML посилання
Раніше в цій главі ми дізналися, що HTML - гіпертекстова мова. Це означає, що HTML-документи можуть містити гіперпосилання (або просто посилання), що ведуть на інші веб-сторінки. Такі посилання можна створювати за допомогою елемента a (від англійського anchor - «якір»).
Змініть свій HTML-документ, щоб він відповідав наступному прикладу: видаліть другий елемент p, а також теги em і strong і додайте виділений кольором код, щоб створити посилання на інтернет адресу https://news.sumdu.edu.ua/uk/news.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Моя первая настоящая HTML-страничка</title> </head> <body> <h1>Привіт, світ!</h1> <p>Моя <em>перша</em> <strong>веб-сторінка</strong>.</p> <p><a href="https://news.sumdu.edu.ua/uk/news.html">Натисни сюди</a>, щоб переглянути останні новини СумДУ.</p> </body> </html>
Атрибути посилань
Давайте розберемося, як ми створили це HTML-посилання. Щоб браузер знав, куди перейти по кліку, ми додали елементу a так званий атрибут. Атрибути HTML документів нагадують пари «ключ-значення» в об'єктах JavaScript: у кожного атрибута є ім'я і значення.
Подивіться ще раз на створене нами посилання:
<a href="https://news.sumdu.edu.ua/uk/news.html">Натисни сюди</a>
В даному випадку у атрибута є ім'я href і значення "https://news.sumdu.edu.ua/uk/news.html" - тобто веб-адреса.
Посилання відправить вас за будь-якою адресою, яка вказана в якості значення атрибута href.
Атрибут title
Також до посилань можна додавати атрибут title - він задає текст, який з'являється при наведенні курсору на посилання. Наприклад, давайте змінимо відкритий тег <a>, щоб він виглядав так:
<p><a href="https://news.sumdu.edu.ua/uk/news.html" title="Новини СумДУ!">Натисни сюди</a>, щоб переглянути останні новини СумДУ.</p>
Додаткові матеріали:
-
Курс HTML і CSS від Codeacademy: http://www.codecademy.com/tracks/web/
-
Mozilla Webmaker: https://webmaker.org/
-
Введення в HTML від Mozilla Developer Network: https: // developer.mozilla.org/ru/docs/Web/Guide/HTML/Introduction
6 УМОВНІ КОНСТРУКЦІЇ ТА ЦИКЛИ
Умовні конструкції та цикли - одні з найважливіших понять в JavaScript. Умовна конструкція являє собою команду: «якщо щось істинно (true), зроби це, інакше зроби те». Приклад: виконавши домашнє завдання, ви можете з'їсти морозиво, але, якщо домашнє завдання не готове, морозиво вам не світить. А цикл - це інструкція: «До тих пір, поки щось істинно (true), продовжуй робити це». Приклад: поки ви відчуваєте спрагу, продовжуйте пити воду.
Умовні конструкції та цикли - поняття, що лежать в основі будь-якої програми. Їх називають керуючими конструкціями, оскільки вони дозволяють вирішувати, які частини коду і коли виконувати, а також наскільки часто це потрібно робити, виходячи з заданих вами умов.
Для початку давайте розберемося, як вбудовувати JavaScript в HTML файл. Це дозволить писати програми складніші, ніж ті, з якими ми мали справу до сих пір.
Підключення JavaScript-коду в HTML
Ось HTML-файл, який ми створили в п'ятому розділі, з деякими доповненнями.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Моя первая настоящая HTML-страничка</title> </head> <body> <h1>Привіт, світ!</h1> <p>Моя <em>перша</em> <strong>веб-сторінка</strong>.</p> <script> var message = "Привіт, світ!"; console.log(message); </script> </body> </html>
Як бачите, ми додали новий елемент під назвою script. Цей елемент особливий: вміст більшості елементів HTML відображається на сторінці, однак те, що знаходиться всередині тегів script, вважається JavaScript-кодом і передається для виконання інтерпретатору JavaScript.
Тепер розглянемо код всередині елемента script:
var message = "Привіт, світ!"; console.log(message);
Виконання JavaScript, вбудованого в HTML, помітно відрізняється від запуску коду в консолі. Введений в консолі код виконується при першому ж натисканні ENTER, після чого ви побачите результат спрацювавшої команди. Однак код, вбудований в веб-сторінку, виконується відразу і цілком, від верхніх рядків до нижніх, причому в консоль нічого автоматично не виводиться - якщо ми не попросимо браузер про це окремо.
Для виведення в консоль можна скористатися командою console.log - це допоможе стежити за ходом виконання програми. Метод console.log приймає будь-яке значення і друкує це значення в консолі. Наприклад, завантаживши в браузер наш останній приклад, ви побачите в консолі наступне:
Виклик console.log (message) в рядку привів до появи в консолі рядка "Привіт, світ!". Тепер, коли ви знаєте, як із зручністю писати довгі JavaScript програми, можна перейти до вивчення умовних конструкцій.
Умовні конструкції
В JavaScript є два види умовних конструкцій - це if і if ... else. Оператор if виконує фрагмент коду, якщо якась умова істинна (true). Наприклад: якщо ви добре себе вели, то отримаєте цукерку. А оператор if ... else виконує один фрагмент коду, якщо умова дає true, і інший фрагмент в іншому випадку. Наприклад: якщо ви добре себе вели, отримаєте цукерку, інакше вас не відпустять гуляти.
Конструкція if
Найбільш проста з умовних конструкцій JavaScript - це if. Вона використовується, щоб запускати код, якщо якась умова істинна (true).
Поверніться до нашого HTML-файлу і замініть вміст елемента script такими рядками:
<script>
var name = "Миколай";
console.log("Привіт, " + name);
if (name.length > 6) {
console.log("Твоє ім'я занадто довге!");
}
</script>
Спочатку ми створили змінну name і присвоїли їй значення - рядок "Микола". Потім ми за допомогою console.log надрукували рядок "Привіт, Микола".
Далі ми використали конструкцію if, щоб перевірити: довжина name більше, ніж шість символів? Якщо це так, ми за допомогою console.log виводимо: "Твоє ім’я занадто довге!".
Конструкція if складається з двох частин: умови і тіла. Умова має давати логічне значення. А тіло – один або кілька рядків JavaScript-коду, які будуть виконані, якщо умова істинна (true).
В імені Микола 6 букв, тому name.length поверне значення 6, і умова name.length > 6 дасть true. В результаті буде виконано тіло оператора if, і в консолі з'явиться повідомлення. Щоб уникнути виконання if, поміняйте ім'я Микола на Нік
var name = "Нік";
Тіло оператора if виконується, тільки коли умова дає true.
Якщо ж умова дає false, інтерпретатор ігнорує конструкцію if і переходить до наступного за ним рядку.
Конструкція if ... else
Як вже було сказано, оператор if запускає код, тільки якщо умова дає true. Але якщо ви хочете, щоб за умовою false теж щось відбувалося, вам потрібна конструкція
if ... else.
Давайте доповнимо попередній приклад:
var name = "Миколай";
console.log("Привіт, " + name);
if (name.length > 6) {
console.log("Твоє ім'я занадто довге!");
} else{
console.log("Ваше ім'я не є найдовшим.");
}
Цей код робить практично те ж, що і раніше, проте, якщо ім'я (name) не довше 6 символів, він виводить інше, альтернативне повідомлення.
Ланцюжок з конструкцій if ... else
Найчастіше потрібно перевірити кілька умов і зробити щось, якщо одне з них дає true. Приклад: ви прийшли в китайський ресторан і вибираєте, що б таке з'їсти. Найбільше ви любите курку з лимоном (lemon chicken), і, якщо вона є в меню, ви її замовите. Якщо ж її немає, ви замовите яловичину в соусі з чорних бобів (beef with black bean). Однак якщо і це блюдо відсутнє, ви зупинитеся на свинині в кислосолодкому соусі (sweet and sour pork). Нарешті, в малоймовірному випадку, коли немає жодної з цих страв, ви замовите рис з яйцем, оскільки знаєте, що його подають у всіх китайських ресторанах.
var lemonChicken = false;
var beefWithBlackBean = true;
var sweetAndSourPork = true;
if (lemonChicken) {
console.log("Чудово! Я буду курицю з лимоном!");
} else if (beefWithBlackBean) {
console.log("Замовляю яловичину.");
} else if (sweetAndSourPork) {
console.log("Добре, замовлю свинину.");
} else {
console.log("Що ж, залишається рис з яйцем.");
}
Щоб створити ланцюжок if ... else, почніть зі звичайного оператора if і після закритої фігурної дужки його тіла введіть ключові слова else if, а слідом - ще одна умова і ще одне тіло. Після можна додати ще else if, і так до тих пір, поки у вас не закінчаться умови (яких може бути скільки завгодно). Завершальна секція else буде виконана, якщо жодна з умов не дає true.
Цикли
Як ми тепер знаємо, умовні конструкції дозволяють запускати фрагмент коду, якщо умова дає true. Цикли, з іншого боку, дозволяють виконувати фрагмент коду багаторазово - до тих пір, поки якась умова дає true.
Цикл while
Найпростіший з циклів - цикл while. Цей цикл знову і знову виконує код свого тіла, до тих пір, поки задана умова не перестане давати true. Використовуючи цикл while, ми маємо на увазі наступне: «Продовжуй робити це, поки умова дає true. Але якщо вона дасть false, зупинись ».
Приклад.
Припустимо, нам потрібно порахувати до 10 і завершити розрахунок фразою «Розрахунок завершено».
var counter = 0;
while (counter < 10) {
console.log("Лічильник: " + counter + "!");
counter++;
}
console.log("Розрахунок завершено!");
Ми створили змінну counter і присвоїли їй значення 0. Дійшовши до циклу while, ми перевіряємо, чи правда, що counter менше 10. Оскільки 0 менше 10, виконується код в фігурних дужках і вираз "Лічильник: "+ counter +"! "виводиться в консоль як «Лічильник: 0!». Далі команда counter++ збільшує значення counter на 1, ми повертаємося до початку циклу, і все повторюється знову.
Цикл for
Оператор for спрощує створення циклів, влаштованих в такий спосіб: спочатку створюється змінна, а потім тіло циклу виконується знову і знову до тих пір, поки умова дає true, причому в кінці кожного повтору значення змінної оновлюється. Програмуючи цикл for, ми створюємо змінну, задаємо умову, вказуємо, як повинна змінюватися змінна після кожного повтору, - і лише потім переходимо до написання тіла циклу. Наприклад, ось як можна рахувати лічильник за допомогою for:
for (var counter = 0; counter < 10; counter++) {
console.log("Лічильник: " + counter + "!");
}
console.log("Розрахунок завершено!");
Налаштування (var counter = 0) виконується до запуску циклу. Як правило, тут створюють змінну для відстеження кількості повторів. У нашому випадку це змінна counter з початковим значенням 0.
Умова (counter <10) перевіряється перед кожним повтором тіла циклу. Якщо умова дає true, тіло виконується, інакше цикл закінчує роботу. У нашому випадку цикл зупиниться, коли значення counter досягне 10.
Приріст (counter ++) виконується після кожного повтору тіла циклу. Як правило, тут змінюють значення змінної циклу. У цьому прикладі ми після кожного повтору збільшуємо counter на 1.
Цикли for зручні, коли потрібно зробити щось певну кількість разів. Наприклад, ця програма тричі виведе слово «Привіт!».
var timesToSayHello = 3;
for (var i = 0; i < timesToSayHello; i++) {
console.log("Привіт!");
}
Цикл for, масиви і рядки
Дуже часто цикл for використовують для перебору всіх елементів масиву або всіх символів рядка. Наприклад, ось цикл, який друкує назви всіх тварин, які є в зоопарку:
var animals = ["лев", "фламінго", "білий ведмідь", "удав"];
for (var i = 0; i < animals.length; i++) {
console.log("В даному зоопарку є " + animals[i] + ".");
}
У цьому циклі i спочатку дорівнює 0, а потім збільшується до значення animals.length - 1, тобто 3. Числа 0, 1, 2 і 3 - індекси елементів в масиві animals. Це означає, що при кожному повторі циклу i приймає значення наступного індексу, а animals [i] відповідає наступній тварині з масиву animals. Коли в i число 0, animals [i] дасть нам рядок "лев". Коли в i число 1, animals [i] дасть "фламінго" і т. д.
Як ми вже знаємо з другого розділу, до окремих символів рядка можна звертатися тим же способом, що і до елементів масиву, - за допомогою квадратних дужок. У наступному прикладі цикл for використовується для виведення символів імені:
var name = "Нік";
for (var i = 0; i < name.length; i++) {
console.log("В моєму імені є буква " + name[i] + ".");
}
Інші варіанти застосування for
Не обов'язково спочатку присвоювати значення змінній циклу 0, а потім кожен раз збільшувати її на 1. Наприклад, ось як можна надрукувати всі ступені двійки, що не перевищують число 10 000:
for (var x = 2; x < 10000; x = x * 2) {
console.log(x);
}
Тут ми присвоюємо x значення 2 і збільшуємо його командою x = x * 2, тобто, подвоюємо значення x при кожному повторі циклу. В результаті x дуже швидко зростає:
8 ФУНКЦІЇ
Функції - це механізм для багаторазового використання частин коду.
Вони дозволяють запускати один і той же код з різних місць програми без необхідності його копіювати. Крім того, якщо ви «заховаєте» складні фрагменти коду всередині функцій, вам буде легше зосередитися на проектуванні програми - так ви будете налагоджувати взаємодію між функціями, а не працювати із дрібними деталями, з яких складається код цих фрагментів. Організація коду у вигляді невеликих, легко контрольованих частин дозволяє бачити загальну картину і думати про будову програми на більш високому рівні.
Функції дуже зручні, коли потрібно багато разів виконувати в програмі певні розрахунки або інші дії. Ми вже користувалися готовими функціями, такими як Math.random, Math.floor, alert, prompt і confirm. А в цьому розділі ми навчимося створювати свої функції.
Створюємо просту функцію
Давайте створимо функцію, яка друкує фразу «Привіт, світ!». Введіть в консолі браузера наступний код.
Цей код створює нову функцію, зберігаючи її в змінній ourFirstFunction.
Виклик функції
Щоб запустити код функції (тобто її тіло), потрібно цю функцію викликати. Для цього вкажіть її ім'я, а слідом – відкриту та закриту дужки:
При виклику ourFirstFunction виконується її тіло, тобто команда console.log ("Привіт, світ!");, і текст, який ми таким чином виводимо, з'являється в консолі на наступному рядку: "Привіт, світ!"
Передача аргументів у функцію
Наша функція ourFirstFunction виводить один і той же рядок при кожному виклику, однак хотілося б, щоб поведінкою функції можна було керувати. Щоб функція могла змінювати поведінку залежно від значень, нам знадобляться аргументи. Список аргументів вказується в дужках після імені функції - як при її створенні, так і при виклику.
Функція sayHelloTo використовує аргумент (name), щоб привітатися з людиною, ім'я якої передано в аргументі:
Тут ми створили функцію і зберегли її в змінній sayHelloTo. При виклику функція друкує рядок "Привіт," + name + "!", Замінюючи name на значення, передане в якості аргументу.
Викликаючи функцію, яка приймає аргумент, введіть значення, яке ви хочете використовувати в якості цього аргументу в дужках після імені функції. Наприклад, щоб привітатися з Ніком, можна ввести:
Передача в функцію декількох аргументів
У функцію можна передати більше одного значення, задавши кілька аргументів. Для цього перерахуйте аргументи в дужках після імені функції, розділивши їх комами.
Функція printMultipleTimes друкує рядок, переданий в аргументі whatToDraw стільки раз, скільки вказано в аргументі howManyTimes.
Наприклад, щоб надрукувати смайли за допомогою функції printMultipleTimes, викликайте її так:
Повернення значення з функції
До сих пір всі наші функції виводили текст в консоль за допомогою console.log. Це простий і зручний спосіб відображення даних, проте ми не зможемо потім взяти це значення з консолі і використовувати його в коді. В такому випадку можна скористатися властивістю функції, яка може повертати значення назовні. В такому випадку в подальшому ми можемо використовувати це значення в своїй програмі (зберігши його в змінній, передавши в іншу функцію або об'єднавши з іншими даними). Наприклад, наступний код додає 5 до значення, яке повертає виклик функції Math.floor (1.2345):
Тепер давайте створимо функцію, яка повертає значення. Ось функція double, яка приймає аргумент number і повертає добуток number * 2. Іншими словами, значення, яке повертає ця функція, вдвічі більше переданого їй аргументу.
Щоб повернути з функції значення, використовуйте оператор return, після якого вкажіть саме це значення.
Тепер можна викликати нашу функцію double:
Виклик функції в якості значення
Коли функція викликається з коду програми, значення, що повертається цією функцією, підставляється туди, де відбувається виклик. Давайте скористаємося функцією double, щоб подвоїти пару чисел і потім скласти результати:
Також виклик функції можна вказати в якості аргументу іншої функції, при виклику якої в аргумент потрапить значення, яке буде повернене першою функцією. У наступному прикладі ми викликаємо функцію double, передаючи їй як аргумент виклик double з аргументом 3.
Спрощуємо код за допомогою функцій
У третьому розділі ми використовували методи Math.random і Math.floor, щоб вибирати випадкові слова з масивів і генерувати фрази. У цьому розділі ми перепишемо цей генератор, спростивши його за допомогою функцій.
Функція для вибору випадкового слова
Ось як ми вибирали випадкове слово з масиву в третьому розділі:
Якщо помістити цей код в функцію, можна багаторазово викликати його для отримання випадкового слова з масиву - замість того щоб вводити той же код знову і знову. Наприклад, давайте визначимо таку функцію pickRandomWord:
Все, що ми зробили, - помістили попередній код в функцію. Тепер можна створити масив randomWords.
За допомогою функції pickRandomWord ми можемо отримати випадкове слово з цього масиву, ось так:
При цьому нашу функцію можна використовувати з будь-яким масивом. Наприклад, отримати випадкове ім'я з масиву імен:
Ранній вихід з функції по return
Як тільки JavaScript, виконуючи код функції, зустрічає оператор return, він завершує функцію, навіть якщо після return ще залишився якийсь код. Оператор return часто використовують, щоб вийти з функції на самому початку, якщо якісь з переданих аргументів мають некоректні значення - тобто якщо з такими аргументами функція не зможе правильно працювати. Наприклад, наступна функція повертає рядок з інформацією про п'яту букву імені. Якщо в імені, переданому в аргументі name, менше п'яти букв, буде виконаний return, щоб відразу ж вийти з функції. При цьому оператор return в кінці функції (той, що повертає повідомлення про п'яту букву) так і не буде виконано.
Давайте викличемо цю функцію:
Спробуємо викликати її ще раз з ім'ям коротше:
Багаторазове використання return замість конструкції if ... else
Можна багато разів використовувати return всередині різних конструкцій if, щоб повертати з функції різні значення в залежності від вхідних даних. Припустимо, ви пишете гру, в якій гравці нагороджуються медалями згідно набраних очок. Рахунку менше трьох очок відповідає бронзова медаль, рахунку від трьох до шести - срібна, а рахунку від семи і вище - золота.
