JavaScript 再入門

JavaScript 再入門(その28) イベントの操作

イベントの操作 イベントとは? JavaScript 再入門なので、今更こんな説明は必要ないと思われますが、概念的には理解できていても、いざ説明しようとすると難しいものです。 MDNの「イベントへの入門」には次のように説明されています。 イベントは、あなたがプログラムを書いているシステムで生じた動作、出来事を指します。システムからあなた…

JavaScript 再入門

JavaScript 再入門(その27) ドキュメントのHTML属性の操作

ドキュメントのHTML属性の操作 HTML 属性とは、タグに付けられた補足情報です。id / class / name 等は属性 (Attribute) と呼びます。 <タグ 属性1="属性値1" 属性2="属性値2 属性値3"> HTM…

JavaScript 再入門

JavaScript 再入門(その26) ドキュメントの操作

ドキュメントの操作 ウェブ文書である HTML や XML で書かれた、ウェブサイトを操作する場合には、ドキュメントオブジェクトモデル DOM を使って操作します。 今回の記事は JavaScript再入門なので、JavaScriptを使ってDOMにアクセスしますが、JavaScipt以外のPython等を使ってもDOMを利用することが…

JavaScript 再入門

JavaScript 再入門(その25) 非同期通信 2 PHP と JavaScript

非同期通信 PHP と JavaScript 前の記事では fetch を使って JSON ファイルからデータを取得する方法を見てきました。実務では、クライアントからパラメータとリクエストを受け取り、サーバー側でデータベースなどから必要なデータを加工しクライアントへ返します。今回は、サーバーサイドを PHP で簡単なデータを返すプログラ…

JavaScript 再入門

JavaScript 再入門(その24) 非同期通信 1 fetch

非同期通信 fetch fetch オブジェクトは、XMLHttpRequest(XHR) オブジェクトに代わる、サーバーと対話するためのAPIです。fetch はプロミス値を返しますので、XMLHttpRequest に比べて、簡略化されて可読性の良いスクリプトを書くことができます。 この記事では、演習用のJSONデータとして MDN…

JavaScript 再入門

JavaScript 再入門(その23) 非同期処理 4 非同期関数 async / wait

非同期関数 async / wait 前回までの記事でプロミスの動きを見てみました。 非同期関数 いままで、ややこしいプロミスのスクリプトを書いてきましたが。ES2017 で、非同期処理をまるで同期処理のようにサラッと書ける救世主が現れました。それが、async / await *ES2017 です。 async キーワードは関数につけ…

JavaScript 再入門

JavaScript 再入門(その22) 非同期処理 3 Promise の待ち合わせメソッド

Promise の待ち合わせメソッド 前回までの記事でプロミスの動きを見てみました。 プロミスの待ち合わせメソッド プロミスには、複数のプロミスの状態により .then() .catch() .finally() メソッドを実行するメソッドがあります。 説明するにあたって、プロミスを返すコンストラクタ関数を定義します。以下の例題はこのコ…

JavaScript 再入門

JavaScript 再入門(その21) 非同期処理 2 プロミスの動作

プロミスの動作 前回の記事でプロミスの大まかな動きを見てみました。 プロミスって何をしてるの? 今回は、プロミスの状態や値の受け渡しなどの、プロミスの動作について説明します。 まずは、Promise を定義後の状態をみてみましょう。このスクリプトの Promise は非同期処理ですが、処理は何もしていないので実務上役に立つスクリプトでは…

JavaScript 再入門

JavaScript 再入門(その20) 非同期処理 1 非同期処理とPromise

非同期処理とPromise 非同期処理とは? まずは、通常の処理方法、同期処理から説明します。通常のプログラムは上から順番にコードを処理して、処理が終わると次の処理を実行していきます。 console.log(1) ; console.log(2) ; console.log(3) ; console.log(4) ; /* 1 2 3…

JavaScript 再入門

JavaScript 再入門(その19) クラス class

クラス class はじめに クラス構文 class *ES2015 は、オブジェクトの記事で説明したとおり、クラスベースに近いコードが許されるようにした、プロトタイプベース言語のシンタックスシュガー(糖衣構文:ある構文を簡略化したり可読性をよくするための記法)です。このあたりの説明は過去の記事を参照してください。JavaScriptに…