Привет, будущие JS-ниндзя! 🚀 Давайте разберём построчно, как работает этот простой, но важный пример. ✅ Что происходит? ⚠️ Ошибка! (но об этом позже) ✅ Что должно происходить? ❌ Проблема: ✅ Что делает defer? 📌 Где размещать? ⚠️ Важно:
Если скрипт подключён без defer/async, то window.onload может сработать раньше, чем сам скрипт загрузится! Если не ждать картинки, а только готовность DOM: Теперь вы знаете, как заставить JS сказать «Привет, мир!» 🌍✨ Попробуйте сами и пишите вопросы в комментариях! 👇😊
Привет, будущие JS-ниндзя! 🚀 Давайте разберём построчно, как работает этот простой, но важный пример.
📂 1. Что в файле script.js?
🔹 Объявляем функцию sayHello
✅ Что происходит?
- Создаётся функция sayHello(), которая при вызове печатает в консоль "Привет мир".
- console.log() — это встроенный метод для вывода информации в консоль браузера (DevTools).
🔹 Вызов функции при загрузке страницы
⚠️ Ошибка! (но об этом позже)
✅ Что должно происходить?
- window.onload — это событие, которое срабатывает, когда страница полностью загрузилась (HTML, CSS, JS, картинки).
- Мы присваиваем ему функцию sayHello, чтобы она выполнилась после загрузки.
❌ Проблема:
- Сейчас код вызывает sayHello() сразу, а не назначает её как обработчик.
- Как исправить? Надо передать ссылку на функцию, а не её результат:
- (Или использовать addEventListener, но об этом дальше.)
🌐 2. Как подключается скрипт в HTML?
✅ Что делает defer?
- Скрипт загружается асинхронно, но выполняется после полного построения DOM (но до onload).
- Без defer браузер мог бы "зависнуть" во время загрузки скрипта.
📌 Где размещать?
- Обычно — в <head>, но благодаря defer он сработает корректно.
- Альтернатива — перед закрывающим </body>.
🔄 3. Как работает window.onload?
- Шаг 1: Браузер загружает HTML, CSS, JS.
- Шаг 2: Срабатывает defer-скрипт (если он есть).
- Шаг 3: Полностью загружаются все ресурсы (включая изображения).
- Шаг 4: Срабатывает window.onload.
⚠️ Важно:
Если скрипт подключён без defer/async, то window.onload может сработать раньше, чем сам скрипт загрузится!
✨ Улучшенная версия кода
1. Исправляем вызов функции
2. Альтернатива: DOMContentLoaded
Если не ждать картинки, а только готовность DOM:
🚀 Итог: как это работает?
- Браузер видит <script src="script.js" defer></script> и начинает загружать скрипт параллельно с HTML.
- После построения DOM (но до загрузки картинок) выполняется script.js.
- Функция sayHello регистрируется как обработчик window.onload.
- Когда страница полностью загрузилась, sayHello() выводит в консоль:
💡 Советы для новичков
- Всегда проверяйте консоль (F12 → Console) — там будут ошибки, если что-то пошло не так.
- Используйте addEventListener вместо onload — это современнее и надёжнее.
- defer — ваш друг, если скрипт не нужен сразу при загрузке страницы.
Теперь вы знаете, как заставить JS сказать «Привет, мир!» 🌍✨
Попробуйте сами и пишите вопросы в комментариях! 👇😊