Интернет Университет информационных технологий www.intuit.ru
мои курсы мои настройки моя корзина помощь
  Лекции
Основы web-технологий
Глава 1.
Введение в HTML-разметку
Глава 2.
Применение каскадных таблиц стилей
Глава 3.
JavaScript
  13.   Назначение и применение JavaScri...
  14.   Программируем свойства окна брау...
  15.   Программируем формы
  16.   Программируем графику
  17.   Программируем гипертекстовые пер...
  18.   Программируем "за кадром"
Глава 4.
Интерфейс Web-приложений
      Экзамен
      Ссылки к курсу

  Общение
однокурсники
форум по курсу
вопрос преподавателю

Основы web-технологий
Глава 3. JavaScript версия для печати: HTML, PDF
Лекция #18: Программируем "за кадром" Страницы: « 1 2 3 4 5 6 7 вопросы »

Функции

Язык программирования не может обойтись без механизма многократного использования кода программы. Такой механизм обеспечивается процедурами или функциями. В JavaScript функция выступает в качестве одного из основных типов данных. Одновременно с этим в JavaScript определен объект Function.

В общем случае любой объект JavaScript определяется через функцию. Для создания объекта используется конструктор, который в свою очередь вводится через Function. Таким образом, с функциями в JavaScript связаны следующие ключевые вопросы:

  • функция — тип данных;
  • функция — объект;
  • конструкторы объектов.

Именно эти вопросы мы и рассмотрим в данном разделе.

Функция — тип данных

Определяют функцию при помощи ключевого слова function:

function f_name(arg1,arg2,...)
{
/* function body */
}

Здесь следует обратить внимание на следующие моменты. Во-первых, function определяет переменную f_name. Эта переменная имеет тип "function":

document.write("Тип переменной f_name:"+typeof(f_name);

Тип переменной f_name:function
Во-вторых, этой переменной присваивается значение:

document.write("Значение i:"+i.valueOf());
document.write("Значение f_name:"+f_name.valueOf());

Значение переменной f_name:10
Значение переменной f_name:function f_name(a) { if(a>=0) return true; else return false; }
В данном случае метод valueOf() применяется как к числовой переменной i, так и к f_name. По этой причине функции можно назначить синоним путем присваивания ее значения другой переменной: function f_name(a)

{
if(a>=0) return true; else return false;
}
document.write("Значение переменной f_name:"+f_name(1)+"");
b = f_name;
document.write("Значение переменной b:"+b(1)+"");
Значение переменной f_name:true
Значение переменной b:true

Очевидно, что если функцию можно присвоить переменной, то ее можно передать и в качестве аргумента другой функции. Все это усиливается при использовании функции eval(), которая позволяет реализовать отложенное исполнение JavaScript-кода. Отложенное исполнение — это возможность изменения программы по ходу ее исполнения. Типичным использованием eval() является сокращение кода за счет генерации однотипных строк:

for(i=0;i<5;i++)
{
eval("document.write('test"+i+"<br>')");
}

Результат исполнения кода:

test0
test1
test2
test3
test4

При непосредственном кодировании пришлось бы написать пять строк кода. Данный подход использовался в разделе "Изменение картинки" для инициирования массивов картинок, имена которых построены по принципу индексации ячеек таблицы.

Функция — объект

У любого типа данных JavaScript существует объектовая "обертка" — Wrapper, которая позволяет применять методы типов данных к переменным и литералам, а также получать значения их свойств. Например, длина строки символов определяется свойством length. Аналогичная "обертка" есть и у функций — объект Function.

Например, увидеть значение функции можно не только при помощи метода valueOf(), но и используя метод toString():

function f_name(x,y)
{
return x-y;
}
document.write(f_name.toString()+"<br>");

Результат распечатки:

function f_name(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];
b = a.sort();
return b;
}
b = my_sort(9,5,7,3,2)
for(i=0;i<b.length;i++)
document.write("b["+i+"]="+b[i]+"<br>");

Результат исполнения:

b[0]=2
b[1]=3
b[2]=5
b[3]=7
b[4]=9

Если функция может быть вызвана из других функций, то в этом случае используется свойство caller:

function slave()
{
document.write(slave.caller+"");
return slave.caller;
}
function master1()
{
slave();
}
function master2()
{
slave();
}
...
master1();
master2();

Результат исполнения двух последних строк:

function master1() { slave(); }
function master2() { slave(); }

Еще одним свойством объекта Function является prototype, но это общее свойство всех объектов, поэтому и обсуждать его мы будем в контексте типа данных Object. Упомянем только о конструкторе объекта Function:

f = new Function(arg_1,...,arg_n, body)

Здесь f — это объект класса Function. Его можно использовать и как обычную функцию. Конструктор используют для получения безымянных функций, которые назначают или переопределяют методы объектов. Здесь мы вплотную подошли к вопросу конструирования объектов. Дело в том, что переменные внутри функции можно рассматривать в качестве ее свойств, а функции – в качестве методов:

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.x0-this.x1)*Math.abs(this.y0-this.y1)");
this.perimeter = new Function("return (Math.abs(this.x0-this.x1)+Math.abs(this.y0-this.y1))*2");
}
c = new Rectangle(0,0,100,100);
document.write(c.area());

Результат исполнения:

10000

Обратите внимание еще на одну особенность — ключевое слово this. Оно позволяет сослаться на текущий объект, в рамках которого происходит исполнение JavaScript-кода. В данном случае это объект c класса Rectangle.

Перейти к следующей странице »
версия для печати: HTML, PDF
Страницы: « 1 2 3 4 5 6 7 вопросы »
  Основные понятия
Типы данных, модель безопасности, прототипы, объекты, функции, процедуры, обмен данными, счетчики.
 
  Информация о лекции
В этой лекции рассматриваются приемы программирвания на JavaScript, невидимые для читателей HTML-страниц. Рассматриваются принципы работы счетчиков посещаемости, работы с механизмом cookie и многое другое.
 
  Информация о главе
Глава 3. JavaScript
Курс посвящен изучению языка программирования JavaScrip. Главное внимание уделяется логике разработки JavaScript-кода и основным принципам его использования на страницах World Wide Web.
 
  Учебники к курсу
Основы web-технологий
Основы web-технологий
Храмцов П.Б., Брик С.А., Русак А.М., Сурин А.И.,
Интернет-университет информационных технологий - ИНТУИТ.ру.
Курс лекций посвящен основам Web-технологий. В его рамках рассматриваются язык гипертекстовой разметки HTML, язык программирования динамического контента JavaScript, спецификация разработки прикладного программного обеспечения CGI и спецификация описания стилей представления информации CSS. Допущено УМО в области прикладной информатики для студентов высших учебных заведений, обучающихся по специальности 351400 "Прикладная информатика".
Dynamic HTML
Айзекс С., BHV-Санкт-Петербург.
Настольная книга Web-мастера: эффективное применение HTML, CSS и JavaScript
Коржинский С.Н., КноРус.
Практические занятия по HTML. Краткий курс
Будилов В.А., Наука и техника.
все книги по курсу »