Это моя страница.

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

Связывание событий обсуждается в главе 3.

Отложенное выполнение сценария
Internet Explorer 4.0 может повысить производительность выполнения сценариев, которые не содержат немедленно выполняемого кода. Если элемент Script содержит только описания функций, то помещение атрибута DEFER в тег

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

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

Оба языка интерпретируют строку HTML, которая начинается с

Источник

DHTML

DHTML (динамический HTML) – это набор средств, которые позволяют создавать более интерактивные Web-страницы без увеличения загрузки сервера. Другими словами, определенные действия посетителя ведут к изменениям внешнего вида и содержания страницы без обращения к серверу.

DHTML построен на объектной модели документа (Document Object Model, DOM), которая расширяет традиционный статический HTML-документ. DOM обеспечивает динамический доступ к содержимому документа, его структуре и стилям. В DOM каждый элемент Web-страницы является объектом, который можно изменять. DOM не определяет новых тегов и атрибутов, а просто обеспечивает возможность программного управления всеми тегами, атрибутами и каскадными листами стилей (CSS).

События динамичеcкого HTML

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

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

Модель событий DHTML связана с определенной иерархией HTML-контейнеров и основана на всплывании событий и действии по умолчанию.

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

Пример 1

Всплывание события

Для получения информации можно щелкнуть мышкой как на изображении, так и на тексте:

Связывание событий

Установление связи между определенным событием и сценарием называется связыванием событий. События можно связать с помощью специальных атрибутов любого элемента или с помощью тега script.

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

Пример 2

Смена графического объекта

Для смены графического объекта переместите на него мышку – Иоганн Себастьян Бах сменит Людвига ван Бетховена.
Уведите с него мышку – Людвиг ван Бетховен сменит Иоганна Себастьяна Баха.

Пример 3

РЕЗУЛЬТАТ ПРИМЕРОВ 3 — 5:

Изменение вида данного элемента

Для изменения цвета и шрифта данного текста нажимайте и отпускайте кнопку мыши

Обратите внимание на то, что в примере 2 область действия обработчика события определена с помощью идентификатора B_B, а в примере 3 – с помощью указателя this.

Применение script является более общим механизмом связывания события со сценарием. Все события представлены как свойства в DOM. Используя это, перепишем наш пример в таком виде:

Пример 4

Можно также использовать метод addEventListener():

Пример 5

События мыши

События клавиатуры

Событие прокручивания

События фокуса

Пример 6

События формы

Пример 7

OnReset Возникает после щелчка на кнопке Reset. Назначение – вывод предупреждения о сбросе.

События документа

Пример 8

OnUnload Возникает при выгрузке страницы. Используется для освобождения каких-либо ресурсов и вывода дополнительных сообщений. OnAbort Возникает при срыве загрузки графического объекта. OnError Возникает лишь при неудачной загрузке графического элемента или всей WEB-страницы. Все остальные ошибки это событие не отлавливает. Если в примере 9 файл m.gif не будет найден, то на экране появится предусмотренное сообщение.

Пример 9

Событие помощи

Объект event

Для получения информации о событии служит объект event.

Свойства объекта event

Пример 10

type Определение события. Имя события возвращается в нижнем регистре без префикса on.

Пример 11

button Состояния кнопок мыши во время события.
Возможные значения:

• 0 – кнопки не нажаты,
• 1 – нажатие левой кнопки,
• 2 – нажатие правой кнопки,
• 3 – нажатие левой и правой кнопок,
• 4 – нажатие средней кнопки.

clientX, clientY Координаты указателя мыши относительно клиентской области окна. offsetX, offsetY Координаты указателя мыши относительно контекста воспроизведения. screenX, screenY Координаты указателя мыши относительно экрана.

Пример 12

altKey Состояние клавиши (true/false). ctrlKey Состояние клавиши (true/false). shiftKey Состояние клавиши (true/false). keyCode ASCII-код нажатой клавиши.

Динамическое содержание

Содержание HTML-документа можно менять после загрузки страницы.

Свойства динамического содержания

Пример 13

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

Методы Adjacent

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

insertAdjacentText Вставка текста. insertAdjacentHTML Вставка HTML.

Оба метода Adjacent имеют по два аргумента: место вставки и содержание. Место вставки определяется ключами:

• beforeBegin – До открывающего внешнего тега элемента
• afterBegin – После открывающего тега до содержимого элемента
• beforeEnd – До закрывающего тега после содержимого элемента
• afterEnd – После закрывающего тега элемента

Пример 14

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

Объект TextRange

Используя объект TextRange можно редактировать любой текст, а также менять текст, выделенный посетителем на экране.

Объект TextRange создается путем вызова метода createTextRange элемента, который является, так называемым, владельцем редактирования текста. Это может быть body, input, button и textarea, причем понятно, что body — владелец редактирования текста для всех воспроизводимых элементов, а input, button и textarea — владельцы редактирования текста для своего содержания.

Свойства доступа к тексту

Метод вставки HTML

Методы позиционирования объекта TextRange

Методы move, moveStart и moveEnd возвращают число, равное расстоянию перемещения. Если будет задано перемещение на 100 слов в документе, содержащим 50 слов, то объект TextRange будет помещен в последнее слово, а метод возвратит расстояние перемещения. Для проверки успешности проведения перемещения возвращаемое значение сравнивается с заданным расстоянием перемещения.

Пример 15

moveToPoint(prm1, prm2) Определяет элемент, который выведен в точке, координаты которой заданы параметрами prm1, prm2. Работает не совсем корректно. В чем можно убедиться на примере.

Пример 16

findText(prm1, prm2, prm3) Поиск в документе подстроки, указанной в параметре prm1. Параметр prm2 определяет число символов для поиска (положительное — прямое направление, отрицательное — обратное). Параметр prm3 может принимать значения:

• 2 – полное совпадение,
• 4 – учет регистра,
• 6 – полное совпадение с учетом регистра.

Источник

Способы динамического управления страницей.

Dynamic HTML или DHTML — это способ создания интерактивного веб-сайта, использующий сочетание статичного языка разметки HTML, встраиваемого (и выполняемого на стороне клиента) скриптового языка JavaScript, CSS (каскадных таблиц стилей) и DOM (объектной модели документа).

Dynamic HTML (динамический HTML, DHTML) — это расширение языка HTML, позволяющее создавать таблицы стилей и включать в состав Web-документа небольшие программы-сценарии (script), которые исполняются Web-клиентом. и придания ему динамического характера, например движения картинок по документу. Для создания подобных сценариев используются специальные языки программирования. Наиболее распространенными являются два: язык JavaScript, разработанный компанией Netscape, и язык VBScript — разработка фирмы Microsoft. Для включения сценариев в документ используются специальные теги.

Он может быть использован для создания приложения в веб-браузере: например для более простой навигации или для придания интерактивности форм. DHTML может быть использован для динамического перетаскивания элементов по экрану. Также он может служить как инструмент для создания основанных на браузере видеоигр.

DOM — это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML, XHTML и XML-документов, а также изменять содержимое, структуру и оформление таких документов.

38. Команды Dy­namic HTML.

Команды Dynamic HTML построены так же, как и команды любого современного обьектно-ориентированного языка программирования: вначале пишется имя обьекта, над которым выполняется действие или свойство которого нужно узнать, а затем, через точку — его подобьекты или свойства. Они могут быть использованы как в отдельно взятом виде, так и в составе скрипта на VBScript или JavaScript. В первом случае они выполняются при происхождении какого-либо события, в описании которого и помещаются команды. Во втором случае выполнение команд происходит при выполнении скрипта.

Для изменения какого-либо элемента web-страницы нужно присвоить этому элементу идентификатор (попросту включить в его тэг параметр «id=»оригинальное имя»»), и затем с помощью команды изменить какое-либо свойство этого элемента. К примеру, для замены какого-либо рисунка web-страницы на другой нужно в тэг рисунка включить идентификатор — например, ««, а затем в скрипт или описание события элемента — команду: «pict.src=»https://poisk-ru.ru/picture2.jpg»«(то есть установить значение свойства «источник» — src — элемента pict как picture2.jpg). При выполнении этой команды исходный рисунок picture1.jpg будет замещен новым — picture2.jpg.

Все элементы web-страницы, как именованные, так и неименованные, связаны для браузера, поддерживающего Dynamic HTML, в разветвленную иерархическую структуру. Скрипты, использующие возможности Dynamic HTML, могут обращаться к различным элементам в этой структуре, учитывая его расположение в ней. Однотипные элементы (например, все изображения, все формы и.т.д.) обьединяются в группы — так называемые «коллекции«. Существуют встроенные коллекции — то есть группы элементов, которые обьединены в коллекции по умолчанию, и к элементам этих групп можно обращаться из скриптов без специальных команд, например, коллекция всех изображений на странице.

Скрипты.

Сцена́рный язы́к или скри́птовый язы́к— высокоуровневый язык программирования для написания сценариев — кратких описаний действий, выполняемых системой. Разница между программами и сценариями довольно размыта. Сценарий — это программа, имеющая дело с готовыми программными компонентами.

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

• командно-сценарные;
• прикладные сценарные;
• языки разметки;
• универсальные сценарные.

XML — рекомендованный Консорциумом Всемирной паутины язык разметки. Спецификация XML описывает XML-документы и частично описывает поведение XML-процессоров (программ, читающих XML-документы и обеспечивающих доступ к их содержимому).

PHP— скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений.

JavaScript — прототипно-ориентированный сценарный язык программирования. Является диалектом языка ECMAScript.

JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

Источник