Файл: Не нужен.pdf

172
М
е то ды и свойства об ъекта document z
4
Добавьте операторы для подтверждения вы- бора и отправьте их на веб-сервер или отме- ните отправку.
ok
= confi rm( '
Submit These Choices?\n
' + summary
)
if( !
ok
) { event
.preventDefault( ) }
z
5
Сохраните HTML-документ на веб-серве- ре, затем откройте его в браузере. Cделайте свой выбор и подтвердите отправку.
Добавление элементов
выбора
Параметры, представленные в объекте раскрываю- щегося HTML-списка

, определены массивом options[]
, в котором каждый элемент содержит пара- метр, указанный тегом HTML

. После от- правки на веб-сервер значение, присвоенное атри- буту name тега

, и значение, присвоенное атрибуту value тега

, отправляются как пара name=value
< / >
Этот пример запу- скается на локаль- ном веб-сервере, который поддер- живает сервер- ный скрипт PERL.
Он обрабатыва- ет отправку формы и предоставляет ответ веб-брау- зеру.
JS
echo.pl

173
Важно отметить, что объект списка выбора имеет свой ство selectedIndex
, содержащее номер индекса вы- бранного элемента массива options[]
. Этот номер так- же можно использовать для получения значения вы- бранного параметра.
При изменении пользователем выбранного параме- тра запускается событие «change». Свой ство объек- та списка onchange привязывает обработчик событий, который выполняется при изменении выбранного параметра. Как вариант, имя события и имя функ- ции обработчика событий можно указать в качестве аргументов метода addEventListener( )
z
1
Создайте HTML-документ, содержащий спи- сок выбора, кнопку отправки и пустой абзац.

Rome


London


New York

info
">
z
2
Создайте самовызывающуюся функцию, при- вяжите обработчик событий для отправки формы и загрузки окна.
(function ( ) {
const list
= document.getElementById( '
list
' )
list
.addEventListener( '
change
', function ( ) { reactTo
(
list
,
event
) } )
addEventListener( '
load
', function ( ) {
reactTo
( list
,
event
) } )
} ) ( )
z
3
Добавьте обработчик событий, который будет отображать выбранное событие и текущий список в абзаце.
function reactTo
(
list
,
event
) {
const info
= document.getElementById( '
info
' )
ioptions.html
Обратите внима- ние, что атрибут
HTML selected осу- ществляет выбор первого элемента option
, доступ к ко- торому определен как options[ 0 ]

174
М
е то ды и свойства об ъекта document let index
= list
.options.selectedIndex let city
= list
.options[
index
].value info
.innerHTML =
event
.type + '
Selected:
'
info
.innerHTML +=
city
+ '
Index:
' +
index
}
z
4
Сохраните HTML-документ на веб-сервере и откройте его в браузере. Затем выберите вариант и отправьте форму.
Сброс формы
Обработчик событий может быть привязан к свой- ствам onfocus и onfocusout
. Событие «focus» запуска- ется, когда пользователь выбирает текстовое поле, а событие «focusout» активируется при покидании этого текстового поля.
Обработчик событий может быть привязан к свой- ству onreset
. Событие onreset происходит при сбросе формы.
Доступ к выбран- ной опции осу- ществляется сле- дующим образом: document.forms[ 0 ].
elements[ 0 ].options[ 1 ].
value.
JS
echo.pl

175
Как и в случае с другими объектами, имя события и имя функции обработчика событий указывается в качестве аргументов для текстового поля и метода объекта фор- мы addEventListener( )
z
1
Создайте HTML-документ, содержащий форму с текстовым полем, кнопкой сброса и пустым абзацем.

info
">
z
2
Создайте самовызывающуюся функцию, при- вяжите обработчик для событий текстово- го поля «focus» и «focusout», события формы
«reset» и события окна «load».
(function ( ) {
const form
= document.getElementById( '
code
' )
const lang
= document.getElementById( '
lang
' )
const info
= document.getElementById( '
info
' )
lang
.addEventListener( '
focus
',
function (
event
) { reactTo
( event
,
info
) } )
lang
.addEventListener( '
focusout
',
function (
event
) { reactTo
( event
,
info
) } )
form
.addEventListener( '
reset
',
function ( ) {
defaultMessage
(
info
) } )
addEventListener( '
load
',
function ( ) {
defaultMessage
(
info
) } )
} ) ( )
z
3
Чтобы отобразить тип события, привяжи- те обработчик для событий текстового поля
«focus» и «focusout».
function reactTo
( event
,
info
) {
info.
innerHTML =
event
.type
}
reset..html
Текстовые поля также имеют свой- ство onselect, ко- торому может быть привязан об- работчик событий для ответа на со- бытие «select», срабатывающее, когда пользователь выбирает фраг- мент текста.

176
М
е то ды и свойства об ъекта document z
4
Для вывода сообщения привяжите событи- ям загрузки окна и сброса формы следующий обработчик событий.
function defaultMessage
(
info
) {
info
.innerHTML =
'
Please enter your favorite coding language
'
}
z
5
Сохраните HTML-документ, затем открой- те его в браузере. Проанализируйте резуль- тат — полученное сообщение.
z
6
Выберите текстовое поле и проанализируй- те, как сработает событие «focus». Затем вве- дите название вашего любимого языка про- граммирования.
z
7
Нажмите клавишу Tab, чтобы переместить фокус на кнопку Reset (Сброс). Проанализи- руйте, как сработает событие «focusout».

177
z
8
Нажмите клавишу Enter (нажмется кноп- ка Reset (Сброс)), чтобы очистить текстовое поле и снова увидеть полученное сообщение.
Проверка и отправка
формы
При отправке формы срабатывает событие onsubmit
В качестве альтернативы имя события «submit» и имя функции обработчика событий указываются как аргументы метода addEventListener( )
объекта формы.
Самый простой уровень проверки формы заключа- ется в проверке наличия текста в поле ввода, чтобы убедиться в том, что пользователь действительно его ввел. Если значение равно пустой строке, то есть за- пись не производилась, функция проверки вызовет метод event.preventDefault( )
, чтобы предотвратить от- правку формы.
Более высокий уровень проверки формы заключа- ется в проверке введенной пользователем строки, чтобы убедиться в том, что она соответствует требо- ваниям. Например, при необходимости ввода адре- са электронной почты строка должна содержать сим- вол
“@"
и как минимум один символ
“."
. Если хотя бы один из них отсутствует, строка не будет соответ- ствовать допустимому формату адреса электронной почты, поэтому функция проверки предотвратит от- правку формы.
Доступ к элементу формы осуществляется с помо- щью указания значения атрибута name в скобках мас- сива elements[]

178
М
е то ды и свойства об ъекта document z
1
Создайте HTML-документ, содержащий форму с двумя текстовыми полями и кноп- кой отправки.

<fi eldset>

Please Enter Your Details

Name:

Email:

fi eldset>

z
2
Создайте самовызывающуюся функцию. Для события отправки формы определите следу- ющий обработчик событий.
( function ( ) {
const form
= document.getElementById( '
contact
' )
form
.addEventListener( '
submit
' ,
function ( event
) {
validate
(
form
,
event
) } )
} ) ( )
z
3
Для проверки введенного текста добавьте об- работчик событий.
function validate
(
form
,
event
) {
let value
=
form
.elements[ '
Name
' ].value if(
value
=== '' ) {
alert( '
Please Enter Your Name
' )
event
.preventDefault( ) ; return }
value
=
form.
elements[ '
Email
' ].value if( (
value
=== '' ) || ( value.indexOf( '
@
' ) ===
-1
) ||
( value
.indexOf('
') ===
-1
) ) {
alert( '
Please Enter A Valid Email Address
' )
event
.preventDefault( ) }
}
z
4
Сохраните HTML-документ на веб-сервере, затем откройте его в браузере. Введите свои данные и отправьте форму.
validate.html
Метод indexOf( )
воз- вращает индекс первого вхожде- ния указанного значения в стро- ковый объект или значение –1, если символ не най- ден. Более под- робную информа- цию можно найти на стр. 119.

179
Заключение

z
Объект document содержит следующие свой- ства, описывающие документ: title
,
URL
, domain
, lastModifi ed и referrer

z
Объект document содержит дочерние объек- ты forms
, images
, links
, styleSheets и scripts
. Каждый из них представляет собой массив компонентов документа.
JS
echo.pl

180
М
е то ды и свойства об ъекта document

z
Массив forms
— это коллекция HTML со спи- ском всех элементов

, содержащихся в те- кущем документе.

z
Методы getElementById( )
, getElementsByTagName( )
и getElementsByClassName( )
позволяют ссылаться на компоненты HTML-документа.

z
Свой ства innerHTML
и innerText используются для записи содержимого в существующие элементы.

z
Методы createElement( )
, appendChild( )
и setAttribute( )
позволяют добавлять содержимое в документ.

z
Свой ство cookie содержит пары «key=value»
(атрибут=значение), которые могут хранить не- большой объем данных в системе пользователя.

z
Функции encodeURI( )
, decodeURI( )
, toUTCString( )
и split( )
используются для обработки строк с дан- ными cookie.

z
DOM позволяет JavaScript реагировать на такие события, как load
, click
, keydown
, change и submit

z
Функции обработчика событий могут быть при- вязаны к свой ству объекта или определены мето- дом addEventListener( )

z
Объект event передается в обработчик событий, а событие идентифицируется по его свой ству event.type

z
Событие «mousemove» передает объект события в функцию- обработчик со свой ствами x
и y
, опре- деляющими текущие координаты указателя мыши.

z
Переключатели и флажки имеют свой ство checked
, которое принимает значение true
, если переключатель или флажок выбран.

z
Объект списка выбора имеет свой ство selectedIndex
, содержащее номер индекса выбран- ного элемента массива options[]

z
При нажатии кнопки генерируется действие по умолчанию для формы, которое заключается в отправке данных формы на веб-сервер. Вызов метода preventDefault( )
останавливает их отправку.

В этой главе вы узнаете, как
создавать веб-приложение,
которое извлекает данные
из онлайн- ресурса.
Введение в JSON
Промисы
Получение данных
Разработка интерфейса
Заполнение ячеек в таблице
Заполненная таблица
Обновление приложений
Заключение
180 182 185 187 190 192 194 197
Разработка веб-приложений
8

182
Р
азрабо тк а веб-прило ж
ений
Введение в JSON
JSON (Нотация объектов JavaScript) — это популяр- ный текстовый формат для хранения и транспорти- ровки данных. Это подмножество JavaScript. Данные
JSON записываются в виде пар key: value (атри- бут: значение), разделенных запятыми. Все атрибу- ты должны иметь тип данных String и заключены в двой ные кавычки. Связанные с этими атрибута- ми значения должны принадлежать только к одному из следующих типов данных:

z
String (строка) — строки в JSON должны быть заключены в двой ные кавычки.

z
Number (число) — целое число или число с плавающей запятой.
z
Object (объект) — объект JSON.
z
Array (массив) — массив.
z
Boolean (логическое значение) — true (истина) или false (ложь).
z
null — значение null.
Пары key: value (атрибут: значение) должны быть за- ключены в фигурные скобки, например:
{“name":"Alice","age":21,"city":"New York"}
Также можно легко преобразовать объект JavaScript в объект JSON, указав его в качестве аргумента ме- тода
JSON.stringify( )
. И наоборот, можно преобразовать объект JSON в объект JavaScript, указав его в каче- стве аргумента метода
JSON.parse( )
Обычно объекты JSON хранят данные как онлайн- ресурс в текстовом файле с расширением файла.
json
Следовательно, с веб-сервера сценарий веб-страни- цы получает данные в формате JSON.
Бесплатный вали- датор объектов
JSON вы може- те найти на сайте jsonlint.com.

183
Метод
JSON.parse( )
используется для преобразования объекта JSON в объект JavaScript. Доступ к данным осуществляется с использованием точечной нотации или с помощью скобок.
Как JSON, так и XML (расширяемый язык раз- метки) можно использовать для получения данных с веб-сервера. Однако предпочтительнее обратиться к JSON, поскольку вам необходимо перебирать эле- менты для извлечения данных из формата XML, тог- да как метод
JSON.parse( )
просто возвращает строку всех данных.
Важной особенностью считается, что JavaScript извле- кает данные из онлайн- ресурсов JSON для использо- вания в веб-приложениях.
z
1
Создайте самовызывающуюся функцию, ко- торая создает объект JavaScript, содержащий строку и массив.
let obj
= { category
: '
Fashion
', models
: [ { name
: '
Alice
', age
:
21
, city
: '
New York
' } ,
{ name
: '
Kelly
', age
:
23
, city
: '
Las Vegas
' } ] }
z
2
Создайте объект JSON и распечатайте его.
let json_obj
= JSON.stringify( obj
)
console.log( json_obj
)
z
3
Для сравнения создайте объект JavaScript и распечатайте его.
let new_obj
= JSON.parse( json_obj
)
console.log( new_obj
)
z
4
Наконец, распечатайте выбранные значения, используя точечную нотацию и квадратные скобки.
console.log( new_obj
[ '
category
' ] )
console.log( new_obj models
[
0
].
name
)
console.log( new_obj
[ '
models
' ][
1
][ '
name
' ] )
json.html

184
Р
азрабо тк а веб-прило ж
ений z
5
Сохраните HTML-документ, затем откройте его в веб-браузере. Запустите консоль, что- бы проанализировать сравниваемые объекты.
Для этого выберите пункт Developer Tools
(Инструменты разработчика) => Console
(Консоль).