新JavaScript例文辞典

このページはJavaScriptの例文／サンプルを掲載しています。なお、対象としているのは基本的にWeb標準ブラウザ (Firefox, Safari, Google Chrome, Operaなど) としているため標準仕様から外れているInternet Explorer 6〜8では動作しないものがあります。Internet Explorer 8より前のバージョンに関しては以前のJavaScript例文辞典を参照してください。このサイトではInternet Explorer 8以降には、ある程度対応しています。IE9からはCanvasなどHTML5関連APIにも対応しています。
iPhone/iPadおよびAndroid 4もHTML5に対応しています。ただし、Android 2.xに搭載されている標準ブラウザでは対応していないAPIが多いため、ほとんど動作しません。
カテゴリ内のページのURLは変わることがあります。なるべく、このページから入るようにしてください。
また、JavaScript/Ajaxライブラリを必要とするものは別途分離し「新JavaScriptライブラリ例文辞典」としました。
ECMAScript 6thでの機能に関しては項目の先頭に[ES6]の文字を追加してあります。これは、ECMAScript 6thに対応した最新のブラウザ(Firefox ver 25以降など)でないと動作しません。

ミスや間違い、リンクエラーなどがありましたら[email protected]までお願いします。

Last update : 2015/10/14
2008-2015 古籏一浩(KaZuhiro FuRuhata)

【※】ライブラリ関連は「新JavaScriptライブラリ例文辞典」のページへどうぞ。

【更新履歴】
2015/10/1 ECMAScript 6thにテンプレートのサンプルを追加しました。
2015/10/14 イベントのカテゴリにiPhone 6s以降で利用できるForce touch (3D touch)のサンプルを追加しました。

■クイックリンク

基本	計算	高度、複雑な計算	変数／定数	配列
文字列	日付	関数	タイマー	イテレータ
ES6

ブラウザ／OS判別	スクリーン	フルスクリーン	ダイアログ	ウィンドウ	サブウィンドウ
ドキュメント	ハイパーリンク	画像／イメージ	アニメーション	テキストフィールド	チェックボックス
ラジオボタン	ファイルアップロード	送信ボタン	イベント	DOM	スタイルシート
DOM Storage	XML	非同期通信	JSON	印刷	Canvas/キャンバス(2D/3D)
位置情報	File API	HTML 5 Audio	加速度センサー	HTML 5 Video	Web Workers
Page Visibility API	Navigation Timing	Battery Status API

Firebug	Webインスペクタ	ソート／並べ替え	教育	面積／体積
単位変換	いろいろな変換	その他

■基本

• スクリプトファイルを読み込む
• HTML文書内にスクリプトを記述する
• HTMLタグ内にスクリプトを記述する
• スクリプトのバージョンを指定する
• Content-Typeを表示する
• 名前空間のURIを表示する
• オブジェクトを生成する
• プロパティを生成する
• メソッドを生成する
• プロトタイプを生成する
• Getterを指定する
• Setterを指定する
• ブーリアンオブジェクトを作成する
• 数値オブジェクトを作成する
• 文字列オブジェクトを作成する

■計算／変換

• 加算（足し算）する
• 減算（引き算）する
• 乗算（掛け算）する
• 除算（割り算）する
• 剰余（割り算の余り）を求める
• 数値を3桁ごとカンマ(,)で区切る (その1)
• 数値を3桁ごとカンマ(,)で区切る (その2)
• 数値の符号を返す
• 小数点以下2桁までにする
• 小数点以下2桁までにする (toFixed)
• 小数点以下2桁までにする (toPrecision)
• 全角数値から半角数値へ変換する
• 半角数値から全角数値へ変換する
• 漢数字(一、二、三・・・)へ変換する
• 漢数字(壱、弐、参・・・)へ変換する
• 日本の単位（兆、億、万）に変換する
• 数値の符号を反転させる
• 偶数にする
• 奇数にする
• 奇数と偶数を反転させる
• 0と1を切り替える（トグルスイッチ）
• trueとfalseを切り替える（トグルスイッチ）
• 一定の範囲内に値を収める
• ラジアン←→度
• BMIを求める (肥満度計算)
• 標準体重を求める (BMIによる肥満度計算より)

■高度、複雑な計算

• 絶対値を求める
• 小数点以下を切り捨てる（切り下げ）：整数化
• 小数点以下を切り上げる：整数化
• 小数点以下を四捨五入する：整数化
• 小数点以下を取り出す
• 最も大きい値を求める
• 最も小さい値を求める
• 円周率 (π) を求める
• 乱数を求める
• 整数の範囲の乱数を求める
• サイン (正弦) を求める
• コサイン（余弦）を求める
• タンジェント（正接）を求める
• メルセンヌ数を表示する

■変数／定数

• 変数を宣言する
• 変数に値を代入する
• 複数の変数に同じ値を代入する
• 変数の一括代入を行う
• 定数を宣言する
• 局所変数を使う (let)
• 変数を削除する
• 変数の型を調べる
• 数値型を文字列型に変換する(空の文字列と連結)
• 数値型を文字列型に変換する(new String)
• 文字列型を数値型(整数型)に変換する(parseInt)
• 文字列型を数値型(浮動小数値)に変換する(parseFloat)
• [ES6] 2つの変数の値を入れ替える（分割代入）

■配列

• 配列を作成する
• 配列の長さ（要素の総数）を求める
• 配列の長さ（要素の総数）を変更する
• 配列同士を連結する
• 高階関数を使って配列要素に値を加算する (map)
• 配列内の要素を検索する (indexOf)
• 配列内の要素を最後から検索する (lastIndexOf)
• 配列内の要素を全てチェックする (every)
• 配列内の要素を全てチェックする (some)
• 配列内の全要素に対して指定した関数を使って処理する (forEach)
• 配列内の全要素に対してフィルタ処理する (filter)
• WeakMapオブジェクトを生成する

■文字列

• 半角カナから全角カナへ変換する
• 全角カナから半角カナへ変換する
• サウンドノベルのように1文字ずつ表示する

■日付

• 西暦から和暦に変換する
• 和暦から西暦に変換する
• 西暦から皇紀に変換する
• 年度を求める
• 閏年かどうかを調べる
• 指定年月日からn日後、n日前の年月日を求める
• 今日からn日後の年月日を求める
• 十干を求める
• 十二支を求める
• 干支を求める
• 恵方を求める
• 九星を求める
• 太陰暦の月の異名を求める
• 月齢を求める
• 1970年1月1日午前0時から現時点までのミリ秒を求める
• 年数で違うページに移動させる

■関数

• 関数を定義する (function)
• 関数を定義する (2) (function)
• 関数を定義する(3) (new Function)
• 匿名／無名関数を定義する (function)
• yieldを使って1ステップずつ実行する
• クロージャーを定義する
• 式クロージャーを定義する
• 関数からの戻り値を指定する (return)
• [ES6] その他のパラメーターを取得する (Rest Parameter)

■タイマー

• 指定時間後に処理を行う
• 指定時間ごとに処理を行う
• リアルタイムに時間を表示する

■イテレータ (このカテゴリはIEでは動作しません)

• イテレータを使う
• イテレータでプロパティ名だけを返す

■ES6 (ECMA Script 6th)

• アロー記法で関数を定義する (=>)
• 関数のデフォルトパラメーターを指定する
• 関数のレストパラメーターを指定する
• キー名と値の変数名が同じ場合に省略して記述する
• プロパティ名（キー名）を式で記述する (コンピューテッドプロパティ)
• ブロック内でのみ有効な変数を定義する (let)
• 定数を宣言する (const)
• テンプレートを利用する (ES6 Template)
• テンプレートを利用して計算結果を出力する (ES6 Template)
• テンプレート内で関数を呼び出す (ES6 Template)

■ブラウザ／OS判別、チェック

• Operaかどうか調べる
• Geckoエンジン使用ブラウザかどうか調べる
• Firefoxかどうか調べる
• Safariかどうか調べる
• Safariかどうか調べる (window.getMatchedCSSRules)
• Internte Explorer (IE) かどうか調べる
• Internte Explorer (IE) かどうか調べる (条件付きコンパイル機能)
• iPhoneかどうか調べる
• MacOSかどうか調べる
• Windowsかどうか調べる

■スクリーン／モニタ画面

• モニタ画面の色深度を求める
• モニタ画面のサイズを求める
• モニタ画面の解像度を求める
• Retina Displayか調べる

■フルスクリーン／全画面

• Fullscreen APIが使えるかどうか調べる
• フルスクリーン（全画面）にする

■ダイアログ

• アラートダイアログを表示する
• 確認ダイアログを表示する
• 入力ダイアログを表示する

■ウィンドウ

• ページが読み込まれたら指定サイズにウィンドウサイズを変更する
• ページが読み込まれたらウィンドウサイズを相対的に変更する
• ウィンドウの横幅を取得する
• ウィンドウの縦幅を取得する

■サブウィンドウ

• ページが読み込まれたらサブウィンドウを開く
• ページが読み込まれたら横幅を指定してサブウィンドウを開く
• ページが読み込まれたら縦幅を指定してサブウィンドウを開く
• ページが読み込まれたら横幅と縦幅を指定してサブウィンドウを開く

■ドキュメント／文書

• ドキュメントのタイトルを求める
• ドキュメントのタイトルを書き換える

■リンク／ハイパーリンク

• http:から始まるリンクを別ウィンドウで開く

■画像／イメージ

• 画像の横幅、縦幅を変更する (width, height属性に設定)
• 画像の横幅、縦幅を変更する (スタイルシートで設定)
• 画像の元の横幅、縦幅を取得する (naturalWidth, naturalHeight)
• 画像の上にマウスを乗せると画像が切り替わる (1枚だけ)
• 画像の上にマウスを乗せる、マウスボタンが押されると画像が切り替わる (1枚だけ)
• 画像を交互に入れ替える (URLを調べて入れ替える)
• 画像を交互に入れ替える (title属性を利用して入れ替える)
• 画像を交互に入れ替える (プログラム内のカウンタを利用して入れ替える)

■アニメーション

• 曲の長さにあわせてページ内容をスクロールさせる

■テキストフィールド

• 送信時にテキストフィールドの空欄チェックを行う
• テキストフィールドの内容を読み出す
• テキストフィールドの内容を設定する
• テキストフィールドにあらかじめ薄い文字を表示する（プレースホルダー）

■チェックボックス

• チェックボックスの状態を読み出す
• チェックボックスの状態を設定する

■ラジオボタン

• ラジオボタンの状態を読み出す
• ラジオボタンの状態を設定する

■ファイルアップロード

• アップロードするファイルの数を調べる
• アップロードするファイル名を調べる
• アップロードするファイルのサイズを調べる

■送信ボタン

• 送信ボタンを一度押したら二度と押せないようにする（送信ボタンを無効化する）

■イベント

• ページ内容が完全に読み込まれた場合に処理する (window.onloadイベント)
• DOMが構築され準備できた場合に処理する (DOMContentLoadedイベント)
• クリックされた場合に処理する (onclickイベント)
• ダブルクリックされた場合に処理する (ondblclickイベント)
• マウスの左ボタンが押された場合に処理する (onmousedownイベント)
• マウスの左ボタンが離された場合に処理する (onmouseupイベント)
• マウスの右ボタンが押された場合に処理する (oncontextmenuイベント)
• カットされる前に処理する (oncutイベント)
• コピーされる前に処理する (oncopyイベント)
• ペースト（貼り付け）される前に処理する (onpasteイベント)
• イベントを追加する (addEventListener)
• イベントを削除する (removeEventListener)
• イベントの伝達を停止する (stopPropagation)
• タッチが開始された場合に処理する (ontouchstartイベント) (iPhone専用イベント)
• タッチ中の場合に処理する (ontouchmoveイベント) (iPhone専用イベント)
• タップ（タッチ終了）された場合に処理する (ontouchendイベント) (iPhone専用イベント)
• タッチムーブイベント時の処理を禁止する (iPhone専用イベント)
• 同時にタッチした数を調べる (iPhone専用イベント)
• タッチした座標を調べる (iPhone専用イベント)
• タッチの強さを取得する(iPhone 6s以降／Force touch/3D touch)
• タッチの強さを利用して簡単なお絵かき機能を実現する(iPhone 6s以降／Force touch/3D touch)
• ジェスチャーが開始された場合に処理する (ontouchstartイベント) (iPhone専用イベント)
• ジェスチャー中の場合に処理する (ongesturechangeイベント) (iPhone専用イベント)
• ジェスチャーが終了した場合に処理する (ontouchendイベント) (iPhone専用イベント)
• ジェスチャー時のスケール値を取得する（event.scale） (iPhone専用イベント)
• ジェスチャー時の回転角度を取得する（event.rotation） (iPhone専用イベント)
• ページが表示／非表示になった場合に処理する (pageshow/pagehideイベント)

■DOM (Document Object Model)

• 特定のIDを持つエレメントにアクセスする (getElementById)
• 特定の名前を持つエレメントにアクセスする (getElementsByName)
• 特定のタグ名のエレメントにアクセスする (getElementsByTagName)
• エレメントを作成する (createElement)
• エレメントの属性を設定する (setAttribute)
• テキストノードを作成する (createTextNode)
• 空のテキストノードを作成する (createTextNode)
• コメントノードを作成する (createComment)
• ドキュメントの断片（フラグメント）を作成する (createDocumentFragment)
• ノードに追加する (appendChild)
• ノード間を移動する／ノードを付け替える (appendChild)
• ノードを挿入する (insertBefore)
• 子ノードを削除する (removeChild)
• 子ノードを全て削除する (removeChild)
• 自分自身のノードを削除する (parent.removeChild)
• ノードを複製（コピー）する (cloneNode)
• 子ノードがあるかどうか調べる (hasChildNodes)
• 最初の子ノードにアクセスする (firstChild)
• 最後の子ノードにアクセスする (lastChild)
• 任意の位置の子ノードにアクセスする (childNodes)
• 属性（アトリビュート）を読み出す (getAttribute)
• 属性（アトリビュート）を設定する (setAttribute)
• エレメントの絶対座標値を取得する (getBoundingClientRect)
• 指定した位置にあるエレメントを取得する (document.elementFromPoint)

■CSS (スタイルシート)

• エレメントのスタイルシートにアクセスする
• 指定したスタイルシートを持つエレメントを取得する (getElementsByClassName)
• 指定したエレメントの上の枠幅を取得する (clientTop)
• 指定したエレメントの左の枠幅を取得する (clientLeft)
• 文字の色を指定する（color）
• 背景色を指定する（backgroundColor）
• 枠の色を指定する（borderColor）
• 背景画像を指定する（backgroundImage）
• 背景画像をページが読み込まれるたびにランダムに変更する
• 背景画像を1秒ごと変更する
• 訪問済みのリンクを取得する (querySelectorAll)
• マウス上(:hover)のエレメントのIDを取得する
• 出現順が奇数のタグのみを選択する
• 出現順が偶数のタグのみを選択する
• 出現順が3の倍数のタグのみを選択する
• ページ内容全体を移動させる (Safariのみ)
• ページ内容を上下に揺らす (Safariのみ)
• ページ内容を左右に揺らす (Safariのみ)
• 3D空間にする (WebKitのみ)
• パースペクティブを指定する (WebKitのみ)
• ページ内容の表示倍率を変える (Safariのみ)
• ページ内容全体のスケールを変化させる (Safariのみ)
• ページ内容を180度回転させる (Safariのみ)
• ページ内容をぐるぐる回転させる (Safariのみ)
• ページ内の画像全てをぐるぐる回転させる (Safariのみ)
• ページ内容をY軸回転させる (WebKitのみ)
• ページ内容をX軸回転させる (WebKitのみ)

■DOM Storage (Firefox2, IE8, Safari 4以降で対応)

• DOM Storage (旧) が使えるかどうか調べる
• DOM Storage (新) が使えるかどうか調べる

■XML (このカテゴリはIEでは動作しません)

• テキストをXMLオブジェクトに変換する
• XMLオブジェクトからテキストに変換する

■非同期通信 (このカテゴリはIEでは動作しません)

• 非同期通信を行う
• 同期通信を行う
• 非同期通信でテキストファイルを読み込む
• 非同期通信でXMLファイルを読み込む
• 非同期通信でJSONファイルを読み込む

■JSON

• JSONデータを解析して読み込む
• 厳密なJSONデータに変換する

■印刷

• 印刷する

■Canvas/キャンバス(2D)

• キャンバスに塗りつぶされた四角形を表示する
• キャンバスに文字を表示する
• キャンバスに表示する文字の色を指定する
• キャンバスに表示する文字のサイズを指定する
• キャンバスに表示する文字の横幅を取得する
• キャンバスにアウトライン文字を表示する
• キャンバス上のピクセル値を取得する
• キャンバス上にピクセルを描画する

■Canvas/キャンバス(3D/WebGL)

• 3Dコンテキストを取得する
• ビューポートのサイズを指定する
• 背景を任意色で消去する

■位置情報(Geo Location API)

• 現在の緯度、経度を取得する
• 現在の方角を取得する
• 位置情報を取得した時間を取得する
• エラー発生時の処理を指定する
• より高精度な位置を求める
• 定期的に位置情報を取得する

■HTML 5 File API (Firefox 3.6以降, Safari 4以降で一応動作)

• 選択されたファイルの総数を求める
• 選択されたファイルの名前を取得する
• 選択されたファイルの容量(サイズ)を取得する
• 選択されたファイルの種類(MIME Type)を取得する
• 選択されたテキストファイルの内容を表示する
• 選択されたバイナリファイルの先頭の1文字の値を表示する

■HTML 5 Audio (Firefox 3.6以降, Safari 4以降, Chormeで動作)

• 音楽を再生する
• 音楽をスクリプトで再生する
• 音楽を最初から再生する
• 音楽を一時停止（ポーズ）する

■加速度センサー (Firefox 3.6/iOS4.2以降で動作)

• 加速度センサーの値を取得する
• iPhone/iPadで加速度センサーの値を取得する
• iPhone/iPadで加速度センサー（重力加速度）の値を取得する

■HTML 5 Video [映像] (Firefox 3.6以降, Chrome, Safari 4以降で動作)

• 映像を再生する
• 映像をボタンクリックで再生する
• 映像をボタンクリックで一時停止する
• 映像の長さ（尺）を取得する
• 繰り返し再生を行うかどうかを設定する
• 映像が再生されている時間を取得する
• 映像の再生が終了したかどうか調べる
• 指定した秒数から映像を再生する
• 映像の再生が一時停止しているかどうか調べる

■Web Workers/ウェブワーカー (IE以外のブラウザで動作)

• Web Workersが使えるかどうか調べる
• Workerオブジェクトを生成する
• Workerとデータのやりとりを行う

■Page Visibility API

• ページが背面・前面になった時に処理を行う

■Navigation Timing

• ページデータ読み込み時の様々な処理時間を取得する

■Battery Status API

• バッテリーの充電レベルを調べる
• バッテリーが充電されているか調べる
• バッテリーの充電状況が変化したら処理を行う
• バッテリーレベルが変化したらアラートダイアログを表示する

■Firebug (このカテゴリはFirefox+Firebugの組み合わせでのみ動作)

• コンソールに文字列を出力する
• コンソールに整数値を出力する
• コンソールに小数値を出力する
• コンソールにオブジェクトへのリンク（内容）を出力する
• コンソールに情報として文字列を出力する
• コンソールに注意情報として文字列を出力する
• コンソールにエラーとして文字列を出力する
• コンソールにオブジェクトのプロパティと値を出力する
• コンソールにノードツリーを出力する
• コンソールに計測時間を出力する
• プロファイルを使って処理時間を計測する
• デバッガ(Firebug)をスクリプトから起動する

■Webインスペクタ (このカテゴリはSafari 3以降でのみ動作)

• Webインスペクタに文字列を出力する
• Webインスペクタに情報として文字列を出力する
• Webインスペクタに注意情報として文字列を出力する
• Webインスペクタにエラーとして文字列を出力する

■ソート／並べ替え／シャッフル

• 配列内のデータをソートする（選択法）
• 配列内のデータをソートする（バブルソート／交換法）
• 配列内のデータをソートする（双方向バブルソート／Bi Directionalバブルソート）
• 配列内のデータをソートする（基本挿入法）
• 配列内のデータをソートする（シェルソート）
• 配列内のデータをソートする（バケットソート）
• 配列内のデータをソートする（コムソート）
• 配列内のデータをソートする（マージソート）
• 配列内のデータをソートする（クイックソート）
• 配列内のデータをソートする（分布数え／計数ソート）
• 配列内のデータをソートする（ビンソート）
• 配列内のデータをソートする（ヒープソート）
• 配列内のデータをソートする（基数／ラディックスソート）
• 配列内のデータをシャッフルする

■教育

• 百ます計算（加算）
• 百ます計算（乗算）
• 百ます計算（減算）
• 九九の表を表示する
• 素数の表を表示する

■面積／体積

• 方形／平行四辺形の面積
• 台形の面積
• 三角形の面積
• 正三角形の面積
• 正六角形の面積
• 正円の面積
• 楕円の面積
• 直方体の体積
• 四角錐の体積
• 円柱の体積
• 円錐の体積
• 球の体積

■単位変換

• センチ(cm)からインチ(in)へ変換する
• センチ(cm)からメートル(m)へ変換する
• センチ(cm)からミリメートル(mm)へ変換する
• インチ(in)からセンチ(cm)へ変換する
• インチ(in)からメートル(m)へ変換する
• インチ(in)からミリメートル(mm)へ変換する
• キロメートル(km)からメートル(m)へ変換する
• キロメートル(km)からマイル(mi)へ変換する
• メートル(m)からセンチメートル(cm)へ変換する
• メートル(m)からキロメートル(km)へ変換する
• メートル(m)からフィート(ft)へ変換する
• メートル(m)からヤード(yd)へ変換する
• フィート(ft)からインチ(in)へ変換する
• フィート(ft)からヤード(yd)へ変換する
• フィート(ft)からメートル(m)へ変換する
• ヤード(yd)からフィート(ft)へ変換する
• ヤード(yd)からマイル(mi)へ変換する
• ヤード(yd)からメートル(m)へ変換する
• ヤード(yd)からロッド(rod)へ変換する

■いろいろな変換

• RGBカラーからグレースケールに変換する
• グレースケールからRGBカラーに変換する

■その他

• ユーザーのIPアドレスを変数に代入する
• [要jQuery] ユーザーのIPアドレスから場所情報(Geo Info.)を取得し表示する