Як підключити JavaScript HTML-документу

Можливості HTML/CSS дозволяють створювати красиві і динамічні сторінки. Мова програмування jаvascript допомагає розробнику призначати елементів сторінки функціональність, обробляти події, організовувати діалог з відвідувачем і забезпечувати обмін даними з сервером.

HTML-сторінки і CMS

Сучасне інтернет-програмування все частіше використовують системи управління контентом (Content Management System - CMS). У цьому випадку підключення будь-яких файлів вирішується автоматично. В цьому прикладі все кнопки, додані на сторінку сайту, можуть бути оснащені додатковою функціональністю, як через подія onclick, так і шляхом підключення додаткового файлу скриптів. Підключення шаблонів і фреймворків (наприклад, jQuery) робиться автоматично. jаvascript - це невід'ємна складова браузера. Будь-яка CMS це враховує і використовує максимально ефективно. Як правило, CMS повною мірою використовує технологію AJAX, найбільш прогресивні інструменти JS, але залишає розробнику можливість коригувати і уточнювати функціонал сторінки в браузері, особливо контролювати обробку подій.

Традиційне підключення jаvascript HTML

Варіантів не так багато. Можна вставити JS код тегом script в саму сторінку (3) або як підключити зовнішній файл (1). У кожного варіанту свої плюси. Зазвичай розробники використовують обидва варіанти одночасно. jаvascript - це події, DOM і повне управління всіма елементами сторінки. Варіант 2 - це безпосереднє підключення JS коду до тіла сторінки, який спрацьовує, коли сторінка буде повністю завантажена.

Зовнішні файли і серверне управління

Формування HTML-документа при розробці на базі CMS і при ручному створенні веб-ресурсу програмується. Обробка подій, створення елементів сторінки і зовнішніх файлів може проводитися так, як це зручно в кожному конкретному випадку, в реальному масштабі часу.


Інтерпретатор PHP, формуючи сторінку, може створювати код сторінки, jаvascript-файли, малюнки, компонувати структуру файлів і папок. Через області видимості змінних і даних розробник може перемикати функціонал. Зазвичай, HTML-документ забезпечує кілька варіантів роботи з відвідувачем. Наприклад, в залежності від регіону, статі, віку та ін. можуть підключатися ті чи інші можливості сайту, які зручно і доцільно мати на одній сторінці. У цьому прикладі те, як підключити jаvascript HTML-елементів на сторінці показано на прикладі подій мишки. Такий варіант використання можливостей JS буває необхідний, коли функціональність елемента потрібно змінювати у процесі роботи сторінки.

Функціональність елементів сторінки

jаvascript орієнтований на обслуговування подій на елементах сторінки і дерева об'єктів DOM (Document Object Model). З такої точки зору питання "Як підключити jаvascript HTML-елементів?" вирішується спочатку. Наприклад, всі поля форми для введення даних можуть відразу отримати JS-обробники для валідації (перевірки) даних на коректність. Дата повинна бути датою, число - число, а рядок символів повинна містити тільки коректні символи.
Контроль введення даних - важливий функціонал, і немає ніякого сенсу вирішувати його в реальному часі і підключати обробник JS в процесі перебування відвідувача на сторінці. Доцільно заздалегідь передбачити форму за структурою, змістом та функціональності перевірки. Завдання, як підключити jаvascript HTML-елементів форми, можна вирішити відразу. Інша ситуація буде на елементах при вирішенні завдання передачі даних за допомогою механізмів Drag and Drop. В більшості випадків доведеться динамічно змінювати обробники. Захоплення елемента для переміщення - це одна подія, власне переміщення через кордони інших елементів - інша подія. Питання як підключити jаvascript HTML-елементів сторінки, які зустрічаються по дорозі», може бути не тільки динамічним, але і непередбачуваним.

Динаміка та обробка подій

Особливість jаvascript - спочатку розподілені алгоритми та події, які можуть спрацювати в самому непередбаченому варіанті. Програма (скрипт) на JS це далеко не програма на C/C++, PHP або Perl. Звичайні мови програмування допускають події, динаміку типів даних, паралельні обчислення, але оригінальність JS і його тісний зв'язок з DOM вносить специфіку в програмування на цій мові і, що дуже важливо, правильне розміщення коду. Всі скрипти JS зливаються в єдиний простір, але правильне розміщення змінних, функцій, обробників подій і послідовності виконання операцій має істотне значення. Використання серверного мови PHP всередині jаvascript коду зручніше робити, коли це код безпосередньо вставляється в HTML-документ. Не прийнято розміщувати PHP-код всередині зовнішнього файлу *.js, хоча уяву сучасного розробника мало чим обмежена, якщо він працює без тієї чи іншої системи управління сайтом. Важливо мати на увазі: jаvascript - це спочатку розподілені алгоритми і події. Серверні мови - це послідовності операцій, алгоритми дій, які виконуються до того моменту, як сторінка потрапляє в браузер. Відповідь на питання "Як підключити jаvascript HTML-документом?" буде залежати не тільки від логіки алгоритму, але і часу вирішення.