Rivalry2

Все, что нужно знать о JSON: особенности, описание, первые проект OTUS

2026-03-10 22:43 Diff

https://otus.ru/journal/vse-chto-nuzhno-znat-o-json-osobennosti-opisanie-pervye-proekt/2-6-7/

Что это такое
Как создать строку
- Наглядный пример
Сравнение JSON с XML
Работа через JS
- Создание и чтение формата
  - Из переменной
  - Из строки
Как быть с анимацией

JSON – объект, о котором слышали многие разработчики. Но на первых порах данная аббревиатура остается загадкой. Работать с ней при наличии определенных навыков достаточно легко.

Данный объект широко распространен в анимации. Помогает внедрять оную на веб-странички. Далее будут рассмотрены основы JSON, а также приведен пример первого проекта с анимацией в After Effeсts и Лотти.

Что это такое

JSON – объект JavaScript. Своеобразный метод хранения и передачи информации структурированного характера. За счет элементарного синтаксиса позволяет сохранять все, что угодно:

строки;
массивы;
числа;
те или иные объекты.

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

Преимущества

JSON обладает рядом преимуществ. К ним относят:

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

В основе работы оного лежит способ определения объектов и массивов. Данный процесс проходит на создание массивов ассоциативного типа в других языках программирования.

Области применения

Работа с JSON осуществляется далеко не всегда. Существуют различные сферы и задачи, где данная «технология» применяется весьма активно.

Стандарт используется в следующих случаях:

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

Также он имеет место при работе с анимацией в браузерах и на страничках в интернете. Может быть задействован для того, чтобы отправлять информацию от интернет-обозревателей на сервера. Делается это через передачу строчки JSON в виде параметра запросов POST или GET.

Внимание: предложенный последний пример не слишком популярен. Для описанной ситуации программеры чаще пользуются запросами AJAX. Этот прием помогает упростить первоначальную запись.

Несколько слов о характеристиках

Данные JSON обладают конкретными характеристиками. Их частично можно отнести к преимуществам:

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

Но для того, чтобы использовать JSON, нужно уточнить его синтаксис. Из всего вышесказанного следует – затруднений данный процесс не вызовет.

Синтаксис

Преимущественно рассматривается в качестве подмножества синтаксиса JS. Включает в себя следующие особенности:

информация представляется в сочетании «имя/значение»;
фигурные скобки применяются для хранения объекта;
после объекта пишется двоеточие;
чтобы разделить пару «имя/значение», необходимо поставить запятую;
квадратные скобки отвечают за массивы, значения который также разделяются запятой.

Здесь имеется поддержка двух структур электронных материалов:

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

Выше приведен простой пример JSON.

Типы данных

Формат JSON обладает поддержкой разнообразных типов информации. Разобраться в них поможет табличка, представленная ниже.

ТипОписаниеЧислоС плавающей точкой двойной точности в JS.СтрокаUnicode, содержащий двойные кавычки и обратную косую черту.ЛогическийTrue/False.МассивПоследовательность значений упорядоченного характера.ЗначениеСтрока, число, истина, ложь, нуль и так далее.ОбъектНабор пар «ключ:значение» неупорядоченного характера.ПробелПрименяется между несколькими парами токенов.Ноль (null)Обозначение пустоты.

Особое внимание рекомендуется уделить объектам JSONobject. Для того, чтобы применять оные, важно запомнить несколько ключевых правил.

Немного об объектах

Объект в рассматриваемой «методике» предусматривает следующие особенности:

заключаются в фигурные скобки;
после каждого имени проставляется двоеточие;
пара «ключ/значение» делится запятой;
ключ должен выступать в виде строки;
каждый ключ отличается друг от друга;
используется тогда, когда имена ключей – это произвольные строки.

Выше представлен синтаксис объекта, а также простой пример оного.

Как создать строку

Для использования строчек JSON сначала необходимо создать их. Это простой процесс, но перед его воплощением в жизнь требуется запомнить несколько правил:

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

Допускается применение hex закодированных символов. Осуществляется соответствующая операция точно так же, как и в других языках.

Наглядный пример

Файлы JSON можно использовать для анимации и иных сложных объектов. Но в первую очередь требуется освоить работу со строками. Предложенные коды ниже – это наглядные примеры рассматриваемого элемента.

Мало создать строку JSON – ее требуется грамотно прочесть. В рассмотренном примере:

В самом начале проставляются фигурные одинарные скобки. Они указывают на то, что работать предстоит с объектом.
Внутри объекта расположены несколько пар «имя/значение».
“orderID”: 12345 – поле с именем ordered, а также присвоенным значением 12345.
“shopperName”: “John Smith” – поле «ШопперНейм» и значение «Джон Смит» (на английском).
“shopperEmail”: johnsmith@example.com – аналогично предыдущему способу хранения информации о покупателе, а именно здесь публикуется электронный ящик.
“contetnts”:[…] – полет contents, значением которого выступает указанный массив.
“orderCompleted”: true – поле «ОрдерКомплитед» со значением «истина».
В массиве contents расположены два объекта, отвечающие за отображение содержимого корзинки.

Этот вариант подходит для демонстрации того, как сохранять в корзине информацию из интернет-магазина. Весьма распространенный и популярный прием.

Формат данных JSON совпадает с объектами в JS. Это позволяет переделать предыдущий скрипт. То, как будет выглядеть код объекта JacaScript, указано выше.

Сравнение JSON с XML

Примеры JSON можно рассматривать бесконечно долго. На основе предложенного варианта стоит провести сравнение с XML.

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

JSON за последние годы набрал популярность в качестве средства передачи AJAX информации;
XML обладает большим объемом по сравнению с «ДжейСон»;
чтение JSON более простое, нежели у XML.

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

По итогу вместо 323 символов исходная кодификация заняла 1128. Чтение тоже будет сложнее.

Внимание: рекомендуется отдавать предпочтение формату JSON при программировании.

Работа через JS

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

Создание и чтение формата

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

Вот общие принципы упомянутых процессов:

Строки создаются при условии, что разработчик начинает внедрять переменные. Последние обладают теми или иными значениями. Далее происходит пропуск через функции, которые помогают переделывать информацию в строчку.
Чтение начинается со строки JSON, которая обладает теми или иными сведениями. Нужно осуществить пропуск string через функцию, которая отвечает за создание переменных, содержащих электронные материалы.

Далее представлены наглядные примеры того, как операции происходят в JS

Из переменной

У JS имеется встроенный метод JSON.stringify(). Он принимает переменную JavaScript, а затем возвращает строчку JSON, репрезентируя содержимое оной. Strings выводятся без пробелов.

Из строки

А вот парсинг строк. Существуют различные варианты решения поставленной задачи, но лучше всего применять JSON.parse(). Он выделяется безопасностью и надежность. Принимает «ДжейСОН» строчку и преобразовывает ее в объект/массив Джавы и «исходными электронными материалами».

Как быть с анимацией

Анимированные объекты на веб-страницах – это не такая большая редкость. Они встречаются очень часто. И одного предложенного примера недостаточно для полного понимания принципов работы JSON.

Лучше всего использовать для реализации поставленной задачи Lottie. Данным способом можно производить экспорт анимационных объектов без потери качества. В процессе будет задействован After Effects.

LottieFiles

Так называют независимую платформу от Aitbnb, предусмотренную для дизайнеров. С ее помощью можно осуществлять с анимацией различные действия:

тестировать;
загружать;
приобретать;
выгружать.

Также здесь предусматривается совмещение с After Effects. Работать подобным образом достаточно легко.

Начало

В первую очередь требуется провести предварительную подготовку. А именно:

установить на устройство плагин для дальнейшей работы;
использовать LottieFile или Bodymovin;
создать анимацию – в примере им будет дрон с лопастями, которые вращаются;
импортировать в слои файлы Illustrator;
создать спиральные 3D-слои и повернуть их;
перед применением 3D-слоев удостовериться в поддержки таковых.

Иными словами, сначала анимированная картинка (объект) для страницы в интернете должна быть создана. После этого будет производиться выгрузка примера в JSON.

На чем сконцентрироваться

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

В Lottie рекомендуется учесть следующие моменты:

Файлы «Джейсон» должны в итоге оказаться максимально компактными. Особенно тогда, когда речь идет о мобильных продуктах.
Чтобы создавать анимацию в Lottie, рекомендуется максимально изучить After Effect. Это позволит избежать наличия лишних ключевых кадров.
Постараться отказаться от применения ключевых кадров пути. Данный момент требует создания большого документа из преобразования всей вершины.
Рекомендуется отказаться от покачиваний, автоматической трассировки и похожих методов. Связано это с большим количеством ключевых кадров, что отражается на производительности.
Слои Illustrator, EPS, PDF или SVG преобразовываются для формирования слоев в After Effects. Иначе это поспособствует возникновению ошибки.
Выражение и эффекты в Lottie пока не поддерживаются.
Стили слоев тоже не имеют поддержки.
Некоторые режимы наложения не поддерживаются. Они не видны даже через Luma.

Все это позволит создать animations без особых затруднений.

Непосредственная работа

Теперь, когда все готово, можно приступать к работе:

Запустить After Effect и созданную ранее анимацию.
Произвести импорт слоев, после – выбрать их все.
Кликнуть ПКМ и выбрать «Создать»-«Создание фигуры из векторных…».
Удалить AI-файлы.
Провести симуляцию вращения путем анимирования размера в X (ширины).
Создать нулевой объект, который будет отвечать за перемещение всего логотипа.
Нулевой объект сделать видимым, сделать 0% прозрачности. Тогда все будет работать.
Перейти в «Окно»-«Расширение»-«LottieFiles».
Открыть окно для просмотра animation и ее загрузки в Lottie-файл. Для реализации поставленной задачи требуется Лотти-аккаунт.

По ссылке можно найти скрины проделанной работы. А для того, чтобы лучше разбираться в изученной теме, рекомендуется пройти дистанционные онлайн курсы «JSON для начинающих».

Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus!


<!DOCTYPE html>
<html dir="ltr" lang="ru-RU">

<head>

	<meta charset="UTF-8" />
	<meta http-equiv="x-ua-compatible" content="ie=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="profile" href="http://gmpg.org/xfn/11" />
	
	<title>Все, что нужно знать о JSON: особенности, описание, первые проект OTUS</title>

		<!-- All in One SEO 4.5.2.1 - aioseo.com -->
		<meta name="description" content="JSON – объект, о котором слышали многие разработчики. Но на первых порах данная аббревиатура остается загадкой. Работать с ней при наличии определенных навыков достаточно легко. Данный объект широко распространен в анимации. Помогает внедрять оную на веб-странички. Далее будут рассмотрены основы JSON, а также приведен пример первого проекта с анимацией в After Effeсts и Лотти. Что" />
		<meta name="robots" content="max-image-preview:large" />
		<link rel="canonical" href="https://otus.ru/journal/vse-chto-nuzhno-znat-o-json-osobennosti-opisanie-pervye-proekt/" />
		<meta name="generator" content="All in One SEO (AIOSEO) 4.5.2.1" />
		<script type="application/ld+json" class="aioseo-schema">
			{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/otus.ru\/journal\/vse-chto-nuzhno-znat-o-json-osobennosti-opisanie-pervye-proekt\/#article","name":"\u0412\u0441\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043e JSON: \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435, \u043f\u0435\u0440\u0432\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442 OTUS","headline":"\u0412\u0441\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043e JSON: \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435, \u043f\u0435\u0440\u0432\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442","author":{"@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author"},"publisher":{"@id":"https:\/\/otus.ru\/journal\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2022\/02\/oj-1080x720-7.png","width":1080,"height":720},"datePublished":"2022-02-04T17:42:34+00:00","dateModified":"2022-02-04T17:42:36+00:00","inLanguage":"ru-RU","mainEntityOfPage":{"@id":"https:\/\/otus.ru\/journal\/vse-chto-nuzhno-znat-o-json-osobennosti-opisanie-pervye-proekt\/#webpage"},"isPartOf":{"@id":"https:\/\/otus.ru\/journal\/vse-chto-nuzhno-znat-o-json-osobennosti-opisanie-pervye-proekt\/#webpage"},"articleSection":"\u041f\u043e\u043b\u0435\u0437\u043d\u043e\u0435, JSON"},{"@type":"BreadcrumbList","@id":"https:\/\/otus.ru\/journal\/vse-chto-nuzhno-znat-o-json-osobennosti-opisanie-pervye-proekt\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/otus.ru\/journal\/#listItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/otus.ru\/journal\/","nextItem":"https:\/\/otus.ru\/journal\/vse-chto-nuzhno-znat-o-json-osobennosti-opisanie-pervye-proekt\/#listItem"},{"@type":"ListItem","@id":"https:\/\/otus.ru\/journal\/vse-chto-nuzhno-znat-o-json-osobennosti-opisanie-pervye-proekt\/#listItem","position":2,"name":"\u0412\u0441\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043e JSON: \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435, \u043f\u0435\u0440\u0432\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442","previousItem":"https:\/\/otus.ru\/journal\/#listItem"}]},{"@type":"Organization","@id":"https:\/\/otus.ru\/journal\/#organization","name":"\u041e\u0442\u0443\u0441 \u043e\u043d\u043b\u0430\u0439\u043d-\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435","url":"https:\/\/otus.ru\/journal\/","sameAs":["https:\/\/www.youtube.com\/channel\/UCetgtvy93o3i3CvyGXKFU3g"],"contactPoint":{"@type":"ContactPoint","telephone":"+74999389202","contactType":"Customer Support"}},{"@type":"Person","@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author","url":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/","name":"A. Pavlenko","image":{"@type":"ImageObject","@id":"https:\/\/otus.ru\/journal\/vse-chto-nuzhno-znat-o-json-osobennosti-opisanie-pervye-proekt\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d4c499a104d7c2522fa41f89e6819499?s=96&d=mm&r=g","width":96,"height":96,"caption":"A. Pavlenko"}},{"@type":"WebPage","@id":"https:\/\/otus.ru\/journal\/vse-chto-nuzhno-znat-o-json-osobennosti-opisanie-pervye-proekt\/#webpage","url":"https:\/\/otus.ru\/journal\/vse-chto-nuzhno-znat-o-json-osobennosti-opisanie-pervye-proekt\/","name":"\u0412\u0441\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043e JSON: \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435, \u043f\u0435\u0440\u0432\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442 OTUS","description":"JSON \u2013 \u043e\u0431\u044a\u0435\u043a\u0442, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u043b\u044b\u0448\u0430\u043b\u0438 \u043c\u043d\u043e\u0433\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438. \u041d\u043e \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0445 \u043f\u043e\u0440\u0430\u0445 \u0434\u0430\u043d\u043d\u0430\u044f \u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u0433\u0430\u0434\u043a\u043e\u0439. \u0420\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043d\u0435\u0439 \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u043d\u0430\u0432\u044b\u043a\u043e\u0432 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043b\u0435\u0433\u043a\u043e. \u0414\u0430\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0448\u0438\u0440\u043e\u043a\u043e \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d \u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0432\u043d\u0435\u0434\u0440\u044f\u0442\u044c \u043e\u043d\u0443\u044e \u043d\u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0438. \u0414\u0430\u043b\u0435\u0435 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u044b \u043e\u0441\u043d\u043e\u0432\u044b JSON, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439 \u0432 After Effe\u0441ts \u0438 \u041b\u043e\u0442\u0442\u0438. \u0427\u0442\u043e","inLanguage":"ru-RU","isPartOf":{"@id":"https:\/\/otus.ru\/journal\/#website"},"breadcrumb":{"@id":"https:\/\/otus.ru\/journal\/vse-chto-nuzhno-znat-o-json-osobennosti-opisanie-pervye-proekt\/#breadcrumblist"},"author":{"@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author"},"creator":{"@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2022\/02\/oj-1080x720-7.png","@id":"https:\/\/otus.ru\/journal\/vse-chto-nuzhno-znat-o-json-osobennosti-opisanie-pervye-proekt\/#mainImage","width":1080,"height":720},"primaryImageOfPage":{"@id":"https:\/\/otus.ru\/journal\/vse-chto-nuzhno-znat-o-json-osobennosti-opisanie-pervye-proekt\/#mainImage"},"datePublished":"2022-02-04T17:42:34+00:00","dateModified":"2022-02-04T17:42:36+00:00"},{"@type":"WebSite","@id":"https:\/\/otus.ru\/journal\/#website","url":"https:\/\/otus.ru\/journal\/","name":"OTUS JOURNAL","description":"Blog about IT","inLanguage":"ru-RU","publisher":{"@id":"https:\/\/otus.ru\/journal\/#organization"}}]}
		</script>
		<!-- All in One SEO -->

<link rel='dns-prefetch' href='//otus.ru' />
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='stylesheet' id='wp-block-library-css' href='https://otus.ru/journal/wp-includes/css/dist/block-library/style.min.css?ver=6.4.7' type='text/css' media='all' />
<style id='classic-theme-styles-inline-css' type='text/css'>
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
</style>
<style id='global-styles-inline-css' type='text/css'>
body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
.wp-block-navigation a:where(:not(.wp-element-button)){color: inherit;}
:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}
:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}
.wp-block-pullquote{font-size: 1.5em;line-height: 1.6;}
</style>
<link rel='stylesheet' id='wbcr-comments-plus-url-span-css' href='https://otus.ru/journal/wp-content/plugins/clearfy/components/comments-plus/assets/css/url-span.css?ver=2.2.0' type='text/css' media='all' />
<link rel='stylesheet' id='wpel-style-css' href='https://otus.ru/journal/wp-content/plugins/wp-external-links/public/css/wpel.css?ver=2.59' type='text/css' media='all' />
<link rel='stylesheet' id='ez-toc-css' href='https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/assets/css/screen.min.css?ver=2.0.61' type='text/css' media='all' />
<style id='ez-toc-inline-css' type='text/css'>
div#ez-toc-container .ez-toc-title {font-size: 120%;}div#ez-toc-container .ez-toc-title {font-weight: 500;}div#ez-toc-container ul li {font-size: 95%;}div#ez-toc-container nav ul ul li {font-size: 90%;}
.ez-toc-container-direction {direction: ltr;}.ez-toc-counter ul{counter-reset: item ;}.ez-toc-counter nav ul li a::before {content: counters(item, ".", decimal) ". ";display: inline-block;counter-increment: item;flex-grow: 0;flex-shrink: 0;margin-right: .2em; float: left; }.ez-toc-widget-direction {direction: ltr;}.ez-toc-widget-container ul{counter-reset: item ;}.ez-toc-widget-container nav ul li a::before {content: counters(item, ".", decimal) ". ";display: inline-block;counter-increment: item;flex-grow: 0;flex-shrink: 0;margin-right: .2em; float: left; }
</style>
<link rel='stylesheet' id='contentberg-fonts-css' href='https://fonts.googleapis.com/css?family=Roboto%3A400%2C500%2C700%7CPT+Serif%3A400%2C400i%2C600%7CIBM+Plex+Serif%3A500' type='text/css' media='all' />
<link rel='stylesheet' id='contentberg-core-css' href='https://otus.ru/journal/wp-content/themes/contentberg/style.css?ver=1.8.3' type='text/css' media='all' />
<link rel='stylesheet' id='contentberg-lightbox-css' href='https://otus.ru/journal/wp-content/themes/contentberg/css/lightbox.css?ver=1.8.3' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-css' href='https://otus.ru/journal/wp-content/themes/contentberg/css/fontawesome/css/font-awesome.min.css?ver=1.8.3' type='text/css' media='all' />
<script type="text/javascript" id="breeze-prefetch-js-extra">
/* <![CDATA[ */
var breeze_prefetch = {"local_url":"https:\/\/otus.ru\/journal","ignore_remote_prefetch":"1","ignore_list":["\/wp-admin\/"]};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/breeze/assets/js/js-front-end/breeze-prefetch-links.min.js" id="breeze-prefetch-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/jquery/jquery.min.js" id="jquery-core-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/jquery/jquery-migrate.min.js" id="jquery-migrate-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/lazysizes.js" id="lazysizes-js"></script>
<link rel="https://api.w.org/" href="https://otus.ru/journal/wp-json/" /><link rel="alternate" type="application/json" href="https://otus.ru/journal/wp-json/wp/v2/posts/2877" /><link rel='shortlink' href='https://otus.ru/journal/?p=2877' />
<link rel="alternate" type="application/json+oembed" href="https://otus.ru/journal/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fvse-chto-nuzhno-znat-o-json-osobennosti-opisanie-pervye-proekt%2F" />
<link rel="alternate" type="text/xml+oembed" href="https://otus.ru/journal/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fvse-chto-nuzhno-znat-o-json-osobennosti-opisanie-pervye-proekt%2F&#038;format=xml" />
<script>var Sphere_Plugin = {"ajaxurl":"https:\/\/otus.ru\/journal\/wp-admin\/admin-ajax.php"};</script><link rel="icon" href="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-32x32.png" sizes="32x32" />
<link rel="icon" href="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-180x180.png" />
<meta name="msapplication-TileImage" content="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-270x270.png" />
		<style type="text/css" id="wp-custom-css">
			#menu-item-10406 .wpel-icon {
    display: none;	
}

#menu-item-10407 .wpel-icon {
    display: none;	
}


.otus-login-site a  .wpel-icon {
	    display: none;	
}

.menu-menju-navykov-container a  .wpel-icon {
	    display: none;	
}

.otus-login-site a 
{
    background: #ffd709;
    border-radius: 12px;
    color: #0f0f10;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    display: block;
    text-align: center;
    padding: 8px 25px;
}

.main-footer.dark {  
    background: linear-gradient(90deg, #a64fc5, #4f54e6);
    border-color: transparent;
}


.main-footer.bold .copyright {
	    color: #fff;
}

.main-footer.bold .to-top i {
    color: #fff;
}

.main-footer.bold .back-to-top {
	    color: #fff;
}

.nav__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;	
}


.scrollable-menu .menu {
    display: flex;


}


.nav__scroll 
{
	    background: linear-gradient(90deg, #a64fc5, #4f54e6);
}


.scrollable-menu .menu .menu-item {
    flex: 0 0 auto;
    padding: 15px 15px;
}

.scrollable-menu .menu .menu-item  a {
    color: #fff;
}

.nav__scroll::-webkit-scrollbar{background-color:#fff;height:5px;}

.nav__scroll::-webkit-scrollbar-thumb{background-color:#dcdcdc;}

.nav__scroll::-webkit-scrollbar-track{-webkit-border-radius:0;border-radius:0;background-color:#fff;}/

body {
    min-width: 320px;	
}

.banner-click img {
	    margin: 0 auto;
    display: block;
}

.banner-click {
	    cursor: pointer;
}

.banner-footer-area {
	    margin-bottom: 20px;
}

.banner-left-area {
	margin-top: 40px;
}		</style>
		
<!--Start VDZ Yandex Metrika Plugin-->
<!-- Yandex.Metrika counter --><script type="text/javascript" >(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");ym(34531570, "init", {clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, trackHash:true, ecommerce:"dataLayer"});</script>
<noscript><div><img src="https://mc.yandex.ru/watch/34531570" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter --><!--START ADD EVENTS FROM CF7--><script type='text/javascript'>document.addEventListener( 'wpcf7submit', function( event ) {
					  //event.detail.contactFormId;
					  if(ym){
				          //console.log(event.detail);
						  ym(34531570, 'reachGoal', 'VDZ_SEND_CONTACT_FORM_7');
						  ym(34531570, 'params', {
						      page_url: window.location.href, 
						      status: event.detail.status, 
						      locale: event.detail.contactFormLocale, 
						      form_id: event.detail.contactFormId, 
						  });
					  }
					}, false );
				</script><!--END ADD EVENTS FROM CF7-->
<!--End VDZ Yandex Metrika Plugin-->

</head>

<body class="post-template-default single single-post postid-2877 single-format-standard right-sidebar  lazy-normal has-lb">


<div class="main-wrap">

	
		
		
<header id="main-head" class="main-head head-nav-below has-search-modal simple simple-boxed">

	<div class="inner inner-head" data-sticky-bar="0">

		<div class="wrap cf wrap-head">

			<div class="left-contain">
				<span class="mobile-nav"><i class="fa fa-bars"></i></span>

					<div class="title">
		
		<a href="https://otus.ru/journal/" title="OTUS JOURNAL" rel="home" data-wpel-link="internal">
		
					
						<span class="text-logo"><img src="/journal/wp-content/themes/contentberg/img/logo_site.svg" alt="OTUS JOURNAL"></span>
			
				
		</a>
	
	</div>
			</div>


			<div class="navigation-wrap inline">
				
					<nav class="navigation inline simple light" data-sticky-bar="0">
						<div class="menu-rubriki-container"><ul id="menu-rubriki" class="menu"><li id="menu-item-109" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-cat-1 menu-item-109"><a href="https://otus.ru/journal/category/pro-it/" data-wpel-link="internal"><span>Про IT</span></a></li>
<li id="menu-item-113" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-cat-4 menu-item-113"><a href="https://otus.ru/journal/category/polza/" data-wpel-link="internal"><span>Полезное</span></a></li>
<li id="menu-item-114" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-cat-3 menu-item-114"><a href="https://otus.ru/journal/category/lifestyle/" data-wpel-link="internal"><span>Лайфстайл</span></a></li>
<li id="menu-item-10406" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10406"><a href="https://otus.ru/catalog/courses" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right"><span>Обучение</span><span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10407" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10407"><a href="https://otus.ru/about" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right"><span>Информация</span><span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
</ul></div>					</nav>

							</div>

			<div class="actions">
				<div class="otus-login-site">
					<a href="https://otus.ru/login/" target="_blank" data-wpel-link="external" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Войти<span class="wpel-icon wpel-image wpel-icon-6"></span></a>
				</div>

				
				
				
					<a href="#" title="Search" class="search-link"><i class="fa fa-search"></i></a>

				
				
			</div>

		</div>
	</div>

</header> <!-- .main-head -->

<div class="nav nav_disable nav_colored nav_transparent course-categories__nav nav__scroll ">
	<div class="container wrap">
		
			<div class="links inline simple light scrollable-menu">
				<div class="menu-menju-navykov-container"><ul id="menu-menju-navykov" class="menu"><li id="menu-item-10413" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10413"><a href="https://otus.ru/categories/programming/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Программирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10414" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10414"><a href="https://otus.ru/categories/architecture/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Архитектура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10415" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10415"><a href="https://otus.ru/categories/operations/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Инфраструктура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10416" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10416"><a href="https://otus.ru/categories/information-security-courses/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Безопасность<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10417" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10417"><a href="https://otus.ru/categories/data-science/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Data Science<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10418" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10418"><a href="https://otus.ru/categories/gamedev/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">GameDev<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10419" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10419"><a href="https://otus.ru/categories/marketing-business/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Управление<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10420" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10420"><a href="https://otus.ru/categories/analytics/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Аналитика и анализ<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10421" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10421"><a href="https://otus.ru/categories/testing/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Тестирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
</ul></div>			</div>

			</div>
</div>

	
		
	
<div class="main wrap">

	<div class="ts-row cf">
		<div class="col-8 main-content cf">
		
			
				
<article id="post-2877" class="the-post post-2877 post type-post status-publish format-standard has-post-thumbnail category-polza tag-json">
	
	<header class="post-header the-post-header cf">
			
			<div class="post-meta the-post-meta">
		
				
			<span class="post-cat">	
									
		<a href="https://otus.ru/journal/category/polza/" class="category" data-wpel-link="internal">Полезное</a>

					</span>
			
				
		
		<h1 class="post-title">
			Все, что нужно знать о JSON: особенности, описание, первые проект			
		</h1>
		
			
					<a href="https://otus.ru/journal/vse-chto-nuzhno-znat-o-json-osobennosti-opisanie-pervye-proekt/" class="date-link" data-wpel-link="internal"><time class="post-date">4 февраля, 2022</time></a>
				
	</div>

			
	<div class="featured">
	
				
					
			<a href="https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-7.png" class="image-link" data-wpel-link="internal"><img width="770" height="515" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20770%20515%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="attachment-contentberg-main size-contentberg-main lazyload wp-post-image" alt="Все, что нужно знать о JSON: особенности, описание, первые проект" title="Все, что нужно знать о JSON: особенности, описание, первые проект" decoding="async" fetchpriority="high" data-srcset="https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-7-770x515.png 770w, https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-7-300x200.png 300w, https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-7-1024x683.png 1024w, https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-7-150x100.png 150w, https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-7-270x180.png 270w" data-src="https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-7-770x515.png" data-sizes="(max-width: 770px) 100vw, 770px" />			</a>
			
				
	</div>
		
	</header><!-- .post-header -->

				
		
		<div class="post-content description cf entry-content content-normal">


			<div id="ez-toc-container" class="ez-toc-v2_0_61 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction">
<div class="ez-toc-title-container">
<p class="ez-toc-title " >Содержание</p>
<span class="ez-toc-title-toggle"><a href="#" class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" aria-label="Toggle Table of Content"><span class="ez-toc-js-icon-con"><span class=""><span class="eztoc-hide" style="display:none;">Toggle</span><span class="ez-toc-icon-toggle-span"><svg style="fill: #999;color:#999" xmlns="http://www.w3.org/2000/svg" class="list-377408" width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill="currentColor"></path></svg><svg style="fill: #999;color:#999" class="arrow-unsorted-368013" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 24 24" version="1.2" baseProfile="tiny"><path d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></span></a></span></div>
<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-1" href="#%D0%A7%D1%82%D0%BE_%D1%8D%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5" title="Что это такое">Что это такое</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-2" href="#%D0%9F%D1%80%D0%B5%D0%B8%D0%BC%D1%83%D1%89%D0%B5%D1%81%D1%82%D0%B2%D0%B0" title="Преимущества">Преимущества</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-3" href="#%D0%9E%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D0%B8_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F" title="Области применения">Области применения</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-4" href="#%D0%9D%D0%B5%D1%81%D0%BA%D0%BE%D0%BB%D1%8C%D0%BA%D0%BE_%D1%81%D0%BB%D0%BE%D0%B2_%D0%BE_%D1%85%D0%B0%D1%80%D0%B0%D0%BA%D1%82%D0%B5%D1%80%D0%B8%D1%81%D1%82%D0%B8%D0%BA%D0%B0%D1%85" title="Несколько слов о характеристиках">Несколько слов о характеристиках</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-5" href="#%D0%A1%D0%B8%D0%BD%D1%82%D0%B0%D0%BA%D1%81%D0%B8%D1%81" title="Синтаксис">Синтаксис</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-6" href="#%D0%A2%D0%B8%D0%BF%D1%8B_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85" title="Типы данных">Типы данных</a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-7" href="#%D0%9D%D0%B5%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1_%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D0%B0%D1%85" title="Немного об объектах">Немного об объектах</a></li></ul></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-8" href="#%D0%9A%D0%B0%D0%BA_%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D1%8C_%D1%81%D1%82%D1%80%D0%BE%D0%BA%D1%83" title="Как создать строку">Как создать строку</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-9" href="#%D0%9D%D0%B0%D0%B3%D0%BB%D1%8F%D0%B4%D0%BD%D1%8B%D0%B9_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80" title="Наглядный пример">Наглядный пример</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-10" href="#%D0%A1%D1%80%D0%B0%D0%B2%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_JSON_%D1%81_XML" title="Сравнение JSON с XML">Сравнение JSON с XML</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-11" href="#%D0%A0%D0%B0%D0%B1%D0%BE%D1%82%D0%B0_%D1%87%D0%B5%D1%80%D0%B5%D0%B7_JS" title="Работа через JS">Работа через JS</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-12" href="#%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B8_%D1%87%D1%82%D0%B5%D0%BD%D0%B8%D0%B5_%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%82%D0%B0" title="Создание и чтение формата">Создание и чтение формата</a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-13" href="#%D0%98%D0%B7_%D0%BF%D0%B5%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D0%BE%D0%B9" title="Из переменной">Из переменной</a></li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-14" href="#%D0%98%D0%B7_%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B8" title="Из строки">Из строки</a></li></ul></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-15" href="#%D0%9A%D0%B0%D0%BA_%D0%B1%D1%8B%D1%82%D1%8C_%D1%81_%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B5%D0%B9" title="Как быть с анимацией">Как быть с анимацией</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-16" href="#LottieFiles" title="LottieFiles">LottieFiles</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-17" href="#%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE" title="Начало">Начало</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-18" href="#%D0%9D%D0%B0_%D1%87%D0%B5%D0%BC_%D1%81%D0%BA%D0%BE%D0%BD%D1%86%D0%B5%D0%BD%D1%82%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D1%82%D1%8C%D1%81%D1%8F" title="На чем сконцентрироваться">На чем сконцентрироваться</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-19" href="#%D0%9D%D0%B5%D0%BF%D0%BE%D1%81%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B2%D0%B5%D0%BD%D0%BD%D0%B0%D1%8F_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0" title="Непосредственная работа">Непосредственная работа</a></li></ul></li></ul></nav></div>

<p>JSON – объект, о котором слышали многие разработчики. Но на первых порах данная аббревиатура остается загадкой. Работать с ней при наличии определенных навыков достаточно легко.</p>



<p>Данный объект широко распространен в анимации. Помогает внедрять оную на веб-странички. Далее будут рассмотрены основы JSON, а также приведен пример первого проекта с анимацией в After Effeсts и Лотти.</p>



<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A7%D1%82%D0%BE_%D1%8D%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5"></span>Что это такое<span class="ez-toc-section-end"></span></h2>



<p>JSON – объект JavaScript. Своеобразный метод хранения и передачи информации структурированного характера. За счет элементарного синтаксиса позволяет сохранять все, что угодно:</p>



<ul><li>строки;</li><li>массивы;</li><li>числа;</li><li>те или иные объекты.</li></ul>



<p>Перечисленные элементы будут представлены в текстовом формате. JSON является простейшим для понимания открытым стандартом. Соглашения из него известны не только тем программерам, которые на практике применяют JS. Другие языки тоже сталкиваются с рассматриваемым стандартом.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B5%D0%B8%D0%BC%D1%83%D1%89%D0%B5%D1%81%D1%82%D0%B2%D0%B0"></span>Преимущества<span class="ez-toc-section-end"></span></h3>



<p>JSON обладает рядом преимуществ. К ним относят:</p>



<ul><li>компактность;</li><li>простое чтение предложений, написанных подобным образом – актуально и для машины, и для человека;</li><li>легкость преобразования в структуры данных для разнообразных языков программирования;</li><li>наличие у большинства языков программирования функций и библиотек, которые помогут создавать и читать структуры JSON.</li></ul>



<p>В основе работы оного лежит способ определения объектов и массивов. Данный процесс проходит на создание массивов ассоциативного типа в других языках программирования.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9E%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D0%B8_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F"></span>Области применения<span class="ez-toc-section-end"></span></h3>



<p>Работа с JSON осуществляется далеко не всегда. Существуют различные сферы и задачи, где данная «технология» применяется весьма активно.</p>



<p>Стандарт используется в следующих случаях:</p>



<ul><li>во время создания приложений на JS, включающие в себя расширения браузеров и веб-странички;</li><li>когда нужно сериализировать или передач структурированную информацию по сети;</li><li>если возникает необходимость в обмене информацией между серверами и веб-утилитами;</li><li>при написании web-сервисов и API, чтобы предоставить пользователю доступ к общим данным.</li></ul>



<p>Также он имеет место при работе с анимацией в браузерах и на страничках в интернете. Может быть задействован для того, чтобы отправлять информацию от интернет-обозревателей на сервера. Делается это через передачу строчки JSON в виде параметра запросов POST или GET.</p>



<p>Внимание: предложенный последний пример не слишком популярен. Для описанной ситуации программеры чаще пользуются запросами AJAX. Этот прием помогает упростить первоначальную запись.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9D%D0%B5%D1%81%D0%BA%D0%BE%D0%BB%D1%8C%D0%BA%D0%BE_%D1%81%D0%BB%D0%BE%D0%B2_%D0%BE_%D1%85%D0%B0%D1%80%D0%B0%D0%BA%D1%82%D0%B5%D1%80%D0%B8%D1%81%D1%82%D0%B8%D0%BA%D0%B0%D1%85"></span>Несколько слов о характеристиках<span class="ez-toc-section-end"></span></h3>



<p>Данные JSON обладают конкретными характеристиками. Их частично можно отнести к преимуществам:</p>



<ul><li>простое чтение и составление;</li><li>возможность представления сложных объектов в виде текста;</li><li>отсутствие зависимостей от используемых языков;</li><li>легкий формат обмена, основанный на текстовых сведениях.</li></ul>



<p>Но для того, чтобы использовать JSON, нужно уточнить его синтаксис. Из всего вышесказанного следует – затруднений данный процесс не вызовет.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A1%D0%B8%D0%BD%D1%82%D0%B0%D0%BA%D1%81%D0%B8%D1%81"></span>Синтаксис<span class="ez-toc-section-end"></span></h3>



<p>Преимущественно рассматривается в качестве подмножества синтаксиса JS. Включает в себя следующие особенности:</p>



<ul><li>информация представляется в сочетании «имя/значение»;</li><li>фигурные скобки применяются для хранения объекта;</li><li>после объекта пишется двоеточие;</li><li>чтобы разделить пару «имя/значение», необходимо поставить запятую;</li><li>квадратные скобки отвечают за массивы, значения который также разделяются запятой.</li></ul>



<p>Здесь имеется поддержка двух структур электронных материалов:</p>



<ol type="1"><li>Коллекция пар «имя/значение». Поддерживается большинством языков программирования.</li><li>Упорядоченные списки значений. Предусматривают включение массивов, списков, векторов, последовательностей и иных «сложных» объектов.</li></ol>



<figure class="wp-block-image size-large"><img decoding="async" width="420" height="275" src="https://otus.ru/journal/wp-content/uploads/2022/02/1-6.jpg" alt="Все, что нужно знать о JSON: особенности, описание, первые проект" class="wp-image-2879" srcset="https://otus.ru/journal/wp-content/uploads/2022/02/1-6.jpg 420w, https://otus.ru/journal/wp-content/uploads/2022/02/1-6-300x196.jpg 300w, https://otus.ru/journal/wp-content/uploads/2022/02/1-6-150x98.jpg 150w" sizes="(max-width: 420px) 100vw, 420px" /></figure>



<p>Выше приведен простой пример JSON.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A2%D0%B8%D0%BF%D1%8B_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85"></span>Типы данных<span class="ez-toc-section-end"></span></h3>



<p>Формат JSON обладает поддержкой разнообразных типов информации. Разобраться в них поможет табличка, представленная ниже.</p>



<figure class="wp-block-table"><table><tbody><tr><td>Тип</td><td>Описание</td></tr><tr><td>Число</td><td>С плавающей точкой двойной точности в JS.</td></tr><tr><td>Строка</td><td>Unicode, содержащий двойные кавычки и обратную косую черту.</td></tr><tr><td>Логический</td><td>True/False.</td></tr><tr><td>Массив</td><td>Последовательность значений упорядоченного характера.</td></tr><tr><td>Значение</td><td>Строка, число, истина, ложь, нуль и так далее.</td></tr><tr><td>Объект</td><td>Набор пар «ключ:значение» неупорядоченного характера.</td></tr><tr><td>Пробел</td><td>Применяется между несколькими парами токенов.</td></tr><tr><td>Ноль (null)</td><td>Обозначение пустоты.</td></tr></tbody></table></figure>



<p>Особое внимание рекомендуется уделить объектам JSONobject. Для того, чтобы применять оные, важно запомнить несколько ключевых правил.</p>



<h4 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9D%D0%B5%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1_%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D0%B0%D1%85"></span>Немного об объектах<span class="ez-toc-section-end"></span></h4>



<p>Объект в рассматриваемой «методике» предусматривает следующие особенности:</p>



<ul><li>заключаются в фигурные скобки;</li><li>после каждого имени проставляется двоеточие;</li><li>пара «ключ/значение» делится запятой;</li><li>ключ должен выступать в виде строки;</li><li>каждый ключ отличается друг от друга;</li><li>используется тогда, когда имена ключей – это произвольные строки.</li></ul>



<figure class="wp-block-image size-large"><img decoding="async" width="218" height="27" src="https://otus.ru/journal/wp-content/uploads/2022/02/2-6.jpg" alt="Все, что нужно знать о JSON: особенности, описание, первые проект" class="wp-image-2880" srcset="https://otus.ru/journal/wp-content/uploads/2022/02/2-6.jpg 218w, https://otus.ru/journal/wp-content/uploads/2022/02/2-6-150x19.jpg 150w" sizes="(max-width: 218px) 100vw, 218px" /></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="167" height="83" src="https://otus.ru/journal/wp-content/uploads/2022/02/3-5.jpg" alt="Все, что нужно знать о JSON: особенности, описание, первые проект" class="wp-image-2881" srcset="https://otus.ru/journal/wp-content/uploads/2022/02/3-5.jpg 167w, https://otus.ru/journal/wp-content/uploads/2022/02/3-5-150x75.jpg 150w" sizes="(max-width: 167px) 100vw, 167px" /></figure>



<p>Выше представлен синтаксис объекта, а также простой пример оного.</p>



<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9A%D0%B0%D0%BA_%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D1%8C_%D1%81%D1%82%D1%80%D0%BE%D0%BA%D1%83"></span>Как создать строку<span class="ez-toc-section-end"></span></h2>



<p>Для использования строчек JSON сначала необходимо создать их. Это простой процесс, но перед его воплощением в жизнь требуется запомнить несколько правил:</p>



<ul><li>строка включает в себя массив значений или объект;</li><li>массив пишется в квадратных скобках;</li><li>объект прописывается в фигурных скобках;</li><li>для включения двойных кавычек в строчку, нужно использовать символ «\».</li></ul>



<p>Допускается применение hex закодированных символов. Осуществляется соответствующая операция точно так же, как и в других языках.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9D%D0%B0%D0%B3%D0%BB%D1%8F%D0%B4%D0%BD%D1%8B%D0%B9_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80"></span>Наглядный пример<span class="ez-toc-section-end"></span></h3>



<p>Файлы JSON можно использовать для анимации и иных сложных объектов. Но в первую очередь требуется освоить работу со строками. Предложенные коды ниже – это наглядные примеры рассматриваемого элемента.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="425" height="283" src="https://otus.ru/journal/wp-content/uploads/2022/02/4-5.jpg" alt="Все, что нужно знать о JSON: особенности, описание, первые проект" class="wp-image-2882" srcset="https://otus.ru/journal/wp-content/uploads/2022/02/4-5.jpg 425w, https://otus.ru/journal/wp-content/uploads/2022/02/4-5-300x200.jpg 300w, https://otus.ru/journal/wp-content/uploads/2022/02/4-5-150x100.jpg 150w, https://otus.ru/journal/wp-content/uploads/2022/02/4-5-270x180.jpg 270w, https://otus.ru/journal/wp-content/uploads/2022/02/4-5-370x245.jpg 370w" sizes="(max-width: 425px) 100vw, 425px" /></figure>



<p>Мало создать строку JSON – ее требуется грамотно прочесть. В рассмотренном примере:</p>



<ol type="1"><li>В самом начале проставляются фигурные одинарные скобки. Они указывают на то, что работать предстоит с объектом.</li><li>Внутри объекта расположены несколько пар «имя/значение».</li><li>“orderID”: 12345 – поле с именем ordered, а также присвоенным значением 12345.</li><li>“shopperName”: “John Smith” – поле «ШопперНейм» и значение «Джон Смит» (на английском).</li><li>“shopperEmail”: johnsmith@example.com – аналогично предыдущему способу хранения информации о покупателе, а именно здесь публикуется электронный ящик.</li><li>“contetnts”:[…] – полет contents, значением которого выступает указанный массив.</li><li>“orderCompleted”: true – поле «ОрдерКомплитед» со значением «истина».</li><li>В массиве contents расположены два объекта, отвечающие за отображение содержимого корзинки.</li></ol>



<p>Этот вариант подходит для демонстрации того, как сохранять в корзине информацию из интернет-магазина. Весьма распространенный и популярный прием.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="370" height="322" src="https://otus.ru/journal/wp-content/uploads/2022/02/5-4.jpg" alt="Все, что нужно знать о JSON: особенности, описание, первые проект" class="wp-image-2883" srcset="https://otus.ru/journal/wp-content/uploads/2022/02/5-4.jpg 370w, https://otus.ru/journal/wp-content/uploads/2022/02/5-4-300x261.jpg 300w, https://otus.ru/journal/wp-content/uploads/2022/02/5-4-150x131.jpg 150w" sizes="(max-width: 370px) 100vw, 370px" /></figure>



<p>Формат данных JSON совпадает с объектами в JS. Это позволяет переделать предыдущий скрипт. То, как будет выглядеть код объекта JacaScript, указано выше.</p>



<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A1%D1%80%D0%B0%D0%B2%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_JSON_%D1%81_XML"></span>Сравнение JSON с XML<span class="ez-toc-section-end"></span></h2>



<p>Примеры JSON можно рассматривать бесконечно долго. На основе предложенного варианта стоит провести сравнение с XML.</p>



<p>Разработчики используют изучаемый формат в качестве альтернативного подхода в программировании. На то существуют собственные причины:</p>



<ul><li>JSON за последние годы набрал популярность в качестве средства передачи AJAX информации;</li><li>XML обладает большим объемом по сравнению с «ДжейСон»;</li><li>чтение JSON более простое, нежели у XML.</li></ul>



<p>Чтобы убедиться в сказанном, можно добавить ранее изученный наглядный пример кодификации. Если создать его с помощью XML, код будет выглядеть так:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="386" height="601" src="https://otus.ru/journal/wp-content/uploads/2022/02/6-3.jpg" alt="Все, что нужно знать о JSON: особенности, описание, первые проект" class="wp-image-2884" srcset="https://otus.ru/journal/wp-content/uploads/2022/02/6-3.jpg 386w, https://otus.ru/journal/wp-content/uploads/2022/02/6-3-193x300.jpg 193w, https://otus.ru/journal/wp-content/uploads/2022/02/6-3-96x150.jpg 96w" sizes="(max-width: 386px) 100vw, 386px" /></figure>



<p>По итогу вместо 323 символов исходная кодификация заняла 1128. Чтение тоже будет сложнее.</p>



<p>Внимание: рекомендуется отдавать предпочтение формату JSON при программировании.</p>



<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A0%D0%B0%D0%B1%D0%BE%D1%82%D0%B0_%D1%87%D0%B5%D1%80%D0%B5%D0%B7_JS"></span>Работа через JS<span class="ez-toc-section-end"></span></h2>



<p>Теперь можно подойти к самому ответственному моменту – к работе с форматом JSON в различных языках программирования. А именно – в JS. Информация, представленная далее, идеально подойдет для начинающих путь в разработку.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B8_%D1%87%D1%82%D0%B5%D0%BD%D0%B8%D0%B5_%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%82%D0%B0"></span>Создание и чтение формата<span class="ez-toc-section-end"></span></h3>



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



<p>Вот общие принципы упомянутых процессов:</p>



<ol type="1"><li>Строки создаются при условии, что разработчик начинает внедрять переменные. Последние обладают теми или иными значениями. Далее происходит пропуск через функции, которые помогают переделывать информацию в строчку.</li><li>Чтение начинается со строки JSON, которая обладает теми или иными сведениями. Нужно осуществить пропуск string через функцию, которая отвечает за создание переменных, содержащих электронные материалы.</li></ol>



<p>Далее представлены наглядные примеры того, как операции происходят в JS</p>



<h4 class="wp-block-heading"><span class="ez-toc-section" id="%D0%98%D0%B7_%D0%BF%D0%B5%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D0%BE%D0%B9"></span>Из переменной<span class="ez-toc-section-end"></span></h4>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="412" height="308" src="https://otus.ru/journal/wp-content/uploads/2022/02/7-4.jpg" alt="Все, что нужно знать о JSON: особенности, описание, первые проект" class="wp-image-2885" srcset="https://otus.ru/journal/wp-content/uploads/2022/02/7-4.jpg 412w, https://otus.ru/journal/wp-content/uploads/2022/02/7-4-300x224.jpg 300w, https://otus.ru/journal/wp-content/uploads/2022/02/7-4-150x112.jpg 150w" sizes="(max-width: 412px) 100vw, 412px" /></figure>



<p>У JS имеется встроенный метод JSON.stringify(). Он принимает переменную JavaScript, а затем возвращает строчку JSON, репрезентируя содержимое оной. Strings выводятся без пробелов.</p>



<h4 class="wp-block-heading"><span class="ez-toc-section" id="%D0%98%D0%B7_%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B8"></span>Из строки<span class="ez-toc-section-end"></span></h4>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="378" height="364" src="https://otus.ru/journal/wp-content/uploads/2022/02/8-4.jpg" alt="Все, что нужно знать о JSON: особенности, описание, первые проект" class="wp-image-2886" srcset="https://otus.ru/journal/wp-content/uploads/2022/02/8-4.jpg 378w, https://otus.ru/journal/wp-content/uploads/2022/02/8-4-300x289.jpg 300w, https://otus.ru/journal/wp-content/uploads/2022/02/8-4-150x144.jpg 150w" sizes="(max-width: 378px) 100vw, 378px" /></figure>



<p>А вот парсинг строк. Существуют различные варианты решения поставленной задачи, но лучше всего применять JSON.parse(). Он выделяется безопасностью и надежность. Принимает «ДжейСОН» строчку и преобразовывает ее в объект/массив Джавы и «исходными электронными материалами».</p>



<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9A%D0%B0%D0%BA_%D0%B1%D1%8B%D1%82%D1%8C_%D1%81_%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B5%D0%B9"></span>Как быть с анимацией<span class="ez-toc-section-end"></span></h2>



<p>Анимированные объекты на веб-страницах – это не такая большая редкость. Они встречаются очень часто. И одного предложенного примера недостаточно для полного понимания принципов работы JSON.</p>



<p>Лучше всего использовать для реализации поставленной задачи Lottie. Данным способом можно производить экспорт анимационных объектов без потери качества. В процессе будет задействован After Effects.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="LottieFiles"></span>LottieFiles<span class="ez-toc-section-end"></span></h3>



<p>Так называют независимую платформу от Aitbnb, предусмотренную для дизайнеров. С ее помощью можно осуществлять с анимацией различные действия:</p>



<ul><li>тестировать;</li><li>загружать;</li><li>приобретать;</li><li>выгружать.</li></ul>



<p>Также здесь предусматривается совмещение с After Effects. Работать подобным образом достаточно легко.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE"></span>Начало<span class="ez-toc-section-end"></span></h3>



<p>В первую очередь требуется провести предварительную подготовку. А именно:</p>



<ul><li>установить на устройство плагин для дальнейшей работы;</li><li>использовать LottieFile или Bodymovin;</li><li>создать анимацию – в примере им будет дрон с лопастями, которые вращаются;</li><li>импортировать в слои файлы Illustrator;</li><li>создать спиральные 3D-слои и повернуть их;</li><li>перед применением 3D-слоев удостовериться в поддержки таковых.</li></ul>



<p>Иными словами, сначала анимированная картинка (объект) для страницы в интернете должна быть создана. После этого будет производиться выгрузка примера в JSON.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9D%D0%B0_%D1%87%D0%B5%D0%BC_%D1%81%D0%BA%D0%BE%D0%BD%D1%86%D0%B5%D0%BD%D1%82%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D1%82%D1%8C%D1%81%D1%8F"></span>На чем сконцентрироваться<span class="ez-toc-section-end"></span></h3>



<p>Процесс создания анимационных объектов для интернета не является самым сложным. Он чем-то напоминает создание обычного видео. Во внимание принимаются параметры настройки и форматирования. О них ранее разработчики могли даже не задумываться.</p>



<p>В Lottie рекомендуется учесть следующие моменты:</p>



<ol type="1"><li>Файлы «Джейсон» должны в итоге оказаться максимально компактными. Особенно тогда, когда речь идет о мобильных продуктах.</li><li>Чтобы создавать анимацию в Lottie, рекомендуется максимально изучить After Effect. Это позволит избежать наличия лишних ключевых кадров.</li><li>Постараться отказаться от применения ключевых кадров пути. Данный момент требует создания большого документа из преобразования всей вершины.</li><li>Рекомендуется отказаться от покачиваний, автоматической трассировки и похожих методов. Связано это с большим количеством ключевых кадров, что отражается на производительности.</li><li>Слои Illustrator, EPS, PDF или SVG преобразовываются для формирования слоев в After Effects. Иначе это поспособствует возникновению ошибки.</li><li>Выражение и эффекты в Lottie пока не поддерживаются.</li><li>Стили слоев тоже не имеют поддержки.</li><li>Некоторые режимы наложения не поддерживаются. Они не видны даже через Luma.</li></ol>



<p>Все это позволит создать animations без особых затруднений.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9D%D0%B5%D0%BF%D0%BE%D1%81%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B2%D0%B5%D0%BD%D0%BD%D0%B0%D1%8F_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0"></span>Непосредственная работа<span class="ez-toc-section-end"></span></h3>



<p>Теперь, когда все готово, можно приступать к работе:</p>



<ol type="1"><li>Запустить After Effect и созданную ранее анимацию.</li><li>Произвести импорт слоев, после – выбрать их все.</li><li>Кликнуть ПКМ и выбрать «Создать»-«Создание фигуры из векторных…».</li><li>Удалить AI-файлы.</li><li>Провести симуляцию вращения путем анимирования размера в X (ширины).</li><li>Создать нулевой объект, который будет отвечать за перемещение всего логотипа.</li><li>Нулевой объект сделать видимым, сделать 0% прозрачности. Тогда все будет работать.</li><li>Перейти в «Окно»-«Расширение»-«LottieFiles».</li><li>Открыть окно для просмотра animation и ее загрузки в Lottie-файл. Для реализации поставленной задачи требуется Лотти-аккаунт.</li></ol>



<p>По <a href="https://vc.ru/design/122151-animacii-v-after-effects-i-lottie-bez-poteri-kachestva" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">ссылке<span class="wpel-icon wpel-image wpel-icon-6"></span></a> можно найти скрины проделанной работы. А для того, чтобы лучше разбираться в изученной теме, рекомендуется пройти дистанционные онлайн курсы «JSON для начинающих».</p>



<p><em>Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в <a href="https://otus.ru/?utm_source=oj" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Otus<span class="wpel-icon wpel-image wpel-icon-6"></span></a>!</em></p>
				
		</div><!-- .post-content -->
		
		<div class="the-post-foot cf">
		
						
			<div class="tag-share cf">
				
									<div class="post-tags"><a href="https://otus.ru/journal/tag/json/" rel="tag" data-wpel-link="internal">JSON</a></div>				
											<div class="post-share">
					
						
			<div class="post-share-icons cf">
			
				<span class="counters">

										
				</span>

								
					<a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fotus.ru%2Fjournal%2Fvse-chto-nuzhno-znat-o-json-osobennosti-opisanie-pervye-proekt%2F" class="link facebook wpel-icon-right" target="_blank" title="Share on Facebook" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-facebook"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
						
								
					<a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fvse-chto-nuzhno-znat-o-json-osobennosti-opisanie-pervye-proekt%2F&#038;text=%D0%92%D1%81%D0%B5%2C%20%D1%87%D1%82%D0%BE%20%D0%BD%D1%83%D0%B6%D0%BD%D0%BE%20%D0%B7%D0%BD%D0%B0%D1%82%D1%8C%20%D0%BE%20JSON%3A%20%D0%BE%D1%81%D0%BE%D0%B1%D0%B5%D0%BD%D0%BD%D0%BE%D1%81%D1%82%D0%B8%2C%20%D0%BE%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5%2C%20%D0%BF%D0%B5%D1%80%D0%B2%D1%8B%D0%B5%20%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82" class="link twitter wpel-icon-right" target="_blank" title="Share on Twitter" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-twitter"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
						
								
					<a href="https://www.linkedin.com/shareArticle?mini=true&#038;url=https%3A%2F%2Fotus.ru%2Fjournal%2Fvse-chto-nuzhno-znat-o-json-osobennosti-opisanie-pervye-proekt%2F" class="link linkedin wpel-icon-right" target="_blank" title="LinkedIn" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-linkedin"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
						
								
					<a href="https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fvse-chto-nuzhno-znat-o-json-osobennosti-opisanie-pervye-proekt%2F&#038;media=https%3A%2F%2Fotus.ru%2Fjournal%2Fwp-content%2Fuploads%2F2022%2F02%2Foj-1080x720-7.png&#038;description=%D0%92%D1%81%D0%B5%2C%20%D1%87%D1%82%D0%BE%20%D0%BD%D1%83%D0%B6%D0%BD%D0%BE%20%D0%B7%D0%BD%D0%B0%D1%82%D1%8C%20%D0%BE%20JSON%3A%20%D0%BE%D1%81%D0%BE%D0%B1%D0%B5%D0%BD%D0%BD%D0%BE%D1%81%D1%82%D0%B8%2C%20%D0%BE%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5%2C%20%D0%BF%D0%B5%D1%80%D0%B2%D1%8B%D0%B5%20%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82" class="link pinterest wpel-icon-right" target="_blank" title="Pinterest" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-pinterest-p"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
						
									
								
			</div>
			
						
		</div>									
			</div>

			
		</div>
		
				
		
		
<div class="post-nav">


	<div class="post previous cf">
		<a href="https://otus.ru/journal/tehnologii-jsp-opisanie-osobennosti-ispolzovanie/" title="Prev Post" class="nav-icon" data-wpel-link="internal">
			<i class="fa fa-angle-left"></i>
		</a>
		
		<span class="content">
			
			<a href="https://otus.ru/journal/tehnologii-jsp-opisanie-osobennosti-ispolzovanie/" class="image-link" rel="previous" data-wpel-link="internal">
				<img width="150" height="100" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20150%20100%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="attachment-thumbnail size-thumbnail lazyload wp-post-image" alt="Технологии JSP: описание, особенности, использование" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-6-150x100.png 150w, https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-6-300x200.png 300w, https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-6-1024x683.png 1024w, https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-6-768x512.png 768w, https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-6-270x180.png 270w, https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-6-770x515.png 770w, https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-6-370x245.png 370w, https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-6.png 1080w" data-src="https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-6-150x100.png" data-sizes="(max-width: 150px) 100vw, 150px" title="Технологии JSP: описание, особенности, использование" />			</a>
			
			<div class="post-meta">
				<span class="label">Prev Post</span>
			
					<div class="post-meta post-meta-b">
		
			
		
					
			
			<h2 class="post-title">
							
					<a href="https://otus.ru/journal/tehnologii-jsp-opisanie-osobennosti-ispolzovanie/" data-wpel-link="internal">Технологии JSP: описание, особенности, использование</a>
					
							</h2>
			
				
		<div class="below">
		
							<a href="https://otus.ru/journal/tehnologii-jsp-opisanie-osobennosti-ispolzovanie/" class="meta-item date-link" data-wpel-link="internal"><time class="post-date" datetime="2022-02-03T19:25:52+00:00">3 февраля, 2022</time></a>

				<span class="meta-sep"></span>
						
			
							<span class="meta-item read-time">9 Mins Read</span>
					
		</div>
		
	</div>			</div>
		</span>
	</div>
		
	


	<div class="post next cf">
		<a href="https://otus.ru/journal/kak-stat-testirovshhikom-i-chto-takoe-juzabiliti/" title="Next Post" class="nav-icon" data-wpel-link="internal">
			<i class="fa fa-angle-right"></i>
		</a>
		
		<span class="content">
			
			<a href="https://otus.ru/journal/kak-stat-testirovshhikom-i-chto-takoe-juzabiliti/" class="image-link" rel="next" data-wpel-link="internal">
				<img width="150" height="100" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20150%20100%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="attachment-thumbnail size-thumbnail lazyload wp-post-image" alt="Как стать тестировщиком, и что такое юзабилити" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-8-150x100.png 150w, https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-8-300x200.png 300w, https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-8-1024x683.png 1024w, https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-8-768x512.png 768w, https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-8-270x180.png 270w, https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-8-770x515.png 770w, https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-8-370x245.png 370w, https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-8.png 1080w" data-src="https://otus.ru/journal/wp-content/uploads/2022/02/oj-1080x720-8-150x100.png" data-sizes="(max-width: 150px) 100vw, 150px" title="Как стать тестировщиком, и что такое юзабилити" />			</a>
			
			<div class="post-meta">
				<span class="label">Next Post</span>
				
					<div class="post-meta post-meta-b">
		
			
		
					
			
			<h2 class="post-title">
							
					<a href="https://otus.ru/journal/kak-stat-testirovshhikom-i-chto-takoe-juzabiliti/" data-wpel-link="internal">Как стать тестировщиком, и что такое юзабилити</a>
					
							</h2>
			
				
		<div class="below">
		
							<a href="https://otus.ru/journal/kak-stat-testirovshhikom-i-chto-takoe-juzabiliti/" class="meta-item date-link" data-wpel-link="internal"><time class="post-date" datetime="2022-02-04T17:57:15+00:00">4 февраля, 2022</time></a>

				<span class="meta-sep"></span>
						
			
							<span class="meta-item read-time">9 Mins Read</span>
					
		</div>
		
	</div>			</div>
		</span>
	</div>
		
	
</div>		
		

<section class="related-posts grid-3">

	<h4 class="section-head"><span class="title">Читать ещё</span></h4> 
	
	<div class="ts-row posts cf">
	
			<article class="post col-4">
					
			<a href="https://otus.ru/journal/uroven-gotovnosti-cto-k-2026/" title="Уровень готовности CTO к 2026" class="image-link" data-wpel-link="internal">
				<img width="270" height="180" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20270%20180%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="image lazyload wp-post-image" alt="Уровень готовности CTO к 2026" title="Уровень готовности CTO к 2026" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-270x180.jpg 270w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-770x515.jpg 770w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-370x245.jpg 370w" data-src="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-270x180.jpg" data-sizes="(max-width: 270px) 100vw, 270px" />			</a>
			
			<div class="content">
				
				<h3 class="post-title"><a href="https://otus.ru/journal/uroven-gotovnosti-cto-k-2026/" class="post-link" data-wpel-link="internal">Уровень готовности CTO к 2026</a></h3>

				<div class="post-meta">
					<time class="post-date" datetime="2025-11-16T19:50:59+00:00">16 ноября, 2025</time>
				</div>
			
			</div>

		</article >
		
			<article class="post col-4">
					
			<a href="https://otus.ru/journal/novye-uroki-noyabrya-tolko-top-temy-po-programmirovaniju/" title="Новые уроки ноября: только топ-темы по программированию" class="image-link" data-wpel-link="internal">
				<img width="270" height="180" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20270%20180%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="image lazyload wp-post-image" alt="Новые уроки ноября: только топ-темы по программированию" title="Новые уроки ноября: только топ-темы по программированию" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-270x180.jpg 270w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-770x515.jpg 770w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-370x245.jpg 370w" data-src="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-270x180.jpg" data-sizes="(max-width: 270px) 100vw, 270px" />			</a>
			
			<div class="content">
				
				<h3 class="post-title"><a href="https://otus.ru/journal/novye-uroki-noyabrya-tolko-top-temy-po-programmirovaniju/" class="post-link" data-wpel-link="internal">Новые уроки ноября: только топ-темы по программированию</a></h3>

				<div class="post-meta">
					<time class="post-date" datetime="2025-11-09T23:24:11+00:00">9 ноября, 2025</time>
				</div>
			
			</div>

		</article >
		
			<article class="post col-4">
					
			<a href="https://otus.ru/journal/schjot-idjot-na-chasy/" title="Счёт идёт на часы" class="image-link" data-wpel-link="internal">
				<img width="270" height="180" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20270%20180%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="image lazyload wp-post-image" alt="Счёт идёт на часы" title="Счёт идёт на часы" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-270x180.png 270w, https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-770x515.png 770w, https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-370x245.png 370w" data-src="https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-270x180.png" data-sizes="(max-width: 270px) 100vw, 270px" />			</a>
			
			<div class="content">
				
				<h3 class="post-title"><a href="https://otus.ru/journal/schjot-idjot-na-chasy/" class="post-link" data-wpel-link="internal">Счёт идёт на часы</a></h3>

				<div class="post-meta">
					<time class="post-date" datetime="2025-10-30T15:04:59+00:00">30 октября, 2025</time>
				</div>
			
			</div>

		</article >
		
		
	</div>
	
</section>

		
				
</article> <!-- .the-post -->	
			
		</div>
		
		<aside class="col-4 sidebar">

	<div class="inner">

					<ul>
				<li id="search-2" class="widget widget_search"><h5 class="widget-title"><span>Поиск по блогу</span></h5>
	
	<form method="get" class="search-form" action="https://otus.ru/journal/">
		<label>
			<span class="screen-reader-text">Search for:</span>
			<input type="search" class="search-field" placeholder="Введите запрос и нажмите Enter" value="" name="s" title="Search for:" />
		</label>
		<button type="submit" class="search-submit"><i class="fa fa-search"></i></button>
	</form>

</li>
<li id="tag_cloud-5" class="widget widget_tag_cloud"><h5 class="widget-title"><span>Метки</span></h5><div class="tagcloud"><a href="https://otus.ru/journal/tag/android-2/" class="tag-cloud-link tag-link-74 tag-link-position-1" style="font-size: 12.472222222222pt;" aria-label="Android (34 элемента)" data-wpel-link="internal">Android</a>
<a href="https://otus.ru/journal/tag/c-3/" class="tag-cloud-link tag-link-91 tag-link-position-2" style="font-size: 10.916666666667pt;" aria-label="C (23 элемента)" data-wpel-link="internal">C</a>
<a href="https://otus.ru/journal/tag/c-2/" class="tag-cloud-link tag-link-81 tag-link-position-3" style="font-size: 12.666666666667pt;" aria-label="C# (35 элементов)" data-wpel-link="internal">C#</a>
<a href="https://otus.ru/journal/tag/c/" class="tag-cloud-link tag-link-20 tag-link-position-4" style="font-size: 12.472222222222pt;" aria-label="c++ (34 элемента)" data-wpel-link="internal">c++</a>
<a href="https://otus.ru/journal/tag/computer-science/" class="tag-cloud-link tag-link-209 tag-link-position-5" style="font-size: 15.972222222222pt;" aria-label="computer science (78 элементов)" data-wpel-link="internal">computer science</a>
<a href="https://otus.ru/journal/tag/css/" class="tag-cloud-link tag-link-288 tag-link-position-6" style="font-size: 8.6805555555556pt;" aria-label="CSS (13 элементов)" data-wpel-link="internal">CSS</a>
<a href="https://otus.ru/journal/tag/data-science/" class="tag-cloud-link tag-link-151 tag-link-position-7" style="font-size: 8pt;" aria-label="Data Science (11 элементов)" data-wpel-link="internal">Data Science</a>
<a href="https://otus.ru/journal/tag/devops/" class="tag-cloud-link tag-link-98 tag-link-position-8" style="font-size: 10.138888888889pt;" aria-label="devops (19 элементов)" data-wpel-link="internal">devops</a>
<a href="https://otus.ru/journal/tag/docker/" class="tag-cloud-link tag-link-143 tag-link-position-9" style="font-size: 8.2916666666667pt;" aria-label="Docker (12 элементов)" data-wpel-link="internal">Docker</a>
<a href="https://otus.ru/journal/tag/gamedev/" class="tag-cloud-link tag-link-25 tag-link-position-10" style="font-size: 11.694444444444pt;" aria-label="gamedev (28 элементов)" data-wpel-link="internal">gamedev</a>
<a href="https://otus.ru/journal/tag/hr/" class="tag-cloud-link tag-link-103 tag-link-position-11" style="font-size: 8pt;" aria-label="hr (11 элементов)" data-wpel-link="internal">hr</a>
<a href="https://otus.ru/journal/tag/html/" class="tag-cloud-link tag-link-217 tag-link-position-12" style="font-size: 11.208333333333pt;" aria-label="HTML (25 элементов)" data-wpel-link="internal">HTML</a>
<a href="https://otus.ru/journal/tag/ios/" class="tag-cloud-link tag-link-101 tag-link-position-13" style="font-size: 8.9722222222222pt;" aria-label="iOS (14 элементов)" data-wpel-link="internal">iOS</a>
<a href="https://otus.ru/journal/tag/it/" class="tag-cloud-link tag-link-50 tag-link-position-14" style="font-size: 10.527777777778pt;" aria-label="IT (21 элемент)" data-wpel-link="internal">IT</a>
<a href="https://otus.ru/journal/tag/java/" class="tag-cloud-link tag-link-75 tag-link-position-15" style="font-size: 15.680555555556pt;" aria-label="Java (73 элемента)" data-wpel-link="internal">Java</a>
<a href="https://otus.ru/journal/tag/javascript/" class="tag-cloud-link tag-link-83 tag-link-position-16" style="font-size: 14.319444444444pt;" aria-label="JavaScript (53 элемента)" data-wpel-link="internal">JavaScript</a>
<a href="https://otus.ru/journal/tag/linux/" class="tag-cloud-link tag-link-141 tag-link-position-17" style="font-size: 11.888888888889pt;" aria-label="Linux (29 элементов)" data-wpel-link="internal">Linux</a>
<a href="https://otus.ru/journal/tag/machine-learning/" class="tag-cloud-link tag-link-167 tag-link-position-18" style="font-size: 8.6805555555556pt;" aria-label="Machine Learning (13 элементов)" data-wpel-link="internal">Machine Learning</a>
<a href="https://otus.ru/journal/tag/otus-book/" class="tag-cloud-link tag-link-261 tag-link-position-19" style="font-size: 9.9444444444444pt;" aria-label="otus book (18 элементов)" data-wpel-link="internal">otus book</a>
<a href="https://otus.ru/journal/tag/php/" class="tag-cloud-link tag-link-45 tag-link-position-20" style="font-size: 10.527777777778pt;" aria-label="PHP (21 элемент)" data-wpel-link="internal">PHP</a>
<a href="https://otus.ru/journal/tag/python/" class="tag-cloud-link tag-link-27 tag-link-position-21" style="font-size: 16.944444444444pt;" aria-label="Python (99 элементов)" data-wpel-link="internal">Python</a>
<a href="https://otus.ru/journal/tag/qa/" class="tag-cloud-link tag-link-155 tag-link-position-22" style="font-size: 11.402777777778pt;" aria-label="qa (26 элементов)" data-wpel-link="internal">qa</a>
<a href="https://otus.ru/journal/tag/sql/" class="tag-cloud-link tag-link-38 tag-link-position-23" style="font-size: 12.861111111111pt;" aria-label="SQL (37 элементов)" data-wpel-link="internal">SQL</a>
<a href="https://otus.ru/journal/tag/team-lead/" class="tag-cloud-link tag-link-364 tag-link-position-24" style="font-size: 9.9444444444444pt;" aria-label="team lead (18 элементов)" data-wpel-link="internal">team lead</a>
<a href="https://otus.ru/journal/tag/unity/" class="tag-cloud-link tag-link-24 tag-link-position-25" style="font-size: 8pt;" aria-label="unity (11 элементов)" data-wpel-link="internal">unity</a>
<a href="https://otus.ru/journal/tag/algoritmy/" class="tag-cloud-link tag-link-30 tag-link-position-26" style="font-size: 9.9444444444444pt;" aria-label="Алгоритмы (18 элементов)" data-wpel-link="internal">Алгоритмы</a>
<a href="https://otus.ru/journal/tag/bazy-dannyh/" class="tag-cloud-link tag-link-40 tag-link-position-27" style="font-size: 10.138888888889pt;" aria-label="Базы данных (19 элементов)" data-wpel-link="internal">Базы данных</a>
<a href="https://otus.ru/journal/tag/matematika/" class="tag-cloud-link tag-link-44 tag-link-position-28" style="font-size: 10.916666666667pt;" aria-label="Математика (23 элемента)" data-wpel-link="internal">Математика</a>
<a href="https://otus.ru/journal/tag/arhitektura-po/" class="tag-cloud-link tag-link-10 tag-link-position-29" style="font-size: 9.4583333333333pt;" aria-label="архитектура ПО (16 элементов)" data-wpel-link="internal">архитектура ПО</a>
<a href="https://otus.ru/journal/tag/bazy-dannyh-2/" class="tag-cloud-link tag-link-251 tag-link-position-30" style="font-size: 10.138888888889pt;" aria-label="базы данных (19 элементов)" data-wpel-link="internal">базы данных</a>
<a href="https://otus.ru/journal/tag/vebinar/" class="tag-cloud-link tag-link-201 tag-link-position-31" style="font-size: 13.930555555556pt;" aria-label="вебинар (48 элементов)" data-wpel-link="internal">вебинар</a>
<a href="https://otus.ru/journal/tag/dajdzhest/" class="tag-cloud-link tag-link-308 tag-link-position-32" style="font-size: 10.722222222222pt;" aria-label="дайджест (22 элемента)" data-wpel-link="internal">дайджест</a>
<a href="https://otus.ru/journal/tag/zapis-vebinara/" class="tag-cloud-link tag-link-226 tag-link-position-33" style="font-size: 14.902777777778pt;" aria-label="запись вебинара (61 элемент)" data-wpel-link="internal">запись вебинара</a>
<a href="https://otus.ru/journal/tag/zapis-uroka/" class="tag-cloud-link tag-link-272 tag-link-position-34" style="font-size: 16.069444444444pt;" aria-label="запись урока (80 элементов)" data-wpel-link="internal">запись урока</a>
<a href="https://otus.ru/journal/tag/informacionnaya-bezopasnost/" class="tag-cloud-link tag-link-232 tag-link-position-35" style="font-size: 10.138888888889pt;" aria-label="информационная безопасность (19 элементов)" data-wpel-link="internal">информационная безопасность</a>
<a href="https://otus.ru/journal/tag/karera-v-it/" class="tag-cloud-link tag-link-292 tag-link-position-36" style="font-size: 9.9444444444444pt;" aria-label="карьера в IT (18 элементов)" data-wpel-link="internal">карьера в IT</a>
<a href="https://otus.ru/journal/tag/podborka/" class="tag-cloud-link tag-link-7 tag-link-position-37" style="font-size: 12.666666666667pt;" aria-label="подборка (35 элементов)" data-wpel-link="internal">подборка</a>
<a href="https://otus.ru/journal/tag/podborka-statej/" class="tag-cloud-link tag-link-219 tag-link-position-38" style="font-size: 15.777777777778pt;" aria-label="подборка статей (75 элементов)" data-wpel-link="internal">подборка статей</a>
<a href="https://otus.ru/journal/tag/programmirovanie/" class="tag-cloud-link tag-link-65 tag-link-position-39" style="font-size: 22pt;" aria-label="программирование (332 элемента)" data-wpel-link="internal">программирование</a>
<a href="https://otus.ru/journal/tag/proekt/" class="tag-cloud-link tag-link-321 tag-link-position-40" style="font-size: 11.888888888889pt;" aria-label="проект (29 элементов)" data-wpel-link="internal">проект</a>
<a href="https://otus.ru/journal/tag/proektnaya-rabota/" class="tag-cloud-link tag-link-310 tag-link-position-41" style="font-size: 11.597222222222pt;" aria-label="проектная работа (27 элементов)" data-wpel-link="internal">проектная работа</a>
<a href="https://otus.ru/journal/tag/seti/" class="tag-cloud-link tag-link-181 tag-link-position-42" style="font-size: 12.958333333333pt;" aria-label="сети (38 элементов)" data-wpel-link="internal">сети</a>
<a href="https://otus.ru/journal/tag/testirovanie/" class="tag-cloud-link tag-link-69 tag-link-position-43" style="font-size: 13.930555555556pt;" aria-label="тестирование (48 элементов)" data-wpel-link="internal">тестирование</a>
<a href="https://otus.ru/journal/tag/upravlenie-komandoj/" class="tag-cloud-link tag-link-63 tag-link-position-44" style="font-size: 11.694444444444pt;" aria-label="управление командой (28 элементов)" data-wpel-link="internal">управление командой</a>
<a href="https://otus.ru/journal/tag/habr-2/" class="tag-cloud-link tag-link-203 tag-link-position-45" style="font-size: 13.930555555556pt;" aria-label="хабр (48 элементов)" data-wpel-link="internal">хабр</a></div>
</li>
			</ul>
		
	</div>

	</aside>		
	</div> <!-- .ts-row -->
</div> <!-- .main -->





<footer class="main-footer dark bold">

	

	


	
		<section class="lower-footer cf">
			<div class="wrap">

				
				
					<div class="links">
						<div class="menu-menju-navykov-container"><ul id="menu-menju-navykov-1" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10413"><a href="https://otus.ru/categories/programming/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Программирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10414"><a href="https://otus.ru/categories/architecture/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Архитектура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10415"><a href="https://otus.ru/categories/operations/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Инфраструктура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10416"><a href="https://otus.ru/categories/information-security-courses/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Безопасность<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10417"><a href="https://otus.ru/categories/data-science/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Data Science<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10418"><a href="https://otus.ru/categories/gamedev/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">GameDev<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10419"><a href="https://otus.ru/categories/marketing-business/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Управление<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10420"><a href="https://otus.ru/categories/analytics/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Аналитика и анализ<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10421"><a href="https://otus.ru/categories/testing/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Тестирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
</ul></div>					</div>

				

				<p class="copyright"> © 2015-2026 OTUS				</p>



									<div class="to-top">
						<a href="#" class="back-to-top"><i class="fa fa-angle-up"></i> Top</a>
					</div>
				
			</div>
		</section>

	

</footer>

</div> <!-- .main-wrap -->



<div class="mobile-menu-container off-canvas" id="mobile-menu">

	<a href="#" class="close"><i class="fa fa-times"></i></a>

	<div class="logo">
			</div>

	
		<ul class="mobile-menu"></ul>

	</div>



	<div class="search-modal-wrap">

		<div class="search-modal-box" role="dialog" aria-modal="true">
			

	<form method="get" class="search-form" action="https://otus.ru/journal/">
		<input type="search" class="search-field" name="s" placeholder="Search..." value="" required />

		<button type="submit" class="search-submit visuallyhidden">Submit</button>

		<p class="message">
			Type above and press <em>Enter</em> to search. Press <em>Esc</em> to cancel.		</p>
				
	</form>

		</div>
	</div>


<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/clearfy/components/comments-plus/assets/js/url-span.js" id="wbcr-comments-plus-url-span-js"></script>
<script type="text/javascript" id="ez-toc-scroll-scriptjs-js-extra">
/* <![CDATA[ */
var eztoc_smooth_local = {"scroll_offset":"30"};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/assets/js/smooth_scroll.min.js" id="ez-toc-scroll-scriptjs-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js" id="ez-toc-js-cookie-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js" id="ez-toc-jquery-sticky-kit-js"></script>
<script type="text/javascript" id="ez-toc-js-js-extra">
/* <![CDATA[ */
var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","scroll_offset":"30","fallbackIcon":"<span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span>"};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js" id="ez-toc-js-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/custom-script.js" id="custom-script-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/magnific-popup.js" id="magnific-popup-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/jquery.fitvids.js" id="jquery-fitvids-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/imagesloaded.min.js" id="imagesloaded-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/object-fit-images.js" id="object-fit-images-js"></script>
<script type="text/javascript" id="contentberg-theme-js-extra">
/* <![CDATA[ */
var Bunyad = {"custom_ajax_url":"\/journal\/vse-chto-nuzhno-znat-o-json-osobennosti-opisanie-pervye-proekt\/"};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/theme.js" id="contentberg-theme-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/theia-sticky-sidebar.js" id="theia-sticky-sidebar-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/jquery.slick.js" id="jquery-slick-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/jarallax.js" id="jarallax-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/masonry.min.js" id="masonry-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/jquery/jquery.masonry.min.js" id="jquery-masonry-js"></script>

</body>

</html>
<!-- Cache served by breeze CACHE - Last modified: Tue, 10 Mar 2026 16:19:19 GMT -->