Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Урок 1.2: Подключение скриптов к HTML
Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Цели урока:
- Понять, как подключать JavaScript к HTML-документам.
- Изучить различные способы подключения: внутренний и внешний JavaScript.
- Освоить атрибуты `<script>` тега для управления загрузкой и выполнением скриптов.
Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Введение
Подключение JavaScript к HTML является основополагающим навыком для веб-разработчиков. JavaScript может быть встроен непосредственно в HTML-документ или подключен как внешний файл. Выбор метода зависит от задачи, размера проекта и необходимости повторного использования кода.
Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Внутренний JavaScript
1. Определение и использование
- Внутренний (или встроенный) JavaScript размещается непосредственно в HTML-документе внутри тега `<script>`.
- Пример:
<script>
alert("Привет, мир!");
</script>
2. Преимущества и недостатки
- Преимущества: простота использования; удобно для небольших скриптов или быстрого тестирования.
- Недостатки: увеличивает размер HTML-документа; затрудняет поддержку и повторное использование кода.
Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Внешний JavaScript
1. Определение и использование
- Внешний JavaScript подключается к HTML-документу через указание пути к .js файлу в атрибуте `src` тега `<script>`.
- Пример:
<script src="script.js"></script>
2. Преимущества и недостатки
- Преимущества: облегчает поддержку и обновление кода; код может быть кэширован браузером; улучшает структуру проекта.
- Недостатки: требует правильного пути к файлу; возможные задержки при загрузке внешних файлов.
Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Атрибуты тега `<script>`
1. `async` и `defer`
- `async`: позволяет загружать скрипт асинхронно с остальной частью страницы. Используется для скриптов, не зависящих от других скриптов или DOM.
- `defer`: откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена. Идеален для скриптов, зависящих от элементов на странице.
- Пример:
<script src="script.js" defer></script>
2. `type`
- Указывает тип содержимого скрипта. Для JavaScript используется значение `type="text/javascript"`, хотя это значение является значением по умолчанию и его можно опустить.
- Пример:
<script type="text/javascript" src="script.js"></script>
Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Лучшие практики
- Используйте внешние скрипты для улучшения структуры кода и его повторного использования.
- Размещайте теги `<script>` перед закрывающим тегом `</body>`, чтобы улучшить скорость загрузки страницы, поскольку браузер сначала загрузит весь HTML-контент.
- Используйте `async` и `defer` для контроля загрузки и выполнения скриптов, особенно при работе с большими файлами или внешними библиотеками.
Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Задание для самостоятельной работы
1. Создайте HTML-документ и подключите к нему JavaScript двумя способами: внутренним и внешним. Во внешнем скрипте напишите код для вывода сообщения "Привет, мир!" в консоль.
2. Экспериментируйте с атрибутами `async` и `defer`, наблюдая за изменениями в поведении загрузки и выполнения скриптов.
Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Заключение
Подключение JavaScript к HTML-документам является фундаментальным навыком в веб-разработке. Владение различными методами подключения и понимание их преимуществ и недостатков позволяет разработчикам создавать оптимизированные и эффективные веб-приложения.