Підключення до HTML JS: від синтаксису до семантики

Стандарт гіпертексту дозволяє створювати повноцінні HTML-сторінки, описувати їх правилами CSS і наповнювати функціональністю за допомогою jаvascript. Сервер формує сторінку і відсилає її в браузер відвідувача. Процедура суворо формалізована, але контролюючи процеси створення і передачі даних. Можна розширити межі можливого, які надають стандарт і синтаксис підключення до HTML JS через тег «script» всередині сторінки або із зовнішнього файлу.

HTML і jаvascript - природне поєднання

На тому етапі, коли програмування з локального стало «розподіленим» і пішло в сферу обслуговування інтернет-простору, важко було уявити природне поєднання неможливого: мови гіпертексту і мови програмування. Безсумнівно, щось спільне є: і там, і там суворі формалізовані синтаксичні конструкції з обмеженнями за поданням обробці смислового моменту. Більш кардинальні відмінності затьмарюють це загальна:


перше тільки описує; друге тільки обробляє. На зорі інтернет-технологій HTML-сторінка була статичною, але вже затребуваним продуктом інтелектуальної діяльності розробника. В ті часи jаvascript ще тільки збирався заявити про собі. Сьогодні створені і повсюдно використовуються: функціонально повний стандарт HTML; широкий асортимент правил і можливостей CSS; досконалий jаvascript, прагне до безперервного розвитку; накопичений досвід розподіленої обробки і представлення інформації. Підключення JS і CSS HTML виконується однаковим чином. Відмінність є тільки в доцільності формування необхідного коду в реальному масштабі часу. Тобто якщо потреба створення стилю або правила CSS в процесі роботи сайту ще можна якось зрозуміти, то необхідність створення JS-коду для сайту, на якому вже «сидить відвідувач», можна віднести до атаки, шкідливої інфекції або іншій спробі порушити мирне існування сайту або завдати шкоди відвідувачу.


Природне поєднання елементів дерева DOM, яке формує браузер, отримавши HTML-потік від сервера, трансформується через правила CSS у область перегляду браузера і до елементів дерева підключаються функціональності, описані в JS-коді.

Синтаксис підключення JS-функціоналу до HTML

По суті, jаvascript працює завжди. Питання в тому, наскільки їм користується розробник сайту. Завжди було два варіанти: підключення файлу JS до HTML із зовнішнього файлу і за допомогою вставки тега «script». Зовнішні файли JS, як і CSS, підключаються в розділі head (1). Внутрішні теги script поміщаються в розділі body (2). Вставок script може бути скільки завгодно, але зайва старанність тут недоцільно. Зручно розташовувати скрипти jаvascript на початку сторінки і в її наприкінці, а ще краще — виносити їх у зовнішні файли в тій кількості, яка визначається предметною областю. Іменуючи зовнішні файли осмисленим чином, підключення до HTML JS можна зробити зрозумілим і зручним для цілей тестування і вдосконалення.

Тонкощі підключення скриптів jаvascript

Власне, тіло функції або змінної JS - це статика, яка приходить з потоку HTML від сервера в браузер. Виклики функцій і використання змінних JS - це динаміка, яка виникає з моменту приходу відвідувача, завантаження сторінки в браузері і її активації.
У прикладі показано, як події onload призначений обробник GoPage (3). Це звичайна функція jаvascript, яка буде запущена, як тільки сторінка повністю завантажиться. Вона може змінити зміст сторінки в залежності від того, хто прийшов, коли прийшов, з якою доменної зони і т. д. Писати код під конкретну ситуацію на JS - значить завантажувати браузер і скрипт безліччю умовностей і зайвим кодом. Питання локалізації та формування потрібної функціональності зручніше виконувати на сервері. Формуючи коректний код на серверному мовою, в браузер конкретного відвідувача можна відправляти конкретну функціональність. В результаті підключення до HTML JS буде різним для різних браузерів, пристроїв, відвідувачів, їх статі, віку, професійних інтересів і т. д.

Фреймворки, шаблони, CMS та інші інструментальні системи

Хороший інструмент завжди сприяє гарному результату. Немає сумнівів у тому, що найпопулярніша CMS або використовується повсюдно, часто без реальної потреби jQuery, свідчать про високу кваліфікацію розробника або просто дозволяють швидко зробити роботу. Підключення до HTML JS в такому випадку може створити проблему. Одна справа стандартний для CMS набір скриптів на jаvascript і правил CSS, інша справа — власний файл, який потрібно знати, де і як підставити, щоб він правильно зголосився і не створив проблем.
Враховуючи цей момент, розробники інструментів намагаються надати споживачеві можливість створювати об'єкти сайтів без доступу до файлів, в яких зберігаються скрипти, стилі чи інші ресурси. Можна просто виконати підключення до HTML JS у вигляді функції-обробника події кнопки. Куди потрапить тіло скрипта, відає тільки фреймворк або CMS. Колектив, що створює сайт, зазвичай не замислюється над цим, керуючись сучасним правилом «поки все працює». По суті, якщо в основі сайту лежить просунутий інструмент, то неважливо, як виконано підключення до HTML JS. Bootstrap, наприклад, створювався як вільний набір інструментів для створення сайтів, орієнтуючись на CSS і HTML, але тепер це потужний JS-функціонал. Рідкісний розробник ризикне доповнювати bootstrap своїми ідеями, переважна більшість буде використовувати тільки його функції.

jаvascript і «ідея» сайту

Душевність і людяність важко віднести до програмування. Далеко не кожну просту семантику можна укласти в сучасний синтаксис. Немає сумніву, що CMS, шаблони і безліч сучасних ідей гарні, але вони позбавляють розробника можливості реалізувати свої власні ідеї. jаvascript - функціональність сайту. Це дії сайту «сприйняття» відвідувача і ведення з ним адекватного діалогу. Віддавати на відкуп розробників CMS, фреймворків або шаблонів контакт сайту і людини - не найкраще рішення. Коли розробник сайту реалізує власний функціонал (JS) і власний стиль (CSS) у власному HTML, це набуває власний сенс, без зовнішнього думки, нехай навіть самого авторитетного і кваліфікованого.