2021-02-16 TIL

1877 ワード
TIL JavaScript テキストリンク
TIL
  • web API
  • 気象コンポーネント
    • を作成

    1. API

  • Application Programming Interface
  • サーバは、APIと呼ばれるリソースをよりよく利用するために、クライアントにインタフェース(interface)を提供する必要があります.
  • サーバは、これらのリソースを使用するためにAPIを確立する必要があります.
  • インターネット上のデータを要求する際にHTTPプロトコルを用い,アドレス(URL,URI)でアクセスできる.
    • 1. http 요청. url의 서버 api에 통신요청을 보낸다.
fetch('url').then(fucntion(data){
  return data.json(); // 2. json 메소드로 자바스크립트가 읽을 수 있도록 변환하는 과정.
}).then(function(json){
  console.log(json)
})

    2. openweathermap


    https://openweathermap.org/
    Open APIの1つであるOpenWeatherMapを使用
  • 会員が入金した後、電子メール認証によってAPI鍵を使用することができる.
  • ソウルの天気情報を入手.
    • fetch('api.openweathermap.org/data/2.5/weather?q=Seoul&appid=이곳에 api key 입력')
    .then(function(resp) {
      return resp.json()
    })
    .then(function(json) {
      도시.textcontent = json.name
     ~~ '원하는 Data를 가져와 textcontent로 화면에 보여줄 수 있다.~~
    })

    3. enter event


    都市を検索してEnterキーを押すと結果が出ると思います.
  • querySelectorは入力を受信します.
  • inputの実行に必要なイベントを待機し、イベントが発生すると登録されたイベントリスナーが実行されます.
    • 1.요소의 메소드에 이벤트 리스너를 전달.
input.addEventListener('keyup',function(e){
  if (e.keyCode === 13) {
    원하는 기능(alert, 함수실행 등..)
  }  
});
    2.요소에 프로퍼티로 이벤트 리스너 등록.
input.onkeyup = function(){
  원하는 기능(alert, 함수실행 등..)
}

    REVIEW


    APIを使用して気象コンポーネントを作成しました.
    1.HTMLを使用して基本構造を作成し、cssを使用してuiを設計します.
    2.openweathermapを使用して各都市の天気情報を取得します.
    3.伝達されたオブジェクトの必要な情報のみをWebページに表示します.
    初めてのアプローチは難しいです.コンソールウィンドウでfetch,data,jsonを撮影すると理解度が向上し,その後逐次漸進する.
    ドメインモデル
    memset関数の正確な使用と原理