Здесь вы узнаете, как легко добавить интерактивность на веб-страницу с помощью 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.

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

Массивы — это сложные переменные, которые позволяют нам хранить группы значений под одним именем переменной. Массивы JavaScript могут хранить любое допустимое значение, включая строки, числа, объекты, функции и даже другие массивы, что позволяет создавать более сложные структуры данных, такие как массив объектов или массив массивов. Предположим, вы хотите сохранить название цветов в своем коде JavaScript….

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 2

Оценок пока нет. Поставьте оценку первым.