Використання JavaScript та onload-подій для створення самостійних сайтів

Використання JavaScript та onload-подій для створення самостійних сайтів

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

Використання JavaScript і onload-події кардинально змінює функціонування сайту. Якщо на момент закінчення початкового завантаження призначити обробник, то можна визначити, з чого саме, як саме і що слід починати робити.


Головна подія сторінки

Закінчення завантаження сторінки фіксується подією onload, яка призначається тегу body. Наступу цієї події передує завантаження всіх стильових файлів, скриптів, зображень та інших ресурсів. Дерево елементів сторінки (DOM) побудовано, але його не буде показано у вікні переглядача.

У HTML-синтаксисі і мовою JavaScript onload і body - одне ціле. Подія закінчення завантаження виникає, як тільки тіло документа з усіма супутніми файлами (ресурсами) завантажено і готове до використання.

У прикладі показано, як з 'єднати обробник події onload на JavaScript. Зліва код HTML-сторінки. Тегу body призначено обробник GoPage (). Праворуч код обробника - звичайна функція мови браузера з "незвичайним" функціоналом.

Простий приклад використання onload

Приклад простий і показовий. Тут немає конкретної логіки, а механізм обробки події onload на JavaScript показаний на затребуваному завданні - орієнтація елементів сторінки у вікні браузера конкретного розміру.

Завдання просте - сайт потрібно завантажити так, щоб його елементи розташовувалися в правильних позиціях залежно від розмірів вікна браузера.

Відразу після тега body йде опис необхідних змінних, що містять поточні: висоту і ширину вікна, координати шапки, змісту і футера сторінки. Змінні тільки описані, реальні значення вони отримують при обробці події onload в JavaScript функції GoPage ().


Сенс прикладу в тому, щоб при завантаженні сторінки отримати потрібні початкові дані і забезпечити виконання функції scfChange (). Ця функція призначається обробником на подію onresize і запускається кожен раз, коли змінюється розмір вікна браузера.

Результат прикладу: подія onload на JavaScript викликає встановлення початкових значень, що забезпечує правильне функціонування scfChange () і запускає звернення до сервера "InitXML ("... для прийняття наступних дій:

Проблема з логікою використання події onload

Відвідувач приходить на сайт, сторінка завантажується, спрацьовує подію onload, і виконуються всі підготовчі дії. Логіка роботи після відпрацювання onload залежить від логіки сайту і його функціонального призначення.

Наприклад, сайт магазину при "прибутті" на нього відвідувача може відновити те місце, в якому цей відвідувач залишив сайт в минулому сеансі. А після "прибуття" нового відвідувача запропонувати йому початкову сторінку з товарами повсякденного або актуального попиту.

Сайт пошукової системи може відновити останню вибірку для свого клієнта і запропонувати опис свого функціоналу для нового відвідувача.

Немає жодної гарантії, що завсідник сайту або новий відвідувач не вибере оновлення сторінки. А це теж подія onload, і JavaScript функції доведеться "вміти" розрізняти початкове завантаження сторінки від її оновлення. Це не велика проблема в програмуванні, але може складати труднощі для формування правильної логіки роботи сайту в цілому.

Ресурси динамічного сайту

Питання часу (моменту щодо приходу відвідувача) завантаження стилів, картинок, скриптів - компетенція і професіоналізм розробника. Якщо за логікою області застосування або спектра вирішуваних завдань потрібно відразу завантажити весь функціонал, ніяких зусиль не потрібно. При відпрацюванні події onload залишиться тільки запустити логіку з якоїсь початкової точки.


Деякі ресурси (наприклад, картинки товарів у магазині) відразу не визначені за асортиментом (вмістом) і можуть динамічно змінюватися. Прихід відвідувача повинен супроводжуватися відстеженням моменту часу: обробник входу відвідувача JavaScript (onload) і image (load) - процеси, рознесені в часі.

Абсолютно не обов 'язково включати в функціонал обробника входу все, що "може стати в нагоді". Зображення (image), звуки (sound) та інші об 'ємні ресурси завжди можна завантажити в момент використання або передбачити логіку попереднього завантаження під час діалогу з відвідувачем.

Живий і динамічний сайт

Важко уявити створення сучасного динамічного сайту без застосування JavaScript і onload. Function GoPage () - це не просто визначення стану браузера і перерахунок координат елементів сторінки (у прикладі вище).

Function GoPage - це виклик сервера "InitXML ("... для прийняття важливих рішень і "продовження відносин".

Наведений приклад як шаблон рішення щодо створення живого сайту використовувався протягом багатьох років для створення динамічних ресурсів мережі, які ведуть відвідувача від моменту його приходу до завершення сесії.


Повернення відвідувача на сайт - це продовження роботи, а не варіант початку нового сеансу. Новий сеанс - це тільки для нового відвідувача.

Якщо розглядати onload як прихід відвідувача, то ситуація переходить з події сторінки в подію "взаємодії" між відвідувачем сайту (постійним клієнтом), в їх відносини протягом часу.