Как включить JavaScript в HTML-страницы

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

Добавление JavaScript на ваши веб-страницы

Обычно есть три способа добавить JavaScript на веб-страницу:

Встраивание кода JavaScript между парой тегов <script> и </script>.
Создайте внешний файл JavaScript с расширением .js, а затем загрузите его на странице через атрибут src тега <script>.
Размещение кода JavaScript непосредственно внутри тега HTML с использованием специальных атрибутов, таких как onclick, onmouseover, onkeypress, onload и т. д.

Теперь рассмотрим каждый способ подробнее.

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Embedding JavaScript</title>
</head>
<body>
    <script>
    var greet = "Hello World!";
    document.write(greet); // Prints: Hello World!
    </script>
</body>
</html>

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

Атрибут type для тега <script> (т. е. <script type="text/javascript">) больше не требуется, начиная с HTML5. JavaScript является языком скриптов по умолчанию для HTML5.

Вызов внешнего файла JavaScript

Вы также можете поместить свой код JavaScript в отдельный файл с расширением .js, а затем вызвать этот файл в своем документе через атрибут src тега <script>.

<script src="js/hello.js"></script>

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

Хорошо, давайте создадим файл JavaScript с именем hello.js и поместим в него следующий код:

// Функция для отображения сообщения
function sayHello() {
    alert("Hello World!");
}

// Вызов функции по нажатию кнопки
document.getElementById("myBtn").onclick = sayHello;

Теперь вы можете вызвать этот внешний файл JavaScript на веб-странице с помощью тега <script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Including External JavaScript File</title>        
</head>
<body>    
    <button type="button" id="myBtn">Click Me</button>
    <script src="js/hello.js"></script>
</body>
</html>

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

Размещение встроенного кода JavaScript

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

Тем не менее, вам следует избегать размещения большого количества встроенного кода JavaScript, поскольку он загромождает ваш HTML-код и затрудняет поддержку кода JavaScript. Вот пример:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inlining JavaScript</title>        
</head>
<body>    
    <button onclick="alert('Hello World!')">Click Me</button>
</body>
</html>

Приведенный выше пример покажет вам предупреждающее сообщение о нажатии кнопки.

Вы всегда должны отделять содержание и структуру вашей веб-страницы (например, HTML) от представления (CSS) и поведения (JavaScript)

Расположение скрипта внутри документа HTML

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

Каждый тег <script> блокирует процесс рендеринга страницы до тех пор, пока он полностью не загрузит и не выполнит код JavaScript, поэтому размещение их в разделе заголовка (т. е. элемент <head>) документа без какой-либо уважительной причины существенно повлияет на производительность вашего веб-сайта.

Вы можете разместить любое количество элементов <script> в одном документе. Однако они обрабатываются в порядке их появления в документе по очереди.

Разница между скриптами на стороне клиента и на стороне сервера

Клиентские языки скриптов, такие как JavaScript, VBScript и т. д. интерпретируются и выполняются веб-браузером, в то время как серверные языки скриптов, такие как PHP, ASP, Java, Python, Ruby и т. д., работают на веб-сервере и выводят информацию в веб-браузер в формате HTML.

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

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

Вы можете узнать больше о серверных скриптах в Руководстве по PHP.