JS Note

6563 ワード

JSの背景

  • JSは、Webブラウザをプログラミング制御するために誕生した言語である.
  • は最近JSを発展させ、簡単なWebブラウザ言語ではなく、Webサーバを駆動するためのJS言語Nodeである.jsを使用します.
  • WebブラウザまたはWebサーバで使用されるJSは、実行時とは異なり、同じJSを使用します.
  • クロム開発ツール


    F 12ボタンを押してクロム開発者ツールを使用できます.

    データ型


    JavaScriptのデータ型は、元のタイプと参照タイプに大きく分けることができます.
    object以外のものはすべて原生タイプの性質を持っている.
    元のタイプ(元のタイプ):データ値を直接保持
    リファレンスタイプ(リファレンスタイプ):データリファレンスを保持
    1. Number
    基本的な算術演算は可能です.整数と実数に分けます.他の言語にはfloatやdoubleなど多くの数値タイプがありますが、JavaScriptでは数値として使用されています.したがって、バイナリ数に変換する過程でいくつかの制限が発生します.
    次の問題が発生する可能性があります.正確な計算数学のためにjsライブラリを使用します.

    2. String
    var a=は「abc」形式で書くことができます.numberタイプの数字とstringタイプの数字が異なることに注意してください.
    3. Boolean
    本物の偽の値を表す.比較演算==、!=、==、!=結果が出た.trueとfalseがあります
    4. Null
    JavaScriptでは、文字列が存在するかどうかを確認することがよくあります.どの値が意図的に空であるかを決定します.

    JavaScriptデータ型からfalseを返す値は次のとおりです.
    “”、null、undefined、0、NaN.
    残りはtrueです.
    5. undefined
    値が指定されていない場合はundefinedとして定義されます.
    var x;
    if (x === undefined) {
       // 이 문이 실행됨
    }
    else {
       // 이 문이 실행되지 않음
    }

    等しい演算子


  • ==は等しい演算子(equal operator)です.
    左は右と比較し、値が等しい場合はtrue、値が異なる場合はfalseを返します.

  • ===:一致演算子(厳密に等しい演算子)
    左と右が同じかどうかを比較
    ex)1==="1":false値だけでなく、データフォーマットのマッチングも計算
    ex)1="1":true-計算実績値の一致
  • 一般的には、==ではなく==を使用します.

    CSSベース


    クラスセレクタ:->covid
    アイデンティティーセレクタ:->box
    選択者比較
    アイデンティティー>クラス>ラベルセレクタ(Identity>Class>Label Selector)
    クラスは複数回使用できますが、IDは一度しか使用できません.
    夜間モード変換コード
    <body>
      <input type="button" value="night" onclick="
      document.querySelector('body').style.backgroundColor = 'black';
      document.querySelector('body').style.color = 'white';">
      <input type="button" value="day" onclick="
      document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';">
    .
    .
    </body>

    オブジェクト


    JavaScriptでは、元の値以外のものはすべてオブジェクトです.オブジェクトは、キーと値からなるプログラムセットです.JavaScriptのオブジェクトは、「プロトタイプ」と呼ばれるオブジェクトのプロトタイプとメソッドを継承できます.プロトタイプは他の言語とは異なる重要な概念である.
  • メソッド1)オブジェクト文字
  • を作成する.
    var wook = {
      firstName: 'wook',
      lastName: 'min'
    };
  • 生成方法2)コンストラクタ
    new演算子とオブジェクトジェネレータ関数を呼び出すことで、空のオブジェクトを作成できます.空のオブジェクトを作成したら、Propertyまたはメソッドを追加してオブジェクトのメソッドを完了します.
  • var person = new Object();
    // 프로퍼티 추가
    person.firstName = 'wook';
    person.lastName = 'min';
  • オブジェクトキー値のインポート
    for inを使用してオブジェクトキー値を取得できます.
  • const object = { a: 1, b: 2, c: 3 };
    
    for (const property in object) {
      console.log(`${property}: ${object[property]}`);
    }
    

    ファイルの切断


    コードの長さを長くし、機能間でファイルを分離する必要があります.
    1.app.jsという名前のファイルを作成したら、スクリプトコードを切り取って貼り付けます.
    2.htmlファイルに次のコードを作成すればよい.
    <script src="app.js">...</script>

    ライブラリとフレームワーク


    ライブラリとフレームワークが必要なツールを使用しているという観点から、両者に違いはありません.2つの概念を明確に区別していなくても、使用上は問題ありませんが、誰がコントロールの主導権を握っているかによって違いがあります.
  • ライブラリ
    ユーザーが必要とするツール(ex,jquery)を取得して使用します.実際に比べて、ライブラリはハンマーや鋸のようなキャラクターです.
  • フレーム
    ユーザーは、指定されたフレームワークに従って使用されています.実際と比べると、フレームは車や飛行機などのキャラクターと同じです.
  • UI API


    UI、APIは、インタフェースを定義する方法です.

  • UI (User Interface)
    人の立場に立つことで、コンピューターとコミュニケーションが取れるようになります.例えば、人間はコンピューターとの様々な接触を通じて情報を交換する.
    ex)キーボード、リモコン...

  • API (Application Programing Interface)
    アプリケーションの立場から見ると、これは自分よりも上位のシステム(ex)オペレーティングシステムとのコミュニケーションの切り込み点である.これに対して、アプリケーションはコードを通じてコミュニケーションを行います.