JavaScript逆引きハンドブック目次

JavaScript逆引きハンドブック

■CHAPTER 01 JavaScriptの基礎知識と基本文法

001 JavaScriptの概要 38
002 JavaScriptの基本事項 40
003 演算子について 42
COLUMN 予約語について
004 リテラルについて 45
005 strictモードとバージョンの指定について 46
006 コメントについて 49
007 変数と定数について 51
COLUMN constでの不具合
008 繰り返し処理(ループ)について 54
COLUMN DOMを繰り返し操作する場合
009 条件分岐について 58
COLUMN 配列/ハッシュを利用する
010 関数の定義 62
011 関数のパラメータの読み出しについて 64
012 「this」キーワードの固定について 66
013 例外処理について 68
014 イベント処理について 71
COLUMN IE6〜8でのイベント設定
015 ドキュメントオブジェクトモデルについて 74


■CHAPTER 02 オブジェクト

016 文字列やオブジェクトを評価する 78
ONEPOINT 式や文の評価を行うには「eval()」メソッドを使う
COLUMN ビルトインオブジェクト
017 数値かどうか調べる 80
ONEPOINT 数値かどうかを調べるには「isNaN()」メソッドを使う
COLUMN 整数値かどうか調べる
018 文字列をエスケープ化/エンコード/デコードする 82
ONEPOINT 文字をエスケープ化するには「escape()」「encodeURI()」「encodeURIComponent()」関数を使う
019 数値に変換する/数値の単位を削除する 84
ONEPOINT 文字を数値に変換するには「parseInt()」メソッドや「parseFloat()」メソッドを使う
COLUMN 「eval()」メソッドで文字を数値に変換する
020 JavaScriptのデータをJSON形式に変換する 86
ONEPOINT JavaScriptのデータをJSON形式に変換するには「JSON.stringify()」メソッドを使う
021 JSON形式からオブジェクトに変換する 88
ONEPOINT JSON形式からオブジェクトにするには「JSON.parse()」メソッドを使う
COLUMN Local StorageとJSON
022 オブジェクトを生成する 90
ONEPOINT オブジェクトを生成するには「new Object()」とするか「{ }」を使う
COLUMN オブジェクトの生成速度
023 指定されたオブジェクトを継承して新たなオブジェクトを生成する 92
ONEPOINT オブジェクトを継承し新たなオブジェクトを生成するには「Object.create()」メソッドを使う
024 オブジェクトのインスタンスを調べる 94
ONEPOINT どのオブジェクトから派生したのか調べるには「instanceof」演算子を使う
025 オブジェクトの内容を読み出す 96
ONEPOINT オブジェクトの内容を読み出すには「for...in」文を使う
COLUMN 「in」演算子を使ってプロパティがあるか調べる
026 プロトタイプを利用する 98
ONEPOINT プロトタイプを利用するには「prototype」を使う
027 プロパティの属性値を設定・取得する 100
ONEPOINT プロパティの属性値を設定するには「オブジェクト名.プロパティ名 = 内容」、取得するには「オブジェクト名.プロパティ名」とする
028 オブジェクトのプロパティの読み出し・書き込み処理を設定する 102
ONEPOINT オブジェクトのプロパティの読み出し・書き込み処理を設定するには「Object.create()」「Object.defineProperty()」メソッドなどを使う
029 オブジェクトの変更を禁止する 104
ONEPOINT オブジェクトを保護するには「freeze()」メソッドを使う
030 プロパティの追加を禁止する 106
ONEPOINT プロパティの追加を禁止するには「preventExtensions()」メソッドを使う
031 オブジェクトの変更・拡張などが可能か調べる 108
ONEPOINT オブジェクトが拡張可能か確認するには「isExtensible」プロパティを使う
032 オブジェクトのプロパティ一覧を取得する 110
ONEPOINT オブジェクトのプロパティ一覧を取得するには「keys()」メソッドと「getOwnPropertyNames()」メソッドを使う
033 オブジェクトの種類を調べる 112
ONEPOINT オブジェクトの種類を調べるには「typeof」演算子を使う
034 プロパティのオーナーかどうか調べる 114
ONEPOINT プロパティのオーナーかどうか調べるには「hasOwnProperty()」メソッドを使う
035 「Boolean」オブジェクトを生成する 116
ONEPOINT 「Boolean」オブジェクトを生成するには「new Boolean()」とする
036 プロパティやオブジェクトを削除する 117
ONEPOINT オブジェクトを削除するには「null」を代入、プロパティを削除するには「delete」演算子を使う


■CHAPTER 03 配列

037 配列オブジェクトを生成する 120
ONEPOINT 配列を生成するには「new Array()」や「[]」を使う
038 指定したビット長の配列を生成する 122
ONEPOINT ビット長を指定して配列要素を生成するには「Typed Array」を使う
039 配列同士や配列要素を連結する 124
ONEPOINT 配列同士を連結するには「concat()」メソッド、配列要素を連結するには「join()」メソッドを使う
COLUMN IE6で高速に文字列を連結する
040 配列要素を抜き出す 126
ONEPOINT 配列要素を抜き出すには「slice()」メソッドを使う
041 配列要素を抽出・挿入する 128
ONEPOINT 配列要素を抽出・挿入するには「splice()」メソッドを使う
042 条件を満たす配列要素を調べる 130
ONEPOINT 配列要素が条件を満たしているか調べるには「every()」メソッドや「some()」メソッドを使う
043 配列要素を順番に処理する 132
ONEPOINT 配列要素を順番に処理するには「forEach()」メソッドを使う
COLUMN 重複している要素を排除するには
044 配列要素を検索する 134
ONEPOINT 配列要素を検索するには「indexOf()」メソッドや「lastIndexOf()」メソッドメソッドを使う
045 配列かどうか調べる 136
ONEPOINT 配列かどうか調べるには「instanceof」演算子や「Array.isArray()」メソッドを使う
046 配列要素の総数を求める 138
ONEPOINT 配列の要素数を調べるには「length」プロパティを使う
COLUMN 連想配列も含めた要素数を求めるには
047 配列要素を加工する 140
ONEPOINT 配列要素を加工するには「map()」メソッドを使う
048 配列要素を追加・削除する 142
ONEPOINT 配列の末尾に要素を追加するには「push()」メソッド、末尾の要素の削除を行うには「pop()」メソッドを使う
COLUMN 任意の位置に要素を追加するには
049 配列要素を前方または後方から処理する 144
ONEPOINT 要素を先頭から処理するには「reduce()」メソッド、末尾から処理するには「reduceRight()」メソッドを使う
050 配列要素をソートする 146
ONEPOINT 要素をソートするには「sort()」メソッドを使う
051 配列要素を逆順にする 148
ONEPOINT 配列要素の順序を逆順にするには「reverse()」メソッドを使う
052 配列要素内容を前方/後方にずらす 149
ONEPOINT 配列内容を前方に移動させるには「shift()」メソッド、後方に移動させるには「unshift()」メソッドを使う
COLUMN 配列内容をローテーションさせる
053 配列要素を文字列に変換する 151
ONEPOINT 配列要素を文字列に変換するには「toString()」メソッドや「JSON.stringify()」メソッドを使う
COLUMN 配列オブジェクトの生成時間
054 「WeakMap」オブジェクトを生成する 153
ONEPOINT 「WeakMap」オブジェクトを生成するには「new WeakMap()」とする
055 WeakMapで該当するキーがあるか調べる 155
ONEPOINT WeakMapでキーの有無を調べるには「has()」メソッドを使う
056 WeakMapのキーを削除する 157
ONEPOINT キーの削除を行うには「delete()」メソッドを使う


■CHAPTER 04 数値・数学

057 「Number」オブジェクトを生成する 160
ONEPOINT 「Number」オブジェクトを生成するには「new Number()」とする
COLUMN 虚数について
058 数値の桁数を指定する 162
ONEPOINT 桁数を指定するには「toPrecision()」メソッドを使う
059 数値を小数点以下n桁にする 163
ONEPOINT 小数点以下の桁数を指定するには「toFixed()」メソッドを使う
060 3桁ごとに区切る 164
ONEPOINT 3桁ごとに区切るには数値を文字列に変換して「,」を連結する
061 数値を指定桁数にして不足分を先頭から「0」で埋める 166
ONEPOINT 不足分の桁を「0」で埋めるには「slice()」メソッドを使う
062 小数部分と整数部分を分けて取り出す 168
ONEPOINT 小数部分と整数部分を分けるには文字型に変換した後で「split()」メソッドで分割する
063 使用可能な最大値/最小値を取得する 170
ONEPOINT 扱える値の最大値を取得するには「Number.MAX_VALUE」、最小値を取得するには「Number.MIN_VALUE」を使う
064 演算誤差を減らす 171
ONEPOINT 演算誤差を減らすにはいったん整数にして演算する
065 大きな数値同士の演算を行う 173
ONEPOINT 正しい演算結果を得るにはBigDecimal.jsライブラリを利用する
COLUMN BigDecila.jsの演算メソッド
066 ビット演算を行う 177
ONEPOINT ビット演算を行うにはビット演算子を使う
067 絶対値を求める 179
ONEPOINT 絶対値を求めるには「Math.abs()」メソッドを使う
068 値を比較する 180
ONEPOINT 値の比較を行うには「Math.min()」メソッドや「Math.max()」メソッドを使う
069 三角関数で計算する 181
ONEPOINT 三角関数を取得するには「Math.sin()」メソッドや「Math.cos()」メソッドなどを使う
070 円周率を求める 183
ONEPOINT 円周率を扱うには「Math.PI」を使う
COLUMN 度(degree)とラジアン(radian)を変換するには
071 四捨五入/切り捨て/切り上げを行う 184
ONEPOINT 四捨五入を行うには「Math.round()」メソッド、切り捨てを行うには「Math.floor()」メソッド、切り上げを行うには「Math.ceil()」メソッドを使う
COLUMN その他の切り捨て方法
072 自然対数の値を求める 186
ONEPOINT 自然対数の値を求めるには「Math.log()」メソッドや「Math.E」「Math.LN2」「Math.LN10」を使う
COLUMN 底が10の場合の対数と底が2の場合の対数を求めるには
073 eの累乗を求める 188
ONEPOINT eの累乗を求めるには「Math.exp()」メソッドを使う
074 べき乗を求める 189
ONEPOINT べき乗計算を行うには「Math.pow()」メソッドを使う
075 平方根を求める 190
ONEPOINT 平方根を求めるには「Math.sqrt()」メソッドを使う
076 乱数を求める 191
ONEPOINT 乱数を求めるには「Math.random()」メソッドを使う
COLUMN 整数値の乱数を求めるには


■CHAPTER 05 文字列・正規表現

077 「String」オブジェクトを生成する/文字列を連結する 194
ONEPOINT 「String」オブジェクトを生成するには「new String()」や「"」、「'」を使う
COLUMN サロゲートペアの文字
COLUMN Latin-1コード表
078 文字列の長さを求める 197
ONEPOINT 文字列の長さを求めるには「length」プロパティを使う
079 文字と文字コードを変換する 198
ONEPOINT 文字を文字コードに変換するには「charCodeAt()」メソッド、文字コードを文字に変換するには「String.fromCharCode()」メソッドを使う
COLUMN 文字コードについて
080 文字列を検索する 200
ONEPOINT 文字列の検索を行うには「indexOf()」メソッドや「lastIndexOf()」メソッドを使う
081 文字を取り出す 202
ONEPOINT 文字を取り出すには「charAt()」メソッドを使う
COLUMN 文字を文字コードで取得するには
082 文字列を指定文字で分割する 204
ONEPOINT 文字列を指定文字で分割するには「split()」メソッドを使う
083 指定範囲の文字を抜き出す 206
ONEPOINT 文字列を抜き出すには「substring()」メソッドや「slice()」メソッド、「substr()」メソッドを使う
084 英文字の大文字/小文字に変換する 208
ONEPOINT 英文字を小文字に変換するには「toLowerCase()」メソッド、大文字に変換するには「toUpperCase()」メソッドを使う
COLUMN 全角数字を半角数字に変換する
085 文字列の前後にある空白を削除する 210
ONEPOINT 文字列の前後の空白を削除するには「trim()」メソッドを使う
086 特定の文字列を削除する 211
ONEPOINT 文字列を削除するには「split()」メソッドのパラメータに削除したい文字を指定する
COLUMN 文字列の数をカウントする
087 「RegExp」オブジェクトを生成する 213
ONEPOINT 「RegExp」オブジェクトを生成するには「new RegExp()」とする
COLUMN 正規表現文字の一覧
088 正規表現を使って文字を検索する 216
ONEPOINT 正規表現を使って検索するには「match()」メソッドを使う
089 正規表現を使って文字を置換する 218
ONEPOINT 正規表現を使って文字を置換するには「replace()」メソッドを使う


■CHAPTER 06 日付・時刻

090 「Date」オブジェクトを生成する 222
ONEPOINT 日付を扱うには「Date」オブジェクトを使う
091 日付を求める 224
ONEPOINT 日付を読み出すには「getYear()」メソッドや「getDate()」メソッドなどを使う
092 時刻を求める 226
ONEPOINT 時刻を読み出すには「getHours()」メソッドや「getMinutes()」メソッドを使う
COLUMN JavaScriptの「Date」オブジェクトで扱える日付の限界
093 協定世界時の日付を求める 228
ONEPOINT 協定世界時を読み出すには「getUTCFullYear()」メソッドや「getUTCDate()」メソッドなどを使う
COLUMN グリニッジ標準時
094 協定世界時の時刻を求める 230
ONEPOINT 協定世界時の時刻を読み出すには「getUTCHours()」メソッドや「getUTCMinutes()」メソッドなどを使う
095 1970年1月1日午前0時0分0秒から指定時までの経過ミリ秒を求める 232
ONEPOINT 経過ミリ秒を取得するには「Date.now()」や「getTime()」メソッドを使う
096 日付を設定する 234
ONEPOINT 日付を設定するには「setFullYear()」「setMonth()」「setDate()」メソッドを使う
097 時刻を設定する 236
ONEPOINT 時刻を設定するには「setHours()」メソッドや「setMinutes()」メソッドなどを使う
098 協定世界時の日付を設定する 238
ONEPOINT 協定世界時の日付を設定するには「setUTCFullYear()」「setUTCMonth()」「setUTCDate()」メソッドを使う
099 協定世界時の時刻を設定する/時差を求める 240
ONEPOINT 協定世界時の時刻を設定するには「setUTCHours()」「setUTCMinutes()」メソッドなどを使う
100 さまざまな日付や時刻の形式に変換する 242
ONEPOINT 地域に合わせた日付と時刻を取得するには「toLocateDateString()」メソッドや「toLocaleTimeString()」メソッドを使う
101 グリニッジ標準時を求める 244
ONEPOINT グリニッジ標準時を求めるには「toGMTString()」メソッドを使う
COLUMN GMTなのにUTCと表示される
102 日付情報をJSON形式に変換する 246
ONEPOINT 日付をJSON形式に変換するには「toJSON()」メソッドを使う
COLUMN JSONについて


■CHAPTER 07 ブラウザオブジェクト

103 ブラウザ名やバージョンを取得する 250
ONEPOINT ブラウザに関する情報を取得するには「navigator」オブジェクトを使う
COLUMN ブラウザを判別するには
104 JavaやGeolocationなどの機能が使えるかどうか調べる 252
ONEPOINT 利用できる機能のチェックを行うにはオブジェクトの存在を確認する
105 接続回線の種類を調べる 253
ONEPOINT 接続回線の種類を調べるには「navigator.connection.type」プロパティを使う
106 ヒストリー数を求める 255
ONEPOINT ヒストリー数を取得するには「history」オブジェクトの「length」プロパティを使う
107 ページを進める/戻す 256
ONEPOINT ヒストリー間でページを移動するには「back()」「forward()」「go()」メソッドを使う
108 ヒストリーを追加・置換する 258
ONEPOINT ヒストリーを追加するには「pushState()」メソッド、置換するには「replaceState()」メソッドを使う
109 画面のサイズを求める 261
ONEPOINT モニタ画面のサイズを調べるには「screen」オブジェクトの「width」プロパティや「height」プロパティを使う
COLUMN マルチモニタの場合
110 画面の色深度を求める 263
ONEPOINT 画面の色深度を調べるには「screen」オブジェクトの「colorDepth」プロパティを使う
111 画面の解像度を調べる 265
ONEPOINT 画面の解像度を調べるには「deviceXDPI」プロパティや「deviceYDPI」プロパティ、「devicePixelRatio」プロパティを使う
112 ウィンドウの幅を求める 267
ONEPOINT ウィンドウ幅を求めるには「outerWidth」「outerHeight」「innerWidth」「innerHeight」プロパティを使う
113 指定位置までスクロールさせる 269
ONEPOINT ページ内容をスクロールさせるには「scrollTo()」メソッドや「scrollBy()」メソッドを使う
COLUMN スマートフォンでアドレスバーを隠す
114 Base64エンコード/デコードする 272
ONEPOINT Base64エンコードするには「btoa()」メソッド、Base64デコードするには「atob()」メソッドを使う
115 印刷する 274
ONEPOINT 印刷するには「print()」メソッドを使う
116 選択された文字を取得する 276
ONEPOINT 選択された文字を取得するには「getSelection()」メソッドと「getRangeAt()」メソッドを使う
117 アラートダイアログ/確認ダイアログ/入力ダイアログを表示する 278
ONEPOINT 各種ダイアログを表示するには「alert()」「confirm()」「prompt()」メソッドを使う
COLUMN 表示できない文字
COLUMN Windows Phoneでは「prompt()」メソッドは使えない
118 モーダルダイアログを表示する 281
ONEPOINT モーダルダイアログを表示するには「showModalDialog()」メソッドを使う
119 タイマーを設定・解除する 283
ONEPOINT タイマーを設定するには「setTimeout()」メソッド、タイマーを解除するには「clearTimeout()」メソッドを使う
COLUMN 「setTimeout()」メソッドの3番目以降のパラメータ
120 インターバルタイマーを設定・解除する 286
ONEPOINT インターバルタイマーを設定するには「setInterval()」メソッド、解除するには「clearInterval()」メソッドを使う
121 アニメーション同期タイマーを設定・解除する 289
ONEPOINT アニメーション同期タイマーを設定するには「window.requestAnimationFrame()」メソッド、解除するには「window.cancelAnimationFrame()」メソッドを使う
COLUMN ベンダープレフィックスについて
122 非同期処理を行う 292
ONEPOINT 非同期処理を行うには「setImmediate()」メソッドを使う
COLUMN 「setTimeout()」メソッドを使った非同期処理
123 ドキュメントのタイトルを取得・設定する 294
ONEPOINT ドキュメントのタイトルを取得・設定するには「title」プロパティを使う
124 ドキュメント内に出力する 296
ONEPOINT ページへの出力を行うには「document.write()」メソッドを使う
125 クッキーに書き込みが可能かどうか調べる 297
ONEPOINT クッキーが利用できるか調べるには「cookieEnabled」プロパティを使う
126 クッキーの読み書きを行う 299
ONEPOINT クッキーの読み書きを行うには「document.cookie」プロパティを使う
127 ドメイン名・ホスト名・パス名・プロトコルを求める 302
ONEPOINT URL情報を取得するには「location」オブジェクトと「document」オブジェクトのプロパティを使う
128 直前に見ていたページのURLを求める 304
ONEPOINT 前に見ていたページURLを取得するには「document.referrer」プロパティを使う
129 ページをリロードする 305
ONEPOINT ページをリロードするには「reload()」メソッドを使う
130 ページのURLを取得・設定する 307
ONEPOINT URLの取得と移動を行うには「href」プロパティを使う
131 「Image」オブジェクトを生成する 309
ONEPOINT 「Image」オブジェクトを生成するには「new Image()」とする
132 画像の幅を設定・取得する 311
ONEPOINT 画像のサイズを取得・設定するには「width」プロパティと「height」プロパティを使う
133 画像のオリジナルの幅を取得する 313
ONEPOINT 画像の元のサイズを取得するには「naturalWidth」プロパティと「naturalHeight」プロパティを使う
134 画像データが読み込まれた場合に処理する 315
ONEPOINT 画像の読み込み完了のチェックを行うには「onload」プロパティを使う
135 画像データを入れ替える 317
ONEPOINT 画像の入れ替えを行うには「src」プロパティを使う
COLUMN CSSでロールオーバーを行うには
136 フォーム要素にアクセスする 319
ONEPOINT フォームを制御するには要素にアクセスする
137 ラジオボタン/チェックボックスの状態を設定・取得する 321
ONEPOINT ラジオボタンとチェックボックスの選択状態を調べるには「checked」プロパティを使う
138 フォーム要素のフォーカスを設定する 323
ONEPOINT フォーカスを設定するには「focus()」メソッドや「blur()」メソッド、「select()」メソッドを使う
139 フォーム内容を読み出す 325
ONEPOINT 入力された内容を読み出すには「value」プロパティを使う
140 内容をDate型/数値型として読み出す 327
ONEPOINT 数値型として読み出すには「valueAsNumber」プロパティ、日付型として読み出すには「valueAsDate」プロパティを使う
141 フォームへの入力を禁止・許可する 329
ONEPOINT テキストフィールドへの入力を禁止するには「disabled」プロパティを使う
142 セレクトメニューで選択された項目を取得する 331
ONEPOINT 選択された項目の情報を取得するには「selectedIndex」プロパティや「value」プロパティ、「text」プロパティを使う
143 フォーム内容を初期化する 333
ONEPOINT フォーム内容を初初期化するには「reset()」メソッドを使う
144 数値専用のフィールドで値を増減する 335
ONEPOINT ボタンで値を増減させるには「stepUp()」メソッドと「setpDown()」メソッドを使う
145 非同期通信オブジェクトを生成する 337
ONEPOINT 非同期通信を行うには「XMLHttpRequest」オブジェクトを使う
146 サーバーからテキストデータやXMLデータを受信する 339
ONEPOINT サーバーからテキストデータを受信するには「responseText」プロパティ、XMLデータを受信するには「responseXML」プロパティを使う
147 リクエストヘッダーを設定する 342
ONEPOINT リクエストヘッダーを設定するには「setRequestHeader()」メソッドを使う
COLUMN IE6〜9でキャッシュデータが利用されるのを回避する方法
148 MIMEタイプを設定する 344
ONEPOINT MIMEタイプを設定するには「overrideMimeType()」メソッドを使う
149 デバッグコンソールに文字を出力する 346
ONEPOINT デバッガのコンソールに出力するには「console.log()」メソッドを使う
COLUMN 「console.log()」メソッドの出力結果について
COLUMN IEの場合
COLUMN その他のコンソール出力用メソッド
COLUMN デバッガを表示するには
150 デバッグコンソールにオブジェクトの内容を出力する 349
ONEPOINT オブジェクトの中身を確認するには「console.dir()」メソッドを使う
COLUMN 「console.dir()」メソッドの出力結果について
151 処理にかかった時間を詳細に把握する 351
ONEPOINT 処理時間を詳しく計測するにはプロファイルを利用する
COLUMN 「console.profile()」メソッドの出力結果について
152 呼び出し元の関数を把握する 353
ONEPOINT 呼び出し元の関数を調べるには「console.trace()」メソッドを使う
COLUMN 「console.trace()」メソッドの出力結果について


■CHAPTER 08 DOM

153 特定のID名を持つ要素にアクセスする 356
ONEPOINT 特定のID名を持つ要素を操作するには「getElementById()」メソッドを使う
COLUMN DOMの読み込みタイミング
154 特定のスタイルシートクラスを持つ要素にアクセスする 358
ONEPOINT 特定のスタイルシートクラスを持つ要素にアクセスするには「getElementsByClassName()」メソッドを使う
155 要素名を指定してアクセスする 360
ONEPOINT 要素名を指定してアクセスするには「getElementsByTagName()」メソッドを使う
156 特定の名前を持つ要素にアクセスする 362
ONEPOINT 名前を指定してアクセスするには「getElementsByName()」メソッドを使う
157 セレクタを使って要素にアクセスする 364
ONEPOINT セレクタを使って要素にアクセスするには「querySelector()」「querySelectorAll()」メソッドを使う
158 要素を生成する 366
ONEPOINT 要素を生成するには「document.createElement()」メソッドを使う
159 テキストノードを生成する 368
ONEPOINT テキストノードを生成するには「document.createTextNode()」メソッドを使う
160 子ノードにアクセスする 370
ONEPOINT 子ノードにアクセスするには「firstChild」「childNodes」「lastChild」プロパティを使う
161 前後のノードや親ノードにアクセスする 372
ONEPOINT 前後のノードにアクセスするには「nextSibling」「previousSibling」プロパティ、親ノードにアクセスするには「parentNode」プロパティを使う
162 ノードを追加・挿入する 374
ONEPOINT ノードを追加するには「appendChild()」メソッド、挿入するには「insertBefore()」メソッドを使う
163 子ノードを削除・置換する 376
ONEPOINT 子ノードを削除するには「removeChild()」メソッド、置換するには「replaceChild()」メソッドを使う
164 ノードの内容にアクセスする 378
ONEPOINT ノードの内容にアクセスするには「nodeValue」プロパティを参照する
165 要素の内容を書き換える 380
ONEPOINT 要素の内容を書き換えるには「innerHTML」プロパティや「innerText」プロパティを使う
166 属性値を取得・設定する 382
ONEPOINT 属性値を取得するには「getAttribute()」メソッド、設定するには「setAttribute()」メソッドを使う
COLUMN IE6/IE7での「class」属性
167 属性を新規作成・削除する 384
ONEPOINT 新規に属性を作成するには「document.createAttribute()」メソッド、削除するには「removeAttribute()」メソッドを使う
168 ノードを一括して追加する 386
ONEPOINT ノードを一括して追加するには「document.createDocumentFragment()」メソッドを使って他のDOMツリーを用意する
COLUMN ノードを追加する際の速度について
169 Shadow DOMとして要素を追加する 388
ONEPOINT Shadow DOMとして追加するには「new WebKitShadowRoot()」とする
COLUMN Chromeでの設定
170 通常のDOMツリーの要素をShadow DOMにする 390
ONEPOINT 要素をShadow DOMにするには「new WebKitShadowRoot()」とする
COLUMN Chromeでの設定
171 Shadow DOMにある要素にアクセスする 392
ONEPOINT Shadow DOMにある要素にアクセスするにはDOM関連のメソッドを使う
COLUMN Chromeでの設定


■CHAPTER 09 イベント

172 イベントハンドラを設定する 396
ONEPOINT イベントハンドラを設定するには要素に割り当てられたプロパティを使う
173 イベントリスナーを設定する 398
ONEPOINT イベントリスナーを設定するには「addEventListener()」メソッドを使う
COLUMN IE6〜8でイベントリスナーを設定するには
174 押されたキーを調べる 401
ONEPOINT 押されたキーを調べるには「keyCode」プロパティや修飾キー専用のプロパティを使う
COLUMN スマートフォンでのキー入力
175 イベントが発生した座標を求める 404
ONEPOINT イベントが発生した座標を求めるには「clientX」プロパティや「clientY」プロパティなどを使う
176 発生したイベントの種類を求める 406
ONEPOINT 発生したイベントの種類を求めるには「type」プロパティを使う
177 マウスホイールの値を取得する 408
ONEPOINT マウスホイールの値を取得するには「mousewheel」イベントや「DOMMouseScroll」イベントを検知する
178 トラックパッドの移動量を求める 410
ONEPOINT トラックパッドの移動量を求めるには「MozMousePixelScroll」イベントを検知する
COLUMN マウスホイールとの関係
179 フォーカスした際に処理を行う 412
ONEPOINT フォーカスに関する処理を行うには「focus」イベントや「blur」イベントを使う
180 クリック時/ダブルクリック時の処理を行う 414
ONEPOINT クリック時に処理を行うには「click」イベント、ダブルクリック時に処理を行うには「dblclick」イベントを捕捉する
181 マウスオーバー時/マウスアウト時の処理を行う 416
ONEPOINT マウスオーバー時の処理を行うには「mouseover」イベント、マウスアウト時の処理を行うには「mouseout」イベントを捕捉する
182 マウスダウン時/マウスアップ時の処理を行う 418
ONEPOINT マウスダウン時の処理を行うには「mousedown」イベント、マウスアップ時の処理を行うには「mouseup」イベントを捕捉する
183 マウスの右ボタンが押されたときに処理する 420
ONEPOINT マウスの右ボタンが押されたときに処理するには「contextmenu」イベントを捕捉する
COLUMN Windows Phoneの場合
184 カット/コピー/ペーストされた際に処理を行う 422
ONEPOINT カット・コピー・ペーストされた際に処理を行うには「copy」イベントや「paste」イベントなどを補足する
185 ドラッグ時に処理を行う 424
ONEPOINT ドラッグ時に処理を行うには「dragstart」「drag」「dragend」イベントを補足する
186 ページの読み込みやDOMの構築が完了した際に処理を行う 427
ONEPOINT DOMの構築が完了した際に処理を行うには「DOMContentLoaded」イベントを検知する
187 リセット時・送信時に処理する 429
ONEPOINT リセット時に処理するには「reset」イベント、送信時に処理するには「submit」イベントを補足する
188 スクロール時に処理を行う 431
ONEPOINT スクロール時に処理するには「scroll」イベントを捕捉する
189 テキストフィールド内のテキスト選択時に処理を行う 433
ONEPOINT テキスト選択時に処理を行うには「select」イベントを捕捉する
COLUMN IE6〜8で動作させるには
190 指定した座標にある複数の要素を求める 436
ONEPOINT 指定した座標にある要素を求めるには「elementFromPoint()」「elementsFromPoint()」「elementsFromRect()」メソッドを使う
191 CSSのメディアクエリが変化したら処理する 438
ONEPOINT メディアクエリが変化したら処理するには「window.matchMedia()」メソッドと「addListener()」メソッドを使う


■CHAPTER 10 Canvas/Canvas 3D/SVG

192 コンテキストを取得する 442
ONEPOINT コンテキストを取得するには「getContext()」メソッドを使う
193 パスを作成する 444
ONEPOINT 新規にパスを作成するには「beginPath()」メソッド、クローズパスに設定するには「closePath()」メソッドを使う
COLUMN Androidでの不具合
194 直線を描画する 446
ONEPOINT 直線の描画を行うには「lineTo()」メソッドを使う
COLUMN 連続して直線を描くには
195 四角形を描画する 448
ONEPOINT 四角形の描画を行うには「fillRect()」「strokeRect()」「clearRect()」「rect()」メソッドを使う
196 円や円弧を描く 450
ONEPOINT 円や円弧の描画を行うには「arc()」メソッドや「arcTo()」メソッドを使う
COLUMN Androidでの不具合
COLUMN Operaでの不具合
197 曲線を描く 453
ONEPOINT 曲線の描画を行うには「bezierCurveTo()」メソッドや「quadraticCurveTo()」メソッドを使う
198 多角形を描く 455
ONEPOINT 多角形を描画するには角度からX座標とY座標を求める
199 角丸四角形を描く 457
ONEPOINT 角丸四角形を描画するには「lineTo()」メソッドと「arc()」メソッドを組み合わせる
200 ドーナツなどの中をくり抜いた図形を描く 459
ONEPOINT 中をくり抜いた図形を描くにはパスのベクトルを考慮する
COLUMN Andoridでの不具合
201 色と線のスタイルを設定する 461
ONEPOINT スタイルの指定を行うには「strokeStyle」プロパティを使う
202 不透明度を設定する 463
ONEPOINT 不透明度の指定を行うには「globalAlpha」プロパティを使う
203 描画モードを設定する 465
ONEPOINT 描画モードの指定を行うには「globalCompositeOperation」プロパティを使う
204 クリッピングする 468
ONEPOINT クリッピング領域の指定を行うには「clip()」メソッドを使う
205 文字を描画する 470
ONEPOINT 文字を描画するには「fillText()」メソッドや「strokeText()」メソッドを使う
COLUMN Safari 5とOperaでの不具合
206 文字の幅を求める 472
ONEPOINT 文字幅を求めるにはテキストメトリクスオブジェクトの「width」プロパティを使う
COLUMN 検討中のテキストメトリクスのプロパティ
207 文字の位置揃えを指定する 474
ONEPOINT 文字の位置揃えを指定するには「textAlign」プロパティを使う
208 グラデーションを設定する 476
ONEPOINT グラデーションを描画するには「createLinearGradient()」メソッドや「createRadialGradient()」メソッドを使う
209 画像を描画する 478
ONEPOINT 画像を描画するには「drawImage()」メソッドを使う
210 グレースケール画像にする 480
ONEPOINT グレースケール画像にするにはピクセルデータを読み出して計算式に従って変換する
COLUMN ローカルディスク上での動作について
COLUMN 処理する画像が大きい場合
COLUMN Safari 6とRetina Displayの場合
211 エンボス加工する 484
ONEPOINT エンボス加工するには2つのピクセルの輝度の差分を取る
COLUMN ローカルディスク上での動作について
COLUMN 処理する画像が大きい場合
212 画像をぼかす 488
ONEPOINT 画像をぼかすにはピクセルの平均を取る
COLUMN ローカルディスク上での動作について
COLUMN 処理する画像が大きい場合
COLUMN ガウスぼかしを適用するには
213 画像のガンマ補正を行う 492
ONEPOINT 画像のガンマ補正を行うには「255×(輝度÷255)1/γ」の計算式を使う
COLUMN ローカルディスク上での動作のついて
COLUMN 処理する画像が大きい場合
214 画像を白黒化(2値化)する 495
ONEPOINT 画像を白黒化(2値化)するにはしきい値によって黒と白にピクセルを置き換える
COLUMN ローカルディスク上での動作について
COLUMN 処理する画像が大きい場合
215 画像を特定の色相(トーン)にする 499
ONEPOINT 画像を特定の色相(トーン)にするにはピクセルの色情報をRGBからHSVやHSLなどに変換する
COLUMN ローカルディスク上での動作について
COLUMN 処理する画像が大きい場合
216 パターンを生成する 503
ONEPOINT パターンを生成するには「createPattern()」メソッドを使う
217 影を描画する 505
ONEPOINT 影を描画するには「shadowColor」「shadowBlur」「shadowOffsetX」「shadowOffsetY」プロパティを使う
COLUMN Androidの「shadowOffsetY」プロパティの不具合
218 映像をCanvasに描画する 507
ONEPOINT 映像を描画するには「drawImage()」メソッドを使う
219 Canvasの内容を他のCanvasに描画する 509
ONEPOINT 他のCanvasの内容を描画するには「drawImage()」メソッドを使う
220 図形を回転させる 512
ONEPOINT 回転を行うには「rotate()」メソッドを使う
221 図形を移動させる 514
ONEPOINT 移動処理を行うには「translate()」メソッドを使う
222 図形を拡大・縮小させる 516
ONEPOINT 拡大・縮小を行うには「scale()」メソッドを使う
223 図形や画像を変形させる 518
ONEPOINT 図形や画像を変形させるには「transform()」メソッドや「setTransform()」メソッドを使う
224 パス内に座標点があるか調べる 520
ONEPOINT パス内に座標点があるか調べるには「isPointInPath()」メソッドを使う
225 Canvasの状態を保存・復元する 523
ONEPOINT Canvasの状態を保存するには「save()」メソッド、復元するには「restore()」メソッドを使う
226 Canvasに描画済みの内容をスクロールする 525
ONEPOINT Canvasの内容をスクロールするには「getImageData()」メソッドと「putImageData()」メソッドを使う
227 Canvasの画像データをdataURL形式に変換する 527
ONEPOINT ピクセルデータをdatURL形式に変換するには「toDataURL()」メソッドを使う
COLUMN ローカルディスク上での動作
228 画像をローカルストレージに保存する 529
ONEPOINT 画像を保存するには「toDataURL()」メソッドを使う
COLUMN ローカルディスク上での動作
229 WebGLが利用できるか調べる 532
ONEPOINT 3D描画が可能か調べるには「getContext()」メソッドを使う
230 Three.jsを使って3D処理を行う 534
ONEPOINT 3D処理を簡単に行うにはThree.jsを使う
231 ワイヤーフレーム表示の幅と不透明度を設定する 537
ONEPOINT ワイヤーフレームの幅を指定するには「wireframeLinewidth」プロパティ、不透明度を指定するには「opacity」プロパティを使う
232 カメラを設定する 539
ONEPOINT 設定できるカメラには透視投影のカメラと正投影のカメラ、複合カメラがある
233 光源を追加する 542
ONEPOINT 平行光源を追加するには「new THREE.DirectionalLight()」とする
234 立方体を生成する 544
ONEPOINT 立方体を生成するには「new THREE.CubeGeometry()」とする
235 球体を生成する 546
ONEPOINT 球体を生成するには「new THREE.SphereGeometry()」とする
236 トーラスを生成する 549
ONEPOINT トーラスを生成するには「new THREE.TorusGeometry()」とする
237 トーラス結び目を生成する 551
ONEPOINT トーラス結び目を生成するには「new THREE.TorusKnotGeometry()」とする
238 平面を生成する 553
ONEPOINT 平面を生成するには「new THREE.PlaneGeometry()」とする
239 円筒を生成する 555
ONEPOINT 円筒を生成するには「new THREE.CylinderGeometry()」とする
240 正二十面体を生成する 557
ONEPOINT 正二十面体を生成するには「new THREE.IcosahedronGeometry()」とする
241 回転体を生成する 560
ONEPOINT 回転体を生成するには「new THREE.LatheGeometry()」とする
242 線を生成する 563
ONEPOINT 線を生成するには「new THREE.Geometry()」とする
243 テクスチャマッピングを行う 566
ONEPOINT 画像を貼り付けるには「new THREE.ImageUtils.loadTexture()」を使う
244 周りの景色を反射させて表示する 569
ONEPOINT 環境マップを設定するには「THREE.ImageUtils.loadTextureCube()」を使う
245 立方体などの物体を回転させる 572
ONEPOINT 回転させるには「rotation.x」「rotation.y」「rotation.z」プロパティを使う
246 立方体などの物体を移動させる 574
ONEPOINT 移動させるには「position.x」「position.y」「position.z」プロパティを使う
247 立方体などの物体のスケールを変更する 577
ONEPOINT スケールを変更するには「scale.x」「scale.y」「scale.z」プロパティを使う
248 文字を3Dで描画する 580
ONEPOINT Three.jsで文字を描画するにはtypeface.jsを使う
COLUMN ベベルを指定するには
249 霧(フォグ)を設定する 583
ONEPOINT 霧(フォグ)を設定するには「fog」プロパティを使う
250 立体の影を表示する 586
ONEPOINT 立体の影を表示するには「shadowMapEnabled」プロパティなどを使う
251 WebGLが使えないデバイスでも3D描画を可能にする 589
ONEPOINT iPhoneやAndroidで3D描画を可能にするには「new THREE.CanvasRenderer()」とする
COLUMN IE9で表示されない場合について
252 SVGの図形のサイズを変更する 592
ONEPOINT SVGの図形のサイズを変更するには図形を示す要素の「width」属性と「height」属性の値を変更する
253 SVGの図形の位置を変更する 594
ONEPOINT SVGの図形の位置を変更するには図形を示す要素の「x」属性と「y」属性の値を変更する
254 SVGの図形を変形する 596
ONEPOINT SVGの図形を変形するには「transform」属性を使う
255 SVGの図形の塗りや線の色を変更する 599
ONEPOINT SVGの図形の塗りや線の色を変更するには図形を示す要素の「fill」属性や「stroke」属性の値を変更する
256 SVGのテキストの内容を変更する 601
ONEPOINT SVGのテキストの内容を変更するには「textContent」プロパティを使う
257 SVGの図形のグラデーションの種類を変更する 603
ONEPOINT SVGの図形のグラデーションの種類を変更するには図形を示す要素の「fill」属性の値を変更する


■CHAPTER 11 Audio/Video/HTML Media

258 オーディオオブジェクトを生成する 608
ONEPOINT オーディオオブジェクトを生成するには「new Audio()」を使う
COLUMN 音を生成する他の方法
COLUMN FirefoxやOperaでの音声の再生について
259 オーディオを再生・停止する 610
ONEPOINT オーディオを再生するには「play()」メソッド、停止するには「pause()」メソッドを使う
260 再生時間を取得・設定する 612
ONEPOINT 演奏開始時間と再生時間を取得・設定するには「currentTime」プロパティを使う
261 オーディオの長さを調べる 614
ONEPOINT オーディオの長さを取得するには「duration」プロパティを使う
262 指定されたオーディオ形式が再生可能かどうか調べる 616
ONEPOINT 再生可能なオーディオファイルの形式を調べるには「canPlayType()」メソッドを使う
263 オーディオファイルの読み込みに応じて変化する通信状態を調べる 618
ONEPOINT 通信状態を調べるには「networkState」プロパティを使う
COLUMN Windows Phoneの場合の「networkState」プロパティと「readyState」プロパティ
264 オーディオのボリュームを設定・ミュートにする 620
ONEPOINT ボリュームを設定するには「volume」プロパティ、ミュートするには「muted」プロパティを使う
265 オーディオのコントローラーの表示/非表示を設定する 623
ONEPOINT オーディオのコントローラーの表示制御を行うには「controls」プロパティを使う
266 オーディオデータを読み込む 625
ONEPOINT オーディオデータを読み込ませるには「src」プロパティを使う
267 オーディオの再生状態を調べる 627
ONEPOINT オーディオの状態を取得するには「currentTime」プロパティや「paused」プロパティなどを使う
268 オーディオの再生速度を変更する 629
ONEPOINT 再生速度を変更するには「playbackRate」プロパティを使う
269 オーディオの再生時のイベントを取得する 631
ONEPOINT オーディオが再生された際に処理を設定するには「timeupdate」イベントを使う
270 オーディオの再生が終了した際のイベントを取得する 633
ONEPOINT オーディオの再生が終了した際の処理を設定するには「ended」イベントを使う
271 オーディオのボリュームが変更された際のイベントを取得する 635
ONEPOINT ボリューム変更時の処理を行うには「volumechange」イベントを使う
272 「video」要素にアクセスする 637
ONEPOINT 映像にアクセスするには「video」要素を使う
COLUMN FirefoxやOperaでの映像の再生について
273 映像を再生・停止する 639
ONEPOINT 再生を行うには「play()」メソッド、停止を行うには「pause()」メソッドを使う
274 映像の再生時間を取得・設定する 641
ONEPOINT 再生開始時間の設定と再生時間の取得には「currentTime」プロパティを使う
COLUMN スマートフォンの場合の「currentTime」プロパティ
275 映像の長さを調べる 643
ONEPOINT 映像の長さを取得するには「duration」プロパティを使う
276 指定した形式の映像が再生可能かどうか調べる 645
ONEPOINT 映像ファイルの形式が再生可能か調べるには「canPlayType()」メソッドを使う
277 映像ファイルの読み込みに応じて変化する通信状態を調べる 647
ONEPOINT 通信状態を調べるには「networkState」プロパティを使う
278 映像のボリュームを設定・ミュートする 649
ONEPOINT ボリュームを調整するには「volume」プロパティ、ミュートを設定するには「muted」プロパティを使う
279 映像のコントローラーの表示/非表示を設定する 652
ONEPOINT コントローラーの処理を行うには「controls」プロパティを使う
280 映像データを読み込む 654
ONEPOINT 映像データを読み込ませるには「src」プロパティを使う
281 映像の再生状態を調べる 656
ONEPOINT 映像の状態を取得するには「currentTime」プロパティや「paused」プロパティなどを使う
282 映像の再生速度を変更する 659
ONEPOINT 再生速度を変更するには「playbackRate」プロパティを使う
283 映像の再生時のイベントを取得する 661
ONEPOINT 映像の再生時の処理を設定するには「timeupdate」イベントを使う
284 映像の再生が終了した際のイベントを取得する 663
ONEPOINT 映像の再生が終了したら処理するには「ended」イベントを使う
285 映像のボリュームが変更された際のイベントを取得する 665
ONEPOINT ボリューム変更時の処理を行うには「volumechange」イベントを使う
286 カメラからの映像を表示する 667
ONEPOINT カメラ映像を表示するにはWebRTC APIを使う
COLUMN Google Chromeでの設定
COLUMN Opera MobileでのWebRTC
287 カメラからの映像をCanvasに描画する 670
ONEPOINT カメラ映像をCanvasに描画するには「drawImage()」メソッドの最初のパラメータに「video」要素を指定する
COLUMN Google Chromeでの設定
288 カメラで撮影した画像を表示する 673
ONEPOINT カメラで撮影した画像を表示するにはHTML Media Captureを使う
COLUMN ビデオカメラとマイクからの取り込み
COLUMN 「capture」属性に指定できる値
289 カメラで撮影した画像をCanvasに描画する 676
ONEPOINT カメラで撮影した画像をCanvasに描画するには「Image」オブジェクトの「onload」プロパティにイベントハンドラを設定する

■CHAPTER 12 File API

290 ファイル名や種類を取得する 680
ONEPOINT ファイル情報を取得するには「name」プロパティや「size」プロパティ、「type」プロパティを使う
291 テキストファイルを読み込む 683
ONEPOINT テキストファイルを読み込むには「readAsText()」メソッドを使う
292 バイナリファイルを読み込む 685
ONEPOINT バイナリファイルを読み込むには「readAsBinaryString()」メソッドを使う
293 画像や映像ファイルを読み込む 687
ONEPOINT 画像ファイルや映像ファイルを読み込むには「readAsDataURL()」メソッドを使う
294 ファイルの読み込み状況を表示する 689
ONEPOINT ファイルの読み込み状況を表示するには「progress」イベントを使う
295 指定したディスク容量が使用可能か調べる 691
ONEPOINT 使用可能な割り当て容量を調べるには「window.storageInfo.requestQuota()」メソッドを使う
296 ディスクの使用状況を調べる 694
ONEPOINT ディスクの使用状況を調べるには「window.storageInfo.queryUsageAndQuota()」メソッドを使う
297 ファイルを作成する 696
ONEPOINT ファイルを作成するには「window.requestFileSystem()」メソッドと「fs.root.getFile()」メソッドを使う
298 ファイルにテキストを書き込む 699
ONEPOINT ファイルにテキストを書き込むには「createWriter()」メソッドと「BlobBuilder」オブジェクトを使う
COLUMN 「getBlob()」メソッドの動作の違い
299 保存されているファイルの内容を読み出す 702
ONEPOINT 保存されているファイルの内容を読み出すには「fs.root.getFile()」メソッドと「FileReader」オブジェクトを使う
300 保存されているファイルを削除する 705
ONEPOINT ファイルを削除するには「fs.root.getFile()」メソッドと「remove()」メソッドを使う
301 ディレクトリを作成する 707
ONEPOINT ディレクトリを作成するには「window.requestFileSystem()」メソッドと「fs.root.getDirectory()」メソッドを使う
302 サブディレクトリを作成する 710
ONEPOINT サブディレクトリを作成するには「getDirectory()」メソッドを使う
303 ディレクトリを削除する 713
ONEPOINT ディレクトリを削除するには「fs.root.getDirectory()」メソッドと「remove()」メソッドや「removeRecursively()」メソッドを使う
304 ディレクトリ一覧を取得する 716
ONEPOINT ディレクトリ一覧を取得するには「createReader()」メソッドを使う
305 ファイルをコピーする 719
ONEPOINT ファイルをコピーするには「copyTo()」メソッドと「getParent()」メソッドを使う
306 ディレクトリをコピーする 722
ONEPOINT ディレクトリをコピーするには「copyTo()」メソッドと「getParent()」メソッドや「getDirectory()」メソッドを使う
307 ファイルの移動とファイル名の変更を行う 725
ONEPOINT ファイルの移動やファイル名の変更には「moveTo()」メソッドを使う
308 URL形式でファイルにアクセスする 728
ONEPOINT ファイルやディレクトリはURL形式でアクセスすることができる

■CHAPTER 13 HTML5のその他のAPI

309 一度だけ位置情報を求める 732
ONEPOINT 位置情報を一度だけ取得するにはGeolocation APIの「getCurrentPosition()」メソッドを使う
310 定期的に位置情報を取得・停止する 735
ONEPOINT 定期的に位置情報を取得するには「watchPosition()」メソッド、停止するには「clearWatch()」メソッドを使う
COLUMN 機能が利用できるか調べるには
311 Web Storageにデータを設定する 738
ONEPOINT ストレージを利用するには「sessionStorage」や「localStorage」を使う
312 Web Storageからデータを読み出す 740
ONEPOINT ストレージから読み出すには「getItem()」メソッドを使う
313 Web Storage内のすべてのキーと値を取得する 742
ONEPOINT キーを取得するには「key()」メソッドを使う
COLUMN Web Storageに保存されている内容を調べる
314 Web Storageの特定のデータを削除する 744
ONEPOINT 特定のデータを消去するには「removeItem()」メソッドを使う
315 Web Storageのすべてのデータを削除する 746
ONEPOINT 全データを消去するには「clear()」メソッドを使う
316 ストレージ内容が変更された際のイベントを設定する 748
ONEPOINT データ保存時の処理を設定するには「storage」イベントを使う
317 ワーカーオブジェクトを生成する 750
ONEPOINT ワーカーオブジェクトを作成するには「new Worker()」を使う
318 ワーカーにデータを渡す 752
ONEPOINT ワーカーとやり取りするには「postMessage()」メソッドを使う
319 ワーカー側でJavaScriptファイルを読み込む 754
ONEPOINT ワーカー側でJavaScriptファイルを読み込むには「importScripts()」メソッドを使う
320 ワーカーを終了する 756
ONEPOINT ワーカーを終了するには「terminate()」メソッドや「close()」メソッドを使う
321 オフライン/オンライン状態を調べる 759
ONEPOINT オンラインかどうか調べるには「onLine」プロパティを使う
322 アプリケーションキャッシュを更新する 760
ONEPOINT アプリケーションキャッシュを更新するには「swapCache()」メソッドを使う
323 タッチ数を求める 764
ONEPOINT 同時タッチ処理を行うにはタッチ関係のイベントを使う
COLUMN 同時タッチ数の制限
324 タッチされた座標を求める 766
ONEPOINT タッチされた座標を調べるには「clientX」「clientY」「pageX」「pageY」「screenX」「screenY」を使う
325 加速度センサーの値を求める 768
ONEPOINT 加速度センサーを扱うには「devicemotion」イベントを使う
326 ジャイロセンサーの値を求める 770
ONEPOINT ジャイロセンサーを扱うには「deviceorientation」イベントを使う
327 ジェスチャーされたら拡大や回転処理を行う 772
ONEPOINT ジェスチャーによる回転と拡大・縮小を行うには「gesturechange」イベントなどを使う
328 デバイスが回転したら処理を行う 774
ONEPOINT デバイスの回転時に処理を行うには「orientationchange」イベントを使う
329 日付の入力を行うようにする 776
ONEPOINT 日付を選択するには「input」要素の「type」属性に「date」を指定する
330 日時の入力を行うようにする 778
ONEPOINT 日付と時間をまとめて選択するには「input」要素の「type」属性に「datetime」を指定する
331 メールやURL、電話番号を入力する専用フィールドにする 780
ONEPOINT メールアドレスやURLの入力専用フィールドにするには「input」要素の「type」属性に「email」や「url」を指定する
332 数値入力・スライダー入力の専用フィールドにする 782
ONEPOINT 数値入力専用にするには「input」要素の「type」属性で「number」を指定する
333 カラーピッカーを表示する 784
ONEPOINT カラーピッカーを表示するには「input」要素の「type」属性に「color」を指定する
334 データリストを定義する 786
ONEPOINT データリストを表示するには「datalist」要素を使う
335 音声入力を行う 788
ONEPOINT 音声入力を行うには「input」要素に「x-webkit-speech」属性を指定する
336 ブラウザのページ読み込みタイミングを取得する 790
ONEPOINT 読み込みタイミングを取得するには「performance.navigation」オブジェクトの各種プロパティを使う
COLUMN ミリ秒以下の計測
337 異なるオリジンのインラインフレームにメッセージを送信する 793
ONEPOINT インラインフレームにメッセージを送信するには「postMessage()」メソッドを使う
338 映像をフルスクリーン表示にする 796
ONEPOINT 映像をフルスクリーンにするには「video」要素の「requestFullscreen()」メソッドを使う
COLUMN Fullscreen APIのベンダープレフィックス
339 画像をフルスクリーン表示にする 799
ONEPOINT 画像をフルスクリーンにするには「img」要素の「requestFullscreen()」メソッドを使う
COLUMN Fullscreen APIのベンダープレフィックス
340 テキストをフルスクリーン表示にする 802
ONEPOINT テキストをフルスクリーンにするにはテキストを囲んでいる要素の「requestFullscreen()」メソッドを使う
COLUMN Fullscreen APIのベンダープレフィックス
341 インラインフレームをフルスクリーン表示にする 805
ONEPOINT インラインフレームをフルスクリーンにするには「iframe」要素の「requestFullscreen()」メソッドを使う
COLUMN Fullscreen APIのベンダープレフィックス
342 フルスクリーンと通常表示が切り替わったら処理を行う 808
ONEPOINT 画面切り替え時に処理を行うには「fullscreenchange」イベントを捕捉する
343 バイブレーション機能を使う 811
ONEPOINT バイブレーション機能を使うにはVibration APIを使う
344 バッテリーの充電レベルを取得する 813
ONEPOINT バッテリーの充電レベルを取得するには「battery」オブジェクトの「level」プロパティを使う
345 バッテリーの充電状態を取得する 815
ONEPOINT バッテリーの充電状態を取得するには「battery」オブジェクトの「charging」プロパティを使う
346 バッテリーの充電状態が変化したら処理を行う 817
ONEPOINT 充電状態が変化した場合に処理を行うには「chargingchange」イベントを使う
347 バッテリーレベルが変化した場合に処理する 819
ONEPOINT バッテリーレベルが変化した場合に処理するには「levelchange」イベントを使う
348 ゲームパッドが使用可能か調べる 821
ONEPOINT ゲームパッドを使用可能か調べるには「gamepads」オブジェクトを使う
COLUMN ゲームパッドを有効にするには
349 要素内の文字を編集可能にする 823
ONEPOINT 要素内の文字や画像を編集するには「contentEditable」プロパティを使う
350 WebSocketが使用可能か調べる 825
ONEPOINT WebSocketが利用できるかどうかは「WebSocket」オブジェクトの有無を調べる
351 WebSocketでサーバーに接続する 827
ONEPOINT サーバーに接続するには「new WebSocket()」とする
352 WebSocketを使ってサーバーとデータをやり取りする 829
ONEPOINT サーバーとやり取りするにはメッセージ送信を使う
COLUMN Node.jsとは
COLUMN サンプルの動作について
353 Indexed Databaseが使用可能か調べる 833
ONEPOINT Indexed Databaseが使用できるかどうかは「IndexedDB」オブジェクトの有無を調べる
354 Indexed Databaseでデータベースを開く 835
ONEPOINT Indexed Databaseでデータベースを開くには「open()」メソッドを使う
355 Indexed Databaseでオブジェクトストアを作成する 837
ONEPOINT Indexed Databaseでオブジェクトストアを作成するには「createObjectStore()」メソッドを使う
356 Indexed Databaseにデータを書き込む 841
ONEPOINT オブジェクトストアにデータを書き込むにはトランザクションを利用する
COLUMN Indexed Databaseの仕様変更とサンプルの動作について
357 Indexed Databaseからデータを読み出す 845
ONEPOINT オブジェクトストアのデータを読み出すにはトランザクションを利用する
COLUMN Indexed Databaseの仕様変更とサンプルの動作について
358 Web Audioが使用可能か調べる 848
ONEPOINT Web Audioが利用できるかどうかは「audioContext」オブジェクトの有無を調べる
359 Web Audioで音を鳴らす 850
ONEPOINT Web Audio APIで音を鳴らすにはオーディオコンテキストを生成する
360 Web Audioでファイルを読み込んで演奏する 852
ONEPOINT Web Audio APIでオーディオファイルを演奏するには非同期通信を使ってファイルを読み込ませておく
361 Web Audioでボリュームを指定する 855
ONEPOINT Web Audio APIでボリュームを指定するには「createGainNode()」メソッドを使ってゲインノードを生成する
362 Pointer Lock APIが使用可能か調べる 857
ONEPOINT マウスポインタがロック可能かどうか調べるには「requestPointerLock()」メソッドの有無を調べる
363 タブを切り換えた場合に処理を行う 859
ONEPOINT タブが切り替わったときに処理を行うには「visibilitychange」イベントを使う
364 要素をドラッグできるようにする 862
ONEPOINT 要素をドラッグできるようにするには「draggable」プロパティを使う
365 要素をドラッグ&ドロップできるようにする 864
ONEPOINT ドロップ側の処理は「dragover」「dragleave」「drop」イベントを使う
366 ドラッグ要素からドロップ要素にデータを渡す 866
ONEPOINT データを受け渡すには「setData()」メソッドを使う
367 通知可能かどうか調べる 869
ONEPOINT 通知が利用できるかどうかは「webkitNotifications」オブジェクトの有無で調べる
COLUMN Safari 6での動作について
COLUMN Google Chromeでの動作について
368 通知する 872
ONEPOINT 通知するには「createNotification()」メソッドを使う
369 通知を消す 874
ONEPOINT 通知を消すには「cancel()」メソッドを使う
370 通知に関するイベントを処理する 876
ONEPOINT 通知に関するイベントを処理するには「Notification」オブジェクトのイベントを利用する

■CHAPTER 14 スタイルシート

371 スタイルシートを生成する/読み込む 880
ONEPOINT スタイルシートを生成したり読み込んだりするには「document.createElement()」メソッドを使う
372 スタイルシートプロパティの値を設定する 882
ONEPOINT スタイルシートプロパティの値を設定するには要素の「style」オブジェクトの各プロパティに値を書き込む
373 スタイルシートの値を読み出す 884
ONEPOINT スタイルシートの値を読み出すには要素の「style」オブジェクトの各プロパティを参照する
374 文字の色を変更する 886
ONEPOINT 文字の色を変更するにはスタイルシートの「color」プロパティを使う
375 文字のサイズを変更する 888
ONEPOINT 文字のサイズを変更するには「fontSize」プロパティを使う
376 文字の書体を変更する 889
ONEPOINT 文字の書体を変更するにはスタイルシートの「fontFamily」プロパティを使う
COLUMN iOS 5でのフォント
377 文字の太さを変更する 891
ONEPOINT 文字の太さを変更するにはスタイルシートの「fontWeight」プロパティを使う
378 文字のスタイルを変更する 893
ONEPOINT 文字のスタイルを変更するにはスタイルシートの「fontStyle」プロパティを使う
379 文字の形状を変更する 895
ONEPOINT 文字の形状を変更するにはスタイルシートの「fontVariant」プロパティを使う
380 文字の間隔を変更する 897
ONEPOINT 文字の間隔を変更するにはスタイルシートの「letterSpacing」プロパティを使う
381 単語の間隔を変更する 899
ONEPOINT 単語の間隔を変更するにはスタイルシートの「wordSpacing」プロパティを使う
382 行間を変更する 901
ONEPOINT 行間を変更するにはスタイルシートの「lineHeight」プロパティを使う
383 行揃えを変更する 902
ONEPOINT 行揃えを変更するにはスタイルシートの「textAlign」プロパティを使う
384 文字を装飾する 904
ONEPOINT 文字を装飾するにはスタイルシートの「textDecoration」プロパティを使う
385 字下げ(インデント)を変更する 906
ONEPOINT 字下げ(インデント)を変更するにはスタイルシートの「textIndent」プロパティを使う
386 英文字の表示形式を指定する 907
ONEPOINT 英文字の表示形式を指定するにはスタイルシートの「textTransform」プロパティを使う
387 文字に影を表示する 909
ONEPOINT 文字に影を表示するにはスタイルシートの「textShadow」プロパティを使う
388 要素の背景色を変更する 910
ONEPOINT 要素の背景色を変更するにはスタイルシートの「color」プロパティを使う
389 要素の背景画像を変更する 912
ONEPOINT 要素の背景画像を変更するにはスタイルシートの「backgroundImage」プロパティを使う
390 要素の背景画像の位置を変更する 914
ONEPOINT 要素の背景画像の位置を変更するにはスタイルシートの「backgroundPosition」プロパティを使う
391 要素の背景画像の繰り返し方法を変更する 916
ONEPOINT 要素の背景画像の繰り返し方法を変更するにはスタイルシートの「backgroundRepeat」プロパティを使う
392 背景画像の固定方法を変更する 918
ONEPOINT 要素の背景画像の固定方法を変更するにはスタイルシートの「backgroundAttachment」プロパティを使う
393 要素の位置を変更する 920
ONEPOINT 要素の位置を変更するにはスタイルシートの「position」プロパティを使う
394 要素の余白を変更する 922
ONEPOINT 要素の余白を変更するにはスタイルシートの「margin」プロパティや「padding」プロパティを使う
395 要素の枠を変更する 924
ONEPOINT 要素の枠を変更するにはスタイルシートの「border」プロパティを使う
396 要素の表示形式を変更する 926
ONEPOINT 要素の表示形式を変更するにはスタイルシートの「display」プロパティを使う
397 要素の横幅・縦幅を変更する 928
ONEPOINT 要素の横幅を変更するにはスタイルシートの「width」プロパティ、縦幅を変更するにはスタイルシートの「height」プロパティを使う
COLUMN iPhone/Androidで表示領域のサイズを指定する
398 要素のはみ出した部分の表示方法を変更する 930
ONEPOINT 要素のはみ出した部分の表示方法を変更するにはスタイルシートの「overflow」プロパティを使う
399 要素からはみ出した文字の表示方法を変更する 932
ONEPOINT 要素のはみだした部分の文字の表示方法を変更するにはスタイルシートの「textOverflow」プロパティを使う
400 要素の表示方法を変更する 934
ONEPOINT 要素の表示方法を変更するにはスタイルシートの「visibility」プロパティを使う
401 要素のZ座標を変更する 936
ONEPOINT 要素のZ座標を変更するにはスタイルシートの「zIndex」プロパティを使う
402 要素の表示倍率を変更する 938
ONEPOINT 要素の表示倍率を変更するにはスタイルシートの「zoom」プロパティを使う
COLUMN スマートフォンでの表示倍率
403 要素の角丸を変更する 940
ONEPOINT 要素の角丸を変更するにはスタイルシートの「borderRadius」プロパティを使う
404 要素に影を表示する 942
ONEPOINT 要素に影を表示するにはスタイルシートの「boxShadow」プロパティを使う
405 不透明度を指定する 944
ONEPOINT 不透明度を指定するにはスタイルシートの「opacity」プロパティを使う
406 リサイズ処理を指定する 946
ONEPOINT 要素をリサイズするにはスタイルシートの「resize」プロパティを使う
407 アニメーション時間を変更する 948
ONEPOINT アニメーション時間を変更するにはスタイルシートの「animationDuration」プロパティを使う
408 3D変形を行う 950
ONEPOINT 3D変形を行うにはスタイルシートの「transform」プロパティを使う
409 トランジションを設定する 952
ONEPOINT トランジションを設定するにはスタイルシートの「transition」プロパティを使う
410 要素にグレーフィルタを適用する 954
ONEPOINT グレースケールにするにはスタイルシートの「filter」プロパティに「"grayscale(値)"」の文字列を指定する
COLUMN 「filter」プロパティのプロパティ名について
411 要素をセピア調にする 956
ONEPOINT セピア調にするにはスタイルシートの「filter」プロパティに「"sepia(値)"」の文字列を指定する
COLUMN 「filter」プロパティのプロパティ名について
412 要素にトーン(色相変換)フィルタを適用する 958
ONEPOINT トーン(色相)を変更するにはスタイルシートの「filter」プロパティに「"hue-rotate(値)"」の文字列を指定する
COLUMN 「filter」プロパティのプロパティ名について
413 要素に色反転フィルタを適用する 960
ONEPOINT 色は反転させるにはスタイルシートの「filter」プロパティに「"invert(値)"」の文字列を指定する
COLUMN 「filter」プロパティのプロパティ名について
414 要素の輝度(明るさ)を変更する 962
ONEPOINT 明るさを調整するにはスタイルシートの「filter」プロパティに「"brightness(値)"」の文字列を指定する
COLUMN 「filter」プロパティのプロパティ名について
415 要素のコントラストを変更する 965
ONEPOINT コントラストを調整するにはスタイルシートの「filter」プロパティに「"contrast(値)"」の文字列を指定する
COLUMN 「filter」プロパティのプロパティ名について
416 要素の彩度を変更する 968
ONEPOINT 彩度を調整するにはスタイルシートの「filter」プロパティに「"saturate(値)"」の文字列を指定する
COLUMN 「filter」プロパティのプロパティ名について
COLUMN その他のCSSフィルタ
417 要素にぼかしフィルタを適用する 971
ONEPOINT ぼかすにはスタイルシートの「filter」プロパティに「"blur(値)"」の文字列を指定する
COLUMN 「filter」プロパティのプロパティ名について
418 CSSのメディアクエリを調べる 973
ONEPOINT メディアクエリが変化したら処理するには「window.matchMedia()」メソッドと「addListener()」メソッドを使う