При подготовке статьи были использованы материалы Интернет-Университета Информационных Технологий http://www.intuit.ru/, курс Введение в JavaScript, справочник Клиентский JavaScript.
В 1995 году в компании NetScape был разработан язык программирования JavaScript для управления HTML страницами на клиентской стороне. Основная идея JavaScript состоит в возможности изменения значений атрибутов HTML-контейнеров и свойств среды отображения в процессе просмотра HTML-страницы пользователем. При этом перезагрузки страницы не происходит.
Существует совместимая с JavaScript реализация языка программирования Jscript от Microsoft. Jscript расширенная версия языка JavaScript. Таким образом JavaScript является подмножеством языка Jscript.
JavaScript стандартизован ECMA (European Computer Manufacturers Association - Ассоциация европейских производителей компьютеров). Соответствующие стандарты носят названия ECMA-262 и ISO-16262. Этими стандартами определяется язык ECMAScript.
Для создания механизма управления страницами на клиентской стороне было предложено использовать объектную модель документа. Суть модели в том, что каждый HTML-контейнер - это объект, который характеризуется тройкой:
Где key1.jpg это 
, key2.jpg это 
, key3.jpg это 
Тег <SCRIPT>, применяемый на HTML странице для подключения JavaScript кода может быть использован двумя способами:
<SCRIPT type="text/javascript">
Код программы
</SCRIPT>
<SCRIPT type="text/javascript" src="scripts/JavaScriptFile.js"></SCRIPT>
В первом случае код JavaScript программы помещается на HTML странице между открывающим и закрывающим тегами SCRIPT.
Во втором случае код JavaScript программы находится во внешнем текстовом файле, URL которого указан в атрибуте src тега SCRIPT.
Код JavaScript программы может объявлять функции, предназначенные для использования на HTML странице или представлять собой код, предназначенный для непосредственного выполнения браузером в процессе загрузки страницы.
Код, предназначенный для непосредственного выполнения браузером в процессе загрузки страницы обычно располагают в теле HTML документа (контейнер <BODY>), а объявления функций помещают в голову документа (контейнер <HEAD>)
Пример
<BODY>
<P>
Нижеследующий абзац на этой странице сгенерирован с помощью JavaScript программы в момент загрузки страницы.
<P>
<SCRIPT>
d = new Date();
document.write("<BR>");
document.write("Момент загрузки страницы: "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds());
document.write("<BR>");
</SCRIPT>
...
</BODY>
В процессе загрузки этой страницы HTML-парсер браузера, дойдя до тега <SCRIPT>, передаст управление JavaScript-интерпретатору. JavaScript-интерпретатор выполнит код программы, заключенный между тегами <SCRIPT>, и вернет управление HTML-парсеру для дальнейшего формирования страницы.
JavaScript-интерпретатор, выполняя этот фрагмент JavaScript кода, создаст объект d класса Date(). Методом write() допишет в текущий документ теги <BR>. При помощи методов getHours(), getMinutes, getSeconds() объекта d получит строки часы, минуты, секунды. Операторы + объединяют строки "Момент загрузки страницы: ", часы, ":", минуты, ":", секунды в одну строку, а JavaScript-интерпретатор методом write() допишет эту строку в текущий документ.
Пример
.......
<SCRIPT>
function myFunction()
{
d = new Date();
alert("Точное время: "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds());
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type=button value="Получить текущее время" onClick="myFunction()">
</FORM>
.......
В процессе загрузки HTML странтицы в оперативной памяти компьютера будет создана функция myFunction(). Предназначение этой функции - вывести на экран окно предупреждения с текщим временем.
У кнопки, расположенной на нашей странице, перепрограммировано событие onClick. Щелчек мыши по кнопке вызовет на выполнение функцию myFunction(). Когда будет передано управление в функцию myFunction(), будет создан объект d класса Date(), и строка, содержащая текст "Точное время: чч:мм:сс". Будет вызвано окно предупреждения с тестом "Точное время: чч:мм:сс".
К классу объектов Window относятся объект Window и объект Frame. Объект Window ассоциируется с окном программы-браузера, а объект Frame - с окнами внутри окна браузера. Объекты типа Window обладают свойствами status, location, history, navigator. Также к ним применимы методы open(), close(), focus(). Событий у объектов типа Window нет.
Полем статуса (status bar) называют среднее поле нижней части окна браузера сразу под областью отображения HTML-страницы. В поле статуса отображается информация о состоянии браузера. Существует два состояния браузера и два свойства управляют выводом информации в поле статуса:
- window.defaultStatus - в браузере нет никаких событий;
- window.status - когда происходят какие-то события.
Пример
<BODY onLoad="window.defaultStatus='с браузером никаких событий не происходит';">
<A href=#status onMouseover="window.status='Мышь навели на ссылку';return true;">
Наводите и убирайте курсор мыши на это сообщение
</A>
</BODY>
Пример
...........
<SCRIPT>
function time_scroll()
{
d = new Date();
window.status = d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
setTimeout('time_scroll();',500);
}
</SCRIPT>
</HEAD>
<BODY onLoad="time_scroll();">
<H2 align=center>Часы в поле статуса</H2>
</BODY>
В поле location отображается адрес (URL) загруженного документа.
Location - это объект. Поле Location является подклассом класса Window и класса URL. Объект location наследует свойства URL. Также к нему применимы методы reload() и replace(). Событий у объекта location нет.
Пример
<A name="zakladka"></A>
<H2 align=center>Свойства объекта location</H2>
<SCRIPT>
document.write("<BIG>window.location.href = </BIG>"+window.location.href+"<BR>");
document.write("<BIG>window.location.protocol = </BIG>"+window.location.protocol+"<BR>");
document.write("<BIG>window.location.hostname = </BIG>"+window.location.hostname+"<BR>");
document.write("<BIG>window.location.host = </BIG>"+window.location.host+"<BR>");
document.write("<BIG>window.location.port = </BIG>"+window.location.port+"<BR>");
document.write("<BIG>window.location.pathname = </BIG>"+window.location.pathname+"<BR>");
document.write("<BIG>window.location.search = </BIG>"+window.location.search+"<BR>");
document.write("<BIG>window.location.hash = </BIG>"+window.location.hash+"<BR>");
</SCRIPT>
Метод reload() используется только с двумя аргументами reload(true) или reload(false). Reload(true) выполняет действия, как при щечке мыши по кнопке "Обновить", а Reload(false) - "Shift+Обновить". В первом случае проверяется время последней модификации документа на сервере и страница обновляется если ее копия в кеш устарела. Во втором случае, страница обновляется не смотря ни на что.
Метод replace() загрузит страницу, URL которой является аргументом метода. Аналогичный результат можно достичь меняя свойства объекта location. Но, применение методов объекта location не помещает посещаемую страницу в history, а изменение свойств - помещает.
Пример
<P><U onMouseOver="this.style.cursor='hand';"
onclick="window.location.href='http://lightsnack.narod.ru/index.htm';">
Это самодельная ссылка c использованием свойства window.location.href на "Поваренную книгу"</U></P>
<P><U onMouseOver="this.style.cursor='horse.ani';"
onclick="window.location.replace('http://lightsnack.narod.ru/index.htm');">
Это самодельная ссылка c использованием метода replace() на "Поваренную книгу"</U></P>
Где horse.ani - это изображение курсора
Обратите внимание - в первом случае, кнопка браузера "Назад" работает, а вовтором - нет.
Встроенные в HTML документ гипертекстовые ссылки составляют массив гипертекстовых ссылок документа (массив Links[n] объектов Link). Объекты Link могут быть созданы HTML тегами A или AREA или вызовом метода String.link. На JavaScript к объекту Link можно обратиться по индексу в этом массиве.
Обратите внимание, предыдущая гиперссылка, в которой используется URL схема размещения JavaScript кода, также вошла в массив объектов Link.
Содержит массив информации о URL, которые были посещены пользователем в данном окне.
History обладает свойствами current - текущий URL, length - количество в списке, next - следующий, previous - предыдущий URL в списке. Программный доступ к значениям URL history из соображений безопастности запрещен.
К history применимы методы back(), forward(), go().
Пример
<FORM>
<INPUT type=button value="Назад" onclick="window.history.back();">
<INPUT type=button value="Вперед" onclick="window.history.forward();">
<INPUT type=button value="go(1)" onclick="window.history.go(1);">
<INPUT type=button value="go(-1)" onclick="window.history.go(-1);">
</FORM>
Объект navigator посредством своих свойств и методов позволяет определить тип браузера и его возможности.
Пример
<P>navigator.userAgent =
<SCRIPT>
document.write(window.navigator.userAgent);
</SCRIPT>
<P>navigator.appName =
<SCRIPT>
document.write(window.navigator.appName);
</SCRIPT>
<P>navigator.appCodeName =
<SCRIPT>
document.write(window.navigator.appCodeName);
</SCRIPT>
<P>navigator.appVersion =
<SCRIPT>
document.write(window.navigator.appVersion);
</SCRIPT>
<P>navigator.language =
<SCRIPT>
document.write(window.navigator.language);
</SCRIPT>
<P>navigator.mimeTypes.length =
<SCRIPT>
document.write(window.navigator.mimeTypes.length);
</SCRIPT>
<P>navigator.navigator.mimeTypes[0] =
<SCRIPT>
document.write(window.navigator.mimeTypes[0]);
</SCRIPT>
<P>navigator.platform =
<SCRIPT>
document.write(window.navigator.platform);
</SCRIPT>
<P>navigator.plugins.length =
<SCRIPT>
document.write(window.navigator.plugins.length);
</SCRIPT>
<P>Разрушение данных включено? navigator.taintEnabled() =
<SCRIPT>
document.write(window.navigator.taintEnabled());
</SCRIPT>
<P>Включена поддержка Java? navigator.javaEnabled() =
<SCRIPT>
document.write(window.navigator.javaEnabled());
</SCRIPT>
Если необходимо закрыть текущее окно, то необходимо воспользоваться методом window.close() или self.close()
Если необходимо закрыть родительское окно, т.е. окно, из которого было открыто текущее, то - window.opener.close()
Чтобы закрыть из фрейма окно, содержащее фреймовую структуру, используйте window.parent.close()
Если необходимо закрыть произвольное окно, то тогда сначала нужно получить его идентификатор id=window.open(), а затем, в теле программы можно будет его закрыть - id.close()
Как видно из последнего примера, закрывают окно не по имени (значение атрибута TARGET тут ни при чем), а используют указатель на объект.
Пример
<FORM>
<INPUT TYPE=button VALUE="Открыть новое окно"
onClick="mywin=window.open('about:blank','test1','height=200,width=200');">
<BR>
<INPUT TYPE=button VALUE="Закрыть новое окно"
onClick="mywin=mywin.close();">
</FORM>
<A href="#" onclick="window.close(); return false;" class="allnews">Закрыть окно</А>
Пример использования window.focus() и window.blur()
<FORM>
<INPUT TYPE=button VALUE="Открыть новое окно"
onClick="mywin=window.open('about:blank','test1','height=200,width=400');">
<BR>
<INPUT TYPE=button VALUE="Открыть поток ввода в новое окно"
onClick="mywin.document.open(); mywin.document.write('посылаю вам телеграмму.');">
<BR>
<INPUT TYPE=button VALUE="Передать фокус в новое окно"
onClick="mywin.focus();">
<BR>
<INPUT TYPE=button VALUE="Убрать фокус с нового окна"
onClick="mywin.blur();">
<BR>
<INPUT TYPE=button VALUE="Закрыть новое окно"
onClick="mywin=mywin.close();">
</FORM>
Два метода объекта window управляют потоками вычислений на HTML страницах:
Событие onClick кнопки пуск вызывает на ваполнение пользовательскую функцию pusk(), которая выводит в текстовое поле на форме время, отсчитываемое в секундах, а также запускает метод setTimeout(). Метод setTimeout("pusk();",500) вызванный в функции pusk(), порождает новый поток вычислений - объект potok01. Potok01 вызовет через 500mc функцию pusk(), она обновит время в текстовом поле формы, и в следующий раз опять будет вызвана методом setTimeout() через 500mc.
Событие onClick кнопки стоп вызывает на ваполнение пользовательскую функцию stop(), которая вызовет метод clearTimeout(potok01) и уничтожит наш поток вычислений potok01.
Фреймы - это окна располагаемые в главном окне браузера. В качестве поля статуса фреймы используют поле статуса окна браузера. К фреймам из программы на JavaScript можно обратиться по имени или по индексу. Фреймы, созданные на HTML странице составляют одномерный массив фреймов frames[i]. Нумерация фреймов в массиве происходит автоматически от 0, в том порядке, в котором фрейм создан на HTML странице. Старшее для фреймов окно, окно в котором они расположены, - top (верхнее) или parent (родитель).
Пример
Так определена фреймовая структура
<FRAMESET cols="300,*">
<FRAME src="example016a.htm">
<FRAME name="fr01" src="Aechmea.htm">
</FRAMESET>
А это листинг из левого фрейма
<FORM>
<INPUT type=button value="Поменять рисунки"
onClick="parent.frames[1].document.images[2].src=parent.frames[1].document.images[0].src;
top.frames[1].document.images[0].src=top.frames[1].document.images[1].src;
top.fr01.document.images[1].src=top.fr01.document.images[2].src;">
<INPUT type=button value="Обновить фрейм" onClick="parent.frames[1].location.href='Aechmea.htm';">
</FORM>
Кнопки в левом фрейме разными способами управляют содержимым правого фрейма.
Формы и поля форм на HTML странице могут быть поименованы с помощью атрибутов name. Из JavaSscript программы, программист может обратиться к форме и ее элементам управления (к полям) по имени, или как к элемнтам массива. Для всех форм на HTML документе создается массив forms[i], а для всех элементов управления на форме - массив elements[i]. Следует иметь в виду что, если некоторые поля формы имеют одинаковое имя, то для них создается одноименный массив элементов.
Пример
<FORM name=For01 method=post action="JavaScript:void(0);">
<INPUT name=Inp01 type=text size=30 value="Это текстовое поле">
<INPUT name=Inp02 type=button value="Это кнопка"><BR>
<BR>
<INPUT name=Inp03 type=button value="Поменять value"
onClick="a=document.For01.Inp02.value;
document.forms[0].elements[1].value=document.forms[0].elements[0].value;
document.For01.Inp01.value=a;">
<FORM>
Обычно, значением свойства action объекта form является URL CGI-скрипта, к которому должен будет обратиться ваш браузер после того, как вы нажмете кнопку "submit" на форме. Вместо URL в свойстве action можно указать JavaScript программу.
Пример
<FORM name=For01 method=post action="JavaScript:void(0);">
<INPUT name=Inp01 type=text size=100 value="window.alert('Привет');"><BR>
<INPUT name=Inp02 type=button value="Загрузить JavaScript в action"
onClick="document.For01.action='JavaScript:'+document.For01.Inp01.value+';void(0);' "><BR>
<INPUT name=Inp03 type=button value="Посмотреть свойство Form.action"
onClick="document.For01.Inp01.value=document.For01.action;"><BR>
<INPUT type=submit value="Продемонстрировать JavaScript в action">
<FORM>
Окончательно URL формируется в момент события submit. В случае использования в action JavaScript программы, эта программа будет передана JavaScript интерпретатору на выполнение после наступления события submit. А до этого момента, мы можем менять код этой программы, то-есть код JavaSript программы может быть сгенерирован в процессе просмотра HTML страницы пользователем.
Пример, позволяющий писать и исполнять JavaScript код в интерактивном режиме
Для успешного выполнения JavaScript кода, указанного в action, элемент Form используйте с атрибутом method=post. Метод get дописывает к URL, указанному в action знак "?", который будучи добавлен к JavaScript программе вызовет ошибку. Применение метода void(0) в JavaScript программе, указанной в action, отменяет обращение браузера к серверу.
Значение свойства method объекта form можно менять в программе на JavaScript.
Свойство target объекта Form - определяет имя окна, в которое следует загружать результат обращения к CGI-скрипту.
Из JavaSscript программы, программист может обратиться к элементам управления (к полям) формы по имени, или как к элемнтам массива. Массив элементов формы (объектов) elements[i] имеет нумерацию от 0.
Значение свойства формы elements.length равно общему количеству элементов на форме. Количество элементов на первой форме докумета будет равно document.forms[0].elements.length
Свойство encoding объекта Form содержит значение HTML атрибута enctype, который указывает на возможность передачи данных из формы на сервер с перекодированием или без него. Значение "multipart/form-data" позволяет использовать национальный алфавит. Значение "application/x-www-form-urlecoded", используемое по умолчанию, перед передачей данных из формы на сервер, перкодирует символы из национального алфавита в &-последовательности.
Метод reset() объекта Form позволяет установить значения полей формы по умолчанию, аналогично использованию кнопки reset на форме. Метод reset() объекта Form более гибкий - так как не ограничен средствами, предоставляемыми кнопкой.
Пример
<FORM>
<INPUT type=text value="Значение по умолчанию" size=25>
<INPUT type=button value="Изменим текст в поле ввода" onClick="document.forms[0].elements[0].value='Изменили текст';"><BR>
<A href="javascript:document.forms[0].reset();void(0);"> Установить значение по умолчанию</A>
</FORM>
Метод submit() объекта Form позволяет отправить данные из полей формы на сервер, аналогично использованию кнопки submit на форме.
Пример
<FORM action="JavaScript:window.alert('Данные отправлены');void(0);">
<INPUT type=text value="ваши данные" size=25><BR>
<A href="javascript:document.forms[0].submit();void(0);">Отправить данные</A>
</FORM>
Событие onReset - позволяет переопределить функцию метода reset().
Пример
<FORM onReset="window.alert('Сейчас восстановим');return true;">
<INPUT type=text value="Значение по умолчанию" size=25><BR>
<INPUT type=reset value="RESET">
</FORM>
Событие onSubmit - наступает перед передачей введенных в форму данных на сервер.
Пример
<FORM onSubmit="if(document.forms[0].elements[0].value=='')
{window.alert('Заполните форму');return false;}
else
{window.alert('Форма отправлена');return true;};">
<INPUT type=text value="" size=25><BR>
<INPUT type=submit value="SUBMIT">
</FORM>
Объект класса Text (текстовое поле) можно создать в форме с помомощью THML тега <INPUT type=text>
Свойства текстовых полей
Методы текстовых полей
События текстовых полей
Путем перепрограммирования события onFocus, с помощью метода blur(), легко защитить текстовое поле ввода от изменения пользователем.
Пример
<FORM>
<INPUT type=text value="Попробуйте изменить этот текст" size=35 onFocus="this.blur()">
</FORM>
Одним из важных элементов интерфейса пользователя является меню. В HTML-формах для реализации меню используют контейнер SELECT, который, в свою очередь, вмещает в себя контейнеры OPTION. Эти объекты представляют собой списки вариантов выбора. При этом список может "выпадать" или прокручиваться внутри окна. Поля типа select позволяют выбрать из списка только один вариант, либо отметить несколько вариантов. Для управления полями типа select в JavaScript существует объект Select и подчиненный ему объект Option.
Объект Option интересен тем, что в отличие от многих других объектов JavaScript, имеет конструктор. Это означает, что программист может сам создать объект Option:
Свойства объекта Option:
Методов и событий у объекта Option нет.
У объекта Option нет свойства Name поэтому, к встроенным в документ объектам Option можно обращаться только как к элементам массива options[] объекта Select.
Свойства объекта Select:
Методы объекта Select:
События объекта Select:
Обратиться к объекту Select из JavaScript можно по имени или как к элементу на форме (document.forms[0].elements[0]).
Пример
<SCRIPT>
function insNew()
{
i=document.forms[0].elements[2].length;
document.forms[0].elements[2].options[i] = new Option(document.forms[0].elements[0].value);
};
function delSel()
{
i=document.forms[0].elements[2].selectedIndex;
document.forms[0].elements[2].options[i] = null;
};
</SCRIPT>
<FORM>
<P>Новый пункт меню:
<INPUT type=text value="Пункт №2" size=35>
<INPUT type=button value="Добавить" onClick="insNew();"><BR>
<SELECT size=10 multiple>
<OPTION> Пункт №1
</SELECT><BR><BR>
<INPUT type=button value="Удалить" onClick="delSel();"><BR>
</FORM>
В приведенном примере на HTML странице в форме создан объект Select, c возможностью множественного выбора обпций, и один подчиненный ему объект Option. В этой же форме есть две кнопки и текстовое поле. Кнопка "Дбавить" вызывает пользовательскую функцию insNew(), а "Удалить" - delSel().
Функция insNew() с помощью конструктора new Option() создает новый объект Option со знечением text равным значению value текстового поля на форме. Для вычисления количества объектов Option воспользуемся свойством length объекта Select. Это значение используем в качестве индекса для нового обекта options[i] . Так как нумерация элементов массива объектов options[i] начинается с 0, то options[i] в данном контексте указывает на следующий, еще не созданный объект Option, который будет создан с помощью конструктора new Option().
Функция delSel(), с помощью свойства selectedIndex объекта Select вычисляет индекс выбранного на форме объекта Option. Путем присваивания этому объекту значения null, данный объект уничтожается, исчезает соответствующий этому объекту пункт меню.
В приведенном примере мы создали объект Select типа "select-multiple". Это позволяет нам с помощью клавиши "Ctrl" выбрать несколько строк меню. Но удалить все выбрнные объекты за один раз пользовательская функция delSel() не сможет, так как, используемое в ней свойство selectedIndex объекта Select указывает на номер только первого из выбранных объектов Option. Для того, чтобы удалить все выбранные объекты, необходимо переписать функцию delSel(). Необходимо организовать цикл, в котором будет проверено свойство selected каждого из объектов Option, и выбранные объекты будут удалены.
Пример
function delSel()
{
i=document.forms[0].elements[2].length;
for(n=i;nɬn--)
{
i--;
if(document.forms[0].elements[2].options[i].selected==true)
{
document.forms[0].elements[2].options[i] = null;
};
};
};
Свойства объекта Button:
Методы объекта Button:
События объекта Button:
Объект Image создается в тот момент, когда в документ, c помощью тега HTML <IMG>, встраивается картинка. Кроме того, объект Image можнт быть создан программистом. Объекты Image обладают свойствами и с ними могут происходить события. Методов у объектов Image нет.
События объекта Image:
Свойства объекта Image:
Ко встроенному графическому объекту можно обратиться по индексу, а если эти картинки поименовать, к ним можно обращаться по имени.
Пример
<IMG name=flower src=Aechmea/Aechmea2.jpg border=0 hspace=10 onClick="window.alert('Image name:'+document.flower.name)">
<A href="javascript:void(0);" onClick="window.alert('Image name:'+document.images[1].name)">
<IMG name=aechmea SRC=Aechmea/Aechmea1.jpg border=0 hspace=10>
</A>
Где Aechmea2.jpg это: 
, а Aechmea1.jpg это: 
К свойству name первой картинки мы обращаемся используя, определенное с помощью HTML атрибута name, имя объекта document.flower.name
Во втором случае, мы обращаемся к объекту, как к элементу массива document.images[1].name. В документе элементами массива images[] являются объекты image пронумерованные в порядке создания с помощью тегов <IMG>, начиная с 0.
Следует обратить внимание на то, что щелчек мыши по обеим картинкам вызывает окно alert, но над первой картинкой курсор не меняет своего изображения, а над второй меняет, как над ссылкой. В первом случае - переопределено событие onClick объекта Image, а во втором случае - объект Image находится в контейнере тега <A> и является ссылкой.
Объект Image имеетт встроенный конструктор и с помощью операции new можно создать новый экземпляр объекта image в оперативной памяти компьютера.
Загрузить изображение из сети во вновь созданный объект Image можно следующим образом:
Предванительную загрузку изображений в оперативную память компьютера можно использовать, например, для создания мультипликации, где скорость смены картинок играет существенную роль.
Пример
<SCRIPT>
pict=new Array(9)
n=0
while(n < 9)
{
pict[n] = new Image();
pict[n].src ="example027/"+n+".jpg";
n++;
};
k=1;
m=0;
function myA()
{
m=m+k;
document.images[0].src=pict[m].src;
if (m > 0 && m < 8)
{
toA=setTimeout('myA();',100);
};
};
</SCRIPT>
</HEAD>
<BODY>
<IMG src="example027/0.jpg" onMouseOver ="myA();" onMouseOut="k=-k; clearTimeout(toA);">
Где 0.jpg - 
, 1.jpg - 
, 2.jpg - 
, 3.jpg - 
, 4.jpg - 
, 5.jpg - 
, 6.jpg - 
, 7.jpg - 
, 8.jpg - 
Изображения, нарезанные на прямоугольные области и расположенные в таблице, в случае использования JavaScript, придадут вашим интернет страницам больше интерактивности.
Пример
Создавая меню, интересных эффектов можно добиться, используя графику.
Пример
<SCRIPT>
x1=new Image(); x1.src='example029/1x23.gif';
x4=new Image(); x4.src='example029/4x23.gif';
function menuover(N)
{
document.menu01[N].src=x4.src;
};
function menuout(N)
{
document.menu01[N].src=x1.src;
};
</SCRIPT>
<TABLE width=200 border=2 cellpadding=2 cellspacing=3 bgcolor="#ffcc99">
<TR><TD onMouseOver="menuover(0)" onMouseOut="menuout(0)">
<IMG name="menu01" src="example029/1x23.gif" border=0 align=absmiddle>
<A href="http://lightsnack.narod.ru/" target="_blank">Поваренная книга</A></TD></TR>
<TR><TD onMouseOver="menuover(1)" onMouseOut="menuout(1)">
<IMG name="menu01" src="example029/1x23.gif" border=0 align=absmiddle>
<A href="http://soldierly.narod.ru/" target="_blank">Дембельский альбом</A></TD></TR>
<TR><TD onMouseOver="menuover(2)" onMouseOut="menuout(2)">
<IMG name="menu01" src="example029/1x23.gif" border=0 align=absmiddle>
<A href="http://semester.narod.ru/" target="_blank">Несколько учебников</A></TD></TR>
где 1x23.gif - 
, 4x23.gif - 
Литералы
Литералом называют данные (числовые или строковые), которые используются в программе непосредственно. Литералы, в программе на JavaScript используются в операциях присваивания значений переменным, или в операциях сравнения. Литерал может участвовать в логических, математических или строковых операциях.
Значения
Типы данных
В JavaScript нет необходимости в объявлении типа данных переменной. Тип данных переменной определяется автоматически в момент присвоения ей значения. Конвертация типа данных происходит автоматически.
<SCRIPT>
a="19"
b="трасса Е"
c=b+a*5
document.write(c)
</SCRIPT>
В приведенном выше примере переменным a и b сначала присвоили значения строкового типа. В процессе вычисления выражения b+a*5, строковое значение переменной a будет преобразовано в число, с которым будет выполнена математическая операция - умножение. Результат этой операции - число, в дальнейшем будет преобразован в строку символов и с ним будет произведена строковая операция - конкатенция строк (объединение строк). В итоге, переменной c будет присвоено значение строкового типа. Приведенный скрипт напечатает - трасса Е95.
Объявление переменной
Область видимости переменных
Массивы определяемые пользователем
Создать массив, Array-объект можно двумя способами:
Операции присваивания
Унарные арифметические операции
Результат операции зависит от того, знак операции записан как префикс или постфикс
Операции сравнения
Логические операции
Условная операция
condition ? val1 : val2
если condition - условие принимает значение true, результат операции равен val1, в противном случае - val2.
Условные операторы
if (condition)
{ statements1 }
else
{ statements2 }
если condition - условие принимает значение true, выполняется statements1, в противном случае - statements2.
switch (expression)
{
case label1 : statement1; break;
case label2 : statement2; break;
...
default : statementN;
}
если expression - выражение принимает значение совпадающее с одним из label, выполняется соответствующая часть программы statementsX. Если совпадений не обнаружено, по умолчанию (default), выполняется код statementN.
Операторы циклов
for (initialExpression; condition; incrementExpression)
{
statements
}
В начале, выполняется initialExpression - выражение, инициализирующее счетчик цикла. Затем проверяется условие condition и если оно вычисляется в true, то выполняются операторы тела цикла statements. Затем выполняется операция incrementExpression, обычно оказывающая влияние на значение условия condition; проверяется условие condition и если оно вычисляется в true, то выполняются операторы тела цикла statements. И таким образом, цикл повторяется до тех пор, пока condition вычисляется в true.
do
{
statement
}
while (condition)
Операторы цикла do...while, выполняются до тех пор, пока условие condition вычисляется в true.
while (condition)
{ statements }
Операторы цикла while, выполняются до тех пор, пока условие condition вычисляется в true.
Разница между циклами do...while и while состоит в том, что в цикле do...while, операторы цикла (statements) выполняются не менне одного раза, а в цикле while, только в том случае, если условие condition вычисляется в true.
Есть и общие черты у этих двух циклов - программист должен позаботиться о выходе из цикла в теле цикла statements, то есть, необходимо произвести такие манипуляции с аргументами выражения condition, что бы, однажды оно приняло значение false и цикл смог бы прерваться.
for ... in - цикл, позволяет прочитать все свойства объекта, указанного в качестве авгумента
for(v in window.document)
{
document.write(v+"<BR>");
}
Цикл из этого примера перечислит (распечатает на интернет странице) все свойства объекта document.
Комментарии
Объект Math
Объект Math обладает свойством PI. Math.PI хранит значение числа pi (3.141...).
Ниже перечислены методы Объекта Math и возвращаемое ими значение.
Объект String
Объект String обладает свойством length.
Ниже перечислены методы Объекта String.
Занимательные коды
При подготовке статьи были использованы материалы Интернет-Университета Информационных Технологий http://www.intuit.ru/, курс Введение в JavaScript, руководство Клиентский JavaScript, справочник Клиентский JavaScript, справочник HTML manual.
Рекомендуемая литература: "STM Цвет сайта Советы вебмастеру",
