Функция как тип данных
Определяют функцию при помощи ключевого слова function:
function f(arg1,arg2,...)
{
/* тело функции */
}
Здесь следует обратить внимание на следующие моменты. Во-первых, function определяет переменную с именем f. Эта переменная имеет тип function:
document.write('Тип переменной f: '+ typeof(f));
// Будет выведено: Тип переменной f: function
Во-вторых, эта переменная, как и любая другая, имеет значение - свой исходный текст:
var i=5;
function f(a,b,c)
{
if (a>b) return c;
}
document.write('Значение переменной i: '+ i.valueOf());
// Будет выведено:
// Значение переменной i: 5
document.write('Значение переменной f:<BR>'+ f.valueOf());
// Будет выведено:
// Значение переменной f:
// function f(a,b,c)
// {
// if (a>b) return c;
// }
Как видим, метод valueOf() применим как к числовой переменной i, так и к переменной f, и возвращает их значение. Более того, значение переменной f можно присвоить другой переменной, тем самым создав "синоним" функции f:
function f(a,b,c)
{
if (a>b) return c;
else return c+8;
}
var g = f;
alert('Значение f(2,3,2): '+ f(2,3,2) );
alert('Значение g(2,3,2): '+ g(2,3,2) );
// Будет выведено:
// Значение f(2,3,2): 10
// Значение g(2,3,2): 10
Этим приемом удобно пользоваться для сокращения длины кода. Например, если нужно много раз вызвать методdocument.write(), то можно ввести переменную: var W = document.write (обратите внимание - без скобок!), а затем вызывать: W('<H1>Лекция</H1>').
Коль скоро функцию можно присвоить переменной, то ее можно передать и в качестве аргумента другой функции.
function kvadrat(a)
{ return a*a; }
function polinom(a,kvadrat)
{ return kvadrat(a)+a+5;}
alert(polinom(3,kvadrat));
// Будет выведено: 17
Функция как объект
У любого типа данных JavaScript существует объектовая "обертка" (wrapper), которая позволяет применять методы типов данных к переменным и литералам, а также получать значения их свойств. Например, длина строки символов определяется свойствомlength. Аналогичная "обертка" есть и у функций - это класс объектов Function.
Например, увидеть значение функции можно не только при помощи метода valueOf(), но и используя метод toString():
function f(x,y)
{
return x-y;
}
document.write(f.toString());
Результат распечатки:
function f(x,y) { return x-y; }
Свойства же функции как объекта доступны программисту только тогда, когда они вызываются внутри этой функции. Наиболее часто используемыми свойствами являются: массив (коллекция) аргументов функции (arguments[]), его длина (length), имя функции, вызвавшей данную функцию (caller), и прототип (prototype). Рассмотрим пример использования списка аргументов функции и его длины:
function my_sort()
{
a = new Array(my_sort.arguments.length);
for(i=0;i<my_sort.arguments.length;i++)
a[i] = my_sort.arguments[i];
return a.sort();
}
b = my_sort(9,5,7,3,2);
document.write(b);
// Будет выдано: 2,3,5,7,9
Чтобы узнать, какая функция вызвала данную функцию, используется свойство caller. Возвращаемое ею значение имеет типfunction. Пример:
function s()
{ document.write(s.caller+"<BR>"); }
function M()
{ s(); return 5; }
function N()
{ s(); return 7; }
M(); N();
Результат исполнения:
function M() { s(); return 5; }
function N() { s(); return 7; }
Упомянем только о конструкторе объекта класса Function:
f = new Function(arg_1,...,arg_n, body)
Здесь f - это объект класса Function (его можно использовать как обычную функцию), arg_1, ..., arg_n - аргументы функции f, а body - строка, задающая тело функции f.
Данный конструктор можно использовать, например, для описания функций, которые назначают или переопределяют методы объектов. Здесь мы вплотную подошли к вопросу конструирования объектов. Дело в том, что переменные внутри функции можно рассматривать в качестве ее свойств, а функции - в качестве методов:
function Rectangle(a,b,c,d)
{
this.x0 = a;
this.y0 = b;
this.x1 = c;
this.y1 = d;
this.area = new Function(
"return Math.abs((this.x1-this.x0)*(this.y1-this.y0))");
}
r = new Rectangle(0,0,30,50);
document.write("Площадь: "+r.area());
// Будет выведено:
// Площадь: 1500
Обратите внимание еще на одну особенность - ключевое слово this. Оно позволяет сослаться на текущий объект, в рамках которого происходит исполнение JavaScript-кода. В данном случае это объект класса Rectangle.
DOM-модель
Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) - объектная модель, используемая для XML/HTML-документов. Согласно DOM-модели, документ является иерархией.
Каждый HTML-тег образует отдельный элемент-узел, каждый фрагмент текста - текстовый элемент, и т.п. Проще говоря, DOM - это представление документа в виде дерева тегов. Это дерево образуется за счет вложенной структуры тегов плюс текстовые фрагменты страницы, каждый из которых образует отдельный узел.
Построим, для начала, дерево DOM для следующего документа.
<html>
<head>
<title>Заголовок</title>
</head>
<body>
Прекрасный документ
</body>
</html>
Самый внешний тег - <html>, поэтому дерево начинает расти от него. Внутри <html> находятся два узла: <head> и <body> - они становятся дочерними узлами для <html>.
Теги образуют узлы-элементы (element node). Текст представлен текстовыми узлами (text node). И то и другое - равноправные узлы дерева DOM.
Рассмотрим чуть более сложный документ.
<!DOCTYPE html>
<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 ©</div>
</body>
</html>
В этом примере у узлов есть атрибуты: style, class, id. Вообще говоря, атрибуты тоже считаются узлами в DOM-модели, родителем которых является элемент DOM, у которого они указаны.
Однако, в веб-программировании в эти дебри обычно не лезут, и считают атрибуты просто свойствами DOM-узла, которые, как мы увидим в дальнейшем, можно устанавливать и менять по желанию программиста.
Зачем, кроме красивых рисунков, нужна иерархическая модель DOM? Очень просто: Каждый DOM-элемент является объектом и предоставляет свойства для манипуляции своим содержимым, для доступа к родителям и потомкам.
Для манипуляций с DOM используется объект document. Используя document, можно получать нужный элемент дерева и менять его содержание.
Например, этот код получает первый элемент с тэгом ol, последовательно удаляет два элемента списка и затем добавляет их в обратном порядке:
var ol = document.getElementsByTagName('ol')[0];
var hiter = ol.removeChild(ol.firstChild);
var kovaren = ol.removeChild(ol.firstChild);
ol.appendChild(kovaren);
ol.appendChild(hiter);