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

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

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

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

4 Структура html-страницы 4

5 Объектная модель документа браузера 5

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

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

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

9 Что такое селектор в CSS? (типы селекторов) 9

10 Способы подключения каскадной таблицы стилей в html-странице 10

11 Синтаксис оформления правил форматирования элементов html-странице в CSS 10

12 Селекторы атрибутов в CSS 11

13 Что можно изменять на веб странице с помощью каскадных таблиц стилей? 12

14 Назначение свойства float в CSS 12

15 Назначение свойства display в CSS 13

16 Назначение свойства position в CSS 14

17 Способ включения JS-кода в html страницу 16

18 Что такое формальные и фактические параметры у функции на языке JavaScript? 16

19 Создание переменной в языке JavaScript и область видимости переменной 17

20 Создание функции в языке JavaScript 17

21 Создание функционального выражения в языке JavaScript 17

22 Создание стрелочной функции в языке JavaScript 18

23 Как создать библиотеку функций языка JavaScript? 19

24 Что такое конкатенации строк в JavaScript? 19

25 Как создавать массив в JavaScript? 20

26 Какие символы допускается использовать при создании переменной в JavaScript? 20

27 Что обозначают знаки: один знак равенства (=), два знака равенства (==) и три знака равенства (===) в JS? 20

28 Какие символы являются разделителем команд в JavaScript? 20

29 Назначение оператора return в JavaScript? 21

30 Создание объектов в JavaScript 22

31 Логические операторы в языке JavaScript 23

32 Работа со строками в Javascript 23

33 Создание и использование библиотек Javascript 25

36 Ассоциативный массив в JavaScript? 27

37 Способы подключения библиотеки Jquery в html-странице 28

39 Как подключить регулярное выражение в коде JavaScript 29

40 Управляющие символы в регулярном выражении 29

41 Назначение метода replace() при использовании регулярных выражений 30

42 Назначение метода match() при использовании регулярных выражений 30

43 За счет какого алгоритма обеспечивается быстродействие перестройки html-страницы во фреймворке React? 30

44 Как подключить фреймворк React к html-странице 31

45 Основные методы фреймворка React 32

46 Назначение метода React.createElement у фреймворка React 33

47 Назначение метода React DOM у фреймворка React 33

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

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

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

Тег HTML (от англ.tag) – специальная метка, используемая в HTML для разметки веб-страницы в соответствии с установленными правилами.Теги в html-документе идентифицируются парой символов < и >, между которыми располагаются характеристики тега:

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

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

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

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

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

, , -,, ,

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

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

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

,

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

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

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

Потомок — элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент
является потомком одновременно для и .

Родительский элемент — элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 является родительским только для и . Элемент
является родительским только для .

Дочерний элемент — элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы
,
,
и
являются дочерними по отношению к .

Сестринский элемент — элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 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.