Иллюстрированный самоучитель по Dreamweaver MX
       

Язык JavaScript


Выше автор предупреждал, что не будет давать вам полный курс JavaScript. Эта книга не о JavaScript, а о Macromedia Dreamweaver MX, а все остальное вторично. Если вы хотите побольше узнать о JavaScript, принципах написания программ на этом языке и, вообще, о "классическом" программировании, найдите хорошие книги по этой теме. А мы вернемся к Dreamweaver.

Но, для того чтобы вы поняли, что есть на самом деле Web-сценарии, необходимо провести хотя бы краткий ликбез. И сейчас он будет проведен.

Давайте вернемся к уже знакомому нам 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; }

    На этом краткий курс основ языка JavaScript подошел к концу. Нам осталось рассмотреть только объекты.


    Содержание  Назад  Вперед