Основы js
JS это скриптовый язык работающий на стороне браузеров. Предназначен для изменения и манипулирования html элементов с помощью DOM. Объектная модель документа. Слышали наверно про ООП, объектно ориентированное программирование. Дом это своеобразная модель окна браузера, есть окно, дальше тело, ещё дальше теги и в тегах разнообразные node т.е. узлы, текстовые и даже пустые.
|
1 2 3 4 |
<p id="paragraph">Какой то параграф</p> <script> document.getElementById('paragraph').innerHTML = 'Привет JavaScript'; </script> |
js может создавать, копировать, удалять html элементы, т.е. делать с ними любые манипуляции которые захотите, которые позволит выдумать ваша бурная фантазия. И плюс ко всему вам не нужен сервер, интерпретатор находиться в браузере, и вам даже не требуется подключение к интернету!
Вот вам первое чудо. При клике на изображение оно меняется туда и обратно. Вызов функции вшит в тег изображения. Вообще то так делать нельзя но в целях тренировки можно. При клике скрипт меняет картинку.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> function changeImage(){ var image = document.getElementById('image'); //По id находим изображение в документе и запихиваем его в переменную if(image.src.match("111")){ //если значение по умолчанию равно имени изображения image.src = "img/222.jpg"; //то меняем на изображение 222 }else{ image.src = "img/111.jpg"; //в ином случае меняем на изображение 111 } } </script> |
Увеличиваем щрифт элемента средствами js
|
1 2 3 4 5 6 |
<p id="paragraph2" onclick="resize()">Какой то параграф</p> <script> function resize(){ document.getElementById('paragraph2').style.fontSize = '34px'; } </script> |
Простая проверка числа на js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<p>Введите число от 1 до 99:</p> <input id="number" type="text"> <button type="button" onclick="findNum()">Проверить</button> <p id="result"></p><br><br><br> <script> function findNum(){ var number, result; //объявляем 2 переменные number = document.getElementById('number').value; //вычисляем поле по id if(isNaN(number) || number < 1 || number > 99){ //если НЕ число, или, число меньше 1, или, число больше 99 result = "Число неверно!"; }else{ result = 'Число верно!'; } document.getElementById('result').innerHTML = result; } </script> |
| Категория: JavaScript
| Тэги: HTML / JavaScript / галерея / основы
