JavaScriptのテキスト

Web系プログラミングの授業で使っています．無料で差し上げますので，意見や感想をくださいませ．
→　katsu_wm%mukogawa-u.ac.jp　（’%’を’@’に変えるとメールアドレスになります）

→ JavaScriptのテキスト（新版:PDF形式234ページ,1.95MB）

→ JavaScriptのテキスト（PDF形式,201ページ, 3.2MB）旧版です．こちらはもうメンテナンスしていません．

まだ試作段階で，どんどん改訂しています．
このテキストは「フリーソフトウェア」として公開します．（著作権は保持しています）
商用，非商用問わずご使用ください．印刷，再配布共にしていただいて構いませんが，その際は内容の改変をせずにお願いします．
内容に不備がありましたら是非ご連絡ください．可能な限り迅速に修正して再配信いたしますが，テキスト内の「免責事項」に了承してください．

● テキスト中のサンプル

プログラム開発や教材作成の参考にしている書籍（広告リンクになっています）

—【テキストの目次】—————————————————–
1　JavaScriptとは　—　1　
2　学習に必要なもの　—　1　
　　2.1　プログラミングに適したテキストエディタ　—　2　
　　　　2.1.1　クロスプラットフォームに対応したテキストエディタ　—　2　
3　JavaScriptを学ぶ前に　—　3　
　　3.1　HTMLの基本　—　3　
　　　　3.1.1　基本構造　—　3　
　　　　　　3.1.1.1　改行要素　—　4　
　　　　　　3.1.1.2　段落要素　—　4　
　　　　3.1.2　GUIコンポーネント　—　4　
　　　　　　3.1.2.1　ボタン　—　4　
　　　　　　3.1.2.2　チェックボックス　—　4　
　　　　　　3.1.2.3　ラジオボタン　—　4　
　　　　　　3.1.2.4　テキストフィールド　—　5　
　　　　　　3.1.2.5　パスワードフィールド　—　5　
　　　　　　3.1.2.6　テキストエリア　—　5　
　　　　　　3.1.2.7　選択リスト　—　6　
　　　　　　3.1.2.8　スライダ　—　6　
　　　　3.1.3　HTMLのコメント記述　—　7　
　　　　3.1.4　HTMLタグの誤りを検査する方法　—　7　
　　3.2　CSSの基本　—　8　
　　　　3.2.1　基礎事項　—　8　
　　　　　　3.2.1.1　セレクタの書き方に関して　—　8　
　　　　3.2.2　設定できるスタイルの種類　—　9　
　　　　　　3.2.2.1　フォントの設定（スタイル，サイズなど）　—　9　
　　　　　　3.2.2.2　行の高さと文字間の設定　—　10　
　　　　　　3.2.2.3　段落開始のインデント　—　10　
　　　　　　3.2.2.4　色の設定　—　10　
　　　　3.2.3　ハイパーリンクのスタイル　—　11　
　　　　3.2.4　コンテンツの配置に関する基礎　—　11　
　　　　　　3.2.4.1　div要素　—　12　
　　　　　　3.2.4.2　位置とサイズの設定　—　12　
　　　　　　3.2.4.3　枠線と余白　—　13　
　　　　　　3.2.4.4　枠線の太さ，余白の大きさ，表示の位置，サイズの関係　—　14　
　　　　　　3.2.4.5　GUIレイアウトの例　—　14　
　　　　3.2.5　div要素内でのテキストの配置の設定　—　16　
　　　　3.2.6　HTMLのspanタグについて　—　17　
　　　　3.2.7　ブロックレベル要素とインライン要素　—　17　
　　　　3.2.8　CSSのコメント記述　—　17　
　　　　3.2.9　CSSを別のファイルに分離する方法　—　17　
　　　　3.2.10　CSSの誤りを検査する方法　—　17　
　　3.3　表と箇条書き　—　18　
　　　　3.3.1　表：　table要素　—　18　
　　　　　　3.3.1.1　表に関するスタイル　—　18　
　　　　3.3.2　箇条書き：　ul要素，ol要素　—　19　
　　　　　　3.3.2.1　箇条書きの見出しの設定　—　19　
　　　　　　3.3.2.2　箇条書き項目を横並びにする方法　—　19　
　　3.4　画像データの配置　—　20　
　　　　3.4.1　画像の位置，サイズについて　—　20　
4　JavaScriptを使う前に　—　21　
　　4.1　まずは体験　—　21　
　　　　4.1.1　JavaScriptプログラムを別のファイルに分離する方法　—　22　
　　　　4.1.2　プログラム開発やデバッグのための機能　—　22　
　　4.2　演習の進め方　—　24　
5　JavaScriptの基礎　—　25　
　　5.1　変数とデータ型　—　25　
　　　　5.1.1　基本的なデータ型　—　25　
　　　　5.1.2　変数の初期状態　—　25　
　　　　5.1.3　データ型の変換　—　25　
　　　　　　5.1.3.1　文字列→整数：　parseIntメソッド　—　25　
　　　　　　5.1.3.2　文字列→浮動小数点数：　parseFloatメソッド　—　26　
　　　　　　5.1.3.3　数値→文字列：　toStringメソッド　—　26　
　　　　5.1.4　数値計算　—　27　
　　　　　　5.1.4.1　数学関数と定数　—　27　
　　　　　　5.1.4.2　桁の大きな整数　—　28　
　　　　5.1.5　値の比較　—　28　
　　　　5.1.6　型の検査　—　28　
　　　　5.1.7　文字列の表記　—　28　
　　　　　　5.1.7.1　テンプレート文字列　—　29　
　　　　5.1.8　文字列に対する操作　—　29　
　　　　　　5.1.8.1　連結 (1)：　+　—　29　
　　　　　　5.1.8.2　比較　—　29　
　　　　　　5.1.8.3　長さ　—　29　
　　　　　　5.1.8.4　部分の取り出し　—　29　
　　　　　　5.1.8.5　分割　—　29　
　　　　　　5.1.8.6　連結 (2)：　joinメソッド　—　30　
　　5.2　JavaScriptのコメント記述　—　30　
　　5.3　制御　—　31　
　　　　5.3.1　条件分岐(1)　：　if文　—　31　
　　　　　　5.3.1.1　条件判定のための3項演算子　—　31　
　　　　5.3.2　条件分岐(2)　：　switch文　—　31　
　　　　5.3.3　繰り返し(1)　：　while文　—　32　
　　　　5.3.4　繰り返し(2)　：　for文　—　32　
　　　　　　5.3.4.1　繰り返し処理の中断　—　33　
　　　　　　5.3.4.2　繰り返し処理のスキップ　—　33　
　　5.4　関数　—　33　
　　　　5.4.1　関数内でのローカル変数　—　35　
　　　　5.4.2　関数の高度な応用(1)： 無名関数　—　36　
　　　　5.4.3　アロー関数　—　36　
　　　　5.4.4　引数の扱い　—　37　
　　　　　　5.4.4.1　可変長の引数を受け取る方法　—　37　
　　　　　　5.4.4.2　デフォルト引数　—　38　
　　　　5.4.5　関数の高度な応用(2)： apply，call　—　38　
　　5.5　変数のスコープについて　—　38　
　　　　5.5.1　変数宣言の巻き上げ（hoisting）　—　39　
　　　　5.5.2　let宣言，const宣言　—　40　
　　5.6　データ構造　—　42　
　　　　5.6.1　配列　—　42　
　　　　　　5.6.1.1　複数の配列の連結　—　43　
　　　　　　5.6.1.2　配列要素の連結　—　43　
　　　　　　5.6.1.3　配列によるFILO（スタック）の実現　—　43　
　　　　　　5.6.1.4　配列要素の順序の逆転　—　43　
　　　　　　5.6.1.5　配列かどうかの判定　—　44　
　　　　　　5.6.1.6　配列の途中の要素の削除　—　44　
　　　　　　5.6.1.7　配列の部分列の抽出　—　44　
　　　　　　5.6.1.8　条件による要素の抽出　—　44　
　　　　　　5.6.1.9　条件による要素の探索　—　44　
　　　　　　5.6.1.10　全要素に対する一斉処理　—　45　
　　　　　　5.6.1.11　全要素に対する順次処理　—　45　
　　　　　　5.6.1.12　要素に対する累積的処理　—　45　
　　　　　　5.6.1.13　要素の並べ替え（ソート）　—　46　
　　　　　　5.6.1.14　全ての要素に対する繰り返し処理の実現　—　46　
　　　　5.6.2　オブジェクト（連想配列1）　—　47　
　　　　　　5.6.2.1　プロパティの表記について　—　47　
　　　　　　5.6.2.2　プロパティの削除　—　47　
　　　　　　5.6.2.3　オブジェクトの明示的宣言　—　47　
　　　　　　5.6.2.4　全てのキーの取得　—　47　
　　　　　　5.6.2.5　全てのキーに対する繰り返し処理の実現　—　48　
　　　　　　5.6.2.6　オブジェクトを配列に変換する方法　—　49　
　　　　5.6.3　Setオブジェクト　—　50　
　　　　　　5.6.3.1　Setの作成　—　50　
　　　　　　5.6.3.2　要素の追加　—　50　
　　　　　　5.6.3.3　要素の削除　—　50　
　　　　　　5.6.3.4　要素の存在検査　—　50　
　　　　　　5.6.3.5　要素数の取得　—　50　
　　　　　　5.6.3.6　全要素の消去　—　50　
　　　　　　5.6.3.7　Setを配列に変換する方法　—　50　
　　　　5.6.4　Mapオブジェクト（連想配列2）　—　51　
　　　　　　5.6.4.1　Mapオブジェクトの作成　—　51　
　　　　　　5.6.4.2　エントリの参照と登録　—　51　
　　　　　　5.6.4.3　エントリの確認　—　51　
　　　　　　5.6.4.4　エントリの個数の調査　—　51　
　　　　　　5.6.4.5　エントリの削除　—　52　
　　　　　　5.6.4.6　全エントリの消去　—　52　
　　　　　　5.6.4.7　キーの列，値の列の取出し　—　52　
　　　　　　5.6.4.8　全要素に対する順次処理　—　52　
　　　　　　5.6.4.9　Mapを配列に変換する方法　—　54　
　　5.7　スプレッド構文　—　54　
　　　　5.7.1　スプレッド構文の関数の仮引数への応用　—　54　
　　　　5.7.2　スプレッド構文の分割代入への応用　—　55　
　　　　　　5.7.2.1　オブジェクトの分割代入　—　55　
　　5.8　日付・時刻・時間　—　56　
　　　　5.8.1　年，月，日，曜日，時，分，秒を取得するメソッド　—　56　
　　　　5.8.2　時間の扱い（再設定，加算，差分）　—　56　
　　　　5.8.3　サンプルプログラム　—　57　
　　　　5.8.4　経過時間の算出について　—　59　
　　5.9　GUIの扱い方　—　59　
　　　　5.9.1　GUIのコンポーネントの名前と値　—　60　
　　　　　　5.9.1.1　要素の属性と値について　—　60　
　　　　5.9.2　ボタンのクリック　—　61　
　　　　5.9.3　テキストフィールド／パスワードフィールド／テキストエリアの内容　—　61　
　　　　5.9.4　チェックボックスの状態　—　62　
　　　　5.9.5　ラジオボタンの状態　—　62　
　　　　5.9.6　選択リストの状態　—　62　
　　　　5.9.7　スライダの値　—　62　
　　　　5.9.8　更に簡単な方法　—　62　
　　5.10　Imageオブジェクト　—　64　
　　5.11　DOMのオブジェクト階層　—　65　
　　　　5.11.1　windowオブジェクト　—　65　
　　　　5.11.2　documentオブジェクト　—　65　
　　　　5.11.3　サンプルを用いた解説　—　65　
　　　　　　5.11.3.1　子要素の取得：childrenプロパティ　—　66　
　　　　　　5.11.3.2　HTML要素の属性とテキスト　—　66　
6　canvasグラフィックス　—　68　
　　6.1　canvasとコンテキスト　—　68　
　　　　6.1.1　コンテキスト　—　68　
　　6.2　図形の描画　—　68　
　　　　6.2.1　線と塗り　—　68　
　　　　　　6.2.1.1　線の太さ，色，ダッシュの設定　—　69　
　　　　　　6.2.1.2　塗りつぶしの色の設定　—　69　
　　　　6.2.2　円，円弧，楕円　—　69　
　　　　6.2.3　四角形　—　71　
　　　　6.2.4　文字列描画　—　71　
　　　　　　6.2.4.1　フォント，スタイル，サイズの指定　—　71　
　　6.3　画像ファイルの読み込みと表示　—　73　
　　6.4　拡縮，平行移動，回転など　—　73　
　　　　6.4.1　拡縮　—　73　
　　　　6.4.2　平行移動　—　73　
　　　　6.4.3　回転　—　73　
　　　　6.4.4　コンテキストの保存と復元　—　74　
　　6.5　ピクセル（画素）の操作　—　76　
　　　　6.5.1　ImageDataオブジェクトについて　—　76　
　　　　6.5.2　ピクセル描画の手順　—　77　
　　　　6.5.3　サンプルプログラム　—　78　
7　Webアプリケーション開発に必要なこと　—　81　
　　7.1　イベント駆動型プログラミング　—　81　
　　　　7.1.1　イベントの種類　—　81　
　　　　7.1.2　プログラムの記述と実行の流れ　—　82　
　　　　　　7.1.2.1　イベントリスナの設定　—　84　
　　　　　　7.1.2.2　イベントオブジェクト　—　84　
　　　　　　7.1.2.3　HTML要素にイベントハンドリングを記述する方法　—　85　
　　　　　　7.1.2.4　マウスの位置の取得　—　86　
　　　　　　7.1.2.5　要素のサイズの取得　—　86　
　　　　　　7.1.2.6　サンプル：イベントハンドリング登録のための各種の方法　—　88　
　　7.2　メディアデータ（音声，動画）の再生　—　91　
　　　　7.2.1　audio/videoタグを用いたメディアデータの読込み　—　91　
　　　　7.2.2　再生と一時停止　—　91　
　　　　　　7.2.2.1　audio/videoタグへのコントロールの追加　—　92　
　　　　7.2.3　audioタグを使用せずに音声を再生する方法　—　92　
　　　　　　7.2.3.1　音声ファイルの読込み　—　92　
　　　　7.2.4　再生の時刻に関すること　—　93　
　　　　　　7.2.4.1　メディアデータ再生時に発生するイベント　—　93　
　　　　7.2.5　再生の音量に関すること　—　93　
　　　　7.2.6　再生の速度に関すること　—　94　
　　7.3　タイミングイベント　—　94　
　　　　7.3.1　タイミングイベントの繰り返し設定： setInterval　—　95　
　　7.4　データの保存　—　96　
　　　　7.4.1　値の保存　—　96　
　　　　7.4.2　値の参照　—　96　
　　　　7.4.3　値の消去　—　96　
　　　　7.4.4　その他（データの管理に関する機能など）　—　96　
　　　　　　7.4.4.1　登録されているデータの個数を調べる方法　—　96　
　　　　　　7.4.4.2　登録されているデータを順番に取り出す方法　—　97　
　　　　7.4.5　localStorageの応用プログラム　—　97　
　　7.5　表示環境の取得と設定　—　101　
　　　　7.5.1　表示領域のサイズの取得　—　101　
　　　　7.5.2　サーバとブラウザに関する情報の取得　—　102　
　　7.6　JavaScriptによるスタイルの設定　—　104　
　　　　7.6.1　id属性によるHTML要素の参照　—　104　
　　　　7.6.2　スタイルの設定　—　104　
　　　　　　7.6.2.1　位置属性の設定　—　104　
　　　　　　7.6.2.2　可視属性の設定　—　105　
　　7.7　要素の位置とサイズの取得　—　106　
　　7.8　ファイルの読込み　—　108　
　　　　7.8.1　ファイル選択ダイアログ　—　109　
　　　　7.8.2　FileReader　—　109　
　　　　7.8.3　サンプルプログラム　—　110　
　　7.9　ドラッグアンドドロップ　—　112　
　　　　7.9.1　ドラッグアンドドロップに伴う処理　—　113　
　　　　　　7.9.1.1　dragstart イベントを受けて行う処理　—　113　
　　　　　　7.9.1.2　dragover イベントを受けて行う処理　—　114　
　　　　　　7.9.1.3　drop イベントを受けて行う処理　—　114　
　　　　　　7.9.1.4　イベントオブジェクトの target 属性　—　114　
　　　　7.9.2　Webブラウザ外部からドラッグアンドドロップを受け付ける処理　—　115　
　　7.10　インラインフレーム（iframe）　—　117　
8　DOMに基づくプログラミング　—　119　
　　8.1　HTMLの編集　—　119　
　　　　8.1.1　基本的な編集機能　—　119　
　　　　8.1.2　HTMLの階層構造　—　120　
　　　　　　8.1.2.1　要素の取得　—　120　
　　8.2　SVGの描画　—　122　
　　　　8.2.1　SVGの基本構造とHTML文書内での配置　—　122　
　　　　8.2.2　SVGの座標系と長さ，角度の単位　—　122　
　　　　　　8.2.2.1　ビューポートとビューボックス　—　123　
　　　　8.2.3　JavaScriptによるSVGの描画　—　125　
　　　　　　8.2.3.1　XMLの名前空間　—　125　
　　　　8.2.4　SVGの代表的な図形要素　—　127　
　　　　　　8.2.4.1　多角形・折れ線　—　127　
　　　　　　8.2.4.2　塗りとストローク，色の指定，曲がり角　—　128　
　　　　　　8.2.4.3　パス　—　130　
　　　　　　8.2.4.4　矩形，円，楕円，直線，文字　—　133　
　　　　8.2.5　SVG図形要素のイベントハンドリング　—　134　
　　　　8.2.6　SVG要素のグループ化　—　135　
　　　　8.2.7　参考：SVG関連のライブラリ　—　136　
9　オブジェクト指向プログラミング　—　137　
　　9.1　クラスの定義　—　137　
　　　　9.1.1　コンストラクタ　—　137　
　　　　9.1.2　メソッド　—　137　
　　9.2　応用例：SVG描画クラスの実装　—　137　
　　　　9.2.1　実装したクラスライブラリの解説　—　139　
　　　　9.2.2　実装したクラスライブラリの使用例　—　139　
10　正規表現　—　142　
　　10.1　文字列探索（検索）：　searchメソッド　—　142　
　　10.2　パターンマッチ：　matchメソッド　—　142　
　　10.3　置換処理：　replaceメソッド　—　143　
　　10.4　正規表現の記述方法　—　143　
11　ライブラリ　—　144　
　　11.1　jQuery　—　144　
　　　　11.1.1　jQueryを使用するための準備　—　144　
　　　　11.1.2　jQueryの基本的な使い方　—　144　
　　　　　　11.1.2.1　CSSの要素へのアクセス　—　145　
　　　　　　11.1.2.2　$で関数を実行する方法　—　145　
　　　　　　11.1.2.3　イベントハンドリングの登録　—　146　
　　　　11.1.3　DOMの操作　—　148　
　　　　　　11.1.3.1　子要素の追加　—　148　
　　　　　　11.1.3.2　テキストの取得と設定　—　149　
　　　　　　11.1.3.3　HTMLの取得と設定　—　150　
　　　　11.1.4　セレクタの扱い　—　151　
　　　　　　11.1.4.1　n番目の要素の選択　（:nth-child）　—　151　
　　　　　　11.1.4.2　n番目の要素の選択　（eq）　—　153　
　　　　　　11.1.4.3　属性値で要素を選択　—　154　
　　　　11.1.5　視覚効果と高度なGUI　—　155　
　　　　　　11.1.5.1　要素を表示する／隠す　—　155　
　　　　　　11.1.5.2　jQuery UI　—　156　
　　　　11.1.6　その他の便利な機能　—　160　
　　　　　　11.1.6.1　要素のインデックスの取得　—　160　
　　　　　　11.1.6.2　文字列のトリミング　—　161　
　　11.2　MathJax　—　163　
A　付録　—　165　
　　A.1　フォントの活用　—　165　
　　　　A.1.1　フォントの入手について　—　165　
　　　　A.1.2　利用法１：フォントファイルの組込み　—　165　
　　　　A.1.3　利用法２：Webで公開されているフォントの利用　—　167　
　　A.2　ダウンロード機能の実装例　—　171　
　　A.3　ブラウザ付属の開発機能　—　173　
　　　　A.3.1　ソースプログラムの自動整形　—　173　
　　　　　　A.3.1.1　Firefoxの場合　—　174　
　　　　　　A.3.1.2　Google Chromeの場合　—　175　
　　　　A.3.2　プログラムのステップ実行　—　176　
　　　　　　A.3.2.1　Firefoxの場合　—　176　
　　　　　　A.3.2.2　Google Chromeの場合　—　176　
　　　　A.3.3　プログラムのデバッグ　—　178　
　　　　　　A.3.3.1　Google Chromeによるデバッグ作業の例　—　178　
　　　　A.3.4　JavaScriptの対話的な実行　—　181