JavaScript в HTML
JavaScript делает HTML-страницы более динамичными и интерактивными.
Пример
Кнопка, показывающая дату и время при нажатии.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Js Intro</title>
</head>
<body>
<h2>Мой первый JavaScript</h2>
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
Нажмите, чтобы показать дату и время</button>
<p id="demo"></p>
</body>
</html>
Тег HTML <script>
Тег <script> определяет клиентский скрипт (JavaScript). Он либо содержит инструкции скрипта напрямую, либо указывает на внешний файл с помощью атрибута src. Распространённые случаи использования — работа с изображениями, проверка форм и изменение содержимого. Чтобы выбрать элемент, JavaScript чаще всего использует document.getElementById().
Пример
Скрипт, записывающий текст в элемент с id="demo".
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Script Write</title>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>
Немного о JavaScript
Вот несколько вещей, которые может делать JavaScript: изменять содержимое, изменять стили и изменять атрибуты элементов.
Изменение содержимого
Изменение содержимого элемента.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Js Change Content</title>
</head>
<body>
<p id="demo">Привет, мир!</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Привет, JavaScript!'">Изменить содержимое</button>
</body>
</html>
Изменение стилей
Изменение размера, цвета и фона элемента.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Js Change Styles</title>
</head>
<body>
<p id="demo">Привет, мир!</p>
<button type="button" onclick="changeStyle()">Изменить стиль</button>
<script>
function changeStyle() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
}
</script>
</body>
</html>
Изменение атрибутов
Изменение атрибута src изображения.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Js Change Attributes</title>
</head>
<body>
<img id="image" src="smiley.gif" alt="Изображение">
<button type="button" onclick="document.getElementById('image').src = 'picture.gif'">Изменить изображение</button>
</body>
</html>
Тег HTML <noscript>
Тег <noscript> определяет альтернативное содержимое, показываемое пользователям, у которых отключены скрипты, или чей браузер не поддерживает скрипты.
Пример
Скрипт с резервным сообщением <noscript>.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Noscript</title>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Извините, ваш браузер не поддерживает JavaScript!</noscript>
</body>
</html>