View source for JavaScript. Введение

<div style='max-width:700px;text-align:justify;'>
[[JavaScript|Оглавление]] | [[JavaScript. Команды|Дальше]]


==Вставка HTML тэгов==

<pre>
<html>
<body>

<script>
document.write("<h3>Это заголовок</h3>");
document.write("<p>Это параграф</p>");
</script>

</body>
</html>
</pre> 

Ранее, в тэг <script> добавлялся атрибут type="text/javascript".<br>
Теперь в этом нет необходимости, JavaScript является скриптовым языком по умолчанию во всех современных браузерах и в HTML5.


==Если браузер не поддерживает JavaScript==

<pre>
<script>
<!--
document.write("<h3>Это заголовок</h3>");
document.write("<p>Это параграф</p>");
//-->
</script>
</pre>

// - это комментарий JavaScript, он предотвращает выполнение тэга -->


==Замена контента страницы==

Если метод '''document.write()''' вызывается из функции, то он полностью заменяет контент страницы.

<pre>
<html>
<body>

<p>Этот параграф будет удален</p>

<button onclick="myFunction()">Заменить контент</button>

<script>
function myFunction() {
  document.write("Метод write полностью заменяет контент страницы");
}
</script>

</body>
</html>
</pre>


==Вывод сообщения по нажатию кнопки==

<pre>
<html>
<body>

<button type="button" onclick="alert('Hi!')">Привет!</button>

</body>
</html>
</pre>


==Изменение контента тега==

<pre>
<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>
</pre>


==Изменение контента при загрузке страницы==

<pre>
<html>
<body>

<p id="demo">Этот текст будет изменен скриптом, в момент загрузки страницы</p>

<script>
document.getElementById("demo").innerHTML="Новый текст параграфа";
</script>

</body>
</html>
</pre>


==Изменение значения атрибута==

<pre>
<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>
</pre>

<table>
<tr align=center valign=center><td>pic_bulboff.gif</td><td>pic_bulbon.gif</td></tr>
<tr align=center valign=center><td>[[File:pic_bulboff.gif]]</td><td>[[File:pic_bulbon.gif]]</td></tr>
</table>


==Изменение стиля==

<pre>
<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> 
</pre>


==Валидация==

<pre>
<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>
</pre>


==Вывод текущей даты==

JavaScript можно размещать как в разделе BODY, так и в разделе HEAD.

<pre>
<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> 
</pre>

Скрипты можно размещать в разделах HEAD и BODY одновременно. Количество скриптов ни чем не ограничено. Традиционно, функции собирают в одном месте документа. 


==Использование внешних скриптов==

<pre>
<html>
<body>
<script type="text/javascript" src="myScript.js"></script>
</body>
</html>
</pre>

Внешний скрипт не должен содержать тегов <script></script>. Пример содержимого файла myScript.js:
<pre>
document.write("<p>Текст из внешнего скрипта</p>");
</pre>


==На заметку==

ECMA-262 - официальное название стандарта JavaScript.

JavaScript был разработан Бренданом Айком (Brendan Eich).

Впервые появился в браузере Netscape в 1995, и был принят ассоциацией стандартов ECMA в 1997. 


----
[[JavaScript|Оглавление]] | [[JavaScript. Команды|Дальше]]
</div>