[20419]JavaScript特別講座

18476 ワード
JavaScript テキストリンク

JavaScript特別講座


李在元社長が主宰したJSリアルタイム特別講座に参加した.

What is JavaScript?


JavaScript(英語:JavaScript)は、オブジェクトベースのスクリプトプログラミング言語です.この言語は主にWebブラウザで使用され、他のアプリケーションに組み込まれているオブジェクトにアクセスする機能を備えています.
-ウィキペディア
HTML、CSSで動作の機能を設定できます.

通知ウィンドウ練習の作成

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="./style.css">
</head>
<body>

  <div id="alertBox">
    <p id="number">alert box 1</p>
    <button id="closeBox">
      이거 누르면 닫힘
    </button>
  </div>

  <div>
    <button class="showAlert" onclick="openclose('나는 1box')">
      이거 누르면 1 열림
    </button>
    <button onclick="openclose('나는 2box')">
      이거 누르면 2 열림
    </button>
  </div>


  <script>
    function openclose(content) {
      document.getElementById("alertBox").style.display = "block";
      document.getElementById("number").innerHTML = content;
    }

    document.getElementById("closeBox").addEventListener("click", function() {
      document.getElementById("alertBox").style.display = 'none';
    })
    
  </script>

</body>
</html>
#alertBox {
  display: none;
  padding: 20px;
  border: 1px solid #c6c6c6;
  border-radius: 15px;
  background-color: beige;
}

#alertBox2 {
  display: none;
  padding: 20px;
  border: 1px solid #af4c4c;
  border-radius: 15px;
  background-color: rgb(131, 131, 31);
}

入力練習を受ける

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="./style.css">
</head>
<body>

  <input type="text" name="" id="inputValue" />
  <button id="submitBtn">submit</button>

  <div id="result"> </div>

  <script>
   
    document.getElementById("submitBtn").addEventListener("click", function() {
      // 사용자가 입력하지 않고 버튼 누르면 함수를 실행시키지 말자!
      var IV = document.getElementById("inputValue").value;
      if (!IV.trim()) {
        alert("입력 후 눌러라")
      }
      else {
        document.getElementById("result").innerHTML = IV;
      }
    })
  </script>

</body>
</html>

More ...


タグの選択方法


  • querySelector
    指定した選択プログラムまたは選択パッケージに一致するドキュメントの最初のElementを返します.一致する要素がない場合はnullを返します.
    戻りタイプはNodeListです.document.querySelector('tag'); document.querySelector('#id'); document.querySelector('.class');

  • querySelectorAll
    指定したセレクタまたは選択パッケージに一致するドキュメント内のすべての要素を返します.document.querySelectorAll('selector');

  • getElementById
    メソッドは、指定した文字列に一致するid属性を持つ要素を検索し、その属性を表すElementオブジェクトを返します.IDは、ドキュメント内で一意である必要があるため、特定の要素をすばやく検索するときに便利です.
    リターンタイプはHTML Collectionです.document.getElementById(id);

  • getElementsByClassName
    指定されたクラスのすべてのサブ要素を持つリアルタイムHTML Collectionを返します.アレイに戻ります.document.getElementsByClassName('class')

    • 変数の宣言


    元々JSの変数宣言はvarのみ使用されていたが、ES 6からletとconstが利用可能になった.
    var、let、constの違いを理解するには、HostingとScopeの概念を理解する必要があります.

    Hoisting?


    変数宣言(および通常の宣言)は、任意のコードを実行する前に処理されるため、コード内の任意の場所で変数宣言は最上位宣言と同等です.これは、変数が宣言前に使用できることを意味します.変数宣言が関数またはグローバルコードの上部に移動する動作を「昇格」と呼びます.
    - MDN
    変数を宣言する前に参照できます.

    Scope?


    scopeは、参照オブジェクト識別子(識別子、変数、関数の名前、たとえば、あるオブジェクトを他のオブジェクトと区別できる一意の名前)を検索するためのルールです.
    - PoeimaWeb

  • global scope
    コード内の任意の場所で参照できます

  • local scope
    サブ関数との参照のみ
  • function levelscope
    変数が関数に宣言されている場合は、その関数にのみアクセスでき、関数外では使用できません.
  • block level scope
    条件内部またはループ内部で宣言された変数は、条件またはループ内でのみアクセスできます.
    かっこ({})単位で範囲を決定します.

    • var, let, const


  • var
  • function-scoped
  • 変数の作成
    宣言、初期化段階が一度に完了します.
  • 繰り返し宣言、
    • を再割り当て可能

  • let
  • block-scoped
  • 変数の作成
    宣言は、初期化段階に分けて行います.
    したがって、初期化前にアクセスしようとすると参照エラーが発生します.
  • は繰り返し宣言することができず、
    • を再割り当てすることができる.

  • const
    不変の値(定数)に使用します.
  • block-scoped
  • 変数の作成
    宣言と同時に分配しなければならない.
  • 繰り返し宣言、
    • を再割り当てできません.
    /varletconst繰り返し宣言OXX値の再割り当てOOXscopefunctionblockblockグローバルオブジェクト属性OXX

    letとconstのHOLING


    varは凍結されます.
    letとconstはHostingされませんか?
    ❌NO! クビになったが、Temporary Dead Zoneでクビになったわけではないようだ.

    変数を作成するには

  • 宣言フェーズ
    実行コンテキストの変数オブジェクトに変数を登録します.
  • 初期化フェーズ
    メモリに変数オブジェクトに登録されている変数のスペースが確保されていることを確認します.変数は未定義に初期化されます.
  • 割当手順
    未定義に初期化された変数に実際の値を割り当てます.

    • Temporary Dead Zone


    一時の死角地帯.scope起点から初期化起点までの区間は,変数が参照できない区間である.
    初期化前に変数を参照しようとすると、メモリ容量が不足してエラーが発生します.
  • varは宣言と同時に初期化され、このときは未定義に初期化されます.
  • let/constは宣言と初期化が別々に行われるため、宣言後にTDZに移行して管理される.
    • scopeに入ると変数が生成されますが、(Hoist)が初期化される前にTDZはlet/cont変数を管理しています.
    したがって、初期化前に変数にアクセスしようとすると、参照エラーが発生し、フリーズされないように見えます.
    ブログ参照
    https://poiemaweb.com/es6-block-scope
    https://junhobaik.github.io/js-let-cont-hoisting/
    [7432]ディスクツリー
    くかんけつごうもんだい