Для чего,
собственно, нужен JavaScript. JavaScript был разработан совместно компаниями
Sun Microsystems и Netscape. За синтаксическую основу нового языка был взят
язык Java, в свое время разработанный компанией Sun Microsystems. В последнее
время популярность JS очень возросла в результате выхода в свет новейших
браузеров поддерживающих данный язык.
Некоторые
используют Java Апплеты. Да, безусловно, есть очень красивые вещи. Теперь
посмотрите на те сайты, которые предлагают апплеты. Вы можете заметить, что
авторы таких страниц их не используют. Что касается меня, вы не найдете здесь
апплетов. Даже если я случайно попадаю на страницу разрисованную ими,
незамедлительно ухожу с нее. Дело в том, что встречаются апплеты не корректно
написанные. Не буду конкретно называть сайты, но встречаются такие: после
выхода со страницы остаются измененные системные шрифты, просто подвисает
компьютер - вероятно, использован динамический сегмент данных, но не
корректно работает механизм высвобождение памяти, и другие баги. Апплеты
грузятся в память и остаются там до перезагрузки компьютера. А если остались
глобальные переменные, измененные свойства, методы стандартных объектов? Я бы
на месте разработчиков браузеров встроил предупреждение "Осторожно
апплеты!" Это было отступление к тому, чтобы вы не путали совершенно
разные языки: Java и JavaScript.
Определимся,
что из себя представляет язык JavaScript. JS - интерпретатор с элементами
объектно-ориентированной модели. Хотя он и лишен возможностей создания
собственных классов, но он оперирует стандартными объектами. Так как
обработчик находится на компьютере пользователя, JS, будучи интерпретатором,
использует методы и свойства объектов обозревателя на пользовательском
компьютере. Тем, кто привык к структурному программированию, будет несколько
сложно привыкнуть к объектной модели. JS имеет возможность написания пользовательских
функций, имеет ряд операторов, но работает с объектами, их методами,
свойствами и событиями. Также имеется иерархия наследования свойств объектов.
Сложность составляет и то, что JS встраивается в HTML документ и
взаимодействует с ним. В описании к языку JS, я не буду приводить синтаксиса
HTML, это можно найти и в другом месте.
Итак, начнем.
Скрипты могут находиться в любом месте HTML-документа. Однако теги HTML
нельзя помещать внутри JS-программы. JS программа помещается между тегами
<script> ... </script>, исключение составляют обработчики
событий.
Встретив тег
<script>, браузер построчно анализирует содержимое документа до тех
пор, пока не будет достигнут тег </script>. После этого производится
проверка скрипта на наличие ошибок и компилция JS программы в формат,
пригодный для выполнения на компьютере пользователя.
Главная часть
JS программы может быть помещена в контейнер <head>... </head>,
поскольку он считывается при загрузке HTML - документа одним из первых.
Теоретически скрипт можно помещать в любом месте HTML - документа, хотя лучше
это делать перед контейнером <body>... </body>, т.е. в заголовке
документа. Окончательный выбор за вами.
Синтаксис
тега:
<script
language="JavaScript"> [текст программы] </script> Следует
иметь в виду, что слово "JavaScript" записывается с соблюдением
регистра символов.
Выражения
языка JavaScript.
Выражение -
это сочетание переменных, операторов и методов, возвращающее определенное
значение.
Условные
выражения.
Условные выражения
используются для сравнения одних переменных с другими, а также с константами
или значениями, возвращаемыми различными выражениями. В языке JS есть
оператор сравнения ?, имеющий синтаксис:
(условное
выражение) ? операторы_1 : операторы_2
Если условное
выражение истинно - выполнются операторы_1, в противном случае операторы_2.
Можно также присваивать значения переменным. Например, оператор:
type_time =
(hour >= 12) ? "PM" : "AM" присваивает строковое
значение "PM" переменной type_time, если значение переменной hour
больше или равно 12; в противном случае присваивается "AM".
Оператор ? в действительности является сокращенным вариантом оператора
if . . . else. Предыдущий пример может быть записан так:
if (hour >=
12)
type_time="PM";
else
type_time="AM";
Операции
присваивания
В языке JS
имеется несколько вариантов присваивания:
|
=
|
Прямое присваивание значения левому операнду
|
|
+=
|
Складывает значения левого и правого операндов и присваивает
результат левому операнду
|
|
+
|
Складывает значения левого и правого операндов и присваивает
результат левому операнду
|
|
++
|
Увеличивает значение левого операнда (правый может
отсутствовать)
|
|
-=
|
Вычитает значения левого и правого операндов и присваивает
результат левому операнду
|
|
-
|
Вычитает значения левого и правого операндов и присваивает
результат левому операнду
|
|
--
|
Уменьшает значение левого операнда (правый может
отсутствовать)
|
|
*
|
Умножает значения левого и правого операндов и присваивает
результат левому операнду
|
|
*=
|
Умножает значения левого и правого операндов и присваивает
результат левому операнду
|
|
/
|
Делит значения левого на правого операндов и присваивает
результат левому операнду
|
|
/=
|
Делит значения левого на правого операндов и присваивает
результат левому операнду
|
Так, например,
можно записать:
nval *=10;
т.е. переменна nval увеличивает значение в 10 раз.
вместо:
nval = nval * 10;
Операции
сравнения:
|
==
|
Равенство (равно)
|
|
!=
|
Не равно
|
|
!
|
Логическое отрицание
|
|
>=
|
Больше или равно
|
|
<=
|
Меньше или равно
|
|
>
|
Больше
|
|
<
|
Меньше (по возможности желательно воздержаться от применения
этого типа)
|
От выражений,
имеющих знак "<" следует отказываться по возможности, так, как
данный символ может иметь и другое значение в HTML-документах. Во избежание
подобных казусов, когда подобное выражение может послужить случайным
открытием тега HTML:
if mvar <h
. . . . . .bgcolor- может интерпретироваться как начало заголовка HTML. Теги
HTML в JS программах недопустимы.
Логические операции Для обозначения логической операции И в языке JS
используют два символа амперсанта ( && ), а для обозначения
логической операции ИЛИ - два символа прямой черты ( || ). Эти операции
применимы только к булевым значеним. Например:
bvar1 = true;
bvar2 = false;
bvar3 = true;
можно записать
выражение:
bvar1 || bvar2
которое возвратит значение true, так, как для данного выражения достаточно
того, чтобы значение одного из операндов было true. А вот выражение:
bvar1 && bvar2
возвратит соответственно false так, как отрабатывается операция логического
И.
Можно
записывать и более сложные выражения:
if ((bvar1
&& bvar2) || bvar3) {
function1();
}
else {
function2();
}
следует понимать как: "Активизировать функцию function1(), если обе
переменные bvar1 и bvar2 содержат значения true, или хотя бы bvar3 содержит
true, иначе вызвать функцию function2 " Для данных значений будет
активизирована функция function1(), - bvar3 содержит значение true.
Базовые
операторы зыка JavaScript
Программы на
языке JS обычно состоят из программных блоков или единичных операторов.
Программные блоки - это группы операторов, которые заключаются в фигурные
скобки ({ и }). Каждый оператор, если он занимает единственную строку, имеет
разграничивающую точку с запятой (;), обозначающую окончание оператора.
Каждый оператор имеет собственный синтаксис. Синтаксис оператора - это набор
правил, определяющих обязательные и допустимые для использования в данном
операторе значения. Значения, присутствие которых является необязательным,
при описании синтаксиса принято заключать в квадратные скобки, например
[value]. При несоблюдении правил синтаксиса произойдет ошибка компиляции.
Операторы
комментариев и примечаний
Синтаксис:
// Текст
комментариев
/* Текст
комментариев
*/
Соответственно
первый комментарий может иметь только одну строку, второй несколько.
Комментарии нужны исключительно только для пояснений или для временного
исключения некоторых фрагментов программы во время отладки.
Операторы
циклов
В языке JS
имеются операторы для выполнения итераций т.е. повторения ряда операторов.
Цикл For
Синтаксис:
for
([инициализация начального значения;] [условие;] [механизм обновления
счетчика, шаг]) {
программный блок
}
Оператор For
позволяет многократно выполнять операторы в JS-программе. Оператор For может
быть использован для выполнения одного или нескольких операторов. Фигурные
скобки можно опустить, если тело цикла содержит только один оператор. Все
параметры оператора For являются необязательными и используются для
управления процессом выполнения цикла. При применении всех параметров каждую
часть нужно отделять точкой с запятой (;).
Пример вывода в окне браузера горизонтальных линий, причем каждая длиннее
предыдущей:
<html>
<head>
<script language ="JavaScript">
<!--
function testloop() {
var String1 = '<hr align="center" width="' ;
document.open();
for (var size = 5; size <= 50; size+=5)
document.writeln (String1+ size+'%">');
document.close();
}
//-->
</script>
</head>
<body>
<form>
<input type="button"
value="Test the loop"
onClick="testloop()">
</form>
</body>
</html>
В приведенном
примере программа выводит в документ ряд горизонтальных линеек - HTML тегов
(<HR>), - размер которых увеличивается с шагом 5 (size += 5) от 5% до
100% ширины рабочей области окна браузера. Всего образуется 20 итераций.
Переменная String1 хранит строку, содержащую HTML-тег. В цикле к этой строке
добавляется новое значение ширины, записанное в переменной size. Когда
значение этой переменной достигает 100, цикл завершается. Фигурные скобки в
данном примере не нужны, поскольку тело цикла содержит только один оператор.
(Здесь и далее оговоримся, что исполняемые выражения встречающиеся внутри
операторов влияющих на порядок выполнения программы, например циклов: вызовы
функций, методы, обработчики событий и т.п. условимся называть операторами).
HTML-документ содержит кнопку, которая активизирует функцию testloop().
Цикл while
Синтаксис:
while (условие) {
программный блок
}
При помощи
оператора while можно выполнять один или несколько операторов до тех пор,
пока не будет удовлетворено условие. Если в теле цикла выполняется несколько
операторов, их необходимо заключить в фигурные скобки.
Попробуем
привести пример программы, которая использует цикл while. Например нужно
вывести таблицу умножения:
<html>
<head>
<script language ="JavaScript">
function ftable(inum) {
var iloop = 1;
document.writeln ("ТАБЛИЦА УМНОЖЕНИЯ ДЛЯ:
<b>" + inum + "</b><hr><pre>");
/* заметьте, что в параметрах функции writeln применены теги HTML - это
допустимо.
Теги HTML в
тексте программы на JS недопустимы.
Заголовок написан прописными буквами потому, что в тексте встречается буква
"я"
Некоторые браузеры, а точнее NN выдают ошибку сценария встретив такую
строчную букву.
*/
while (iloop <= 10) {
document.writeln(iloop + " x "+ inum + " = " +
(iloop*inum));
iloop ++;
}
document.writeln("</pre>");
}
ftable(prompt ("Введите число: ", 10));
</script>
</head>
</html>
Таблица
создается в функции ftable(). Цикл while выполняется 10 раз. Таблица
выводится при помощи стандартной функции языка JS writeln(). Метод prompt()
обеспечивает ввод данных с клавиатуры. В данном примере вводится число для
вычисления таблицы умножения от 1 до 10.
Данный пример можно было также написать и другим
способом, используя цикл for:
for (var iloop=1; iloop <= 10; iloop ++) {
. . . . . . .
}
Выход из
цикла - оператор break
Синтаксис:
break
Оператор break
используется для выхода из какого-либо цикла, например из цикла for или
while. Выполнение цикла прекращается в той точке, в которой размещен этот
оператор, а управление передается следующему оператору, находящемуся
непосредственно после цикла. Рассмотрим следующую программу:
<html>
<script language ="JavaScript">
function btest() {
var index = 1;
while (index <= 10) {
if (index = = 6)
break;
index ++;
}
//После отработки оператора break управление переходит сюда.
}
btest();
</script>
</html>
В этом примере
переменной index присваивается значение 1, а цикл while должен выполняться до
тех пор, пока значение переменной index меньше либо равно 10-ти (index <=
10). Однако оператор if проверяет выполнение условия index = = 6. Если это
условие выполняется, то цикл while завершается с помощью оператора break. В
результате цикл while будет всегда завершаться после первых шести итераций, а
значение переменной index никогда не достигнет 10-ти.
Продолжение
цикла - оператор continue
Синтаксис:
continue;
Оператор
continue используется для прерывания выполнения блока операторов, которые
составляют тело цикла и продолжения цикла в следующей итерации. В отличие от
оператора break, оператор continue не останавливает выполнение цикла, а
наоборот запускает новую итерацию. Если в цикле while идет просто запуск
новой итерации, то в циклах for запускает с обновленным шагом.
Определение
функции
Синтаксис:
function functionname (arg, . . .) {
блок операторов
}
Функция - это
блок из одного или нескольких операторов. Блок выполняет определенные
действия, а затем, возможно, возвращает значение. В языке JS процедуры -
подпрограммы не возвращающие значений, не различаются. Все подпрограммы
описываются функциями, а если в функцию или из нее не передаются параметры -
то после имени функции ставятся круглые скобки без параметров. Если функция
имеет несколько аргументов, они отделяются запятой. Нужно также помнить, что
в языке JS внутри одной функции не может существовать другой функции.
Фигурные скобки определяют тело функции. Функция не может быть выполнена до
тех пор, пока не будет явного обращения к ней.
Если необходимо, чтобы функция возвращала определенное
значение, следует использовать необязательный оператор return, при этом
указав в нем выражение, значение которого требуется возвратить.
Возврат
значения функциями - оператор return
Синтаксис:
return (value);
return value;
Оператор
return завершает выполнение функции и возвращает значение заданного
выражения. Скобки в этом операторе можно не использовать. Оператор return может
отсутствовать в функции, если функция не возвращает значение.
Оператор return обычно используется для
возврата одного значения, однако его можно применять для возврата массива:
function
retarray() {
var sarray = new Object();
sarray[1] = "Java";
sarray[2] = "Script";
return (sarray);
}
Обращение к
аргументам функции при помощи массива argunents[] (не поддерживается в старых
версиях браузеров)
В этом массиве
хранится список аргументов, передаваемых текущей функции. Так, первый элемент
массива argunents[0] содержит первый аргуменнт функции, argunents[1] - второй
и т.д. Общее количество аргументов хранится в свойстве arguments.length.
Небольшой пример, который выводит на экран все аргументы, передаваемые
функции:
function
showargs() {
arglist = "";
for (var n=0; n <= arguments.length; n++) {
arglist += n +"." +
arguments[n] + "\n";
}
alert(arglist);
}
Приведем
пример, включающий функцию showargs().
Обратите внимание, что функция вызывается всего с двумя аргументами, хотя в
описании функции задано три. В этом случае последний аргумент определяется
как значение null. В функции showargs() создается строка аргументов, которая
затем выводится на экран с помощью метода alert().
<html>
<script language ="JavaScript">
<!--
function showargs(a, b, c) {
arglist = "";
for (var n=0; n <= arguments.length; n++) {
arglist += n +"." + arguments[n] +
"\n";
}
alert(arglist);
}
showargs("java","script")
//-->
</script>
</html>
Условные
операторы - if . . . else
Синтаксис:
if (condition); {
Программный блок1
} [ else { программный блок2 }]
Оператор
if . . . else - это условный оператор, который обеспечивает выполнение
одного или нескольких операторов, в зависимости от того, удовлетворяются ли
условия. Часть condition оператора if является выражением, при
истинности которого выполняются операторы языка в первом программном блоке.
Программный блок должен быть заключен в фигурные скобки, однако если
используется только один оператор, можно скобки не ставить. Необязательная
часть else обеспечивает выполнение операторов второго блока, в случае,
если условие condition оператора if является ложным. Операторы if
можно вкладывать друг в друга. Приведем пример. Ну например будем менять цвет
фона в зависимости от системного времени: первая половина часа пусть будет
синим, вторая - черным:
<html>
<head>
<script language ="JavaScript">
<!--
today = new date();
minutes = today.getMinutes();
if (minutes >=0 && minutes <= 30)
document.write("<body text=white bgcolor=blue>
Это написано белым на синем");
else
document.write("<body
text=red bgcolor=black> Это написано красным на черном");
//-->
</script>
</body>
</html>
Оператор ?
Синтаксис:
(expression) ? trueStatements ? falseStatements; {
где expression - выражение на языке JS, результат выполнения которого равен
либо true (истина), либо false(ложь). Вместо trueStatements и falseStatements
подставляются один или несколько операторов JS, которые выполняются в
зависимости от результата вычисления выражения expression. Операторы
trueStatements выполняются, если выражение истинно, а falseStatements - если
оно ложно. Оператор ? можно рассматривать как сокращенный вариант
записи оператора if . . . else. Я упоминаю его еще раз с тем, что он работает
несколько быстрее оператора if. В приведенном ниже примере будем менять цвет
фона в зависимости от значения секунд в текущем системном времени:
<html>
<head>
<script language ="JavaScript">
<!--
var today = new date();
var secs = today.getSeconds();
(secs >=0 && secs <= 30) ?
document.write("<body text=white bgcolor=blue>
Это написано белым на синем") :
document.write("<body text=red bgcolor=black>
Это написано красным на черном");
//-->
</script>
</body>
</html>
Вложенные
операторы ?
Для
проверки нескольких условий операторы ? можо вкладывать друг в друга.
В качестве примера рассмотрим программу, в которой проверять будем больше
значений. Например составим программу, которая будет проверять значение
секунд, если в интервале от 0 до 30, - цвет фона делаем голубым. Когда
значение больше 30-ти, программа проверяет, в каком интервале находится
значение секунд - от 31 до 50 или нет. Если результат будет истинным, цвет
фона изменится на черный, в противном случае фон становится бежевым:
<html>
<head>
<script language ="JavaScript">
<!--
var today = new date();
var secs = today.getSeconds();
(secs >=0 && secs <= 30) ?
document.write("<body text=white bgcolor=blue>
Это написано белым на синем") :
(secs >=31 && secs <= 50)
?
document.write("<body text=red bgcolor=black>
Это написано красным на черном"):
document.write("<body text=red bgcolor=black>
Это написано красным на черном");
//-->
</script>
</body>
</html>
Создание переменных
Переменные
создаются либо при помощи оператора var, либо при непосредственном присвоении
значений с помощью оператора присваивания (=). Оператор var
Синтаксис:
var variablename [= value | expression];
Оператор
var создает новую переменную с именем variablename. Область действия
этой переменной будет либо локальной, либо глобальной в зависимости от того,
где создана переменная. Фактически при создании переменной оператор var
можно опустить, однако в этом случае в правой части оператора присваивания
должно быть указанно значение. Переменная, созданная внутри функции будет
недоступна за пределами функции, то есть переменная будет локальной.
Обращение к
текущему объекту - оператор this
Синтаксис:
this[.property]
Оператор
this является не столько оператором, сколько внутренним свойством
языка JavaScript. Значение this представляет собой текущий объект,
имеющий стандартные свойства, такие как name, length и value. Оператор this
нельзя использовать вне области действия функции или вызова функции. Когда
аргумент property опущен, с помощью оператора this передается текущий
объект. Однако при обращении к объекту, как правило, нужно указать его определенное
свойство.
Оператор this применяется для "устранения
неоднозначности" объекта с помощью привязки его в область действия
текущего объекта, а также для того, чтобы сделать программу более компактной.
Например, вы можете вызывать JS-функцию при
обработке события OnChange, связанного с изменением содержимого поля ввода,
используя оператор this для передачи текущего значения объекта:
<html>
<head>
<script language ="JavaScript">
<!--
function sendData (arg) {
alert( arg.name + "меняем содержимое поля ввода.");
}
//-->
</script>
</head>
<body>
<form>
<table>
<tr>
<td> Name: </td>
<td><input name = "persname" type="text" >
</td>
</tr>
<tr>
<td> E-mail: </td>
<td><input name = "email" type="text" >
</td>
</tr>
</table>
</form>
</body>
</html>
Когда
пользователь изменяет содержимое поля ввода с именем persname, вызывается
функция sendData() с аргументом this. Значением this в данном
случае является поле ввода, определенное в теге <input>. Для того чтобы
извлечь в программе какое-либо зачение, связанное с этим объектом, необходимо
указать соответствующее свойство. В приведенном примере указано свойство
name. Конечно, можно было бы сразу передать в функцию аргумент this.name.
Чтобы увидеть содержимое текстового поля, следует использовать свойство this.value.
Если же не использовать оператор this, функцию sendData() необходимо
изменить следующим образом:
function
sendData (arg) {
alert (document.forms[0].persname.name + "меняем содержимое поля
ввода.");
}
Теперь
функция обращается к текущему докуменнту, ссылаясь на поле ввода с именем
persname. В этом случае она выглядит несколько сложнее, поскольку для
обращения к полю ввода приходится указывать полную иерархию объектов. Если же
необходимо обратиться не к текущему документу, а к определенному окну, запись
иерархии объектов станет еще сложнее.
Ниже приведен другой пример, использующий свойство
form, которое относится к текущему объекту form, чтобы вывести на экран все
теги, описывающие элементы этой формы:
<html>
<head>
<script language ="JavaScript">
<!--
function seeElem (f) {
var elemlist = "";
for (var num=0; num < f.elements.length; num++) {
elemlist += num + ". " + f.elements[num] +
"\n";
}
alert(elemlist);
}
//-->
</script>
</head>
<body>
<form>
<table>
<tr>
<td> Name: </td>
<td><input name = "persname" type="text" >
</td>
</tr>
<tr>
<td> E-mail: </td>
<td><input name = "email" type="text" >
</td>
</tr>
</table>
<input type = "button"
value = "Посмотрим теги элементов"
onClick="seeElem(this.form)">
</form>
</body>
</html>
Приведенная
программа организует цикл, в котором просматриваются все элементы массива
elements. В этом цикле каждый элемент формы добавляется к результирующей
строке, которая затем форматируется и выводится на экран при помощи окна
alert(). Обратите внимание, что в функцию seeAlert() передается целый объект
form.
Задание
текущего объекта - оператор with
Синтаксис:
with (objname); {
statements
}
Оператор with делает объект, обозначенный как
objname, текущим объектом для операторов в программном блоке statements.
Удобство использования этого оператора заключается в том, что такая запись
позволяет сократить объем текста программы. (Это же ведь важно для
web-приложений) Ниже показано, как оператор with применяется к
встроенному объекту Math языка JS.
with (Math) {
document.writeln(PI);
}
Такая
запись позволяет избежать использования префикса Math при обращении к
константам данного объекта. Рассмотрим пример, как можно использовать
оператор with применительно к объекту document:
with
(parent.frames [1].document) {
writeln("Пишем сюда текст");
write("<hr>");
}
В
этом случае оператор with избавляет нас от необходимости указывать
перед методами writeln() и write() документ, к которому относятся вызовы этих
методов. В приведенном примере используется фреймосодержащий документ.
Вот на этом, пожалуй, закончим рассмотрение базовых операторов, выражений и,
наконец, первое знакомство с языком JavaScript. В Данной статье были
использованы объекты, методы, свойства и обработчики событий, которые могут
вам пока непонятны. Дело в том, что если вы имели дело с
объектно-ориентированной моделью программирования, то вас не должны смущать
эти понятия. Но вот если вам не приходилось иметь дело с ООП
(объектно-ориентированное программирование. Не следует путать с Организацией
освобождения Палестины) некоторые моменты могут ввести вас в заблуждение. В
следующих главах будут более подробно описаны практически все, существующие в
языке JavaScript объекты, методы, свойства объектов и обработка событий. А
также затрону тему объектной модели языка.
| 