JS Урок 2. Javascript — примеры скриптов

Автор: | 11.09.2015
Нет комментариев

Введение в JS в примерах

Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) — объектная модель, используемая для XML/HTML-документов.

Согласно DOM-модели, документ является иерархией.
Каждый HTML-тег образует отдельный элемент-узел, каждый фрагмент текста — текстовый элемент, и т.п.

Проще говоря, DOM — это представление документа в виде дерева тегов. Это дерево образуется за счет вложенной структуры тегов плюс текстовые фрагменты страницы, каждый из которых образует отдельный узел.

Простейший документ

Построим, для начала, дерево для следующего документа.


Самый внешний тег — <html>, поэтому дерево начинает расти от него.

<html>
<head>
<title>Заголовок</title>
</head>
<body>
  Прекрасный документ
</body>
</html>

Внутри <html> находятся два узла: <head> и <body> — они становятся дочерними узлами для <html>.

Теги образуют узлы-элементы (element node). Текст представлен текстовыми узлами(text node). И то и другое — равноправные узлы дерева DOM.

Пример посложнее

Рассмотрим теперь более жизненную страничку:

<html>
    <head>
        <title>
            О лосях
        </title>
    </head>
    <body>
        Правда о лосях.
        <ol>
            <li>
                Лось - животное хитрое
            </li>
            <li>
                .. И коварное
            </li>
        </ol>
    </body>
</html>

Корневым элементом иерархии является html. У него есть два потомка. Первый -head, второй — body. И так далее, каждый вложенный тег является потомком тега выше:

На этом рисунке синим цветом обозначены элементы-узлы, черным — текстовые элементы.

Дерево образовано за счет синих элементов-узлов — тегов HTML.

А вот так выглядит дерево, если изобразить его прямо на HTML-страничке:

Кстати, дерево на этом рисунке не учитывает текст, состоящий из одних пробельных символов. Например, такой текстовый узел должен идти сразу после <ol>. DOM, не содержащий таких «пустых» узлов, называют «нормализованным».

Пример с атрибутами и DOCTYPE

Рассмотрим чуть более сложный документ.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Документ</title>
    </head>
    <body>
        <div id="dataKeeper">Data</div>
        <ul>
            <li style="background-color:red">Осторожно</li>
            <li class="info">Информация</li>
        </ul>
        <div id="footer">Made in Russia &copy;</div>
    </body>
</html>

Это свойство управляет стилем. Оно аналогично установке стиля в CSS.Верхний тег — html, у него дети head и body, и так далее. Получается дерево тегов:

Атрибуты

В этом примере у узлов есть атрибуты: style, class, id. Вообще говоря, атрибуты тоже считаются узлами в DOM-модели, родителем которых является элемент DOM, у которого они указаны.

Однако, в веб-программировании в эти дебри обычно не лезут, и считают атрибуты просто свойствами DOM-узла, которые, как мы увидим в дальнейшем, можно устанавливать и менять по желанию программиста.

Свойства элементов

У элементов есть масса свойств. Обычно используется максимум треть из них. Некоторые из них можно читать и устанавливать, другие — только читать.

Есть еще и третий вариант, встречающийся в IE — когда устанавливать свойство можно только во время создания элемента.

Рассмотрим здесь еще некоторые (не все) свойства элементов, полезные при работе с DOM.

tagName

Атрибут есть у элементов-тегов и содержит имя тега в верхнем регистре, только для чтения.

Например,

alert(document.body.tagName) // => BODY

Например, можно установить element.style.width:style

Исходный код этой кнопки:

<input type="button" style="width: 300px" onclick="this.style.width = parseInt(this.style.width)-10+'px'" value="Укоротить на 10px" />
Когда-то это свойство поддерживалось только в IE. Теперь его поддерживают все современные браузеры.Обработчик события onclick обращается в этом примере к свойствуthis.style.width, т.к значением this в обработчике события является текущий элемент (т.е сама кнопка). Подробнее об этом — во введении в события.

Есть общее правило замены — если CSS-атрибут имеет дефисы, то для установкиstyle нужно заменить их на верхний регистр букв.

Например, для установки свойства z-index в 1000, нужно поставить:

element.style.zIndex = 1000

Оно содержит весь HTML-код внутри узла, и его можно менять .innerHTML

Свойство innerHTML применяется, в основном, для динамического изменения содержания страницы, например:

document.getElementById('footer').innerHTML = '<h1>Bye!</h1> <p>See ya</p>'

Пожалуй, innerHTML — одно из наиболее часто используемых свойств DOM-элемента.

className

Это свойство задает класс элемента. Оно полностью аналогично html-атрибуту «class».

elem.className = 'newclass'



Для того чтобы получить доступ к определенному элементу используйте document.getElementById.

element = document.getElementById(id);

События JavaScript

В JavaScript, как и других объектно ориентированных языках, определен ряд событий, связанных с элементами документа. Обработчики дают возможность организовать реакцию на возникновение событий из сценария. При этом соответствующий обработчик указывается как атрибут элемента HTML-документа; значением этого атрибута является выражение JavaScript. Например,

<div onmouseOver="this.style.bgColor='#CCCCCC'" 
           onmouseOut="this.style.bgColor='#EEEEEE'
      ">
      Наведите курсор мыши
      </div>

 

 

— наведение и увод курсора мыши на элемент сопровождаются изменением цвета фона.

<body onUnLoad="alert('окно закрывается!'">
— при попытке пользователя закрыть окно и выгрузить документ выводится сообщение

<img src="cat.jpg" onClick="showPict()">
— при щелчке мышью по изображению выполняется некая функция showPict()

Половина обработчиков поддерживаются практически всеми HTML-элементами ( * ). Некоторые события можно имитировать с помощью соответствующих методов. Ниже приводится список событий согласно спецификации HTML 4.0 и некоторые события, поддерживаемые MS IE. Трактовка браузеров может отличаться от стандарта и в плане применимости обработчика к тем или иным элементам

Обработчик события Поддерживающие HTML-элементы Описание Метод
имитации
onAbort IMG Прерывание загрузки изображения
onBlur A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA Потеря текущим элементом фокуса, т.е. переход к другому элементу. Возникает при щелчке мышью вне элемента либо нажатии клавиши табуляции blur()
onChange INPUT, SELECT, TEXTAREA Изменение значений элементов формы. Возникает после потерей элементом фокуса, т.е. после события blur change()
onClick *   Практически все HTML-элементы Одинарный щелчок (нажата и отпущена кнопка мыши) click()
onDblClick *   Практически все HTML-элементы Двойной щелчок
onError IMG, WINDOW Возникновение ошибки выполнения сценария
onFocus A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA Получение элементом фокуса (щелчок мышью на элементе или очередное нажатие клавиши табуляции) focus()
onKeyDown *   Практически все HTML-элементы Нажата клавиша на клавиатуре
onKeyPress *   Практически все HTML-элементы Нажата и отпущена клавиша на клавиатуре
onKeyUp *   Практически все HTML-элементы Отпущена клавиша на клавиатуре
onLoad BODY, FRAMESET Закончена загрузка документа
onMouseDown *    Практически все HTML-элементы Нажата кнопка мыши в пределах текущего элемента
onMouseMove *   Практически все HTML-элементы Перемещение курсора мыши в пределах текущего элемента
onMouseOut *    Практически все HTML-элементы Курсор мыши выведен за пределы текущего элемента
onMouseOver *   Практически все HTML-элементы Курсор мыши наведен на текущий элемент
onMouseUp *   Практически все HTML-элементы Отпущена кнопка мыши в пределах текущего элемента
onMove WINDOW Перемещение окна
onReset FORM Сброс данных формы ( щелчок по кнопке
<input type=»reset»> )		 reset()
onResize WINDOW Изменение размеров окна
onSelect INPUT, TEXTAREA Выделение текста в текущем элементе
onSubmit FORM Отправка данных формы ( щелчок по кнопке
<input type=»submit»> )		 submit()
onUnload BODY, FRAMESET Попытка закрытия окна браузера и выгрузки документа

*  Практически все HTML-элементы :  все, за исключением APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

Математические операторы и их использование.

ОПЕРАТОР рекомендуемое использование Стандартное использование
= x = y x = y
+= x += y x = x + y
-= x -= y x = x — y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y

Логические операторы.

Operator Description
== Равно
=== Равные значения/ Равные типоы
!= Не равно
!== Не равные значения/ не равные типы
> Больше чем
< Меньше чем
>= Больше или равно чем
<= Меньше или равно чем

 

 

setTimeout и setInterval

Почти все реализации JavaScript имеют внутренний таймер-планировщик, который позволяет задавать вызов функции через заданный период времени.

setTimeout

Синтаксис:

var timerId = setTimeout(func/code, delay[, arg1, arg2...])

func/codeПараметры:

Функция или строка кода для исполнения.
Строка поддерживается для совместимости, использовать её не рекомендуется.

delay

Задержка в милисекундах, 1000 милисекунд равны 1 секунде.

arg1, arg2…

Аргументы, которые нужно передать функции. Не поддерживаются в IE9-.

Исполнение функции произойдёт спустя время, указанное в параметре delay.

Например, следующий код вызовет alert(‘Привет’) через одну секунду:

function func() {
  alert('Привет');
}
setTimeout(func, 1000);

Если первый аргумент является строкой, то интерпретатор создаёт анонимную функцию из этой строки.

То есть такая запись работает точно так же:

setTimeout("alert('Привет')", 1000);

Использование строк не рекомендуется, так как они могут вызвать проблемы при минимизации кода, и, вообще, сама возможность использовать строку сохраняется лишь для совместимости.

Вместо них используйте анонимные функции:

setTimeout(function() { alert('Привет') }, 1000);

Параметры для функции и контекст

Во всех современных браузерах, с учетом IE10, setTimeout позволяет указать параметры функции.

Пример ниже выведет «Привет, я Вася» везде, кроме IE9-:

 

function sayHi(who) {
  alert("Привет, я " + who);
}
setTimeout(sayHi, 1000, "Вася");

…Однако, в большинстве случаев нам нужна поддержка старого IE, а он не позволяет указывать аргументы. Поэтому, для того, чтобы их передать, оборачивают вызов в анонимную функцию:

function sayHi(who) {
  alert("Привет, я " + who);
}
setTimeout(function() { sayHi('Вася') }, 1000);


Отмена исполнения

Функция setTimeout возвращает идентификатор timerId, который можно использовать для отмены действия.

Синтаксис: clearTimeout(timerId).

В следующем примере мы ставим таймаут, а затем удаляем (передумали). В результате ничего не происходит.

var timerId = setTimeout(function() { alert(1) }, 1000);
clearTimeout(timerId);

Следующий пример при запуске станет выводить сообщение каждые две секунды, пока вы не нажмете на кнопку «Стоп»:setInterval

Метод setInterval имеет синтаксис, аналогичный setTimeout.

var timerId = setInterval(func/code, delay[, arg1, arg2...])

Смысл аргументов — тот же самый. Но, в отличие от setTimeout, он запускает выполнение функции не один раз, а регулярно повторяет её через указанный интервал времени. Остановить исполнение можно вызовом clearInterval(timerId).

<input type="button" onclick="clearInterval(timer)" value="Стоп">
<script>
  var i = 1;
  var timer = setInterval(function() { alert(i++) }, 2000);
</script>