• Теория
  • Теория

Скрипт на старт!

Кекс взял несколько заказов от интернет-магазинов и собирается заглянуть к вам в ближайшее время, чтобы раздать задачи. Пока Босс в пути, разберёмся, как подключать скрипты на страницу.

До этого мы писали программы, не связанные с интерфейсом сайта. В интернет-магазине такое не пройдёт, здесь надо манипулировать элементами на странице. Чтобы это сделать, надо грамотно подключить свой код.

Скрипты подключаются к странице с помощью тега 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.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «JavaScript в браузере» тренажёра «Погружение в браузерный JavaScript» можно после регистрации и оформления подписки.