Выбрать главу

URL eloquentjavascript.net/author настроен на ответ как прямым текстом, так и HTML или JSON, в зависимости от запроса клиента. Эти форматы определяются стандартизированными типами содержимого text/plain, text/html, и application/json.

Отправьте запрос для получения всех трёх форматов этого ресурса. Используйте метод setRequestHeader объекта XMLHttpRequest для установки заголовка Accept в один из нужных типов содержимого. Убедитесь, что вы устанавливаете заголовок после open, но перед send.

Наконец, попробуйте запросить содержимое типа application/rainbows+unicorns и посмотрите, что произойдёт.

Ожидание нескольких обещаний

У конструктора Promise есть метод all, который, получая массив обещаний, возвращает обещание, которое ждёт завершения всех указанных в массиве обещаний. Затем он выдаёт успешный результат и возвращает массив с результатами. Если какие-то из обещаний в массиве завершились неудачно, общее обещание также возвращает неудачу (со значением неудавшегося обещания из массива).

Попробуйте сделать что-либо подобное, написав функцию all.

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

function all(promises) {

  return new Promise(function(success, fail) {

    // Ваш код.

  });

}

// Проверочный код.

all([]).then(function(array) {

  console.log("Это должен быть []:", array);

});

function soon(val) {

  return new Promise(function(success) {

    setTimeout(function() { success(val); },

               Math.random() * 500);

  });

}

all([soon(1), soon(2), soon(3)]).then(function(array) {

  console.log("Это должен быть [1, 2, 3]:", array);

});

function fail() {

  return new Promise(function(success, fail) {

    fail(new Error("бабах"));

  });

}

all([soon(1), fail(), soon(3)]).then(function(array) {

  console.log("Сюда мы попасть не должны ");

}, function(error) {

  if (error.message != "бабах")

    console.log("Неожиданный облом:", error);

});

18. Формы и поля форм

Я нынче ж на ученом кутеже Твое доверье службой завоюю, Ты ж мне черкни расписку долговую, Чтоб мне не сомневаться в платеже.
Мефистофель, в «Фаусте» Гёте

Формы были кратко представлены в предыдущей главе в качестве способа передачи информации, введённой пользователем, через HTTP. Они были разработаны в вебе до появления JavaScript, с тем расчётом, что взаимодействие с сервером происходит при переходе на другую страницу.

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

Поля

Веб-форма состоит из любого числа полей ввода, окружённых тегом <form>. HTML предлагает много разных полей, от простых галочек со значениями вкл/выкл до выпадающих списков и полей для ввода текста. В этой книге не будут подробно обсуждаться все виды полей, но мы сделаем небольшой их обзор.

Много типов полей ввода используют тег <input>. Его атрибут type используется для выбора стиля поля. Вот несколько распространённых типов:

text текстовое поле на одну строку

password то же, что текст, но прячет ввод

checkbox переключатель вкл./выкл.

radio часть поля с возможностью выбора из нескольких вариантов

file позволяет пользователю выбрать файл на его компьютере

Поля форм не обязательно должны появляться внутри тега <form>. Их можно разместить в любом месте страницы. Информацию из таких полей нельзя передавать на сервер (это возможно только для всей формы целиком), но когда мы делаем поля, которые обрабатывает JavaScript, нам обычно и не нужно передавать информацию из полей через submit.

<p><input type="text" value="abc"> (text)</p>