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