JavaScript: Встраивание скриптов в HTML

Введение

Добро пожаловать в вашу первую лабораторию JavaScript! JavaScript — это мощный скриптовый язык, который позволяет создавать динамический и интерактивный контент на веб-страницах. Без него веб-страницы были бы статичными и гораздо менее привлекательными.

В этой лаборатории вы изучите два фундаментальных способа включения JavaScript в веб-страницу:

Внутренний JavaScript: Написание кода непосредственно внутри тегов <script> в файле HTML.
Внешний JavaScript: Размещение кода в отдельном файле .js и его подключение к файлу HTML.

Мы начнем с базовой HTML-страницы и постепенно добавим функциональность JavaScript. Вы будете использовать встроенную WebIDE для редактирования файлов и предварительного просмотра изменений в реальном времени с помощью вкладки "Web 8080". Давайте начнем!

Создайте HTML-файл с тегом script

На этом шаге вы добавите блок внутреннего JavaScript в ваш HTML-файл. Процесс настройки уже создал для вас файл index.html в директории ~/project. Теперь мы добавим в него тег <script>, который является стандартным способом объявления блока кода JavaScript.

Сначала найдите файл index.html в файловом проводнике слева от WebIDE и дважды щелкните по нему, чтобы открыть.

Теперь добавьте пустой тег <script> непосредственно перед закрывающим тегом </body>. Это рекомендуемая практика, поскольку она гарантирует, что HTML-содержимое будет проанализировано и отображено пользователю до того, как браузер начнет выполнять какой-либо JavaScript, что улучшает воспринимаемое время загрузки страницы.

Ваш файл index.html должен выглядеть следующим образом:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

    <script></script>
  </body>
</html>

Не забудьте сохранить файл после внесения изменений (можно использовать Ctrl+S или Cmd+S).

Напишите console.log для вывода Hello World

Теперь, когда у вас есть место для написания JavaScript, давайте добавим вашу первую строку кода. Мы будем использовать функцию console.log(). Это фундаментальный инструмент для любого разработчика JavaScript, поскольку он позволяет выводить сообщения в консоль разработчика браузера. Это невероятно полезно для отладки и понимания того, как выполняется ваш код.

В вашем файле index.html добавьте console.log('Hello World'); внутрь тегов <script>, которые вы создали на предыдущем шаге.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

    <script>
      console.log("Hello World");
    </script>
  </body>
</html>

После сохранения файла посмотрим на результат.

Нажмите на вкладку Web 8080 в верхней части интерфейса LabEx.
Вы увидите заголовок <h1>. Чтобы увидеть вывод консоли, щелкните правой кнопкой мыши в любом месте страницы и выберите "Inspect" (Проверить).
Откроется новая панель. В этой панели нажмите на вкладку "Console" (Консоль).
Вы должны увидеть сообщение Hello World, напечатанное в консоли.

Подключите внешний JavaScript-файл с помощью атрибута src

Хотя внутренние скрипты подходят для небольших задач, лучшей практикой является хранение JavaScript в отдельных файлах. Это делает ваш код более чистым, простым в управлении и повторно используемым на разных HTML-страницах.

На этом шаге мы переместим наш код во внешний файл с именем script.js (который уже был создан для вас) и свяжем его с index.html.

Сначала измените файл index.html. Удалите строку console.log из тегов <script> и добавьте атрибут src к открывающему тегу <script>, чтобы указать на ваш внешний файл.

Ваш файл index.html теперь должен выглядеть следующим образом:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

    <script src="script.js"></script>
  </body>
</html>

Затем откройте файл script.js из файлового проводника. В настоящее время он пуст. Добавьте то же утверждение console.log в этот файл.

Ваш файл script.js должен содержать только эту строку:

console.log("Hello World");

Сохраните оба файла. Если вы вернетесь на вкладку Web 8080 и обновите страницу, вы увидите точно такой же результат в консоли. Браузер теперь загружает index.html, видит тег <script src="script.js"> и затем получает и выполняет содержимое script.js.

Добавьте функцию alert для всплывающего сообщения

Помимо вывода в консоль, JavaScript может более непосредственно взаимодействовать с пользователем. Один из самых простых способов сделать это — использовать функцию alert(), которая отображает пользователю всплывающее окно с сообщением.

Давайте добавим оповещение в наш скрипт. Откройте файл script.js и добавьте новую строку кода для создания приветственного оповещения.

Ваш файл script.js теперь должен выглядеть так:

console.log("Hello World");
alert("Welcome to JavaScript!");

Функция alert() приостановит выполнение скрипта и отрисовку страницы до тех пор, пока пользователь не нажмет "OK" во всплывающем окне. Это делает ее очень прямым способом передачи важной информации.

Сохраните файл script.js. Мы увидим его эффект на следующем шаге.

Обновите браузер для выполнения скрипта

Теперь вы добавили в свой внешний файл JavaScript как вывод в консоль, так и оповещение. Пришло время увидеть окончательный результат.

Вернитесь на вкладку Web 8080.

Чтобы увидеть изменения, внесенные в файл script.js, необходимо обновить вкладку браузера. Это сообщит браузеру о необходимости повторно загрузить HTML и все связанные файлы, включая ваш обновленный скрипт.

После обновления вы сразу же увидите всплывающее окно с сообщением "Welcome to JavaScript!".

После нажатия "OK" всплывающее окно исчезнет, и остальная часть страницы загрузится. Если вы снова откроете консоль разработчика (щелкните правой кнопкой мыши -> Inspect -> Console), вы по-прежнему увидите там сообщение "Hello World". Это демонстрирует порядок выполнения в вашем скрипте.

Поздравляем, вы успешно встроили JavaScript на веб-страницу, используя как внутренние, так и внешние методы!

Резюме

В этой лабораторной работе вы сделали первые шаги в мире веб-скриптинга с помощью JavaScript. Вы получили практический опыт работы с основными концепциями включения JavaScript в веб-проект.

Вы узнали:

Как добавлять JavaScript непосредственно в HTML-файл с помощью тега <script>.
Как использовать console.log() для вывода сообщений в консоль разработчика браузера для отладки.
Преимущества разделения кода на внешние файлы .js.
Как связать внешний файл JavaScript с вашим HTML с помощью атрибута src тега <script>.
Как создать всплывающее сообщение для пользователя с помощью функции alert().

Эта основа имеет решающее значение для создания более сложных и интерактивных веб-приложений. Продолжайте экспериментировать и развивать полученные знания!

Введение в JavaScript и встраивание