Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

1 <ul><li><a>Что это такое</a><ul><li><a>Преимущества</a></li>

2 <li><a>Области применения</a></li>

3 <li><a>Несколько слов о характеристиках</a></li>

4 <li><a>Синтаксис</a></li>

5 <li><a>Типы данных</a><ul><li><a>Немного об объектах</a></li>

6 </ul></li>

7 </ul></li>

8 <li><a>Как создать строку</a><ul><li><a>Наглядный пример</a></li>

9 </ul></li>

10 <li><a>Сравнение JSON с XML</a></li>

11 <li><a>Работа через JS</a><ul><li><a>Создание и чтение формата</a><ul><li><a>Из переменной</a></li>

12 <li><a>Из строки</a></li>

13 </ul></li>

14 </ul></li>

15 <li><a>Как быть с анимацией</a><ul><li><a>LottieFiles</a></li>

16 <li><a>Начало</a></li>

17 <li><a>На чем сконцентрироваться</a></li>

18 <li><a>Непосредственная работа</a></li>

19 </ul></li>

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

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

22 <h2>Что это такое</h2>

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

24 <ul><li>строки;</li>

25 <li>массивы;</li>

26 <li>числа;</li>

27 <li>те или иные объекты.</li>

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

29 <h3>Преимущества</h3>

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

31 <ul><li>компактность;</li>

32 <li>простое чтение предложений, написанных подобным образом - актуально и для машины, и для человека;</li>

33 <li>легкость преобразования в структуры данных для разнообразных языков программирования;</li>

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

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

36 <h3>Области применения</h3>

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

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

39 <ul><li>во время создания приложений на JS, включающие в себя расширения браузеров и веб-странички;</li>

40 <li>когда нужно сериализировать или передач структурированную информацию по сети;</li>

41 <li>если возникает необходимость в обмене информацией между серверами и веб-утилитами;</li>

42 <li>при написании web-сервисов и API, чтобы предоставить пользователю доступ к общим данным.</li>

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

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

45 <h3>Несколько слов о характеристиках</h3>

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

47 <ul><li>простое чтение и составление;</li>

48 <li>возможность представления сложных объектов в виде текста;</li>

49 <li>отсутствие зависимостей от используемых языков;</li>

50 <li>легкий формат обмена, основанный на текстовых сведениях.</li>

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

52 <h3>Синтаксис</h3>

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

54 <ul><li>информация представляется в сочетании "имя/значение";</li>

55 <li>фигурные скобки применяются для хранения объекта;</li>

56 <li>после объекта пишется двоеточие;</li>

57 <li>чтобы разделить пару "имя/значение", необходимо поставить запятую;</li>

58 <li>квадратные скобки отвечают за массивы, значения который также разделяются запятой.</li>

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

60 <ol><li>Коллекция пар "имя/значение". Поддерживается большинством языков программирования.</li>

61 <li>Упорядоченные списки значений. Предусматривают включение массивов, списков, векторов, последовательностей и иных "сложных" объектов.</li>

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

63 <h3>Типы данных</h3>

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

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

66 <h4>Немного об объектах</h4>

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

68 <ul><li>заключаются в фигурные скобки;</li>

69 <li>после каждого имени проставляется двоеточие;</li>

70 <li>пара "ключ/значение" делится запятой;</li>

71 <li>ключ должен выступать в виде строки;</li>

72 <li>каждый ключ отличается друг от друга;</li>

73 <li>используется тогда, когда имена ключей - это произвольные строки.</li>

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

75 <h2>Как создать строку</h2>

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

77 <ul><li>строка включает в себя массив значений или объект;</li>

78 <li>массив пишется в квадратных скобках;</li>

79 <li>объект прописывается в фигурных скобках;</li>

80 <li>для включения двойных кавычек в строчку, нужно использовать символ "\".</li>

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

82 <h3>Наглядный пример</h3>

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

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

85 <ol><li>В самом начале проставляются фигурные одинарные скобки. Они указывают на то, что работать предстоит с объектом.</li>

86 <li>Внутри объекта расположены несколько пар "имя/значение".</li>

87 <li>“orderID”: 12345 - поле с именем ordered, а также присвоенным значением 12345.</li>

88 <li>“shopperName”: “John Smith” - поле "ШопперНейм" и значение "Джон Смит" (на английском).</li>

89 <li>“shopperEmail”: johnsmith@example.com - аналогично предыдущему способу хранения информации о покупателе, а именно здесь публикуется электронный ящик.</li>

90 <li>“contetnts”:[…] - полет contents, значением которого выступает указанный массив.</li>

91 <li>“orderCompleted”: true - поле "ОрдерКомплитед" со значением "истина".</li>

92 <li>В массиве contents расположены два объекта, отвечающие за отображение содержимого корзинки.</li>

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

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

95 <h2>Сравнение JSON с XML</h2>

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

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

98 <ul><li>JSON за последние годы набрал популярность в качестве средства передачи AJAX информации;</li>

99 <li>XML обладает большим объемом по сравнению с "ДжейСон";</li>

100 <li>чтение JSON более простое, нежели у XML.</li>

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

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

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

104 <h2>Работа через JS</h2>

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

106 <h3>Создание и чтение формата</h3>

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

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

109 <ol><li>Строки создаются при условии, что разработчик начинает внедрять переменные. Последние обладают теми или иными значениями. Далее происходит пропуск через функции, которые помогают переделывать информацию в строчку.</li>

110 <li>Чтение начинается со строки JSON, которая обладает теми или иными сведениями. Нужно осуществить пропуск string через функцию, которая отвечает за создание переменных, содержащих электронные материалы.</li>

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

112 <h4>Из переменной</h4>

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

114 <h4>Из строки</h4>

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

116 <h2>Как быть с анимацией</h2>

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

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

119 <h3>LottieFiles</h3>

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

121 <ul><li>тестировать;</li>

122 <li>загружать;</li>

123 <li>приобретать;</li>

124 <li>выгружать.</li>

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

126 <h3>Начало</h3>

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

128 <ul><li>установить на устройство плагин для дальнейшей работы;</li>

129 <li>использовать LottieFile или Bodymovin;</li>

130 <li>создать анимацию - в примере им будет дрон с лопастями, которые вращаются;</li>

131 <li>импортировать в слои файлы Illustrator;</li>

132 <li>создать спиральные 3D-слои и повернуть их;</li>

133 <li>перед применением 3D-слоев удостовериться в поддержки таковых.</li>

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

135 <h3>На чем сконцентрироваться</h3>

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

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

138 <ol><li>Файлы "Джейсон" должны в итоге оказаться максимально компактными. Особенно тогда, когда речь идет о мобильных продуктах.</li>

139 <li>Чтобы создавать анимацию в Lottie, рекомендуется максимально изучить After Effect. Это позволит избежать наличия лишних ключевых кадров.</li>

140 <li>Постараться отказаться от применения ключевых кадров пути. Данный момент требует создания большого документа из преобразования всей вершины.</li>

141 <li>Рекомендуется отказаться от покачиваний, автоматической трассировки и похожих методов. Связано это с большим количеством ключевых кадров, что отражается на производительности.</li>

142 <li>Слои Illustrator, EPS, PDF или SVG преобразовываются для формирования слоев в After Effects. Иначе это поспособствует возникновению ошибки.</li>

143 <li>Выражение и эффекты в Lottie пока не поддерживаются.</li>

144 <li>Стили слоев тоже не имеют поддержки.</li>

145 <li>Некоторые режимы наложения не поддерживаются. Они не видны даже через Luma.</li>

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

147 <h3>Непосредственная работа</h3>

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

149 <ol><li>Запустить After Effect и созданную ранее анимацию.</li>

150 <li>Произвести импорт слоев, после - выбрать их все.</li>

151 <li>Кликнуть ПКМ и выбрать "Создать"-"Создание фигуры из векторных…".</li>

152 <li>Удалить AI-файлы.</li>

153 <li>Провести симуляцию вращения путем анимирования размера в X (ширины).</li>

154 <li>Создать нулевой объект, который будет отвечать за перемещение всего логотипа.</li>

155 <li>Нулевой объект сделать видимым, сделать 0% прозрачности. Тогда все будет работать.</li>

156 <li>Перейти в "Окно"-"Расширение"-"LottieFiles".</li>

157 <li>Открыть окно для просмотра animation и ее загрузки в Lottie-файл. Для реализации поставленной задачи требуется Лотти-аккаунт.</li>

158 </ol><p>По<a>ссылке</a>можно найти скрины проделанной работы. А для того, чтобы лучше разбираться в изученной теме, рекомендуется пройти дистанционные онлайн курсы "JSON для начинающих".</p>

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

160