Файл: 1 Прототип htmlстраниц вебприложения 3 2 Синтаксис записи тегов и атрибутов в html 3.docx

ОГЛАВЛЕНИЕ

1 Прототип html-страниц веб-приложения

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

---

2 Синтаксис записи тегов и атрибутов в html

Тег HTML (от англ. tag) – специальная метка, используемая в HTML для разметки веб-страницы в соответствии с установленными правилами.

Теги в html-документе идентифицируются парой символов < и >, между которыми располагаются характеристики тега:

• 
  символ слеша, если он есть;
  
• 
  имя тега;
  
• 
  атрибуты тега, если они есть;
  
• 
  значения атрибутов, если они есть.
  

В качестве примера рассмотрим два тега:
  id="textIndent"   title="Описание города"> и
. Эта пара тегов образует элемент «Абзац» разметки документа. Первый из них является открывающим тегом и обозначает начало элемента «Абзац». Второй же является закрывающим тегом. Он сообщает браузеру о том, что элемент «Абзац» закончился и все, что будет написано далее, следует отнести к другому элементу разметки.

В открывающих тегах слеш не пишется. Тоже самое касается и одиночных тегов, т.е. тегов, для которых закрывающего тега не существует. Зато в них может присутствовать дополнительная информация в виде атрибутов (от англ. attribute), определяющих какие-нибудь дополнительные свойства, и значений атрибутов, которые обычно записываются в формате имя_атрибута="значение_атрибута" и отделяются друг от друга пробелами. Так в теге
имеется два атрибута и два соответствующих им значения. Следует отметить, что существуют атрибуты и без значений. В таком случае вторая часть пары и символ = отсутствуют, а вместо этого через пробел указывается только сам атрибут.

---

3 Блочные и строчные теги в html

Выделяют две основные категории HTML-элементов, которые соответствуют типам их содержимого и поведению в структуре веб-страницы — блочные и строчные элементы.

Блочные элементы — элементы высшего уровня, которые форматируются визуально как блоки, располагаясь на странице в окне браузера вертикально. Значения свойства display, такие как block, list-item и table делают элементы блочными. Блочные элементы генерируют основной блок, который содержит только блок элемента.

,

, -

,

,
,

Встроенные (строчные) элементы генерируют внутристрочные контейнеры. Они не формируют новые блоки контента. Значения свойства display, такие как inline и inline-table делают элементы строчными.

<a>, <iframe>, <img>, <span>

Существует еще одна группа элементов, которые браузер обрабатывает как строчно-блочные {display: inline-block;}. Такие элементы являются встроенным, но для них можно задавать поля, отступы, ширину и высоту.

,

4 Структура html-страницы
Элементы, находящиеся внутри элемента , образуют дерево документа, так называемую объектную модель документа, DOM (document object model). При этом элемент является корневым элементом.





Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.

• 
  Предок — элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является . В то же время элемент является предком для всех содержащихся в нем элементов: ,
  , ,

5 Объектная модель документа браузера
Объектная Модель Документа (DOM) – это объектная модель документа, которую браузер создаёт в памяти компьютера на основании HTML-кода, полученного им от сервера.

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

В ближайшем приближении DOM – это "дерево узлов" (node tree). У него единый корень, который разветвляется на множество дочерних ветвей, каждая из которых может ветвиться сама и заканчивается "листьями". Корень – это элемент html, а ветви – вложенные элементы.

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

6 Описание и использование DOM событий

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

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

События мыши:

• 
  click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
  
• 
  contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
  
• 
  mouseover / mouseout – когда мышь наводится на / покидает элемент.
  
• 
  mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
  
• 
  mousemove – при движении мыши.
  

События на элементах управления:

• 
  submit – пользователь отправил форму

.

focus – пользователь фокусируется на элементе, например нажимает на .

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

• 
  keydown и keyup – когда пользователь нажимает / отпускает клавишу.
  

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

• 
  DOMContentLoaded – когда HTML загружен и обработан, DOM документа полностью построен и доступен.
  

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

Использование атрибута HTML

Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on<событие>.

Использование свойства DOM-объекта

Можно назначить обработчик, используя свойство DOM-элемента on<событие>.

К примеру, elem.onclick:

Доступ к элементу через this

Внутри обработчика события this ссылается на текущий элемент, то есть на тот, на котором назначен обработчик.

---

7 Объект Document в DOM браузера

Каждая веб-страница, загружаемая в браузере, имеет свой собственный объект Document. Интерфейс объекта Document служит точкой доступа к содержимому веб-страницы (дерево DOM, включающее все элементы со всем их содержимым).

Объект Document используется для получения, изменения или добавления содержимого в HTML-документ и для обработки событий в этом документе.

Методы

Метод	Описание
addEventListener()	Позволяет установить обработчик события для документа.
createElement()	Создает новый элемент.
createTextNode()	Создает и возвращает текстовый узел с указанным текстом. Принимает один аргумент (строку с текстом).
getElementById()	Возвращает ссылку на элемент, с указанным идентификатором.
getElementsByClassName()	Возвращает коллекцию элементов, соответствующих указанному классу.
getElementsByName()	Возвращает коллекцию всех элементов в документе, которые имеют атрибут name с указанным значением. Элементы хранятся в коллекции в том порядке, в котором они встречаются в исходном коде документа. Метод document.getElementsByName() относится к объекту HTMLDocument, а не к объекту Document, поэтому он доступен только в HTML-документах и не доступен в XML-документах.
getElementsByTagName()	Возвращает массив элементов, указанного типа.
querySelector()	Возвращает первый элемент, совпавший с одним из указанных селекторов.
querySelectorAll()	Возвращает массив элементов, соответствующих указанным селекторам.
removeEventListener()	Удаляет обработчик события, который был установлен с помощью метода addEventListener().
write()	Записывает переданные ему аргументы в документ.
writeln()	Записывает переданные ему аргументы в документ, вставляя после вывода данных пробел.

---

Свойства

Свойство	Описание
activeElement	Возвращает элемент, который в данный момент находится в фокусе.
documentURI	Возвращает строку, содержащую URL-адрес документа.
images	Возвращает массив, содержащий все элементы документа.
links	Возвращает массив, содержащий все элементы и , которые имеют атрибут href.

8 Объект Location в DOM браузера

Объект location содержит информацию о расположении текущей веб-страницы: URL, информацию о сервере, номер порта, протокол.

Свойства:

Интерфейс Location не имеет унаследованных свойств, но реализует свойства URLUtils.

Location.href - DOMString, содержащий URL целиком. При изменении, соответствующий документ переходит на новую страницу.

Location.protocol - DOMString, содержащий протокол текущего URL, включая ':'.

Location.host - DOMString, содержащий хост, а именно имя хоста, ':' и порт.

Location.hostname - DOMString, содержащий домен текущего URL.

Location.port - DOMString, содержащий номер порта текущего URL.

Location.pathname - DOMString, содержащий первый '/' после хоста с последующим текстом URL.

Location.search - DOMString, содержащий '?' с последующими параметрами URL.

Location.hash - DOMString, содержащий '#' с последующим идентификатором.

Location.username - DOMString, содержащий имя пользователя, указанное перед именем домена.

Location.password - DOMString, содержащий пароль, указанный перед именем домена.

Location.origin - Возвращает DOMString, содержащий протокол, хост и порт текущего URL.

Методы:

Интерфейс Location не имеет унаследованных методов, но реализует методы URLUtils.

Location.assign() - Загружает ресурс по URL, указанному в качестве параметра.

Location.reload() - Перезагружает ресурс по текущему URL. Единственный опциональный параметр Boolean при значении true указывает, что страница должна быть заново загружена с сервера, при значении false страница может быть загружена из кеша.

Location.replace() - Заменяет текущий ресурс на новый по URL, указанному в качестве параметра. Отличие от assign() в том, что при использовании replace() текущая страница не будет сохранена в History, и пользователь не сможет использовать кнопку назад, чтобы вернуться к ней.

---