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

13 0 Новини високих технологій

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

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

Сучасне інтернет-програмування все частіше використовують системи управління контентом (Content Management System - CMS). У цьому випадку підключення будь-яких файлів вирішується автоматично.
[thumb]http://hi-news.pp.ua/uploads/posts/2018-10/yak-pdklyuchiti-javascript-html-dokumentu_131.jpeg[/thumb]
В цьому прикладі все кнопки, додані на сторінку сайту, можуть бути оснащені додатковою функціональністю, як через подія onclick, так і шляхом підключення додаткового файлу скриптів. Підключення шаблонів і фреймворків (наприклад, jQuery) робиться автоматично. javascript - це невід'ємна складова браузера. Будь-яка CMS це враховує і використовує максимально ефективно. Як правило, CMS повною мірою використовує технологію AJAX, найбільш прогресивні інструменти JS, але залишає розробнику можливість коригувати і уточнювати функціонал сторінки в браузері, особливо контролювати обробку подій.


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

Варіантів не так багато. Можна вставити JS код тегом script в саму сторінку (3) або як підключити зовнішній файл (1). У кожного варіанту свої плюси. Зазвичай розробники використовують обидва варіанти одночасно.
[thumb]http://hi-news.pp.ua/uploads/posts/2018-10/yak-pdklyuchiti-javascript-html-dokumentu_152.jpeg[/thumb]
javascript - це події, DOM і повне управління всіма елементами сторінки. Варіант 2 - це безпосереднє підключення JS коду до тіла сторінки, який спрацьовує, коли сторінка буде повністю завантажена.

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

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


Інтерпретатор PHP, формуючи сторінку, може створювати код сторінки, javascript-файли, малюнки, компонувати структуру файлів і папок. Через області видимості змінних і даних розробник може перемикати функціонал. Зазвичай, HTML-документ забезпечує кілька варіантів роботи з відвідувачем. Наприклад, в залежності від регіону, статі, віку та ін. можуть підключатися ті чи інші можливості сайту, які зручно і доцільно мати на одній сторінці.
[thumb]http://hi-news.pp.ua/uploads/posts/2018-10/yak-pdklyuchiti-javascript-html-dokumentu_913.jpeg[/thumb]
У цьому прикладі те, як підключити javascript HTML-елементів на сторінці показано на прикладі подій мишки. Такий варіант використання можливостей JS буває необхідний, коли функціональність елемента потрібно змінювати у процесі роботи сторінки.

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

javascript орієнтований на обслуговування подій на елементах сторінки і дерева об'єктів DOM (Document Object Model). З такої точки зору питання "Як підключити javascript HTML-елементів?" вирішується спочатку. Наприклад, всі поля форми для введення даних можуть відразу отримати JS-обробники для валідації (перевірки) даних на коректність. Дата повинна бути датою, число - число, а рядок символів повинна містити тільки коректні символи.
[thumb]http://hi-news.pp.ua/uploads/posts/2018-10/yak-pdklyuchiti-javascript-html-dokumentu_854.jpeg[/thumb]
Контроль введення даних - важливий функціонал, і немає ніякого сенсу вирішувати його в реальному часі і підключати обробник JS в процесі перебування відвідувача на сторінці. Доцільно заздалегідь передбачити форму за структурою, змістом та функціональності перевірки. Завдання, як підключити javascript HTML-елементів форми, можна вирішити відразу. Інша ситуація буде на елементах при вирішенні завдання передачі даних за допомогою механізмів Drag and Drop. В більшості випадків доведеться динамічно змінювати обробники. Захоплення елемента для переміщення - це одна подія, власне переміщення через кордони інших елементів - інша подія. Питання як підключити javascript HTML-елементів сторінки, які зустрічаються по дорозі», може бути не тільки динамічним, але і непередбачуваним.

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

Особливість javascript - спочатку розподілені алгоритми та події, які можуть спрацювати в самому непередбаченому варіанті. Програма (скрипт) на JS це далеко не програма на C/C++, PHP або Perl. Звичайні мови програмування допускають події, динаміку типів даних, паралельні обчислення, але оригінальність JS і його тісний зв'язок з DOM вносить специфіку в програмування на цій мові і, що дуже важливо, правильне розміщення коду. Всі скрипти JS зливаються в єдиний простір, але правильне розміщення змінних, функцій, обробників подій і послідовності виконання операцій має істотне значення.
[thumb]http://hi-news.pp.ua/uploads/posts/2018-10/yak-pdklyuchiti-javascript-html-dokumentu_325.jpeg[/thumb]
Використання серверного мови PHP всередині javascript коду зручніше робити, коли це код безпосередньо вставляється в HTML-документ. Не прийнято розміщувати PHP-код всередині зовнішнього файлу *.js, хоча уяву сучасного розробника мало чим обмежена, якщо він працює без тієї чи іншої системи управління сайтом. Важливо мати на увазі: javascript - це спочатку розподілені алгоритми і події. Серверні мови - це послідовності операцій, алгоритми дій, які виконуються до того моменту, як сторінка потрапляє в браузер. Відповідь на питання "Як підключити javascript HTML-документом?" буде залежати не тільки від логіки алгоритму, але і часу вирішення.