書かれたコードはファイル、つまりハードディスク（外部ストレージ）に保存されます。
.htmlファイルブラウザ(アプリケーション)をダブルクリックしてファイルを読み取り、ファイルの内容をメモリにロードします(データフローの方向:ハードディスク=>メモリ)。
ブラウザはユーザーが書いたコードを解析し、そのコードをコンピュータが認識できるバイナリ命令に変換します(インタプリタの働き)
取得されたバイナリ命令はCPUにロードされて実行されます(データの流れの方向:メモリ=> CPU)。

ブラウザはレンダリングエンジン +JS エンジンに分かれます。

レンダリングエンジン: HTML + CSSを解析、通称「カーネル」
JSエンジン:つまり、JSインタープリター。典型的なのはChromeの組み込みV8です。

JavaScriptの構成

ECMAScript (略してES ): JavaScript構文
DOM:ページドキュメントオブジェクトモデル。ページ内の要素を操作します。
BOM:ブラウザオブジェクトモデル。ブラウザウィンドウ上で操作します。

JS 構文だけでは、一部の基本的なロジック処理しか記述できません。

しかし、より複雑なタスクを実行し、ブラウザーやページとの対話を完了するには、長い間 DOM API と BOM API が必要でした。

重要な概念: ECMAScript

これは一連の「標準」であり、どのような種類の JS エンジンであっても、この標準に準拠する必要があります。

予備知識

<script>
    alert("你好!");
</script>

JavaScript コードは HTML スクリプトタグに埋め込むことができます。

JavaScriptの記述形式

1.インライン

HTML 要素内に直接埋め込む

<input type="button" value="点我一下" onclick="alert('haha')">

知らせ

JSの文字列定数は、一重引用符または二重引用符で表現できます。
HTMLでは二重引用符が推奨され、 JSでは単一引用符が推奨されます。

2.埋め込み型

script タグに書き込む

<script>
    alert("haha");
</script>

3. 外部式

別の.js ファイルに書き込む

<script src="hello.js"></script>

alert("hehe");

この場合、script タグの途中にコードを記述することはできず、空にする必要があります (記述してもコードは実行されません)。

ノート

単一行コメント // [推奨]

複数行のコメント /* */

コメントを切り替えるには、ctrl + /を使用します。
複数行のコメントを入れ子にすることはできません。

入出力

入力: プロンプト

入力ボックスをポップアップ表示する

// 弹出一个输入框
prompt("请输入您的姓名:");

出力: アラート

警告ダイアログボックスをポップアップ表示し、結果を出力します

// 弹出一个输出框
alert("hello");

+は文字列の連結を示します。つまり、2 つの文字列が端から端まで接続されて文字列を形成します。
\n は改行を意味します

選択ボックス: 確認

選択ダイアログが表示されるので、確認またはキャンセルします

// 弹出选择框
confirm("确认删除吗？");

出力: console.log

コンソールにログを出力します ( プログラマが確認できるように )

// 向控制台输出日志
console.log("这是一条日志");

VSCode に直接「log」と入力し、Tab キーを押すと、すぐに console.log と入力できます。

結果を確認するには、ブラウザの開発者ツール (F12) => [コンソール] タブを開く必要があります。

重要な概念 : ロギング

ログはプログラマーがプログラムをデバッグするための重要な手段です

重要な概念 : 。

コンソールは jsの「オブジェクト」です

オブジェクト内の特定のプロパティまたはメソッドを取得することを示します。「の」と直感的に理解できます。

console.log は次のように理解できます。「console 」オブジェクトの「logメソッド」を使用します。

文法の概要

JavaScript の設計概念の一部は Java とはかけ離れていますが、基本的な文法レベルでは類似点がいくつかあり、Java の基礎があれば、JavaScript の基本的な文法の一部を簡単に理解できます。

変数の使用

基本的な使い方

変数の作成（変数定義/変数宣言/変数初期化）

var name = 'zhangsan';
var age = 20;

varはJSのキーワードであり、これが変数であることを示します。
= はJSの「代入」を意味し、メモリボックスにデータを入れることに相当します。 =の両側にはスペースを入れることをお勧めします。
各ステートメントは最後に;で終わります。JSでは省略できますが、追加することをお勧めします。
ここの;は英語のセミコロンであることに注意してください。JS内のすべての句読点は英語の句読点です。
初期化された値が文字列の場合は、一重引用符または二重引用符で囲む必要があります。
初期化された値が数値の場合は、直接割り当てることができます。

変数を使用する

console.log(age); // 读取变量内容
age = 30;         // 修改变量内容

動的型付けを理解する

1) JS の変数の型はプログラムの実行中に決定されます ( 型は=文の実行時にのみ決定されます )

var a = 10;     // 数字
var b = "hehe"; // 字符串

2) プログラムが実行されると、変数の型が変化する可能性があります。

var a = 10;    // 数字
a = "hehe";    // 字符串

基本的なデータ型

JS に組み込まれたいくつかの型

数値:数値。整数と小数は区別されません。
ブール値: true true 、 false false 。
文字列:文字列型。
unknown:固有の値のみunknown 未定義の値を示します。
null：一意の値null のみ、null 値を示します。

数値数値型

JS は整数と浮動小数点数を区別せず、「数値型」を使用してそれらを統一的に表現します。

デジタル表現

var a = 07;      // 八进制整数, 以 0 开头
var b = 0xa;     // 十六进制整数, 以 0x 开头
var c = 0b10;    // 二进制整数, 以 0b 开头

注 :

1 つの 8 進数は 3 つの 2 進数に対応します
1 つの 16 進数は 4 つの 2 進数に対応します( 2 つの 16 進数が 1 バイトです) 。

特殊な数値

Infinity :任意の数値より大きい無限大。数値がJSで表現できる範囲を超えたことを意味します。
-Infinity:負の無限大、任意の数値より小さい数値がJSで表現できる範囲を超えたことを意味します。
NaN:現在の結果が数値ではないことを示します。

var max = Number.MAX_VALUE;
// 得到 Infinity
console.log(max * 2);
// 得到 -Infinity
console.log(-max * 2);
// 得到 NaN
console.log('hehe' - 10);

注 :

負の無限大と無限小は同じものではありません。無限小は0 に無限に近づくことを意味し、値は1 / 無限大です
'hehe' + 10の結果はNaNではなく'hehe10'となり、暗黙的に数値を string に変換し、その string を連結します。
isNaN関数を使用すると、それが非数値かどうかを判断できます。

string文字列型

基本的なルール

文字列リテラルは、一重引用符または二重引用符のいずれかで囲む必要があります。

文字列にすでに引用符が含まれている場合は、エスケープ文字を使用する必要があります。

エスケープ文字

文字によっては直接入力するのが不便なため、特別な方法で表現する必要があります。

長さを求めます

String の長さプロパティを使用する

文字列の連結

+を使用して結合します
数値と文字列も連結できます

ブール値ブール型

「true」と「false」を示します

Boolean が演算に関与する場合、 1および0として扱われます。

未定義未定義のデータ型

変数が初期化されていない場合、結果は unknownとなり、タイプはunknown になります。

var a;
console.log(a)

unknownと string を追加すると、結果は文字列連結になります。

console.log(a + "10");  // undefined10

数値に未定義を加算すると、結果は NaNになります

console.log(a + 10);

null空値型

null は、現在の変数が「null 値」であることを示します。

var b = null;
console.log(b + 10);    // 10
console.log(b + "10");  // null10

注 :

nullとunknown はどちらも不正な値を示しますが、強調する点が異なります。
Null は、現在の値が空であることを意味します(空のボックスがあることと同等) 。
未定義は、現在の変数が未定義であることを意味します(ボックスすらないことと同等) 。

オペレーター

JavaScript の演算子は基本的に Javaの演算子と同じです

算術演算子

代入演算子と複合代入演算子

インクリメント演算子とデクリメント演算子

++: 1ずつ増加します
--: 1減算

比較演算子

<
>
<=
>=
==等しいと比較します(暗黙的な型変換を実行します)
!=
===等しいと比較します(暗黙的な型変換はありません)
!==

論理演算子

複数のブール式を評価するために使用されます。

&&および: 1 つの false は false
||または: 1 つの true が true
!非

ビット演算

&ビット単位の AND
|ビットごとのまたは
~ビット単位の否定
^ビットごとの XOR

シフト操作

<<左にシフト
>>符号付き右シフト(算術右シフト)
>>>符号なし右シフト(論理右シフト)

条件文

ifステートメント

基本的な文法形式

条件式が真の場合、 ifの{ }内のコードを実行します。

// 形式1
if (条件) {
    语句
}
// 形式2
if (条件) {
    语句1
} else {
    语句2
}
// 形式3
if (条件1) {
    语句1
} else if (条件2) {
    语句2   
} else if .... {
    语句...
} else {
    语句N
}

三項式

これはif else の簡略化された書き方です。

条件 ? 表达式1 : 表达式2

条件が true の場合は、 expression1の値を返し、条件が false の場合は、expression2の値を返します。

スイッチ

複数ブランチのシナリオにより適しています

switch (表达式) {
    case 值1:
        语句1;
        break;
    case 值2:
        语句2:
        break;
    default:
        语句N;
}

ループ文

いくつかの発言を繰り返す

whileループ

while (条件) {
    循环体;
}

実行プロセス：

条件文
条件がtrue の場合、ループ本体のコードを実行します。
条件がfalse の場合、ループは直接終了します

続く

このループを終わらせる

壊す

ループ全体を終了する

forループ

for (表达式1; 表达式2; 表达式3) {
 循环体
}

式1:ループ変数を初期化するために使用されます。
式2：ループ条件
式3:ループ変数の更新

実行プロセス：

最初に式1 を実行し、ループ変数を初期化します
式2を再度実行してループ条件を決定します
条件がfalse の場合、ループを終了します
条件がtrue の場合、ループ本体のコードを実行します。
式3を実行してループ変数を更新します

配列

配列を作成する

新しいキーワードを使用して作成されました

// Array 的 A 要大写
var arr = new Array();

リテラルメソッドを使用して [ 一般的に使用される ]を作成します

var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"

JS配列では要素が同じ型である必要はありません

配列要素を取得する

添字を使用して配列要素にアクセスします( 0から始まります)
添字が要素の読み取り範囲外の場合、結果は未定義です

新しい配列要素を追加する

1. 長さ を変更して 追加

これは最後に要素を追加するのと同じであり、新しく追加された要素のデフォルト値は未定義です

2. 下付き文字で追加

添字が割り当てられた要素の範囲を超える場合、指定された位置に新しい要素が挿入されます

3. プッシュを 使用して 要素を追加します

var arr = [9, 5, 2, 7, 3, 6, 8];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
   newArr.push(arr[i]);
}

配列内の要素を削除する

スプライス方法を使用して要素を削除する

var arr = [9, 5, 2, 7];
// 第一个参数表示从下表为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
arr.splice(2, 1);
console.log(arr);
// 结果
[9, 5, 7]

関数

文法形式

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
    函数体
    return 返回值;
}
// 函数调用
函数名(实参列表)           // 不考虑返回值
返回值 = 函数名(实参列表)   // 考虑返回值

関数定義は関数本体の内容を実行するのではなく、実行する前に関数を呼び出す必要があり、複数回呼び出された後、数回実行されます。
関数が呼び出されると、関数の内部実行に入り、関数が終了すると呼び出し元の場所に戻って実行を継続します。これはデバッガを使用して観察できます。
関数の定義と呼び出しの順序に制限はありません（変数とは異なり、変数は使用前に定義する必要があります）。

パラメータ数について

実パラメータと仮パラメータの数は一致しない場合がありますが、実際の開発では一般に仮パラメータと実パラメータの数が一致している必要があります。

1)実パラメータの数が仮パラメータの数より多い場合、余分なパラメータは関数の動作に参加しません。
2)実パラメータの数が仮パラメータの数より少ない場合、このときの追加の仮パラメータの値は不定です

関数式

関数を定義する別の方法

var add = function() {
 var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
   }
    return sum;
}
console.log(add(10, 20));            // 30
console.log(add(1, 2, 3, 4));        // 10
console.log(typeof add);             // function

function() { } のような文言は、匿名関数を定義し、その匿名関数を変数で表します。

範囲

コード内の識別子の有効範囲。

ES6 規格以前は、範囲は主に 2 つに分かれていました。

グローバルスコープ:スクリプトタグ全体、または別のjsファイルで有効になります。
ローカルスコープ/関数スコープ:関数内で有効になります。

スコープチェーン

背景 :

関数内で関数を定義できる
内部関数は外部関数のローカル変数にアクセスできます。

物体

基本的な考え方

オブジェクトは特定のものを指します

JS では、文字列、数値、配列、関数はすべてオブジェクトです。

各オブジェクトには、いくつかのプロパティとメソッドが含まれています。

属性:物事の特徴。
方法:物事の動作。

JavaScriptオブジェクトとJavaオブジェクトの概念は基本的に同じですが、特定の構文テーブルのエントリが大きく異なるだけです。

1.リテラルを使用してオブジェクトを作成する[一般的に使用される]

{ } を使用してオブジェクトを作成する

{ }を使用してオブジェクトを作成する
プロパティとメソッドは、キーと値のペアとして編成されます。
キーと値のペアの間で使用され、分割されます。最後の属性の後、オプション
使用方法:キーと値を分割します。
メソッドの値は匿名関数です

2.新しいオブジェクトを使用してオブジェクトを作成します

var student = new Object(); // 和创建数组类似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {
    console.log("hello");
}

3.コンストラクターを使用してオブジェクトを作成する

これまでのオブジェクト作成方法では 1 つのオブジェクトしか作成できませんでしたが、コンストラクターを使用すると複数のオブジェクトを簡単に作成できます。

function 构造函数名(形参) {
    this.属性 = 值;
    this.方法 = function...
}
    
var obj = new 构造函数名(实参);

注 :

コンストラクター内でthisキーワードを使用して、現在構築中のオブジェクトを示します。
コンストラクターの関数名の最初の文字は通常大文字です。
コンストラクターの関数名には名詞を使用できます。
コンストラクターは戻る必要はありません
newキーワードは、オブジェクトを作成するときに使用する必要があります。

JavaScript (基本文法)

JavaScriptについて知る

JavaScriptとは何ですか

開発の歴史

JavaScriptとHTML 、CSSの関係

JavaScript実行プロセス