JavaScript це легко
  • Розділ 1. Підключення
  • Розділ 2. Синтаксис та відображення
  • Розділ 3.Типи даних
  • Розділ 4. Функція
  • Розділ 5. Масиви
  • Розділ 6. Умовні оператори
  • Розділ 7. Цикли
  • Розділ 8.Область видимості
  • Розділ 9.Об'єкт
Powered by GitBook
On this page

Was this helpful?

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

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

Last updated 5 years ago

Was this helpful?

Отже, відразу до справи! Для роботи нам буде необхідно створити "папку" ("тека" - укр.) і в ній відповідно створюємо файли index.html та script.js. В якості редагування файлів рекомендую на початках використовувати IDE (Integrated development environment - інтегроване середовище розробки, простими словами програма для редагування текстів у файлах для написання програмного коду. Найкращим варіантом буде "" - так як він легкий і доволі зручний для навчання).

index.html повинен мати наступний текст:

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

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

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

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

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

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

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

<!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>

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

<!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>

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

<!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>

Ось так підключаються скрипт-файли. В наступному розділі ми з Вами дізнаємось про способи виведення даних на екран у JS.

Brackets