Project Monteum#1レッスンの復習


中に入る。


運動量関数を復習しています.
複雑な反応項目を作って、バニラJavaScriptを作って、こんなに簡単には見えません.
しかしコードテストを行うとバニラJavaScriptでも行います...
復習の時、これが何なのかまだよく分かりませんでした.面接官が突然現れた時ですね~!説明できないフックを整理したいです.面接前にもう一度読む資料として役立つはずです

問題の準備


  • setInterval(fn,1000)とは何ですか?
    この関数を一定時間間隔で繰り返し実行するための繰返し実行方法.
    単位はミリ秒級なので、ここで1000は1秒を意味します.
    これは、毎秒1回関数を実行することを意味します.

  • padStart ( length, str )
    padStart()メソッドは、現在の文字列の先頭に別の文字列を入力し、所定の長さを満たす新しい文字列を返します.
    入力は、ターゲット文字列の先頭(左側)から適用されます.
    padEndは、ターゲット文字列の末尾(右側)にも適用されます.

  • Date
    整数値を含むオブジェクトは、1970年1月1日の真夜中から現在の時間差をミリ秒単位で表します.

  • Math.random()
    0~1未満の小数点乱数(乱数)を返します.

  • document.createElement("tagname")
    createElemnetはhtmlに要素を動的に追加する方法です.
    tagname.attr=``など、必要に応じて必須属性を指定します.
    document.body.htmlにappendChild(tagname)として生成された要素を追加します.

  • navigator.geolocation.getCurrentPosition( success, error )
    navigator.Geolocationは読み取り専用のプロパティで、Web上のデバイスの現在の位置Geolocationオブジェクトを返します.
    getCurrentPositionは、デバイスの現在の位置を読み込む関数を実行するオブジェクトのキーの1つです.値が存在する場合は、実行する関数とエラーを実行する関数を同時に追加します.

  • event.target vs. event.currentTarget vs. event.target.parentElement ?
  • <li >
      <button onClick={onLogin}>
        <span>Google</span>
      </button>
    </li>
    event.CurrentTarget:イベント(クリック)が発生する要素(ボタン)、すなわちvanila javascript標準にはイベントハンドラ(addEventLister)の要素が付属している.
    event.target:イベントが発生した要素のサブ要素(span).
    イベントにアタッチされている要素にサブ要素がない場合:
    <li >
      <button >
        <span onClick={onLogin}>Google</span>
      </button>
    </li>
    event.targetはイベントが発生する要素自体(span)である.(サブエレメントではありません)
    event.CurrentTargetはnull
    event.target.parentElement:イベントが発生した要素の親要素(button)
    *「」を参照してください.👉

  • https://developer.mozilla.org/en-US/docs/Web/API/Event/target

  • https://velog.io/@edie_ko/JavaScript-event-target%EA%B3%BC-currentTarget%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

  • JSONとは
    JavaScript Of Notationの略.
    軽量レベルのデータ交換フォーマットです.これは通信方法やプログラミング言語ではなく、データを表示する表現方法です.
    JavaScriptベースのオブジェクトフォーマットで、外観は非常に似ています.
    JSON形式)
  • {
      "employees": [
        {
          "name": "Surim",
          "lastName": "Son"
        },
        {
          "name": "Someone",
          "lastName": "Huh"
        },
        {
          "name": "Someone else",
          "lastName": "Kim"
        } 
      ]
    }
  • JSON.parse()バー:
    これにより、JSON文字列に送信されたデータを解析し、結果値をJavaScriptまたはオブジェクトに生成します.
    例)
  • JSON.parse('{}');              // {}
    JSON.parse('true');            // true
    JSON.parse('"foo"');           // "foo"
    JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
    JSON.parse('null');            // null
    
    *「」を参照してください.👉

  • https://velog.io/@surim014/JSON%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

  • https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

  • Array.prototype.filter( fn ) ?
    fnがフィルタリングを行う条件.この条件のみで構成されたアイテムの新しいアレイを返します.

  • parseInt() :
    string->Integerに変換します.
  • コメントサイト

  • 符号化デコーダなし:
    https://nomadcoders.co/community/thread/3057
  • 最も人気のあるデザイン:
    https://algoroots.github.io/Momentum_Web/
  • 天気API
    https://openweathermap.org/current#data
  • 天気APIデータ:
    https://api.openweathermap.org/data/2.5/weather?lat=37.3816743&lon=126.7298631&appid=c7819aed3823c19a6bbb5f481435a00a