JavaScript. Введение
Вставка 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.
Если браузер не поддерживает JavaScript
1 2 3 4 5 6 | <script> <!-- document.write( "<h3>Это заголовок</h3>" ); document.write( "<p>Это параграф</p>" ); //--> </script> |
// - это комментарий JavaScript, он предотвращает выполнение тэга -->
Замена контента страницы
Если метод 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> |
Вывод сообщения по нажатию кнопки
1 2 3 4 5 6 7 | <html> <body> <button type= "button" onclick= "alert('Hi!')" >Привет!</button> </body> </html> |
Изменение контента тега
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> |
Изменение контента при загрузке страницы
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> |
Изменение значения атрибута
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 |
![]() | ![]() |
Изменение стиля
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> |
Валидация
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> |
Вывод текущей даты
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 одновременно. Количество скриптов ни чем не ограничено. Традиционно, функции собирают в одном месте документа.
Использование внешних скриптов
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>" ); |
На заметку
ECMA-262 - официальное название стандарта JavaScript.
JavaScript был разработан Бренданом Айком (Brendan Eich).
Впервые появился в браузере Netscape в 1995, и был принят ассоциацией стандартов ECMA в 1997.