From 841aae260382e2bf5ebb44d765d8c7301d27caab Mon Sep 17 00:00:00 2001 From: Alexey Istomin Date: Sat, 20 Mar 2021 18:37:44 +0300 Subject: Restore "ё" letter in Russian translation (#239) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs(ru): restore ё letter * docs(ru): resolve conflicts * refactor(idea): remove ide folder --- files/ru/learn/javascript/objects/json/index.html | 32 +++++++++++------------ 1 file changed, 16 insertions(+), 16 deletions(-) (limited to 'files/ru/learn/javascript/objects/json') diff --git a/files/ru/learn/javascript/objects/json/index.html b/files/ru/learn/javascript/objects/json/index.html index 68cc6c7fdd..be0ab2e664 100644 --- a/files/ru/learn/javascript/objects/json/index.html +++ b/files/ru/learn/javascript/objects/json/index.html @@ -12,7 +12,7 @@ original_slug: Learn/JavaScript/Объекты/JSON
{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
-

Обозначение объектов JavaScript (JSON - JavaScript Object Notation) - стандартный текстовый формат для представления структурированных данных на основе синтаксиса объекта JavaScript. Он обычно используется для передачи данных в веб-приложениях (например, отправка некоторых данных с сервера клиенту,таким образом чтобы это могло отображаться на веб-странице или наоборот). Вы будете сталкиваться с этим довольно часто, поэтому в этой статье мы даем вам все, что вам нужно для работы с JSON используя JavaScript, включая парсинг JSON, чтобы вы могли получить доступ к данным внутри него при создании JSON.

+

Обозначение объектов JavaScript (JSON - JavaScript Object Notation) - стандартный текстовый формат для представления структурированных данных на основе синтаксиса объекта JavaScript. Он обычно используется для передачи данных в веб-приложениях (например, отправка некоторых данных с сервера клиенту,таким образом чтобы это могло отображаться на веб-странице или наоборот). Вы будете сталкиваться с этим довольно часто, поэтому в этой статье мы даём вам все, что вам нужно для работы с JSON используя JavaScript, включая парсинг JSON, чтобы вы могли получить доступ к данным внутри него при создании JSON.

@@ -37,7 +37,7 @@ original_slug: Learn/JavaScript/Объекты/JSON

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

-

Объект JSON может быть сохранен в собственном файле, который в основном представляет собой текстовый файл с расширением .json и {{glossary("MIME type")}} application/json.

+

Объект JSON может быть сохранён в собственном файле, который в основном представляет собой текстовый файл с расширением .json и {{glossary("MIME type")}} application/json.

Структура JSON

@@ -85,7 +85,7 @@ original_slug: Learn/JavaScript/Объекты/JSON   ] } -

Если бы мы загрузили этот объект в программу JavaScript, создали переменную с названием superHeroes, мы могли бы затем получить доступ к данным внутри нее, используя те же самые точечную и скобочную нотации, которые мы рассмотрели в статье JavaScript object basics. Например:

+

Если бы мы загрузили этот объект в программу JavaScript, создали переменную с названием superHeroes, мы могли бы затем получить доступ к данным внутри неё, используя те же самые точечную и скобочную нотации, которые мы рассмотрели в статье JavaScript object basics. Например:

superHeroes.homeTown
 superHeroes['active']
@@ -139,10 +139,10 @@ superHeroes['active']

Активное обучение: Работа с примером JSON

@@ -175,7 +175,7 @@ var section = document.querySelector('section');

Чтобы получить JSON, мы будем использовать API, называемый {{domxref("XMLHttpRequest")}} (часто называемый XHR). Это очень полезный объект JavaScript, который позволяет нам делать сетевые запросы для извлечения ресурсов с сервера через JavaScript (например, изображения, текст, JSON, даже фрагменты HTML), что означает, что мы можем обновлять небольшие разделы контента без необходимости перезагрузки всей страницы. Это привело к более отзывчивым веб-страницам и звучит захватывающе, но, к сожалению, выходит за рамки этой статьи, чтобы изучить это гораздо более подробно.

    -
  1. Начнем с того, что мы собираемся сохранить URL-адрес JSON, который мы хотим получить в переменной. Добавьте нижеследующий код JavaScript: +
  2. Начнём с того, что мы собираемся сохранить URL-адрес JSON, который мы хотим получить в переменной. Добавьте нижеследующий код JavaScript: 
    var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
  3. Чтобы создать запрос, нам нужно создать новый экземпляр объекта запроса из конструктора XMLHttpRequest, используя ключевое слово new. Добавьте следующую ниже свою последнюю строку: @@ -204,9 +204,9 @@ request.send();
-

Здесь мы сохраняем ответ на наш запрос (доступный в свойстве response) в переменной superHeroes; эта переменная теперь будет содержать объект JavaScript, основанный на JSON! Затем мы передаем этот объект двум вызовам функций - первый из них заполнит <header> правильными данными, а второй создаст информационную карту для каждого героя в команде и вставляет ее в <section>.

+

Здесь мы сохраняем ответ на наш запрос (доступный в свойстве response) в переменной superHeroes; эта переменная теперь будет содержать объект JavaScript, основанный на JSON! Затем мы передаём этот объект двум вызовам функций - первый из них заполнит <header> правильными данными, а второй создаст информационную карту для каждого героя в команде и вставляет её в <section>.

-

Мы свернули код в обработчик событий, который запускается, когда событие загрузки запускается в объекте запроса (см. onload) - это связано с тем, что событие загрузки запускается, когда ответ успешно возвращается; поступая  таким образом,это гарантия того, что request.response определенно будет доступен, когда мы начнем работу с ним.

+

Мы свернули код в обработчик событий, который запускается, когда событие загрузки запускается в объекте запроса (см. onload) - это связано с тем, что событие загрузки запускается, когда ответ успешно возвращается; поступая  таким образом,это гарантия того, что request.response определённо будет доступен, когда мы начнём работу с ним.

Заполнение заголовка

@@ -222,11 +222,11 @@ request.send(); header.appendChild(myPara); } -

Мы назвали параметр jsonObj, чтобы напомнить себе, что этот объект JavaScript возник из JSON. Здесь мы сначала создаем элемент {{HTMLElement("h1")}} с createElement(), устанавливаем его textContent равным свойству squadName объекта, а затем добавляем его в заголовок с помощью appendChild(). Затем мы выполняем очень похожую операцию с абзацем: создаем его, устанавливаем его текстовое содержимое и добавляем его в заголовок. Единственное различие заключается в том, что его текст задан, как конкатенированная строка, содержащая как homeTown, так и formed свойства объекта.

+

Мы назвали параметр jsonObj, чтобы напомнить себе, что этот объект JavaScript возник из JSON. Здесь мы сначала создаём элемент {{HTMLElement("h1")}} с createElement(), устанавливаем его textContent равным свойству squadName объекта, а затем добавляем его в заголовок с помощью appendChild(). Затем мы выполняем очень похожую операцию с абзацем: создаём его, устанавливаем его текстовое содержимое и добавляем его в заголовок. Единственное различие заключается в том, что его текст задан, как конкатенированная строка, содержащая как homeTown, так и formed свойства объекта.

Создание информационных карт героя

-

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

+

Затем добавьте следующую функцию внизу кода, которая создаёт и отображает карты супергероев:

function showHeroes(jsonObj) {
   var heroes = jsonObj['members'];
@@ -266,16 +266,16 @@ request.send();

Затем мы используем for loop для циклического прохождения каждого объекта в массиве. Для каждого из них мы:

    -
  1. Создаем несколько новых элементов: <article>, <h2>, три <p> и <ul>.
    2. +
  2. Создаём несколько новых элементов: <article>, <h2>, три <p> и <ul>.
  3. Устанавливаем <h2>, чтобы содержать name текущего героя.
  4. Заполняем три абзаца своей secretIdentity, age и строкой, в которой говорится: «Суперспособности:», чтобы ввести информацию в список.
  5. Сохраняем свойство powers в другой новой переменной под названием superPowers - где содержится массив, в котором перечислены сверхспособности текущего героя.
    6. -
  6. Используем другой цикл for, чтобы прокрутить сверхспособности текущего героя , для каждого из них мы создаем элемент <li>, помещаем в него сверхспособности, а затем помещаем listItem внутри элемента <ul> (myList) с помощью appendChild().
    7. +
  7. Используем другой цикл for, чтобы прокрутить сверхспособности текущего героя , для каждого из них мы создаём элемент <li>, помещаем в него сверхспособности, а затем помещаем listItem внутри элемента <ul> (myList) с помощью appendChild().
  8. Последнее, что мы делаем, это добавляем <h2>, <p> и <ul> внутри <article> (myArticle), а затем добавляем <article> в <section>. Важное значение имеет порядок, в котором добавляются элементы, так как это порядок, который они будут отображать внутри HTML.
-

Примечание. Если вам не удается заставить этот пример работать, попробуйте обратиться к нашему исходному коду heroes-finished.html (см. также он работает в режиме live).

+

Примечание. Если вам не удаётся заставить этот пример работать, попробуйте обратиться к нашему исходному коду heroes-finished.html (см. также он работает в режиме live).

@@ -284,11 +284,11 @@ request.send();

Преобразование между объектами и текстом

-

Вышеприведенный пример был прост с точки зрения доступа к объекту JavaScript, потому что мы задали XHR-запрос для прямого преобразования ответа JSON в объект JavaScript, используя:

+

Вышеприведённый пример был прост с точки зрения доступа к объекту JavaScript, потому что мы задали XHR-запрос для прямого преобразования ответа JSON в объект JavaScript, используя:

request.responseType = 'json';
-

Но иногда нам не так везет - иногда мы получаем сырую строку JSON и нам нужно  преобразовать ее в объект самостоятельно. И когда мы хотим отправить объект JavaScript по сети, нам нужно  преобразовать его в JSON (строку) перед отправкой. К счастью, эти две проблемы настолько распространены в веб-разработке, что встроенный объект JSON доступен в браузерах, которые содержат следующие два метода:

+

Но иногда нам не так везёт - иногда мы получаем сырую строку JSON и нам нужно  преобразовать её в объект самостоятельно. И когда мы хотим отправить объект JavaScript по сети, нам нужно  преобразовать его в JSON (строку) перед отправкой. К счастью, эти две проблемы настолько распространены в веб-разработке, что встроенный объект JSON доступен в браузерах, которые содержат следующие два метода: