[Webフロントエンド]1分エンコードJavaScriptベースPart 1,2


1分コードJavaScriptベースPart 1,2

  • 開発者ツールショートカット:CTRL+SHIFT+i

  • html cssコメントショートカット:
    コメントの指定:CTRL+K+C
    キャンセルコメント:CTRL+K+U

  • ほとんどのエディタのコメントショートカット:CTRL+/

  • var変数:function-level scop
    let変数、const定数:block-level scope
  • 📌参考資料

  • 1分エンコードJavaScriptベースPart 1
    https://www.youtube.com/watch?v=6v8oVnR6npM&list=PLe9WXHRkq9p0k7eF0TrIHgL5Cy9khHWnX&index=1

  • 1分エンコードJavaScriptベースPart 2
    https://www.youtube.com/watch?v=vlyHEQSqkl8&list=PLe9WXHRkq9p0k7eF0TrIHgL5Cy9khHWnX&index=2
  • JavaScriptオブジェクト(オブジェクト)
    https://poiemaweb.com/js-object
  • JavaScriptのオブジェクト(object)
  • JavaScript=オブジェクトベースのスクリプト言語
    ->オリジナルタイプ(Primitives)以外のすべての値(関数、配列、正規表現など)がオブジェクト
  • JavaScriptのオブジェクト=キー(キー)と値(値)からなる属性の集合
    ->Propertyの値:JavaScriptで使用可能なすべての値
    ->Propertyの値関数(一級オブジェクト)であれば、一般関数
  • を区別する方法と呼びます.
    |67917|𘉥JavaScriptのオブジェクトは、「プロトタイプ」と呼ばれるオブジェクトのプロトタイプとメソッドを継承して、オブジェクト向けの継承を実現することができる|𐥎
    JavaScriptでオブジェクトを作成する方法
  • クラスベースのオブジェクト向け言語:
    クラスの事前定義->必要に応じてnew演算子を使用してインスタンスを作成
  • JavaScript:
    椺原型に基づく言語で、クラスの概念がなく、独立したオブジェクト作成方法|𐥎8|
    オブジェクト1を作成します.オブジェクト範囲の
  • 最も一般的なJavaScriptを使用してオブジェクトを作成
  • カッコを使用したオブジェクトの作成
    ->かっこで1つ以上のプロパティを記述すると、そのプロパティが追加されたオブジェクトが作成されます.
    ->かっこに何も明記しない場合は、空のオブジェクト
  • が作成されます.
    var emptyObject = {};
    console.log(typeof emptyObject); // object
    var person = {
      name: 'Lee',
      gender: 'male',
      sayHello: function () {
        console.log('Hi! My name is ' + this.name);
      }
    };
    console.log(typeof person); // object
    console.log(person); // {name: "Lee", gender: "male", sayHello: ƒ}
    person.sayHello(); // Hi! My name is Lee
    オブジェクト2を作成します.オブジェクトジェネレータ関数
  • new演算子とオブジェクトコンストラクション関数->空のオブジェクトの作成->オブジェクトを完了するための他のPropertyまたはメソッドの追加
  • オブジェクト文字方式:オブジェクトジェネレータ関数生成オブジェクトのサムネイル表現を簡略化(short-hand)
    ->JavaScriptエンジンオブジェクト文字でオブジェクトを生成するコードに遭遇すると、内部でオブジェクトジェネレータ関数を使用してオブジェクトを生成します
    ->したがって、開発者はオブジェクトジェネレータ関数を故意に使用してオブジェクト
  • を作成する必要はほとんどありません.
  • JavaScriptは、オブジェクトコンストラクション関数に加えて、コンストラクタ関数(String、Number、Boolean、Array、Date、RegExpなど)を生成するコンストラクタ関数
  • を提供する
    // 빈 객체의 생성
    var person = new Object();
    // 프로퍼티 추가
    person.name = 'Lee';
    person.gender = 'male';
    person.sayHello = function () {
      console.log('Hi! My name is ' + this.name);
    };
    console.log(typeof person); // object
    console.log(person); // {name: "Lee", gender: "male", sayHello: ƒ}
    person.sayHello(); // Hi! My name is Lee
    オブジェクト3の作成方法コンストラクタ
  • クラスベースのオブジェクト向け言語のジェネレータ:ジェネレータ関数のフォーマット
  • javascriptのコンストラクション関数:既存の関数と同じ方法でコンストラクション関数を宣言し、new演算子呼び出しを貼り付けます.この関数はコンストラクション関数として動作します.
    ->new演算子をコンストラクション関数ではなく一般関数に貼り付けて呼び出し、コンストラクション関数のように操作できます.
    ->したがって、ジェネレータ関数名は通常、最初の文字を大文字で記述し、混乱を防止します
  • これに関連付けられたPropertyおよびメソッド:public(外部から参照可能)
    コンストラクション関数で宣言される一般変数:private(外部参照不可)
  • function Person(name, gender) {
      var married = true;         // private
      this.name = name;           // public
      this.gender = gender;       // public
      this.sayHello = function(){ // public
        console.log('Hi! My name is ' + this.name);
      };
    }
    var person = new Person('Lee', 'male');
    console.log(typeof person); // object
    console.log(person); // Person { name: 'Lee', gender: 'male', sayHello: [Function] }
    console.log(person.gender);  // 'male'
    console.log(person.married); // undefined