JavaScriptのテキスト
Web系プログラミングの授業で使っています.無料で差し上げますので,意見や感想をくださいませ.
→ katsu_wm%mukogawa-u.ac.jp (’%’を’@’に変えるとメールアドレスになります)
→ JavaScriptのテキスト(PDF形式,111ページ,2.17MB)
まだ試作段階で,どんどん改訂しています.
このテキストは「フリーソフトウェア」として公開します.(著作権は保持しています)
商用,非商用問わずご使用ください.印刷,再配布共にしていただいて構いませんが,その際は内容の改変をせずにお願いします.
内容に不備がありましたら是非ご連絡ください.可能な限り迅速に修正して再配信いたしますが,テキスト内の「免責事項」に了承してください.
● テキスト中のサンプル
プログラム開発や教材作成の参考にしている書籍(広告リンクになっています)
—【テキストの目次】—————————————————–
1 JavaScriptとは 1
2 学習に必要なもの 1
2.1 プログラミングに適したテキストエディタ 1
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 テキストフィールド 4
3.1.2.5 パスワードフィールド 5
3.1.2.6 テキストエリア 5
3.1.2.7 選択リスト 5
3.1.2.8 スライダ 6
3.2 CSSの基本 6
3.2.1 基礎事項 7
3.2.2 設定できるスタイルの種類 8
3.2.3 コンテンツの配置に関する基礎 9
3.2.4 HTMLのspanタグについて 13
3.2.5 CSSを別のファイルに分離する方法 14
4 JavaScriptを使う前に 15
4.1 まずは体験 15
4.1.1 JavaScriptプログラムを別のファイルに分離する方法 16
4.1.2 プログラム開発やデバッグのための機能 16
5 JavaScriptの基礎 19
5.1 変数とデータ型 19
5.1.1 データ型の変換 19
5.1.2 文字列の操作 20
5.2 制御 21
5.2.1 条件分岐(1) : if文 21
5.2.2 条件分岐(2) : switch文 21
5.2.3 繰り返し(1) : while文 22
5.2.4 繰り返し(2) : for文 22
5.3 関数 23
5.4 配列とオブジェクト 25
5.4.1 配列 25
5.4.2 オブジェクト(連想配列) 27
5.5 日付・時刻・時間 29
5.5.1 時間の扱い(再設定,加算,差分) 30
5.5.2 サンプルプログラム 30
5.6 GUIの扱い方 32
5.6.1 GUIのコンポーネントの名前と値 34
5.6.2 ボタンのクリック 34
5.6.3 テキストフィールド/パスワードフィールド/テキストエリアの内容 35
5.6.4 チェックボックスの状態 35
5.6.5 ラジオボタンの状態 35
5.6.6 選択リストの状態 35
5.6.7 スライダの値 35
6 canvasグラフィックス 36
6.1 canvasとコンテキスト 36
6.1.1 コンテキスト 36
6.2 図形の描画 36
6.2.1 線 36
6.2.2 円,円弧,楕円 37
6.2.3 四角形 38
6.2.4 文字列描画 39
6.3 画像ファイルの読み込みと表示 41
6.4 拡縮,平行移動,回転など 41
6.4.1 拡縮 41
6.4.2 平行移動 41
6.4.3 回転 41
6.4.4 コンテキストの保存と復元 42
6.5 ピクセル(画素)の操作 44
6.5.1 ImageDataオブジェクトについて 44
6.5.2 ピクセル描画の手順 45
6.5.3 サンプルプログラム 46
7 Webアプリケーション開発に必要なこと 49
7.1 イベント駆動型プログラミング 49
7.1.1 イベントの種類 50
7.2 プログラムの記述と実行の流れ 51
7.2.1 イベントリスナの設定 53
7.2.2 HTML要素にイベントハンドリングを記述する方法 53
7.2.3 座標系や要素のサイズに関すること 54
7.3 メディアデータ(音声,動画)の再生 56
7.3.1 audio/videoタグを用いたメディアデータの読込み 56
7.3.2 再生と一時停止 57
7.3.3 audioタグを使用せずに音声を再生する方法 58
7.3.4 再生の時刻に関すること 59
7.3.5 再生の音量に関すること 59
7.3.6 再生の速度に関すること 59
7.4 タイミングイベント 59
7.5 データの保存 61
7.5.1 値の保存 61
7.5.2 値の参照 61
7.5.3 値の消去 62
7.5.4 その他(データの管理に関する機能など) 62
7.6 表示環境の取得と設定 66
7.6.1 表示領域のサイズの取得 66
7.6.2 サーバとブラウザに関する情報の取得 67
7.7 JavaScriptによるスタイルの設定 69
7.7.1 id名によるHTML要素の参照 69
7.7.2 スタイルの設定 69
7.8 その他の工夫 72
7.8.1 オフライン動作のための設定 72
7.9 ファイルの読込み 75
7.9.1 ファイル選択ダイアログ 75
7.9.2 FileReader 76
7.9.3 サンプルプログラム 77
7.10 インラインフレーム(iframe) 80
8 DOMに基づくプログラミング 82
8.1 HTMLの編集 82
8.1.1 基本的な編集機能 82
8.1.2 HTMLの階層構造 83
8.1.2.1 要素の取得 83
8.2 SVGの描画 85
8.2.1 SVGの基本構造とHTML文書内での配置 85
8.2.2 SVGの座標系と長さの単位 85
8.2.3 JavaScriptによるSVGの描画 86
8.2.4 SVGの代表的な図形要素 88
8.2.4.1 多角形・折れ線 88
8.2.4.2 塗りとストローク,色の指定,曲がり角,留幅 89
8.2.4.3 矩形,円,楕円,直線,文字 91
9 オブジェクト指向プログラミング 93
9.1 クラスの定義 93
9.1.1 コンストラクタ 93
9.1.2 メソッド 93
9.2 応用例:SVG描画クラスの実装 93
9.2.1 実装したクラスライブラリの解説 95
9.2.2 実装したクラスライブラリの使用例 95
10 付録 98
10.1 フォントの活用 98
10.1.1 フォントの入手について 98
10.1.2 利用法1:フォントファイルの組込み 98
10.1.3 利用法2:Webで公開されているフォントの利用 100
10.2 ダウンロード機能の実装例 104
10.3 ブラウザ付属の開発機能 106
10.3.1 ソースプログラムの自動整形 106
10.3.1.1 Firefoxの場合 107
10.3.1.2 Google Chromeの場合 108
10.3.2 プログラムのステップ実行 109
10.3.2.1 Firefoxの場合 109
10.3.2.2 Google Chromeの場合 109
11 免責事項 112