JavaScriptのテキスト

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

→ JavaScriptのテキスト（PDF形式,145ページ,2.66MB）

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

● テキスト中のサンプル

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

—【テキストの目次】—————————————————–
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.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　選択リスト　—　5
3.1.2.8　スライダ　—　6
3.1.3　HTMLのコメント記述　—　7
3.1.4　HTMLタグの誤りを検査する方法　—　7
3.2　CSSの基本　—　7
3.2.1　基礎事項　—　8
3.2.2　設定できるスタイルの種類　—　8
3.2.2.1　フォントの設定（スタイル，サイズなど）　—　8
3.2.2.2　色の設定　—　9
3.2.3　ハイパーリンクのスタイル　—　10
3.2.4　コンテンツの配置に関する基礎　—　10
3.2.4.1　div要素　—　11
3.2.4.2　位置とサイズの設定　—　12
3.2.4.3　枠線と余白　—　12
3.2.4.4　GUIレイアウトの例　—　13
3.2.5　div要素内でのテキストの配置の設定　—　14
3.2.6　HTMLのspanタグについて　—　15
3.2.7　CSSのコメント記述　—　16
3.2.8　CSSを別のファイルに分離する方法　—　16
3.2.9　CSSの誤りを検査する方法　—　16
4　JavaScriptを使う前に　—　17
4.1　まずは体験　—　17
4.1.1　JavaScriptプログラムを別のファイルに分離する方法　—　18
4.1.2　プログラム開発やデバッグのための機能　—　18
4.2　演習の進め方　—　20
5　JavaScriptの基礎　—　21
5.1　変数とデータ型　—　21
5.1.1　データ型の変換　—　21
5.1.2　数値計算　—　22
5.1.2.1　数学関数と定数　—　23
5.1.3　値の比較　—　23
5.1.4　型の検査　—　23
5.1.5　文字列の操作　—　24
5.2　JavaScriptのコメント記述　—　24
5.3　制御　—　25
5.3.1　条件分岐(1)　：　if文　—　25
5.3.2　条件分岐(2)　：　switch文　—　25
5.3.3　繰り返し(1)　：　while文　—　26
5.3.4　繰り返し(2)　：　for文　—　26
5.3.4.1　繰り返し処理の中断　—　27
5.4　関数　—　27
5.4.1　関数内でのローカル変数　—　29
5.4.2　関数の高度な応用　—　30
5.5　配列とオブジェクト　—　31
5.5.1　配列　—　31
5.5.1.1　要素の並べ替え（ソート）　—　33
5.5.1.2　全ての要素に対する繰り返し処理の実現　—　33
5.5.2　オブジェクト（連想配列）　—　34
5.5.2.1　全てのキーに対する繰り返し処理の実現　—　34
5.6　日付・時刻・時間　—　36
5.6.1　時間の扱い（再設定，加算，差分）　—　37
5.6.2　サンプルプログラム　—　37
5.7　GUIの扱い方　—　39
5.7.1　GUIのコンポーネントの名前と値　—　40
5.7.1.1　要素の属性と値について　—　41
5.7.2　ボタンのクリック　—　42
5.7.3　テキストフィールド／パスワードフィールド／テキストエリアの内容　—　42
5.7.4　チェックボックスの状態　—　42
5.7.5　ラジオボタンの状態　—　42
5.7.6　選択リストの状態　—　42
5.7.7　スライダの値　—　43
5.7.8　更に簡単な方法　—　43
5.8　DOMのオブジェクト階層　—　44
5.8.1　windowオブジェクト　—　44
5.8.2　documentオブジェクト　—　44
5.8.3　サンプルを用いた解説　—　44
5.8.3.1　子要素の取得：childrenプロパティ　—　45
5.8.3.2　HTML要素の属性とテキスト　—　45
6　canvasグラフィックス　—　47
6.1　canvasとコンテキスト　—　47
6.1.1　コンテキスト　—　47
6.2　図形の描画　—　47
6.2.1　線と塗り　—　47
6.2.1.1　線の太さ，色，ダッシュの設定　—　48
6.2.1.2　塗りつぶしの色の設定　—　48
6.2.2　円，円弧，楕円　—　48
6.2.3　四角形　—　50
6.2.4　文字列描画　—　50
6.2.4.1　フォント，スタイル，サイズの指定　—　50
6.3　画像ファイルの読み込みと表示　—　52
6.4　拡縮，平行移動，回転など　—　52
6.4.1　拡縮　—　52
6.4.2　平行移動　—　52
6.4.3　回転　—　52
6.4.4　コンテキストの保存と復元　—　53
6.5　ピクセル（画素）の操作　—　55
6.5.1　ImageDataオブジェクトについて　—　55
6.5.2　ピクセル描画の手順　—　56
6.5.3　サンプルプログラム　—　57
7　Webアプリケーション開発に必要なこと　—　60
7.1　イベント駆動型プログラミング　—　60
7.1.1　イベントの種類　—　60
7.1.2　プログラムの記述と実行の流れ　—　61
7.1.2.1　イベントリスナの設定　—　63
7.1.2.2　HTML要素にイベントハンドリングを記述する方法　—　64
7.1.2.3　座標系や要素のサイズに関すること　—　64
7.2　メディアデータ（音声，動画）の再生　—　67
7.2.1　audio/videoタグを用いたメディアデータの読込み　—　67
7.2.2　再生と一時停止　—　67
7.2.2.1　audio/videoタグへのコントロールの追加　—　68
7.2.3　audioタグを使用せずに音声を再生する方法　—　68
7.2.3.1　音声ファイルの読込み　—　68
7.2.4　再生の時刻に関すること　—　69
7.2.4.1　メディアデータ再生時に発生するイベント　—　69
7.2.5　再生の音量に関すること　—　70
7.2.6　再生の速度に関すること　—　70
7.3　タイミングイベント　—　70
7.3.1　タイミングイベントの繰り返し設定： setInterval　—　72
7.4　データの保存　—　72
7.4.1　値の保存　—　72
7.4.2　値の参照　—　72
7.4.3　値の消去　—　72
7.4.4　その他（データの管理に関する機能など）　—　73
7.5　表示環境の取得と設定　—　77
7.5.1　表示領域のサイズの取得　—　77
7.5.2　サーバとブラウザに関する情報の取得　—　78
7.6　JavaScriptによるスタイルの設定　—　80
7.6.1　id属性によるHTML要素の参照　—　80
7.6.2　スタイルの設定　—　80
7.6.2.1　位置属性の設定　—　80
7.6.2.2　可視属性の設定　—　81
7.7　要素の位置とサイズの取得　—　82
7.8　ファイルの読込み　—　84
7.8.1　ファイル選択ダイアログ　—　85
7.8.2　FileReader　—　85
7.8.3　サンプルプログラム　—　86
7.9　インラインフレーム（iframe）　—　88
8　DOMに基づくプログラミング　—　90
8.1　HTMLの編集　—　90
8.1.1　基本的な編集機能　—　90
8.1.2　HTMLの階層構造　—　91
8.1.2.1　要素の取得　—　91
8.2　SVGの描画　—　93
8.2.1　SVGの基本構造とHTML文書内での配置　—　93
8.2.2　SVGの座標系と長さ，角度の単位　—　93
8.2.2.1　ビューポートとビューボックス　—　94
8.2.3　JavaScriptによるSVGの描画　—　96
8.2.3.1　XMLの名前空間　—　96
8.2.4　SVGの代表的な図形要素　—　98
8.2.4.1　多角形・折れ線　—　98
8.2.4.2　塗りとストローク，色の指定，曲がり角　—　99
8.2.4.3　パス　—　101
8.2.4.4　矩形，円，楕円，直線，文字　—　104
8.2.5　SVG図形要素のイベントハンドリング　—　105
8.2.6　SVG要素のグループ化　—　106
8.2.7　参考：SVG関連のライブラリ　—　107
9　オブジェクト指向プログラミング　—　108
9.1　クラスの定義　—　108
9.1.1　コンストラクタ　—　108
9.1.2　メソッド　—　108
9.2　応用例：SVG描画クラスの実装　—　108
9.2.1　実装したクラスライブラリの解説　—　110
9.2.2　実装したクラスライブラリの使用例　—　110
10　ライブラリ　—　113
10.1　jQuery　—　113
10.1.1　jQueryを使用するための準備　—　113
10.1.2　jQueryの基本的な使い方　—　113
10.1.2.1　jQueryによるCSSの設定　—　114
10.1.2.2　\$で関数を実行する方法　—　114
10.1.2.3　イベントハンドリングの登録　—　114
10.1.3　DOMの操作　—　116
10.1.3.1　子要素の追加　—　116
10.1.3.2　テキストの取得と設定　—　117
10.1.3.3　HTMLの取得と設定　—　117
10.1.4　視覚効果と高度なGUI　—　119
10.1.4.1　要素を表示する／隠す　—　119
10.1.4.2　jQuery UI　—　120
10.1.5　その他の便利な機能　—　124
10.1.5.1　文字列のトリミング　—　124
10.2　MathJax　—　125
11　付録　—　127
11.1　フォントの活用　—　127
11.1.1　フォントの入手について　—　127
11.1.2　利用法１：フォントファイルの組込み　—　127
11.1.3　利用法２：Webで公開されているフォントの利用　—　129
11.2　ダウンロード機能の実装例　—　133
11.3　ブラウザ付属の開発機能　—　135
11.3.1　ソースプログラムの自動整形　—　135
11.3.1.1　Firefoxの場合　—　136
11.3.1.2　Google Chromeの場合　—　137
11.3.2　プログラムのステップ実行　—　138
11.3.2.1　Firefoxの場合　—　138
11.3.2.2　Google Chromeの場合　—　138
11.3.3　プログラムのデバッグ　—　140
11.3.3.1　Google Chromeによるデバッグ作業の例　—　140
11.3.4　JavaScriptの対話的な実行　—　143