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.