weather.js note - 8hal/momonton_study GitHub Wiki

[question weather_js_01] how can i get API KEY for weather app?

How to start

Sign up and get an API key (APPID) on your account page.
It takes up to 1 hour to activate your API key. We send you a confirmation email as your API key is ready to work.

[question weather_js_02] what happend i use querySelector with 2 selectors?

querySelector()

selector01 의 하위 요소 중 selector02를 찾아 return 한다.

[question weather_js_03] what is the fetch?

Fetch API

The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses.
It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.

Here we are fetching a JSON file across the network and print it to the console.

The simplest use of fetch() takes one argument — the path to the resource you want to fetch — and returns a promise containing the response (a Response object).

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

[question weather_js_04] what is the units=metric?

Current weather data

For temperature in Celsius use units=metric

Examples of API calls:

standard api.openweathermap.org/data/2.5/find?q=London

metric api.openweathermap.org/data/2.5/find?q=London&units=metric

imperial api.openweathermap.org/data/2.5/find?q=London&units=imperial

[question weather_js_05] what is the .then?

It's the part of answer for question weather_js_03.

[question weather_js_06] what is the =>?

Arrow Functions

Arrow functions allows a short syntax for writing function expressions.
You don't need the function keyword, the return keyword, and the curly brackets.

// ES5
var x = function(x, y) {
   return x * y;
}
// ES6
const x = (x, y) => x * y;

[question weather_js_07] what is the JSON.parse()?

JSON.parse()

A common use of JSON is to exchange data to/from a web server.
When receiving data from a web server, the data is always a string.
Parse the data with JSON.parse(), and the data becomes a JavaScript object.

[question weather_js_08] what is the JSON.stringify()?

JSON.stringify()

A common use of JSON is to exchange data to/from a web server.
When sending data to a web server, the data has to be a string.
Convert a JavaScript object into a string with JSON.stringify().

input { name: "John", age: 30, city: "New York" }

output {"name":"John","age":30,"city":"New York"}

Example

[question weather_js_09] what is the navigator.geolocation.getCurrentPosition?

navigator

The navigator object contains information about the browser.

navigator.geolocation

The geolocation property returns a Geolocation object that can be used to locate the user's position

navigator.geolocation.getCurrentPosition(Geolocation object)

Returns the current position of the device

More things for [question weather_js_03]

Call back

A callback is a function that is to be executed after another function has finished executing — hence the name ‘call back’.

T.get('search/tweets', params, function(err, data, response) {
  if(!err){
    // This is where the magic will happen
  } else {
    console.log(err);
  }
})

Using Promises

A Promise is an object representing the eventual completion or failure of an asynchronous operation.

With modern functions, we attach our callbacks to the returned promises instead, forming a promise chain:

doSomething()
.then(function(result) {
  return doSomethingElse(result);
})
.then(function(newResult) {
  return doThirdThing(newResult);
})
.then(function(finalResult) {
  console.log('Got the final result: ' + finalResult);
})
.catch(failureCallback);