JavaScriptコアリーディング：言語コア_基礎知識

この本を読む前に、この JavaScript コアを翻訳してくれた Taobao 技術チームに感謝し、この本を書いてくれた Flanagan に感謝したいと思います。無私無欲の情報共有に感謝し、このメモをあなたの勤勉に捧げます。

1: JavaScript 言語コア

この章以降では、主に JavaScript の基本に焦点を当てます。第 2 章では、JavaScript のコメント、セミコロン、Unicode 文字セットについて説明します。第 3 章では、主に JavaScript の変数と代入について説明します。

最初の 2 章の重要なポイントを示すコード例をいくつか示します。

コードをコピーします コードは次のとおりです:

//二重スラッシュ以降はコメントです //ここのコメントを注意深く読んでください。JavaScript コードについて説明しています
// 変数は値を表す記号名です
// 変数は var キーワード
を使用して宣言されます var x //変数 x
を宣言します。 //シンボルを介して変数に値を割り当てることができます
x = 0 //変数 x の値は 0
;                                                                        
//JavaScript は複数のデータ型をサポートします
x = 1; //数値
x = 0.01 //整数と実数は同じデータ型を共有します
x = "hello world" // 二重引用符で囲まれたテキストで構成される文字列
; x = 'hello world' //一重引用符も文字列を形成します。
x = true; // ブール値
x = false; //別のブール値
x = null; //null は特別な値です。それは空を意味します
x = 未定義 //未定義と null は非常に似ています
                                                                                         

JavaScript で最も重要な型はオブジェクトと配列です。第 6 章ではオブジェクトを紹介し、第 7 章では配列を紹介します。 JavaScript ではオブジェクトと配列が非常に重要です。この本のいたるところでそれらを見ることができるほどです。

コードをコピー コードは次のとおりです:

//JavaScript で最も重要な型は object
です //オブジェクトは、名前と値のペアのコレクション、またはマップされた値に文字列値のコレクションです。
var book = { //オブジェクトは中括弧で囲まれています
topic: "javascript", //属性「topic」の値は javascript
fat: true //属性 fat の値は true
} // 右側の中括弧の終わり。
//「.」または「[]」を通じてオブジェクトのプロパティにアクセスします。
book.topic //=>"javascript"
book["fat"] //=>true 属性を取得する別の方法、
book.author = "ahthw" //割り当てを通じて新しい属性を作成します
; book.content = {}; //{} は空のオブジェクトです。属性はありません
//JavaScript は配列 (配列によってインデックス付けされたリスト) もサポートします
var primes = [2, 3, 5, 7] // "[""]" で区切られた 4 つの値の組み合わせ
primes[0] //=>2: 配列の最初のオブジェクト、インデックスは 0
primes.length //=>4、配列
の要素の数 を使用する‐ primes[primes.length‐1] //=>7: 配列
の最後の要素 primes[4] =9 //代入を通じて新しい要素を追加します
primes[4] =11;//代入を通じて既存の要素を変更します
var empty = [];//空の配列、要素数 0
空の。 //配列とオブジェクトには別の配列またはオブジェクトを含めることができます。
var point =[ //2 つの要素を持つ配列
{x:0,y:0}, //各要素はオブジェクトです
{x:1,y:1}
];
Var data = {// 2 つの属性を含むオブジェクト
Trial1:[[1,2],[3,4]], //各オブジェクトは配列
Trial2:[[2,3],[4,5]] //配列の要素も配列です
};
                                                                                         

上記のコードで、角括弧で配列要素を定義し、中括弧でオブジェクトの属性名と属性値の間のマッピング関係を定義する構文は、Chen Wei の初期化式 (イニシャライザ式) であり、第 2 章で特別に紹介されています。 4. 式は JavaScript の句であり、値を取得するために計算できます。「,」および「[]」を使用してオブジェクトのプロパティまたは配列要素の値を参照し、式を形成します。

JavaScript で式を記述する最も一般的な方法は、次のコードのような演算子です

コードをコピー コードは次のとおりです:

//演算子は演算子として機能し、新しい値を生成します
//最も一般的な算術演算子
3 2 // =>5 加算
3-2 // =>引き算
3*2 // =>乗算
// => Point[1].x -point[0].x //=>複雑な操作も通常通り実行可能
"3" "2" // => 32. 加算演算も完了し、文字列の連結も完了します。
//JavaScript では一部の算術演算子を短縮形式として定義しています
var count = 0 //変数を定義します
カウント ; // 1 ずつ増加します
カウント - ; ’'s's's s together out out out out out out out nes s s s t mp' '' ft ft off off off off off Off Off 1 Way t Count *= 3 // Self-ride 3. "Count = Count *3;" を書き込みます。 // =＆gt; //等価関係演算子は、2 つの値が等しいかどうかを判断するために使用されます
//不等号、大なり、小なり演算子の結果は true または false
var x=2,y=3; x == y; ×！ = y;                                                                                    x y; x >= y; "two"=="three"; //false 2 つの文字列は等しくありません
"two" > "three" //true "tw" は "th" よりも大きいインデックスを持ちます
false == (x>y); //ture false =false;
//論理演算子はブール値の組み合わせまたは否定です
(x == 2)&&(y==3); //=>true 両方の比較が真です。&& は "AND"
(x > 3) || (y true!

JavaScriptの「フレーズ」が式の場合、その文全体をステートメントと呼びますが、これについては第5章で詳しく説明します。

上記のコードでは、セミコロンで終わる行はすべてステートメントです。大まかに言えば、式は値 (またはそこに含まれる値は気にしません) を計算するだけですが、プログラムの実行状態を変更します。上記では、変数宣言ステートメントと代入ステートメントを見てきました。もう 1 つのステートメントは、条件判定やループなどの「制御構造」です。関数を紹介した後、関連するサンプル コードを示します。

関数は、一度定義して複数回使用できる名前とパラメーターを持つ JavaScript コード セグメントです。第 8 章では、機能について形式的に詳しく説明します。オブジェクトや配列と同様に、関数についても本書の多くの場所で言及されています。簡単なコード例をいくつか示します。

コードをコピーします コードは次のとおりです:

//関数は処理パラメータを含む JavaScript コードセグメントであり、複数回ディスパッチできます
function plus1(x) { //plus1 という名前の関数はパラメータ x
で定義されています Return x 1; //渡された値より 1 大きい値を返します。
//関数のコードブロックは、カーリーブレースに包まれた部品です
plus1(y) //
VAR SQUARE = FUNCTION (X) {// 関数は変数
に代入できる値です Return x*x; // 関数
の値を計算します。 }; // 代入ステートメントの終わりを送信します
square(plus1(y));

関数とオブジェクトを一緒に記述すると、関数は「メソッド」をプログラムします

コードをコピー コードは次のとおりです:

//関数がオブジェクトのプロパティに値を割り当てるとき、それを
と呼びます //「メソッド」、すべての JavaScript オブジェクトにはメソッドが含まれます
Var a = [] // 空の配列を作成します
a.push(1,2,3); a.reverse(); // document.write（a）
// 子のメソッドを定義できます。「this」キーワードが定義メソッドです
ここでの例は、上記の2つのポイントの位置情報を含む配列です。
POINTS.DIST = Function () {// 2 点間の距離を定義して 2 点間の距離を計算します
Var p1 = this [0] // このキーワードによる現在の配列への参照
; var p2 =this[1] //そして、呼び出された配列の最初の 2 つの要素を取得します
Var a = p2.x- p1.y // 座標軸上の X の距離
var b =p2.y - p1.y; //y座標軸上の距離
return Math.sqrt(a * a "b * b); //ピタゴラスの定理
}; //Math.sqrt() は平方根を計算します
Points.dist() // => 2 点間の距離を求める


次に、制御ステートメントの例をいくつか示します。ここでの関数本体の例には、最も一般的な JavaScript 制御ステートメントが含まれています。

コードをコピー コードは次のとおりです:

//ここでの JavaScript ステートメントは、条件判断とループを含めるためにこの構文を使用しています
//Java C やその他の言語と同様の構文を使用します
function abs(x) { //絶対値関数を求める
If (x >= 0) { //if
Return x; // true の場合、このコードを実行します
} Else {// false は
を実行します return -x;
}
}
function fatprial(n) { //階乗を計算します
var product = 1 //product に値を 1
として代入します。 While (n & gt; 1) {// () 値式は {} content
を実行します Product *= n; //product = product * n
の略語 n--; // n = n-1 の書き込み
// ループの終わり
// 商品を返品
}
fatprial(4) // =>24 1*4*3*2 document.write(factprial(4))
function fastial2(n) { //ループを記述する別の方法
var i, product = 1; for (i = 2; i Product *= i // 循環本体、循環本体にコードが 1 つしかない場合は、{}
を省略します。 return product; // 適切な階乗を計算して返します
}
階乗2(5) //document.write(factorial2(5)) =>120: 1*2*3*4*5

JavaScript はオブジェクト指向プログラミング言語ですが、従来のページ オブジェクトとは大きく異なります。第 9 章では JavaScript のオブジェクト指向の性質について詳しく説明します。この章にはサンプル コードが豊富に含まれています。この本の中で最も長い章。

これは簡単な例です。このコードは、2D 面のジオメトリ内の点を表すクラスを JavaScript で定義する方法を示しています。このクラスによってインスタンス化されたオブジェクトには、変化点から原点までの距離を計算するために使用される r() という名前のメソッドがあります。

コードをコピー コードは次のとおりです:

//新しいポイントオブジェクトを初期化するコンストラクターを定義します
function Point(x, y) { //コンストラクターは通常、大文字
で始まります This.x = x //キーワード this は初期化されたインスタンスを参照します
this.y = y // オブジェクトの属性としてのストレージ関数パラメータ
}
//新しいキーワードとコンストラクターを使用してインスタンスを作成します
var p = new Point(1, 1) //平面ジオメトリの点 1,1,
; //コンストラクター プロトタイプ オブジェクトを介して値を割り当てます
// Point オブジェクトを定義します
Point.prototype.r = function() {
return Math.sqrt( // x の 2 乗、y の 2 乗の平方根を返します
This.x * this.x //this は、このメソッドを送出するオブジェクトを参照します
This.y * this.y);
};
//ポイント インスタンス オブジェクト p (およびすべてのポイント インスタンス オブジェクト) はメソッド r()
を継承します。 p.r() // => 1.4142135623730951 /document.write(p.r())

第 9 章は最初の部分 の本質です。後続の章は散発的に拡張されており、JavaScript の探求の終わりにつながります。

第 10 章では主に、正規表現を使用したテキスト マッチング パターンについて説明します。

第 11 章は、コア JavaScript 言語 のサブセットおよびスーパーセットです。

クライアント側 JavaScript の内容に入る前に、第 12 章では、Web の外部にある 2 つの JavaScript 実行環境を紹介するだけで済みます。

2. クライアント JavaScript

JavaScript 言語の中核部分には相互参照が多く、知識の階層が明確ではありません。クライアントサイド JavaScript のコンテンツ レイアウトは大きく変更されました。この章に従うことで、Web ブラウザで JavaScript を使用できるようになります。 (ただし、この本を読んで JavaScript を学びたい場合は、第 2 部だけに集中することはできません) 第 13 章は第 2 部の最初の章であり、Web ブラウザで JavaScript を実行する方法を紹介します。 第 14 章では、Web ブラウザのスクリプト テクノロジについて説明し、クライアント側 JavaScript の重要なグローバル機能について説明します。

例:

コードをコピーします コードは次のとおりです:

関数 moveon() {
//ダイアログボックスから質問する
varanswer =confirm("準備はできていますか?");
// [OK] をクリックすると、ブラウザに新しいページが読み込まれます
If (回答) window.location = "http://www.baidu.com";
}
//1分(60000ミリ秒)後にこの関数を実行します
setTimeout(moveon,300);

第 15 章では、JavaScript が HTML スタイル定義コンテンツの表示をどのように操作するかについて説明します 第 15 章の内容は、スクリプトを使用して HTML ドキュメントのコンテンツを操作する、より実用的なものであり、選択方法を示します。特定の Web ページ要素、HTML 要素の属性を設定する方法、要素のコンテンツを変更する方法、ドキュメントに新しいノードを追加する方法

次の関数例は、基本的な記事コンテンツを検索して変更する方法を示しています

コードをコピー コードは次のとおりです:

// ドキュメント内の指定情報のエリアツリーにスーパーデバッグ情報
//この要素がドキュメントに存在しない場合は、
を作成します 関数デバッグ(msg) {
// HTML 要素の id 属性を調べて、ドキュメントのデバッグ部分を見つけます
var log = document.getElementById("debuglog");

//要素が存在しない場合は、要素を作成します
if (!log) {
log = document.createElement("div") // 新しい div 要素を作成します
log.id = "debuglog"; log.innerHTML = "

デバッグログ

" //初期コンテンツをカスタマイズします
document.body.appendChild(log) // ドキュメントの最後に追加します
}
//

 にメッセージを含めてログに追加します<br>
var pre = document.createElement("pre") // pre 要素を作成します<br>
var text = document.createElement(msg) //テキストノードにメッセージを含めます <br>
pre.appendChild(text) //テキストが pre<br> に追加されます。
log.appendChild(pre) //pre が log<br> に追加されます。
}<br>
<br>

第 16 章では、JavaScript を使用して要素 を操作する方法について説明します。これには通常、要素 の style 属性と class 属性が使用されます。

コードをコピーします コードは次のとおりです:

function hide(e, reflow) { //jvascript を通じて要素を操作し、要素を非表示にする e
if (reflow) { //2 番目のパラメータが true の場合
e.style.display = "none" //この要素を非表示にすると、それが占有するスペースも販売されます
} else {
e.style.visibility = "hidden" // e を非表示にし、それが占めるスペースを保持します
}
}
function highlight(e) { //css を設定して e を強調表示

If (!e.className) e.className = "highcss";
それ以外の場合 e.className = "highcss";
}

JavaScript を使用して要素のコンテンツと CSS スタイルを制御でき、イベント ハンドラーを使用してドキュメントの動作を定義することもできます。イベント ハンドラーはブラウザー センターに登録された JavaScript 関数であり、特定のイベントが発生すると、ブラウザーはこれを呼び出すことができます。関数。
通常、私たちが懸念するイベントの種類は、マウスのクリックとキーボードのキー イベントです (スマートフォンの場合はさまざまなタッチ イベントです)。つまり、ブラウザがドキュメントの読み込みを完了したとき、ユーザーがウィンドウのサイズを変更したとき、またはユーザーがフォームにデータを入力したときに、ヒューマン イベントがトリガーされます。

第 17 章では、タイム ハンドラーを定義および登録する方法と、イベント発生時にブラウザがタイム ハンドラーを呼び出す方法について詳しく説明します。

イベント ハンドラーをカスタマイズする最も簡単な方法は、コールバックを onclick という接頭辞を付けた HTML 属性にバインドすることです。最も実用的な方法は、コールバックを "onclick" ハンドラーにバインドすることです。上記の debug() 関数と Hide() 関数が debug.js ファイルと hide.js ファイルに保存されていると仮定すると、単純な HTML テスト ファイルを使用して onclick 属性のイベント ハンドラーを指定できます。以下の通り

コードをコピー コードは次のとおりです:

//ドキュメント内の指定情報のリージョンツリースーパーデバッグ情報
//この要素がドキュメントに存在しない場合は、
を作成します 関数デバッグ(msg) {
// HTML 要素の id 属性を調べて、ドキュメントのデバッグ部分を見つけます
var log = document.getElementById("debuglog");
// 要素が存在しない場合は、要素を作成します
if (!log) {
log = document.createElement("div") // 新しい div 要素を作成します
log.id = "debuglog"; log.innerHTML = "

デバッグログ

" //初期コンテンツをカスタマイズします
document.body.appendChild(log) // ドキュメントの最後に追加します
}
//

 にメッセージを含めてログに追加します<br>
var pre = document.createElement("pre") // pre 要素を作成します<br>
var text = document.createElement(msg) //テキストノードにメッセージを含めます <br>
pre.appendChild(text) //テキストが pre<br> に追加されます。
log.appendChild(pre) //pre が log<br> に追加されます。
}<br>
function hide(e, reflow) { //jvascript を通じて要素を操作し、要素を非表示にします e<br>
if (reflow) { //2 番目のパラメータが true の場合<br>
e.style.display = "none" //この要素を非表示にすると、それが占有するスペースも販売されます <br>
} else {<br>
e.style.visibility = "hidden" // e を非表示にし、それが占めるスペースを保持します <br>
}<br>
}<br>
function height(e) { //cssの設定でe<br>を強調表示する
If (!e.className) e.className = "highcss";<br>
その他<br>
e.className = "highcss";<br>
}<br>
<br>
こんにちは<br>
<button onclick="hide(this,true); debug('ボタン 1 を隠す');">hide1</button><br>
<button onclick="非表示(これ);debug('非表示ボタン 2');">非表示2<br>
<br></button>

次のクライアント側 JavaScript はイベントを使用しており、非常に重要なイベントを提供します。「load」イベントはイベント ハンドラー Chenxing を登録します。同僚は、「クリック」イベント ハンドラーを登録するより高度な方法も示しました

コードをコピー コードは次のとおりです:

//「load」イベントはドキュメントがロードされた後にのみトリガーできます
//通常、JavaScript コードを実行する前にロード イベントが発生するのを待つ必要がある場合
window.onload = function() {
//ドキュメント内のすべての img タグを検索
var image = document.getElementsByTagName("img");

//画像を走査し、各ノードのクリック イベントにハンドラーを追加します
//クリックすると画像を非表示にします
for (var i = 0; i var imge = 画像[i];
If (imge.addEventListener) //時間ハンドラーを登録する別の方法
imge.addeventlistener（ "click"、hide、false）;
else //ie8以前の操作と互換性あり
imge.attachevent（ "onclick"、hide）;
}
//これは、上記で登録されたイベントのハンドラー関数です
function hide(evnet) {
event.target.style.visibility = "hidden";
}
};

第 15 章から第 17 章では、JavaScript を使用して Web ページのコンテンツ 、スタイル、動作 (イベント処理) を制御する方法について説明します。この章で説明する API はやや複雑で、ブラウザーの性能も優れていません。多くの JavaScript プログラマがコーディング作業を簡略化するために「ライブラリ」または「フレームワーク」を使用するのはこのためです。第 19 章では jQuery ライブラリを紹介します。

コードをコピーします コードは次のとおりです:

関数デバッグ(msg) {
var log = $("#debuglog");
if (log.length == 0) {
ログ = $("

debuglog

");
Log.appendTo(document.body);
}
document.write(log)
Log.append($("

").text(msg));
};

これまで説明してきた第 2 部の 4 つの章はすべて Web ページに焦点を当てており、その後の 4 つの章ではストアと Web アプリケーションに焦点を当てます。これらの章では、コントロール コンテンツの記述方法については説明しません。スタイルと Thrive スクリプトは、Web ブラウザーを使用してドキュメントをレンダリングします。代わりに、Web ブラウザーをアプリケーション プラットフォームとして使用する方法について説明します。また、より洗練されたクライアント側 Web アプリケーションと最新のブラウザーをサポートするために使用される API についても説明します。

第 18 章では、JavaScript を使用して http リクエストを開始する方法について説明します。

第 20 章では、クライアント アプリケーションのデータ ストレージ メカニズムとセッション状態の維持について説明します。第 21 章では、HTML5 によって駆動される新世代のアプリケーション API/ネットワーク ストレージ グラフィックスと、ブラウザ開発に基づくこれらのサポートについて説明します。新しい API の数。浙江省は、JavaScript プログラマーにとって最もエキサイティングな時期です。最後の 4 章にはサンプル コードがあまりありません。次の例では、これらの新しい API を使用します。