Розділ 2. Синтаксис та відображення

У минулому розділі ми з Вами підключили пустий скрипт-файл. Щоб почати там писати Варто знати пару нюансів:

1. Слова пишуться виключно англійськими літерами за виключенням слів у лапках(тобто "Привіт! Як справи");

2. В коді наявна така річ як інтерпретатор - програма, яка читає код по порядку, тому структура коду має базуватись на логіці "Спочатку значення - потім операції з ними":

a = 5     Перша дія
b = 7     Друга дія
          Третя дія   
c = a + b Четверта дія

3. Після кожної дії як правило треба ставити крапку з комою ";". Проте JS відома своєю гнучкістю і крапку з комою можна ставити не всюди. Подібні лінощі можуть поламати код, так як крапка з комою це свого роду "Ось тут розпочинається нова дія" і допомагає програмі зрозуміти де є окремі компоненти.

a = 5;     Перша дія
b = 7;     Друга дія
  
c = a + b; Третя дія

4. Не забувайте писати коментарі до коду. Після Вас завжди будуть люди, які далі працюватимуть з Вашим кодом і щоб не гадати що означає даний вираз достатньо прочитати Ваше пояснення. Коментарі починаються зі спецсимволів // , та для багато рядкового тексту /**/:

a = 5;     // Перша дія
b = 7;     // Друга дія
  
c = a + b; // Третя дія

/* Якщо необхідно
вставити багато рядковий текст */

Отож, для роботи нам буде потрібна папка, в якій будуть два файли index.html та script.js. Текст index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1 id='test'>Hello</h1>
    <script src="script.js"></script>
</body>
</html>

script.js на разі пустий. Для показу інформації з допомогою JS існують два шляхи :

1. Показати результат у консолі браузера. Пишемо у script.js:

console.log("Привіт");

JavaScript був створений у 1995 році і з того часу було доволі багато оновлень даного коду і в 2009 році було прийнято рішення використовувати тільки нові правила і строго їх дотримуватись. Для того щоб браузери знали що Ваш код написаний саме за новими правилами - на початку кожного скрипт-файлу пишуть 'use strict' тому повністю наш код повинен виглядати так:

'use sctrict';

console.log("Привіт");

2. Іншим же шляхом для відображення результату на екран є - використання модальних вікон (по суті невеличкі блоки, які з'являються на екрані після виконання якоїсь умови). У стандартному наборі JS існують два вже готових модальних вікна - alert та confirm. Давайте спробуємо їх використати у нашому скрипт-файлі:

'use sctrict';

console.log("Привіт");              
alert("Увага!");                    
prompt("Заголовок", "Введіть текст"); 
confirm("Ви впевнені у Вашій дії?");

Інтерпретатор прочитає код рядок за рядком - тому на екрані все відбуватиметься по порядку.

console.log("Привіт") - покаже слово "Привіт" у консолі браузеру;

alert("Увага!") - покаже слово "Увага!" у модальному вікні. Як правило використовується для інформування користувача про щось нагальне.

prompt("Заголовок", "Введіть текст") - покаже модальне вікно із заголовком "Заголовок" та полем для вводу тексту з вже написаним у ньому "Введіть текст". Використовується щоб користувач ввів якийсь текст і ми цей текст змогли потім використати у коді. (Наприклад - введіть пароль для підтвердження цієї дії).

confirm("Ви впевнені у Вашій дії") - покаже модальне вікно із запитанням і кнопками для підтвердження та скасування. В даному модельному вікні важливу роль відіграють якраз ці кнопки, адже нам важливо чи погодився користувач чи ні і ми вже дали будемо працювати із позитивною/негативною відповіддю клієнта (наприклад - Ви хочете покинути дану сторінку? - і якщо користувач натисне так - то закриємо дану сторінку).

Ось так пишеться код та виводиться результат у JS. В наступному розділі ми з Вами дізнаємось про типи даних у JS.

PreviousРозділ 1. Підключення NextРозділ 3.Типи даних

Last updated 1 year ago

Was this helpful?

'use sctrict'; console.log("Привіт"); alert("Увага!"); prompt("Заголовок", "Введіть текст"); confirm("Ви впевнені у Вашій дії?");