В предыдущем примере getElementById – это метод, а innerHTML – свойство.

Метод getElementById

Самый частый способ получить доступ к элементу HTML – это использовать идентификатор id элемента.

В предыдущем примере метод getElementById использует id=»demo», чтобы найти нужный элемент.

Свойство innerHTML

Самый простой способ прочитать содержимое элемента — это воспользоваться свойством innerHTML.

Свойство innerHTML полезно тем, что оно позволяет прочитать или изменить содержимое любого элемента HTML, включая и .

Что является свойством объекта входящего в dom

Главная / Лекции / Программное обеспечение компьютерных сетей

Большинство свойств объектов соответствуют параметрам представляемых ими элементов html документа и имеют такие же имена, что и имена параметров.
В сценарии можно получить значение интересующих параметров элемента или наоборот изменить их установку.
Динамическое изменение свойств объектов и соответственно представляемых ими элементов html является основной концепцией DHTML.
Имена некоторых свойств объектов отличаются от имен параметров, но обычно достаточно близки к ним.
Пример: свойство className соответствует параметру class. Подобное несоответствие вызвано конфликтами с зарезервированными ключевыми словами основных языков сценария.
В DOM существует свойство, представляющее целое множество свойств объекта. По существу такие свойства являются наборами и к ним применима описанная выше технология работы с наборами. Свойство style объекта — одно из таких свойств. Оно содержит все свойства CSS, применимые к соответствующему элементу и которые можно задавать в параметре style тэга элемента.
Некоторые свойства не соответствуют никаким параметрам тэгов. Эти свойства представляют дополнительную информацию об элементе и обычно являются свойствами только для чтения.

Пример: свойство tagName — не соответствует никакому параметру и предоставляет информацию о типе тэга элемента.
sourceIndex — его значение — индекс элемента в наборе all.

• getAttribute() — получить значение параметра элемента без обращения к его свойствам
• setAttribute() — установить значение параметра элемента без обращения к его свойствам
• removeAttribute() — удалить параметр

Пример:
alert(«Значение параметра ALIGN равно: «+p1.getAttribute(‘align’));
p1.setAttribute(‘align’,’right’);
alert(«Значение параметра ALIGN равно: «+p1.getAttribute(‘align’));
p1.removeAttribute(‘align’);
(«Значение параметра ALIGN равно: «+p1.getAttribute(‘align’));

Фрагмент сценария использует все 3 метода для получения и установки значения параметра ALIGN объекта p1, а также для удаления этого параметра из тэга элемента, соответствующего объекту p1.
Если исходно объект p1 будет соответствовать абзацу с параметром ALIGN=center, то при выдаче первого сообщения в фрагменте будет указано CENTER, в следующем — right, в последнем — будет выведена пустая строка (значение не определено).
В соответствии с изменением значения параметра ALIGN будет изменяться и отображение абзаца в окне браузера. При удалении параметра, абзац по умолчанию сдвинется влево (left).
Иногда возникает необходимость показать в окне браузера часть документа, расположенного достаточно далеко от того места страницы, где в данный момент находится читатель. Обычно на страницу помещают ссылку, по которой читатель сможет осуществить переход.
Метод scrollIntoView() элемента позволяет выполнить процедуру перехода из сценария. Метод прокручивает содержимое окна браузера, чтобы указанный элемент оказался внизу или вверху окна.

Пример: var myH1=document.all.tags['H1']; if (myH1.length>0) myH1[2].scrollIntoView(true);

• innerHTML
• innerText
• outerHTML
• outerText

Пример: contents = p1.outerText

Этот оператор присвоит переменной строку, являющуюся текстом абзаца p1.
Абзац в документе определен следующим образом:

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

В результате выполнения оператора присваивания переменная contents будет содержать строку с текстом.
Если в операторе присваивания заменить свойство outerText на outerHTML, то переменная contents будет содержать полное содержание абзаца на языке html со всеми входящими тэгами, параметрами и их значениями.

4.4. Событийная модель.

В DOM DHTML с каждым элементом страницы можно связать определенные действия пользователя: щелчок мышью, нажатие клавиатуры и т.д. Эта технология основана на фундаментальном понятии события в ОС с графическим интерфейсом пользователя.
Каждое действие пользователя является причиной возникновения сообщения в ОС, которая представляется объектом в DOM DHTML.
Свойства объектов событий можно использовать во встраиваемых сценариях для получения информации о событиях. При возникновении любого события динамически создается свойство event объекта window, входящего в DOM и представляющего окно браузера. Это свойство и является объектом, соответствующим сгенерированному событию.

1. Происходит действие пользователя или возникает условие, которое возбуждает событие.
2. В тот час же корректируется объект event, чтобы отразить параметры возникшего события.
3. Событие генерируется — это и есть истинное сообщение о возникшем событии.
4. Вызов обработчика событий элемента источника, который выполняет определенные программистом действия и завершает свою работу.
5. Событие передается вверх по иерархии объектов (bubble up) и вызывается обработчик события объекта, являющегося родителем объекта источника события. Это всплытие вверх по иерархии объектов продолжается, пока не будет достигнут самый верх иерархии — объект window или обработчик события какого-либо объекта не аннулирует событие.
6. Выполняются заключительные действия по умолчанию, если такие определены, но при условии, что событие не было аннулировано.

 < html>< head>< title>Всплывание событий < /title> < /head> < body onclick="alert('Не надо щелкать!')">< h1 >Привет! < /h1>< p >Это простой пример, < b >ну очень простой < /b>пример. < /p> < /body>< /html>

В этом примере щелчки кнопкой мыши на всех элементах страницы обрабатываются централизованно обработчиком событий элемента body, который является родителем всех элементов страницы.
Если какому-нибудь элементу добавить собственный обработчик событий, то будут выполнены две процедуры: самого объекта и элемента родителя.
Объект event имеет свойство cancelBubble, которое позволяет аннулировать событие, если установить его значение равным true. После этого соответствующее событие не существует и обработчики этого события для всех расположенных выше элементов не вызываются.

Аннулирование события

Привет!
Это простой пример, ну очень простой пример.

4.5. Объект event.

Объект event создается автоматически всякий раз, когда возникает какое-либо событие. Этот объект не зависит от используемого языка сценария. Обращение к объекту event для получения достоверной информации о событии является предпочтительным способом.
Каждое событие характеризуется параметрами, которые передаются в сценарии через свойства объекта event.
Существуют параметры, общие для всех типов событий (например, координаты курсора мыши в окне браузера) и специфические для определенного события (код нажатой клавиши для событий клавиатуры).
Свойства объекта event, как и сам он являются динамическими и создаются в зависимости от типа произошедшего события.
Свойство srcElement определяет элемент документа, явившийся источником события.
cancelBubble — аннулирует событие.
returnValue — возвращает true/false после завершения выполнения процедуры обработки события. При передаче события вверх по иерархии, значение этого свойства можно использовать для альтернативной обработки события.

4.6. DOM в MS IE5.0.

• перемещать часть структуры документа в другое место, не разрушая и не создавая ее заново
• создавать новые элементы и присоединять их к структуре документа в любом его месте
• организовать и манипулировать новыми или существующими ветвями структуры фрагмента документа для помещения объектов в структурное дерево документа

< table > < tr>< td>ячейка 1 первого ряда < /td>< td>ячейка 2 первого ряда < /td> < /tr> < tr>< td>ячейка 1 второго ряда < /td>< td>ячейка 2 второго ряда < /td> < /tr> < tr style="background-color:#cfcfcf">< td>Этот ряд перемещаем < /td>< td>Этот ряд перемещаем < /td> < /tr> < /table>function fncInterchange(row)

Задана таблица из 3-х рядов. Необходимо переместить последний ряд на место предшествующего. Сценарий ориентирован на DOM 4.0. Переменная rowMove сохраняет индекс перемещаемого ряда, передаваемый в качестве индекса. Переменные rowMove_cell1 и rowMove_cell2 хранят содержимое двух ячеек перемещаемого ряда. После этих действий ряд удаляется методом rowDelete объекта table.
В таблицу вставляется новый ряд перед рядом, предшествующим удаленному (номер строки в rowMove уменьшается на 1). Последние операторы функции добавляют две ячейки в новый ряд и помещают в них содержимое соответствующих ячеек удаленного ряда.
В объектной модели документа IE 5.0 функция изменяется следующим образом:

function fncInterchange(row)
Методом swapNode можно просто поменять местами узлы в структуре документа.

Если у вас есть программы, предложения или замечания — пишите: chemisk@mail.ru

Ответы WEB 2

Долгая загрузка . Особенность таблиц такова, что пока последнее слово в самом низу таблицы не загрузится, на экране содержимое ячеек отображаться не будет. Браузеры используют такой подход, чтобы получить всю информацию о таблице для правильного форматирования ее содержимого. Но если таблица велика по высоте, может пройти достаточно много времени, прежде чем мы увидим нужную информацию. Существуют и способы обхода этого свойства, в частности, разбиение одной большой таблицы на несколько таблиц поменьше, а также использование стилевого свойства table-layout. Громоздкий код . Таблицы содержат сложную иерархическую структуру вложенных тегов, которая увеличивает объем кода, и повышает сложность изменения отдельных параметров. В некоторых случаях для достижения желаемого результата приходится вкладывать одну таблицу внутрь другой, а это также влияет на размер кода, который не принимает непосредственного участия в отображении веб-страницы. Плохая индексация поисковиками . За счет того, что текст располагается в отдельных ячейках таблицы, в коде он может находиться достаточно далеко друг от друга. Такая раздробленность информации, а также значительная вложенность тегов затрудняет правильное индексирование страницы поисковыми системами. Как результат документ не попадает в первую десятку выдачи запроса по ключевым словам, хотя вполне может и заслуживать это. Несоответствие стандартам. В последнее время стандарты HTML и CSS прочно засели в умах вебразработчиков. Этому способствует развитие XHTML и XML, которые более «жестко» относятся к коду документа, появление новых версий браузеров, придерживающихся спецификации, и мода на верстку слоями. Что же говорит спецификация относительно таблиц? А говорит она, что таблицы в первую и последнюю очередь нужны для размещения табличных данных. Все остальные способы использования таблиц осуждаются. Невозможность наложения слоев . Таблицы нельзя наложить друг на друга, что создает определенные трудности при верстке сложных по дизайну страниц. Трудности при верстке сложных страниц. Табличная верстка страниц сложного дизайна приводит к появлению множества вложенных таблиц. Рост количества таблиц повышает шанс возникновения ошибок при верстке, увеличивает размер документов и снижает скорость загрузки файлов. Блочная верстка (верстка слоями) Ещё одним направлением в верстке является так называемая блочная верстка, реализуемая с помощью тегов

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

часто вложены друг в друга и образуют своего рода «слои». Но я буду дальше придерживаться термина «блочная верстка». Блочная верстка постепенно заменяет табличную, хотя все еще не утихают споры о том, какой из этих двух методов предпочтительнее. Сразу следует отметить, что этот спор касается только того случая, когда таблицы используются для верстки. Если дело касается представления на странице табличных данных, то сомнений не возникает, ибо таблицы именно для этой цели и предназначены. И в этой роли они занимают свое законное место на страницах сайтов. Преимущества и недостатки блочной верстки Блочная верстка отлично связывается со стилями. Все свойства блоков задаются в таблице стилей, что позволяет более полно реализовать принцип разделения содержимого и оформления. Код при этом получается более компактным, чем при табличной верстке, к тому же поисковые системы его лучше индексируют. Слои-блоки можно накладывать друг на друга , что облегчает расположение элементов на веб-странице. Более быстрая загрузка страниц с блочной версткой по сравнению со страницами табличной верстки. Возможность расположения в коде значимых слоев (например, с текстовым содержимым) перед другими слоями, которые визуально находятся на странице выше значимого слоя. Это свойство облегчает индексацию страниц с блочной версткой поисковыми роботами. Есть у блочной верстки и свои отрицательные стороны. При ее применении труднее обеспечить одинаковый вид страниц в разных браузерах, поскольку не все браузеры в равной мере придерживаются спецификаций и стандартов. Но браузеры прогрессируют в направлении полной поддержки различных спецификаций (HTML, CSS, DOM), так что есть надежда, что будущие версии браузеров будут унифицированы и один и тот же сайт станут отображать одинаково корректно. 7. Технология DHTML: Общие правила использования, синтаксис языка JavaScript. Dynamic HTML — это набор технологий, работающих на стороне клиента и обеспечивающих динамическое формирование Веб-страницы в процессе ее загрузки, и динамическое изменение Веб-страницы в ответ на действия пользователя или другие события. Для достижения перечисленных целей используются следующие методы: • динамическое изменение атрибутов и стилей элементов, составляющих HTML-документ; • динамическое извлечение данных из внешних источников и включение их в Веб-страницу; • использование динамически загружаемых шрифтов; • поддержка визуальных и мультимедийных эффектов при отображении страниц; • механизмы сохранения информации на компьютере-клиенте между сессиями работы. Все эти явно разнородные методы покоятся, в действительности, на двух китах. Первым из них является интеграция HTML-документа, каскадных стилей и сценариев клиента, основанная на объектной модели документа. Вторым — использование компонентного программирования, позволяющего нам встраивать однажды разработанные компоненты во вновь создаваемые документы. Применение DHTML на практике выливается в динамически изменяемые цвета, анимированную графику, систему выпадающих меню и другие стандартные (для современных ОС, но не для Веба) элементы

пользовательского интерфейса, явно привлекательнее для пользователя, чем обычные статические страницы. Разумеется, при этом нужно иметь чувство меры и соблюдать общие принципы дизайна. При умелом использовании DHTML приводит к уменьшению трафика. Он переносит основную тяжесть по формированию Веб-страниц с сервера на клиент. Основным недостатком DHTML является то, что он не стандартизован, и под каждый из популярных Вебобозревателей нужно писать свою версию HTML-документа. Динамической страницы требует программирования на сценарном языке, сопряженного с пониманием работы обозревателя на уровне генерации и обработки событий, владением основами пользовательского интерфейса и т. п. Веб-обозреватель, работающий на компьютере-клиенте, обеспечивает среду, в которой СКРИПТ имеет доступ к объектам, которые представляют собой окна, меню, диалоги, текстовые области, фреймы, куки и ввод-вывод в Вебстраницу. Кроме того, обозреватель позволяет присоединить сценарии на языке JavaScript к таким событиям, как загрузка и выгрузка страниц и графических образов, нажатие клавиш и движение мыши, выбор текста и пересылка форм. При этом программный код сценариев только реагирует на события и поэтому не нуждается в главной программе. Набор объектов, предоставляемых обозревателем, известен под названием Document Object Model (DOM). JavaScript — объектно-ориентированный язык сценариев, позволяющий включать в веб-страницы исполняемое содержимое (скрипты). JavaScript выполняется на стороне клиента и поддержка JavaScript включена практически во всех браузерах. С помощью этого языка вы сможете отойти от статики обычного HTML и создавать страницы с динамически изменяемым содержанием. В этом разделе приводится учебник по JavaScript в примерах. После изучения этих уроков вы сможете писать скрипты любой сложности. Синтаксис JavaScript и Java сделан по образцу C и C++. Отметим основные правила: Чувствительность к регистру. Все ключевые слова пишутся в нижнем регистре. Все переменные и названия функций пишутся точно так же, как и были определены (например, переменные Str и str являются разными переменными). Пробелы, табуляция и перевод строки. Эти символы игнорируются в JavaScript, так что можно использовать их для форматирования кода с тем, чтобы его было удобно читать. Символ точка с запятой (;). Все операторы должны быть разделены этим символом. Если оператор завершается переводом строки, то точку с запятой можно опустить. При этом нужно следить за тем, чтобы при разрыве строки одного оператора, новая строка не начиналась бы с самостоятельного оператора. Комментарии. JavaScript игнорирует любой текст расположенный между символами /* и */. Также игнорируется текст начинающийся символами // и заканчивающийся концом строки. Индентификаторы. Индентификаторами являются имена переменных, функций, а также меток. Индентификаторы образуются из любого количества букв ASCII, подчеркивания (_) и символа доллара ($). Первым символом не может быть цифра, а в версии JavaScript 1.0 не допускается использования и символа $. Ключевые слова. Ключевые слова не могут использоваться в качестве индетификаторов. Ключевыми словами являются: break, case, continue, default, delete, do, else, export, false, for, function, if, import, in, new, null, return, switch, this, true, typeof, with. 8. Технология DHTML: Принципы объектной модели языка JavaScript. При создании HTML-документов и JavaScript-программ необходимо учитывать структуру объектов. Все объекты можно разделить на три группы: 1 Объекты браузера ; 2 Внутренние, или встроенные, объекты языка JavaScript ; 3 Объекты, связанные с тегами языка HTML ; Объектами браузера являются зависимые от браузера объекты: window (окно), location (местоположение) и history (история). Внутренние объекты включают простые типы данных, такие как строки (string), математические константы (math), дата (date) и другие. Объекты, связанные с тегами HTML, соответствуют тегам, которые формируют текущий документ. Они включают такие элементы как гиперсвязи и формы. Методы объектов С объектами связаны методы, которые позволяют управлять этими объектами, а также в некоторых случаях менять их содержимое. Кроме того в языке JavaScript имеется возможность создавать свои методы объектов. При использовании метода объекта, нужно перед именем метода указать имя объекта к которому он принадлежит. Например, правильным обращением к методу document является выражение document.write(), а просто выражение write() приведет к ошибке. Свойства объектов языка JavaScript В объектно-ориентированном программировании используется также термин свойство. Свойство — это именованное значение, которое принадлежит объекту. Все стандартные объекты языка JS имеют свойства. Например, в прошлой главе мы использовали в одном из примеров свойство bgColor объекта document. данное свойство соответствует атрибуту bgColor тега — цвет фона документа. Для обращения к свойству необходимо указать имена объекта и свойства, разделив их точкой. Каждый объект имеет собственный набор свойств. Набор свойств нового объекта можно задать при определении объекта. Однако, некоторые свойства объктов существуют только для чтения, и вы не можете их менять. В таких случаях можно получить только значения этих свойств. Как показывает практика, такие свойства изменять обычно без надобности и проблем в связи с этим не возникает. Объекты браузеров

Браузеры поддерживают объекты различных типов. HTML-объектами являются объекты, которые соответствуют тегам языка HTML. К ним относятся метки, гиперсвязи и элементы формы — текстовые поля, кнопки, списки и др. Объекты верхнего уровня, или объекты браузера, — это объекты, поддерживаемые в среде браузера: window, location, history, document, navigator. Объекты, перечисленные в таблице, создаются автоматически при загрузке документа в браузер. Объект window Объект window обычно соответствует главному окну браузера и является объектом верхнего уровня в языке JavaScript, поскольку документы, собственно, и открываются в окне. В фреймосодержащих документах, объект window может не всегда соответствовать главному окну программы. Поэтому для обращения к конкретному окну следует использовать свойство frames объекта parent. Фреймы — это те же окна. Чтобы обратиться к ним в языке JavaScript, можно использовать массив frames. Например, выражение parent.frames[0] обращается к первому фрейму окна браузера. Предполагается, что такое окно существует, но при помощи метода window.open() можно открывать и другие окна и обращаться к ним посредством свойств объекта window. Для обращенния к методам и свойствам объекта window используют следующие варианты записи: window.propertyName window.methodName (parameters) self.propertyName self.methodName (parameters) top.propertyName top.methodName (parameters) parent.propertyName parent.methodName (parameters) windowVar.propertyName windowVar.methodName (parameters) propertyName methodName (parameters) Здесь windowVar — экземпляр объекта window. Имя self — синоним, используемый для обращения к текущему окну во фреймосодержащем документе, тогда как имя top применяется для обращения к главному окну браузера. Для этой цели можно применить и объект parent. Однако следует иметь в виду, что значением parent является ссылка на родительское окно, когда top — ссылка на окно верхнего уровня, которое содержит либо данный фрейм, либо фрейм содержащий вложенный фрейм. Обращение напрямую к методам и свойствам возможно при использовании оператора with. 9. Технология DHTML. Спецификации DOM 2, DOM 3. DOM Level 1. DOM – это специальная, языково-независимая интерфейсная модель разбора XML и HTML документов. В этой статье мы будем рассматривать основную и самая важную часть DOM – DOM Core описывающую модель XML. Существует три уровня моделей DOM: DOM Level 1 – описывает основные интерфейсы, DOM Level 2 – вводит дополнение XML Namespaces, DOM Level 3 – определяет методы Load и Save. DOM представляет документ как иерархию узлов. DOM определяет стандартный набор интерфейсов узлов которые может использовать XML-анализатор для анализа документа. Существуют узлы таких типов: • Text (простой текст). Например: «Простой текст» • CDATASection (Character data – также символьные данные). Например: »

It’s a header

And it is a content

Модель DOM должна интетпретировать этот код так: Самый верхний элемент получившегося дерева – узел типа Document. Этот оъект должен присутствовать во всех DOM документах. В нём содержатся значения: типа документа, корневого элемента (в данном случае это нижестоящий элемент «HTML»). Следующий узел «HTML» – объект типа Element. Это основной тип узлов. В вышеприведенном примере к узлам Element также относятся: «Head», «Body», «Title», «H1», «P». Узел «DOM» принадлежит к текстовым (text). Объекты Element могут также содержать аттрибуты – узлы типа Attribute. Например:

It is a header

В данном примере элемент «H1» содержит дочерние элементы «align» типа Attribute и «It is a header» типа Text. Как уже вам известно все эти интерфейсы определены в DOM Level 1. DOM Level 2. Модель DOM Level 2 вводит использование стилевых таблиц, определяет модель сообщений и XML Namespaces. Одним из самых важных в DOM Level 2 было введение XML Namespaces. В сущности namespaces (пространства имен) используются для того чтобы разрешить многократный доступ к словарям XML при этом используясь в одном XML документе. Например вы хотите использовать описания книг находящиеся в XHTML документе. Каждая книга в своем описании использует элемент . Но элемент уже используется в заголовке документа XHTML. В таком случае будет тяжело сделать различие между этими элементами. Для решения этой проблемы, каждому элементу надо присвоить идентификатор. Для этого служит URI (Unified Resource Indentefier). Итак для того чтобы присвоить какому либо элементу универсальный идентификатор нужно к тегу стоящему выше его по иерархии DOM добавить параметр вида «xmlns:indentefier=»URI», где indentefier это имя индентификатора, а URI – сам индентификатор. Для его использования надо к используемуму элементу добавить спереди имя идентификатора indentefier и двоеточие. Это заголовок документа XHTML А здесь должен быть заголовок книжки В даном случае в корневом теге описано два пространства имен – xhtml и books. Теперь в этом документе можно использовать одни и те же элементы, но с разным значением, ставя перед ними имя пространства имен и двоеточие. Вы можете также применить пространство имен для всех элементов данного блока напрмер: Some text . эквивалентно: Some text Использование пространств имен DOM 2 обеспечивается введением нескольких дополнительных функций. DOM 2 состоит из следующих групп взаимосвязанных интерфейсов: Core — базовые интерфейсы, определяющие представление любого XML-документа в виде дерева; View — интерфейсы, описывающие возможные отображения документа; Event — интерфейсы, определяющие порядок генерации и обработки событий; Style — интерфейсы, определяющие применение к документам таблиц стилей; Traversal & Range — интерфейсы, определяющие прохождение дерева документа и манипулирование областями его содержимого; HTML — интерфейсы, определяющие представление HTML-документа в виде дерева. DOM Level 3

. На данный момент это последняя версия DOM. Спецификация этой модели состоит из трех частей: DOM3ASLS, DOM3-Core, DOM3-Events, DOM3-XPath. DOM ASLS (Abstract Schemas and Load and Save specification) – эта спецификация определяет схемы DTD и XML Schemas, а также методы Load and Save. Что такое DTD и XML Schemas вы можете узнать в документах по XML. Методы Load and Save, как можно догадаться из названия должны загружать и сохранять содержимое DOM-модели. Спецификация DOM3 Events – описывает модель сообщений и в основном базируется на DOM2 Events. Особенного внимания заслуживает спецификация DOM3-XPath. Эта спецификация определяет простой набор интерфейсов для доступа к дереву DOM через XPath 1.0. 10. Технология DHTML. Методология программирования AJAX. Dynamic HTML или DHTML — это способ создания интерактивного веб-сайта, использующий сочетание статичного языка разметки HTML, встраиваемого (и выполняемого на стороне клиента) скриптового языка JavaScript, CSS (каскадных таблиц стилей) и DOM (объектной модели документа). Он может быть использован для создания приложения в веб-браузере: например для более простой навигации или для придания интерактивности форм. DHTML может быть использован для динамического перетаскивания элементов по экрану. Также он может служить как инструмент для создания основанных на браузере видеоигр. DHTML приложения, которые вполне автономны в браузере, без серверной поддержки, такой как база данных, иногда вынуждены обращаться к Single Page Applications, или SPA. AJAX — это модное название для набора техник разработки веб-интерфейсов, позволяющих делать динамические запросы к серверу без видимой перезагрузки веб-страницы: пользователь не замечает, когда его браузер запрашивает данные. AJAX обеспечивает динамичность и асинхронность web-разработок при отсутствии необходимости обновления страниц. Это технология-конгломерат, которая обеспечивает динамическое и асинхронное поведение, где исключается обновление страниц. Посредством AJAX пользователь может взаимодействовать с web-страницами, подобно работе с клиентами с более богатыми возможностями. AJAX — не самостоятельная технология, а концепция использования нескольких смежных технологий. AJAX базируется на двух основных принципах: использование технологии динамического обращения к серверу «на лету», без перезагрузки всей страницы полностью, например: с использованием XMLHttpRequest; через динамическое создание дочерних фреймов; через динамическое создание тега

модель и представляющего окно браузера. Это свойство и является объектом, соответствующим сгенерированному событию. Цикл жизни события Любое событие имеет свой «жизненный» цикл: от момента возникновения действия или условия, являющегося причиной генерирования события, до выполнения последнего оператора обработчика события или финальных действий браузера. Цикл жизни любого типичного события включает следующие этапы: Происходит действие пользователя или возникает условие, которое возбуждает событие. Тотчас же корректируется объект event, чтобы отразить параметры возникшего события. Событие генерируется — это и есть истинное сообщение о возникшем событии. Вызывается обработчик событий элемента-источника события, который выполняет определенные программистом действия и завершает свою работу. Событие передается вверх по иерархии объектов (bubble up) и вызывается обработчик события объекта, являющегося родителем объекта-источника события. Это «всплытие» вверх по иерархии объектов продолжается, пока не будет достигнут самый верхний объект иерархии — объект window, или обработчик события какого-либо объекта не аннулирует событие. Выполняются заключительные действия по умолчанию, если таковые определены, но при условии, что событие не было аннулировано. Если для элемента-источника события не определен обработчик событий, то в иерархии объектов определяется его родитель, и обработчик событий родителя выполняет соответствующие действия по обработке события. и так происходит до корневого объекта иерархии. Какие удобства предоставляет подобная технология обработки событий? Прежде всего, нет необходимости для каждого элемента писать процедуру обработки события и присоединять ее к нему. Достаточно написать одну процедуру для элемента-родителя, и она будет обрабатывать события, возбуждаемые всеми порожденными родителем элементами. Это позволяет централизованно обрабатывать наиболее часто возникающие события, и, как результат, требует меньше усилий и времени для написания и поддержки кода процедур обработки событий. Пример демонстрирует технику передачи события вверх по иерархии объектов. В нем щелчки кнопкой мыши на всех элементах страницы обрабатываются централизованно обработчиком события элемента , который является родителем всех элементов страницы. Пример. Передача обработки события родителю <ТIТLЕ>Всплывание события Привет!

Это простой пример, <В >ну очень простой пример. Щелчок на любом элементе документа приводит к отображению диалогового окна предупреждений из процедуры обработки события click объекта body. Если к какому-нибудь элементу добавить собственный обработчик событий, то будут выполнены две процедуры: самого элемента и элемента родителя. Если элемент расположен достаточно глубоко в иерархии объектов, и каждый элемент, расположенный выше него, имеет также собственный обработчик событий, то неужели событие будет обрабатываться всеми обработчиками? Да, именно это и произойдет, если только какой-то обработчик не аннулирует «всплывающее» вверх по иерархии событие. Объект event имеет свойство cancelBubble, которое позволяет аннулировать событие, если установить его значение равным true. После этого соответствующее событие не существует, и обработчики этого события для всех, расположенных выше элементов, не вызываются. В примере 10.4 обработчик щелчка мыши выделенного элемента аннулирует данное событие. Это приводит к тому, что при щелчке на нем никакого диалогового окна с сообщением не отображается. Объект event Как уже отмечалось, объект event создается автоматически всякий раз, когда возникает какое-либо событие. Этот объект не зависит от используемого языка создания сценария, и его использование в процедурах обработки событий для получения информации о сгенерированном событии является предпочтительным способом получения достоверной информации о событии. Каждое событие характеризуется параметрами, которые передаются в сценарий через свойства объекта event. Существуют параметры, общие для всех типов событий (например, координаты курсора мыши в окне браузера) и специфические для определенного события (например, код нажатой клавиши для событий клавиатуры). Свойства объекта event, как и сам он, являются динамическими и создаются в зависимости от типа произошедшего события. При описании свойства, если не оговорено противное, подразумевается, что оно является общим для всех типов событий. Свойство srcEiement определяет элемент документа, явившийся источником события. Оно может быть полезным при централизованной обработке событий элементом, расположенным выше в иерархии объектов документа истинного «виновника» события, и, в зависимости от типа элемента, программа-обработчик может предпринять соответствующие действия.

Важное свойство cancelBubble, аннулирующее событие и прекращающее передачу его на обработку вверх по иерархии объектов, рассмотрено немного ранее в этом же разделе. Свойство returnvalue является булевым и возвращает значение true или false после завершения выполнения процедуры обработки события. При передаче события вверх по иерархии значение этого свойства можно использовать для альтернативной обработки события. Кроме того, если в обработчике события элемента, для которого определены действия по умолчанию, это свойство устанавливается равным false, то это отменяет выполнение действий по умолчанию. Одним из таких элементов является тег <А>, действием по умолчанию которого является переход по ссылке, задаваемой параметром HREF. По значениям свойств aitKey, ctriKey и shiftKey элемента-источника события определяется, была ли нажата, соответственно, клавиша , или в момент возникновения события. Значение свойства равно true, если клавиша была нажата, и false — в противном случае. 12. Технология DHTML. Различные подходы изменения web-страницы. 13. JavaScript – библиотеки. Обзор, достоинства, недостатки. Примеры. Библиотека JavaScript — сборник классов и/или функций на языке JavaScript. Язык JavaScript, изначально разработанный Netscape (а затем развиваемый Mozilla), долгое время использовался в сети на многих сайтах, но широкую популярность получил с приходом Веб 2.0 — периода развития компьютерных систем, в котором JavaScript совместно с различными диалектами XML стал активно использоваться в разработке пользовательских интерфейсов как веб-приложений, так и настольных приложений. JavaScript в связке с CSS используется для создания динамических сайтов, более доступных, чем основанные на Flash альтернативы. С увеличением популярности JavaScript, простота создания динамических элементов пользовательского интерфейса стала играть ключевую роль в веб-разработке. Этим обусловлен лавинообразный характер появления различных библиотек JavaScript, таких как Ext и Dojo. С другой стороны, одним из последствий войны браузеров стала разница в реализации объектной модели документа и это обусловило необходимость затрачивать дополнительные усилия для реализации корректной работы различных браузеров. Данное обстоятельство обусловило появление библиотек JavaScript, предоставляющих кросс-браузерный интерфейс к методам DOM, таких как Prototype, script.aculo.us или jQuery. Удобство использования библиотек JavaScript привело к тому, что Microsoft, Yahoo! и другие крупные ИТкомпании разрабатывают свои собственные основанные на JavaScript библиотеки элементов пользовательского интерфейса, встраиваемые в веб-приложения, разрабатываемые этими компаниями. Более того, некоторые библиотеки JavaScript позволяют упростить взаимодействие JavaScript с другими языками, такими как CSS, PHP, Ruby и Java. Это позволяет упростить запуск приложений JavaScript с приложениями, написанными на других языках программирования.. jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX. Преимущества jQuery : • Облегчает работу с моделью документа DOM. • Много всевозможных эффектов • Выполнение Ajax запросов • Кросс – браузерная совместимость • Подключая модули, Вы можете нарастить функционал и модульность jQuery • Простота в использовании Недоработки jQuery : Производительность работы. Чистый JavaScript работает намного быстрее (в умелых руках), но говорить о быстрой работе не очень правильно так как растет производительность компьютеров пользователей и сами разработчики всё время повышают скорость самого фреймвёрка.Это есть размер библиотеки. Размер библиотеки jQuery около 19 кБ. Это не очень и много, но все же. Снова же, это очень спорный недостаток при современной скорости интернета, или при пользовании CDN (в последующей статье мы поговорим об этом, когда остановимся на возможных вариантах для подключения библиотеки jQuery). Как вы видите минусов не так и много. И тем не менее, говорить, что лучшая библиотека JavaScript – это jQuery я не стану. Да, она является одной из лучших если вы желаете управлять DOM или применять Ajax-запросы, а вот в других параметрах jQuery уступает. А значит выбирать нужно такую библиотеку JavaScript, которая будет больше подходить Вам для ваших задач. Mootools 1.2 (My Object Oriented Tools) – это легкая, но мощная библиотека JavaScript, предназначенная для облегчения интерактивного создания веб страниц с помощью JavaScript. В некотором смысле можно сказать, что многие действия, которые умеет Mootools, можно рассматривать как расширения CSS (Cascade Style Sheet – Каскадные таблицы стилей). Например, с помощью CSS можно изменить свойство какого-либо элемента при наведении курсора на него (свойство :hover), тогда как JavaScript распознает даже больше событий, спровоцированных пользователем (клик – «click», наведение курсором – «mouseover», нажатие различных клавиш и

т.д.), а библиотека Mootools делает распознавание этих событий настолько простым, что этим просто невозможно не воспользоваться! Ко всему прочему, у Mootools в запасе есть уйма интересных расширений, которые позволят вам не только изменять «на лету» свойства элементов (таких как свойство CSS :hover), но которые также позволяют вам изменять форму объектов, анимировать их движения и множество других возможностей. В основу Mootools заложены основные функции библиотеки, которые упрощают выполнение основных задач, а также усиливают возможности уже существующих (остановимся более подробно на этом позже). Возможности, указанные в списке ниже являются только лишь примеры некоторых возможностей Mootools, которые не заменяют чтения полной документации по Mootools. • Поиск значения (возвращает false, если значение не существует или 0, если существует) – $chk(значение); • Возвращает целое число из указанного диапазона – $random (мин, макс); • Позволяет с легкостью определять версию браузеров, их движком и возможностей. Native Эта часть библиотеки также содержит некоторые основные инструменты, которые позволяют манипулировать массивами (по сути списком значений или объектов), функциями, числами, строками, потоками данных и событиями. Вот некоторые из инструментов, представленных в части Native: • Создавать скрипты, которые бы применяли какие-либо действия к каждому объекту массива – .each(); • Выбирать последний объект массива – getLast(); • Создавать событие, которое бы происходило каждые Х милисекунд – .periodical(); • Округлять дроби – .round(); • Конвертировать цвета из RGB в шестнадцетиричную систему исчисления – .rgbToHex(). Класс Класс в JavaScript (в отличие от класса CSS) – это объект с некой функциональностью многоразового использования. Элемент Классы элементов предоставляют, вероятно, самый полезный функционал библиотеки Mootools. С помощью этих инструментов можно выбирать элементы Dom-а, манипулировать их свойствами и положением на странице, изменять их стиль CSS и многое другое. Вот, что можно делать с помощью некоторых из инструментов Mootools: • Выбирать первый элемент DOM-а определенного типа, с определенным ID или определенного класса – .getElement(); • Выбирать все элементы DOM-а имеющие определенный тип, определенный ID или определенный класс – .getElements(); • Добавить определенный класс выбранному элементу – .addClass(); • Узнать значение свойства какого-либо элемента – .getProperty(); • Изменять или устанавливать значение свойства какого-либо элемента – .setProperty(); • Узнать значение свойства стиля какого-либо элемента – .getStyle(); • Изменить или установить значение свойства стиля какого-либо элемента – .setStyle(); • Узнать координаты элемента – .getCoordinates(). Утилиты Утилиты Mootools предоставляют еще более удобные критерии поиска элементов на странице, включая событие domready, предоставляет дополнительные инструменты для запросов AJAX, упрощает работу с кукисами и даже включает в себя некоторый функционал, позволяющий объединить JavaScipt и ActionScript. Спец. эффекты FX Это, пожалуй, та часть Mootools, которая доставляет больше всего удовольствия и радости разработчикам. С помощью эффектов FX можно создавать эффекты передвижения, изменения формы, а также другие эффекты, которые добавляют анимации вашим объектам и элементам DOM. Плагины Mootools расширяют его основную функциональность, позволяя с легкостью манипулировать фнукиональность пользовательского интерфейса . Список плагинов Mootools включает в себя:

вызова некоторых функций языка до сложных методов обращения к XMLHttpRequest. Ниже приведены некоторые примеры. Функция $() Для обращения к DOM элементу HTML страницы обычно используется функция document.getElementById: document.getElementById(«id_of_element») Функция $() уменьшает код до: $(«id_of_element») Но в отличие от функции DOM, функции $() можно передавать более одного аргумента и функция вернет массив (Array) объектов со всеми соответствующими элементами: var ar = $(‘id_1’, ‘id_2’, ‘id_3’); for (i=0; i

> Объектно-ориентированное программирование Prototype также добавляет поддержку более традиционного объектно-ориентированного программирования. Для создания нового класса используется метод Class.create(). Классу присваивается прототип prototype, который выступает в качестве основы для каждого экземпляра класса. Старые классы могут быть расширены новыми с помощью Object.extend. 14. Межсайтовый скриптинг XSS. XSS (англ. Сross Site Sсriрting — «межсайтовый скриптинг») — тип уязвимости интерактивных информационных систем в вебе. XSS возникает, когда в генерируемые сервером страницы по какой-то причине попадают пользовательские скрипты. Специфика подобных атак заключается в том, что вместо непосредственной атаки сервера они используют уязвимый сервер в качестве средства атаки на клиента. Для термина используют сокращение «XSS», чтобы не было путаницы с каскадными таблицами стилей, использующих сокращение «CSS». Сейчас XSS составляют около 15 % всех обнаруженных уязвимостей[1]. Долгое время программисты не уделяли им должного внимания, считая их неопасными. Однако это мнение ошибочно: на странице или в HTTPCookie могут быть весьма уязвимые данные (например, идентификатор сессии администратора). На популярном сайте скрипт может устроить DoS-атакy. Классификация По механизму исполнения атаки Условно XSS можно разделить на активные и пассивные. Пассивные Пассивные XSS подразумевают, что скрипт не хранится на сервере уязвимого сайта, либо он не может автоматически выполниться в браузере жертвы. Для срабатывания пассивной XSS требуется некое дополнительное действие, которое должен выполнить браузер жертвы (например, клик по специально сформированной ссылке). Их также называют первым типом XSS. Активные При активных XSS вредоносный скрипт хранится на сервере, и срабатывает в браузере жертвы при открытии какой-либо страницы заражённого сайта. Их также называют вторым типом XSS. Скриптинг через DOM По каналам внедрения скрипта Отсутствие фильтрации HTML-тегов в сообщениях пользователей Некоторые форумы позволяют пользователю использовать HTML-теги для форматирования текста. Если отсутствует должный уровень фильтрации, злонамеренный пользователь может вставить такие теги

При выполнении кода с использованием разных подходов - XML или DOM - есть небольшие различия. Вариант с использованием DOM чуть более гибкий по нескольким причинам: • одному и тому же объекту можно добавлять несколько обработчиков с помощью addEventListener(); • если третий аргумент addEventListener() - true, обработчик может быть запущен в фазе перехвата, что невозможно сделать через XML; • обработчики можно удалять с помощью функции removeEventListener(). Если вы задали обработчик в XUL, то вы сможете его там только заменить, но не удалить; • при использовании DOM обработчики событий могут быть вынесены за пределы XML-содержимого. Поэтому их можно помещать в отдельный .js-файл. Но и у XML-подхода есть одно преимущество: можно использовать фрагмент скрипта меньший, чем целая функция. Эта возможность может быть полезной для HTML, но в случае XUL, где рекомендуется структурированное программирование, пользы в этом не так уж много. Если XML-файлу предстоит долгая жизнь, обработчики событий в атрибутах указывать не рекомендуется. 15. Протокол HTTP. Структура HTTP-запроса. HTTP - это протокол высокого уровня (а именно, уровня приложений), обеспечивающий необходимую скорость передачи данных, требующуюся для распределенных информационных систем гипермедиа. HTTP используется проектом World Wide Web с 1990 года. HTTP основывается на парадигме запросов/ответов. Запрашивающая программа (обычно она называется клиент) устанавливает связь с обслуживающей программой-получателем (обычно называется сервер) и посылает запрос серверу в следующей форме: метод запроса, URI(Universal Resource Identifier - URI), версия протокола, за которой следует MIME-подобное сообщение (Multipurpose Internet Mail Extensions (MIME-Многоцелевое Расширение Почты Internet), содержащее управляющую информацию запроса, информацию о клиенте и, может быть, тело сообщения. Сервер отвечает сообщением, содержащем строку статуса (включая версию протокола и код статуса - успех или ошибка), за которой следует MIME-подобное сообщение, включающее в себя информацию о сервере, метаинформацию о содержании ответа, и, вероятно, само тело ответа. Следует отметить, что одна программа может быть одновременно и клиентом и сервером. Использование этих терминов в данном тексте относится только к роли, выполняемой программой в течение данного конкретного сеанса связи, а не к общим функциям программы. Для большинства приложений сеанс связи открывается клиентом для каждого запроса и закрывается сервером после окончания ответа на запрос. HTTP-запрос Запрос это сообщение, посылаемое клиентом серверу. Первая строка называется строка статуса. Для совместимости с протоколом HTTP/0.9, существует два формата HTTP запроса: (Простой-Запрос | Полный-Запрос ) Простой-Запрос = Метод SP Запрашиваемый-URI CRLF Полный-Запрос = Метод SP URI-Запроса SP Версия-HTTP CRLF *(Общий-Заголовок | Заголовок-Запроса | Заголовок-Содержания ) CRLF [ Содержание-Запроса ] (SP-продел, CRLF – перевод строки, возврат каретки, расстановка символов CRLF и SP критична) Если HTTP/1.0 сервер получает Простой-Запрос, он должен отвечать Простым-Ответом HTTP/0.9. HTTP/1.0 клиент, способный обрабатывать Полный-Ответ, никогда не должен посылать Простой-Запрос. Метод В поле Метод указывается метод, который должен быть применен к ресурсу, идентифицируемому URI-Запроса. Названия методов чувствительны к регистру. Существующий список методов может быть расширен. Метод = "OPTIONS" | "GET" | "HEAD" | "PUT" | "POST" | "DELETE" | "LINK" | "UNLINK" | дополнительный-метод Если данный метод известен серверу, но не допускается для указанного ресурса, сервер должен вернуть код статуса "405 Method Not Allowed", и код статуса "501 Not Implemented", если метод не известен или не поддерживается данным сервером. Методы : OPTIONS - метод позволяет клиенту определять опции и/или требования, связанные с ресурсом, или возможностями сервера. GET -метод служит для получения любой информации, идентифицированной URI-Запроса. Если URIЗапроса ссылается на процесс, выдающий данные, в качестве ответа будут выступать данные, сгенерированные данным процессом. Метод GET изменяется на "условный GET", если сообщение запроса включает в себя поле заголовка "If- Modified-Since". В ответ на условный GET, тело запрашиваемого ресурса передается только, если он изменялся после даты, указанной в заголовке "If-Modified-Since". Алгоритм определения этого включает в себя следующие случаи: Если код статуса ответа на запрос будет отличаться от "200 OK", или дата, указанная в поле заголовка "If- Modified-Since" некорректна, ответ будет идентичен ответу на обычный запрос GET. Если после указанной даты ресурс изменялся, ответ будет также идентичен ответу на обычный запрос GET. Если ресурс не изменялся после указанной даты, сервер вернет код статуса "304 Not Modified". Использование метода условный GET направлено на разгрузку сети, так как он позволяет не передавать по сети избыточную информацию. HEAD - аналогичен методу GET, за исключением того, что в ответе сервер не возвращает ТелоОтвета. Данный метод может использоваться для получения метаинформации о ресурсе без передачи по сети самого ресурса.

Атрибуты и DOM-свойства

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/dom-attributes-and-properties.

При чтении HTML браузер генерирует DOM-модель. При этом большинство стандартных HTML-атрибутов становятся свойствами соответствующих объектов.

Например, если тег выглядит как , то у объекта будет свойство body.id = "page" .

Но это преобразование – не один-в-один. Бывают ситуации, когда атрибут имеет одно значение, а свойство – другое. Бывает и так, что атрибут есть, а свойства с таким названием не создаётся.

Если коротко – HTML-атрибуты и DOM-свойства обычно, но не всегда соответствуют друг другу, нужно понимать, что такое свойство и что такое атрибут, чтобы работать с ними правильно.

Свои DOM-свойства

Ранее мы видели некоторые встроенные свойства DOM-узлов. Но, технически, никто нас ими не ограничивает.

Узел DOM – это объект, поэтому, как и любой объект в JavaScript, он может содержать пользовательские свойства и методы.

Например, создадим в document.body новое свойство и запишем в него объект:

document.body.myData = < name: 'Пётр', familyName: 'Петрович' >; alert( document.body.myData.name ); // Пётр