JavaScript. Введение

From AsIsWiki
(Difference between revisions)
Jump to: navigation, search
(Created page with "<div style='max-width:700px;text-align:justify;'> Оглавление | Дальше ==Вставка HTML тэгов== <pre>...")
 
 
Line 5: Line 5:
 
==Вставка HTML тэгов==
 
==Вставка HTML тэгов==
  
−
<pre>
+
<source lang="js">
 
<html>
 
<html>
 
<body>
 
<body>
Line 16: Line 16:
 
</body>
 
</body>
 
</html>
 
</html>
−
</pre>  
+
</source>
  
 
Ранее, в тэг <script> добавлялся атрибут type="text/javascript".<br>
 
Ранее, в тэг <script> добавлялся атрибут type="text/javascript".<br>
Line 24: Line 24:
 
==Если браузер не поддерживает JavaScript==
 
==Если браузер не поддерживает JavaScript==
  
−
<pre>
+
<source lang="js">
 
<script>
 
<script>
 
<!--
 
<!--
Line 31: Line 31:
 
//-->
 
//-->
 
</script>
 
</script>
−
</pre>
+
</source>
  
 
// - это комментарий JavaScript, он предотвращает выполнение тэга -->
 
// - это комментарий JavaScript, он предотвращает выполнение тэга -->
Line 40: Line 40:
 
Если метод '''document.write()''' вызывается из функции, то он полностью заменяет контент страницы.
 
Если метод '''document.write()''' вызывается из функции, то он полностью заменяет контент страницы.
  
−
<pre>
+
<source lang="js">
 
<html>
 
<html>
 
<body>
 
<body>
Line 56: Line 56:
 
</body>
 
</body>
 
</html>
 
</html>
−
</pre>
+
</source>
  
  
 
==Вывод сообщения по нажатию кнопки==
 
==Вывод сообщения по нажатию кнопки==
  
−
<pre>
+
<source lang="js">
 
<html>
 
<html>
 
<body>
 
<body>
Line 69: Line 69:
 
</body>
 
</body>
 
</html>
 
</html>
−
</pre>
+
</source>
  
  
 
==Изменение контента тега==
 
==Изменение контента тега==
  
−
<pre>
+
<source lang="js">
 
<html>
 
<html>
 
<body>
 
<body>
Line 91: Line 91:
 
</body>
 
</body>
 
</html>
 
</html>
−
</pre>
+
</source>
  
  
 
==Изменение контента при загрузке страницы==
 
==Изменение контента при загрузке страницы==
  
−
<pre>
+
<source lang="js">
 
<html>
 
<html>
 
<body>
 
<body>
Line 108: Line 108:
 
</body>
 
</body>
 
</html>
 
</html>
−
</pre>
+
</source>
  
  
 
==Изменение значения атрибута==
 
==Изменение значения атрибута==
  
−
<pre>
+
<source lang="js">
 
<html>
 
<html>
 
<body>
 
<body>
Line 135: Line 135:
 
</body>
 
</body>
 
</html>
 
</html>
−
</pre>
+
</source>
  
 
<table>
 
<table>
Line 145: Line 145:
 
==Изменение стиля==
 
==Изменение стиля==
  
−
<pre>
+
<source lang="js">
 
<html>
 
<html>
 
<body>
 
<body>
Line 162: Line 162:
 
</body>
 
</body>
 
</html>  
 
</html>  
−
</pre>
+
</source>
  
  
 
==Валидация==
 
==Валидация==
  
−
<pre>
+
<source lang="js">
 
<html>
 
<html>
 
<body>
 
<body>
Line 190: Line 190:
 
</body>
 
</body>
 
</html>
 
</html>
−
</pre>
+
</source>
  
  
Line 197: Line 197:
 
JavaScript можно размещать как в разделе BODY, так и в разделе HEAD.
 
JavaScript можно размещать как в разделе BODY, так и в разделе HEAD.
  
−
<pre>
+
<source lang="js">
 
<html>
 
<html>
 
<head>
 
<head>
Line 216: Line 216:
 
</body>
 
</body>
 
</html>  
 
</html>  
−
</pre>
+
</source>
  
 
Скрипты можно размещать в разделах HEAD и BODY одновременно. Количество скриптов ни чем не ограничено. Традиционно, функции собирают в одном месте документа.  
 
Скрипты можно размещать в разделах HEAD и BODY одновременно. Количество скриптов ни чем не ограничено. Традиционно, функции собирают в одном месте документа.  
Line 223: Line 223:
 
==Использование внешних скриптов==
 
==Использование внешних скриптов==
  
−
<pre>
+
<source lang="js">
 
<html>
 
<html>
 
<body>
 
<body>
Line 229: Line 229:
 
</body>
 
</body>
 
</html>
 
</html>
−
</pre>
+
</source>
  
 
Внешний скрипт не должен содержать тегов <script></script>. Пример содержимого файла myScript.js:
 
Внешний скрипт не должен содержать тегов <script></script>. Пример содержимого файла myScript.js:
−
<pre>
+
<source lang="js">
 
document.write("<p>Текст из внешнего скрипта</p>");
 
document.write("<p>Текст из внешнего скрипта</p>");
−
</pre>
+
</source>
  
  

Latest revision as of 10:07, 6 March 2016

Оглавление | Дальше


Contents

[edit] Вставка HTML тэгов

<html>
<body>

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

</body>
</html>

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


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

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

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


[edit] Замена контента страницы

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

<html>
<body>

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

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

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

</body>
</html>


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

<html>
<body>

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

</body>
</html>


[edit] Изменение контента тега

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


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

<html>
<body>

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

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

</body>
</html>


[edit] Изменение значения атрибута

<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.gifpic_bulbon.gif
Pic bulboff.gifPic bulbon.gif


[edit] Изменение стиля

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


[edit] Валидация

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


[edit] Вывод текущей даты

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 одновременно. Количество скриптов ни чем не ограничено. Традиционно, функции собирают в одном месте документа.


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

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

Внешний скрипт не должен содержать тегов <script></script>. Пример содержимого файла myScript.js: 

document.write("<p>Текст из внешнего скрипта</p>");


[edit] На заметку

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

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

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


Оглавление | Дальше

Retrieved from "http://wiki.asistech.org/index.php?title=JavaScript._%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5&oldid=568"
Personal tools
Namespaces

Variants
Actions
Navigation
Tools