# Розділ 1. Підключення

&#x20;    Отже, відразу до справи!  Для роботи нам буде необхідно створити "**папку" ("тека" -**  укр.) і в ній відповідно створюємо файли **index.html** та **script.js**. В якості редагування файлів рекомендую на початках використовувати IDE (Integrated development environment - інтегроване середовище розробки, простими словами програма для редагування текстів у файлах для написання програмного коду. Найкращим варіантом буде "[Brackets](http://brackets.io)" - так як він легкий і доволі зручний для навчання).

&#x20;    **index.html** повинен мати наступний текст:

```markup
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Hello</h1>
</body>
</html>
```

&#x20;    Створивши даний веб-документ ми знаємо, що завдяки тегам та атрибутам з додаванням CSS ми можемо створити доволі гарну візуальну частину сайту, проте для того щоб сайт почав виконувати якусь логіку, рахувати, обробляти запити тощо - необхідно під'єднати JavaScript(**JS**).&#x20;

&#x20;    Існує 2 способи підключення **JS** до веб-документу:

1. **Написати код в тегах \<script>\</script>** і розмістити його відповідно або в \<head>\</head>, або в \<body>\</body> нашого документу. Візуально це буде виглядати так:

```markup
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
     <script>
        //Додати
        //Відняти
        //Показати
        //Тощо...
    </script>
</head>
<body>
    <h1>Hello</h1>
</body>
</html>
```

&#x20;    Як Ви розумієте - писати таким чином багато коду не вийде бо буде все на купу і важко зрозуміти де закінчується одна дія і починається наступна. Тому на допомогу приходить наступний спосіб, а саме :

&#x20;    2\. **Підключення файлу з кодом до документа**. Ми з Вами вже створили два файли **index.html** та **script.js**. Для того щоб підключити скрипт-файл використовуються вже знайомі нам теги \<script>\</script>. в них є атрибут src (від англ. "source") - в який ми напишемо адресу до нашого файлу:

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

&#x20;     Тепер стосовно того де краще розміщувати підключення скрипт-файлу. Так як Ви у коді будете використовувати елементи веб-документу (скажімо при натисканні якоїсь кнопки на сайті має відбутись якась дія) важливо запам'ятати одну річ - код читають по порядку і тому скрипт потрібно використовувати після створеного елементу, який Ви в ньому будете використовувати :

```markup
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="script.js"></script> <!-- Скрипт не знає про існування <h1>Hello</h1> -->
</head>
<body>
<!-- Скрипт не знає про існування <h1>Hello</h1>  -->
    <h1>Hello</h1>
<!-- Скрипт знає про існування <h1>Hello</h1>  -->
</body>
</html>
```

&#x20;    Тому самим правильним його буде підключати знизу тегів \<body>\</body> , щоб нічого не пропало з поля зору нашого скрипт-файлу:

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

&#x20;    Ось так підключаються скрипт-файли. В наступному розділі ми з Вами дізнаємось про способи виведення даних на екран у **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/master.md?ask=<question>
```

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.
