Презентация на тему "Работа с DOM-моделью и пользовательский интерфейс"

Содержание

• 
  Слайд 1

  Работа с DOM-моделью и пользовательский интерфейс

• 
  Слайд 2

  Введение в DOM

  DOM – Document Object Model:

   

   

  My link

   

  My header Элементы (Element), один из них - корневой Атрибуты (Attribute) Текстовые узлы (Text)
• 
  Слайд 3

  Работа с узлами в DOM

  Есть несколько способов получить объект, представляющий узел, черезглобальный объект documentили уже имея ссылку на другой узел:

  Если узел имеет уникальный идентификатор (атрибут id), то узелможно найти с помощью метода document.getElementById(id).

  Можно найти массив элементов с заданными тегами с помощьюметода document.getElementsByTagName(tag).

  Можно перейти от узла к его непосредственным потомкамnode.firstChild, node.lastChildили к предку node.parentNode.

  Можно перейти от узла к его соседям node.nextSibling, node.previousSibling.

• 
  Слайд 4

  Пример страницы

   

  Это заголовок

  А это - параграф со ссылкой внутри.

  • элемент списка
  • еще один элемент
  • третий элемент списка
• 
  Слайд 5

  Дерево элементов для этой страницы

  html

  head

  body

  title

  h1

  meta

  p

  meta

  ul

  a

  li

  li

  li

  Некоторые из элементов имеютвложенные атрибуты и/или текст.

• 
  Слайд 6

  Полное дерево одного из элементов

  p

  a

  А это параграф со

  внутри.

  ссылкой

  href="http://www.google.com/"

  - элемент

  - атрибут

  - текстовый элемент

  firstChild

  parentNode

  parentNode

  nextSibling

  nextSibling

  previousSibling

  lastChild

  Если pNode – указатель на "p",то заменим "ссылкой" на "звездой".

  pNode.firstChild.nextSibling.lastChild.nodeValue = "звездой";

  change.html

• 
  Слайд 7

  Изменение структуры DOM страницы

  Следующие методы применимы ко всем элементам DOM:

  element.appendChild(node) – добавление нового узла в конецсписка "детей".

  element.insertBefore(newNode, oldNode) – добавлениенового узла в список детей перед заданным.

  element.removeChild(node) – удаление указанного узла из списка"детей".

  element.replaceChild(newNode, oldNode) – замена в списке "детей" существующего элемента на новый.

  Новый элемент (атрибут, текстовый узел) можно создать с помощью следующих методов:

  document.createElement(tag) – создание нового элемента сзаданным тегом.

  document.createAttribute(name) – создание нового атрибутас заданным именем.

  document.createTextNode(data) – создание текстового узла.

• 
  Слайд 8

  Динамическое добавление узлов

  insert.html

  Добавим новый параграф сразу после заданного:

  function insertNewParagraph() {

  var pNode = document.getElementById('para');

  var newPara = document.createElement('p');

  var newText = document.createTextNode( 'А это динамически добавленный параграф!');

  newPara.appendChild(newText);

  pNode.parentNode.insertBefore(newPara, pNode.nextSibling);

  }

  body

  h1

  pid="para"

  ul

  p (newPara)

  А это...

• 
  Слайд 9

  Отделение Javascript-кода от HTML

  separate.html

  Поместим теперь весь код полностью в отдельную javascript-страницу:

  window.onload = initBody;

  function initBody() {

  var pNode = document.getElementById('para');

  pNode.onclick = insertNewParagraph;

  }

  function insertNewParagraph() {

  var pNode = document.getElementById('para');

  var newPara = document.createElement('p');

  newPara.style.color = 'red';

  newPara.style.marginLeft = '50px';

  var newText = document.createTextNode( 'А это динамически добавленный параграф!');

  newPara.appendChild(newText);

  pNode.parentNode.insertBefore(newPara, pNode.nextSibling);

  }

• 
  Слайд 10

  Динамическое добавление реакций на события

  dyna.html

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

  window.onload = initBody;

  можно написать

  window.addEventListener('load', initBody, false);

  Преимущества:

  Соответствие стандарту (метод addEventListenerприменим не толькодля HTML-страниц, но и для любых XML-документов).

  Можно определить несколько реакций на одно и то же событие, при этомвсе они будут выполняться последовательно.

  Можно управлять распространением событий (третий аргументaddEventListener).

  Удалить реакцию можно с помощьюметода

  window.removeEventListener с теми же аргументами.

  В примере реакции динамически добавляются и удаляются.

• 
  Слайд 11

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

  group.html

  Массовую обработку элементов можно производить с помощью метода

  getElementsByTagName, например:

  var emElements = document.getElementsByTagName('em');

  for (var i = 0; i < emElements.length; ++i) {

  emElements[i].style.backgroundColor = 'yellow';

  }

  В примере показано изменение стиля элементов.

• 
  Слайд 12

  Элементы интерфейса с пользователем

  Имеется большой набор элементов интерфейса с пользователем:

  простое окно ввода;

  многострочное окно ввода;

  кнопка;

  флажок;

  переключатель;

  Чаще всего эти элементы используются в составе «форм». Содержимое«формы» может быть передано web-серверу в виде параметров запроса.

  Все элементы считаются «элементами ввода» различных типов ипоявляются в виде элементов

  , но некоторыемогут иметь и свои собственные теги, например,.

• 
  Слайд 13

  Кнопки

  Пример использования кнопок.

  Заголовок страницы

  button.html

  Внутри тела реакции thisозначает ссылку на сам элемент (кнопку).

  Заголовок страницы

  more-button.html

  Осторожно! Внутри функции thisозначает ссылку на контекст!

• 
  Слайд 14

  Многострочный текст

  function changeProperty(butt, prop) {

  if (typeof(butt.flag) == 'undefined') butt.flag = 1;

  var ta = document.getElementById('myText');

  ta[prop] = butt.flag == 1;

  butt.flag = 1 - butt.flag;

  }

  Это область ввода текста

  Сюда вводим текст.

  Disable/EnableReadOnly yes/no

  textarea.html

• 
  Слайд 15

  Списки выбора

  Выберите из списка:

  ПикиТрефыБубныЧерви

  Вы выбрали: &bksp;

  select.html

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

  selectNode.options – массив узлов, представляющих элементы списка

  selectNode.size – число показываемых элементов

  selectNode.multiple – разрешен ли мульти-выбор

  selectNode.selectedIndex – индекс выбранного элемента

  Еще атрибуты:

• 
  Слайд 16

  Списки выбора (продолжение)

  Репка ДедкаБабкаВнучка ЖучкаКошкаМышка

  Список может быть визуально разбит на группы

• 
  Слайд 17

  Поля ввода

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

  где «тип элемента ввода» может иметь следующие значения:

  text

  password

  checkbox

  radio

  button

  submit reset file hidden

  текстовое поле ввода, похожее на textarea

  текстовое поле ввода со скрытым отображением символов

  флажок

  элемент выбора

  кнопка (такая же, как в элементе button)

  Кроме этих типов есть еще типы, предназначенные исключительно дляпредставления элементов ввода внутри форм для передачи информациина web-сервер. Это типы:

• 
  Слайд 18

  Поля ввода (продолжение)

  имеют атрибуты maxLength, size, disabled, readOnly, value.

  имеют атрибуты defaultChecked, disabled, checked, value.

  имеет атрибуты disabled, value.

  Чтобы приделать надписи к флажкам и элементам выбора, используютэлемент label:текст.

  Чтобы собрать элементы выбора в одну группу, используютатрибут name:

  .

  Как выглядят все эти элементы ввода можно посмотреть в примере

  input.html

• 
  Слайд 19

  Визуальная группировка элементов UI

  Это группа элементов ввода Надпись 1 Надпись 2 Надпись 3

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

• 
  Слайд 20

  Формы

  Введите запрос:  

  Форма – это средство для группировки элементов ввода с цельюпоследующей отправки введенной информации на сервер.

  Отправка информации производится с помощью запроса типа GET или POST с параметрами.

  Атрибут actionзадает URLсервера, на который отправляется запрос.

  Атрибут methodзадает используемую команду – GETили POST.

  В приведенном примере осуществляется запрос GET к поисковой машинеGoogle с параметром q и значением введенного запроса.

• 
  Слайд 21

  Более сложный пример формы

  Введите анкетные данные Ваше имя: Запрашиваемая должность: ПрограммистWeb-дизайнерКрутой спец Квалификация: Новичок Профи Эксперт Хочу получать от

  Важный атрибут каждого поля ввода – name. Он задает имя аргументапри запросе к серверу. Пример формы:

  complex-form.html

• 
  Слайд 22

  Методы GET и POST

  Метод GET отправляет все значения в строке запроса с помощьюкодирования типа

  вся строка видна в окне браузера;

  ее можно запомнить в «закладках»;

  легко вернуться назад на эту же страницу;

  число и размер параметров ограничены длиной URL.

  Метод POST отправляет все значения в заголовке запроса с помощьюзадания пар name=value

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

  URL запроса бесполезно запоминать: параметров в нем нет;

  при возврате назад на эту же страницу чаще всего возникает ошибка POSTDATA;

  практически нет ограничений на число и длину параметров.

• 
  Слайд 23

  Специальные кнопки Submitи Reset

  Запрос отправляется с помощью специального элемента ввода, имеющеговид кнопки:

  Надпись на кнопке можно специфицировать с помощью атрибута value:

  Если надпись не специфицирована, то используется системное значение,зависящее от локализации системы ("Submit" для английского языка,"Отправить запрос" для русского).

  Кнопка Reset используется для восстановления начальных значений элементов ввода в форме:

  Имитировать действие этих кнопок можно и программным путем.

  var form = ... // DOM-узел для формы

  form.submit(); ... form.reset();

• 
  Слайд 24

  Использование CSS для элементов ввода

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

  input {

  color: blue;

  font-style: italic;

  font-size: large;

  }

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

  input[type="text"] {

  color: blue;

  font-style: italic;

  font-size: large;

  }

• 
  Слайд 25

  Проверка корректности вводимых данных

  Корректность введенных данных можно осуществлять

  перед отсылкой запроса (на клиенте с помощью Javascript);

  при обработке запроса на сервере (php, сервлеты).

  Вот как может выглядеть схема программы на Javascript для проверкикорректности введенных данных.

  function onLoad() {

  var submit = document.getElementById('mySubmitButton'); submit.addEventListener('click', onSubmit, false);

  }

  function onSubmit(event) {

  if (!checkInputValues()) {

  event.preventDefault();

  showErrors();

  }

  }

  В IE вместо event.preventDefault()используется return false;