HTML. Формы. Валидация (стр. 2 )

получение узлов,

изменение узлов,

изменение связей между узлами,

удаление узлов.

44. Java Script. Типы и структуры данных. Java Script. Программирование свойств окна

Типы и структуры данных Как и любой другой язык программирования JavaScript поддерживает встроенные типы и структуры данных. Все их многообразие можно подразделить на: - литералы и переменные - массивы, функции и объекты При этом все они делятся на встроенные и определяемые программистом. Функции и объекты рассматриваются в разделах "Функции" и "Объекты". Поэтому здесь мы сосредоточимся на литералах, переменных и массивах. Литералы Литералом называют данные, которые используются в программе непосредственно. При этом под данными понимаются числа или строки текста. Все они рассматриваются в JavaScript как элементарные типы данных. Приведем примеры литералов: числовой литерал: 10 числовой литерал: 2.310 числовой литерал: 2.3e+2 строковый литерал: 'Это строковый литерал' строковый литерал: "Это строковый литерал" Литералы используются в операциях присваивания значений переменным или операциях сравнения: var a=10; var str = 'Hy!!!'; if(x=='kuku') window. alert(x);

Переменные

Переменные в JavaScript могут быть определены назначением или при помощи оператора var:

i=10;
var i;
var i=10;
var id = window. open();
var a = new Array();

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

Существуют ли в JavaScript различные типы переменных? По всей видимости, да. При объявлении переменной тип не указывается. Тип значения определяется контекстом. Поэтому существует соблазн предположить, что все переменные одного и того же типа. Однако очевидно, что присваивание переменной значения объекта окна (window.open())или объекта потока(setTimeout()), порождает создание совершенно разных структур в памяти.

Массивы Массивы делятся на встроенные(document. links[], document. images[],...) и определяемые пользователем (автором документа). Встроенные массивы мы подробно обсуждаем в разделах "Программируем картинки", "Программируем формы" и "Программируем гипертекстовые переходы". Поэтому подробно остановимся на массивах, определяемых пользователем. Для массивов определено несколько методов: - join() - reverse() - sort() и свойство length, которое позволяет получить число элементов массива. Это свойство активно используется в примерах данного раздела. Например, при обсуждении метода join().

Функции Язык программирования не может обойтись без механизма многократного использования кода программы. Такой механизм обеспечивается процедурами или функциями. В JavaScript функция выступает в качестве одного из основных типов данных. Одновременно с этим в JavaScript определен объект Function. В общем случае любой объект JavaScript определяется через функцию. Для создания объекта используется конструктор, который в свою очередь вводится через Function. Таким образом, с функциями в JavaScript связаны следующие ключевые вопросы: - Функция - тип данных - Функция - объект - Конструкторы объектов

Объекты Объект - это ключевой, главный тип данных JavaScript. Любой другой тип данных имеет объектовую "обертку" - wrapper. Это означает, что прежде чем получить доступ к значению переменной того или иного типа происходит конвертирование переменной в объект, а только после этого выполняются действия над значением. Тип данных Object сам определяет объекты. В данном разделе мы остановимся на трех основных моментах: - понятие объекта - прототип объекта - методы объекта Object Мы не будем очень подробно вникать во все эти моменты, т. к. при программировании на стороне браузера чаще всего обходятся встроенными средствами JavaScript, но т. к. все эти средства - объекты, нам нужно понимать, с чем имеем дело.

Операторы

В этом разделе мы рассмотрим основные операторы JavaScript. Основное внимание при этом мы уделим операторам декларирования и управления потоком вычислений. Без них не может быть написана ни одна JavaScript программа.

Общий перечень этих операторов выглядит следующим образом:

- var
- {...}
- if
- while
- for
- for... in
- break
- continue
- return

Сразу оговоримся, что этот список не является полным списком операторов JavaScript.

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

45. Java Script. Программирование форм. Java Script. Программирование графики

Программируем графику

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

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

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

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

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

<a href="javascript:void(0);"
onClick="window. alert('Image name:'+document. mamonts. name)">
< img name=mamonts src=../images/jsi/i1.gif border=0>
< /a>

Картинка активна. Если на нее нажать, то получите имя контейнера IMG.Обращение document.mamonts.name позволяет распечатать в окне предупреждения это имя. При этом само имя указано как name=mamonts в контейнере IMG.

К встроенному графическому объекту можно обратиться и по индексу:

document.images[13].name;

В данном случае 14-ая картинка документа - это картинка мамонтов, которую вы видели выше. Если нажать на гипертекстовую ссылку, то откроется окно предупреждения, в котором будет отображено имя контейнера IMG.

src и lowsrc

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

document.i2.src="../images/jsi/i2.gif";

Как видно из этого примера, существует возможность изменять вмонтированную картинку за счет изменения значения свойства src встроенного объекта IMAGE. Если вы первый раз просматриваете данную страницу, то постепенное изменение картинки будет заметно на глаз. Как сделать это изменение более быстрым мы рассмотрим в разделе "Изменение картинки".

Оптимизация отображения ри программировании графики следует учитывать множество факторов, которые влияют на скорость отображения страницы и скорость изменения графических образов. При этом обычная дилемма оптимизации программ - скорость или размер занимаемой памяти, решается только путем увеличения скорости. О размере памяти как-то не принято думать при программировании на JavaScript. Из всех способов оптимизации отображения картинок мы остановимся только на нескольких из них: - Оптимизация отображения при загрузке - Оптимизация отображения за счет предварительной загрузки - Оптимизация отображения за счет нарезки изображения Если первые две позиции относятся в равной степени как к отображению статических картинок, так и к мультипликации, то третий пункт характерен, главным образом, для мультипликации. Оптимизация при загрузке Практически любое руководство по разработке HTML-страниц указывает на то, что при использовании контейнера IMG в теле HTML-страницы хорошим тоном является указание атрибутов width и height. Диктуется это порядком загрузки компонентов страницы с сервера и алгоритмом работы HTML-parser. Первым загружается текст разметки. После этого parser разбирает текст и начинает загрузку дополнительных компонентов, в том числе и графики. При этом загрузка различных картинок, в зависимости от типа HTTP-протокола, может идти последовательно или параллельно. Также параллельно с загрузкой parser продолжает свою работу. Если для картинок заданы параметры ширины и высоты, то можно отформатировать текст и отобразить его в окне браузера. До тех пор пока эти параметры не определены, отображения текста не происходит. Таким образом, указание высоты и ширины картинки позволит отобразить документ раньше, чем картинки будут получены с сервера. Это дает возможность пользователю читать документ или воспользоваться его гипертекстовыми ссылками до момента полной загрузки(событие load). С точки зрения Javascript указание размеров картинки задает начальные параметры окна отображения графики внутри документа. Это позволяет воспользоваться маленьким, абсолютно прозрачным образом, для того, чтобы заменить его полноценной картинкой: Идея состоит в передаче маленького объекта для замещения его большим объектом по требованию. Предварительная загрузка Замена одного образа другим часто бывает оправдана только в том случае, когда происходит достаточно быстро. Если перезагрузка длится долго, то эффект, которого хотят добиться, теряется. Для такой быстрой подмены используют возможность предварительной загрузки документа в специально созданный объект класса Image: Реальный эффект можно почувствовать только при отключении кэширования страниц на стороне клиента (браузера). Кэширование часто используют для ускорения работы со страницами Web-узла. Как правило, загрузка первой страницы - это достаточно длительный процесс. Самое главное, что пользователь в этот момент готов немного подождать. Поэтому кроме графики необходимой только на первой странице ему можно передать и графику, которая на этой странице не отображается. Но зато при переходе к другим страницам узла она будет отображаться без задержки на передачу с сервера. Описанный только что прием не однозначен. Его оправдывает только то, что если пользователь нетерпелив, то он вообще отключит передачу графики. Нарезка картинок Нарезка картинок применяется довольно часто. Она позволяет достигать эффекта частичного изменения отображаемой картинки. Наиболее часто он применяется при создании меню: Кроме этого эффекта нарезка позволяет реализовать достаточно эффективную мультипликацию на больших картинках. При этом изменяется не весь образ, а только отдельные его части: Из примера видно, что изменение части образа довольно сильно изменяет скорость отображения. При изменении всей картинки о мультипликации можно говорить достаточно условно.

Графика и таблицы Одним из наиболее популярных приемов дизайна страниц Web-узла является техника нарезки картинок на составные части. Можно выделить следующие способы применения этой техники для организации навигационных компонентов страницы: - Горизонтальные и вертикальные меню - Вложенные меню - Навигационные графические блоки Главной проблемой при использовании нарезанной графики является защита ее от контекстного форматирования страницы HTML-parser-ом. Дело в том, что он автоматически переносит элементы разметки на новую строку, если они не помещаются в одной строке. Нарезанная картинка требует совершенно определенного расположения своих составных частей, поэтому простое их перечисление в ряд не дает желаемого эффекта:

Графика и обработка событий В данном разделе речь не пойдет об обработчиках событий контейнера IMG. Мы просто рассмотрим наиболее типичный способ комбинирования обработчиков событий и изменения графических образов. Собственно не имело бы смысла применять нарезанную графику, если бы не возможность использования обработчиков событий для изменения отдельных частей изображения. Продолжая обсуждение примера с навигационным деревом, покажем его развитие с обработкой событий от мыши и изменением картинок:

46. Java Script. Программирование гипертекстовых переходов. Управление фокусом.

Введение

Фокус — это характеристика текущего окна, фрейма или поля формы. В каждом из разделов, описывающем

программирование этих объектов, мы, так или иначе, касаемся вопроса фокуса. Под фокусом понимают

возможность активизации свойств и методов объекта. Например, окно в фокусе, если оно является текущим,

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

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

окнах;

фреймах;

полях формы.

Следует сразу заметить, что фреймы — это тоже объекты класса Window, и многие решения, разработанные

для окон, справедливы и для фреймов.

Управляем фокусом в окнах

Управляем фокусом в окнах

Для управления фокусом у объекта класса "окно" существует два метода: focus() и blur(). Первый передает

фокус в окно, в то время как второй фокус из окна убирает. Рассмотрим простой пример:

function hide_window()

{

wid=window. open("","test",

"width=400,height=200");

wid. opener. focus();

wid. document. open();

... wid.document.close();

}

В данном примере новое окно открывается и сразу теряет фокус; прячется за основным окном-родителем.

Если при первичном нажатии на кнопку оно еще всплывает и только после этого прячется, то при повторном

нажатии пользователь не видит появления нового окна, так как оно уже открыто и меняется только его

содержимое.

Для того чтобы этого не происходило, нужно после открытия передавать фокус на новое окно:

function visible_window()

{