В этой статье мы как делается погода в JavaScript, а точнее как её получить и вывести на страницу.
Также можете посмотреть подобную статью: Работа с погодой в PHP с помощью OpenWeatherMap API, полезно если хотите вывести погоду со стороны сервера.
Получения API ключа в OpenWeatherMap:
Перед тем как получить вывести погоду, нужно её откуда-то получить, для этого будем использовать сервис OpenWeatherMap, на нём надо зарегистрировать, думаю с этим вы справитесь.
Соответственно что бы получить доступ к данным сервиса, нам нужно получить специальный API ключ, дадут его после регистрации и когда в специальной форме напишите название компании и для чего вам ключ.
Пагода на JavaScript:
Теперь напишем не большую программу, нам нужно будет отправлять запрос с ключом на сервер, для этого будем использовать библиотеку Axios.js, про то как с ней работать, почитайте по ссылке.
Суть программы заключается в том, что мы отправляем GET запрос на OpenWeatherMap и получаем в ответ данные виде JSON формата вот пример:
1 2 3 4 5 6 | // API ключ let apiKey = "API_улюч"; // Город погода которого нужна let city = "Moscow"; // Формируем url для GET запроса let url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&lang=ru&units=metric&appid=${apiKey}`; |
Как видите в начале мы формируем URL для GET запроса, но перед этим мы создаём две переменных для удобства, первая хранит API ключ, вторая город для которого нужно узнать погоду, у нас это Москва.
Давайте разберём сам URL, как можете заметить, в нём хранится несколько данных для запроса, вот они:
- q — Название города, у которого нужно получить погоду;
- lang — Язык данных;
- units — Тип градусов;
- appid — API ключ;
Тут всё понятно, теперь перейдём к самому отправке этого запроса, вот пример:
1 2 3 4 5 | // Отправляем запрос axios.get(url).then(res => { // Выводим результат в консоль браузера console.log(res.data); }) |
Тут в целом всё очень просто, даже нет смысла объяснять, повторюсь, если вам что-то не понятно, то прочитайте статью про Axios.js, вот результат:
Тут достаточно много данных, давайте их выведем на экран, для этого нужно сделать не большой HTML документ:
1 2 3 4 5 6 | <div class="weather"> <h2>Погода в городе <span class="city"></span></h2> <p>Погода: <span class="temp"></span>°C</p> <p>Влажность: <span class="humidity"></span>%</p> <p>Ветер: <span class="wind"></span> км/ч</p> </div> |
В HTML мы сделали такой простой блог, теперь выведем в него всё что нам нужно, для этого возьмём все <span>
элементы по классы и выведем данные через JS:
1 2 3 4 5 6 7 8 9 10 11 | // Отправка GET запроса axios.get(url).then(res => { // Вывод города document.querySelector('.city').innerHTML = res.data.name // Вывод температуры document.querySelector('.temp').innerHTML = res.data.main.temp // Вывод влажности document.querySelector('.humidity').innerHTML = res.data.main.humidity // Вывод скорости ветра document.querySelector('.wind').innerHTML = res.data.wind.speed }) |
Тут мы просто выводим различного рода данные которые нам нужны, вот что получается:
Как видите всё выводитья верно, вы конечно можете выводить другие данные на ваше усмотрение, что вам нужно.
Ещё стоит сказать, что OpenWeatherMap в бесплатном варианте очень сильно ограничен, например, для того чтобы узнать прогноз на будущие вам придётся платить и т.д..
Вывод:
В этой статье вы прочитали как делается погода на JavaScript или как её получить и вывести на экран, какое API использовать.