Урок №23. HTML. JavaScript

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



HTML/CSS. Як додати JavaScript в HTML-код на веб-сторінці? Використання скриптів

JavaScript робить HTML сторінки більш динамічними та інтерактивними.

Приклад:

Мій перший JavaScript

Спробуйте самі! »

HTML тег <script>

Тег <script> використовується для визначення сценарію (скрипту) на стороні клієнта (JavaScript). Елемент <script> або містить оператори сценаріїв, або вказує на зовнішній файл сценарію через атрибут src. Зазвичай JavaScript використовується для маніпуляції зображеннями, перевіркою форм і динамічними змінами вмісту. Щоб вибрати HTML елемент, JavaScript дуже часто використовує метод document.getElementById ().

Цей приклад JavaScript пише "Hello JavaScript!" в HTML елементі з id = "demo":

Приклад:

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
Спробуйте самі! »

Примітка: Ви можете дізнатися більше про JavaScript в Підручнику з JavaScript.


Смакуйте JavaScript!

Ось кілька прикладів того, що JavaScript може зробити:

JavaScript може змінювати вміст HTML:

document.getElementById("demo").innerHTML = "Hello JavaScript!";
Спробуйте самі! »

JavaScript може змінювати стилі HTML:

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
Спробуйте самі! »

JavaScript може змінювати атрибути HTML:

document.getElementById("image").src = "picture.gif";

Результат:

Лампочка

Спробуйте самі! »

HTML тег <noscript>

Тег <noscript> використовується для надання альтернативного вмісту для користувачів, які вимкнули скрипти у своєму веб-браузері або мають веб-браузер, який не підтримує сценарії на стороні клієнта:

Приклад:

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>
Спробуйте самі! »

Перевірте себе вправами!


HTML теги сценарію

Тег Опис
<script> Визначає скрипт на стороні клієнта
<noscript> Визначає альтернативний вміст для користувачів, які не підтримують скрипти на стороні клієнта

Примітка: Для отримання повного списку всіх доступних HTML тегів, відвідайте довідник HTML тегів.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.