Как писать javascript в html

Привет, мир!

В этой части учебника мы изучаем собственно JavaScript, сам язык.

Но нам нужна рабочая среда для запуска наших скриптов, и, поскольку это онлайн-книга, то браузер будет хорошим выбором. В этой главе мы сократим количество специфичных для браузера команд (например, alert ) до минимума, чтобы вы не тратили на них время, если планируете сосредоточиться на другой среде (например, Node.js). А на использовании JavaScript в браузере мы сосредоточимся в следующей части учебника.

Итак, сначала давайте посмотрим, как выполнить скрипт на странице. Для серверных сред (например, Node.js), вы можете выполнить скрипт с помощью команды типа «node my.js» . Для браузера всё немного иначе.

Тег «script»

Программы на JavaScript могут быть вставлены в любое место HTML-документа с помощью тега .

   
Перед скриптом.
  
. После скрипта.
  

Вы можете запустить пример, нажав на кнопку «Play» в правом верхнем углу блока с кодом выше.

Тег содержит JavaScript-код, который автоматически выполнится, когда браузер его обработает.

Современная разметка

Тег имеет несколько атрибутов, которые редко используются, но всё ещё могут встретиться в старом коде:

Старый стандарт HTML, HTML4, требовал наличия этого атрибута в теге . Обычно он имел значение type=»text/javascript» . На текущий момент этого больше не требуется. Более того, в современном стандарте HTML смысл этого атрибута полностью изменился. Теперь он может использоваться для JavaScript-модулей. Но это тема не для начального уровня, и о ней мы поговорим в другой части учебника.

Атрибут language : language=…>

Этот атрибут должен был задавать язык, на котором написан скрипт. Но так как JavaScript является языком по умолчанию, в этом атрибуте уже нет необходимости.

Обёртывание скрипта в HTML-комментарии.

В очень древних книгах и руководствах вы сможете найти комментарии внутри тега , например, такие:

Этот комментарий скрывал код JavaScript в старых браузерах, которые не знали, как обрабатывать тег . Поскольку все браузеры, выпущенные за последние 15 лет, не содержат данной проблемы, такие комментарии уже не нужны. Если они есть, то это признак, что перед нами очень древний код.

Внешние скрипты

Если у вас много JavaScript-кода, вы можете поместить его в отдельный файл.

Файл скрипта можно подключить к HTML с помощью атрибута src :

Здесь /path/to/script.js – это абсолютный путь от корневой папки до необходимого файла. Корневой папкой может быть корень диска или корень сайта, в зависимости от условий работы сайта. Также можно указать относительный путь от текущей страницы. Например, src=»https://learn.javascript.ru/script.js» или src=»https://learn.javascript.ru/script.js» будет означать, что файл «script.js» находится в текущей папке.

Можно указать и полный URL-адрес. Например:

Для подключения нескольких скриптов используйте несколько тегов:

Добавление кода JavaScript в HTML

JavaScript (JS) – это язык программирования, используемый в веб-разработке. Наряду с HTML и CSS JavaScript является одной из основных технологий и используется для создания интерактивных веб-страниц и приложений. Современные веб-браузеры, которые придерживаются базовых стандартов отображения, поддерживают JavaScript через встроенные модули и не требуют дополнительных плагинов.

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

Данный манул научит внедрять JavaScript в HTML-документы и отдельные файлы программы.

Добавление JavaScript в HTML-документ

Чтобы вставить JavaScript в HTML-документ, используйте специальный тег , который охватывает код JavaScript.

Тег можно вставить в раздел и в или после закрывающего тега в зависимости от того, когда нужно загрузить JavaScript.

Как правило, код JavaScript размещается внутри раздела , что позволяет отделить его от основного содержимого документа HTML.

Однако если скрипт должен запускаться в определенной точке разметки страницы, его нужно размещать именно в этой точке. Обычно она находится внутри раздела .

Рассмотрим следующий HTML-документ с заголовком Today’s Date.

На данный момент этот файл содержит только разметку HTML. Предположим, в документ нужно добавить следующий код JavaScript:

let d = new Date();
alert(«Today’s date is » + d);

Этот код позволит веб-странице отображать сообщение с текущей датой независимо от того, когда пользователь загружает сайт.

Для этого нужно добавить тег и поместить в него код JavaScript.

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

Загрузите страницу. На ней появится следующее предупреждение:

Today’s date is Thu Jun 29 2017 10:46:47 GMT-0400 (EDT)

Попробуйте добавить этот код в раздел и вынести его за этот раздел. Поскольку этот HTML-документ довольно прост, это не особо повлияет на отображение страницы.

Чтобы дата отображалась не в отдельном предупреждении, а прямо на странице, нужно добавить скрипт в раздел .

Загрузите эту страницу в браузере. Теперь дата будет указана прямо в теле страницы.

Today’s date is Thu Jun 29 2017 14:04:45 GMT-0400 (EDT)

Небольшие скрипты и скрипты для одной страницы будут хорошо работать внутри HTML-документа. Но объемные скрипты, предназначенные для нескольких страниц, помещать в документ не очень эффективно. Такие скрипты будут лучше обрабатываться в отдельных файлах.

Отдельные файлы JavaScript

Большие скрипты JavaScript помещают в специальные файлы js, а затем ссылаются на них внутри HTML-документа. Подобный механизм используется в CSS.

Преимущества такого подхода:

• Разметку HTML и скрипты JavaScript проще читать по отдельности.
• Такой код проще поддерживать.
• Если JavaScript кэшируется, страницы будут быстрее загружаться.

Чтобы научиться связывать файлы JavaScript с HTML, создайте небольшой тестовый проект. Он будет состоять из таких файлов:

• script.js в каталоге js/,
• style.css в каталоге css/,
• главный файл index.html в корневом каталоге проекта.

project/
├── css/
| └── style.css
├── js/
| └── script.js
└── index.html

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

Затем перейдите к файлу script.js, в котором хранится скрипт JavaScript. Он будет отображать заголовок .

let d = new Date();
document.body.innerHTML = «

Today’s date is » + d + «

«

Добавьте ссылку на этот скрипт в раздел или под ним:

Тег указывает на скрипт script.js в каталоге js/.

Теперь главный документ index.html будет выглядеть так:

Теперь отредактируйте файл style.css и укажите в нем цвет фона и стиль заголовка .

body background-color: #0080ff;
>
h1 color: #fff;
font-family: Arial, Helvetica, sans-serif;
>

После этого нужно сослаться на файл CSS в разделе HTML-документа index.html:

Попробуйте загрузить эту страницу в браузере. Она будет выглядеть так:

Today’s date is Thu Jun 29 2017 14:08:55 GMT-0400 (EDT)

На этот файл JavaScript могут ссылаться и другие HTML-документы.

Заключение

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

Читайте также:

• Написание комментариев в JavaScript
• Использование консоли разработчика JavaScript

Основы JavaScript

JavaScript – это язык программирования, который добавляет интерактивность на ваш веб-сайт (например: игры, отклик при нажатии кнопок или при вводе данных в формы, динамические стили, анимация). Эта статья поможет вам начать работать с этим захватывающим языком и даст вам представление о том, на что он способен.

Что такое JavaScript на самом деле?

JavaScript («JS» для краткости) — это полноценный динамический язык программирования, который применяется к HTML документу, и может обеспечить динамическую интерактивность на веб-сайтах. Его разработал Brendan Eich, сооснователь проекта Mozilla, Mozilla Foundation и Mozilla Corporation.

JavaScript невероятно универсален и дружелюбен к новичкам. Обладая большим опытом, вы сможете создавать игры, анимированную 2D и 3D графику, полномасштабные приложения с базами данных и многое другое!

JavaScript сам по себе довольно компактный, но очень гибкий. Разработчиками написано большое количество инструментов поверх основного языка JavaScript, которые разблокируют огромное количество дополнительных функций с очень небольшим усилием. К ним относятся:

• Программные интерфейсы приложения (API), встроенные в браузеры, обеспечивающие различные функциональные возможности, такие как динамическое создание HTML и установку CSS стилей, захват и манипуляция видеопотоком, работа с веб-камерой пользователя или генерация 3D графики и аудио сэмплов.
• Сторонние API позволяют разработчикам внедрять функциональность в свои сайты от других разработчиков, таких как Twitter или Facebook.
• Также вы можете применить к вашему HTML сторонние фреймворки и библиотеки, что позволит вам ускорить создание сайтов и приложений.

Поскольку эта статья должна быть только лёгким введением в JavaScript, мы не собираемся путать вас на этом этапе, подробно рассказывая о том, какая разница между основным языком JavaScript и различными инструментами, перечисленными выше. Вы можете подробно изучить все это позже, в нашей учебной области JavaScript и в остальной части MDN.

Ниже мы познакомим вас с некоторыми аспектами основного языка, и вы также будете играть с несколькими функциями API браузера. Веселитесь!

Пример «hello world»

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

Тем не менее, с JavaScript немного более сложно освоиться, чем с HTML и CSS. Вам придётся начать с малого, продолжая изучение небольшими шагами. Для начала мы покажем вам, как добавить некоторые основы JavaScript на вашу страницу, чтобы создать «hello world!» пример (стандарт в начальных примерах программирования).

Предупреждение: Важно: Если вы не следили за остальным нашим курсом, скачайте этот пример кода и используйте его в качестве стартовой точки.

1. Для начала перейдите на ваш тестовый сайт и создайте папку с именем ‘scripts’ (без кавычек). Затем, в новой папке скриптов, которую вы только что создали, создайте новый файл с именем main.js . Сохраните его в вашей папке scripts .
2. Далее перейдите в ваш index.html файл и введите следующий элемент на новой строке прямо перед закрывающим тегом :

script src="scripts/main.js"> script> 

var myHeading = document.querySelector("h1"); myHeading.textContent = "Hello world!"; 

Теперь убедитесь, что HTML и JavaScript файлы сохранены, и загрузите index.html в браузере. Вы должны увидеть что-то вроде этого:

Что произошло?

Итак, ваш заголовок текста был изменён на «Hello world!» с помощью JavaScript. Мы сделали это с помощью вызова функции querySelector() , захватив ссылку на наш заголовок и сохранив её в переменной, названной myHeading . Это очень похоже на то, что мы делали в CSS с помощью селекторов. Если вы хотите что-то сделать с элементом, то для начала вам нужно его выбрать.

После этого, вы устанавливаете значение переменной myHeading в textContent свойство (которое представляет собой контент заголовка) «Hello world!».

Ускоренный курс по основам языка

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

Предупреждение: Важно: В этой статье попробуйте вводить примеры строк кода в вашей JavaScript консоли, чтобы увидеть, что происходит. Для более подробной информации о JavaScript консоли смотрите статью Откройте для себя браузерные инструменты разработчика.

Переменные

Переменные — это контейнеры, внутри которых вы можете хранить значения. Вы начинаете с того, что объявляете переменную с помощью ключевого слова var (не рекомендуется, продолжайте читать, чтобы получить объяснения) или let , за которым следует любое имя, которым вы захотите её назвать:

let myVariable; 

Примечание: Точка с запятой в конце строки указывает, где заканчивается оператор. Точку с запятой нужно обязательно использовать для разеделения операторов, располагающихся на одной строке. Однако некоторые люди считают, что хорошая практика — указывать её в конце каждого оператора. Существуют и другие правила, когда нужно ставить точку с запятой, а когда нет. Смотрите более подробно в статье ваше руководство по точкам с запятой в JavaScript.

Примечание: вы можете назвать переменную практически как угодно, но есть некоторые ограничения для её имени (смотрите в правилах именования переменных). Если вы не уверены, вы можете проверить имя вашей переменной, чтобы увидеть корректно ли оно.

Примечание: JavaScript чувствителен к регистру — myVariable отличается от переменной myvariable . Если у вас возникают проблемы в вашем коде, проверьте регистр!

**Примечание:**Для получения более подробной информации о разнице между var и let, смотрите: Разница между var и let.

После объявления переменной вы можете присвоить ей значение:

Вы можете сделать обе эти операции на одной и той же строке, если вы захотите:

var myVariable = "Bob"; 

Вы можете получить значение, просто вызвав переменную по имени:

После установки значения переменной вы можете изменить его позже:

var myVariable = 'Bob'; myVariable = 'Steve';

Обратите внимание, что переменные имеют разные типы данных:

Переменная	Пояснение	Пример
String	Последовательность текста, называемая строкой. Чтобы указать, что это значение является строкой, вы должны заключить его в кавычки.	var myVariable = ‘Bob’;
Number	Числа. Числа не имеют кавычек вокруг них.	var myVariable = 10;
Boolean	Значение True(Правда)/False(Ложь). Слова true и false специальные ключевые слова в JS, и не нуждаются в кавычках.	var myVariable = true;
Array	Массив, который позволяет хранить несколько значений в одной ссылке.	var myVariable = [1,’Bob’,’Steve’,10]; Обратиться к каждому элементу массива можно так: myVariable[0] , myVariable[1] , и т.д.
Object	В принципе, что угодно. Все в JavaScript является объектом, и может храниться в переменной. Имейте это в виду, пока вы учитесь.	var myVariable = document.querySelector(‘h1’); Все это из вышеприведённых примеров.

Так для чего нам нужны переменные? Что ж, переменные должны были сделать что-нибудь интересное в программировании. Если значения не могли бы изменяться, то вы не могли бы ничего сделать динамическим, например, персонализировать приветственное сообщение или сменить изображение, отображаемое в галерее изображений.

Комментарии

Комментарии — это, по сути, короткие фрагменты текста, которые могут быть добавлены в код, и которые игнорируются браузером. Вы можете поместить комментарии в JavaScript-код, так же как вы делали это в CSS:

/* Всё, что находится тут - комментарий. */ 

Если ваш комментарий не содержит переноса строк, то зачастую легче поставить две косые черты, как тут:

// Это комментарий 

Операторы

operator (en-US) — это математический символ, который производит результат, основанный на двух значениях (или переменных). В приведённой ниже таблице вы можете увидеть некоторые из наиболее простых операторов, наряду с некоторыми примерами, которые опробуете в JavaScript консоли.

Оператор	Пояснение	Символ(ы)	Пример
Сложение (Конкатенация)	Используется для сложения двух чисел или склеивания двух строк вместе.	+	6 + 9; «Hello » + «world!»;
Вычитание, Умножение, Деление	Они делают то, чего вы от них ожидаете в математике.	— , * , /	9 — 3; 8 * 2; // умножение в JS это звёздочка 9 / 3;
Присваивание	Вы уже это видели: он присваивает значение переменной.	=	var myVariable = ‘Bob’;
Равенство (Тождество)	Делает проверку, если увидит, что два значения равны друг другу, то возвращает результат true / false (Boolean).	===	var myVariable = 3; myVariable === 4;
Отрицание (Неравенство)	Возвращает логически противоположное значение, которое ему предшествует; превращает true в false , и т.д. Когда используется вместе с оператором равенства, оператор отрицания проверяет, являются ли два значения не равными.	! , !==	Основное выражение true , но сравнение возвращает false , потому что мы отрицаем его: var myVariable = 3; !(myVariable === 3); Здесь мы проверяем » myVariable НЕ равно 3″. Это возвращает false , потому что myVariable равно 3. var myVariable = 3; myVariable !== 3;

Существует намного больше операторов для изучения, но этих пока хватит. Смотрите их полный список в разделе выражения и операторы.

Примечание: Смешивание типов данных может привести к некоторым неожиданным результатам при выполнении вычислений, поэтому будьте осторожны, правильно ссылайтесь на ваши переменные, чтобы получать ожидаемые результаты. Например, введите «35» + «25» в вашу консоль. Почему вы не получили результат, который вы ожидали? Потому, что кавычки превратили числа в строки, так что у вас в итоге получилась конкатенация строк, а не сложение чисел. Если вы введёте, 35 + 25 , то получите правильный результат.

Условия

Условия — это конструкции в коде, которые позволяют проверить истинность или ложность выражения и выполнить другой код в зависимости от полученного результата. Самая распространённая форма условия — инструкция if . else . Например:

var iceCream = "chocolate"; if (iceCream === "chocolate")  alert("Yay, I love chocolate ice cream!"); > else  alert("Awwww, but chocolate is my favorite. "); > 

Выражение внутри if ( . ) — это проверка, которая использует тождественный оператор (как описано выше), чтобы сравнить переменную iceCream со строкой chocolate и увидеть равны ли они. Если это сравнение возвращает true , выполнится первый блок кода. Если нет, этот код пропустится и выполнится второй блок кода, после инструкции else .

Функции

Функции — способ упаковки функциональности, которую вы хотите использовать повторно. Всякий раз, когда вам нужна определённая процедура, вы можете просто вызвать функцию по её имени, а не переписывать весь код каждый раз. Вы уже видели некоторые функции, описанные выше, например:

var myVariable = document.querySelector("h1"); 

alert("hello!"); 

Эти функции, document.querySelector и alert , встроены в браузер для того, чтобы вы использовали их всякий раз, когда вам это необходимо.

Если вы видите что-то, что выглядит как имя переменной, но имеет после него скобки — () , скорее всего, это функция. Функции часто принимают аргументы — биты данных, которые им необходимы для выполнения своей работы. Они находятся в скобках, и разделяются запятыми, если присутствует более одного аргумента.

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

Хорошая новость заключается в том, что вы можете определить свои собственные функции — в следующем примере мы напишем простую функцию, которая принимает два числа в качестве аргументов и умножает их:

function multiply(num1, num2)  var result = num1 * num2; return result; > 

Попробуйте запустить вышеупомянутую функцию в консоли, затем попробуйте изменить аргументы, например:

multiply(4, 7); multiply(20, 20); multiply(0.5, 3); 

Примечание: Инструкция return сообщает браузеру, что нужно вернуть переменную result из функции, которую можно будет использовать. Это необходимо потому, что переменные, определённые внутри функций, доступны только внутри этих функций. Это называется областью видимости (en-US) переменной. (Читайте больше об области видимости переменных.)

События

Для создания действительной интерактивности на веб-сайте вам необходимы события. События — это структура, которая следит за тем, что происходит в браузере, а затем позволяет вам запускать код в ответ на это. Наиболее очевидным является событие клика (en-US) , которое вызывается браузером, когда мы щёлкаем по чему-то мышью. Для демонстрации этого события введите следующую команду в вашу консоль, а затем щёлкните по текущей веб-странице:

.querySelector("html").onclick = function ()  alert("Ouch! Stop poking me!"); >; 

Существуют множество способов прикрепить событие к элементу. Здесь мы выбираем элемент и устанавливаем ему обработчик свойства onclick (en-US) анонимной функцией (т.е. безымянной) которая содержит код, который мы хотим запустить для события клика.

Обратите внимание, что

.querySelector("html").onclick = function () >; 

var myHTML = document.querySelector("html"); myHTML.onclick = function () >; 

Просто так короче.

Прокачаем пример нашего веб-сайта

Теперь, когда мы прошли некоторые основы JavaScript, давайте добавим несколько крутых несложных функций в пример нашего сайта, чтобы дать вам некоторое представление о принципах работы.

Добавление смены изображения

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

1. В первую очередь найдите другое изображение, которые вы хотели бы показать на вашем сайте. Убедитесь что оно такого же размера, как ваше первое изображение или максимально близкое к нему.
2. Сохраните изображение в вашу папку images .
3. Переименуйте это изображение в ‘firefox2.png’ (без кавычек).
4. Перейдите в ваш файл main.js и введите следующий JavaScript. (Если ваш «hello world» JavaScript по-прежнему существует, удалите его.)

var myImage = document.querySelector("img"); myImage.onclick = function ()  var mySrc = myImage.getAttribute("src"); if (mySrc === "images/firefox-icon.png")  myImage.setAttribute("src", "images/firefox2.png"); > else  myImage.setAttribute("src", "images/firefox-icon.png"); > >; 

1. Мы получаем значение из атрибута src изображения.
2. Мы используем условие для проверки значения src, равен ли путь к исходному изображению:
   1. Если это так, мы меняем значение src на путь ко 2-му изображению, заставляя другое изображение загружаться внутри элемента .
   2. Если это не так (значит, оно должно было уже измениться), мы меняем значение src , возвращаясь к первоначальному пути изображения, каким он был изначально.

   Добавление персонального приветственного сообщения

   Далее мы добавим немного другого кода, чтобы изменить заголовок страницы на персонализированное приветственное сообщение, когда пользователь впервые зайдёт на сайт. Это приветственное сообщение будет сохраняться, когда пользователь покинет сайт, а позже вернётся — мы сохраним его с помощью Web Storage API. Мы также включим возможность изменить пользователя и, следовательно, приветственное сообщение, в любое время, когда это будет необходимо.

   В index.html , добавьте следующую строку перед элементом :

   button>Change userbutton> 

   var myButton = document.querySelector("button"); var myHeading = document.querySelector("h1"); 

   function setUserName()  var myName = prompt("Please enter your name."); localStorage.setItem("name", myName); myHeading.textContent = "Mozilla is cool, " + myName; > 

   if (!localStorage.getItem("name"))  setUserName(); > else  var storedName = localStorage.getItem("name"); myHeading.textContent = "Mozilla is cool, " + storedName; > 

   .onclick = function ()  setUserName(); >; 

   Теперь, когда вы впервые заходите на сайт, он попросит вас указать имя пользователя, а затем предоставит вам персональное сообщение. Вы можете изменить имя в любое время, нажав на кнопку. В качестве дополнительного бонуса, поскольку имя хранится внутри localStorage, оно сохраняется после закрытия сайта, сохраняя при этом персонализированное сообщение при следующем открытии сайта!

   Заключение

   Если вы следовали всем инструкциям в этой статье, в конечном итоге вы должны получить страницу, которая выглядит примерно так (вы также можете посмотреть нашу версию здесь):

   

   Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на Github.

   Здесь мы узнали только самую поверхность JavaScript. Если вам понравился этот язык и вы хотите изучить его поглубже, перейдите к нашему разделу изучение JavaScript.

   В этом модуле

   • Установка базового программного обеспечения
   • Каким должен быть ваш веб-сайт?
   • Работа с файлами
   • Основы HTML
   • Основы CSS
   • Основы JavaScript
   • Публикация вашего веб-сайта
   • Как работает Веб

   Found a content problem with this page?

   • Edit the page on GitHub.
   • Report the content issue.
   • View the source on GitHub.

   This page was last modified on 3 авг. 2023 г. by MDN contributors.

   Your blueprint for a better internet.

   Как добавить JavaScript в HTML: инструкция

   В этой статье разберёмся, как добавить JavaScript в HTML. Сделать это можно тремя способами:

   • разместить JS-код внутри парного тега ;
   • подключить внешний файл;
   • прописать код прямо внутри HTML-тега, используя специальные атрибуты.

   Рассмотрим каждый способ подробнее, чтобы понять его плюсы и минусы.

   Вставка кода внутри парного тега

   Самый простой способ вставить JS-код в HTML-страницу — использовать парный тег . Он сообщает браузеру, что всё его содержимое нужно интерпретировать как исполняемый скрипт, а не как текст или HTML-код.

   В качестве примера добавим на страницу скрипт, который выводит текущие дату и время.

   Теперь при загрузке страницы будет появляться уведомление с текущими датой и временем.

   Внутри парного тега можно написать целую программу. В качестве примера создадим электронные часы.

   
   
   
   
   
   
   
    
   Электронные часы
    
   
   
   

   Отличный результат! У вас получилось с помощью JavaScript добавить в элемент HTML информацию о текущем времени, которая обновляется каждую секунду.

   В комментариях подробно описано, что делает скрипт. Он находит элемент с Это тег , который находится внутри секции body сразу под заголовком. Затем программа получает текущее время, которое отображается сразу после загрузки документа и обновляется каждую секунду.

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

   Другая проблема – чем больше содержимое скрипта, тем хуже читабельность кода. В примере выше только одна функция. А если их требуется 5-10-20, чтобы реализовать нужное поведение? В таком случае удобнее использовать следующий подход — подключать JS-код из внешних файлов.

   Подключение внешних файлов

   Для подключения JavaScript из внешних файлов тоже используется тег . Только внутри него появляется атрибут src, в котором вы указываете ссылку на JS-файл. Это может быть файл, который вы создали сами и храните рядом с HTML или в другом каталоге. А ещё это может быть файл JS-библиотеки, которая добавляет на страницу нужное вам поведение.

   В качестве примера возьмём скрипт, который выводит текущее время. Перенесём всю логику в отдельный файл:

   # Файл time.js
   function displayTime() let element = document.getElementById("clock"); // Найти элемент с 
   let now = new Date(); // Получить текущее время 
   element.innerHTML = now.toLocaleTimeString(); // Отобразить время 
   setTimeout(displayTime, 1000); // Вызывать функцию каждую секунду
   >
   window.onload = displayTime; // Начать отображение времени после загрузки документа

   Из файла HTML можно удалить весь код JS. Останется только тег , в котором через атрибут src указана ссылка на файл time.js :

   #Файл time.html
   
    
    
    
   
   
    
   Электронные часы
    
   
   
   

   Результат будет таким же — вам снова удалось с помощью JavaScript добавить в HTML div информацию о текущем времени.

   У такого подхода сразу несколько плюсов:

   1. Содержимое файлов HTML становится проще. В них остаются только контент и ссылки на внешние файлы.
   2. Весь JS-код можно держать в одном файле и при необходимости подключать его к разным страницам.
   3. Если один скрипт используется несколькими страницами, то он будет загружаться полностью только один раз, а затем использоваться повторно из кэша браузера.

   JS внутри тегов HTML

   Вы можете разместить JavaScript внутри тега HTML, используя специальные атрибуты — например, onclick , onmouseover , onkeypress , onload . Они добавляют на элементы обработчики событий.

   
   
    
    
    
    
   
     
   Нажми на меня 
   Наведи на меня курсор
   
   

   Если вы нажмёте на первую кнопку, то в браузере отобразится уведомление с текстом «Привет! Так JS тоже работает». На вторую кнопку достаточно навести курсор мыши — в ответ тоже появится браузерное уведомление с текстом «И это тоже работает». Это говорит о том, что обработчик событий работает корректно и реагирует на действия пользователя.

   Вы можете добавить в один тег несколько атрибутов с обработчиками событий, разделив их точкой с запятой. Вот так:

   Нажми на меня

   Однако это плохая практика. Большинство разработчиков предпочитает разделять контент и управление поведением по разным файлам. К тому же, как вы видите, использование обработчиков внутри HTML заметно ухудшает читабельность кода.

   Где лучше располагать скрипты

   Технически нет ограничений на вставку тега . Вы можете добавить JavaScript на странице в секциях и , в самом начале и в конце документа. Все эти варианты будут рабочими.

   Однако обычно скрипты подключают в конце секции body , прямо перед закрывающим тегом. Это ускоряет загрузку страницы. Пользователи быстрее видят контент и понимают, что страница работает. Даже если JS загрузится чуть позже, это не так сильно ухудшает пользовательский опыт, как длительное ожидание отрисовки страницы.

   Дело в том, что каждый тег блокирует отрисовку страницы до тех пор, пока не будут завершены полная загрузка и выполнение JS. Но подключенные файлы (а иногда и целые библиотеки) могут весить достаточно много. При высокой скорости интернета пауза может быть минимальной. Но стоит пользователю оказаться в месте с плохим покрытием сотовой связи, как он заметит, что сайт очень долго не отображает контент.

   Размещать скрипты в секции head нужно только в том случае, если на то есть причины. Например, без JS на странице не отображается вообще никакой контент. Но если таких причин нет, и вы беспокоитесь о скорости загрузки страницы, то лучше JavaScript добавить в HTML-код в самом конце документа, перед закрывающим тегом .