Язык JavaScript

Часть1
Общие сведения, выражения, операторы.

Общие сведения

Для чего, собственно, нужен JavaScript. JavaScript был разработан совместно компаниями Sun Microsystems и Netscape. За синтаксическую основу нового языка был взят язык Java, в свое время разработанный компанией Sun Microsystems. В последнее время популярность JS очень возросла в результате выхода в свет новейших браузеров поддерживающих данный язык. Некоторые используют Java Апплеты. Да, безусловно, есть очень красивые вещи. Теперь посмотрите на те сайты, которые предлагают апплеты. Вы можете заметить, что авторы таких страниц их не используют. Что касается меня, вы не найдете здесь апплетов. Даже если я случайно попадаю на страницу разрисованную ими, незамедлительно ухожу с нее. Дело в том, что встречаются апплеты не корректно написанные. Не буду конкретно называть сайты, но встречаются такие: после выхода со страницы остаются измененные системные шрифты, просто подвисает компьютер - вероятно, использован динамический сегмент данных, но не корректно работает механизм высвобождение памяти, и другие баги. Апплеты грузятся в память и остаются там до перезагрузки компьютера. А если остались глобальные переменные, измененные свойства, методы стандартных объектов? Я бы на месте разработчиков браузеров встроил предупреждение "Осторожно апплеты!" Это было отступление к тому, чтобы вы не путали совершенно разные языки: Java и JavaScript.

Определимся, что из себя представляет язык JavaScript. JS - интерпретатор с элементами объектно-ориентированной модели. Хотя он и лишен возможностей создания собственных классов, но он оперирует стандартными объектами. Так как обработчик находится на компьютере пользователя, JS, будучи интерпретатором, использует методы и свойства объектов обозревателя на пользовательском компьютере. Тем, кто привык к структурному программированию, будет несколько сложно привыкнуть к объектной модели. JS имеет возможность написания пользовательских функций, имеет ряд операторов, но работает с объектами, их методами, свойствами и событиями. Также имеется иерархия наследования свойств объектов. Сложность составляет и то, что JS встраивается в HTML документ и взаимодействует с ним.

Итак, начнем:
Скрипты могут находиться в любом месте HTML-документа. Однако теги HTML нельзя помещать внутри JS-программы. JS программа помещается между тегами <script>, исключение составляют обработчики событий. Встретив тег <script>, браузер построчно анализирует содержимое документа до тех пор, пока не будет достигнут тег . После этого производится проверка скрипта на наличие ошибок и компилция JS программы в формат, пригодный для выполнения на компьютере пользователя. Главная часть JS программы может быть помещена в контейнер <head> , поскольку он считывается при загрузке HTML -документа одним из первых. Теоретически скрипт можно помещать в любом месте HTML -документа, хотя лучше это делать перед контейнером <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 . . . . . . - может интерпретироваться как начало заголовка HTML. Теги HTML в JS программах недопустимы.

Часть2

Логические операции

Для обозначения логической операции И в языке 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" ;
   document.open();
for (var size = 5; size <= 100; size+=5)<BR>    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-документ содержит кнопку, которая активизирует функцию test

Цикл 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("");
}
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, при этом указав в нем выражение, значение которого требуется возвратить.

Часть3

Возврат значения функциями - оператор return

Синтаксис:
return (value);
return value;

Оператор return завершает выполнение функции и возвращает значение заданного выражения. Скобки в этом операторе можно не использовать. Оператор return может отсутствовать в функции, если функция не возвращает значение.
Оператор return обычно используется для возврата одного значения, однако его можно применять для возврата массива:

function retarray() {
var sarray = new Object();
sarray[1] = "Java";
sarray[2] = "Script";
return (sarray);
}

Обращение к аргументам функции при помощи массива argunents[ ]

В этом массиве хранится список аргументов, передаваемых текущей функции. Так, первый элемент массива arguments[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">

</script>
</html>
Просмотр

Условные операторы - if . . . else

Синтаксис:
if (condition); {
  Программный блок1
} [ else { программный блок2 }]

    Оператор if . . . else - это условный оператор, который обеспечивает выполнение одного или нескольких операторов, в зависимости от того, удовлетворяются ли условия. Часть condition оператора if является выражением, при истинности которого выполняются операторы языка в первом программном блоке. Программный блок должен быть заключен в фигурные скобки, однако если используется только один оператор, можно скобки не ставить. Необязательная часть else обеспечивает выполнение операторов второго блока, в случае, если условие condition оператора if является ложным. Операторы if можно вкладывать друг в друга. Приведем пример. Ну например будем менять цвет фона в зависимости от системного времени: первая половина часа пусть будет синим, вторая - черным:

<html>
<head>
<script language ="JavaScript">

</script>
</body>
</html>

Просмотр

оператор ?

Синтаксис:
(expression) ? trueStatements ? falseStatements; {

где expression - выражение на языке JS, результат выполнения которого равен либо true (истина), либо false(ложь). Вместо trueStatements и falseStatements подставляются один или несколько операторов JS, которые выполняются в зависимости от результата вычисления выражения expression. Операторы trueStatements выполняются, если выражение истинно, а falseStatements - если оно ложно. Оператор ? можно рассматривать как сокращенный вариант записи оператора if . . . else. Я упоминаю его еще раз с тем, что он работает несколько быстрее оператора if. В приведенном ниже примере будем менять цвет фона в зависимости от значения секунд в текущем системном времени:

<html>
<head>
<script language ="JavaScript">

</script>
</body>
</html>

Вложенные операторы ?

Для проверки нескольких условий операторы ? можо вкладывать друг в друга. В качестве примера рассмотрим программу, в которой проверять будем больше значений. Например составим программу, которая будет проверять значение секунд, если в интервале от 0 до 30, - цвет фона делаем голубым. Когда значение больше 30-ти, программа проверяет, в каком интервале находится значение секунд - от 31 до 60 или нет. Если результат будет истинным, цвет фона изменится на черный, в противном случае фон становится зеленым:

<html>
<head>
<script language ="JavaScript">

</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">

</script>
</head>
<body>
<form>
<table>
<tr>
<td> Name: </td>
<td><input name = "persname" type="text" value="Arg" onchange="sendData(this.value)"/td>
</tr>
<ttr>
<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">

</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("&lthr>");
}

    В этом случае оператор with избавляет нас от необходимости указывать перед методами writeln() и write() документ, к которому относятся вызовы этих методов. В приведенном примере используется фреймосодержащий документ.

Часть4
Объектная модель языка. Объекты браузера.

Объектная модель языка JavaScript

При создании HTML-документов и JavaScript-программ необходимо учитывать структуру объектов. Все объекты можно разделить на три группы:

Объекты браузера
Внутренние, или встроенные, объекты языка JavaScript
Объекты, связанные с тегами языка HTML

Объектами браузера являются зависимые от браузера объекты: window (окно), location (местоположение) и history (история). Внутренние объекты включают простые типы данных, такие как строки (string), математические константы (math), дата (date) и другие.
Объекты, связанные с тегами HTML, соответствуют тегам, которые формируют текущий документ. Они включают такие элементы как гиперсвязи и формы.

Методы объектов

С объектами связаны методы, которые позволяют управлять этими объектами, а также в некоторых случаях менять их содержимое. Кроме того в языке JavaScript имеется возможность создавать свои методы объектов. При использовании метода объекта, нужно перед именем метода указать имя объекта к которому он принадлежит. Например, правильным обращением к методу document является выражение document.write(), а просто выражение write() приведет к ошибке.

Свойства объектов языка JavaScript

В объектно-ориентированном программировании используется также термин свойство. Свойство - это именованное значение, которое принадлежит объекту. Все стандартные объекты языка JS имеют свойства. Например, в прошлой главе мы использовали в одном из примеров свойство bgColor объекта document. данное свойство соответствует атрибуту bgColor тега <body> - цвет фона документа. Для обращения к свойству необходимо указать имена объекта и свойства, разделив их точкой. Каждый объект имеет собственный набор свойств. Набор свойств нового объекта можно задать при определении объекта. Однако, некоторые свойства объктов существуют только для чтения, и вы не можете их менять. В таких случаях можно получить только значения этих свойств. Как показывает практика, такие свойства изменять обычно без надобности и проблем в связи с этим не возникает.

Объекты браузеров

Браузеры поддерживают объекты различных типов. HTML-объектами являются объекты, которые соответствуют тегам языка HTML. К ним относятся метки, гиперсвязи и элементы формы - текстовые поля, кнопки, списки и др. Объекты верхнего уровня, или объекты браузера, - это объекты, поддерживаемые в среде браузера: window, location, history, document, navigator. Объекты, перечисленные в таблице, создаются автоматически при загрузке документа в браузер.

Имя объекта	Описание
window	Объект верхнего уровня в иерархии объектов языка JavaScript. Фреймосодержащий документ также имеет объект window.
document	Содержит свойства, которые относятся к текущему HTML-документу, например имя каждой формы, цвета, используемые для отображения документа, и др. В языке JS большинству HTML-тегов соответствуют свойства объекта document.
location	Содержит свойства, описывающие местонахождение текущего документа, например адрес URL.
navigator	Содержит информацию о версии браузера. Свойства данного объекта обычно только для чтения. Например свойство: navigator.appname содержит строковое значение имени браузера.
history	Содержит информацию обо всех ресурсах, к которым пользователь обращался во время текущего сеанса работы с браузером.

Рассмотрим более подробно каждый объект.

Объект window

Объект window обычно соответствует главному окну браузера и является объектом верхнего уровня в языке JavaScript, поскольку документы, собственно, и открываются в окне. В фреймосодержащих документах, объект window может не всегда соответствовать главному окну программы. Поэтому для обращения к конкретному окну следует использовать свойство frames объекта parent. Фреймы - это те же окна. Чтобы обратиться к ним в языке JavaScript, можно использовать массив frames. Например, выражение parent.frames[0] обращается к первому фрейму окна браузера. Предполагается, что такое окно существует, но при помощи метода window.open() можно открывать и другие окна и обращаться к ним посредством свойств объекта window.
Для обращенния к методам и свойствам объекта window используют следующие варианты записи:

window.propertyName
window.methodName (parameters)
self.propertyName
self.methodName (parameters)
top.propertyName
top.methodName (parameters)
parent.propertyName
parent.methodName (parameters)
windowVar.propertyName
windowVar.methodName (parameters)
propertyName
methodName (parameters)

Здесь windowVar - экземпляр объекта window. Имя self - синоним, используемый для обращения к текущему окну во фреймосодержащем документе, тогда как имя top применяется для обращения к главному окну браузера. Для этой цели можно применить и объект parent. Однако следует иметь в виду, что значением parent является ссылка на родительское окно, когда top - ссылка на окно верхнего уровня, которое содержит либо данный фрейм, либо фрейм содержащий вложенный фрейм. Обращение напрямую к методам и свойствам возможно при использовании оператора with.

Свойства

Объект window имеет свойства:

defaultStatus - текстовое сообщение, которое по умолчанию выводится в строке состояния (status bar) окна браузера.
frames - массив фреймов во фреймосодержащем документе.
length - количество фреймов во фреймосодержащем документе.
name - заголовок окна, который задается с помощью аргумента windowName метода open().
parent - синоним, используемый для обращения к родительскому окну.
self - синоним, используемый для обращения к текущему окну.
status - текст временного сообщения в строке состояния окна браузера.
top - синоним, используемый для обращения к главному окну браузера.
window - синоним, используемый для обращения к текущему окну.

Методы

Метод alert() применяется для того, чтобы вывести на экран текстовое сообщение. Для открытия окна используется метод open(), а для закрытия - метод close(). С помощью метода confirm() происходит вывод на экран окна сообщения с кнопками Yes и No, и возвращает булевое значение true или false, в зависимости от нажатой кнопки. Посредством метода prompt() на экран выводится диалоговое окно с полем ввода. Метод setTimeout() устанавливает в текущем окне обработку событий, связанных с таймером, а метод clearTimeout() отменяет обработку таких событий.

Обработчики событий

Объект window не обрабатывает события до тех пор, пока в окно не загружен документ. Однако можно обрабатывать события, связанные с загрузкой и выгрузкой документов. Обработчики таких событий задаются как значения атрибутов onLoad и onUnload, определяемых в теге <body>. Эти же атрибуты могут быть определены в тегах <frameset> фреймосодержащих документов.

пример:
    Мы хотим загрузить, например, эту страницу в окно размером в 640х480 пикселов:
myWin = open ("ljs1.htm",
         "myWin",
         "width=640, height=480");
    Закрыть это окно можно из любого другого окна используя:
myWin.close();

Просмотр

Часть5

Объект document

    Объект document соответствует всему гипертекстовому документ, вернее, той его части, которая заключена в контейнер <body> . . . </body>. Документы отображаются в окнах браузера, поэтому каждый из них связан с определенным окном. Все HTML-объекты являются свойствами объекта document, поэтому они находятся в самом документе. Например, в языке JS к первой форме документа можно обратиться, используя выражение:
document.forms[0]
в то время как к первой форме во втором фрейме следует обращаться выражением:
parent.frames[1].document.forms[0]

    Объект document удобно использовать для динамического создания HTML-документов. Для этого применяется HTML-контейнер <body> . . . </body>. Хотя в этом контейнере можно установить множество различных свойств документа, всеже имеются такие свойства, значения которых нельзя установить с помощбю этих тегов. Перейдем же к свойствам и методам объекта document.
    Для обращения к свойствам и методам объекта document применяется следующий синтаксис:
document.propertyName
document.methodName (parameters)

Свойства

Объект document имеет достаточно много свойств, каждое из которых соответствует определенному HTML-тегу в текущем документе:

alinkColor- соответствует атрибуту alink тега <body>
anchors- массив, который соответствует всем меткам в документе;
bgColor - соответствует атрибуту bgColor (цвет фона) тега <body>
cookie - представляет собой фрагмент информации, записанный на локальный диск ("ключик");
fgColor - соответствует атрибуту fgColor (цвет текста) тега <body>
forms - массив, содержащий все теги <form> в текущем документе;
images - масив изображений, ссылки на которые заданы в текущем документе;
lastModified - дата последнего изменения текущего документа;
linkColor - соответствует атрибуту linkColor (цвет гиперсвязи по умолчанию);
links - масив, содержащий все гипервязи в текущем документе;
location - соответствует адресу URL текущего документа;
referrer - соответсствует адреу URL документа, из которого пользователь перешел к текущему документу;
title - соответствует содержимому контейнера <title> . . . </title>
vlinkColor- соответствует атрибуту vlinkColor (цвет посещенной связи) тега <body>.

Методы

Метод clear() предназначен для очистки текущего документа. Лучше использовать для очистки методы open() и close(). Для записи информации в браузер применяют методы write() и writeln(). Покольку эти методы записывают текст в браузер в HTML-формате, вы можете создавать любой HTML-документ динамически, включая готовые приложения на языке JavaScript. Если в окно загружен документ, то запись данных поверх него может привести к сбою. Поэтому в окно ледует записывать поток данных, для чего сс помощью метода document.open() нужно открыть документ, а затем, вызвав необходимое количество раз метод document.wtite(), записать данные в документ. В заключение, чтобы послать данные в браузер, следует вызвать метод document.close().

Обработчики событий

В тегах <body> и <frame> можно использовать обработчики событий, вязанных загрузкой и выгрузкой документа, onLoad и onUnload. Примеры использования событий будем разбирать позже.

Приведем несколько примеров использования объекта document.    Для записи текста в HTML-формате в браузер иногда применяют функцию document.writeln(). Например, можно динамически оздавать теги изображений, выводя изображения на экран поредтвом следующего:

document.open();
document.writeln("<img sr='myimage.gif'>");
document.close();

    С помощью JavaScript программ, а в частности при помощи объекта document, можно создавать законченные HTML-документы и другие JavaScript программы. Например:

document.open();
document.writeln("<script language='JavaSript'>"+
      "alert('Hello World!')"+
      "</script>");
document.close();
Красиво, не правда ли!
    Заметьте, что в приведенных примерах неколько строк объединяются при помощи операции сложения +. Этот способ удобно применять, когда строки текста программы слишком длинны, чтобы поместиться в редактируемом окне, или когда сложные строки необходимо разбить на несколько простых.

Объект location

    Данный объект сохраняет местоположение текущего документа в виде адреса URL этого документа. При управлении объектом location существует возможность изменять адрес URL документа. Объект location связан с текущим объектом window - окном, в которое загружен документ. Документы не содержат информации об адресах URL. Эти адреса являются свойством объектов window.
    Синтаксис:
[windowVar.]location.prepertyName
где windowVar - необязательная переменная, задающая конкретное окно, к которому хотите обратиться. Эта переменная также позволяет обращаться к фрейму во фреймосодержащем документе при помощи свойства parent - синонима, используемого при обращении к объекту window верхнего уровня, если окон несколько. Объект location является свойством объекта window. Если вы обращаетесь к объекту location без указания имени окна, то подразумевается свойство текущего окна.
    Свойство location объекта window легко перепутать со свойством location объекта document. Значение свойства document.location изменить нельзя, а значение свойства location окна - можно, например при помощи выражения window.location.property. Значение document.location присваивается объекту window.location при первоначальной загрузке документа, потому, что документы всегда загружаются в окна.

Свойства

Объект location имеет следующие свойства:

hash - имя метки в адресе URL (если задано);
host - часть hostname:port адреса URL текущего документа;
hostname - имя хоста и домена (или цифровой IP-адрес) в адресе URL текущего документа;
href - полный адрес URL текущего документа;
pathname - часть адреса URL, описывающая каталог, в котором находится документ;
port - номер порта, который использует сервер;
protocol - префикс адреса URL, описывающий протокол обмена, (например, http:);
target - соответствует атрибуту target в теге <href>.

Методы и обработчики событий

Для объекта location методы, не определены, также не связан с какими-либо обработчиками событий.

Примеры

Чтобы присвоить свойству location текущего окна в качестве значения новый адрес URL, используйте такой вид:
self.location="http://webwood.chat.ru";
который в данном случае загружает в текущее окно Web-страницу. Вы можете опустить объект self, поскольку он является ссылкой на текущее окно.
Чтобы загрузить ресурс в фреймосодержащий документ, можно записать так:
parent.frames[0].location = "http://webwood.chat.ru";
где parent.frames[0] соответствует первому фрейму в текущем документе.

Объект history

Объект history содержит список адресов URL, посещенных в этом сеансе. Объект history связан с текущим документом. Несколько методов этого объекта позволяют загружать в браузер различные ресурсы и обеспечивают навигацию по посещенным ресурсам.

Синтаксис:

history.propertyName
history.methodName (parameters)

Свойства

Значением свойства length является количество элементов в списке объекта history.

Методы

Метод back() позволяет загружать в браузер предыдущий ресурс, в то время как метод forward() обеспечивает обращение к следующему ресурсу в списке. С помощью метода go() можно обратиться к ресурсу с определенным номером в списке объекта history.

Обработчики событий для объектов history не определены.

    Приведем примеры использования объекта history:
    Чтобы посмотреть предыдущий загруженный документ, воспользуйтесь оператором:

history.go(-1);
или
history.back();

    Для обращения к истории конкретного окна или фрейма применяют объект parent:

parent.frames[0].history.forward();

загружает в первый фрейм предыдущий документ. А если открыто несколько окон браузера можно использовать вид:

window1.frames[0].history.forward();

здесь в первый фрейм окна window1 будет загружен следующий документ из списка объекта history.

Объект navigator

Объект navigator содержит информацию об используемой в настоящее время версии браузера. Этот объект применяется для получения информации о версиях.
Синтаксис:

navigator.propertyName

Методы и события, как и не трудно догадаться не определены для этого объекта. Да и свойства только для чтения, так как ресурс с информацией о версии недоступен для редактирования.

Свойства

appCodeName - кодовое имя браузера;
appName - название браузера;
appVersion - информация о версии браузера;
userAgent - кодовое имя и версия браузера;
plugins - массив подключаемых модулей (похоже только для Netscape);
mimeTypes - поддерживаемый массив типов MIME.

Язык JavaScript

Часть6
Внутренние объекты

Внутренние объекты

Внутренние объекты не относятся к браузеру или загруженному в настоящее время HTML-документу. Эти объекты могутсоздаваться и обрабатываться в любой JavaScript-прграмме. Они включают в себя простые типы, такие как строки, а также более сложные объекты, в частности даты.

Имя объекта	Описание
Array	Массив. Не поддерживается в браузерах старых версий
Date	Дата и время
Math	Поддержка математических функций
Object	Обобщенный объект. Не поддерживается в старых версиях IE - до 4, NN - до 3.
String	Текстовая строка. Не поддерживается в старых версиях

Объект array

Array - это многомерное упорядоченное множество объектов, обращение к объектам ведется при помощи целочисленного индекса. Примерами объектов-массивов в браузере служат гиперсвязи, метки, формы, фреймы. Массив можно создать одним из следующих способов:

используя определенную пользователем функцию для присвоения объекту многих значений;
используя конструктор Array();
используя конструктор Object().

Объекты-массивы не имеют ни методов, ни свойств.

Объект Date

Объект содержит информацию о дате и времени. Этот объект имеет множество методов, предназначенных для получения такой информации. Кроме того объекты Date можно создавать и изменять, например путем сложения или вычитания значений дат получать новую дату. Для создания объекта Date применяется синтаксис:

dateObj = new Date(parameters)

где dateObj - переменная, в которую будет записан новый объект Date. Аргумент parameters может принимать следующие значения:

пустой параметр, например date() в данном случае дата и время - системные.
строку, представляющую дату и время в виде: "месяц, день, год, время", например "March 1, 2000, 17:00:00" Время представлено в 24-часовом формате;
значения года, месяца, дня, часа, минут, секунд. Например, строка "00,4,1,12,30,0" означает 1 апреля 2000 года, 12:30.
целочисленные значения только для года, месяца и дня, например "00,5,1" означает 1 мая 2000 года, сразу после полночи, так, как значения времени равны нулю.

Как уже говорилось ранее данный объект имеет множество методов, свойств объект Date не имеет.

Методы

Методов много. Кратко опишу методы объекта Date в таблице.

Метод	Описание метода
getDate()	Возвращает день месяца из объекта в пределах от 1 до 31
getDay()	Возвращает день недели из объекта: 0 - вс, 1 - пн, 2 - вт, 3 - ср, 4 - чт, 5 - пт, 6 - сб.
getHours()	Возвращает время из объекта в пределах от 0 до 23
getMinutes()	Возвращает значение минут из объекта в пределах от 0 до 59
getMonth()	Возвращает значение месяца из объекта в пределах от 0 до 11
getSeconds()	Возвращает значение секунд из объекта в пределах от 0 до 59
getTime()	Возвращает количество миллисекунд, прошедшее с 00:00:00 1 января 1970 года.
getTimeZoneoffset()	Возвращает значение, соответствующее разности во времени (в минутах)
getYear()	Возвращает значение года из объекта
Date.parse(arg)	Возвращает количество миллисекунд, прошедшее с 00:00:00 1 января 1970 года. Arg - строковый аргумент.
setDate(day)	С помощью данного метода устанавливается день месяца в объекте от 1 до 31
setHours(hours)	С помощью данного метода устанавливается часы в объекте от 0 до 23
setMinutes(minutes)	С помощью данного метода устанавливаются минуты в объекте от 0 до 59
setMonth(month)	С помощью данного метода устанавливается месяц в объекте от 1 до 12
setSeconds(seconds)	С помощью данного метода устанавливаются секунды в объекте от 0 до 59
setTime(timestring)	С помощью данного метода устанавливается значение времени в объекте.
setYear(year)	С помощью данного метода устанавливается год в объекте year должно быть больше 1900.
toGMTString()	Преобразует дату в строковый объект в формате GMT.
toString()	Преобразует содержимое объекта Date в строковый объект.
toLocaleString()	Преобразует содержимое объекта Date в строку в соответствии с местным временем.
Date.UTC(year, month, day [,hours][,mins][,secs])	Возвращает количество миллисекунд в объекте Date, прошедших с с 00:00:00 1 января 1970 года по среднему гринвичскому времени.

Разберем пару примеров:
    В данном примере приведен HTML-документ, в заголовке которого выводится текущие дата и время.

<html>
<head>
<script language "JavaScript">
<--
function showh() {
  var theDate = new Date();
  document.writeln("<table cellpadding=5 width=100% border=0>" +
       "<tr><td width=95% bgcolor=gray align=left>" +
       "<font color=white>Date: " + theDate +
       "</font></td></tr></table><p>");
}
showh();
//-->
</script>
</head>
</html>
Просмотр

    Разберем еще один пример. Подобный мы уже разбирали, когда рассматривали условные операторы, просто вспомним его и немного изменим: пусть менется цвет фона в зависимости от времени суток.

<html>
<script language "JavaScript">
<--
theTime = new Date();
theHour = theTime.getHours();
if (18 > theHour)
  document.writeln("<body bgcolor=green text='Black'>");
else
  document.writeln("<body bgcolor=red text='White'>");
//-->
</script>
</body>
</html>

Просмотр

    Вероятно, вы успели заметить, что тег <body> создается в JavaScript-программе, а закрывается уже в статическом тексте HTML. Это вполне допустимо, так, как все теги расположены в правильном порядке.

Язык JavaScript

Часть7

Объект Math

Объект Math является встроенным объектом языка JavaScript и содержит свойства и методы, используемые для выполнения математических операций. Объект Math включает также некоторые широко применяемые математические константы.
Синтаксис:

Math.propertyName
Math.methodName(parameters)

Свойства

Свойствами объекта Math являются математические константы:

E	Константа Эйлера. Приближенное значение 2.718 . . .
LN2	Значение натурального логарифма числа два. Приближенное значение 0.693 . . .
LN10	Значение натурального логарифма числа десять. Приближенное значение 2.302 . . .
LOG2_E	Логарифм e по основанию 2 (не вижу смысла в этой константе - это же корень из двух.) Приближенное значение 1.442 . . .)
LOG10_E	Десятичный логарифм e. Приближенное значение 0.434 . . .
PI	Число ПИ. Приближенное значение 3.1415 . . .
SQRT2	Корень из двух, (ыгы, это все равно, как еще и натуральный логарифм 2*e в степени 1/2)

Методы

Методы объекта Math представляют собой математические функции. Пожалуй, и их включим в таблицу:

abs()	Возвращает абсолютное значение аргумента.
acos()	Возвращает арккосинус аргумента
asin()	Возвращает арксинус аргумента
atan()	Возвращает арктангенс аргумента
ceil()	Возвращает большее целое число аргумента, округление в большую сторону. Math.ceil(3.14) вернет 4
cos()	Возвращает косинус аргумента
exp()	Возвращает экспоненту аргумента
floor()	Возвращает наибольшее целое число аргумента, отбрасывает десятичную часть
log()	Возвращает натуральный логарифм аргумента
max()	Возвращает больший из 2-х числовых аргументов. Math.max(3,5) вернет число 5
min()	Возвращает меньший из 2-х числовых аргументов.
pow()	Возвращает результат возведения в степень перврго аргумента вторым. Math.pow(5,3) вернет 125
random()	Возвращает псевдослучайное число между нулем и единицей.
round()	Округление аргумента до ближайшего целого числа.
sin()	Возвращает синус аргумента
sqrt()	Возвращает квадратный корень аргумента
tan()	Возвращает тангенс аргумента

Вот как будто и все методы. Обработчиков событий конечно нет для внутренних объектов. Синтаксис очень прост, вызывается метод как любая функция, но это всеже метод и не забывайте указывать префикс Math перед методом: var mpi = Math.Pi. В данном случае переменной mpi присвоится значение Пи. Или, например, var myvar = Math.sin(Math.Pi/4).

Обобщенные объекты

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

Строковые объекты

Строка (string) в языке JavaScript представляется в виде пследовательности символов, заключенных в двойные или одинарные кавычки. Для управления строковыми объектами используется синтаксис:

stringName.propertyName
stringName.methodName(parameters)

Здесь stringName - имя объекта String. Строки можно создавать тремя способами:
1. Создать строковую переменную при помощи оператора var и присвоить ей строковое значение;
2. Присвоить значение строковой переменной только посредством оператора присваивания (=);
3. Использовать конструктор String().

Свойства

Значением свойства length является длина строки. Например, выражение "Script".length вернет значение 6, поскольку строка "Script" содержит 6 символов.

Методы

Как можно и передположить, разработчики языка не оставили этот объект со скудным запасом методов. Вспомните любой язык программирования и сколько строковых функций он содержит. Чтож, так, как использование этих методов не составит затруднений, я их просто помещу в таблицу. Вызов метода осуществляется обычно: "Строка или строковая переменная".метод(), в данном случае метод без параметров, имеются методы и с параметрами. Заметьте, строка или строковая переменная, к которой применяется метод - объект, и никак не аргумент!

Метод	Описание метода
big()	Аналогично тегам HTML <big> . . .</big>. позволяет отобразить более крупным шрифтом.
blink()	Заставляет строку мигать. (Этим почти никто не пользуется).
bold()	Название говорит за себя - делает символы жирными.
charAt(arg)	Возвращает символ, находящийся в заданной позиции строки. Пример: vpos = "Script".charAt(3); переменной vpos будет присвоено значение "r".
fixed()	Анологично <tt> . . .</tt> вывод строки фиксированного размера.
fontcolor(arg)	Анологично <font color="#rrggbb"> . . .</font>. Аргумент метода может быть как триплетом RGB, так и зарезервированным словом.
fontsize(arg)	Позволяет изменять размер шрифта. Аргумент в условных единицах. Анологично <font size=size> . . .</font>. Также можно использовать вид +size или -size для увеличения или уменьшения шрифта на size единиц, например: "строка".fontsize(+1).
indexOf(arg1[,arg2])	Возвращает позицию в строке, где впервые встречается символ - arg1, неябязательный числовой аргумент arg2 указывает начальную позицию для поиска.
italics()	Аналогично тегам HTML <i> . . .</i>. позволяет отобразить италиком.
lastlndexOf(arg1[,arg2])	Возвращает либо номер позиции в строке, где в последний раз встретился символ - arg1, либо -1, если символ не найден. Arg2 задает начальную позицию для поиска.
link()	Аналогично тегам HTML <a href> . . .</a>. позволяет преобразовать строку в гиперсвязь.
small()	Аналогично тегам HTML <small> . . .</small>. позволяет отображать строку мелким шрифтом.
strike()	Аналогично тегам HTML <strike> . . .</strike>. позволяет отображать строку зачеркнутой.
sub()	Аналогично тегам HTML <sub> . . .</sub>. позволяет отображать строку нижним индексом.
substring(arg1,arg2)	Позволяет извлеч подстроку длинной arg2, начиная с позиции arg1
sup()	Аналогично тегам HTML <sup> . . .</sup>. позволяет отображать строку верхним индексом.
toLowerCase()	Преобразует символы строкового объекта в строчные
toUpperCase()	Преобразует символы строкового объекта в прописные

Часть8
Объекты, соответствующие тегам HTML

Многие объекты языка JavaScript соответствуют тегам, формирующим HTML-документы. Каждый такой объект состоит во внутренней иерархии, поскольку все они имеют общий родительский объект - браузер, который представлен объектом window.

Некоторые объекты языка JavaScript имеют потомков. В частности, гиперсвязь является объектом, наследованным из объекта document. В языке JS наследованные объекты называются также свойствами. Например, множество гиперсвязей является свойством объекта document, а lincs - именем этого свойства. Таким образом, трудно провести четкую границу между объектами и свойствами. Гиперсвязь, являясь объектом, в то же время представляет собой свойство links объекта document.
Рассмотрим пример. Напишем простенькую программку и посмотрим, как будут создаваться объекты HTML. Тоесть, при загрузке HTML-документа в браузер соответственно будут созданы HTML-объекты на JavaScript. Теги HTML собственно служат исключительно для удобства написания документа:

<html>
<head>
<title>Пример программы</title>
</head>
<body bgcolor="White">
<form>
<input type="checkbox" checked name="chck1">Item 1
</form>
</body>
</html>

Посмотрим эквивалентную запись на JavaScript

document.title="Пример программы"
document.bgColor="White"
document.forms[0].chck1.defaultChecked=true

Как видно из примера, тегу <title> соответствует свойство document.title, а цвету фона документа, установленному в теге <body>, - свойство document.bgColor. Переключателю checkbox с именем chck1, определенному в форме, соответствует выражение document.forms[0].chck1. Свойство defaultChecked принадлежит объекту check-box и может принимать значения true или false в зависимости от того, указан ли в теге <input> атрибут checked. Когда этот атрибут задан, переключатель отображается на экране как включенный по умолчанию.

  Поскольку документ может включать несколько таких объектоов, как гиперсвязи, формы и другие объекты, многие из них являются массивами. Для обращения к определенному элементу массива нужно указать его индекс. Например, forms[0] - первая форма текущего документа. Ко второй форме можно обратиться соответственно forms[1]. Заметьте, что индексы массивов в JS программах всегда начинаются с нуля.
    В нашем примере объект верхнего уровня - window, потому, что любой документ загружается в окно. Например, выражения document.forms[0] и window.document.forms[0] обращаются к одному и тому же объекту, а именно к первой форме текущего документа. Однако если необходимо обратиться к форме в другом окне (фрейме), следует использовать выражение вида

parent.frames[n].document.forms[n]

где n является индексом нужного элемента массива.
    Ну чтож, перечислим объекты в таблице.

Имя объекта	Краткое описание
anchor (anchors[])	Множество тегов <a name> в текущем документе
button	Кнопка, создаваемая при помощи тега <input type=button>
checkbox	Контрольный переключатель, создаваемый при помощи тега <input type=checkbox>
elements[]	Все элементы тега <form>
form (forms[])	Множество объектов тега <form> языка HTML
frame (frames[])	Фреймосодержащий документ
hidden	Скрытое текстовое поле, создаваемое при помощи тега <input type=hidden>
images (images[])	Множество изображений (тегов <img>) в текущем документе
link (links[])	Множество гиперсвязей в текущем документе
navigator	Объект, содержащий информацию о браузере, загрузившем документ
password	Поле ввода пароля, создаваемое при помощи тега <input type=password>
radio	Селекторная кнопка (radio button), создаваемая при помощи тега <input type=radio>
reset	Кнопка перегрузки, создаваемая при помощи тега <input type=reset>
select (options[])	Элементы <option> объекта <select>
submit	Кнопка передачи данных, создаваемая при помощи тега <input type=submit>
text	Поле ввода, сооздаваемое при помощи тега <input type=text>
textarea	оле текста, создаваемое при помощи тега <textarea>

Объекты, которым соответствует массивы, являются многомерными объектами. В некоторых HTML-тегах можно определить несколько элементов, например множество элементов списка в теге <select>. Рассмотрим тег <select>, содержащий два элемента:

<form>
<select name="primer">
<option>Опция1
<option>Опция2
</select>
</form>

Тег <select> сам по себе является объектом, однако для обращения к отдельным элементам этого объекта (тегам <option>) используется массив option. Данный массив представляет собой множество значений, которые соответствует тегам <option>, содержащимся в теге <select>. В нашем примере создается два объекта: первый - объект select в целом (к нему обращаются, обращаются, чтобы выяснить, сколько элементов он фактически соодержит), второй - массив options (он позволяет обращаться к отдельным элементам, содержащимся в первом объекте). Таким образом, некоторые объекты могут использовать объекты-массивы для обращения к содержащимся в них элементам. Однако это не является правилом, все зависит от структуры рассматриваемых объектов и тех объектов, из которых они унаследованы. Например, HTML-тегам <a name> . . . </a> соответствует объект anchor, являющийся элементом массива anchors, и в то же время эти теги встречаются сами по себе, а не в других тегах. Просто родительским объектом (parents) для объекта anchors является объект document, а в документе моожет быть определено множество меток. Окна тоже могут содержать множество документов, связанных с ними через фреймы.

Объект anchor и массив anchors

    Anchor - это элемент текста, который является объектом назначения для тега гиперсвязи <a href>, а также свойством объекта document. Тегу <a name> в языке JavaScript соответствует объект anchor, а всем тегам <a name>, имеющимся в документе, - массив anchors. Являясь объектами назначения для гиперсвязей <a name>, метки в основном используются для индексирования содержимого гипертекстовых документов, обеспечивая быстрое перемещение к определенной части документа при щелчке мыши на гиперсвязи, которая обращается к данной метке. Тег <a>, задающий метки и гиперсвязи, имеет синтаксис:

<a [href=location]
     [name="anchorName"]
     [target="windowName"] >
     anchorText
</a>

    Как вы успели заметить, обычная схема построения гиперсвязей. Значение location задает имя метки. Когда значение определено, данный тег задает гиперсвязь. Location может также включать и URL, например: href="http://webwood.chat.ru/index.htm#netscape". Заметьте, что перед и после знака # пробелы не допустимы. Атрибут name="anchorName" определяет имя метки, которая будет объектом назначения для гипертекстовой связи в текущем HTML-документе: <a name = "netscape" ></a>. В данном случае netscape - имя метки, которая будет объектом назначения для гипертекстовой связи. Атрибут target="windowName" - имя объекта-окна или его синонима: self, top и др., в котрое загружается документ, запрашиваемый при активизации гиперсвязи. Значение anchorText задает текст, который будет отображаться на экране в том месте, где находится метка, и является необязательным. Например: <a name = "myAnchor"> </a>. А вот с атрибутом href - текст в большинстве случаев должен быть виден на экране, иначе как активизировать гиперсвязь. Атрибут target также может существовать только с атрибутом href. Вот, так сказать провели краткий курс по HTML.

Массив anchors

Посредством массива anchors программа на языке JavaScript может обращаться к метке текущего гипертекстового документа. Каждому тегу <a name> текущего документа соответствует элемент массива anchors. Для того чтобы программа выполнялась правильно, в соответствующих атрибутах name должны быть заданы имена всех меток. Если документ содержит именованную метку, определенную HTML-тегом
< a name="s1">Selection1</a>
то этой метке в JS-программе соответствует объект document.anchors[0]. Чтобы перейти к этой метке посредством гиперсвязи, пользователь должен щелкнуть мышью на тексте, определенном в контейнере <a href="#s1"> . . . </a>. К массиву anchors можно обращаться при помощи следующих операторов:

document.anchors[i]
document.anchors.length

где i - индекс запрашиваемой метки. Свойство length позволяет определить количество меток в документе, хотя элементы, соответствующие отдельным меткам, будут содержать значение null. Это значит, что нельзя обращаться к именам отдельных меток через элементы массива.

Свойства

Массив anchors имеет только одно свойство length, которое возвращает значение, соответствующее количеству меток в документе. Массив anchors является структурой только для чтения.
Методов и обработчиков событий объекты anchors не имеют.

Объект button

Кнопка - это область окна, которая реагирует на щелчки мыши и может активизировать оператор или функцию языка JavaScript при помощи атрибута события onClick. Кнопки являются свойствами объекта form и должны быть заключены в теги <form> . . . </form> языка HTML.

Синтаксис:
<input type="button"
      name="buttonName"
      value="buttonText"
      [onClick="handlerText"]>

Атрибут name задает имя кнопки и в языке JS ему соответствует свойство name нового объекта buttun. Атрибут value определяет надпись на кнопке, котороой соответствует свойство value. К свойствам и методам объекта button можно обратиться одним из способов:
    buttonName.propertyName
    buttonName.methodName (parameters)
    formName.elements[i].propertyName
     formName.elements[i].methodName (parameters)

Здесь buttonName - значение атрибута name, а formName - либо значение атрибута name объекта form, либо элемент массива forms. Переменная i является индексоом, используемым для обращения к отдельному элементу массива, в данном случае к элементу button.

Свойства

Свойства name и value объекта button соответствует атрибутам name и value HTML-тега <input>. Обратившись к значениям этих свойств, можно вывести полный список кнопок, имеющихся в текущем документе. Свойство type объекта button всегда имеет значение "button".

Методы и обработчики событий

Объект button имеет метод click() - о нем будем говорить позже.
Обработчик событий onClick позволяет выполнить оператор или вызвать функцию языка JavaScript при щелчке мыши на кнопке, которой соответствует в программе определенный объект button.

Пример

    Приведем простой пример, например, выведем текущую дату и время посредством нажатия кнопки. Будем использовать событие onClick для вызова метода alert() и конструктора Date() Пример схематичный, объект должен быть определен

<form>
<input type="button"
     value="Date and Time"
     onClick='alert(Date())'>
</form>

Часть9

Объект checkbox

Контрольный переключатель - это кнопка(флажок), которую можно установить в одно из двух состояний: включено или выключено. Объекты checkbox являются свойствами объекта form и должны быть помещены в теги <form> . . . </form>. Простой контрольный переключатель:

Checkbox1
Checkbox2
Checkbox3
Синтаксис:
<input name="checkboxName"
     type="checkbox"
     value="checkboxValue"
     [checked]
     [onClick="handlerText"]>textToDisplay

где атрибут name является именем объекта checkbox. Ему соответствует свойство name объекта языка JavaScript. Атрибут value определяет значение, которое передается серверу при пересылки значений элементов формы, если контрольный переключатель включен. Необязательный атрибут checked указывает, что контрольный переключатель должен быть включен по умолчанию. Если этот атрибут задан, свойство defaultChecked имеет значение true. При помощи свойства checked можно определить, включен ли контрольный переключатель. Текст, отображаемый рядом с контрольным переключателем, задается строкой textToDisplay.
    К объекту checkbox можно обращаться одним из способов:

checkboxName.propertyName
checkboxName.methodName (parameters)
formName.elements[i].propertyName
formName.elements[i].methodName (parameters)

где checkboxName - значение атрибута name объекта checkbox, а formName - имя объекта form или формы, которой принадлежит данный контрольный переключатель. Другими словами, к форме можно обращаться как к элементу массива forms, например forms[0] - для обращения к первой форме документа, либо по имени объекта form, если оно определено в атрибуте name HTML-тега <form>.
К любому элементу формы можно обратиться так же, как к элементу массива elements, который является свойством объекта form. В этом случае для обращения к определенному контрольному переключателю следует использовать его порядковый номер (i) в массиве всех элементов формы.

Свойства

Если контрольный переключатель включен, свойство checked имеет значение true. Когда в теге <input> используется атрибут checked, например <input checked type=checkbox>, свойсту defaultChecked также присваивается значение true. Свойство name соответствует атрибуту name тега <input name= . . . type=checkbox>, а свойство value - атрибуту value тега <input>. (оно и правильно. ключевые слова и должны соответствовать чтобы путаницы небыло). Свойство type объекта checkbox всегда содержит значение "checkbox".

Методы и обработчики событий

Метод Click() может использоваться с объектом checkbox, мне не приходилось его использовать, но есть много замечаний в адрес этого метода, - в некоторых браузерах он должным образом не работает. Но тем не менее он имеется. Для объекта checkbox предусмотрен только один обработчик - onClick(). Об этом и других событиях языка JavaScript поговорим позже в отдельном разделе.

Массив elements

Массив elements содержит все элементы HTML-формы - контрольные переключатели (checkbox), селекторные кнопки (radio-button), текстовые объекты (text) и другие, - в том порядке, в котором они определены в форме. Этот массив можно использовать для доступа к элементам формы в JS-программе по их порядковому номеру, не используя свойства name этих элементов. Массив elements, в свою очередь, является свойством объекта forms, поэтому при обращении к нему следует указывать имя формы, к элементу которой вы хотите обратиться:

formName.elements[i]
formName.elements[i].length

Здесь formName может быть либо именем объекта form, определенным при помощи атрибута name в теге <form>, либо элементом массива forms, например forms[i], где i - переменная, которая индексирует элементы массива. Значением свойства length является количество элементов, содержащихся в форме. Массив elemments включает данные только для чтения, т.е. динамически записать в этот объект какие-либо значения невозможно.

Свойства

Объект elements имеет только одно свойство, length, значением которого является количество элементов объекта form.
document.forms[0].elements.length
возвратит значение, соответствующее количеству элементов в первой форме текущего документа.

Пример

Создадим пару элементов, например поля ввода для имени и адреса:
Имя: Адрес:

Нажав на эту кнопку, можно увидеть элементы формы, назовем ее "Форма для примера". Третьим элементом будет кнопка, вызывающая функцию на JavaScript. Она также находится в данной форме.
Внимание: не корректно работает в Internet Explorer-е. Дело в том, что в этом браузере элементы формы хранятся не в виде строки. В NN должно быть нормально. IE 3.01 может даже вызвать ошибку. IE 4 и выше ошибки не выдает.

Теперь рассмотрим текст этой программы:

<html>
<head>
<script language="JavaScript">

</script>
</head>
<body>
<form name="Форма для примера">
Имя:
<input type="text" size=10 name="fullname">
Адрес:
<textarea name="adr"></textarea>
<BR>
<input type="button" value="Смотрим элементы" onClick="showElem(this.form)">
</form>
</body>
</html>
Здесь функция перебирает все элементы массива elements заданной формы, в данном примере их три, формирует строку formEl, содержащую информацию об элементах данного массива. IE покажет здесь в виде "n:[object]" тоесть этот браузер не содержит в массиве elements строки с информацией об объекте формы. Созданная строка (для удобства читаемости разделена "переводом строки \n" ) выводится в окне предупреждения с помощью метода alert(). Функция showEl() вызывается с аргументом this.form, который обращается к текущей форме. Если оператор this опустить, то из функции showEl() к форме придется обращаться с помощью выражения document.forms[n], - это не очень удобно, так как мы обращаемся из текущей формы.

Объект form и массив forms

    Форма - это область гипертекстового документа, которая создается при помощи контейнера <form> . . . </form> и содержит элементы, позволяющие пользователю вводить информацию. Многие HTML-теги, например теги, определяющие поля ввода (text field), области текста (textarea), контрольные переключатели (checkbox), селекторные кнопки (radio button) и списки (selection list), располагаются только в контейнере <form> . . . </form>. Всем перечисленным элементам в языке JavaScript соответствуют отдельные объекты. Программы на языке JS могут обрабатывать формы непосредственно, получая значения, содержащиеся в необходимых элементах (например для проверки ввода обязательных данных). Кроме того, данные из формы обычно передаются для обработки на удаленный Web-сервер.

    Синтаксис:

<form name="formName"
     target="windowname"
     action="serverURL"
     method="get" | "post"
     enctype="encodingType"
     [onSubmit="handlerText"]>
</form>

Здесь атрибут name - строка, определяющая имя формы. Атрибут target задает имя окна, в котором должны обрабатываться события, связанные с изменением элементов формы. Для этого требуется наличие окна или фрейма с заданным именем. В качестве значений данного атрибута могут использоваться и зарезервированные имена _blank, _parent, _self и _top.
    Атрибут action задает адрес URL сервера, который будет получать данные из формы и запускать соответствующий CGI-скрипт. Также можно послать данные из формы по электронной почте, указав при этом значения этого атрибута адрес URL типа mailto: . . .
    Формы, передаваемые на сервер, требуют задания метода передачи (submission), который указывается при помощи атрибута method. Метод GET присоединяет данные формы к строке адреса URL, заданного в атрибуте action. При использовании метода POST информация из формы посылается как отдельный поток данных. В последнем случае CGI-скрипт на сервере считывает эти данные из стандартного входного потока (standard input stream). Кроме того, на сервере устанавливается переменная среды с именем QUERY_STRING, что обеспечивает еще один способ получения этих данных.
    Атрибут enctype задает тип кодировки MIME (Multimedia Internet Mail Extensions) для посылаемых данных. Типом MIME по умолчанию является тип application/x-www-form-urlencoded.
    К свойствам и методам формы в JavaScript-прграмме можно обратиться одним из способов:

formName.propertyName
formName.methodName (parameters)
forms[i].propertyName
forms[i].methodName (parameters)

Здесь formName соответствует атрибуту name объекта form, а i является целочисленной переменной, используемой для обращения к отдельному элементу массива forms, который соответствует определенному тегу <form> текущего документа.

Использование массива forms

К любой форме текущего гипертекстового документа можно обращаться как к элементу массива forms. Для этого необходимо указать индекс запрашиваемой формы. Например, forms[0] - первый тег <form> в текущем документе.

document.forms[i]
document.forms.length
document.forms['name']

Переменная i - это индекс, соответствующий запрашиваемой форме.
Выражение вида

document.forms[i]

можно также присвоить переменной

var myForm = document.forms[i];

Теперь, если в форме имеется, к примеру, поле ввода, определенное в HTML-теге

<form>
<input type=text name=myField size=40>
. . .
</form>

то в JS-программе к этому полю позволяет обращаться переменная myForm. В частности, при помощи следующего оператора содержимое данного поля ввода присваивается новой переменной с именем result:

var result = myForm.myField.value;

Значение свойства length соответствует количеству форм в документе:

var numForms = document.forms.length

Массив forms содержит данные, которые используют только для чтения.

Свойства

Объект form имеет шесть свойств, большинство из них соответствуют атрибутам тега <form>:

action - соответствует атрибуту action;
elements - массив, содержащий все элементы формы;
encoding - соответствует атрибуту enctype;
length - количество элементов в форме;
method - соответствует атрибуту method;
target - соответствует атрибуту target

Массив forms имеет только одно свойство length - количество форм в документе.

Методы

Метод submit() применяется для передачи формы из JavaScript-программы. Его можно использовать вместо тега <input type=submit>, имеющегося в большинстве форм, информация которых должна передаваться на сервер.

Обработчики событий

Обработчик события onSubmit() позволяет перехватывать события, связанные с передачей данных формы. Такие события возникают либо после нажатия кнопки передачи данных, определенной тегом <input type=submit> в контейнере <form>, либо при передаче данных формы с помощью метода submit(), вызванного из JS-прграммы.

Пример В следующем примере при нажатии кнопки передачи данных содержимое текстового поля посылается адресату по электронной почте:

Отсюда вы можете реально послать почту автору этого сайта. Просьба не посылать пустые формы, раз уж вы решили отправить. Перед отправкой последует запрос на отправку почты, - это срабатывает защита на вашем компьютере. Ничего, кроме содержимого формы не отправит! Вот текст этой программы:

<form nethod="post"
action="mailto:webwood@chat.ru"
enctype="text/plain">
<input type="submit" value="Отправить почту">
<input type="reset" value="Очистить форму">
<textarea name="email" rows=5 cols=60>
</textarea>
</form>

Часть10

Массив frames

К отдельным фреймам можно обращаться при помощи массива frames и свойства parent. Например, если имеется два фрейма, определенных в HTML-тегах:

<frameset rows="50%,50%">
<frame name="top" src="file1.htm">
<frame name="bot" src="file2.htm">
</frameset>

то для обращения к первому фрейму вы можете использовать выражение parent.frames[0], и соответственно ко второму - parent.frames[1]. Таким образом, для обращения к отдельным фреймам и к свойству length массива frames используются выражения вида:

frameRef.frames[i]
frameRef.frames.length
windowRef.frames[i]
windowRef.frames.length

Для определения количества фреймов во фреймосодержащем документе применяется свойство length. Все данные массива frames предназначены только для чтения.

Свойства

Объект frame имеет следующие свойства:

frames - массив, содержащий все фреймы в окне;
name - соответствует атрибуту name тега <frame>
length - количество дочерних фреймов в родительском окне (фрейме).

Кроме того, можно использовать такие синонимы:

parent - синоним для окна или фрейма с текущим фреймосодержащим документом;
self - синоним для текущего фрейма;
window - синоним для текущего фрейма.

Массив frames имеет всего одно свойство length, значением которого является количество дочерних фреймов в родительском фрейме.

Методы и обработчики событий

    Во фреймосодержащих документах могут быть использованы методы clearTimeout() и setTimeout().
    В теге <frameset> определяют обработчики событий, связанные с загрузкой и выгрузкой документов onLoad и onUnLoad.
    Об этих методах и событиях будем говорить позже. Пока мы ими пользоваться не будем. Забегать вперед тоже не очень хорошо.

Скрытый объект

    Что это такое, и с чем его едят. Во первых, ничего такого особого в нем нет. Это поле, которое может передаваться из формы например на сервер, находиться в тегах <form> . . . </form>, при этом не отображаться на экране. Для чего оно нужно? Ну например, что-то формируется JS программой и это нужно передать, при этом выводить эту информацию нет смысла. Это текстовые поля позволяют сохранять определенные значения в структурах, отличных от переменных языка JS, хотя данные значения существуют до тех пор, пока загружен текущий документ. Скрытое поле, как уже говорилось является свойством объекта form и должно помещаться в тегах <form> . . . </form>.
    HTML-тег имеет синтаксис:

<input type="hidden"
    [name="hiddenName"]
    [value="textValue"]>

Атрибут name задает имя поля и является необязательным. Значение текстового поля указывают при помощи атрибута value, который позволяет задавать и значение поля по умолчанию. К свойствам скрытых объектов можно обращаться посредством одного из следующих выражений:

fieldName.propertyName
formName.elements[i].propertyName

где fieldName - имя скрытого поля, заданное в атрибуте name тега <input>, а formName - имя формы, в которой определено скрытое поле.

Свойства

Скрытый объект имеет свойства:

name - соответствует атрибуту name тега <input>
value - соответствует атрибуту value тега <input>
type - соответствует атрибуту type и содержит значение "hidden".

Скрытые объекты не имеют методов и обработчиков событий.

Пример: В следующей форме определено скрытое поле hfield шириной 20 символов, по умолчанию имеет значение "page 1":

<form name="hiddenField">
<input name="hfield" type="hidden" size=20 value="page 1">
</form>

Значение этого поля можно изменить с помощью оператора следующего вида:

document.hiddenField.hfield.value = "page 2";

Объеткт image и массив images

     Браузер Microsoft Internet Explorer версии ниже 4, не поддерживает массив images.
    В браузере рисунки рассматриваются как объекты image, а все рисунки, содержащиеся в текущем документе, помещаются в массив images, который можно использовать для обращения к любому рисунку, определяемому тегом <img>. В частности, можно динамически обновлять изображения, изменяя их свойство src. Примеров тому в интернете очень много. В частности и на этом сайте. Для начала приведем тег <img>, распишем полностью:

<img src="fileOrUrl"
     [alt="altText"]
     [lowsrc="fileOrUrl"]
     [width=w]
     [heigth=h]
     [border=b]
     [vspace=v]
     [hspace=h]>

В атрибуте src содержится имя или адрес URL файла, который нужно вывести в документе. Рисунок должен храниться в формате GIF, JPEG, или PNG. С помощью атрибута alt задается альтернативный текст, появляющийся на экране: в момент загрузки текста, если пользователь заблокировал вывод изображений и поясняющая надпись под курсором мыши. Атрибут lowsrc, NN его поддерживает, IE - честно сказать не знаю, не пробовал, да и без надобности. Он позволяет предварительно выводить на экран изображение с низким разрешением. При этом рисунок загружается в два этапа. Атрибуты width (ширина) и height (высота) позволяют задать размеры рисунка в пикселах, атрибут border - ширину рамки в пикселах, а атрибуты vspace и hspace - размеры вертикального и горизонтального зазоров между границами изображения и другими элементами документа.
    Для обращения к свойствам объекта image используется следующий синтаксис:

document.images[i].propertyName

где i - индекс элемента массива, который соответствует нужному рисунку. Первым рисунком в документе будет document.images[0]. Массив images является свойством объекта document, поэтому при обращении к рисунку необходим префикс document к имени массива. Тег <img> не имеет атрибута name, поэтому выражение вида "document.imgName" приведет к ошибке.

Свойства

Все свойства объектов image соответствуют атрибутам тега <img>, за исключением свойства complete. Эти свойства, кроме свойств src и lowsrc, значения которых могут быть изменены динамически, имеют значения только для чтения:

src - соответствует атрибуту src тега <img>
lowsrc - соответствует атрибуту lowsrc тега <img>
height - соответствует атрибуту height тега <img>
width - соответствует атрибуту width тега <img>
border - соответствует атрибуту border тега <img>
vspace - соответствует атрибуту vspace тега <img>
hspace - соответствует атрибуту hspace тега <img>
complete - содержит булево значение, которое указывает, загружен рисунок в браузер или нет (true - загружен, false - нет);
type - для объектов image содержит значение "image".

Перед загрузкой рисунка появляется его рамка, внутри которой отображается строка, заданная в атрибуте alt (в версии 5 и выше IE, пользователь при желании может отключить рамки с alt-текстом отображаемые в момент загрузки рисунка). Рисунок можно изменять динамически, присваивая атрибуту src или lowsrc в качестве значения новый адрес URL (Честно говоря такое не применял, локально проверить это не удается, так как lowsrc загрузится мгновенно. А так, как такой способ считаю устаревшим - не пытался применить. Ошибок по крайней мере при применении этого атрибута не выдает.)

Методы и обработчики событий

Объект image не имеет методов.

Обработчики событий:

onAbort - обработка события, возникающего при прерывании загрузки рисунка, т.е. при нажатии клавиши [Esc] или активизации новой гиперсвязи, в то время, когда рисунок загружается;
onError - обработка события, связанного с ошибкой загрузки рисунка, т.е. когда невозможно найти рисунок по указанному адресу URL ;
onLoad - соответствующее событие, инициализируется в начале загрузки рисунка. При загрузке анимированного GIF-а это событие возникает несколько раз и зависит от числа кадров анимационной последовательности.

Примеры

Данный пример позволяет обновить рисунок, нажав на кнопку формы. Не работает IE ниже 4-й версии и NN ниже 3-й версии.

Вот текст этой программы:

<IMG SRC="TNGRNSTONE.jpg"
<form>
<input type="button" value = "Обновить рисунок" onClick="document.images[0].src='TNHVYSTN.jpg'">
</form>

Как вы уже и успели заметить, происходит замена одного рисунка на другой. Представляете, если использовать слои, плюс визуальные фильтры и это свойство с применением хитрой задумки можно такое сотворить! - Такое сотворить. . . Flash не нужно! ;) Можно применить например, для показа рисунков - типа галереи, - зачем грузить полностью документ, когда можно только рисунок, если конечно вы не разместили баннер и вам не выгодно, когда не перегружается страница. Еще пример? Достаточно. Кучу подобных примеров можно найти и в других разделах.

Объект link и массив links

Объект link (гиперсвязь) отображается как участок текста или графического объекта, щелчок мыши на котором позволяет перейти к другому Web-ресурсу. Тег языка HTML, а мы помним, что рассматриваем объекты соответстующие тегам HTML, имеет следующий вид:

<a href=locationOrURL
[name="anchorName"]
[target="windowOrFrameName"]
[onClick="handlerText"]
[onMouseOver="handlerText"]>
linkText
</a>

Атрибут href определяет имя файла, или адрес URL для объекта, который загружается при активизации гиперсвязи. Атрибут name задает имя гиперсвязи, превращая ее в объект anchor (метку). С помощью атрибута target в определенный фрейм текущего фреймосодержащего документа можно загрузить документ, URL которого указан в значении атрибута href. Атрибут linkText представляет собой текст, отображаемый в HTML-документе как гиперсвязь, которая активизируется щелчком мыши. Для обращения к свойству объекта link используются выражения типа:

document.links[i].propertyName

где i - индекс данной связи в массиве гиперсвязей links текущего документа.

Масив links

В программе на языке JavaScript к гиперсвязям можно обращаться как к элементам массива links. Например, если в документе определены два тега < a href>, то в JS-программе к этим гиперсвязям можно обращаться с помощью выражений document.links[0] и document.links[1]. Синтаксис выражений для обращений к массиву links следующий:

document.links[i]
document.links.length

где переменная i - индекс гиперсвязи. Значением свойства length является количество гиперсвязей в текущем документе. Объекты link представляют собой объекты только для чтения, поэтому динамически изменять гиперсвязи в документе нельзя.

Свойства

Для объекта link определены следующие свойства:

hash - задает имя метки в адресе URL, если она существует ;
host - задает часть hostname:port адреса URL, определенного в гиперсвязи;
hostname - задает имя хоста и домена (или IP-адрес) в адресе URL, определенном в гиперсвязи;
href - задает полный адрес URL, определенный в гиперсвязи;
pathname - задает часть адреса URL, которая описывает путь к документу и находится после части hostname:port;
port - задает коммуникационный порт, который использует сервер;
protocol - задает начало адреса URL, включая двоеточие, например http:;
target - соответствует атрибуту target тега <a href>.

Массив links имеет всего одно свойство, length, значением которого является количество гиперсвязей в текущем документе.

Методы и обработчики событий

Для объекта link методы не определены.

В тегах <a href> могут использоваться обработчики событий щелчка миши и ее перемещения - onClick и onMouseOver. Конкретно обо всех событиях будем говорить позже.

Пример

При подведении указателя мыши на гиперсязь, в строке состояния браузера появится текст "Текст в строке состояния при подведении миши на гиперсязь".
Подведите сюда курсор мыши
Вот текст:

<a href="#" onMouseOver="window.status='Текст в строке состояния при подведении мыши на гиперсязь'";
return true">
Подведите сюда курсор мыши
</a>

В данном случае гиперсвязь указывает на пустой документ - "#". Это выбрано для примера в случае щелчка на гиперсвязи ничего не грузилось. При нажатии на ссылку отобразится начало страницы.

Часть11

Объект password

Объект password представляет собой поле ввода, содержимое которого не подлежит просмотру. Вместо каждого символа, введенного в таком поле, отображается символ звездочки (*). В то же время содержимое данного поля сохраняется как обычный текст. Объекты password, в своою очередь являются своойствами объекта form и должны помещаться в контейнере <form> . . . </form>.

Тег, задающий поле ввода пароля имеет вид:

<input type="password" name="passwordName" size=integer [value="textValue"]>

синтаксис этого тега такой же как и у тега задающего поле ввода, однако атрибут type имеет значение "password". Значением данного атрибута для поля ввода всегда является строка "text".
Атрибут name задает имя поля пароля и соответствует свойству name этого элемента в языке JavaScript, атрибут size определяет размер поля в символах, а атрибут value используется для записи в поле значения по умолчанию. Если и используется этот атрибут, ему обычно присваивают значение взятое из Cookies - об использовании "ключиков" будем говорить позже. Для обращения к свойствам и методам поля пароля применяются выражения вида:

passName.propertyName
passName.methodName(parameters)
formName.elements[i].propertyName
formName.elements[i].methodName(parameters)

Здесь passName - значение атрибута name объекта заданного в теге <input>, а formName - либо значение свойства name объекта form, либо определенный элемент в массиве forms, например forms[0]. Переменная i применяется для указания полоожения требуемого элемента в массиве.

Свойства

Объект password имеет следующие свойства:

defaultValue - значение по умолчанию, задаваемое с помощью атрибута value;
name - соответствует атрибуту name тега <name>
value - соответствует текущему значению объекта password;
type - значением этого свойства для всех объектов password является строка "password".

Методы и обработчики событий

Метод focus() объекта password применяется для установки фокуса в поле ввода пароля, а метод blur() - для его удаления. При помощи метода select() можно выделить данные в поле ввода. Этот метод обычно используется вместе с методом focus().
Для объекта password обработчики событий не определены.

Объект radio

Объект radio представляет собой селекторную кнопку (radio button), определяемую в HTML-форме. В отличие от контрольных переключателей (checkbox), селекторные кнопки позволяют выбрать только один из предлагаемых вариантов. Объект radio является свойством объекта form, и поэтому должен содержаться в контейнере <form> . . . </form>. В следующем примере показаны три объекта radio.

Пиво "Балтика 1"
Пиво "Очаковское"
Пиво "Бочкарев"

Синтаксис HTML-тега, определяющего селекторную кнопку, следующий:

<input type="radio" name="radioName" value="buttonValue" [checked] [on Click="handlerText"]> textToDisplay

В атрибуте name задается имя селекторной кнопки. Учтите, что для селекторных кнопок, принадлежащих к одной группе, необходимо указывать одинаковые имена, т.е. одинаковые значения атрибута name. Значение атрибута value возвращается серверу при передаче формы (по умолчанию значение "on"). С помощью атрибута checked можно выбрать селекторную кнопку, которая будет активизирована по умолчанию. Свойство defaultChecked объекта radio имеет значение true, если задан атрибут checked. В качестве значения атрибута onClick указывают обработчик события, связанного с выбором селекторной кнопки. В качестве обработчика события можно задать оператор или функцию языка JavaScript. Селекторная кнопка, как правило, имеет текст, описывающий данный вариант выбора. Этот текст задается в строке textToDisplay. Для обращения к методам и своойствам селекторной кнопки используют выражения:

radioName[i].propertyName
radioName[i].methodName(parameters)
formName.elements[i].propertyName
tformName.elements[i].methodName(parameters)

где radioName - значение атрибута name, заданное в соответствующем теге <input>, а formName - либо значение атрибута name объекта form, либоо обращение к элементу массива forms. Поскольку селекторные кнопки являются элементами формы, для обращения к ним можно использоовать массив элементов формы elements. Например, к первой селекторной кнопке с именем radio1, принадлежащей первой форме текущего документа, можно обратиться при помощи выражения:

document.forms[0].radioName[0]

Следует иметь в виду, что для группы селекторных кнопок элементы массива для каждого элемента этой группы располагаются в обратном порядке.

Свойства

Объект radio имеет следующие свойства:

checked - содержит булево значение true или false, в зависимсти от того, выбрана или нет данная селекторная кноопка;
defaultChecked - сответствует атрибуту checked тега <input type="radio">, а также содержит булево значение;
length - представляет количество селекторных кнопок в бъекте radio;
name - соответствует атрибуту name тега <input>
value - сооответствует атрибуту value тега <input>
type - для объектов radio значением этого атрибута является строка "radio"

Методы и обработчики событий

Для выбора селекторной кнопки используется метод click(). Честно говоря я не совсем понимаю зачем он нужен, ведь значение свойства checked, а именно на него может воздействовать этот метод, может задаваться по умолчанию. Не могу представить другое назначение этого метода.
Объект radio имеет обработчик событий onClick, который испльзуется для обработки событий, связанных с активизацией селекторной кнопки. При этом можно задать выполнение как отдельных оператрв, так и функции. Ну здесь понятно для чего, да? Если изначально можно при помощи свойств проверить значение checked, а если фиксировано начальное значение, то и этого не нужно, то в момент переключения, а переключение производится щелчком мыши, можно использовать это событие для вывода например дополнительных пояснений к выбираемому пункту. Можно получить очень неплохой эффект если поясняющий текст (графику, и то и другое вместе) поместить в контейнеры <div> . . . </div> а контейнеры разместить в разные слои, а потом активизировать (делать видимым) соответствующий слой по событию onClick - каково? На мой взгляд должно получиться круто, не пробовал делать, - сейчас только дошло, - обязательно попробую и приведу пример позже.

Объект reset

    Объект reset отображается в HTML-форме как кнопка перезагрузки, которая возвращает каждый элемент формы к его исходнму состоянию, а значения по умолчанию устанавливаются при помощи атрибута value. Тег имеет синтаксис:

<input type="reset"
        name="resetName"
        value="buttonText"
        [onClick="handlerText"]>

Атрибут name задает имя объекта reset, а атрибут value - текст, отоображаемый на кнопке. Для обращения к методам и свойствам объекта reset используется синтаксис:

resetName.propertyName
resetName.methodName(parameters)
formName.elements[i].propertyName
tformName.elements[i].methodName(parameters)

где resetName - имя объекта reset, заданное в атрибуте объекта name, а formName - имя формы, в которой определен объект reset, указанное в атрибуте name тега <form>, или элемент массива forms.

Свойства

Свойство name сответствует атрибуту name тега <input>, свойство value - атрибуту value, а свойство type - атрибуту type и для объектов reset всегда имеет значение "reset".

Методы и Обработчики событий

    Объект reset имеет метод click(). Вообще все метод Click() и не только для объекта reset, но и для других тоже обычно не используют, - не всегда корректно работает.
    Для объекта resetможно определить обработчик события onClick().
    Примеры, думается приводить не стоит, пример приводился при рассмотрении объекта form. Его использование не должно вызвать затруднений.

Объект select и массив options

Объект select отображается как простой или ниспадающий список и является элементом формы, определенной в HTML-документе. Элементам списка, заданного в объекте select, соответствует массив options. Объекты select представляют собой свйства объекта form, в то время как массив options является свойством объекта select.

Подобные меню можно часто увидеть для навигации по сайту например.

    Синтаксис тега <select>

<select name="selectName"
      [size="integer"]
      [multiple]
      [OnBlur="handlerText"]
      [OnChange="handlerText"]
      [OnFocus="handlerText"]>
      <option value="optionValue" [selected]> textToDisplay
</select>

Атрибут name задает имя объекта select, который имеет одноименное свойство. Значением атрибута size является количествоо стрк, отображаемых в списке, хотя содержаться может больше. С помощью атрибута multiple можно выбрать несколько элементов списка. Для ниспадающих списков атрибуты size и multiple не определяются.
    Контейнер <select> . . . </select> не используется без тегов <option>, поскольку эти эти теги задают элементы списка. Количество элементв в списке не ограничивается. Атрибут value тега <option> представляет значение, которое пересылается серверу при передачи формы. Атрибуту value сооответствует свойство объекта select с таким же именем. Список может содержать элементы, выбранные по умолчанию, что задается при поомощи атрибута selected. В программе на JavaScript элементы, выбранные по умолчанию, определяются значением свойства defaultSelected объекта option. Текст для элементов списка необхдимо задать в строке textToDisplay. Кроме того, каждому элементу списка соответствует конкретноое значение, устанавливаемое в атрибуте value тега <option>. Для обращения к свойствам и методам объекта select используются выражения типа:

selectName.propertyName
selectName.methodName(parameters)
formName.elements[i].propertyName
tformName.elements[i].methodName(parameters)

где selectName - имя объекта select, заданное в атрибуте name тега <select>, а formName- имя формы, элементом которой является объект select.
К отдельным элементам списка, определенного в объекте select, можно обратиться при помощи массива options или массива elements, используя выражения вида:

selectName.options[i].propertyName
formName.elements[i].options[index].propertyName

где selectName - имя, заданное в атрибуте name тега <select>, а formName - имя формы, в которой определен данный объект select.

Язык JavaScript

Часть12

Массив options

Элементам списка, определенным в тегах <option>, в JavaScript соответствуют элементы массива options, массив является свойством объекта select. Если тег <select> с именем beer содержит два тега <option>, в JS им соответствуют элементы beer.options[0] и beer.options[1].
Массив options, в свою очередь, имеет свойство length. Значение этого свойства - количество тегов <option> в заданном объекте select. Например, выражение beer.options.length будет возвращать значение 2.

Свойства

Объект select имеет свойства:

length - количество тегов <option>, заданных в теге <select>
name - соответствует атрибуту name тега <select>
options - массив значений тегов <option>
selectIndex - содержит индекс выбранного элемента, а если выбрано несколько элементов, то индекс первого;
type - для списков с возможностью выбора одного элемента содержит значение "select-one", а для списков с возможностью выбора нескольких элементов - значение "select-multiple"

Теперь рассмотрим свойства для массива options:

defaultSelected - соответствует первому тегу <option>, определенному с атрибутом selected;
index - номер даннго элемента в массиве;
length - количество элементов в списке объекта select;
selected - не равное нулю, если данный элемент списка выбран
selectedIndex - содержит индекс выбранного элемента
text - соответствует тексту, который указан в теге <option>
value - соответствует атрибуту value тега <option>

Методы и обработчики событий

Объект select имеет методы focus() и blur(). Для объекта select можно определить обработчики событий, соответствующие атрибутам onBlur и onChange, задавая реакцию объекта на события, связанные с потерей и получением фокуса ввода. Используются не часто.

Пример

Рассмотрим пример приведенный выше:

<script language "JavaScript">

</script>
<form name ="Мой выбор">
Какое пиво лучше?
<select name = "beer">
<option>Жигулевское
<option selected>Очаковское
<option>Бочкарев
<option>Балтика
</select>
<P>
<input type = "button" value="Смотрим что выбрали" onClick="showSelected(this.form)">
</form>

Если вы во всем разобрались до этого примера, то комментарии и не понадобятся, но всеже. Объект select, определенный в данном примере содержит четыре элемента. При щелчке мыши на кнопке "Смотрим что выбрали" активизируетсяфункция showSelected(), которая выводит окно сообщения с информацией об выбранном элементе. Для этого используются свойства text и selectedIndex. Функция showSelected() принимает параметр - имя формы. Значение этого параметра возвращается выражением this.form и представляет собой ссылку на текущую форму. Можно было, конечно и не передавать параметр функции если эта функция существует специально для текущей формы, но если кнопка будет находиться в другой форме, то параметр будет необходим. В функции showSelected() переменной selNum присваивается значение свойства selectIndex объекта select, а затем это значение используется при вычислении значения переменной setText для индексации массива options.

Объект submit

    Объект submit отображается как кнопка в фотме HTML. Ее нажатие вызывает передачу текущей формы на сервер, имя которго задано при помощи атрибута action тега <form>. Объект submit является свойством объекта form. Обычно он представляет собой последнее поле формы, хотя его можно указывать в любом месте контейнера <form> . . . </form>. При активации кнопки данные пересылаются на сервер. Мы уже пользовались этим объектом ранее, когда рассматривали объект form.
    Синтаксис:

<input type="submit"
    name="submitName"
    value="buttonText"
    [onClick="handlerText"]>

С помощью атрибута name задается имя объекта submit, которое является значением одноименного свойства объекта в языке JS. В качестве значения атрибута value используется строка текста, отображаемая на кнопке. Атрибуту value в языке JS соответствует свйство value объекта submit. Для обращения к методам и свойствам объекта submit применяются выражения:

submitName.propertyName
submitName.methodName(parameters)
formName.elements[i].propertyName
tformName.elements[i].methodName(parameters)

где submitName - значение атрибута name объекта submit, а formName - либо значение атрибута name объекта form, свойством которого является данный объект submit, либо элемент массива forms, например forms[0] для первой формы в текущем документе. Не правда ли все похоже на объект reset, рассматриваемый ранее, только назначение их разноое. Они и применяются зачастую вместе. Свойства, методы и обработчики событий тоже похожи.

Методы и Обработчики событий

Объект submit имеет метод click(). Вообще метод Click() обычно не используют, - не всегда корректно работает.
Для объекта submit можно определить только один обработчик события onClick().

Объект text

Объект text - это поле ввода, определяемое в теге <input type="text"> и предоставляющее пользователю возможность вводить текстовые данные. Объект text является свойством объекта form и должен размещаться в контейнере <form> . . . </form>. Объекты text содержат данные, которые можно и читать, и динамически изменять в JS-прграммах.

Синтаксис тега:

<input [type="text"]
    name="textName"
    value="textValue"
    size=integer
    [onBlur="handlerText"]
    [onChange="handlerText"]
    [onFocus="handlerText"]
    [onSelect="handlerText"]>

С помощью атрибута name задается имя объекта text, которое можно использовать в JS-прграммах. Этому атрибуту в языке JS соответствует свойство name объекта text. Значение атрибута value определяет содержимое поля по умолчанию. Атрибуту value тега <input> соответствует свойство value объекта text, а также свойство defaultValue, значение которого сохраняет содержимое текстового поля, заданное по умолчанию. Присвоив нужное значение атрибуту size, можно установить размер поля в символах. По умолчанию значением атрибута type для объектов text является строка "text", т.е. если атрибут type в определении тега <input> опустить, то создаваемый элемент формы будет полем ввода. Для обращения к методам и свойствам объекта text используют выражения вида:

textName.propertyName
textName.methodName(parameters)
formName.elements[i].propertyName
tformName.elements[i].methodName(parameters)

типичные для всех элементоов формы. Строка textName - имя объекта text, заданное с помощью атрибута name в теге <input>, а стрка formName - соответственно имя формы, в которой и определен данный объект.

Свойства

Свойство defaultValue соответствует атрибуту value. Значением свойства value является текущее значение объекта text. Свойство name соответствует атрибуту name объекта text, а свойство type - атрибуту type и содержит в данноом случае значение "text".

Методы и обработчики событий

Объект text имеет три метода: focus(), blur() и select(). Для объектов text можно определить четыре обработчика событий: onBlur, onChange, onFocus и onSelect. Более подробно мы будем рассматривать обработчики событий позже отдельно, а сейчас пока будем пользоваться в примерах без лишних комментариев. Назначение некоторых ясно из их названия.

Пример:

Рассмотрим пример приведенный выше:

<form>
<B>Пример:</B>
<input type="text"
name="exeName"
value="Это поле ввода"
size=20
onFocus="this.select()">
</form>

В данном примере обработчик события, связанного с получением фокуса ввода, onFocus применяется для выделения текста в поле ввода. Для самого выделения используется метод select(), а обращение к полю ввода осуществляется при помощи оператора this.

Объект textarea

Объект textarea соответствует области текста, определенной в форме. Объекты textarea являются свойствами объекта form и должны быть помещены в контейнер <form> . . . </form>. Элементы этого типа используются для ввода нескольких строк текста в свободном формате. Также его часто используют для вывода примеров текста например JS-программы, сформированнго текста предлагаемого для размещения например баннера и др.

Тег, задающий область текста, имеет синтаксис:

< textarea name="textareaName"
rows="integer"
cols="integer"
[onBlur="handlerText"]
[onChange="handlerText"]
[onFocus="handlerText"]
[onSelect="handlerText"]>
[textToDisplay]
[wrap="hand | soft"]
</textarea>

Атрибут name определяет имя области текста, и ему соответствует свойство name объекта textarea. Атрибуты rows и cols задают размеры пля области в симвоолах. Строка textToDisplay представляет собой необязательный текст, помещенный в область текста при первом отображении на экране. Эта строка является значением свойства defaultValue объекта textarea в языке JavaScript. Форматирование в этй строке и происходит обычным способом, тоесть без тегов <br> и других, а также теги отображаются здесь как они написаны, тоесть теги в этой строке не работают. Значение атрибута wrap определяет, каким образом введенный в поле текст разбивается на строки. Так, значение soft задает отображение строк в области текста полностью. В противном случае текст между двумя символами конца строки (Enter) размещается в одноой строке.
Для обращения к методам и свойствам объекта textarea применяются типичные для элементов формы выражения:

textareaName.propertyName
textareaName.methodName(parameters)
formName.elements[i].propertyName
formName.elements[i].methodName(parameters)

где textareaName - это значение атрибута name тега <textarea>, а formName - имя формы, в котрой определен объект textarea.
Содержимое объектов textarea в JS-программах может динамически изменяться путем присваивания нового значения их свойству value. Например:
document.forms[0].myArea.value = "Новый текст"

Свойства

Объекты textarea имеют свойства:

defaultValue - значение содержит текст, помещенный в контейнер <textarea> . . . </textarea>
name - соответствует атрибуту name тега <textarea>
value - соответствует текущему значению объекта textarea т.е. текущему содержимому области текста;
type - для объекта textarea всегда содержит значение "textarea".

Методы

Метод focus() используется для помещения фокуса ввода в область текста, а метод blur() - для его удаления из области текста. Метод select() применяется для выделения информации в области текста. Очень удобный метод, когда нужно выделить большой по объему текст.

Обработчики событий

В теге <textarea> можно определить четыре атрибута, задающие обработку событий, связанных с объектом textarea. С помощью атрибута onBlur определяется реакция объекта на удаление фокуса ввода из области текста, а с помощью атрибута onChange - реакция объекта на изменение содержимого области текста. Атрибуты onFocus и onSelect активизируют обработку событий, связанных соответственно с получением фокуса ввода и с выделением данных в области текста.

Пример: Разберем пример. Выше приведена его действующая модель:

<script language "JavaScript">

</script>
<form>
Измените этот текст и перейдите в другое поле формы:<BR>
<textarea name="tarea" rews=5 cols=40 onChange="sCange()">
Это объект textarea
Пример текста по умолчанию
</textarea>
<P>
<input type="text" size=35 name="stxt">
</form>

Здесь содержится два поля. Первое поле является областью текста (textarea). При изменении содержимого текстовой области активизируется функция sCange(), которая выводит окно сообщения, информирующее о том, что текст изменялся. Второе поле является обычным полем ввода, я его разместил для того, чтобы было куда переместить фокус.

Главная

Используются технологии uCoz