JavaScript

JavaScriptのテキスト

 
Web系プログラミングの授業で使っています.無料で差し上げますので,意見や感想をくださいませ.
→ katsu_wm%mukogawa-u.ac.jp (’%’を’@’に変えるとメールアドレスになります)
 
→ JavaScriptのテキスト(PDF形式,127ページ,2.48MB)
 
まだ試作段階で,どんどん改訂しています.
このテキストは「フリーソフトウェア」として公開します.(著作権は保持しています)
商用,非商用問わずご使用ください.印刷,再配布共にしていただいて構いませんが,その際は内容の改変をせずにお願いします.
 内容に不備がありましたら是非ご連絡ください.可能な限り迅速に修正して再配信いたしますが,テキスト内の「免責事項」に了承してください.
 
● テキスト中のサンプル

test1.html CSStest1.html GUIframe01.html
GUIframe02.html GUIframe03.html GUIframe04.html
convRadix.html
test2.html testFunc1.html testFunc0.html
test4.html test4.js OBJtest.html
testDateTime.html testGetDate.html test3.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
ssvg04.html SVGdraw.js SVGdraw_1.html
FontEmbed01.html FontSample01.html フォントは別途入手のこと
TxEdit01.html
FreeFall2.js FreeFall2.html

 
プログラム開発や教材作成の参考にしている書籍(広告リンクになっています)
 
 
 
—【テキストの目次】—————————————————–
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