<section id="description">
<p>You want your code to execute only once your page has finished loading. For that purpose, you can attach a JavaScript event to the document called <code>DOMContentLoaded</code>. Here's the code that does this:</p><p><pre><code class="language-js">document.addEventListener('DOMContentLoaded',function() {

});
</code></pre></p>
<p>You can implement event handlers that go inside of the <code>DOMContentLoaded</code> function. You can implement an <code>onclick</code> event handler which triggers when the user clicks on the element with id <code>getMessage</code>, by adding the following code:</p>
<p><pre><code class="language-js">document.getElementById('getMessage').onclick=function(){};
</code></pre></p>
</section>

Handle Click Events with JavaScript using the onclick property

<section id="description">
<p>Когда происходит событие клика, вы можете использовать JavaScript для обновления элемента HTML. Например, когда пользователь нажимает кнопку «Получить сообщение», он меняет текст элемента с <code>message</code> класса, чтобы сказать «Вот сообщение». Это работает, добавив следующий код в событие click: <code>document.getElementsByClassName('message')[0].textContent="Here is the message";</code></p>
</section>

Change Text with click Events

<section id="description">
<p>You can also request data from an external source. This is where APIs come into play.</p>
<p>Remember that APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another. You'll learn how to update HTML with the data we get from APIs using a technology called AJAX.</p>
<p>Most web APIs transfer data in a format called JSON. JSON stands for JavaScript Object Notation.</p>
<p>JSON syntax looks very similar to JavaScript object literal notation. JSON has object properties and their current values, sandwiched between a <code>{</code> and a <code>}</code>.</p>
<p>These properties and their values are often referred to as "key-value pairs".</p>
<p>However, JSON transmitted by APIs are sent as <code>bytes</code>, and your application receives it as a <code>string</code>. These can be converted into JavaScript objects, but they are not JavaScript objects by default. The <code>JSON.parse</code> method parses the string and constructs the JavaScript object described by it.</p>
<p>You can request the JSON from freeCodeCamp's Cat Photo API. Here's the code you can put in your click event to do this:</p><p><pre><code class="language-js">req=new XMLHttpRequest();
req.open("GET",'/json/cats.json',true);
req.send();
req.onload=function(){
  json=JSON.parse(req.responseText);
  document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);
};
</code></pre></p>
<p>Here's a review of what each piece is doing. The JavaScript <code>XMLHttpRequest</code> object has a number of properties and methods that are used to transfer data. First, an instance of the <code>XMLHttpRequest</code> object is created and saved in the <code>req</code> variable.
Next, the <code>open</code> method initializes a request - this example is requesting data from an API, therefore is a "GET" request. The second argument for <code>open</code> is the URL of the API you are requesting data from. The third argument is a Boolean value where <code>true</code> makes it an asynchronous request.
The <code>send</code> method sends the request. Finally, the <code>onload</code> event handler parses the returned data and applies the <code>JSON.stringify</code> method to convert the JavaScript object into a string. This string is then inserted as the message text.</p>
</section>

Get JSON with the JavaScript XMLHttpRequest Method

<section id="description">
<p>В предыдущей задаче вы видели, как получить данные JSON от FreeCodeCamp Cat Photo API. Теперь вы более подробно рассмотрите возвращенные данные, чтобы лучше понять формат JSON. Вспомните некоторые обозначения в JavaScript: <blockquote> [] -> Квадратные скобки представляют собой массив <br> {} -> Кудрявые скобки представляют собой объект <br> "" -> Двойные кавычки представляют собой строку. Они также используются для ключевых имен в JSON </blockquote> Понимание структуры данных, возвращаемых API, важно, поскольку оно влияет на то, как вы извлекаете нужные значения. Справа нажмите кнопку «Получить сообщение», чтобы загрузить JavaScript-код FreeCodeCamp Cat Photo API JSON в HTML. Первый и последний символы, которые вы видите в данных JSON, являются квадратными скобками <code>[ ]</code> . Это означает, что возвращаемые данные представляют собой массив. Второй символ в данных JSON - кудрявый <code>{</code> скобка, которая запускает объект. Посмотрев внимательно, вы увидите, что есть три отдельных объекта. Данные JSON представляют собой массив из трех объектов, каждый из которых содержит информацию о фотографии кота. Вы узнали ранее, что объекты содержат пары «ключ-значение», разделенные запятыми. Например, в примере «Кошка» первый объект имеет <code>"id":0</code> где «id» - это ключ, а 0 - его соответствующее значение. Аналогично, есть ключи для «imageLink», «altText» и «codeNames». У каждого объекта фотокамеры есть такие же клавиши, но с разными значениями. Еще одна интересная пара «ключ-значение» в первом объекте - <code>"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]</code> . Здесь «codeNames» - это ключ, а его значение представляет собой массив из трех строк. Возможно иметь массивы объектов, а также ключ с массивом в качестве значения. Помните, как обращаться к данным в массивах и объектах. Массивы используют скобку для доступа к определенному индексу элемента. Для доступа к значению данного свойства объекты используют либо скобку, либо точечную нотацию. Вот пример, который печатает «altText» первой фотографии кота - обратите внимание, что проанализированные данные JSON в редакторе сохраняются в переменной <code>json</code> : <blockquote> console.log (JSON [0] .altText); <br> // Печатает «Белый кот в зеленой шляпе в форме дыни на голове». </blockquote></p>
</section>

Access the JSON Data from an API

<section id="description">
<p>Теперь, когда вы получаете данные из JSON API, вы можете отобразить его в HTML. Вы можете использовать метод <code>forEach</code> для циклического прохождения данных, поскольку объекты фотографии cat хранятся в массиве. По мере перехода к каждому элементу вы можете изменить элементы HTML. Сначала объявите html-переменную с <code>var html = "";</code> , Затем прокрутите JSON, добавив HTML к переменной, которая обертывает имена ключей в <code>strong</code> тегах, а затем значение. Когда цикл закончен, вы его визуализируете. Вот код, который делает это: <blockquote> json.forEach (function (val) { <br> var keys = Object.keys (val); <br> html + = "&#x3C;div class = 'cat'>"; <br> keys.forEach (функция (ключ) { <br> html + = "&#x3C;strong>" + ключ + "&#x3C;/ strong>:" + val [key] + "&#x3C;br>"; <br> }); <br> html + = "&#x3C;/ div> &#x3C;br>"; <br> }); </blockquote></p>
</section>

Convert JSON Data to HTML

<section id="description">
<p>Последние несколько проблем показали, что каждый объект в массиве JSON содержит ключ <code>imageLink</code> со значением, которое является URL-адресом изображения кошки. Когда вы перебираете эти объекты, вы можете использовать это свойство <code>imageLink</code> для отображения этого изображения в элементе <code>img</code> . Вот код, который делает это: <code>html += "&#x3C;img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";</code></p>
</section>

Render Images from Data Sources

<section id="description">
<p>Если вы не хотите отображать каждую фотографию кота, которую вы получаете из FreeCodeCamp Cat Photo API, вы можете предварительно фильтровать JSON перед ее прокруткой. Учитывая , что данные JSON хранится в массиве, вы можете использовать <code>filter</code> метод , чтобы отфильтровать кошку, ключ «Идентификатор» имеет значение 1. Вот код , чтобы сделать это: <blockquote> json = json.filter (функция (val) { <br> return (val.id! == 1); <br> }); </blockquote></p>
</section>

Pre-filter JSON to Get the Data You Need

<section id="description">
<p>Еще одна интересная вещь, которую вы можете сделать, - это доступ к текущему местоположению вашего пользователя. Каждый браузер имеет встроенный навигатор, который может предоставить вам эту информацию. Навигатор получит текущую долготу и широту пользователя. Вы увидите приглашение разрешить или заблокировать этот сайт, зная ваше текущее местоположение. Задача может быть завершена в любом случае, если код верен. Выбрав allow, вы увидите, что текст на выходном телефоне изменится на широту и долготу. Вот код, который делает это: <blockquote> if (navigator.geolocation) { <br> navigator.geolocation.getCurrentPosition (функция (позиция) { <br> document.getElementById ('data'). innerHTML = "широта:" + position.coords.latitude + "&#x3C;br> долгота:" + position.coords.longitude; <br> }); <br> } </blockquote> Во-первых, он проверяет <code>navigator.geolocation</code> объекта <code>navigator.geolocation</code> . Если это так, <code>getCurrentPosition</code> метод <code>getCurrentPosition</code> для этого объекта, который инициирует асинхронный запрос для позиции пользователя. Если запрос выполнен успешно, выполняется функция обратного вызова в методе. Эта функция осуществляет доступ к значениям объекта <code>position</code> для широты и долготы с использованием точечной нотации и обновляет HTML.</p></section>

Get Geolocation Data to Find A User's GPS Coordinates

<section id="description">
<p>In the previous examples, you received data from an external resource. You can also send data to an external resource, as long as that resource supports AJAX requests and you know the URL.</p>
<p>JavaScript's <code>XMLHttpRequest</code> method is also used to post data to a server. Here's an example:</p><p><pre><code class="language-js">const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 &#x26;&#x26; xhr.status === 201){
    const serverResponse = JSON.parse(xhr.response);
    document.getElementsByClassName('message')[0].textContent = serverResponse.userName + serverResponse.suffix;
  }
};
const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
xhr.send(body);
</code></pre></p>
<p>You've seen several of these methods before. Here the <code>open</code> method initializes the request as a "POST" to the given URL of the external resource, and uses the <code>true</code> Boolean to make it asynchronous.
The <code>setRequestHeader</code> method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the <code>open</code> method, but before the <code>send</code> method. The two parameters are the name of the header and the value to set as the body of that header.
Next, the <code>onreadystatechange</code> event listener handles a change in the state of the request. A <code>readyState</code> of 4 means the operation is complete, and a <code>status</code> of 201 means it was a successful request. The document's HTML can be updated.
Finally, the <code>send</code> method sends the request with the <code>body</code> value, which the <code>userName</code> key was given by the user in the <code>input</code> field.</p>
</section>