SYNCERのロゴ
アイキャッチ画像

JavaScriptのサンプルコード集

JavaScriptの作成に役立つ、サンプルコード集です。

一覧

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