Язык JavaScript
План
Тема: Web-сценарии
1. Понятие web-сценария
2. Язык JavaScript
Основная литература: [1, 5, 6, 12, 13, 20, 23, 32, 35]
Дополнительная литература: [16, 19, 31, 51]
Web-сценарии могут быть применены везде, где не может быть использован "чистый" HTML, т. е. там, где элементы страницы должны вести себя так, как стандартом HTML не предусмотрено.
Возьмем ту же самую анимацию. За очень небольшим исключением (например, нестандартный тег <MARQUEE>, поддерживаемый Internet Explorer), элементы страницы не могут по ней двигаться. Если вам все же нужно, чтобы они двигались, не обойтись без применения Web-сценариев. Зная язык JavaScript, вы с легкостью реализуете нужное поведение элементов, заставите их летать с требуемой скоростью и по желаемой траектории. HTML такое не может.
Очень часто Web-сценарии используются для изменения содержимого Web-страницы или даже для создания нового содержимого в ответ на действия пользователя. В частности, при наведении курсора мыши на гиперссылку рядом с ней может появляться краткое описание, либо изображение-гиперссылка может менять свой вид. (Кстати, такие "горячие" изображения, меняющиеся при наведении на них курсора мыши, мы уже создавали в главе 3 при помощи Dreamweaver. Такие "фокусы" реализуются также с помощью Web-сценариев.) Иногда содержимое Web-страницы корректируется сразу же в процессе ее загрузки Web-обозревателем, что достигается помещением в HTML-код сценариев, исполняющихся при загрузке.
Вообще, фантазия Web-дизайнера, решившего создать интерактивную Web-страницу с использованием Web-сценариев, почти ничем не ограничена. (Ограничения, конечно, существуют, но их очень мало, и касаются они, в основном, доступу к содержимому дисков клиентского компьютера.) В настоящее время существуют даже Web-страницы, содержимое которых может изменяться самим пользователем прямо в окне Web-обозревателя. (Другой вопрос: зачем это нужно?..) На страницах может отображаться, например, текущее время, причем, "часики" действительно будут "тикать". Также Web-сценарии часто используются для правильного размещения на странице свободно позиционируемых элементов. В частности, можно создать свободный элемент, который при любых изменениях размеров окна Web-обозревателя всегда будет находиться в его центре.
С помощью Web-сценариев можно создать принципиально новый интерфейс пользователя для своей страницы. На многих страницах применяется иерархический список, в котором перечислены все разделы и подразделы сайта. Такие страницы напоминают окно Проводника Windows. Часто с помощью свободно позиционируемых элементов и сложных Web-сценариев создают принципиально новые элементы управления для ввода данных, не снившихся даже самой великой и ужасной Windows. Но это уже — удел достаточно опытных программистов.
Ну и, конечно, Web-сценарии применяются для написания настоящих программ, использующих в качестве интерфейса Web-страницы. Известны, например, игры "15", "Лото", различные головоломки и викторины, созданные на основе Web-сценариев и размещенные в Интернете. Часто таким же образом создаются и более серьезные программы, например, утилиты подбора цветов для Web-страниц или даже целые Web-редакторы, конечно, не очень сложные.
Вообще, создание таких вот Web-программ — достаточно новая область деятельности, еще даже толком не развившаяся, но довольно перспективная. В самом деле, такие программы очень просто распространять и сопровождать. Они не требуют создания разработчиком дистрибутивного пакета, иной раз весьма "увесистого", и распространения его каким-либо образом, а потенциальным пользователям не придется его подолгу загружать. Они не требуют установки на компьютере пользователя, а становятся доступны сразу после набора в окне Web-обозревателя нужного адреса. А при создании новой версии такой программы разработчику достаточно будет только обновить на своем сайте соответствующую Web-страничку.
Web-программы имеют только два недостатка. Во-первых, они доступны только после подключения к Интернету. (Хотя, конечно, их можно распространять на дискетах, CD,по электронной почте и другими путями.) Во-вторых, из-за ограничений интерпретатора JavaScript с помощью таких программ невозможно сохранение документов на дисках клиентского компьютера.
Давайте вернемся к уже знакомому нам HTML. Что он собой представляет? Набор тегов, описывающих внешний вид и (отчасти) структуру представления данных, которые будут отображаться в Web-обозревателе. HTML, как вы помните, язык описания данных.
JavaScript же — язык описания алгоритмов обработки этих самых данных. Поэтому он содержит набор инструкций, предписывающих выполнение тех или иных действий над данными. Чтобы облегчить работу программиста, способ написания этих инструкций максимально приближен к обычной математической нотации, слегка "разбавленной" словами обычного английского языка. (Вот еще один повод взяться за английский.)
Такие инструкции, описывающие действия над данными, называются выражениями. Выражения состоят из операторов и операндов; операторы описывают сами действия, а операнды — данные, над которыми будут производиться эти действия. Причем, операндами могут быть как константы (числа, строки, даты, одним словом, неизменяемые значения), так и переменные (специально отведенные ячейки для хранения промежуточных результатов вычислений).
Давайте рассмотрим одно из таких выражений:
b = z / t;
Это выражение делит значение переменной z на значение переменной t и результат помещает в переменную ь. Как вы уже поняли, знак "/" обозначает оператор деления, а знак "=" — оператор присваивания значения какой-либо переменной. Знак ";", помещенный в конце выражения, обозначает, собственно, его конец; встретив этот знак, интерпретатор JavaScript считает выражение законченным.
Вот еще два выражения:
sum = a1 + а2 + а3 - 20; square = х * у;
Первое выражение складывает друг с другом значения переменных a1, a2 и аЗ, после чего вычитает из результата 20 и помещает его в переменную sum.
Второе выражение перемножает значения переменных к и у и помещает результат в переменную square.
Чтобы управлять порядком вычисления выражения, вы можете использовать скобки:
s = (а + b) / (с - d);
В этом выражении сначала будет вычислена сумма а и ь, потом — разность с и а, после чего сумма будет поделена на разность. Если бы мы не использовали скобки, то выражение имело бы вид:
s = a+b/c — d;
При этом сначала было бы вычислено частное от деления ь на с, после чего к нему была бы прибавлена а, а затем из этой суммы вычлось бы d. Попробуйте подставить вместо а, ь, с и d реальные числовые значения и вычислить результаты этих выражений. Вы увидите, что они получатся разными.
В JavaScript можно написать и так:
а = а + 1;
и это выражение будет правильным. Оно предписывает интерпретатору извлечь значение из переменной а, увеличить его на единицу и поместить в ту же переменную. Это выражение можно записать и короче:
а += 1;
или совсем сжато:
Кстати, любая переменная перед тем, как будет использована, должна быть объявлена. Объявление переменных выполняется с помощью специального оператора объявления var:
var a1, a2, а3, х, у
Объявляемые переменные просто перечисляются после этого оператора, после чего их можно использовать в сценарии. Такие переменные называются глобальными, т. к. могут быть использованы где угодно в программе.
Говорилось, что переменные могут содержать какие угодно данные. В самом деле, посмотрите сюда:
а = 10;
s = "Строка символов";
Здесь первой переменной присваивается числовое значение, а второй — строка (строковое значение). (Вообще, Web-сценарии, как правило, чаще обрабатывают текст, а не числа, так что в этом нет ничего необычного.)
В общем, одна переменная всегда содержит одно значение. Если переменной присвоить новое значение, то старое значение пропадет. Но существует другой вид переменных, которые могут содержать несколько значений. Такие переменные называются массивами. Отдельные значения, содержащиеся в массиве, называются его элементами; доступ к элементам массива осуществляется с помощью так называемого индекса.
var arr;
arr[0] = 1;
arr[1] = 2;
arr[5] = arr[0] + arr[1];
Как видите, индекс элемента массива указывается после его имени в квадратных скобках; этим массив и отличается от обычной переменной (скаляра). Сам массив объявляется точно так же, как обычная переменная, и со значениями его элементов можно делать то же самое, что и со значениями обычных переменных. Заметьте, что специально объявлять его как массив не нужно — как только вы при обращении к переменной укажете индекс элемента, интерпретатор JavaScript тут же преобразует переменную в массив.
Для примера был создан одномерный массив. Но бывают и массивы двумерные:
var arr2;
агг2[0] [0] = 0;
агг2[0][1] = 1;
агг2[1] [0] = 2;
агг2[1][1] = 3;
Ключевыми словами называются специально зарезервированные слова, обозначающие некоторые операторы языка программирования. Так, условный оператор if-else состоит из двух ключевых слов. Он позволяет выполнить какое-либо выражение только в том случае, если становится верным какое-либо условие. Если условие верно, выполняется выражение, стоящее после ключевого слова if, а если неверно, — стоящее после ключевого слова else. Говорят, что оператор if-else организует ветвление.
Ниже приведен пример использования этого оператора.
if (x== 1)
f = 2 else
f = 12;
Здесь, если значение переменной х равно единице, переменной f присваивается 2, в противном случае — 12.
Если в какой-либо из частей оператора if-else нужно выполнить несколько выражений, используется так называемое составное выражение.
if (х == 1) {
f = 2;
h = 3; } else {
f = 12;
h = 14; }
Как видите, составное выражение состоит из нескольких простых выражений, помещенных внутрь фигурных скобок. Интерпретатор JavaScript считает их одним выражением.
Существует также "урезанная" форма оператора if-eise, без части else. В этом случае, если условие неверно, никакого кода не выполняется.
if (х == 1) ( f = 2; h = 3; )
Существует также оператор-переключатель switch-case. Этот оператор заменяет множество операторов if-eise.
switch (а) { case 1 :
out = "Единица";
break; case 2 :
out = "Двойка";
break; case 3 :
out = "Тройка";
break; default :
out = "Другое число"; }
Если значение переменной а равно 1, переменной out будет присвоено значение Единица (часть case l). Если значение переменной а равно 2, то переменная out получит значение двойка (часть сазе 2), и т. д. Если же переменная а содержит значение, не перечисленное в списке case, выполняется часть default, и out принимает значение другое число.
Как видите, оператор-переключатель просто выполняет разные фрагменты кода в зависимости от значения переменной, находящейся в скобках после ключевого слова switch. Поэтому он и называется переключателем.
Оператор цикла for позволит вам выполнить какое-либо выражение (простое или составное) нужное количество раз, т. е. организовать цикл со счетчиком. При этом на каждом проходе цикла содержимое переменной-счетчика будет сравниваться с конечным значением, и если оно его превышает, цикл немедленно завершается. В противном случае содержимое счетчика увеличивается или уменьшается на единицу, и выполняется новый проход цикла.
Рассмотрим применение оператора for на примере.
for (i = 1; i < 101; i++) { a = a * i; b = b + i;
}
Первая строка сообщает интерпретатору JavaScript следующее:
- переменная i будет использоваться в качестве счетчика цикла, т. е. в ней будет находиться значение количества уже выполненных проходов цикла;
- начальное значение счетчика — 1 (i =1);
- конечное значение счетчика — 100, т. е. повторять цикл нужно, пока содержимое счетчика i остается меньше 101 (i < 101);
- при каждом проходе цикла нужно будет увеличивать значение счетчика на единицу (i++; оператор ++ указывает увеличить значение какой-либо переменной на единицу, другими словами, инкрементировать, и поместить его в ту же переменную). (Оператор ++ называется оператором инкремента.)
В результате выполнения приведенного выше выражения в переменной а будет находиться факториал от 100, а в переменной b — сумма от 1 до 100.
Кроме цикла со счетчиком, в JavaScript можно организовать и циклы без счетчика, так называемые циклы с условием. Они выполняются до тех пор, пока остается истинным какое-либо условие. Это циклы do-while и while.
Сначала рассмотрим цикл do-while.
do {
а = а * i + 2;
i = ++i; } while (a < 100);
Этот цикл будет выполняться, пока значение переменной а остается меньше 100. Заметьте, что условие проверяется после прохода цикла, поэтому этот цикл выполнится хотя бы один раз, даже если условие будет изначально ложно.
В цикле while условие проверяется перед проходом цикла, поэтому, если условие изначально ложно, цикл не выполнится ни разу.
while (a < 100) { a = a * i + 2; i = ++i; }
Оператор завершения break немедленно завершает цикл, а оператор продолжения continue — продолжает цикл, т. е. прекращает выполнение текущего прохода и начинает выполнение следующего (конечно, если условие завершения цикла это допускает).
while (a < 100) { i = ++i;
if (i > 50) break; if (i < 5) continue; a = a * i + 2; }
Попробуйте сами разобраться, как работает вышеприведенный пример.
Если вам нужно выполнять в нескольких местах программы один и тот же фрагмент кода с разными числовыми значениями, вы можете создать на его основе функцию. Функция — это фрагмент кода, оформленный особым образом, который может быть вызван из различных мест программы и из других функций. Функция может принимать любое количество параметров и возвращать один результат, который может быть использован в дальнейших вычислениях.
Давайте рассмотрим небольшой пример функции, увеличивающей переданное ей значение на два и возвращающей результат.
function valuePlus2 (v) {
var с;
с = v + 2;
return с; }
Автор назвал нашу функцию valuePlus2 и передал ей единственный параметр v (см. в скобках после имени функции). Код, находящийся внутри функции, сначала объявляет локальную переменную с, "видимую" только внутри этой функции (вызвавшая функцию программа не сможет к ней обратиться). Далее этой переменной присваивается сумма значения переданного параметра v и 2. Последний оператор возвращает результат вызвавшей функцию программе (return — оператор возврата значения).
Как можно использовать полученную функцию? Например, так:
h = d + valuePlus2 (r) ;
Здесь мы передаем функции vaiuePlus2 значение г и используем возвращенный результат в выражении. В частности, мы складываем его сам присваиваем результат п.
Кстати, нашу функцию можно было написать значительно короче и оптимальнее. (Да, и здесь оптимизация!)
function valuePlus2(v) { return v + 2; }
Опытные программисты так и пишут. Во-первых, код становится проще и "прозрачнее". Во-вторых, что еще важнее, код становится меньше и быстрее.
Функция может и не принимать параметров:
function someFunc1() { return 2+2; }
Функции могут вызывать друг друга:
function valuePlus3(v) { return valuePlus2(v) + 1; }
Лекция №9 (4 часа)