JavaScriptのサンプルコード集
JavaScriptの作成に役立つ、サンプルコード集です。
一覧
- 2点の座標の中点を求める方法
- 2点の座標の中点を求める公式を、JavaScriptで表現します。
- 2点の座標の角度を求める方法
- 2点の座標の角度を求める公式を、JavaScriptで表現します。
- 2点の座標の距離を求める方法
- 2点の座標の距離を求める公式を、JavaScriptで表現します。
- Blob(File)からData URIを作成する方法
- Blob(File)をData URIの文字列に変換します。
- CMYKをCMYに変換する方法
- カラーコードをCMYKからCMYに変換します。
- CMYをCMYKに変換する方法
- カラーコードをCMYからCMYKに変換します。
- CMYをRGBに変換する方法
- カラーコードをCMYからRGBに変換します。
- 要素に適用されているCSSの値を取得する方法
- 要素に適用されているスタイルシートの値を取得します。
- Data URIからBlob(File)を作成する方法
- Data URIの文字列からBlob(File)を作成します。
- Firefoxでドラッグ操作中にプレビューが表示されない場合の対処法
- Firefoxで、ドラッグ操作中にゴーストプレビューが表示されない時は、ダミーの転送データを作ってあげましょう。
- HEXをRGBに変換する方法
- カラーコードをHEXからRGBに変換します。
- HSLをRGBに変換する方法
- カラーコードをHSLからRGBに変換します。
- HSVをRGBに変換する方法
- カラーコードをHSVからRGBに変換します。
- RGBをCMYに変換する方法
- カラーコードをRGBからCMYに変換します。
- RGBをHEXに変換する方法
- カラーコードをRGBからHEXに変換します。
- RGBをHSLに変換する方法
- カラーコードをRGBからHSLに変換します。
- RGBをHSVに変換する方法
- カラーコードをRGBからHSVに変換します。
- UNIXタイムスタンプを取得する方法
- JavaScriptでPHPのtime()、strtotime()と同じようにUNIX TIMESTAMPを取得します。
- class属性値を取得、変更する方法
- 要素のclass属性値を取得、変更、確認する方法をまとめています。
- オブジェクトが空か確認する方法
- オブジェクトの中身が空か否かを確認する方法を説明します。for...in文を利用するのがお手軽です。
- クリックした位置を取得する方法
- マウスでクリックした位置を取得するには、eventオブジェクトのpageX、pageYを参照します。
- スクロールをする方法
- 絶対的、相対的に位置を指定して、スクロールします。
- スクロールイベントの頻度を減らす方法
- スクロールイベントの頻度を減らすには、setTimeout()で発火するタイミングを調節します。
- スクロール中か否かを判定する方法
- ユーザーがスクロール中か否かを判定するには、scrollイベントとsetTimeout()を利用します。
- スクロール中だけスタイルを適用する方法
- スクロール中だけスタイルを適用するには、classListとsetTimeout()を利用します。
- スクロール終了時に処理を実行する方法
- スクロールを停止したタイミングで処理を実行するには、setTimeout()を利用します。
- スクロール量を取得する方法
- スクロール量を取得するには、window.pageYOffsetを参照しましょう。
- タッチした位置を取得する方法
- スマホなどでタッチした位置座標を取得します。
- ダブルクリックのイベントを設定する方法
- マウスデバイスでダブルクリックを検出します。
- ダブルタップのイベントを設定する方法
- タッチデバイスでダブルタップを検出します。
- ドラッグオーバー中だけスタイルを適用する方法
- ドロップできる要素にドラッグオーバー中だけスタイルを適用するには、dragoverイベントと、setTimeout()を組み合わせましょう。
- ピンチイン・ピンチアウトでズームする方法
- タッチデバイスのピンチイン、ピンチアウトで画像を縮小、拡大します。
- ページのURLを取得する方法
- ページのURLを取得するには、locationオブジェクトの各プロパティを参照します。
- ページを離れる時に警告する方法
- ページを離れる時に警告を表示するには、{{beforeunloadイベント}}を設定します。
- マウスデバイスとタッチデバイスを判別する方法
- ユーザーがマウスデバイスなのか、タッチデバイスなのかを判定します。
- ユーザーエージェントを取得する方法
- ユーザーエージェントを取得するには、navigator.userAgentを参照しましょう。
- ラジアンを度に変換する方法
- 単位をラジアンから度に変換するには、値に180/Math.PIをかけましょう。
- ラジオボタンの値をセットする方法
- ラジオボタンを選択状態にするには、要素のcheckedプロパティにtrueを代入します。
- ラジオボタンの値を取得する方法
- どのラジオボタンが選択状態かを取得するには、要素のcheckedプロパティを確認します。
- ランダムの数(乱数)を作る方法
- ランダムで数を作成します。
- リサイズイベントの頻度を減らす方法
- リサイズイベントの頻度を減らすには、setTimeout()で発火するタイミングを調節します。
- リサイズ中か否かを判定する方法
- ユーザーがリサイズ中か否かを判定するには、resizeイベントとsetTimeout()を利用します。
- リサイズ中だけスタイルを適用する方法
- リサイズ中だけスタイルを適用するには、classListとsetTimeout()を利用します。
- リサイズ終了時に処理を実行する方法
- リサイズを停止したタイミングで処理を実行するには、setTimeout()を利用します。
- リロードする方法
- ページを再読み込みするには、location.reload()を実行します。
- ローカル動画を表示する方法
- ユーザーの端末に保存されているローカル動画を表示します。
- ローカル画像を表示する方法
- ユーザーの端末に保存されているローカル画像を表示します。
- 何番目の要素か確認する方法
- 要素が何番目にあるのかを確認するには、配列系メソッドのindexOf()を利用しましょう。
- 先頭、末尾の文字を削除する方法
- 先頭、末尾の文字を削除します。
- 先頭、末尾の文字を取得する方法
- 先頭、末尾の文字を取得します。
- 入力フォームに値をセットする方法
- 入力フォームの値をセットするには、valueに目的の値を代入します。
- 入力フォームの値を取得する方法
- 入力フォームの値を取得するには、プロパティのvalueを参照しましょう。
- 円周上の座標を求める方法
- 円周上の座標を求める公式を、JavaScriptで表現します。
- 別ページに移動させる方法
- リンクをクリックしなくても、ユーザーを指定したページに移動させます。
- 動画のサイズを取得する方法
- 動画の本来のサイズを取得するには、video要素のvideoWidthとvideoHeightを参照します。
- 小数を四捨五入、切り捨て、切り上げする方法
- 小数の切り捨て、切り上げ、四捨五入をします。また、小数点第n位までの数値を出します。
- 回転ジェスチャーを検出する方法
- タッチデバイスの回転ジェスチャーで画像を回転させます。
- 大文字、小文字に変換する方法
- 文字列を大文字、または小文字に統一したい場合はtoUpperCase()、toLowerCase()を利用しましょう。
- 度をラジアンに変換する方法
- 単位を度からラジアンに変換するには、値にMath.PI / 180をかけましょう。
- 指定文字を置換、削除する方法
- 文字列の中の指定した部分を置換したり削除します。
- 数字の先頭を0埋めする方法
- 数字の桁が足りない場合などに先頭を0埋め(zero fill)します。
- 数字をコンマ区切りにする方法
- PHPのnumber_format()のように数字をコンマ区切りにするには、置換関数を利用します。
- 文字の登場回数を取得する方法
- あるテキストに含まれる文字の数を調べるには、match()を応用します。
- 日時、曜日を取得する方法
- 日時と曜日を取得します。
- 月の末日(最終日)を取得する方法
- 末日(月の最終日)を取得するには、Date()の引数に翌月の0日を指定します。
- 横幅のリサイズだけ検出する方法
- スマホではURLアドレス欄の表示、非表示によってもリサイズイベントが発生してしまいます。横幅のリサイズだけを検出するには、前回のサイズを記録しておきましょう。
- 画像のサイズを取得する方法
- 画像の本来のサイズを取得するには、img要素のnaturalWidthとnaturalHeightを参照します。
- 確認ダイアログを表示する方法
- 確認ダイアログを表示して、ユーザーが選択した「はい」、または「いいえ」で処理を振り分けます。
- 背景色から適した文字色が白か黒かを判定する方法
- 背景色から文字色は白と黒、どちらがいいかを判定します。
- 要素の位置座標を取得する方法
- 指定した要素の位置座標を取得します。
- 距離と角度から座標を求める方法
- 距離と角度から座標を求める公式を、JavaScriptで表現します。
- 選択フォームの値をセットする方法
- 選択フォームの項目を選択状態にするには、要素のselectedプロパティにtrueを指定します。
- 選択フォームの値を取得する方法
- 選択フォームのどの項目が選択状態かを取得するには、要素のselectedプロパティを確認します。
- 配列から要素を削除する方法
- 配列から先頭、末尾、または指定位置の要素を削除します。
- 配列に要素を追加する方法
- 配列の先頭、末尾、または指定位置に要素を追加します。
- 配列の重複する要素を削除する方法
- PHPのarray_unique()のように配列の重複した要素を削除します。
- 集合を配列に変換する方法
- NodeListやHTMLCollectionなど、配列のメソッドを使えない集合系のオブジェクトを配列に変換するにはArray.from()や[].slice.call()を利用します。
- 静的なクリックを検出する方法
- 静的なクリック(static click)を検出するには、onmousedown、onmousemove、onmouseupのイベントを組み合わせましょう。