Какие типы файлов можно создавать в браузере

Обновлено: 07.07.2024

Веб-сайт состоит из множества файлов: текстового контента, кода, стилей, медиа-контента, и так далее. Когда вы создаёте веб-сайт, вы должны собрать эти файлы в рациональную структуру на вашем локальном компьютере, убедитесь, что они могут общаться друг с другом, и весь ваш контент выглядит правильно, прежде чем вы, в конечном итоге загрузите их на сервер. В статье Работа с файлами обсуждаются некоторые вопросы, о которых вам следует знать, чтобы вы могли рационально настроить файловую структуру для своего веб-сайта.

Где ваш веб-сайт должен располагаться на вашем компьютере?

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

Выберите место для хранения проектов веб-сайта. Здесь, создайте новую папку с именем web-projects (или аналогичной). Это то место, где будут располагаться все ваши проекты сайтов.
Внутри этой первой папки, создайте другую папку для хранения вашего первого веб-сайта. Назовите её test-site (или как-то более творчески).

Небольшое отступление о регистре и пробелах

Вы заметите, что в этой статье, мы просим вас называть папки и файлы полностью в нижнем регистре без пробелов. Это потому что:

Многие компьютеры, в частности веб-серверы, чувствительны к регистру. Так, например, если вы положили изображение на свой веб-сайт в test-site/MyImage.jpg , а затем в другом файле вы пытаетесь вызвать изображение как test-site/myimage.jpg , это может не сработать.
Браузеры, веб-серверы и языки программирования не обрабатывают пробелы последовательно. Например, если вы используете пробелы в имени файла, некоторые системы могут отнестись к имени файла как к двум именам файлов. Некоторые серверы заменяют пробелы в вашем имени файла на "%20" (символьный код для пробелов в URI), в результате чего все ваши ссылки будут сломаны. Лучше разделять слова дефисами, чем нижними подчёркиваниями: my-file.html лучше чем my_file.html .

Говоря простым языком, вы должны использовать дефис для имён файлов. Поисковая система Google рассматривает дефис как разделитель слов, но не относится к подчёркиванию таким образом. По этим причинам, лучше всего приобрести привычку писать названия ваших папок и файлов в нижнем регистре без пробелов, разделяя слова дефисами, по крайней мере, пока вы не поймёте, что вы делаете. Так в будущем вы столкнётесь с меньшим количеством проблем.

Какую структуру должен иметь ваш веб-сайт?

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

index.html : Этот файл обычно содержит контент домашней страницы, то есть текст и изображения, которые люди видят, когда они впервые попадают на ваш сайт. Используя ваш текстовый редактор, создайте новый файл с именем index.html и сохраните его прямо внутри вашей папки test-site .
Папка images : Эта папка будет содержать все изображения, которые вы используете на вашем сайте. Создайте папку с именем images внутри вашей папки test-site .
Папка styles : Эта папка будет содержать CSS код, используемый для стилизации вашего контента (например, настройка текста и цвета фона). Создайте папку с именем styles внутри вашей папки test-site .
Папка scripts : Эта папка будет содержать весь JavaScript-код, используемый для добавления интерактивных функций на вашем сайте (например, кнопки которые загружают данные при клике). Создайте папку с именем scripts внутри вашей папки test-site .

Файловые пути

Для того, чтобы файлы общались друг с другом, вы должны указать файлам путь друг к другу - обычно один файл знает, где находится другой. Чтобы продемонстрировать это, мы вставим немного HTML в наш файл index.html и научим его отображать изображение, которое вы выбрали в статье "Каким должен быть ваш веб-сайт?"

Скопируйте изображение, которое вы выбрали ранее, в папку images .
Откройте ваш файл index.html и вставьте следующий код в файл именно в таком виде. Не беспокойтесь о том, что все это значит - позже в этом руководстве мы рассмотрим структуры более подробно.

Некоторые общие правила о путях к файлам:

Для ссылки на целевой файл в той же директории, что и вызывающий HTML файл, просто используйте имя файла, например, my-image.jpg .
Для ссылки на файл в поддиректории, напишите имя директории в начале пути, плюс косую черту (forwardslash, слеш), например: subdirectory/my-image.jpg .
Для ссылки на целевой файл в директории выше вызывающего HTML файла, напишите две точки. Например, если index.html находится внутри подпапки test-site , а my-image.jpg - внутри test-site , вы можете обратиться к my-image.jpg из index.html , используя ../my-image.jpg .
Вы можете комбинировать их так, как вам нравится, например ../subdirectory/another-subdirectory/my-image.jpg .

На данный момент это все, что вам нужно знать

Примечание: Файловая система Windows стремится использовать обратный слеш (backslash), а не косую черту (forwardslash), например C:\windows . Это не имеет значения, даже если вы разрабатываете веб-сайт на Windows, вы всё равно должны использовать обычные слеши в вашем коде.

Что должно быть сделано?

К настоящему моменту структура вашей папки должна выглядеть примерно так:

В конце 2020 года мы делали проект со снежинками — писали специальный скрипт, который запускал падающий снег на сайтах. Если бы мы хотели сделать такой снег на любом своём сайте, это не составило бы труда: добавляешь скрипт в код страницы, и готово.

А вот на чужих сайтах была проблема. Скрипт нужно было вставлять через консоль. А если на сайте была настроена политика безопасности, которая запрещает запуск внешних скриптов, то магия не срабатывала.

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

👉 Что такое расширение

Расширение для Chrome — это небольшая программа, которая выполняется внутри браузера и помогает расширить возможности сайтов. Сила расширения в том, что оно может выполняться прямо из меню браузера и не зависит от политик безопасности.

Примеры того, что может сделать расширение:

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

В этой статье

Мы сделаем самое простое расширение для браузера Chrome, которое позволит запускать скрипт со снежинками на любом сайте, независимо от настроенной политики безопасности. Для этого воспользуемся официальным руководством Google по созданию расширений.

Манифест

В каждом расширении для браузера должен быть манифест — документ, в котором написано:

как называется расширение;
к чему расширение может получить доступ;
какие скрипты будут работать в фоне;
как должна выглядеть иконка расширения;
что показать или что выполнить, когда пользователь нажмёт на иконку расширения.

Манифест задаёт общие правила для всего расширения, поэтому манифест — единственный обязательный компонент. Можно обойтись без иконок и скриптов, но манифест обязательно должен быть.Каждый манифест хранится в файле manifest.json — создадим пустой файл с таким именем и напишем внутри такое:

«name»: «Запускаем снежинки на любом сайте»,
«description»: «Проект журнала Код»,
«version»: «1.0»,
«manifest_version»: 3
>

Первые две строчки — это название и подробное описание расширения. Третья отвечает за номер версии расширения, а последняя говорит браузеру, какая версия манифеста используется в описании. На момент выхода статьи в феврале 2021 года используется третья версия.

Сохраняем файл и всё, расширение готово. Оно ничего не умеет, ничего не делает, зато мы уже можем добавить его в браузер. Для этого запускаем Хром и в адресной строке пишем:

Мы попадаем на страницу, которая нам покажет все установленные расширения:

Чтобы добавить своё расширение, в правом верхнем углу включаем режим разработчика, а затем нажимаем «Загрузить распакованное расширение»:

Теперь выбираем папку, в которой лежит наш манифест:

Отлично, мы только что добавили в браузер новое расширение:

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

Чтобы было проще работать и тестировать расширение, закрепим его на панели браузера:

Иконки

У расширения есть две иконки, которыми мы можем управлять:

Картинка в карточке расширения на странице настроек.
Иконка на панели браузера.

Чтобы не рисовать всё с нуля, скачаем папку с иконками из того же руководства Google и положим её в ту же папку, что и манифест:

Теперь добавим иконки в манифест. За картинку в карточке отвечает блок icon, а за иконку на панели — блок action. Разные размеры картинки нужны для того, чтобы на разных мониторах с любой плотностью пикселей иконки выглядели хорошо:

Сохраняем манифест, обновляем расширение на странице настроек и смотрим результат:

Настраиваем разрешения

Разрешения — это то, что браузер позволяет делать расширению со страницами и с их содержимым. Для запуска снежинок нам нужно сделать две вещи:

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

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

"permissions": ["activeTab", "scripting"],

Показываем меню

Если мы сейчас нажмём на иконку расширения на панели браузера, то ничего не призойдёт, потому что мы ничего не запрограммировали. Исправим это — сделаем так, чтобы при нажатии расширение показывало кнопку запуска. Когда расширение будет уметь больше, вместо одной кнопки можно будет показать целое меню.

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

Она означает, что при нажатии на иконку мы увидим рядом с ней мини-страничку, на которой что-то будет.Создадим в той же папке расширения файл popup.html и добавим в него такой код:

Чтобы браузер не ругался, что у нас нет файла popup.js , создадим пустой файл с таким названием и положим его в ту же папку:

Сохраняем манифест, обновляем его на странице настроек и видим, что у нашего расширения появилось меню с кнопкой:

Запускаем снежинки

Вся магия будет происходить в файле popup.js — откроем его и добавим такой код:

Последнее, что нам осталось сделать, — положить в функцию snowFall() полный код скрипта из проекта со снежинками и сохранить файл.

Проверка

В прошлый раз мы не смогли запустить скрипт на любой странице Яндекса — мешала политика безопасности. Теперь всё работает:

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

Операционная система определяет тип файла по его расширению. Расширением называется последняя часть имени файла, которая следует после точки. Точек в названии может быть несколько, поэтому расширением считается часть имени файла, следующая за последней точкой в его названии. Пример: filename.txt

От расширения файла зависит — какой программой будет производиться чтение или редактирование данного файла.

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

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

Заблуждение возникает по той причине, что один файл может называться filename.txt, а второй файл может называться filename.jpg. Для системы, оба этих названия являются разными из-за разных расширений в имени, а пользователь, если расширения не отображаются, видит два одинаковых имени файла в одной папке и думает, что такое вполне возможно.

Рассмотрим типы пользовательских файлов. Условно их можно разделить на четыре основные группы:

1. Текстовый документ

Основным типом пользовательских файлов является текстовый документ. Данное утверждение не требует объемных доказательств, достаточно напомнить о том, что ни один сайт в интернете не обходится без текста. Кроме того, никакая электронная отчетность, ведение бухгалтерии, логистики, заключение договоров — тоже не могут обойтись без набора текстовых символов. Текст в компьютерном мире является, пусть не самым красочным, но самым основным источником информации. Графические изображения, как правило, являются дополнением к основному текстовому файлу, если содержат графики, чертежи, иллюстрации или фотографии.

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

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

В операционной системе Windows, для чтения и создания простых текстовых файлов без форматирования, существует гениальное приложение "Блокнот". Данное приложение позволяет создавать простые текстовые файлы без форматирования. Кроме того, приложение позволяет открывать и редактировать некоторые системные файлы, содержащие техническую текстовую информацию. Также возможно создание или редактирование страниц интернета в формате HTM или HTML .

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

Наиболее известная программа, которая используется для работы с форматированным текстом, разработана компанией Microsoft и называется Word.

Некоторые пользователи полагают, что программа Word является неотъемлемой частью операционной системы Windows .

На самом деле, данное приложение является отдельным продуктом компании и устанавливается дополнительно. Приложение разработано специально для работников офиса, которым постоянно приходится работать с отчетами, сметами, счетами, договорами и другими аналогичными документами.

Текст без иллюстраций, фотографий или иконок выглядит слишком сухо и скучно. Иногда рисунки просто необходимы для наглядности. Все изображения, используемые в цифровой среде, можно разделить на две основных группы: растровая и векторная графика. Разница между этими двумя группами значительна и заключается в принципах построения, сохранения и чтения изображения.

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

Общий принцип растрового изображения заключается в том, что оно состоит из точек — пикселей. Такой принцип продиктован устройством самих мониторов, где также используются трехцветные пиксели. Каждый пиксель монитора состоит из трех ячеек, которым заданы базовые цвета: красный, зеленый и синий.
От яркости свечения каждой цветной ячейки, входящей в состав одного пикселя, зависит его общий суммарный цвет. Одинаковое свечение красного и зеленого порождают желтый цвет, одинаковое свечение зеленого и синего — дают голубой, а все три цвета в сумме дают белый. Разное процентное соотношение трёх базовых цветов — создает всю богатую палитру не только виртуального, но и окружающего мира.

Качество растрового изображения зависит от количества пикселей. Чем больше пикселей, тем выше может быть качество изображения. Пиксели в графическом рисунке образуют горизонтальные строки и вертикальные столбцы. Любое растровое изображение имеет четкий размер по ширине и высоте, который также указывается в пикселях.

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

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

Возможность воспроизведения звука на компьютере не является такой важной и необходимой составляющей, как текст или графическое изображение, но делает цифровой мир более совершенным и многогранным. Если же рассматривать техническую составляющую, компьютер, лишенный возможности работы со звуком, стал бы бесполезной игрушкой для композиторов, музыкантов, аранжировщиков и других специалистов, чья творческая или трудовая деятельность связана непосредственно со звуковыми файлами.
Для того чтобы понять структуру звукового файла, обратимся к базовым понятиям возникновения звука в природе. Известно, что любой звук это волна, которая порождается источником звука с помощью колебаний. От частоты колебаний источника звука зависит частота звуковой волны. Частота колебаний выражается в Герцах. Один Герц (Гц или Hz) означает одно колебание в секунду. Человеческое ухо способно слышать звуковые колебания в диапазоне от 20 колебаний в секунду (20 Гц) до 20 000 колебаний (20 кГц).

Некоторые источники утверждают, что человеческое ухо слышит не от 20, а от 30 Герц. Так или иначе, но всё, что ниже слышимого диапазона — принято считать инфразвуком, а диапазон свыше 20 000 Герц — принято считать ультразвуком.
Звуковой файл, по своей сути, это цифровая запись колебаний источника звука. При воспроизведении звукового файла, считывается запись колебаний, а сигнал, сгенерированный в соответствии с записью, подаётся на усилитель мощности, а уже затем воспроизводится динамиками звукового устройства.
Запись звука можно представить в виде графика. Для простоты восприятия, на графике изображена частота равная одному колебанию в секунду, что соответствует 1 Герц. Естественно, человеческое ухо не может услышать такую частоту, но на данном примере проще объяснить общий принцип звучания частот.

Когда мы слышим музыку, мы можем различать звучание множества различных музыкальных инструментов. Все они звучат на разных частотах, но запись подобного звучания выглядит в виде всего одной звуковой дорожки. Возникает вполне справедливый вопрос: Каким образом одна звуковая дорожка может содержать запись нескольких музыкальных инструментов?
Чтобы ответить на данный вопрос, воспользуемся двумя графиками. На одном графике изображена частота 1 Герц, на втором графике изображена частота 10 Герц. Как будет выглядеть график, если две этих частоты суммировать в один график?
Примитивная математика здесь бессильна и 1 плюс 10 Герц не будет равняться 11 Герцам. Полученный график будет сочетать в себе обе частоты, которые, при воспроизведении будут слышаться по отдельности. То есть, не сольются в единый звук. Однако, следует заметить, что суммируется громкость частот.

Подобным образом происходит наложение и слияние многих частот. В конце-концов, человеческое ухо — также имеет всего одну мембрану (барабанную перепонку), которая воспринимает всё многообразие звуков реального мира.

Видеофайлы являются наиболее "тяжелыми" по своему объему и наиболее сложными для воспроизведения на компьютере. Впрочем, для любого компьютера нет ничего страшнее, чем качественная видеоигра с трехмерной графикой и массой реалистичных эффектов: дым, туман, падающие тени от объектов и многие другие эффекты, которые создают максимальную нагрузку для видеокарты, заставляя её просчитывать весь виртуальный мир трёхмерной сцены.

Игровой режим с 3D-графикой наиболее опасен для ноутбуков потому, что система охлаждения обслуживает одновременно главный процессор и видеочип. Однако, скорость вращения кулера зависит от температуры главного процессора. Видеоигра может давать незначительную нагрузку для главного процессора при максимальной нагрузке видеочипа. В этом случае, кулер работает на пониженных оборотах, видеочип нагревается сильнее, чем главный процессор, но не получает достойного охлаждения, из-за чего значительно сокращается срок службы видеочипа.

Если учитывать нагрузку, которую создаёт трехмерная игра, то воспроизведение видеофайлов можно считать пустяком, который создаёт нагрузку процессора в пределах от 25-30% до 67-75%. Конечно, процент загрузки зависит ещё от мощности самого процессора. Чем мощнее процессор, тем проще ему работать. Для видеокарты-же нагрузка остается минимальной, поскольку, вся работа заключается в просчете плоского, двухмерного изображения, имеющего лишь ширину и высоту кадра.
Как говорилось ранее, видеофайл представляет собой серию последовательных, графических рисунков, сопровождающихся аудиодорожкой. Объем видеофайла напрямую зависит от размера и количества кадров. Правда, помимо этих параметров, существуют и такие, как интерлейсинг, битрейт, сжатие.
Известно, что человеческий глаз воспринимает движение на экране в том случае, если скорость смены кадров не ниже 24 кадров в секунду. Однако, некоторые цифровые форматы имеют настройку от шести с половиной кадров в секунду и выше. Как такое возможно?

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

Есть ещё такое заблуждение, что 24 кадра в секунду это максимум для человеческого глаза, а повышать количество кадров не имеет смысла. На самом деле, видео, воспроизводимое со скоростью 30 кадров в секунду, воспринимается глазом более плавно и кажется более натуральным, а 60 кадров в секунду создаёт ещё более плавный и реалистичный эффект движения.

Заключение

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

Вторым по значению можно смело назвать графический рисунок. К этой категории относится любое растровое изображение, будь то фотография, сделанная с помощью цифровой камеры или рисунок, созданный от руки. Для компьютера не имеет значения, каким образом был создан графический рисунок, для него это просто файл, в котором описано количество точек по вертикали и горизонтали, а также указан цвет каждой точки. Открывая изображение для просмотра, компьютер должен прочитать графический файл от начала до конца и затем, в соответствии с его содержимым, отобразить область рисунка указанными цветами. Пользователь видит картинку или фотографию.

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

Самым "тяжелым" и сложным для обработки и чтения является видеофайл, который состоит из двух частей: видеоряд и звуковая дорожка. По своей сути, видеофайл это объединение графического рисунка с аудиофайлом, с той разницей, что видеофайл подразумевает не один рисунок, а целую серию графических рисунков, которые сменяются со скоростью 12.5, 15, 25, 29.9 или 30 кадров в секунду. Скорость смены кадров также указана в самом видеофайле. Следует учитывать, что воспроизведение видеоряда должно ещё сопровождаться синхронным воспроизведением аудиодорожки. Из-за такой сложности, на слабых компьютерах нередко возникает рассинхронизация потоков, когда видеоряд отстает от аудиодорожки, либо наоборот: опережает её.

Однако, в этом случае существует большая проблема: у всех ваших пользователей имеется в распоряжении только один сервер, но каждый из них хочет выполнить какие-то действия. Это может вызвать увеличение расхода ресурсов сервера или даже вывести ваш сервер из строя из-за огромного количества запросов.

Вторая причина, по которой вы все еще выполняете вышеуказанные действия на сервере, заключается в том, что вы просто еще не прочитали данную статью и не знаете всех возможностей современных браузеров. Не волнуйтесь! Мы откроем вам все их секреты и тайны.

Данную тему можно разделить на три части: прошлое, настоящее и будущее.

Прошлое. ActiveX

В прошлом существовало только два браузера: Netscape и IE. Однажды Microsoft решил порадовать пользователей IE и добавил невероятную для того времени функциональность, которая позволяла коду, написанному на языке JavaScript, обмениваться информацией с операционной системой Windows. Данный способ получил название ActiveX.

Описанная технология может применяться даже сегодня в последней версии браузера IE (по умолчанию, ActiveX отключен). Не будем долго останавливаться на этой теме, поскольку ActiveX актуален только для IE, и пользователю необходимо проделать много необычных действий со своим браузером для того, чтобы запустить сценарий, который содержит ActiveXObjects.

В разделе, посвященном настоящему времени, мы поговорим об API для работы с файлами и Drag-and-Drop, а также о некоторых интересных примерах.

Самая же увлекательная часть содержится в разделе о “будущем”, где будут раскрыты все секреты файловой системы в браузере. Давайте приступим к изучению возможностей браузеров.

Настоящее. Управление добавленными файлами

Существует два способа передать файл в современный браузер (IE10+):

1) Input тег с типом “file”;

2) Перетянуть файлы на какой-либо элемент DOM-модели.

Старые добрые времена с элементом Input

Первый вариант может использоваться даже в старых браузерах. Единственное отличие в том, что мы не можем получить содержимое файлов в IE9 и более ранних версий. Это означает, что для выполнения некоторых действий нам все еще необходимо использовать сервер. Чтобы получить файлы, выбранные пользователем, нам нужно добавить обработчик события “change” и проверять свойство “files” данного элемента при вызове функции-обработчика.

", data1 = document.getElementById("demo1_fileData"); document.getElementById("demo1_fileElement").addEventListener("change", function(e)< var file = this.files ? this.files[0] : < name: this.value >, fileReader = window.FileReader ? new FileReader() : null; if (file)< if (fileReader)< fileReader.addEventListener("loadend", function(e)< data1.innerHTML = tamplate.replace("<>", file.name).replace(">", file.size).replace(">", e.target.result.substring(0, 10)); >, false); fileReader.readAsText(file); > else < data.innerHTML = tamplate.replace("<>", file.name).replace(">", "Don`t know").replace(">", "This browser isn`t smart enough!"); > > >, false);Как видите, здесь мы использовали метод “readAsText” объекта “FileReader”, чтобы получить содержимое файла. У него также есть методы, которые читают файл(файлы) и возвращают результаты в различных форматах.

Будьте внимательны, используя метод “readAsBinaryString”, поскольку он не поддерживается браузером IE версий 10-11.

Возможно, вы также хотите контролировать процесс чтения файла, отобразить индикаторы прогресса или ожидания, или прервать его, если файлы слишком объемные. Специально для вас у FileReader есть такие события как onprogress, onabort, onloadstart, onloadend, onerror, а также метод abort, который останавливает процесс чтения и выдает ошибку, которая может быть обработана.

В данном примере мы немного исправили функциональность для IE9, у которого нет возможности чтения файлов. Из информации о выбранном файле (множественный выбор не поддерживается) мы можем получить только его имя, которое хранится в свойстве “value” элемента input.

Перетащи меня в браузер!

Это был старый способ добавления файлов в браузер. Он мог использоваться даже в IE6 (addEventListener поддерживается в IE9+), с некоторыми изменениями. В современных браузерах (IE10+) существует другой способ добавления файлов. Все, что нужно сделать, это повесить обработчик события “drop” на любой элемент веб-страницы. Это может быть как специальный элемент с текстом внутри, так и просто body. После этого пользователь может перетащить какой-либо файл в элемент, на котором висит обработчик события “drop”. Выбранный файл можно найти в свойстве “dataTransfer” объекта события. Давайте посмотрим на демо:

Несколько важных замечаний по этому демо:

1) Прежде всего, вам не стоит проверять, поддерживает ли ваш браузер событие “ondrop”, поскольку используется IE9. Он поддерживает данное событие, но не имеет свойства dataTransfer.

2) Если вы хотите поймать событие “ondrop”, вам необходимо добавить обработчик события “ondragover” и вызвать функцию preventDefault. По умолчанию, браузер попытается загрузить этот файл или отобразить его на странице (если это рисунок или PDF файл), и вам нужно его остановить.

Поддержка старых версий браузеров: в таких браузерах, как IE9, вы можете поместить элемент input из предыдущих примеров на текущем элементе, растянуть его, установить для него прозрачность равную 100%, и изменить текст на следующий: “Кликните и выберите файл”. Когда пользователь кликнет на этот элемент, он увидит обычный диалог для выбора файлов. Подобное решение подходит также для планшетов и телефонов, у которых нет возможности разделить экраны и перетягивать элементы между ними.

Перетащи меня из браузера!

Предыдущий пример мог вызвать следующий вопрос о функциональности drag-and-drop: “Можем ли мы перетащить файлы из браузера на компьютер?” Ответ будет “Да”, но работает это только в браузере Chrome. Тем не менее, это отличная функция для вашей веб страницы, и мы должны ее испробовать. В следующем примере вам нужно перетянуть картинку в формате PDF на свой компьютер, и она будет сохранена как PDF файл.

Перетащите эту картинку из браузера на ваш рабочий стол

Как уже было сказано, перетащить файл можно только из браузера Chrome. Однако, проблемой это не является, поскольку это не основная функциональность вашего веб-приложения, а просто отличное дополнение для пользователей Chrome, которая может быть благополучно заменена обычной ссылкой для загрузки нужного файла.

“Все течет, все изменяется … и … дважды в одну и ту же реку войти невозможно”. (Гераклит)

Теперь мы можем получить файлы и их содержимое в формате JavaScript. Но что мы можем с ними делать? Как мы можем их изменить? Вот в чем вопрос.

Прежде всего, мы можем работать с текстом. Когда мы прочитаем файл как текстовую строку, мы получим все его текстовое содержимое и сможем его парсить. Например, пользователь может перетянуть новый CSS файл, и вы сможете сразу применить его на своей странице. Или, если это файл со статьей, которую нужно опубликовать, вы можете его прочитать, применить какие-либо стили к заголовкам и поместить его в текстовый редактор на вашей странице.

Примером также может быть парсинг файла в формате excel. Вам не нужно посылать его на сервер, конвертировать в JSON и отправлять обратно. Это можно сделать на клиентской стороне, не тратя времени на запрос и ожидание ответа сервера. Уже есть библиотеки для парсинга xls и xlsx файлов, которые вы можете найти здесь: XLS и XLSX.

Еще один способ использования файлов и их содержимого в JavaScript – это работа с двоичными данными. Это могут быть рисунки, видео или какие-либо другие файлы. Если мы хотим обрабатывать двоичные данные, нам нужно использовать новые свойства JavaScript, такие как объект Blob и типизированные массивы. Мы не будем углубляться в эту тему, потому что она слишком большая и заслуживает отдельной статьи.

Объект Blob – это объект, который выглядит, как обычный файл на JavaScript, и содержит необработанные данные. Конструктор такого объекта принимает два параметра – данные и объект с его опциями. В состав данных могут входить ArrayBuffer, типизированный массив, объект Blob или строки. Это все те данные, которые будут храниться в новом объекте Blob. Опции включают в себя тип данных.

У каждого объекта Blob есть тип и свойства, которые задают его размеры, а также метод “slice”. Все данные, которые содержатся в данном объекте Blob, можно разделить с помощью метода “slice”. Этот метод возвращает новый объект Blob, который содержит в себе отделенную часть данных.

Типизированные массивы и буферы используются для хранения двоичных данных фиксированной длины и определенного типа (Int8Array или Int32Array).

Все это позволяет нам делать занимательные вещи на клиентской стороне, например, сжимать файлы. Эта библиотека позволяет применить алгоритм Deflate ко всем выбранным файлам, и собрать их в один zip файл. Кроме того, она использует Web Workers, чтобы описанный процесс протекал в фоновом режиме.

Еще один пример обработки файла, содержащего двоичные данные, это PDF.js. Это проект, который находится в открытом доступе и используется для отображения на веб-странице документов в формате PDF. Все, что вам нужно сделать, это передать ему массив двоичных данных, и он отрисует содержимое PDF-документа на странице.

Будущее. Создайте свою файловую систему с блэкджеком и… всеми причитающимися атрибутами

Теперь мы знаем, как получать файлы и изменять их. Настало время раскрыть секрет хранения файлов. Да-да, речь идет именно о создании и хранении папок и файлов внутри браузера.

Во время написания этой статьи данная функциональность поддерживалась только браузерами Chrome и Opera. Опять-таки, это не такая уж важная проблема, поскольку данная возможность может использоваться как дополнительный инструмент для кэширования файлов в вашем браузере. Давайте более детально рассмотрим ее API.

Прежде всего, нам нужно запросить объект файловой системы с помощью метода webkitRequestFileSystem . Он принимает 4 параметра: тип, размер, функция, которая будет вызвана в случае успешной обработки запроса, и функция, которая будет вызвана при возникновении ошибки.

В браузере имеются два типа файловой системы: временная и постоянная. Первая может быть создана без запроса разрешения пользователя. Вы просто ее создаете и затем используете. Однако, если ваш браузер столкнется с какой-либо проблемой, как, например, недостаток памяти, он удалит все хранящиеся в нем данные. Поэтому данный тип хранения информации может быть использован только для кэширования данных, которые можно восстановить.

Еще один тип файловой системы – постоянный. Браузер никогда не удалит файлы, хранящиеся в ней. Тем не менее, если вы запросите данный тип файловой системы без разрешения пользователя, она не будет работать.

Для того, чтобы запросить разрешение пользователя на использование постоянного хранилища, нам нужно вызвать метод navigator.webkitPersistentStorage.requestQuota .

Константы обоих типов файловых систем хранятся в объекте window: window.TEMPORARY или window.PERSISTENT . Второй параметр – это нужный нам размер хранилища в байтах.

Теперь мы можем создать наше первое хранилище вместимостью 1Гб:

Временная файловая система:

Постоянная файловая система:

Как видите, мы используем много обработчиков ошибок, которые должны отлавливать ошибки, связанные с созданием хранилищ. Объект FileError содержит полный список типов ошибок:

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

Данный объект имеет интерфейс следующего вида:

Как видите, для создания, перемещения, удаления и получения файлов и директорий используются специальные методы. Полученный нами объект “fs” ссылается на корневой каталог файловой системы браузера.

Данный каталог и все другие каталоги, которые мы будем создавать, представлены интерфейсом DirectoryEntry. Все файлы данной файловой системы представлены интерфейсом FileEntry. Мы будем использовать методы getFile и getDirectory для того, чтобы создать файлы и папки и получить их.

Первый параметр данных методов – это файл или путь к нему. Этот путь может быть как абсолютным, так и относительным. Второй параметр – это объект с действиями, которые выполняются в случае, если в указанной директории файл отсутствует. Данный параметр может иметь свойства “create” и “exclusive”.

Если свойству “create” задано значение “true”, будет создан новый файл или директория, а старый файл будет переписан. Если же мы для данного свойства зададим значение “false”, методы вернут объект FileEntry или выдадут ошибку, если файла не существует. Если задано свойство “exclusive” со значением “true”, файлы не будут переписаны.

Для того, чтобы различить файлы и папки, у каждого из двух интерфейсов есть флаги: isDirectory и isFile. Кроме того, существует специальный класс FileWriter, который служит для добавления содержимого в файл. Его необходимо запрашивать у браузера для каждого файла, который нужно изменить. Давайте добавим несколько файлов:

После этого вы увидите опцию “FileSystem” на вкладке “Resources” раздела DevTool. Здесь отображаются все созданные файлы и хранилища.

Данные файлы мы также можем получить по специальному внутреннему URL браузера, который может быть установлен в качестве атрибута “src” тега IMG. Он начинается с слова “filesystem:” и выглядит вот так: “filesystem:/persistent/files/newFile.txt”.

Чтобы получить URL, мы использовали метод “toURL”. Теперь у нас есть вся необходимая информация для того, чтобы создать веб-приложение для кэширования аудио и видео файлов, которое позволяет слушать и смотреть их без подключения к интернету. Прежде всего, загрузим двоичный файл. Затем, мы сохраним его в постоянном хранилище и запустим.

Сохраните песню, отключите Интернет и наслаждайтесь музыкой))

Сохранить в браузер (может занять некоторое время)ИгратьУдалить песню из браузера

Читайте также: