</div></div>上位の要素でイベントが発生するのを抑止したいことがあります。IE以外の場合eventObject.stopPropagation()、IEの場合window.event.cancelBubble=trueとします。});バブリングの参考資料がありました。false;しましたが、イベントリスナでは、IE以外の場合eventObject.preventDefault()、IEの場合window.event.returnValue=falseとします。非同期通信AjaxAjaxによる非同期通信を正確に理解するには調べていただくとして、ざっくり「画面を丸々ロードするのではなく、一部を差し替える技術。HTTPリクエストの応答をXMLやJSON等の形式で受けてDOMに反映しページを更新する。」くらいに認識しています。資料は山ほどあると思いますので、軽く流します。クロスブラウザ問題はここにもあり(と思ったけどさすがにもう気にしなくていいか)、Ajaxに使うオブジェクトが何種類かあります。5.5以前XMLHttpRequestの使い方はこちら。メンバをいくつかメモ。応答をDocumentオブジェクトで受け取る。前述の通り操作できる。async=falseの時、同期通信を行うためサーバーが応答を返すまで後続の処理を行わない。URLは相対パスで指定する。HTTPリクエストヘッダを設定する。リクエストを送信する。セキュリティのためクロスドメインのAjax通信は禁じられています。(サーバーサイドで別ドメインから取得した情報をフロントエンドに渡すことは可能。)かつてJSONPという技術でクロスドメイン通信するテクニックがありましたが、役割を終えた感があります。CORSの実装が推奨されています。パイプラインを構成する要素を操作できるようになります。メソッドを利用することで、非同期のネットワーク通信を簡単にわかりやすく記述できるようになります。使用して実現されてきました。それのより良い代替となるもので、サービスワーカーのような他の技術から簡単に利用することができます。関連する概念をまとめて定義する場所でもあります。Standardに準拠しています。後述するPromiseを理解しておく必要があります。fetchメソッドの使い方はこちら。Polyfillが利用できます。正確に理解するには調べていただくとして、ざっくり「複数の処理を想定した時、非同期処理とは、一方の処理を実行している最中に他方の処理を同時に行うこと。ちなみに同期処理の場合、一方の処理を実行が完了するまで他方の処理を行わない。JavaScriptではかつて非同期処理を実現するのにsetTimeoutやsetIntervalを利用していましたが、課題がありました。新しい仕組みが導入され、徐々に改善されてきています。参考資料:JavaScriptとコールバック地獄JavaScriptと非同期のエラー処理PromiseES2015で標準ビルトインオブジェクトに追加されました。非同期処理を実現します。正常系はresolveを呼び出し、結果をthenに渡す。異常系はrejectを呼び出し、結果をcatchに渡す。31秒待つため、1、3、2の順に実行されます。Promiseはresolve関数とreject関数を受け取ります。resolveの結果はthenが受け取り、rejectの結果はerrorが受け取ります。どちらに転んでもfinallyは実行されます。下記のコードでも同じ結果が得られます。});Promise.prototype.then()もPromise.prototype.catch()もPromiseを返すので、連鎖させられます。(then()やcatch()を連ねて書ける。)サンプルコードをもう一つ。前のasynchronous()の完了を待たずして、後のasynchronous()が呼び出される。all()では全てのasynchronous()が完了すると呼び出される。race()の場合、全完了を待たず、どれか一つが完了した時点でthenなりcatchなりを実行する。asynchronous()の完了順にかかわらず配列の順番は一定(呼び出し順)。});async/awaitES2017で追加されました。非同期処理を実現します。使い方はこちらとこちら。サンプルコードを一つ。非同期処理の完了を待つ。その一方で呼び出し元に処理を戻す。awaitの完了後に処理する。異常系の場合、awaitの処理を中断してここに飛んでくる。series()よりも後ろにあるけど、seriesがasyncだから並列実行される。seriesは1秒かかるので、こちらの結果が先に出力される。3正常系の場合、3、1、2の順に実行されます。異常系の場合、3、2の順に実行されます。Promiseやasync/awaitが登場する前jQuery.Deferred()がよく利用されていたようですが、生のJavaScriptで使える非同期処理を使いこなしたいですね。入門(JavaScript)クロスブラウザ問題ブラウザ間やバージョン間の実装の違いによるJavaScriptの解釈の違いが開発者を悩ませます。ES2015以降の様式で書かれたコードを古いJavaScriptの様式に変換するコンパイラ(トラスコンパイラ、トランスパイラなどと呼ばれる)にBabelというものがあります。IEをサポートしなければならないけれども、ES2015の機能を使いたい等の場面で利用します。Babelが変換できないものもあるので、Polyfillというものも利用します。使い方は@babel/polyfill/core-jsやPolyfill.ioをご参照のこと。ES2015(ES6)以降に追加された機能まとめがありました。GuideさいごにJavaScriptの学習を楽にするために、散在する情報の整理を試みてみました。何かの役に立てば幸いです。有益な情報を公開して下さった先人たちに敬意と感謝の気持ちでいっぱいです。ありがとうございます。lengthプロパティと0から始まる添字のプロパティを持つが、forEachやmapのようなArrayの組み込みメソッドを持たない。