Вступление
JavaScript, также сокращенно JS, является языком программирования, используемым в веб-разработке. Как одна из основных технологий Интернета наряду с HTML и CSS, JavaScript используется для того, чтобы сделать веб-страницы интерактивными и создавать веб-приложения. Современные веб-браузеры, которые придерживаются общих стандартов отображения, поддерживают JavaScript через встроенные движки без необходимости в дополнительных плагинах.
При работе с файлами для Интернета необходимо загружать JavaScript и запускать его вместе с разметкой HTML. Это можно сделать либо встроенным в HTML-документ, либо в отдельный файл, который браузер будет загружать вместе с HTML-документом.
В этом руководстве рассказывается, как включить JavaScript в ваши веб-файлы, как встроенные в HTML-документ, так и в виде отдельного файла.
Добавление JavaScript в HTML-документ
Вы можете добавить код JavaScript в HTML-документ, используя специальный тег HTML <script>, который оборачивает код JavaScript.
Тег <script> может быть размещен в разделе <head> вашего HTML, в разделе <body> или после тега </ body> close, в зависимости от того, когда вы хотите загрузить JavaScript.
Как правило, код JavaScript может входить в раздел документа <head> для того, чтобы они содержались вне основного содержимого вашего HTML-документа.
Однако, если ваш скрипт должен запускаться в определенной точке в макете страницы - например, при использовании document.write для генерации контента - вы должны поместить его в точку, где он должен быть вызван, обычно в разделе <body>.
Давайте рассмотрим следующий пустой HTML-документ с заголовком браузера «Сегодняшняя дата»:
index.html
<! DOCTYPE html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1" > <title> Сегодняшняя дата </ title> </ head> <body> </ body> </ html>Сейчас этот файл содержит только HTML-разметку. Допустим, мы хотели бы добавить следующий код JavaScript в документ:
let d = новая дата (); alert («Сегодняшняя дата» + d);Это позволит веб-странице отображать предупреждение с текущей датой независимо от того, когда пользователь загружает сайт.
Чтобы добиться этого, мы добавим тег <script> вместе с некоторым кодом JavaScript в файл HTML.
Для начала мы добавим код JavaScript между тегами <head>, сигнализируя браузеру запустить скрипт JavaScript перед загрузкой на остальной части страницы. Например, мы можем добавить JavaScript ниже тегов <title>, как показано ниже:
index.html
<! DOCTYPE html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1" > <title> Сегодняшняя дата </ title> <script> let d = new Date (); alert («Сегодняшняя дата» + d); </ script> </ head> <body> </ body> </ html>Как только вы загрузите страницу, вы получите предупреждение, которое будет выглядеть примерно так:
Вы также можете поэкспериментировать с размещением скрипта внутри или снаружи тегов <body> и перезагрузить страницу. Поскольку это не надежный HTML-документ, вы, вероятно, не заметите никакой разницы в загрузке страницы.
Если бы мы изменяли то, что показано в теле HTML, нам нужно было бы реализовать это после раздела <head>, чтобы оно отображалось на странице, как в примере ниже:
index.html
<! DOCTYPE html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1" > <title> Сегодняшняя дата </ title> </ head> <body> <script> let d = new Date (); document.body.innerHTML = "<h1> Сегодняшняя дата -" + d + "</ h1>" </ script> </ body> </ html>Вывод вышеупомянутого HTML-документа, загруженного через веб-браузер, будет выглядеть примерно так:
Небольшие сценарии, которые выполняются только на одной странице, могут нормально работать в файле HTML, но для более крупных сценариев или сценариев, которые будут использоваться на многих страницах, это не очень эффективное решение, так как включение может стать громоздким или трудным для чтения и понять. В следующем разделе мы рассмотрим, как обрабатывать отдельный файл JavaScript в вашем HTML-документе.
Работа с отдельным файлом JavaScript
Для размещения более крупных сценариев или сценариев, которые будут использоваться на нескольких страницах, код JavaScript обычно находится в одном или нескольких js-файлах, на которые имеются ссылки в документах HTML, аналогично тому, как ссылаются на внешние ресурсы, такие как CSS.
Преимущества использования отдельного файла JavaScript включают в себя:
- Разделение разметки HTML и кода JavaScript, чтобы сделать оба более простыми
- Отдельные файлы облегчают обслуживание
- Когда файлы JavaScript кэшируются, страницы загружаются быстрее
Чтобы продемонстрировать, как подключить документ JavaScript к документу HTML, давайте создадим небольшой веб-проект. Он будет состоять из файла script.js в каталоге js /, style.css в каталоге css / и основного index.html в корне проекта.
проект / ├── css / | Style── style.css ├── js / | Script── script.js └── index.htmlМы можем начать с нашего предыдущего HTML-шаблона из раздела выше:
index.html
<! DOCTYPE html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1" > <title> Сегодняшняя дата </ title> </ head> <body> </ body> </ html>Теперь давайте переместим наш код JavaScript, который будет отображать дату в виде заголовка <h1>, в файл script.js:
script.js
let d = новая дата (); document.body.innerHTML = "<h1> Сегодняшняя дата -" + d + "</ h1>"Мы можем добавить ссылку на этот скрипт в раздел <body> или ниже, со следующей строкой кода:
<script src = "js / script.js"> </ script>Тег <script> указывает на файл script.js в каталоге js / нашего веб-проекта.
Давайте посмотрим на эту строку в контексте нашего HTML-файла, в данном случае ниже раздела <body>:
index.html
<! DOCTYPE html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1" > <title> Сегодняшняя дата </ title> </ head> <body> </ body> <script src = "js / script.js"> </ script> </ html>Наконец, давайте также отредактируем файл style.css, добавив цвет и стиль фона в заголовок <h1>:
style.css
body {background-color: # 0080ff; } h1 {color: #fff; семейство шрифтов: Arial, Helvetica, без засечек; }Мы можем ссылаться на этот CSS-файл в разделе <head> нашего HTML-документа:
index.html
<! DOCTYPE html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1" > <title> Сегодняшняя дата </ title> <link rel = "stylesheet" href = "css / style.css"> </ head> <body> </ body> <script src = "js / script.js"> </ script> </ html>Теперь, имея JavaScript и CSS, мы можем загрузить страницу index.html в выбранный нами веб-браузер. Мы должны увидеть страницу, похожую на следующую:
Теперь, когда мы поместили JavaScript в файл, мы можем вызывать его таким же образом с дополнительных веб-страниц и обновлять их все в одном месте.
Заключение
В этом руководстве рассказывалось, как включить JavaScript в ваши веб-файлы, как встроенные в HTML-документ, так и в виде отдельного файла .js.
Отсюда вы можете узнать, как работать с Консоль разработчика JavaScript а также как писать комментарии в JavaScript ,