JavaScript. Введение
(Created page with "<div style='max-width:700px;text-align:justify;'> Оглавление | Дальше ==Вставка HTML тэгов== <pre>...") |
|||
Line 5: | Line 5: | ||
==Вставка HTML тэгов== | ==Вставка HTML тэгов== | ||
− | < | + | <source lang="js"> |
<html> | <html> | ||
<body> | <body> | ||
Line 16: | Line 16: | ||
</body> | </body> | ||
</html> | </html> | ||
− | </ | + | </source> |
Ранее, в тэг <script> добавлялся атрибут type="text/javascript".<br> | Ранее, в тэг <script> добавлялся атрибут type="text/javascript".<br> | ||
Line 24: | Line 24: | ||
==Если браузер не поддерживает JavaScript== | ==Если браузер не поддерживает JavaScript== | ||
− | < | + | <source lang="js"> |
<script> | <script> | ||
<!-- | <!-- | ||
Line 31: | Line 31: | ||
//--> | //--> | ||
</script> | </script> | ||
− | </ | + | </source> |
// - это комментарий JavaScript, он предотвращает выполнение тэга --> | // - это комментарий JavaScript, он предотвращает выполнение тэга --> | ||
Line 40: | Line 40: | ||
Если метод '''document.write()''' вызывается из функции, то он полностью заменяет контент страницы. | Если метод '''document.write()''' вызывается из функции, то он полностью заменяет контент страницы. | ||
− | < | + | <source lang="js"> |
<html> | <html> | ||
<body> | <body> | ||
Line 56: | Line 56: | ||
</body> | </body> | ||
</html> | </html> | ||
− | </ | + | </source> |
==Вывод сообщения по нажатию кнопки== | ==Вывод сообщения по нажатию кнопки== | ||
− | < | + | <source lang="js"> |
<html> | <html> | ||
<body> | <body> | ||
Line 69: | Line 69: | ||
</body> | </body> | ||
</html> | </html> | ||
− | </ | + | </source> |
==Изменение контента тега== | ==Изменение контента тега== | ||
− | < | + | <source lang="js"> |
<html> | <html> | ||
<body> | <body> | ||
Line 91: | Line 91: | ||
</body> | </body> | ||
</html> | </html> | ||
− | </ | + | </source> |
==Изменение контента при загрузке страницы== | ==Изменение контента при загрузке страницы== | ||
− | < | + | <source lang="js"> |
<html> | <html> | ||
<body> | <body> | ||
Line 108: | Line 108: | ||
</body> | </body> | ||
</html> | </html> | ||
− | </ | + | </source> |
==Изменение значения атрибута== | ==Изменение значения атрибута== | ||
− | < | + | <source lang="js"> |
<html> | <html> | ||
<body> | <body> | ||
Line 135: | Line 135: | ||
</body> | </body> | ||
</html> | </html> | ||
− | </ | + | </source> |
<table> | <table> | ||
Line 145: | Line 145: | ||
==Изменение стиля== | ==Изменение стиля== | ||
− | < | + | <source lang="js"> |
<html> | <html> | ||
<body> | <body> | ||
Line 162: | Line 162: | ||
</body> | </body> | ||
</html> | </html> | ||
− | </ | + | </source> |
==Валидация== | ==Валидация== | ||
− | < | + | <source lang="js"> |
<html> | <html> | ||
<body> | <body> | ||
Line 190: | Line 190: | ||
</body> | </body> | ||
</html> | </html> | ||
− | </ | + | </source> |
Line 197: | Line 197: | ||
JavaScript можно размещать как в разделе BODY, так и в разделе HEAD. | JavaScript можно размещать как в разделе BODY, так и в разделе HEAD. | ||
− | < | + | <source lang="js"> |
<html> | <html> | ||
<head> | <head> | ||
Line 216: | Line 216: | ||
</body> | </body> | ||
</html> | </html> | ||
− | </ | + | </source> |
Скрипты можно размещать в разделах HEAD и BODY одновременно. Количество скриптов ни чем не ограничено. Традиционно, функции собирают в одном месте документа. | Скрипты можно размещать в разделах HEAD и BODY одновременно. Количество скриптов ни чем не ограничено. Традиционно, функции собирают в одном месте документа. | ||
Line 223: | Line 223: | ||
==Использование внешних скриптов== | ==Использование внешних скриптов== | ||
− | < | + | <source lang="js"> |
<html> | <html> | ||
<body> | <body> | ||
Line 229: | Line 229: | ||
</body> | </body> | ||
</html> | </html> | ||
− | </ | + | </source> |
Внешний скрипт не должен содержать тегов <script></script>. Пример содержимого файла myScript.js: | Внешний скрипт не должен содержать тегов <script></script>. Пример содержимого файла myScript.js: | ||
− | < | + | <source lang="js"> |
document.write("<p>Текст из внешнего скрипта</p>"); | document.write("<p>Текст из внешнего скрипта</p>"); | ||
− | </ | + | </source> |
Latest revision as of 10:07, 6 March 2016
[edit] Вставка HTML тэгов
1 2 3 4 5 6 7 8 9 10 | <html> <body> <script> document.write( "<h3>Это заголовок</h3>" ); document.write( "<p>Это параграф</p>" ); </script> </body> </html> |
Ранее, в тэг <script> добавлялся атрибут type="text/javascript".
Теперь в этом нет необходимости, JavaScript является скриптовым языком по умолчанию во всех современных браузерах и в HTML5.
[edit] Если браузер не поддерживает JavaScript
1 2 3 4 5 6 | <script> <!-- document.write( "<h3>Это заголовок</h3>" ); document.write( "<p>Это параграф</p>" ); //--> </script> |
// - это комментарий JavaScript, он предотвращает выполнение тэга -->
[edit] Замена контента страницы
Если метод document.write() вызывается из функции, то он полностью заменяет контент страницы.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <body> <p>Этот параграф будет удален</p> <button onclick= "myFunction()" >Заменить контент</button> <script> function myFunction() { document.write( "Метод write полностью заменяет контент страницы" ); } </script> </body> </html> |
[edit] Вывод сообщения по нажатию кнопки
1 2 3 4 5 6 7 | <html> <body> <button type= "button" onclick= "alert('Hi!')" >Привет!</button> </body> </html> |
[edit] Изменение контента тега
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <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] Изменение контента при загрузке страницы
1 2 3 4 5 6 7 8 9 10 11 | <html> <body> <p id= "demo" >Этот текст будет изменен скриптом, в момент загрузки страницы</p> <script> document.getElementById( "demo" ).innerHTML= "Новый текст параграфа" ; </script> </body> </html> |
[edit] Изменение значения атрибута
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <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 |
![]() | ![]() |
[edit] Изменение стиля
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <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] Валидация
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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] Использование внешних скриптов
1 2 3 4 5 | <html> <body> <script type= "text/javascript" src= "myScript.js" ></script> </body> </html> |
Внешний скрипт не должен содержать тегов <script></script>. Пример содержимого файла myScript.js:
1 | document.write( "<p>Текст из внешнего скрипта</p>" ); |
[edit] На заметку
ECMA-262 - официальное название стандарта JavaScript.
JavaScript был разработан Бренданом Айком (Brendan Eich).
Впервые появился в браузере Netscape в 1995, и был принят ассоциацией стандартов ECMA в 1997.