В 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.
Объектная модель JavaScript
Для создания механизма управления страницами на клиентской стороне было предложено использовать объектную модель документа. Суть модели в том, что каждый HTML-контейнер - это объект, который характеризуется тройкой:
свойства
методы
события
Объектами в JavaScript также является окно браузера и объект Navigator.
Объекты с одинаковым набором свойств, методов и событий объединяются в классы.
Программист может изменять значения свойств объектов, применять методы объектов и управлять реакцией на события объектов.
Свойства HTML тегов заданы их атрибутами.
Методы JavaScript определяют функции изменения свойств объекта.
С HTML объектами могут происходить события (onLoad, onClick …). Программист JavaScript может изменить обработчик события, т.е. переписать программу обработки события для объекта.
В этом примере на HTML странице создан объект myform1 класса FORM. В myform1 создан объект x1 класса поле ввода типа text. Также созданы объекты (HTML-контейнеры) <P> и <I> с переопределенными обработчиками событий - onmouseout для <P> и onmouseover для <I>. По событию onmouseover объектов контейнеров <I> и onmouseout у <P> меняется значение свойства (атрибута) value объекта X1.
Переопределенное программистом событие onclick объекта (тега) <A> вызывает метод close() объекта window и закрывает окно браузера.
В JavaScript, как в объектно-ориентированном языке программирования существует иерархия классов. Для обращения к любому объекту или его свойству указывают полное или частичное имя этого объекта или свойства объекта, начиная с имени объекта старшего в иерархии, в который входит данный объект:
Способы размещения кода JavaScript на HTML странице
Исполняет JavaScript-код браузер. В него встроен интерпретатор JavaScript. Выполнение программы зависит от того, когда и как этот интерпретатор получает управление. Существует несколько способов применения JavaScript:
гипертекстовая ссылка (схема URL)
обработчик события (handler)
подстановка (entity)
вставка (контейнер SCRIPT)
URL-схема JavaScript
На HTML страницах в атрибутах href, src и action некоторых тегов указывают URL интернет ресурса. Все URL подразделяются на схемы доступа, зависящие от протокола доступа к ресурсу. Кроме того, возможно использование в схеме URL - JavaScript кода.
<A href="JavaScript:alert('Форматировать диск C:?');">Очистить компьютер от вирусов?</A>
В первом случае код 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>
В процессе загрузки 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
В поле location отображается адрес (URL) загруженного документа.
Location - это объект. Поле Location является подклассом класса Window и класса URL. Объект location наследует свойства URL. Также к нему применимы методы reload() и replace(). Событий у объекта location нет.
Метод 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>
Обратите внимание - в первом случае, кнопка браузера "Назад" работает, а вовтором
- нет.
Гипертекстовые ссылки - объекты Link
Встроенные в HTML документ гипертекстовые ссылки составляют массив гипертекстовых ссылок документа (массив Links[n] объектов Link). Объекты Link могут быть созданы HTML тегами A или AREA или вызовом метода String.link. На JavaScript к объекту Link можно обратиться по индексу в этом массиве.
Обратите внимание, предыдущая гиперссылка, в которой используется URL схема размещения JavaScript кода, также вошла в массив объектов Link.
История посещений (History)
Содержит массив информации о URL, которые были посещены пользователем в данном окне.
History обладает свойствами current - текущий URL, length - количество в списке, next - следующий, previous - предыдущий URL в списке. Программный доступ к значениям URL history из соображений безопастности запрещен.
К history применимы методы back(), forward(), go().
<P>window.open() создает
<A href="" target="_blank" onclick="window.open('about:blank','mywindow','dependent=yes,directories=yes,hotkeys=no,location=yes,menubar=yes,resizable=yes,scrollbars=yes,status=yes,titlebar=no,toolbar=yes,z-lock=yes,screenX=100,screeny=100,innerWidth=600,innerHeight=600,width=600,height=600,'); return false;">
новое окно</A>
Если необходимо закрыть текущее окно, то необходимо воспользоваться методом 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>
Событие 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;">
Кнопки в левом фрейме разными способами управляют содержимым правого фрейма.
Объект Form
Формы и поля форм на HTML странице могут быть поименованы с помощью атрибутов name. Из JavaSscript программы, программист может обратиться к форме и ее элементам управления (к полям) по имени, или как к элемнтам массива. Для всех форм на HTML документе создается массив forms[i], а для всех элементов управления на форме - массив elements[i]. Следует иметь в виду что, если некоторые поля формы имеют одинаковое имя, то для них создается одноименный массив элементов.
Обычно, значением свойства action объекта form является URL CGI-скрипта, к которому должен будет обратиться ваш браузер после того, как вы нажмете кнопку "submit" на форме. Вместо URL в свойстве action можно указать JavaScript программу.
<INPUT type=submit value="Продемонстрировать JavaScript в action">
<FORM>
Окончательно URL формируется в момент события submit. В случае использования в action JavaScript программы, эта программа будет передана JavaScript интерпретатору на выполнение после наступления события submit. А до этого момента, мы можем менять код этой программы, то-есть код JavaSript программы может быть сгенерирован в процессе просмотра HTML страницы пользователем.
Пример, позволяющий писать и исполнять JavaScript код в интерактивном режиме
Свойство method объекта Form
Для успешного выполнения JavaScript кода, указанного в action, элемент Form используйте с атрибутом method=post. Метод get дописывает к URL, указанному в action знак "?", который будучи добавлен к JavaScript программе вызовет ошибку. Применение метода void(0) в JavaScript программе, указанной в action, отменяет обращение браузера к серверу.
Значение свойства method объекта form можно менять в программе на JavaScript.
Свойство target объекта Form
Свойство target объекта Form - определяет имя окна, в которое следует загружать результат обращения к CGI-скрипту.
Свойство elements[i] объекта Form
Из JavaSscript программы, программист может обратиться к элементам управления (к полям) формы по имени, или как к элемнтам массива. Массив элементов формы (объектов) elements[i] имеет нумерацию от 0.
Значение свойства формы elements.length равно общему количеству элементов на форме. Количество элементов на первой форме докумета будет равно document.forms[0].elements.length
Свойство encoding объекта Form
Свойство encoding объекта Form содержит значение HTML атрибута enctype, который указывает на возможность передачи данных из формы на сервер с перекодированием или без него. Значение "multipart/form-data" позволяет использовать национальный алфавит. Значение "application/x-www-form-urlecoded", используемое по умолчанию, перед передачей данных из формы на сервер, перкодирует символы из национального алфавита в &-последовательности.
Метод reset() объекта Form
Метод 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 позволяет отправить данные из полей формы на сервер, аналогично использованию кнопки submit на форме.
Объект класса Text (текстовое поле) можно создать в форме с помомощью THML тега <INPUT type=text>
Свойства текстовых полей
defaultValue - содержит значение свойства value по умолчанию, определенное при создании формы. Может быть изменено программным путем.
form - Ссылка на объект форму, содержащую Text-объект.
name - содержит значение свойства name. Может быть изменено программным путем.
type - содержит значение свойства type, определенное при создании формы.
value -содержит значение свойства value. Может быть изменено программным путем.
Методы текстовых полей
blur() - Уводит фокус с объекта.
focus() - Передаёт фокус объекту.
select() - Выделяет область ввода объекта.
События текстовых полей
onBlur - Происходит, когда текстовое поле теряет фокус
onChange - Происходит тогда, когда в поле сделаны изменения и оно теряет фокус.
onFocus - Поле получило фокус
onSelect - Происходит тогда, когда пользователь выделит фрагмент текста.
Путем перепрограммирования события onFocus, с помощью метода blur(), легко защитить текстовое поле ввода от изменения пользователем.
<FORM>
<INPUT type=text value="Попробуйте изменить этот текст" size=35 onFocus="this.blur()">
</FORM>
Списки и выпадающие меню
Одним из важных элементов интерфейса пользователя является меню. В HTML-формах для реализации меню используют контейнер SELECT, который, в свою очередь, вмещает в себя контейнеры OPTION. Эти объекты представляют собой списки вариантов выбора. При этом список может "выпадать" или прокручиваться внутри окна. Поля типа select позволяют выбрать из списка только один вариант, либо отметить несколько вариантов. Для управления полями типа select в JavaScript существует объект Select и подчиненный ему объект Option.
Объект Option
Объект Option интересен тем, что в отличие от многих других объектов JavaScript, имеет конструктор. Это означает, что программист может сам создать объект Option:
text - Представляет собой отображаемый в меню текст (в HTML <OPTIONS>текст);
value - Значение, которое передается серверу при выборе пункта меню (объекта Option), если оно определено. Иначе, передается text
defaultSelected - Пункт меню выбран по умолчанию (true/false);
selected - Пункт меню выбран (true/false).
index - Индекс выбранного Option объекта в массиве элементов option[i]. (Порядковый номер элемента OPTION, нумерация начинается с нуля).
Методов и событий у объекта Option нет.
У объекта Option нет свойства Name поэтому, к встроенным в документ объектам Option можно обращаться только как к элементам массива options[] объекта Select.
Объект Select
Свойства объекта Select:
options[] - Элементы массива объектов Opions.
length - Определяет количество строк меню.
selectedIndex - Возвращает номр выбранной строки меню. Если ни одна строка не выбрана, selectedIndex имеет значение -1.
form - Ссылка на объект форму, содержащую Select-объект.
name - Содержит значение свойства name. Может быть изменено программным путем.
type - Определяет возможность или невозможность одновременного выбора нескольких пунктов меню (значения "select-multiple" или "select-one").
Методы объекта Select:
blur() - Убирает фокус со списка selection.
focus() - Передаёт фокус списку selection.
События объекта Select:
onBlur - Происходит, когда поле теряет фокус.
onChange - Происходит тогда, когда в меню сделан выбор и оно теряет фокус.
onFocus - Поле получило фокус.
Обратиться к объекту 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>
В приведенном примере на 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, и выбранные объекты будут удалены.
form - Ссылка на объект форму, содержащую объект Button.
name - Содержит значение свойства name.
type - Содержит значение свойства type.
value - Содержит значение свойства value.
Методы объекта Button:
blur() - Убирает фокус с кнопки.
click() - Симулирует щелчок мышью по кнопке.
focus() -Передаёт фокус кнопке.
События объекта Button:
onBlur
onClick
onFocus
onMouseDown
onMouseUp
Cookies
Объект Image
Объект Image создается в тот момент, когда в документ, c помощью тега HTML <IMG>, встраивается картинка. Кроме того, объект Image можнт быть создан программистом. Объекты Image обладают свойствами и с ними могут происходить события. Методов у объектов Image нет.
События объекта Image:
onAbort - Возникает, когда пользователь прерывает загрузку изображения (например, щёлкая ссылку или кнопку Stop).
onError - Возникает, когда при загрузке документа или изображения возникает ошибка.
onLoad - Возникает при выводе изображения, не только при первой загрузке, но и всякий раз при смене картинки.
onKeyDown - Возникает, если пользователь нажимает клавишу на клавиатуре.
onKeyPress - Возникает, если пользователь удерживает клавишу нажатой.
onKeyUp - Возникает, если пользователь отпустил нажатую клавишу.
onClick
onMouseDown
onMouseUp
onMouseOver
onMouseOut
Свойства объекта Image:
border - Содержит значение ширины рамки вокруг изображения.
complete - Булево значение, указывающее, завершил ли web-браузер попытку загрузки изображения.
width - Содержит значение ширины изображения в пикселах.
height - Содержит значение высоты изображения в пикселах.
hspace - Содержит значение расстояния от правого и левого краев изображения до соседних объектов в пикселах.
vspace - Содержит значение расстояния от верхнего и нижнего краев изображения до соседних объектов в пикселах.
name - Содержит имя объекта.
src - Определяет URL изображения, которое монтируется в документ.
lowsrc - Определяет URL временного изображения, которое монтируется в документ.
Ко встроенному графическому объекту можно обратиться по индексу, а если эти картинки поименовать, к ним можно обращаться по имени.
К свойству name первой картинки мы обращаемся используя, определенное с помощью HTML атрибута name, имя объекта document.flower.name
Во втором случае, мы обращаемся к объекту, как к элементу массива document.images[1].name. В документе элементами массива images[] являются объекты image пронумерованные в порядке создания с помощью тегов <IMG>, начиная с 0.
Следует обратить внимание на то, что щелчек мыши по обеим картинкам вызывает окно alert, но над первой картинкой курсор не меняет своего изображения, а над второй меняет, как над ссылкой. В первом случае - переопределено событие onClick объекта Image, а во втором случае - объект Image находится в контейнере тега <A> и является ссылкой.
Объект Image имеетт встроенный конструктор и с помощью операции new можно создать новый экземпляр объекта image в оперативной памяти компьютера.
myImage = new Image ( [width,] [height] )
Загрузить изображение из сети во вновь созданный объект Image можно следующим образом:
myImage.src = "URL picture"
Предванительную загрузку изображений в оперативную память компьютера можно использовать, например, для создания мультипликации, где скорость смены картинок играет существенную роль.
Изображения, нарезанные на прямоугольные области и расположенные в таблице, в случае использования JavaScript, придадут вашим интернет страницам больше интерактивности.
Создавая меню, интересных эффектов можно добиться, используя графику.
Литералом называют данные (числовые или строковые), которые используются в программе непосредственно. Литералы, в программе на JavaScript используются в операциях присваивания значений переменным, или в операциях сравнения. Литерал может участвовать в логических, математических или строковых операциях.
Значения
Числа, целые и с точкой.
Логические (true или false).
Строки.
null
Типы данных
В JavaScript нет необходимости в объявлении типа данных переменной. Тип данных переменной определяется автоматически в момент присвоения ей значения. Конвертация типа данных происходит автоматически.
<SCRIPT>
a="19"
b="трасса Е"
c=b+a*5
document.write(c)
</SCRIPT>
В приведенном выше примере переменным a и b сначала присвоили значения строкового типа. В процессе вычисления выражения b+a*5, строковое значение переменной a будет преобразовано в число, с которым будет выполнена математическая операция - умножение. Результат этой операции - число, в дальнейшем будет преобразован в строку символов и с ним будет произведена строковая операция - конкатенция строк (объединение строк). В итоге, переменной c будет присвоено значение строкового типа. Приведенный скрипт напечатает - трасса Е95.
Объявление переменной
Путем присваивания ей значения, x = 21
С помощью ключевого слова var, var x = 21
Имя переменной может состоять из цифр, букв английского алфавита и символа _ подчеркивания. Цифра не может быть первым символом в имени переменной. Имена переменных состоящие из одного набора букв, но набранные в разных регистрах (заглавные и прописные буквы), считаются разными.
Область видимости переменных
Глобальные переменные объявляются вне функций и доступны из любой части документа.
Локальные переменные объявляются внутри функций (обязательно с использованием ключевого слова var), и доступны только внутри этих функций.
Массивы определяемые пользователем
Создать массив, Array-объект можно двумя способами:
arrayObjectName = new Array(element0, element1, ..., elementN)
arrayObjectName = new Array(arrayLength)
Нумерация элементов массива начинается с нуля (myArray[0], myArray[1], myArray[2]...).
Методы объекта Array:
concat(Array2, Array3, ...) объединяет два массива и возвращает новый массив.
join(separator) объединяет все элементы массива в строку, где separator - символ разделяющий элементы массива в строке.
pop() удаляет последний элемент массива и возвращает этот элемент.
push(element1, ..., elementN) добавляет один или более элементов в конец массива и возвращает последний добавленный элемент.
reverse() разворачивает элементы массива: первый элемент становится последним, а последний - первым.
shift() удаляет первый элемент массива и возвращает этот элемент.
slice(begin[,end]) извлекает раздел массива возвращает новый массив. Begin и End - индексы элементов в исходном массиве.
splice(index, howMany, [element1][, ..., elementN]) добавляет и/или удаляет элементы массива.
sort() сортирует элементы массива.
unshift(element1,..., elementN) прибавляет один или более элементов в начало массива и возвращает новый размер массива.
Свойства объекта Array:
length количество элементов массива.
Операции присваивания
x=y
x += y, что равносильно записи x=x+y
x -= y
x *= y
x /= y
x %= y присваивает переменной x целую часть от деления x/y
Унарные арифметические операции
Результат операции зависит от того, знак операции записан как префикс или постфикс
++ Инкремент (постфикс). Если y = x ++, то y = x; x = x + 1
++ Инкремент (префикс). Если y = ++ x, то y = x + 1; x = x + 1
-- Декремент (постфикс). Если y = x --, то y = x; x = x - 1
-- Декремент (префикс). Если y = -- x, то y = x - 1; x = x - 1
Операции сравнения
== равно
!= не равно
=== строго равно
!== строго не равно
> больше
< меньше
>= больше или равно
<= меньше или равно
Логические операции
&& Логическое И
|| Логическое ИЛИ
! Логическое НЕ
Условная операция
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 и возвращаемое ими значение.
abs() Абсолютное значение аргумента
sin(), cos(), tan() Тригонометрические функции аргумента, заданного в радианах.
acos(), asin(), atan() Обратные тригонометрические функции аргумента. Значение возвращается методом в радианах.
exp(), log() Экспоненциальный и натуральный логарифмы, база e.
ceil() Возвращает наименьшее целое, больше или равное аргументу
floor() Возвращает наибольшее целое, меньше или равное аргументу
min(), max() Возвращается больший или меньший (соответственно) из двух аргументов
pow() Показатель степени; первый аргумент - база, второй - экспонента
round() Округляет аргумент до ближайшего целого
sqrt() Квадратный корень от аргумента
Объект String
Объект String обладает свойством length.
Ниже перечислены методы Объекта String.
charAt() Возвращает символ по специфицированному индексу. Аргументом метода является порядковый номер символа в строке, начиная с нуля.
charCodeAt() Возвращает число, указывающее Unicode-значение символа по данному индексу.
slice(beginslice[, endSlice]) Извлекает часть строки и возвращает новую строку.
split([separator][, limit]) Разделяет String-объект на массив строк, разделяя строку на подстроки.
substr(start[, length]) Возвращает специфицированное количество символов строки, начинающихся от специфицированного места.
link(url) Создаёт гиперссылку HTML, которая вызывает другой URL. Строка помещается в контейнер тега <A>, а url в значение атрибута href.
anchor(nameAttribute) Создаёт HTML-якорь, используемый как цель гиперссылки. Строка помещается в контейнер тега <A>, а nameAttribute в значение атрибута name.
fontcolor(color) Выводит строку специфицированным цветом, как в тэге <FONT COLOR=color>.
fontsize(size) Выводит строку шрифтом специфицированного размера, как в тэге <FONT SIZE=size>.
big() Выводит строку шрифтом big/увеличенным, как в тэге <BIG>.
small() Выводит строку шрифтом small/уменьшенным, как в тэге <SMALL>.
bold() Выводит строку жирным шрифтом, как в тэге <B>.
fixed() Выводит строку шрифтом фиксированной ширины, как в тэге <TT>.
italics() Выводит строку шрифтом italic, как в тэге <I>.
toLowerCase() Возвращает вызывающую строку, конвертированную в нижний регистр.
toUpperCase() Возвращает вызывающую строку, конвертированную в верхний регистр.
ПОЛЕЗНЫЕ СОВЕТЫ JAVASCRIPT + CSS
, key2.jpg это 
, key3.jpg это 
, а Aechmea1.jpg это: 
, 1.jpg - 
, 2.jpg - 
, 3.jpg - 
, 4.jpg - 
, 5.jpg - 
, 6.jpg - 
, 7.jpg - 
, 8.jpg - 
, 4x23.gif - 