# Розділ 2. Синтаксис та відображення
У минулому розділі ми з Вами підключили пустий скрипт-файл. Щоб почати там писати Варто знати пару нюансів:
1\. Слова пишуться виключно **англійськими літерами** за виключенням слів у лапках(тобто "Привіт! Як справи");
2\. В коді наявна така річ як **інтерпретатор** - програма, яка читає код по порядку, тому структура коду має базуватись на логіці "Спочатку значення - потім операції з ними":
```javascript
a = 5 Перша дія
b = 7 Друга дія
Третя дія
c = a + b Четверта дія
```
3\. Після кожної дії як правило треба **ставити крапку з комою** ";". Проте **JS** відома своєю гнучкістю і крапку з комою можна ставити не всюди. Подібні лінощі можуть поламати код, так як крапка з комою це свого роду "Ось тут розпочинається нова дія" і допомагає програмі зрозуміти де є окремі компоненти.
```javascript
a = 5; Перша дія
b = 7; Друга дія
c = a + b; Третя дія
```
4\. Не забувайте **писати коментарі** до коду. Після Вас завжди будуть люди, які далі працюватимуть з Вашим кодом і щоб не гадати що означає даний вираз достатньо прочитати Ваше пояснення. Коментарі починаються зі спецсимволів // , та для багато рядкового тексту /\*\*/:
```javascript
a = 5; // Перша дія
b = 7; // Друга дія
c = a + b; // Третя дія
/* Якщо необхідно
вставити багато рядковий текст */
```
Отож, для роботи нам буде потрібна **папка**, в якій будуть два файли **index.html** та **script.js**. Текст **index.html**:
```markup
Document
Hello
```
**script.js** на разі пустий. Для показу інформації з допомогою JS існують два шляхи :
1\. Показати **результат у консолі** браузера. Пишемо у **script.js**:
```javascript
console.log("Привіт");
```
Тепер зберігаємо зміни у файлі (якщо Ви відкрили редагування файлів через [Brackets](http://brackets.io/) - то зберігання змін відбувається після натиску клавіш Ctrl + S) і запускаємо **index.html** - має відкритись браузер по замовчуванню (у мене це Google Chrome - надалі буду опиратись на нього). Відкриваємо консоль браузера (в хромі це - F12) і маємо бачити подібний результат як на малюнку:
**JavaScript** був створений у 1995 році і з того часу було доволі багато оновлень даного коду і в 2009 році було прийнято рішення використовувати тільки нові правила і строго їх дотримуватись. Для того щоб браузери знали що Ваш код написаний саме за новими правилами - на початку кожного скрипт-файлу пишуть **'use strict'** тому повністю наш код повинен виглядати так:
```javascript
'use sctrict';
console.log("Привіт");
```
2\. Іншим же шляхом для відображення результату на екран є - **використання модальних вікон** (по суті невеличкі блоки, які з'являються на екрані після виконання якоїсь умови). У стандартному наборі **JS** існують два вже готових модальних вікна - **alert** та **confirm.** Давайте спробуємо їх використати у нашому скрипт-файлі:
```javascript
'use sctrict';
console.log("Привіт");
alert("Увага!");
prompt("Заголовок", "Введіть текст");
confirm("Ви впевнені у Вашій дії?");
```
Інтерпретатор прочитає код рядок за рядком - тому на екрані все відбуватиметься по порядку.
**console.log("Привіт")** - покаже слово "Привіт" у консолі браузеру;
**alert("Увага!")** - покаже слово "Увага!" у модальному вікні. Як правило використовується для інформування користувача про щось нагальне.
**prompt("Заголовок", "Введіть текст")** - покаже модальне вікно із заголовком "Заголовок" та полем для вводу тексту з вже написаним у ньому "Введіть текст". Використовується щоб користувач ввів якийсь текст і ми цей текст змогли потім використати у коді. (Наприклад - введіть пароль для підтвердження цієї дії).
**confirm("Ви впевнені у Вашій дії")** - покаже модальне вікно із запитанням і кнопками для підтвердження та скасування. В даному модельному вікні важливу роль відіграють якраз ці кнопки, адже нам важливо чи погодився користувач чи ні і ми вже дали будемо працювати із позитивною/негативною відповіддю клієнта (наприклад - Ви хочете покинути дану сторінку? - і якщо користувач натисне так - то закриємо дану сторінку).
Ось так пишеться код та виводиться результат у **JS.** В наступному розділі ми з Вами дізнаємось про типи даних у **JS.**
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://angularlessons.gitbook.io/javascriptiseasy/rozdil-2.-sintaksis-ta-vidobrazhennya.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.