JavaScript

マウス座標を取得 マウス座標は各イベント情報内から取得可能です。 例えば、ページの表示エリアを基準としたマウスの座標を取得する場合は、イベント情報を格納する変数を「e」とした場合は「e.pageX」「e.pageY」となります。 座標の基準 ...

JavaScriptを使ってHTMLを含む文字列から正規表現でHTMLタグを除去する方法のサンプルコードです。 正規表現を使ったHTMLタグ除去にreplace()関数を利用します。replace()関数は元の変数にある値を書き換えず、返り ...

JavaScriptでフォーカスされているフォームの文字色や背景色、サイズなどのスタイルを変更する方法のサンプルコードです。 See the Pen JavaScript Get form text in real time by yoch ...

JavaScriptで対象の変数が定義されているか判別する方法のサンプルコードです。 typeof演算子を利用して変数の型を取得し、未定義となる「undefined」かどうかを判別します。 if (typeof 変数名 !== 'undef ...

Number.isInteger()は引数に指定した値が整数の場合はtrue、整数ではない場合はfalseを返します。 単純にif文で判別する場合は以下のようになります。 let val = 123; if(Number.isInteger ...

JavaScriptを使ってリアルタイムでフォーム内に入力されているテキストを取得・表示する方法のサンプルコードです。 リアルタイムでフォーム内のテキストを取得・表示 リアルタイムでフォーム内に入力されているテキストを取得・表示する動作サン ...

JavaScriptだけでキーボードの入力情報を「addEventListener」で取得して発火イベントを実装する方法のサンプルコード集です。 「onkeydown」「onkeypress」「onkeyup」などのDOM oneventハ ...

対象とする値が特定の数値で割り切れるかどうか判別する計算方法のサンプルコードです。 また、この方法で偶数、奇数を判別する事も可能ですので紹介しておきます。 特定の数値で割り切れるかどうか if (対象の値 % 特定の数値 == 0 ){ / ...

switch文のポイント 対象の値とcaseの値は一致か不一致の判別のみ指定可能な値は、数値、文字列で配列の一致等は不可対象の値とcaseの値での範囲指定、比較演算子による比較分岐は不可対象の値、caseの値には変数、数式、関数などを記述で ...

JavaScriptのreplace()で複数の文字または文字列を全て一括で置き換える方法の紹介です。 指定の文字列をひとつ置き換える 最初に見つかった指定文字列または文字をひとつだけ置き換える場合は正規表現を使わずに実装可能です。 サンプ ...

JavaScriptのスクリプトコード内で複数行の文字列（文章）やHTMLを記述する方法の紹介です。 バックスラッシュを使って改行する 文字列はシングルクォーテーションやダブルクオーテーションで囲って記述する事が多いですが、見た目上の改行を ...

JavaScriptで利用できるquerySelector()やquerySelectorAll()のセレクター指定パターンのまとめです。 querySelector()、querySelectorAll()の基本 指定方法は引数にカンマで ...

JavaScriptのgetElementsByClassName()は指定したclass名が付与されているHTML要素（Elements）を取得する関数になります。 このページではgetElementsByClassName()で複数のc ...

JavaScriptのclassNameで複数のclass名を配列として取得する方法を紹介しています。 classNameで要素のclass名を取得する際、対象の要素のclass名が複数指定されている場合は配列ではなく半角スペース区切りでの ...

JavaScriptのsplitメソッドを利用して文字列を区切り文字または文字列で分割して配列に代入する方法です。 改行コードでの分割や、複数の区切り文字での分割、最大分割数を指定した分割方法も紹介しています。 split()の基本は以下の ...

このページではWEBサイトにJavaScriptを利用して現在時刻をリアルタイムに表示する方法を紹介しています。 現在時刻を表示する 先にJavaScriptを利用して現在時刻を表示（リアルタイムではない）するサンプルを紹介します。 See ...

JavaScriptを利用して図形や画像・文字列などの要素をマウスカーソルの位置に追従して移動させるイベント処理の実装方法の紹介です。 要素をマウスカーソルの位置に追従して移動させるイベント処理サンプル See the Pen JavaSc ...

JavaScriptを使ってlocalStorageにデータを保存する方法と、保存したデータを取得、または保存されているデータを破棄する方法です。 また、有効期限やデータの保存量制限、その他注意点も紹介しています。 localStorage ...

JavaScriptを使ってクリックしたHTTMLの要素を削除（非表示）する方法のまとめです。 idからクリックした要素を削除（非表示）にする方法 クリックした要素のIDから要素を指定して非表示にする方法です。 ※右下のRerunボタンで操 ...

JavaScriptで配列をJSONコードにエンコード、JSONコードを配列にデコードする方法の紹介です。 JSON.stringify()で配列をJSONにエンコードする JavaScriptで配列をJSONに変換するにはJSON.str ...

JavaScriptのfilter()関数のオプションにBooleanを指定して配列から空値を削除する方法の紹介です。 filter(Boolean)の基本 filter()関数の引数にBooleanを指定することで、配列の値から空の値、0 ...

JavaScriptのpush()、unshift()で配列の先頭と末尾にデータを追加する方法の紹介です。 push()関数で配列の末尾に値を追加する push()関数は引数に追加する値を指定することで、配列の末尾に新しくデータを追加します ...

JavaScriptのtrim()関数を使って文字列の先頭、末尾から空白文字を除去する方法のサンプルコードです。 trim()は文字列の先頭と末尾から「半角スペース」「全角スペース」「タブ」「すべての改行文字」を取り除いた結果を返します。 ...

JavaScriptのみでダブルクリックイベント、Shiftを押しながらのダブルクリックのイベントを実装するサンプルコードの紹介です。 JavaScriptでダブルクリックイベント JavaScriptでダブルクリックイベントを実装した動作 ...

PCメインのコンテンツでテキストフォームの値を取得して処理をしたい場合に、ユーザービリティの観点からEnter（リターン）キーを使った発火イベントは有効な場合が良くあります。 Enter（リターン）キーにイベント処理を加えるには、いくつかの ...