JavaScript

JavaScriptのテキスト

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

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

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

● テキスト中のサンプル

test1.html CSStest1.html GUIframe01.html
GUIframe02.html GUIframe03.html GUIframe04.html
convRadix.html
test2.html testFunc1.html testFunc0.html
testFunc2.html
test4.html test4.js OBJtest.html
testDateTime.html testGetDate.html test3.html
test3-2.html JSObj01.html
CanvasArc.html CanvasRectText.html CanvasPic.html
AnalogClock.html Clock1.gif Clock2.gif
Clock3.gif Clock4.gif PixGraphics01.html
ColorTest.html GUItest1.html GUItest2.html
SoundTest01.html technomics1.mp3 出典:甘茶の音楽工房
SoundTest03.html one02.mp3 Clock.html
test5.html Env.html EnvTest1.html
Style.html Style2.html FreeFall.html
ball.gif clap01.wav FreeFall.manifest
FileRead2.html test_iframe.html test_iframe_sub.html
testDom1.html testDom2.html
svg01.svg svg01_1.html svg01_2.html
svg01_3.html
testSVG.html svg02_1.svg svg02_2.svg
svg02_4.svg svg02_5.svg svg03.svg
svg04.html SVGdraw.js SVGdraw_1.html
jquery00-1.html jquery00.html jquery01-1.html
jquery01.html jquery02.html jquery04.html
jquery05.html jQueryLogo.jpg jquery06.html
jquery07.html jquery07-2.html
jqueryUI01.html jqueryUI02.html jqueryUI03.html
mathjax01-1.html mathjax01-2.html
FontEmbed01.html FontSample01.html フォントは別途入手のこと
TxEdit01.html
FreeFall2.js FreeFall2.html

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

—【テキストの目次】—————————————————–
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 利用法1:フォントファイルの組込み — 127
11.1.3 利用法2: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