この本を読む前に、このJavaScript CoreとFlanaganがこの本を書いてくれたTaobao Technical Teamに感謝したいと思います。あなたの無私の共有をありがとう、そしてこのメモだけがあなたのハードワークに捧げられています。
1：JavaScript言語コア
この章の後、主にJavaScriptの基本に焦点を当てます。第2章JavaScriptのコメント、セミコロン、ユニコード文字セットについて説明します。第3章は、主にJavaScriptの変数と割り当てを説明するより興味深いものになります
最初の2つの章の重要な内容を説明するためのいくつかの例コードを次に示します。
コードコピーは次のとおりです。
<script type = "text/javascript">
//ダブルスラッシュの後のコンテンツはコメントに属します
//ここでコメントを注意深く読むと、JavaScriptコードについて説明します
//変数は値を表すシンボリック名です
//変数はVARキーワードを介して宣言されます
var x; //変数xを宣言します
//値はシンボルを介して変数に割り当てることができます
x = 0; //変数xの値は0になります
x //変数名で値を取得します。
// JavaScriptは複数のデータ型をサポートしています
x = 1; //番号
x = 0.01; //整数と実数はデータ型を共有します
x = "hello world"; //二重引用符で一連のテキストを作成します
x = 'hello world'; //単一の引用も文字列を形成します。
x = true; // boolean
x = false; //別のブール値
x = null; // nullは特別な値です。空の意味
x =未定義; //未定義でヌルは非常に似ています
</script>
JavaScriptでは、最も重要なタイプはオブジェクトと配列です。第6章ではオブジェクトを紹介し、第7章では配列を紹介します。 JavaScriptでは、オブジェクトと配列が非常に重要です。この本のどこでも見ることができるほどです。
コードコピーは次のとおりです。
<script type = "text/javascript">
// JavaScriptで最も重要なタイプはオブジェクトです
//オブジェクトは、名前/値のペアのコレクション、またはマッピングされた値への文字列値のコレクションです。
var book = {//オブジェクトは巻き毛装具に囲まれています
トピック：「JavaScript」、//属性の値「トピック」はJavaScriptです
脂肪：true //脂肪の価値は真です
}; //右端の巻き毛の装具。
// "。"。 "。または "[]"。
book.topic // =>「JavaScript」
book ["fat"] // =>属性を取得する別の方法、
book.author = "ahthw"; //割り当てによって新しい属性を作成します
book.content = {}; // {}は空のオブジェクトです。属性はありません
// javascriptはアレイもサポートしています（配列によってインデックス化されたリスト）
var primes = [2、3、5、7]; // 4つの値の組み合わせがあり、境界は「["" "]」によって描画されます
プライム[0] // => 2：配列の最初のオブジェクト、インデックスは0です
primes.length // => 4、配列内の要素の数
Primes [Primes.length-1] // => 7：配列の最後の要素
プライム[4] = 9; //割り当てによって新しい要素を追加します
プライム[4] = 11; //割り当てによって既存の要素を変更します
var empty = []; //空の配列、0の要素
empty.length // =>：0
//配列とオブジェクトには、別の配列またはオブジェクトを含めることができます。
var point = [// 2つの要素を持つ配列
{x：0、y：0}、//各要素はオブジェクトです
{x：1、y：1}
];
var data = {// 2つの属性を含むオブジェクト
試行1：[[1,2]、[3,4]]、//各オブジェクトは配列です
試用2：[[2,3]、[4,5]] //配列の要素も配列です
};
</script>
上記のコードの構文は、正方形の括弧を介して配列要素を定義し、オブジェクト属性名と属性値間のマッピング関係をcurlyブラケットを介して定義します。第4章が特に紹介されています。式はJavaScriptのフレーズです。このフレーズは、値を取得するために計算し、「、」、「[]」を介してオブジェクト属性または配列要素の値を参照して式を形成できます。
JavaScriptの最も一般的な表現作成方法は、次のコード（Oprator）のような演算子です
コードコピーは次のとおりです。
//オペレーターとしてのオペレーターは、新しい値を生成します
//最も一般的な算術演算子
3+2 // => 5追加
3-2 // =>減算
3*2 // =>複数
3/2 // =>分割
ポイント[1] .x -point [0] .x // =>複雑な操作も通常どおり機能します
"3"+"2" // => 32。追加操作または文字列スプライシングを完了できます。
// JavaScriptは、一部の算術演算子を略語として定義します
var count = 0; //変数を定義します
count ++; // 1増加します
カウント - ; // 1による減少
count += 2; //自動インクリメント2は「count = count + 2;」と同じです。
count *= 3 //3。「count = count *3;」と同じ方法書かれています
count // => 6：変数名自体も式です
//平等関係演算子は、2つの値が等しいかどうかを判断するために使用されます
//不平等で、より大きく、オペレーターの操作の結果よりも少ない
var x = 2、y = 3; //ここでの等記号は、比較的等しくない割り当てを意味します
x == y; // => false等しい
x！ = y; // => true
x <y; // => true：それ以下
x <= y; // trueはそれほど等です
x> y; // falseよりも
x> = y; // false以上のfalse
「2」== "3"; // false 2つの文字列は等しくありません
「2」>「3」; //アルファベットの「TW」のインデックスは「TH」よりも大きいです
false ==（x> y）; // false = false;
//論理演算子は、ブール値のマージまたは逆です
（x == 2）&&（y == 3）; // => trueの両方の比較はtrueです。&& is "and"
（x> 3）||（y <3）; // => falseどちらの比較も真でありません。 || 「または」を意味します
！ （x == y）; // => true！逆検索を示します
JavaScriptの「フレーズ」が式である場合、文全体がステートメントと呼ばれ、第5章で詳しく説明します。
上記のコードでは、セミコロンで終わる行はすべてステートメントです。大まかな方法では、式は1つの値（または含む値が関係しない）のみを計算しますが、プログラムの実行状態を変更します。上記では、変数宣言ステートメントと割り当て声明が見られました。別のタイプのステートメントは、条件付き判断やループなどの「制御構造」です。関数を導入した後、関連する例コードを提供します。
関数は、一度に複数回使用できる名前とパラメーターを備えたJavaScriptコードスニペットです。第8章では、機能を正式に詳細に説明します。オブジェクトや配列のように、この本の多くの場所で関数が言及されているため、ここに簡単な例コードがあります。
コードコピーは次のとおりです。
//関数は、トリートパラメーターを備えたJavaScriptコードセグメントであり、複数回転送できます
function plus1（x）{//パラメーターxでplus1という名前の関数を定義します
x + 1を返します。 //渡されたものより1大きい値を返します。
} //関数のコードブロックは、巻き毛のブレースに包まれた部品です
Plus1（y）//
var square = function（x）{//関数は変数に割り当てることができる値です
x*xを返します。 //関数の値を計算します
}; // symicolonは、割り当てステートメントの終了を示します
正方形（Plus1（y））; // 1つの式で1つの2つの機能
関数とオブジェクトが一緒に書き込まれると、関数は「メソッド」（メソッド）でプログラムされています
コードコピーは次のとおりです。
//関数がオブジェクトの属性に割り当てられている場合、それを呼び出します
//「メソッド」、すべてのJavaScriptオブジェクトにはメソッドが含まれています
var a = []; //空の配列を作成します
A.Push（1,2,3）; // [Arrayに[Push]メソッドに配列にオブジェクトを追加します
a.Reverse（）; //データの逆転
// document.write（a）
//サブの方法を定義できます 、キーワード「This」は定義方法です
//のオブジェクトへの参照ここでの例は、上記の2つのポイント位置情報を含む配列です。
points.dist = function（）{// 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 + "we call it" + b * b）; // Pythagorean定理
}; //math.sqrt（）は平方根を計算します
points.dist（）// => 2つのポイント間の距離を見つけます
次に、制御ステートメントの例をいくつか挙げてください。ここで、例の関数には、身体の最も一般的なJavaScript制御ステートメントが含まれています。
コードコピーは次のとおりです。
//ここでJavaScriptステートメントはこの構文を使用して条件付き判断とループを含める
// Java C ++やその他の言語に似た構文が使用されます
関数abs（x）{//絶対値関数を見つけます
if（x> = 0）{// if
xを返します。 // trueの場合、このコードを実行します
} else {// false実行
return -x;
}
}
FactPrial（n）{//要因の計算
var product = 1; // 1の値を製品に割り当てます
while（n> 1）{// value expression（）がtrueの場合、{}コンテンツを実行するためにloop
製品 *= n; // product = product *略語
n - ; // n = n-1書き込み方法
} //ループが終了します
返品製品。 //製品を返します
}
factprial（4）// => 24 1*4*3*2 document.write（factprial（4））
関数因子（n）{//ループを書き込む別の方法
var i、product = 1; //
for（i = 2; i <= n; i ++）// iを2からnに増やす
製品 *= i; //ループ本体、ループ本体にコードの文が1つしかない場合、{}を省略します
返品製品。 //良好な要因を計算して返します。
}
因子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.y = y; //オブジェクトの属性としてのストレージ関数パラメーター
}
//新しいキーワードとコンストラクターを使用してインスタンスを作成します
var p = new Point（1、1）; //平面ジオメトリのポイント1、1、
//コンストラクタープロトタイプオブジェクトを介して値を割り当てます
//ポイントオブジェクトのメソッドを定義する
point.prototype.r = function（）{
Math.sqrtを返します（// x Square + y正方形の平方根を返します
this.x * this.x + //これは、この方法を輸送するオブジェクトを指します
this.y * this.y）;
};
//ポイントのインスタンスオブジェクトP（およびすべてのポイントインスタンスオブジェクト）がメソッドr（）を継承します
pr（）// => 1.4142135623730951 /document.write（pr（））
第9章は最初の部分の本質です。その後の章は散発的に拡張されており、JavaScriptの探求の終わりにつながります。
第10章では、主に正規表現によって実行されるテキストマッチングパターンについて説明しています。
第11章石膏JavaScriptの主要言語コアサブセットとスーパーセット。
クライアントにJavaScriptのコンテンツを入力する前に、第12章では、Web外で2つのJavaScriptを実行している環境を導入します。
2。クライアントJavaScript
JavaScript言語のコア部分のコンテンツ知識ポイントには多くの相互参照があり、知識の感覚は明確ではありません。クライアント側のJavaScriptのコンテンツオーケストレーションは大きく変わりました。この章によると、WebブラウザーでJavaScriptを使用できます。 （ただし、この本を読んでJavaScriptを学びたい場合は、2番目の部分だけに焦点を合わせることはできません）第13章は、WebブラウザーでJavaScriptを実行する方法を紹介する第2部の最初の部分です。第14章では、Webブラウザースクリプトテクノロジーについて説明し、クライアントJavasciptの重要なグローバル機能をカバーしています。
例えば：
コードコピーは次のとおりです。
関数moveon（）{
//ダイアログボックスを介して質問します
var回答=確認（ "準備ができていますか？"）;
// [OK]をクリックすると、ブラウザは新しいページがロードされます
if（回答）window.location = "http://www.baidu.com";
}
// 1分後にこの関数を実行します（60000ミリ秒）
Settimeout（Moveon、300）;
第15章では、JavaScriptがHTMLスタイルを操作してコンテンツの表示方法を定義する方法を説明します。第15章の内容はより実用的です。スクリプトを介して、特定のWebページ要素を選択する方法、HTML要素の属性を設定する方法、要素のコンテンツが変更された場合、およびドキュメントに新しいノードを追加する方法を示します
次の例は、基本的な記事の内容を見つけて変更するかどうかを示しています
コードコピーは次のとおりです。
//ドキュメント内の指定された情報とエリアツリーが過剰にデバッグ情報を持っています
//この要素がドキュメントに存在しない場合は、
function debug（msg）{
// HTML要素のID属性を表示して、ドキュメントのデバッグ部分を見つけます
var log = document.getElementById（ "debuglog"）;
//要素が存在しない場合は、aを作成します
if（！log）{
log = document.createelement（ "div"）; //新しいDiv要素を作成します
log.id = "debuglog"; //各要素のIDに値を割り当てます
log.innerhtml = "<h1> debug log </h1>"; //初期コンテンツをカスタマイズします
document.body.appendChild（log）; //ドキュメントの最後に追加します
}
//メッセージを<pre>に含め、ログに追加します
var pre = document.createelement（ "pre"）; // pre要素を作成します
var text = document.createelement（msg）; //テキストノードにMSGを含めます
pre.appendChild（テキスト）; // preにテキストを追加します
log.AppendChild（pre）; //ログに事前追加します
}
第16章では、JavaScriptを使用して要素を操作する方法について説明します。これは、通常、要素のスタイルとクラスの属性を使用します。
コードコピーは次のとおりです。
function hide（e、reflow）{//要素を操作し、jvascriptを介して要素eを非表示
if（refow）{// 2番目のパラメーターがtrueの場合
e.style.display = "none" //この要素を非表示にすると、それが取り上げるスペースも販売されています
} それ以外 {
e.style.visibility = "hidden"; // eを非表示にし、かかるスペースを保持します
}
}
関数ハイライト（e）{// cssを設定してeを強調表示します
if（！e.classname）e.classname = "highcss";
それ以外
e.classname += "highcss";
}
コンテンツとCSSスタイルの要素は、JavaScriptを介して制御でき、ドキュメントの動作はイベントハンドラーを介して定義することもできます。イベントハンドリングは、ブラウザセンターに登録されているJavaScript関数です。特定のイベントが発生すると、ブラウザはこの関数を呼び出すことができます。
通常、私たちが焦点を当てるイベントの種類は、マウスクリックとキーボードキーイベントです（スマートフォンはさまざまなタッチイベントです）。または、ブラウザがドキュメントの読み込みを完了すると、ユーザーがウィンドウのサイズを変更したとき、またはユーザーがデータをフォームに入力すると、個人イベントがトリガーされます。
第17章では、タイムハンドラーの定義、登録方法、およびイベントが発生したときにブラウザがそれらを呼び出す方法を詳細に説明します。
イベントハンドラーをカスタマイズする最も簡単な方法は、HTMLが付けた属性にコールバックをバインドすることです。いくつかの簡単なプログラムテストを書くとき、最も実用的な方法は、「オンクリック」ハンドラーにコールバックをバインドすることです。上記のdebug（）およびhide（）関数がdebug.jsおよびhide.jsファイルに保存されていると仮定すると、onclick属性のイベントハンドラーを指定できます。次のように
コードコピーは次のとおりです。
<script type = "text/javascript">
//ドキュメント内の指定された情報とエリアツリーが過剰にデバッグ情報を持っています
//この要素がドキュメントに存在しない場合は、
function debug（msg）{
// HTML要素のID属性を表示して、ドキュメントのデバッグ部分を見つけます
var log = document.getElementById（ "debuglog"）;
//要素が存在しない場合は、aを作成します
if（！log）{
log = document.createelement（ "div"）; //新しいDiv要素を作成します
log.id = "debuglog"; //各要素のIDに値を割り当てます
log.innerhtml = "<h1> debug log </h1>"; //初期コンテンツをカスタマイズします
document.body.appendChild（log）; //ドキュメントの最後に追加します
}
//メッセージを<pre>に含め、ログに追加します
var pre = document.createelement（ "pre"）; // pre要素を作成します
var text = document.createelement（msg）; //テキストノードにMSGを含めます
pre.appendChild（テキスト）; // preにテキストを追加します
log.AppendChild（pre）; //ログに事前追加します
}
function hide（e、reflow）{//要素を操作し、jvascriptを介して要素eを非表示
if（refow）{// 2番目のパラメーターがtrueの場合
e.style.display = "none" //この要素を非表示にすると、それが取り上げるスペースも販売されています
} それ以外 {
e.style.visibility = "hidden"; // eを非表示にし、かかるスペースを保持します
}
}
関数ハイライト（e）{// cssを設定してeを強調表示します
if（！e.classname）e.classname = "highcss";
それ以外
e.classname += "highcss";
}
</script>
こんにちは
<button onclick = "hide（this、true）; debug（ 'hide button 1'）;"> hide1 </button>
<button onclick = "hide（this）; debug（ 'hide button 2'）;"> hide2 </butotn>
次のクライアントJavaScriptはイベントを使用します。これは非常に重要なイベントを提供します。「Load」イベントは、Chenxingを処理するためのイベントを登録します。同僚はまた、「クリック」イベントハンドラーを登録するより高度な方法を示しています
コードコピーは次のとおりです。
<script type = "text/javascript">
//「ロード」イベントは、ドキュメントがロードされた後にのみ起動できます
//通常、javascriptコードを実行する前にロードイベントが発生するのを待つ必要がある場合
window.onload = function（）{
//ドキュメント内のすべてのIMGタグを見つけます
var images = document.getElementsByTagname（ "IMG"）;
//画像を転送し、各ノードのクリックイベントにハンドラーを追加します
//クリックするときに画像を非表示にします
for（var i = 0; i <images.length; i ++）{
var imge = images [i];
if（imge.addeventlistener）//タイムハンドラーを登録する別の方法
imge.addeventlistener（ "click"、hide、false）;
else // IE8の以前の操作と互換性があります
imge.attachevent（ "onclick"、hide）;
}
//これは上記の登録イベント処理機能です
function hide（evnet）{
event.target.style.visibility = "hidden";
}
};
</script>
第15章17章では、JavaScriptを使用してWebページのコンテンツ、スタイル、動作を制御する方法について説明します（イベント処理）。この章では、APIについて少し複雑になり、これまでのブラウザの互換性が低いことについて説明します。これが、多くのJavaScriptプログラマーが「ライブラリ」または「フレームワーク」を使用してコーディング作業を簡素化することを選択する理由です。最も人気のあるものはjQueryです。第19章では、JQuery Libraryを紹介します
コードコピーは次のとおりです。
function debug（msg）{
var log = $（ "＃debuglog"）;
if（log.length == 0）{
log = $（ "<div id = 'debuglog'> <h1> debuglog </h1> </div>"）;
log.appendto（document.body）;
}
document.write（log）
log.append（$（ "<pre/>"）。text（msg））;
};
私たちが言及した第2部の4つの章では、すべてWebページを中心に説明しています。その後の4つの章では、ストアに焦点を当て、Webアプリケーションに頼ります。これらの内容については、コンテンツの書き込みと操作方法については説明されていません。スタイルと繁栄したスクリプトは、Webブラウザーを使用してドキュメントをレンダリングします。代わりに、アプリケーションプラットフォームとしてWebブラウザーを使用する方法を説明します。また、より複雑で洗練されたクライアントWebアプリケーションと最新のブラウザーをサポートするAPIについて説明しています。
第18章では、JavaScriptを使用してHTTP要求を開始する方法について説明します。
第20章では、データストレージメカニズムとクライアントアプリケーションのセッション状態のメンテナンスについて説明します。第21章では、HTML5が駆動するアプリケーションAPI/ネットワークストレージグラフィックスの新世代について説明します。これらは、新しいAPIをサポートするブラウザ開発に基づいています。 Zhijiangは、JavaScriptプログラマーとしての最もエキサイティングな瞬間です。最後の4つの章には、サンプルコードはあまりありません。次の例では、これらの新しいAPIを使用しています。