У цій статті ми поговоримо про основні аспекти мови програмування JavaScript і DOM (об’єктна модель документів).

Використання фреймворків, таких як jQuery або Prototype – це відмінний спосіб швидкої розробки додатків на JavaScript, але також важливо знати і розуміти базові аспекти цієї мови. Навіть якщо ви використовуєте тільки якусь конкретну бібліотеку, сьогоднішня інформація все одно принесе вам користь – розуміння того, як щось працює під «капотом», — це дуже важливо.

 

 

JavaScript – вступ

JavaScript – це динамічна, вільно типізована мова програмування на основі прототипів, яка використовується в багатьох середовищах WEB-розробки. Крім того, що він є дуже поширеною мовою веб-програмування на стороні клієнта, він також використовується для написання плагінів для IDE і є основою для інших платформ.

JavaScript заснований на стандарті ECMAScript (ECMA-262) і був створений Бренданом Айхом з компанії Netscape. Спочатку він називався LiveScript, але пізніше був перейменований в JavaScript.

 

Деякі особливості JavaScript:

  • Динамічні мови програмування виконуються під час виконання; вони не компілюються. Через це JavaScript іноді вважається мовою сценаріїв, а не справжньою мовою програмування. Коли у вас є JavaScript в HTML-документі, він буде аналізуватися при завантаженні сторінки в браузері, отже, під час виконання.
  • Вільно типізовані мови не вимагають будь-якої суворої системи типології. Якщо ви програмували на C або Java, ви знаєте, що при оголошенні змінної ви повинні вказати її тип, наприклад, ‘int‘ (ціле число). JavaScript відрізняється тим, що вам не потрібно вказувати тип змінної.
  • Для виконання успадкування в JavaScript ви повинні використовувати щось, що називається прототипами. В JavaScript немає підтримки класів. Він розглядає функції як першокласні об’єкти.

 

 

 

Об’єктна модель документа (DOM)

Об’єктна модель документа (DOM) – це API, через який JavaScript взаємодіє з контентом на сайті. JavaScript і DOM зазвичай розглядаються як єдине ціле, оскільки для взаємодії з контентом в Інтернеті найчастіше використовується саме JavaScript. DOM API використовується для доступу, перегляду та маніпулювання HTML і XML документами.

 

Короткі зауваження щодо DOM:

  • Об’єкт window є глобальним об’єктом, доступ до нього можна отримати, просто набравши «window». Саме всередині цього об’єкту виконується весь код JavaScript. Як і у всіх об’єктів, у нього є властивості і методи:
    • Властивість – це змінна, що зберігається в об’єкті. Всі змінні, створені на веб-сторінці, автоматично стають властивостями об’єкта window.
    • Метод – це функція, що зберігається в об’єкті. Оскільки всі функції зберігаються в об’єкті window, всі вони можуть називатися «методами».
  • DOM створює ієрархію, що відповідає структурі кожного веб-документа. Ця ієрархія складається з вузлів. Існує кілька різних типів DOM-вузлів, найбільш важливими з яких є «Елемент», «Текст» і «Документ»:
    • Вузол «Елемент» представляє елемент на сторінці. Таким чином, якщо у вас є елемент абзацу (‘<p>‘), то до нього можна отримати доступ через DOM як до вузла.
    • Вузол «Текст» являє собою весь текст (всередині елементів) на сторінці. Тому, якщо у вашому абзаці є трохи тексту, до нього можна напряму звернутися через DOM.
    • Вузол «Документ» представляє собою весь документ (кореневий вузол ієрархії/дерева DOM).
    • Також зверніть увагу, що атрибути елемента теж є вузлами DOM.
  • Врахуйте, що в різних браузерах по-різному відбувається механізм компонування DOM. Це є причиною багатьох головних болей веб-розробників.

 

 

 

Використання JavaScript на сайті

Якщо ви хочете використовувати JavaScript на веб-сайті, він повинен бути включений в елемент script:

<!DOCTYPE html>
<html lang="uk-UA">
 <head>
  <meta charset="UTF-8">
  <title>JavaScript</title>
 </head>
 <body>
  <script type="text/javascript">
    // <![CDATA[
     ...
    // ]]>
  </script>
 </body>
</html>

 

 

Вище ми включили елемент script в наш документ (сторінку). Атрибут type має значення «text/javascript» (ви також можете не використовувати цей атрибут).

Якщо ви використовуєте XHTML, то краще додайте рядки (// <![CDATA[ …  // ]]>), щоб позначити, що цей вміст є символьними даними і не повинен тлумачитися як розмітка XHTML. Це дійсно необхідно, якщо ви плануєте використовувати символи «<» або «>» в ​​своєму коді JavaScript. Не забудьте закоментувати ці рядки (//) для браузерів, які не підтримують XHTML.

Якщо ви використовуєте простий HTML, очевидно, що вам не потрібно використовувати рядки CDATA.

 

 

Посилання на зовнішні скрипти

Якщо ви хочете створити посилання на зовнішній файл сценарію, просто додайте атрибут src до елементу script з вказуванням посилання на потрібний файл. Зазвичай краще використовувати скрипти, що підключаються, ніж писати вбудований код, оскільки в цьому випадку браузер може закешувати ці файли. Крім того, в цьому випадку не потрібно турбуватися про CDATA:

<script type="text/javascript" src="scripts.js"></script>

 

 

Атрибут відкладеної дії (defer)

Будь-який JavaScript, який ми поміщаємо в елемент script, буде запускатися при завантаженні сторінки. Єдиний виняток – коли елемент script має атрибут ‘defer‘ або ‘async‘. За замовчуванням, коли браузер зустрічає елемент script, він зупиняється і запускає його код, а потім продовжує аналіз документа. Атрибут defer повідомляє браузеру, що код не містить коду, що змінює документ, і тому може бути запущений пізніше.

 

 

На сьогодні все. У наступних уроках ми продовжимо вивчення основ JavaScript.

 

Recent Posts

Френк МакКінні Кін Хаббард

Є два способи командувати жінкою, але ніхто їх не знає Френк МакКінні Кін Хаббард  

2 дні ago

Роберт Шеклі

Найгірше, що в інформаційній війні завжди програє той, хто говорить правду, адже він обмежений правдою,…

3 дні ago

Річард Бах

Якщо тобі колись захочеться знайти таку людину, яка зможе здолати будь-яку, навіть найважчу біду і…

4 дні ago

Що таке CDN і чому він потрібен вашому сайту | огляд в 2025

Уявіть, що ви відкрили піцерію у Києві. Ваша піца настільки смачна, що її хочуть замовити…

1 тиждень ago

Що таке Varnish Cache і як він прискорить ваш сайт (початківцям)

Уявіть, що ваш веб-сайт — це велика бібліотека, а ваш сервер — це головний бібліотекар.…

1 тиждень ago

Що таке WAF (Web Application Firewall) і чому без нього сайт у небезпеці

Уявіть, що ваш офіс захищений надійною охоронною системою: у вас є міцні двері, сигналізація та…

1 тиждень ago