JavaScript

JavaScriptのテキスト

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

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

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

● テキスト中のサンプル

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
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
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
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.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.2 設定できるスタイルの種類 — 8 
      3.2.2.1 フォントの設定(スタイル,サイズなど) — 8 
      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要素 — 11 
      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要素内でのテキストの配置の設定 — 15 
    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 表と箇条書き — 17 
    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 画像データの配置 — 19 
    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 数値計算 — 27 
      5.1.3.1 数学関数と定数 — 27 
      5.1.3.2 桁の大きな整数 — 27 
    5.1.4 値の比較 — 28 
    5.1.5 型の検査 — 28 
    5.1.6 文字列の操作 — 28 
  5.2 JavaScriptのコメント記述 — 29 
  5.3 制御 — 30 
    5.3.1 条件分岐(1) : if文 — 30 
      5.3.1.1 条件判定のための3項演算子 — 30 
    5.3.2 条件分岐(2) : switch文 — 30 
    5.3.3 繰り返し(1) : while文 — 31 
    5.3.4 繰り返し(2) : for文 — 31 
      5.3.4.1 繰り返し処理の中断 — 32 
      5.3.4.2 繰り返し処理のスキップ — 32 
  5.4 関数 — 32 
    5.4.1 関数内でのローカル変数 — 34 
    5.4.2 関数の高度な応用 — 35 
      5.4.2.1 アロー関数 — 35 
    5.4.3 引数の扱い — 36 
      5.4.3.1 可変長の引数を受け取る方法 — 36 
      5.4.3.2 デフォルト引数 — 36 
  5.5 変数のスコープについて — 37 
    5.5.1 変数宣言の巻き上げ(hoisting) — 37 
    5.5.2 let宣言,const宣言 — 38 
  5.6 配列とオブジェクト — 40 
    5.6.1 配列 — 40 
      5.6.1.1 複数の配列の連結 — 41 
      5.6.1.2 配列要素の連結 — 41 
      5.6.1.3 配列によるFILO(スタック)の実現 — 41 
      5.6.1.4 配列要素の順序の逆転 — 41 
      5.6.1.5 配列かどうかの判定 — 41 
      5.6.1.6 配列の途中の要素の削除 — 42 
      5.6.1.7 配列の部分列の抽出 — 42 
      5.6.1.8 条件による要素の抽出 — 42 
      5.6.1.9 条件による要素の探索 — 42 
      5.6.1.10 全要素に対する一斉処理 — 43 
      5.6.1.11 全要素に対する順次処理 — 43 
      5.6.1.12 要素に対する累積的処理 — 43 
      5.6.1.13 要素の並べ替え(ソート) — 44 
      5.6.1.14 全ての要素に対する繰り返し処理の実現 — 44 
    5.6.2 オブジェクト(連想配列) — 45 
      5.6.2.1 プロパティの表記について — 45 
      5.6.2.2 プロパティの削除 — 45 
      5.6.2.3 オブジェクトの明示的宣言 — 45 
      5.6.2.4 全てのキーの取得 — 45 
      5.6.2.5 全てのキーに対する繰り返し処理の実現 — 46 
      5.6.2.6 オブジェクトを配列に変換する方法 — 47 
  5.7 Setオブジェクト — 47 
  5.8 スプレッド構文 — 48 
    5.8.1 スプレッド構文の関数の仮引数への応用 — 49 
    5.8.2 スプレッド構文の分割代入への応用 — 49 
      5.8.2.1 オブジェクトの分割代入 — 50 
  5.9 日付・時刻・時間 — 51 
    5.9.1 時間の扱い(再設定,加算,差分) — 51 
    5.9.2 サンプルプログラム — 52 
  5.10 GUIの扱い方 — 54 
    5.10.1 GUIのコンポーネントの名前と値 — 56 
      5.10.1.1 要素の属性と値について — 56 
    5.10.2 ボタンのクリック — 56 
    5.10.3 テキストフィールド/パスワードフィールド/テキストエリアの内容 — 56 
    5.10.4 チェックボックスの状態 — 57 
    5.10.5 ラジオボタンの状態 — 57 
    5.10.6 選択リストの状態 — 57 
    5.10.7 スライダの値 — 57 
    5.10.8 更に簡単な方法 — 57 
  5.11 Imageオブジェクト — 59 
  5.12 DOMのオブジェクト階層 — 60 
    5.12.1 windowオブジェクト — 60 
    5.12.2 documentオブジェクト — 60 
    5.12.3 サンプルを用いた解説 — 60 
      5.12.3.1 子要素の取得:childrenプロパティ — 61 
      5.12.3.2 HTML要素の属性とテキスト — 61 
6 canvasグラフィックス — 63 
  6.1 canvasとコンテキスト — 63 
    6.1.1 コンテキスト — 63 
  6.2 図形の描画 — 63 
    6.2.1 線と塗り — 63 
      6.2.1.1 線の太さ,色,ダッシュの設定 — 64 
      6.2.1.2 塗りつぶしの色の設定 — 64 
    6.2.2 円,円弧,楕円 — 64 
    6.2.3 四角形 — 66 
    6.2.4 文字列描画 — 66 
      6.2.4.1 フォント,スタイル,サイズの指定 — 66 
  6.3 画像ファイルの読み込みと表示 — 68 
  6.4 拡縮,平行移動,回転など — 68 
    6.4.1 拡縮 — 68 
    6.4.2 平行移動 — 68 
    6.4.3 回転 — 68 
    6.4.4 コンテキストの保存と復元 — 69 
  6.5 ピクセル(画素)の操作 — 71 
    6.5.1 ImageDataオブジェクトについて — 71 
    6.5.2 ピクセル描画の手順 — 72 
    6.5.3 サンプルプログラム — 73 
7 Webアプリケーション開発に必要なこと — 76 
  7.1 イベント駆動型プログラミング — 76 
    7.1.1 イベントの種類 — 76 
    7.1.2 プログラムの記述と実行の流れ — 77 
      7.1.2.1 イベントリスナの設定 — 79 
      7.1.2.2 イベントオブジェクト — 79 
      7.1.2.3 HTML要素にイベントハンドリングを記述する方法 — 80 
      7.1.2.4 マウスの位置の取得 — 80 
      7.1.2.5 要素のサイズの取得 — 81 
  7.2 メディアデータ(音声,動画)の再生 — 83 
    7.2.1 audio/videoタグを用いたメディアデータの読込み — 83 
    7.2.2 再生と一時停止 — 83 
      7.2.2.1 audio/videoタグへのコントロールの追加 — 84 
    7.2.3 audioタグを使用せずに音声を再生する方法 — 84 
      7.2.3.1 音声ファイルの読込み — 84 
    7.2.4 再生の時刻に関すること — 85 
      7.2.4.1 メディアデータ再生時に発生するイベント — 85 
    7.2.5 再生の音量に関すること — 86 
    7.2.6 再生の速度に関すること — 86 
  7.3 タイミングイベント — 86 
    7.3.1 タイミングイベントの繰り返し設定: setInterval — 88 
  7.4 データの保存 — 88 
    7.4.1 値の保存 — 88 
    7.4.2 値の参照 — 88 
    7.4.3 値の消去 — 88 
    7.4.4 その他(データの管理に関する機能など) — 89 
  7.5 表示環境の取得と設定 — 93 
    7.5.1 表示領域のサイズの取得 — 93 
    7.5.2 サーバとブラウザに関する情報の取得 — 94 
  7.6 JavaScriptによるスタイルの設定 — 96 
    7.6.1 id属性によるHTML要素の参照 — 96 
    7.6.2 スタイルの設定 — 96 
      7.6.2.1 位置属性の設定 — 96 
      7.6.2.2 可視属性の設定 — 97 
  7.7 要素の位置とサイズの取得 — 98 
  7.8 ファイルの読込み — 100 
    7.8.1 ファイル選択ダイアログ — 101 
    7.8.2 FileReader — 101 
    7.8.3 サンプルプログラム — 102 
  7.9 ドラッグアンドドロップ — 104 
    7.9.1 ドラッグアンドドロップに伴う処理 — 105 
    7.9.2 Webブラウザ外部からドラッグアンドドロップを受け付ける処理 — 107 
  7.10 インラインフレーム(iframe) — 109 
8 DOMに基づくプログラミング — 111 
  8.1 HTMLの編集 — 111 
    8.1.1 基本的な編集機能 — 111 
    8.1.2 HTMLの階層構造 — 112 
      8.1.2.1 要素の取得 — 112 
  8.2 SVGの描画 — 114 
    8.2.1 SVGの基本構造とHTML文書内での配置 — 114 
    8.2.2 SVGの座標系と長さ,角度の単位 — 114 
      8.2.2.1 ビューポートとビューボックス — 115 
    8.2.3 JavaScriptによるSVGの描画 — 117 
      8.2.3.1 XMLの名前空間 — 117 
    8.2.4 SVGの代表的な図形要素 — 119 
      8.2.4.1 多角形・折れ線 — 119 
      8.2.4.2 塗りとストローク,色の指定,曲がり角 — 120 
      8.2.4.3 パス — 122 
      8.2.4.4 矩形,円,楕円,直線,文字 — 125 
    8.2.5 SVG図形要素のイベントハンドリング — 126 
    8.2.6 SVG要素のグループ化 — 127 
    8.2.7 参考:SVG関連のライブラリ — 128 
9 オブジェクト指向プログラミング — 129 
  9.1 クラスの定義 — 129 
    9.1.1 コンストラクタ — 129 
    9.1.2 メソッド — 129 
  9.2 応用例:SVG描画クラスの実装 — 129 
    9.2.1 実装したクラスライブラリの解説 — 131 
    9.2.2 実装したクラスライブラリの使用例 — 131 
10 正規表現 — 134 
  10.1 文字列探索(検索): searchメソッド — 134 
  10.2 パターンマッチ: matchメソッド — 134 
  10.3 置換処理: replaceメソッド — 135 
  10.4 正規表現の記述方法 — 135 
11 ライブラリ — 136 
  11.1 jQuery — 136 
    11.1.1 jQueryを使用するための準備 — 136 
    11.1.2 jQueryの基本的な使い方 — 136 
      11.1.2.1 CSSの要素へのアクセス — 137 
      11.1.2.2 \$で関数を実行する方法 — 137 
      11.1.2.3 イベントハンドリングの登録 — 138 
    11.1.3 DOMの操作 — 140 
      11.1.3.1 子要素の追加 — 140 
      11.1.3.2 テキストの取得と設定 — 141 
      11.1.3.3 HTMLの取得と設定 — 142 
    11.1.4 視覚効果と高度なGUI — 143 
      11.1.4.1 要素を表示する/隠す — 143 
      11.1.4.2 jQuery UI — 145 
    11.1.5 その他の便利な機能 — 148 
      11.1.5.1 要素のインデックスの取得 — 148 
      11.1.5.2 文字列のトリミング — 149 
  11.2 MathJax — 151 
12 付録 — 153 
  12.1 フォントの活用 — 153 
    12.1.1 フォントの入手について — 153 
    12.1.2 利用法1:フォントファイルの組込み — 153 
    12.1.3 利用法2:Webで公開されているフォントの利用 — 155 
  12.2 ダウンロード機能の実装例 — 159 
  12.3 ブラウザ付属の開発機能 — 161 
    12.3.1 ソースプログラムの自動整形 — 161 
      12.3.1.1 Firefoxの場合 — 162 
      12.3.1.2 Google Chromeの場合 — 163 
    12.3.2 プログラムのステップ実行 — 164 
      12.3.2.1 Firefoxの場合 — 164 
      12.3.2.2 Google Chromeの場合 — 164 
    12.3.3 プログラムのデバッグ — 166 
      12.3.3.1 Google Chromeによるデバッグ作業の例 — 166 
    12.3.4 JavaScriptの対話的な実行 — 169