JavaScriptのテキスト(旧版)

JavaScriptのテキスト(旧版)

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

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

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

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

● テキスト中のサンプル

test1.html CSStest1.html GUIframe01.html
GUIframe02.html GUIframe03.html GUIframe04.html
GUIframe05.html test2.html convRadix.html
testFunc1.html testFunc0.html testFunc2.html
testFunc3.html testScope1.html
test4.html test4.js OBJtest.html
map01.html map02.html
testDateTime.html testGetDate.html test3.html
test3-2.html JSObj01.html CanvasArc.html
CanvasRectText.html CanvasPic.html Balloon.jpg
AnalogClock.html Clock1.gif Clock2.gif
Clock3.gif Clock4.gif PixGraphics01.html
ColorTest.html GUItest1.html GUItest2.html
GUItest3-3.html GUItest3-2.html GUItest3-1.html
SoundTest01.html technomics1.mp3 出典:甘茶の音楽工房
SoundTest03.html one02.mp3 Clock.html
test5.html Env.html EnvTest1.html
Style.html Style2.html Style3.html
FreeFall.html ball.gif clap01.wav
FreeFall.manifest FileRead2.html DnD01_0.html
DnD01_2.html DnD02.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
svg02_6.svg svg02_7.svg svg02_7-2.svg
svg02_7-3.svg svg03.svg svg04.html
svg05.html SVGdraw.js SVGdraw_1.html
jquery00-1.html jquery00.html jquery01-1.html
jquery01.html jquery01-3.html jquery02.html
jquery04.html jquery05.html jQueryLogo.jpg
jquery06.html jquery07.html jquery07-2.html
jquerySel01.html jquerySel02.html jquerySel03.html
jqueryUI01.html jqueryUI02.html jqueryUI03.html
jqueryIndex01-1.html jqueryIndex01-2.html  
mathjax01-1.html mathjax01-2.html FontEmbed01.html
FontSample01.html フォントは別途入手のこと  
TxEdit01.html FreeFall2.js FreeFall2.html
DebugSample01_1.html DebugSample01_2.html DebugSample01.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.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 利用法1:フォントファイルの組込み — 165 
    A.1.3 利用法2: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