JavaScriptのテキスト

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

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

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

● テキスト中のサンプル

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

—【テキストの目次】—————————————————–
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　利用法１：フォントファイルの組込み　—　153　
　　　　12.1.3　利用法２：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