Выразительный JavaScript

Файловое поле

Файловое поле изначально было предназначено для закачивания файлов с компьютера через форму. В современных браузерах они также позволяют читать файлы из JavaScript. Поле работает как охранник для файлов. Скрипт не может просто взять и открыть файл с компьютера пользователя, но если тот выбрал файл в этом поле, браузер разрешает скрипту начать чтение файла.

Файловое поле обычно выглядит как кнопка с надписью вроде «Выберите файл», с информацией про выбранный файл рядом с ней.

Свойство

files

file

multiple

У объектов в свойстве

files

text/plain

image/jpeg

Чего у него нет, так это свойства, содержащего содержимое файла. Чтобы получить содержимое, приходиться постараться. Так как чтение файла с диска занимает длительное время, интерфейс должен быть асинхронным, чтобы документ не замирал. Конструктор

FileReader

XMLHttpRequest

Чтение файла происходит при помощи создания объекта

FileReader

“load”

readAsText

result

Пример использует

Array.prototype.forEach

file

reader

У

FileReaders

“error”

error

error

function readFile(file) {

 return new Promise(function(succeed, fail) {

  var reader = new FileReader();

  reader.addEventListener("load", function() {

   succeed(reader.result);

  });

  reader.addEventListener("error", function() {

   fail(reader.error);

  });

  reader.readAsText(file);

 });

}

Возможно читать только часть файла, вызывая

slice

blob

reader

Хранение данных на стороне клиента

Простые HTML-странички с добавкой JavaScript могут выступать отличной основой для мини-приложений – небольших вспомогательных программ, автоматизирующих ежедневные дела. Присоединив к полям формы обработчики событий вы можете делать всё – от конвертации фаренгейтов в цельсии до генерации паролей из основного пароля и имени веб-сайта.

Когда такому приложению нужно сохранять информацию между сессиями, переменные JavaScript использовать не получится – их значения выбрасываются каждый раз при закрытии страницы. Можно было бы настроить сервер, подсоединить его к интернету и тогда приложение хранило бы ваши данные там. Это мы разберём в главе 20. Но это добавляет вам работы и сложности. Иногда достаточно хранить данные в своём браузере. Но как?

Можно хранить строковые данные так, что они переживут перезагрузку страниц — для этого надо положить их в объект

localStorage

localStorage.setItem("username", "marijn");

console.log(localStorage.getItem("username"));

// → marijn

localStorage.removeItem("username");

Переменная в

localStorage

removeItem

У сайтов с разных доменов – разные отделения в этом хранилище. То есть, данные, сохранённые с вебсайта в

localStorage

Также браузеры ограничивают объём хранимых данных, обычно в несколько мегабайт. Это ограничение, вкупе с тем фактом, что забивание жёстких дисков у людей не приносит прибыли, предотвращает отъедание места на диске.

Следующий код реализует простую программу для ведения заметок. Она хранит заметки в виде объекта, ассоциируя заголовки с содержимым. Он кодируется в JSON и хранится в

localStorage

 и поменять её текст в 
</code></pre>. Добавляется запись по нажатию на кнопку.</p>
    <p><pre><code>Заметки: <select id="list"></select></code></pre></p>
    <p><pre><code><button onclick="addNote()">новая</button><br></code></pre></p>
    <p><pre><code><textarea id="currentnote" style="width: 100%; height: 10em"></code></pre></p>
    <p><pre><code>

    

    

    
Скрипт инициализирует переменную 
notes
 значением из 
localStorage
, а если его там нет – простым объектом с одной записью «что купить». Попытка прочесть отсутствующее поле из 
localStorage
 вернёт 
null
. Передав 
null
 в 
JSON.parse
, мы получим 
null
 обратно. Поэтому для значения по умолчанию можно использовать оператор 
||
.

    
Когда данные в 
note
 меняются (добавляется новая запись или меняется текущая), для обновления хранимого поля вызывается функция 
saveToStorage
. Если б мы рассчитывали, что у нас будут храниться тысячи записей, это было бы слишком накладно, и нам пришлось бы придумать более сложную процедуру для хранения – например, своё поле для каждой записи.

    
Когда пользователь добавляет запись, код должен обновить текстовое поле, хотя у поля и есть обработчик 
“change”
. Это нужно потому, что событие 
“change”
 происходит, только когда пользователь меняет значение поля, а не когда это делает скрипт.

    
Есть ещё один похожий на 
localStorage
 объект под названием 
sessionStorage
. Разница между ними в том, что содержимое 
sessionStorage
 забывается по окончанию сессии, что для большинства браузеров означает момент закрытия.

   
   

    

     Итог
    
    
HTML предоставляет множество различных типов полей формы – текстовые, галочки, множественного выбора, выбора файла.
    
Из JavaScript можно получать значение и манипулировать этими полями. По изменению они запускают событие 
“change”
, по вводу с клавиатуры – 
“input”
, и ещё много разных клавиатурных событий. Они помогают нам отловить момент, когда пользователь взаимодействует с полем ввода. Свойства вроде 
value
 (для текстовых полей и 
select
) или 
checked
 (для галочек и радиокнопок) используются для чтения и записи содержимого полей.

    
При передаче формы происходит событие 
“submit”
. Обработчик JavaScript затем может вызвать 
preventDefault
 этого события, чтобы остановить передачу данных. Элементы формы не обязаны быть заключены в теги 
.

    
Когда пользователь выбрал файл с жёсткого диска через поле выбора файла, интерфейс 
FileReader
 позволит нам добраться до содержимого файла из программы JavaScript.

    
Объекты 
localStorage
 и 
sessionStorage
 можно использовать для хранения информации таким способом, который переживёт перезагрузку страницы. Первый сохраняет данные навсегда (ну или пока пользователь специально не сотрёт их), а второй – до закрытия браузера.

   
   

    

     Упражнения
    
    

     

      Верстак JavaScript
     
     
Сделайте интерфейс, позволяющий писать и исполнять кусочки кода JavaScript.
     
Сделайте кнопку рядом с 
</code></pre>, по нажатию которой конструктор <pre><code>Function</code></pre> из главы 10 будет обёртывать введённый текст в функцию и вызывать его. Преобразуйте значение, возвращаемое функцией, или любую её ошибку, в строку, и выведите её после текстового поля.</p>
     <p><pre><code><textarea id="code">return "hi";

     
Поехали

     

     

     

    
    

     

      Автодополнение
     
     
Дополните текстовое поле так, что при вводе текста под ним появлялся бы список вариантов. У вас есть массив возможных вариантов, и показывать нужно те из них, которые начинаются с вводимого текста. Когда пользователь щёлкает по предложенному варианту, он меняет содержимое поля на него.