- Теория
- Теория
Скрипт на старт!
Кекс взял несколько заказов от интернет-магазинов и собирается заглянуть к вам в ближайшее время, чтобы раздать задачи. Пока Босс в пути, разберёмся, как подключать скрипты на страницу.
До этого мы писали программы, не связанные с интерфейсом сайта. В интернет-магазине такое не пройдёт, здесь надо манипулировать элементами на странице. Чтобы это сделать, надо грамотно подключить свой код.
Скрипты подключаются к странице с помощью тега script двумя способами:
Инлайновый код. Код пишется внутри тега script.
<body>
…
<script>console.log('Я — инлайновый скрипт');</script>
</body>
Внешний файл с кодом. Тегу script добавляется атрибут src, в котором указывается путь до файла со скриптом.
<body> … <script src="script.js"></script> </body>
Обратите внимание, что эти два способа не сочетаются друг с другом. Если у тега script указан атрибут src, инлайновый код игнорируется и не выполняется, поэтому он должен находиться в другом теге script.
<body>
…
<!-- Инлайновый скрипт не сможет рассказать о себе -->
<script src="script.js">console.log('Я — инлайновый скрипт');</script>
<!-- Вся консоль внимает инлайновому скрипту -->
<script src="script.js"></script>
<script>console.log('Я — инлайновый скрипт');</script>
</body>
Скрипты выполняются по мере подключения на страницу. Если за тегом script находится разметка, она не отрисуется пока не выполнится скрипт (в случае с инлайновым кодом) или пока он не скачается с внешнего ресурса и не будет выполнен (при подключении внешнего файла).
Поэтому мы будем подключать скрипт перед закрывающим тегом body — так мы будем уверены, что вся разметка отобразилась на странице и с ней можно работать.
Чтобы лучше понимать, что будет происходить дальше, рекомендуем пройти тренажёр по HTML и CSS.
Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. Только 3 дня цена 21 900 ₽22 900 ₽
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
