Прогноз погоды на JavaScript

Метки: / /

В этой статье мы как делается погода в JavaScript, а точнее как её получить и вывести на страницу.

Также можете посмотреть подобную статью: Работа с погодой в PHP с помощью OpenWeatherMap API, полезно если хотите вывести погоду со стороны сервера.

Получения API ключа в OpenWeatherMap:

Перед тем как получить вывести погоду, нужно её откуда-то получить, для этого будем использовать сервис OpenWeatherMap, на нём надо зарегистрировать, думаю с этим вы справитесь.

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

Пагода на JavaScript:

Теперь напишем не большую программу, нам нужно будет отправлять запрос с ключом на сервер, для этого будем использовать библиотеку Axios.js, про то как с ней работать, почитайте по ссылке.

Суть программы заключается в том, что мы отправляем GET запрос на OpenWeatherMap и получаем в ответ данные виде JSON формата вот пример:

Как видите в начале мы формируем URL для GET запроса, но перед этим мы создаём две переменных для удобства, первая хранит API ключ, вторая город для которого нужно узнать погоду, у нас это Москва.

Давайте разберём сам URL, как можете заметить, в нём хранится несколько данных для запроса, вот они:

  • q — Название города, у которого нужно получить погоду;
  • lang — Язык данных;
  • units — Тип градусов;
  • appid — API ключ;

Тут всё понятно, теперь перейдём к самому отправке этого запроса, вот пример:

Тут в целом всё очень просто, даже нет смысла объяснять, повторюсь, если вам что-то не понятно, то прочитайте статью про Axios.js, вот результат:

Получение данных погоды от OpenWeatherMap

Тут достаточно много данных, давайте их выведем на экран, для этого нужно сделать не большой HTML документ:

В HTML мы сделали такой простой блог, теперь выведем в него всё что нам нужно, для этого возьмём все <span> элементы по классы и выведем данные через JS:

Тут мы просто выводим различного рода данные которые нам нужны, вот что получается:

Погода вывод на JS

Как видите всё выводитья верно, вы конечно можете выводить другие данные на ваше усмотрение, что вам нужно.

Ещё стоит сказать, что OpenWeatherMap в бесплатном варианте очень сильно ограничен, например, для того чтобы узнать прогноз на будущие вам придётся платить и т.д..

Вывод:

В этой статье вы прочитали как делается погода на JavaScript или как её получить и вывести на экран, какое API использовать.

Подписываетесь на соц-сети:

Поделится:

Также рекомендую:

Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии