JavaScript. Введение
Вставка HTML тэгов
<html> <body> <script> document.write("<h3>Это заголовок</h3>"); document.write("<p>Это параграф</p>"); </script> </body> </html>
Ранее, в тэг <script> добавлялся атрибут type="text/javascript".
Теперь в этом нет необходимости, JavaScript является скриптовым языком по умолчанию во всех современных браузерах и в HTML5.
Если браузер не поддерживает JavaScript
<script> <!-- document.write("<h3>Это заголовок</h3>"); document.write("<p>Это параграф</p>"); //--> </script>
// - это комментарий JavaScript, он предотвращает выполнение тэга -->
Замена контента страницы
Если метод document.write() вызывается из функции, то он полностью заменяет контент страницы.
<html> <body> <p>Этот параграф будет удален</p> <button onclick="myFunction()">Заменить контент</button> <script> function myFunction() { document.write("Метод write полностью заменяет контент страницы"); } </script> </body> </html>
Вывод сообщения по нажатию кнопки
<html> <body> <button type="button" onclick="alert('Hi!')">Привет!</button> </body> </html>
Изменение контента тега
<html> <body> <p id="demo">Эта строка будет заменена на другую</p> <script> function myFunction() { var x=document.getElementById("demo"); // Поиск элемента x.innerHTML="Привет!"; // Изменение контента } </script> <button type="button" onclick="myFunction()">Изменить контент</button> </body> </html>
Изменение контента при загрузке страницы
<html> <body> <p id="demo">Этот текст будет изменен скриптом, в момент загрузки страницы</p> <script> document.getElementById("demo").innerHTML="Новый текст параграфа"; </script> </body> </html>
Изменение значения атрибута
<html> <body> <script> function changeImage() { var element=document.getElementById("lamp"); if (element.src.match("bulbon")) { element.src="pic_bulboff.gif"; } else { element.src="pic_bulbon.gif"; } } </script> <img id="lamp" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180"> <p>Клик по лампе включает/выключает свет</p> </body> </html>
pic_bulboff.gif | pic_bulbon.gif |
![]() | ![]() |
Изменение стиля
<html> <body> <p id="demo">Меняем стиль параграфа</p> <script> function myFunction() { var x=document.getElementById("demo"); // Поиск элемента x.style.color="#ff0000"; // Изменение стиля } </script> <button type="button" onclick="myFunction()">Изменить стиль</button> </body> </html>
Валидация
<html> <body> <p>Введите число:</p> <input id="demo" type="text"> <script> function myFunction() { var x=document.getElementById("demo").value; if (x=="" || isNaN(x)) { alert("Это не число"); } else { alert("Это число"); } } </script> <button type="button" onclick="myFunction()">Проверить число</button> </body> </html>
Вывод текущей даты
JavaScript можно размещать как в разделе BODY, так и в разделе HEAD.
<html> <head> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> </head> <body> <p id="demo">Тут появится дата</p> <button type="button" onclick="displayDate()">Отобразить дату</button> </body> </html>
Скрипты можно размещать в разделах HEAD и BODY одновременно. Количество скриптов ни чем не ограничено. Традиционно, функции собирают в одном месте документа.
Использование внешних скриптов
<html> <body> <script type="text/javascript" src="myScript.js"></script> </body> </html>
Внешний скрипт не должен содержать тегов <script></script>. Пример содержимого файла myScript.js:
document.write("<p>Текст из внешнего скрипта</p>");
На заметку
ECMA-262 - официальное название стандарта JavaScript.
JavaScript был разработан Бренданом Айком (Brendan Eich).
Впервые появился в браузере Netscape в 1995, и был принят ассоциацией стандартов ECMA в 1997.