JavaScript: основные понятия (стр. 4 )

Объект Arguments — список (массив) аргументов объекта Function.

Свойство	Описание
length	Целое число, определяющее количество аргументов, необходимых вызванной функции

ОбъектMath

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

MyArea= Math. PI * MyRadiuS * MyRadius;
MyResult = Math. floor(MyNumber);
X=Math. sin(6.28)

Свойство	Описание
E	Постоянная Эйлера
LN10	Значение натурального логарифма числа 10
LN2	Значение натурального логарифма числа 2
LOG10E	Значение десятичного логарифма экспоненты (числа е)
LOG2E	Значение двоичного логарифма экспоненты
PI	SORT1_2 SORT
Значение постоянной п Значение квадратного корня из '/2 Значение квадратного корня из 2	Abs ( число)
Возвращает модуль числа число	acos ( число)
Возвращает арккосинус числа число	as in ( число)
Возвращает арксинус числа число	a tan ( число)
Возвращает арктангенс числа число	atan2 (x, у)
Возвращает угол в полярных координатах точки	ceil ( число)
Округляет число вверх до ближайшего целого	cos ( число)
Возвращает косинус числа число	ехр ( число)
Возвращает экспоненту в степени число	floor ( число)
Округляет число вниз до ближайшего целого	log ( число)
Возвращает натуральный логарифм числа число	max ( число1 , число1 )
Возвращает большее из чисел число1, число2	mi п( число 1, число2)
Возвращает меньшее из чисел число1, число2	pow ( число 1 . число2 )
Возвращает число1 в степени число2	random ( )
Возвращает случайное число в диапазоне 0 и 1	round ( число)
Округляет число до ближайшего целого	sin ( число)
Возвращает синус числа число	sqrt (число)
Возвращает квадратный корень из числа числе	tan ( число)
Возвращает тангенс числа число

Объект Number

Объект Number предоставляет набор свойств, полезных при работе с числами.

Свойство	Описание
MAX_VALUE	Максимальное численное значение в JavaScript (~1,79Е+308)
MIN_VALUE	Минимальное численное значение в JavaScript (~2,22Е-308)
NaN	Значение, не являющееся числом
NEGATIVE_INFINITY	Минус бесконечность
POSITIVE_INFINITY	Плюс бесконечность
oString( [основание] )	Преобразует число в десятичную системусчисления (или в число в системе по основанию основание,) и возвращает в виде строки
valueof ( )	Возвращает двоичное численное значениечисла

Объект String

Объект String дает вам набор методов для работы с текстом. Для создания объекта String используется такой синтаксис:

MyString = new String ( [значение] )

где значение - необязательный параметр: текст, представляющий собой начальное значение строковой переменной. Если это число, оно сначала преобразуется в строковый формат.

Свойство	Описание
Lenth	Целое число, указывающее количество символов в строке
Метод	Описание
anclor ("name")	Возвращает исходную строку окруженную тегами <A> и </A> с атрибутом NAME, равным name
big ()	Возвращает исходную строку заключенную в теги <BIG> и </BIG>
blink ()	Возвращает исходную строку заключенную в теги <BLINK> и </BLINK>
bold ()	Возвращает исходную строку заключенную в теги <B> и </B>
charAt (позиция)	Возвращает символ, стоящий в позиции позиция строки
fixed ( )	Возвращает исходную строку, заключенную в тэги <ТТ> и </ТТ>
fontcolor ( " color" )	Возвращает исходную строку, заключенную в тэги <FONT> и </FONT> с атрибутом COLOR, равным color
fontsize ( " size" )	Возвращает исходную строку, заключенную в тэги <FONT> и </FONT> с атрибутом SIZE, paвным size
indexO f ( значение [ , позиция] )	Возвращает позицию первого появления строк! значение, начиная с позиции позиция
italicsO	Возвращает строку, заключенную в тэги <I> и </I>
lastlndexOf ( значение [ , позиция] '.	) Возвращает позицию первого с конца строки появления строки значение, начиная с позиции позиция
link ("href")	Возвращает исходную строку, окруженную тэгами <А> и </А>, с атрибутом HREF, равным href.
small ()	Возвращает исходную строку, заключенную в тэги <SMALL> и </SMALL>
Метод	Описание
split (разделитель)	Возвращает массив строк, созданный разделением всех встретившихся строк разделительным символом разделитель
strikeO	Возвращает исходную строку, заключенную в тэги <STRIKE> и </strike>
sub()	Возвращает исходную строку, заключенную в тэги <SUB> и </SUB>
substring (номер 1 , номер2)	Возвращает подстроку данного объекта String начинающуюся символом в позиции номер1 и заканчивающуюся символом в позиции перед номер2
sup( )	Возвращает исходную строку, заключенную в тэги <SUP> и </SUP>
toLowerCase ( )	Возвращает исходную строку со всеми символами, преобразованными в строчные
toUpperCase ( )	Возвращает исходную строку со всеми символами, преобразованными в прописные

Обработка форм: переключатель, флажок, список

Формы используются при создании интерактивных страниц и позволяют читателю Web-страницы общаться с их владельцами. Формы применяют при организации опросов, заполнении анкет, тестировании, для контроля знаний и т. д. Форма отображается в окне браузера в виде набора стандартных элементов управления, которые используются для заполнения полей формы значениями. В предыдущих сценариях мы использовали текстовые поля и различные кнопки. Рассмотрим, как показать и извлечь для обработки данные, представленные другими элементами управления.

Переключатель

Данные удобно представлять с помощью элемента управления "переключатель" в том случае, когда из нескольких вариантов может быть выбран только один. Например, студент на экзамене может получить лишь одну из оценок:

=  "отлично";

=  "хорошо";

=  "удовлетворительно";

=  "неудовлетворительно".

Для представления информации о полученном зачете достаточно двух переключателей. С помощью переключателя можно представлять информацию о семейном положении, образовании, возрасте и многом другом.

Выбор формы осуществляется с помощью переключателя. Элемент "переключатель" отображается в виде круглой кнопки и существует только в составе группы подобных элементов. Может быть осуществлен выбор лишь одного элемента группы. Все элементы группы должны иметь одинаковое значение параметра name. Обязательный параметр value должен иметь уникальное значение для каждого элемента группы.

Объект forms имеет свойство-массив elements, в котором содержатся ссылки на элементы формы в порядке их перечисления в теге <form>. Получить доступ к первому элементу формы можно с помощью конструкции document.form1.elements[0]. Это элемент-переключатель, который определен в составе группы элементов.

Флажки

Элемент управления "флажок" используется в том случае, когда из предложенных вариантов можно выбрать как один, так и несколько. Каждый вариант выбора задается флажком, который можно либо установить, либо сбросить. Флажок определяется в теге <input> значением checkbox параметра type. Обязательным параметром является параметр value, значение которого будет передано на обработку в случае выбора нажатием кнопки.

Результаты тестирования

При щелчке мышью на кнопке Результат возникает событие click, обработка которого заключается в вызове функции grant с одним параметром — именем формы. Далее с помощью оператора цикла просматриваются все флажки. Если очередной флажок установлен или выбран элемент, значение переменной k увеличивается на 1. После окончания работы цикла результат сформирован в переменной k и значение переменной помещается в соответствующее поле формы.

Списки

Если элементов много, представление их с помощью флажков или переключателей увеличивает размер формы. В этом случае варианты выбора могут быть представлены в окне браузера более компактно, с помощью тега <seiect>. Напомним, что данный тег имеет несколько параметров. Параметр name является обязательным. Для того чтобы установить число одновременно видимых элементов, следует задать параметр size=n. Когда n равно 1, отображается меню или раскрывающийся список выбора; при n>1 выводится список с n одновременно видимыми значениями. Если параметр size не задан, по умолчанию принимается значение, равное 1. Указание параметра multiple означает, что из меню или списка можно выбрать несколько элементов. Элементы меню задаются внутри тега <seiect> с помощью тега <option>. Общий вид тега таков:

<option selected value=строка>

Параметр selected означает, что данный элемент списка считается выбранным по умолчанию. Параметр value содержит значение, которое передается, если данный элемент выбран из списка или меню.

Отправка данных в виде почтового сообщения

Для задания формы мы использовали тег <form>. В теге <form> можно использовать также следующие параметры: action, method и enctype. Значение параметра action — адрес CGI-программы, которая должна обрабатывать данные, извлеченные из формы. Параметр method определяет метод пересылки данных, содержащихся в форме, от браузера к Web-серверу, он может принимать два значения: get и post. Значение параметра enctype определяет формат кодирования данных.

Изображения на Web-страницах

Изображение на Web-страницу может быть добавлено помощью тега <img>. Обязательным единственным параметром тега <img> является параметр src, значение которого — URL-адрес изображения, загружаемого на страницу. Каждое изображение, содержащееся в документе, представляет собой объект image, обладающий свойствами, к которым можно обратиться с помощью средств языка сценариев JavaScript. В теге <img> можно задать параметр Name, а затем использовать его значение для доступа к свойствам изображения.

Объект Image

Программирование графики в JavaScript опирается на объект Image, который характеризуется следующими свойствами, методами и событиями:

Свойства	Методы	События
· border · complete · height · hspace · name · src · vspace · width · lowsrc	нет	· onAbort · onError · onLoad

Абсолютное большинство свойств можно только читать, но не изменять. Об этом свидетельствует, прежде всего, отсутствие методов. Но два свойства все же можно изменять: src и lowsrc. Этого достаточно для множества эффектов с картинками.

Все объекты класса Image можно разделить на встроенные и порожденные программистом. Встроенные объекты — это картинки контейнеров IMG. Если эти картинки поименовать, к ним можно обращаться по имени.

Свойства src и lowsrc определяют URL изображения, которое монтируется внутрь документа. При этом lowsrc определяет временное изображение, обычно маленькое, которое отображается, пока загружается основное изображение, чей URL указывается в атрибуте SRC контейнера IMG. Свойство src принимает значение атрибута SRC контейнера IMG. Программист может изменять значения и src и lowsrc.

Изменение картинки

Изменить картинку можно, только присвоив свойству src встроенного объекта Image новое значение.

Мультипликация

Естественным продолжением идеи замещения значения атрибута SRC в контейнере IMG является мультипликация, т. е. последовательное изменение значения этого атрибута во времени. Для реализации мультипликации используют метод объекта Window — setTimeout().

Существует два способа запуска мультипликации:

onLoad();

onClick(), onChange() ...

Наиболее популярный — setTimeout() при onLoad().

Оптимизация отображения

При программировании графики следует учитывать множество факторов, которые влияют на скорость отображения страницы и скорость изменения графических образов некоторые способы оптимизации отображения картинок:

=  оптимизация отображения при загрузке;

=  оптимизация отображения за счет предварительной загрузки;

=  оптимизация отображения за счет нарезки изображения.

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

Оптимизация при загрузке

При использовании контейнера IMG в теле HTML-страницы следует указывать атрибуты WIDTH и HEIGHT. Это продиктовано порядком загрузки компонентов страницы с сервера и алгоритмом работы HTML-парсера. Первым загружается текст разметки. После этого парсер разбирает текст и начинает загрузку дополнительных компонентов, в том числе графики. При этом загрузка картинок, в зависимости от типа HTTP-протокола, может идти последовательно или параллельно.

Предварительная загрузка изображений

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

Если изображений на странице много либо велик их размер, разумнее воспользоваться техникой предварительной загрузки изображения. При предварительной загрузке браузер "подготовит" изображения, которые затем потребуются для размещения на странице, т. е. заблаговременно загрузит изображения в память компьютера, не дожидаясь непосредственного обращения к этим изображениям.

Нарезка картинок

Нарезка картинок позволяет достигать эффекта частичного изменения отображаемой картинки. Чаще всего он применяется при создании меню. Кроме подобного эффекта нарезка позволяет реализовать мультипликацию на больших картинках. При этом изменяется не весь образ, а только отдельные его части.

Смена изображений при наведении указателя мыши

При перемещении пользователем курсора мыши над изображением возникает событие Mouseover. Опишем функцию succpict(), которая будет реакцией на это событие и определит, какое изображение следует поместить в документ. Воспользуемся тем фактом, что загружаемое изображение хранится в файлах с именами m1.gif, m2.gif, , m4.gif. Для загрузки k-ого изображения формируется имя файла по формуле "m"+k+".gif

Простые визуальные эффекты

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

Эффект приближения изображения

При решении задачи используется свойством width объекта image. При каждом вызове функции grpictio увеличивается размер выводимого изображения. Когда ширина выводимого изображения станет более 300, движение прекратится.

Удаляющееся изображение

При решении этой задачи используется свойство height объекта image. При каждом вызове функции succpicto изменяется высота выводимого изображения и тем самым достигается эффект удаления от зрителя.

Функция setTimeout("succpict1()", 500) производит повторный вызов функции succpict () через каждые полсекунды. Когда размер изображения изменится до заданного, движение прекратится.

Чередование изображений с предварительной загрузкой

На странице через равные промежутки времени появляются различные изображения.

Чтобы предварительно загрузить изображения, создадим массив imgsiide:imgsiide=new Array(). Каждый элемент массива представляет собой объект image, который создается с помощью конструктора: new Image(). Первый элемент массива определяется так: imgsiide[0] = new Image ().Свойство src только что созданного объекта задается в результате выполнения оператора присваивания: imgsiide[0].src = "sl1.gif"

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

Движение изображения слева направо

Сценарий реализации простой анимации: перемещение изображения слева направо.

Для анимационного изображения используются всего два рисунка. Первый рисунок — то изображение, которое перемещается. Второй рисунок должен соответствовать "пустому" изображению. Для этого можно создать одноцветный рисунок такого же размера, как и движущееся изображение. Будем считать, что имеется m кадров. Пусть n — номер кадра, в который помещается изображение. В следующий момент времени в кадр с номером n следует поместить "пустой" рисунок, а в кадр с номером n+1 — изображение. Тем самым мы как бы переместили изображение из кадра с номером n в кадр с номером n+1 и создали эффект движения слева направо. Когда изображение появится в последнем кадре, его следует переместить в первый кадр. Выражение document. images. length определяет количество кадров. Сразу после загрузки документа изображение расположено в левом кадре. В остальных кадрах располагается "пустое" изображение.

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

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

Визуальные эффекты с использованием фильтров

Разнообразные мультимедийные эффекты можно получить, если применить к элементам страницы фильтры или осуществить переход от одного визуального состояния к другому. Фильтры поддерживаются обозревателями Internet Explorer версий 4.0 и выше. Фильтры разделяются на статические и динамические. Статический фильтр преобразует элемент, который затем отображается в "отфильтрованном" виде. Динамический фильтр или переход меняет визуальное отображение элемента на странице, создавая анимационный эффект.

Фильтры применимы не ко всем объектам страницы, а к некоторым объектам фильтры могут быть применены вообще только при соблюдении определенных правил. К элементам body, img, input, table, td, th, textarea фильтры применяются всегда. К элементам div и span фильтры можно применить в том случае, если элемент абсолютно позиционирован или если в параметре style указаны ширина и высота элемента.

Фильтры нельзя применять к любому заголовку, к элементам iframe, select, option, p, em. Фильтры задаются в параметре style тех тегов, к которым они применяются, в следующем виде:

Filter: имя_фильтра (параметры)

Фильтры могут не иметь параметров, но в этом случае круглые скобки обязательно должны присутствовать. Некоторые фильтры имеют несколько параметров. Параметры перечисляются через запятую. Для каждого параметра указываются имя, знак равенства и значение.

Многие фильтры можно применить как к тексту, так и к изображениям. К одному элементу можно применить сразу несколько фильтров.