HTML JavaScript
Сценарий — это небольшая программа, которая используется с HTML, чтобы сделать веб-страницы более привлекательными, динамичными и интерактивными, например, всплывающее окно предупреждения при щелчке мыши. В настоящее время наиболее популярным языком сценариев является JavaScript, используемый для веб-сайтов.
Пример
<html>
<head>
<title>Document</title>
</head>
<body>
<h1>Пример даты и времени JavaScript</h1>
<button type="button"
onclick="document.querySelector('#demo').innerHTML = Date()">
Щелкните меня, чтобы отобразить дату и время.
</button>
<p id="demo"></p>
</body>
</html>
HTML-тег <script>
Тег HTML <script> используется для указания скрипта на стороне клиента. Это может быть внутренний или внешний JavaScript, который содержит операторы сценариев, поэтому мы можем поместить тег <script> в раздел <body> или <head>.
Он в основном используется для управления изображениями, проверки формы и динамического изменения контента. JavaScript использует метод document.querySelector() или document.querySelectorAll() для выбора элемента HTML.
пример
<html>
<head>
<title>Document</title>
</head>
<body>
<p id="demo"></p>
<script>
document.querySelector("#demo").innerHTML = "Привет JavaScript!";
</script>
</body>
</html>
HTML-события с JavaScript
Событие — это то, что делает пользователь или браузер, например щелчок мышью или загрузка страницы, являются примерами событий, и JavaScript вступает в роль, если мы хотим, чтобы что-то происходило с этими событиями.
HTML предоставляет атрибуты обработчиков событий, которые работают с кодом JavaScript и могут выполнять некоторые действия с событием.
Пример
1) JavaScript может изменять содержимое HTML.
<html>
<head>
<title>Document</title>
</head>
<body>
<p id="demo"></p>
<script>
function myFunction() {
document.querySelector("#demo").innerHTML = "привет JavaScript!";
}
</script>
</body>
</html>
2) JavaScript может изменить стиль HTML
<html>
<head>
<title>Document</title>
</head>
<body>
<p id="demo">привет JavaScript!</p>
<script>
function myFunction() {
document.querySelector("#demo").style.fontSize = "25px";
document.querySelector("#demo").style.color = "#ffffff";
document.querySelector("#demo").style.backgroundColor = "#000000";
}
</script>
<button type="button" onclick="myFunction()">Нажми на меня!</button>
</body>
</html>
Использовать внешний скрипт
Предположим, у вас есть различные файлы HTML, которые должны иметь один и тот же сценарий, тогда мы можем поместить наш код JavaScript в отдельный файл и вызвать его в файле HTML. Сохраняйте внешние файлы JavaScript, используя расширение .js.
Примечание. Не добавляйте тег <script> во внешний файл и укажите полный путь, по которому вы поместили файл JS.
<html>
<head>
<title>Document</title>
<script src="js.js"></script>
</head>
<body>
<form onsubmit="fun()">
<label>
Введите ваше имя:
<input type="text" name="uname" id="frm1">
</label>
<label>
Введите электронную почту:
<input type="email" id="frm2" name="email">
</label>
<input type="submit" value="отправить">
</form>
</body>
</html>
js.js
let x = document.querySelector("#frm1").value;
let y = document.querySelector("#frm2").value;
alert("Привет" + " " + x + " " + "Ваша электронная почта" + y);
}
Тег HTML <noscript>
Тег HTML <noscript> используется для записи отключенного скрипта в браузере. Текст, написанный внутри тега <noscript></noscript>, не отображается в браузере.
пример
<html>
<head>
<title>Document</title>
</head>
<body>
<p id="demo"></p>
<script>
document.querySelector("#demo").innerHTML = "Привет JavaScript!";
</script>
<noscript>Этот текст не отображается в браузере.</noscript>
</body>
</html>
