Элементы ввода, формы, валидация данных sp. courses.

Скачать презентацию Элементы ввода, формы,  валидация данных sp. courses. Скачать презентацию Элементы ввода, формы, валидация данных sp. courses.

15-sort_forms.pptx

  • Размер: 1.9 Мб
  • Автор:
  • Количество слайдов: 46

Описание презентации Элементы ввода, формы, валидация данных sp. courses. по слайдам

Элементы ввода, формы,  валидация данных sp. courses. dp. ua Элементы ввода, формы, валидация данных sp. courses. dp. ua

Подробнее о DOM Подробнее о DOM

3 DOM – Document Object Model (объектная модель документа) Стандарт который определяет из каких3 DOM – Document Object Model (объектная модель документа) Стандарт который определяет из каких объектов браузер собирает дерево документа, и какие свойства есть у этих объектов у этих. https: //learn. javascript. ru/document

4 Свойства. children и. node. Child массивы с потомками тега. child. Nodes. children 4 Свойства. children и. node. Child массивы с потомками тега. child. Nodes. children

Немного практики Немного практики

6 Скопируйте код:  http: // courses. dp. ua/files/js/task 1. html. Немного практики По6 Скопируйте код: http: // courses. dp. ua/files/js/task 1. html. Немного практики По нажатию на кнопку необходимо отсортировать список по возрастанию цены.

7 Немного практики По нажатию на кнопку необходимо отсортировать список по возрастанию цены. 7 Немного практики По нажатию на кнопку необходимо отсортировать список по возрастанию цены.

Данные необходимо не только выдавать но и получать Данные необходимо не только выдавать но и получать

9 Формы & элементы ввода Скачайте заготовку в Notepad++ http: // files. courses. dp.9 Формы & элементы ввода Скачайте заготовку в Notepad++ http: // files. courses. dp. ua/web/15/ex 01. html

10 Элементы ввода, формы Получение данных от пользователя. form … /form 10 Элементы ввода, формы Получение данных от пользователя.

11 Элементы ввода, формы Получение данных от пользователя. form … /form form action =“…”11 Элементы ввода, формы Получение данных от пользователя.

Атрибут action позволяет указать какой странице будут переданы данные для обработки (какой странице на сервере).

GET POST Параметры передаются в открытом виде, в строке URL. Параметры передаются неявно, GET POST Параметры передаются в открытом виде, в строке URL. Параметры передаются неявно, в теле HTTP запроса. Длинна строки параметров ограничена (255 байт, ограничение связано с совместимостью). Объём передаваемых параметров неограничен (зависит от настроек сервера). Является методом по умолчанию. 12

Элементы ввода input …  type = “text” 13 Для размещение элементов ввода наЭлементы ввода type = “text” 13 Для размещение элементов ввода на форме применяется тег input с различными значениями атрибута type.

input …  label 14 Тег label применяется для оформления подписей к элементам ввода,

input type =“…” 15 Изначальный набор элементов ввода 15 Изначальный набор элементов ввода

input placeholder =“…” 16 Атрибут  placeholder позволяет задать замещающий текст, который даст подсказку 16 Атрибут placeholder позволяет задать замещающий текст, который даст подсказку о назначении поля ввода.

input type =“…” HTML 5 принёс новые типы элементов ввода 17 HTML 5 принёс новые типы элементов ввода

18 Однако…. Поддержка «новых» элементов ввода в браузерах оставляет желать лучшего. 18 Однако…. Поддержка «новых» элементов ввода в браузерах оставляет желать лучшего.

 Примеры HTML 5… http: //www. w 3 schools. com/html_form_input_types. asp Примеры HTML 5… http: //www. w 3 schools. com/html_form_input_types. asp

Параметры в URL Параметры в URL

21 Передача параметров файлу, через URL – спецсимвол,  говорящий,  что в этом21 Передача параметров файлу, через URL – спецсимвол, говорящий, что в этом месте заканчивается адрес файла, и начинается перечень параметров. – спецсимвол разделяющий имя параметра и его значение. – спецсимвол разделяющий пары (имя параметра и его значение) друг от друга. ? = & Параметры в URL-адресе Параметры передаваемые из формы добавляются в URL адрес, эти параметры есть возможность обработать на стороне сервера

22 Параметры в URL-адресе Страница одна – параметры разные, как результат и содержимое разное.22 Параметры в URL-адресе Страница одна – параметры разные, как результат и содержимое разное. https: //www. youtube. com/watch? v=IMh. Jgaq. Pepo https: //www. youtube. com/watch? v=4 B 6_y 1 s-Hco

Оформление элементов ввода (Bootstrap) Оформление элементов ввода (Bootstrap)

24 Оформление элементов ввода Элементы форм можно оформлять при помощи CSS 24 Оформление элементов ввода Элементы форм можно оформлять при помощи CSS

25 Оформление элементов ввода Элементы форм можно оформлять при помощи CSS 25 Оформление элементов ввода Элементы форм можно оформлять при помощи CSS

26 Оформление элементов ввода / Bootstrap содержит в себе стили для оформления элементов ввода26 Оформление элементов ввода / Bootstrap содержит в себе стили для оформления элементов ввода (пример на основе стартового шаблона bootstrap)

27 Оформление элементов ввода / Bootstrap содержит в себе стили классы для обозначения неверно27 Оформление элементов ввода / Bootstrap содержит в себе стили классы для обозначения неверно заполненных полей.

Валидация данных Валидация данных

29 Валидация данных (проверка на корректность) Скачайте заготовку в Notepad++ http: // files. courses.29 Валидация данных (проверка на корректность) Скачайте заготовку в Notepad++ http: // files. courses. dp. ua/web/15/ex 01. html

30 Валидация данных (проверка на корректность) Валидация данных сводиться к проверке соответствуют ли введённые30 Валидация данных (проверка на корректность) Валидация данных сводиться к проверке соответствуют ли введённые данные шаблону или нет. Что считать корректным, а что нет – полностью определяет разработчик.

Валидация данных средствами HTML Валидация данных средствами HTML

32 Валидация (проверка на корректность) данных Встроенные средства валидации данных появились вместе с новыми32 Валидация (проверка на корректность) данных Встроенные средства валидации данных появились вместе с новыми элементами в HTML 5, но….

33 Валидация данных средствами HTML Атрибут required говорит о том, что поле должно быть33 Валидация данных средствами HTML Атрибут required говорит о том, что поле должно быть заполнено, хоть чем-то. Атрибут pattern задаёт регулярное выражение которым будет проверены введённые данные. Атрибут title , помимо основного предназначения, будет выступать подсказкой при ошибке валидации поля.

34 У форм есть событие onsubmit Которое случается после нажатия кнопки отправки данных, 34 У форм есть событие onsubmit Которое случается после нажатия кнопки отправки данных, но до самой отправки, обработав его, можно проверить данные и при необходимости отменить отправку.

35 Регулярные выражения Регулярное выражение – шаблон которым проверяется строка,  строка может соответствовать35 Регулярные выражения Регулярное выражение – шаблон которым проверяется строка, строка может соответствовать шаблону, а может не соответствовать.

Валидация данных средствами Java. Script Валидация данных средствами Java. Script

37 Алгоритм валидации: 1. Подписываемся на событие отправки формы ( onsubmit ); 2. В37 Алгоритм валидации: 1. Подписываемся на событие отправки формы ( onsubmit ); 2. В обработчике событие проверяем данные на соответствие; 3. Если данные не корректны сообщаем об это пользователю и отменяет отправку данных ; 4. Если данные корректны, не мешаем браузеру отправлять данные.

38 У каждого элемента input есть свойство value С помощью которого можно получить (или38 У каждого элемента input есть свойство value С помощью которого можно получить (или установить), содержимое элемента ввода. Отправку формы можно отменить Для этого достаточно вызвать метод . prevent. Default() которая есть у объекта содержащего информацию о событии (который передаётся первым параметром в функции обработчике события) или просто вернуть false из функции обработчика события.

39 Валидация данных 39 Валидация данных

Элементы ввода и интерактивность Элементы ввода и интерактивность

41 Элементы ввода и интерактивность Скачайте заготовку в Notepad++ http: // files. courses. dp.41 Элементы ввода и интерактивность Скачайте заготовку в Notepad++ http: // files. courses. dp. ua/web/15/ex 02. html

42 Элементы ввода и интерактивность У элементов ввода есть события отвечающие за изменения данных42 Элементы ввода и интерактивность У элементов ввода есть события отвечающие за изменения данных в них (например когда пользователь перемещает ползунок, или вводит посимвольно фразу). Одно их них oninput, подписавшись на которое мы можем в динамике отслеживать

43 Элементы ввода и интерактивность Скрипт отслеживает изменение  «ползунка»  и пропорционально изменяет43 Элементы ввода и интерактивность Скрипт отслеживает изменение «ползунка» и пропорционально изменяет размет шрифта для текста.

Домашнее задание Домашнее задание

45 По нажатию на кнопку необходимо отсортировать список по возрастанию цены.  При повторном45 По нажатию на кнопку необходимо отсортировать список по возрастанию цены. При повторном нажатии сортировка должна выполниться по убыванию цены. И так по очереди переключать направление сортировки. Скопируйте код: http: // courses. dp. ua/files/js/task 1. html. Немного практики

46 Где брать задачки для тренировки? Чтобы научиться программировать – нужно тренироваться… Чтобы тренироваться46 Где брать задачки для тренировки? Чтобы научиться программировать – нужно тренироваться… Чтобы тренироваться нужны задачи… Чтобы были задачи нужно уметь программировать… Д. М. Златопольский Сборник задач по программированию