JavaScript,JavaScript 取得

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

JavaScript,JavaScript 文字列

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

JavaScript フォーム,JavaScript

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

JavaScript,JavaScript 変数

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

JavaScript,JavaScript 数値・計算

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

JavaScript フォーム,JavaScript

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

2021-01-27JavaScript,JavaScript イベント

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

2021-01-22JavaScript,JavaScript 数値・計算

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

JavaScript,JavaScript 条件分岐

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

JavaScript,JavaScript 文字列

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

JavaScript,JavaScript 文字列

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

javascript DOM操作,JavaScript

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

javascript DOM操作,JavaScript

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

javascript DOM操作,JavaScript

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

2020-11-25JavaScript,JavaScript 配列

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

javascript DOM操作,JavaScript

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

javascript DOM操作,JavaScript,JavaScript イベント

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

JavaScript Web Storage,JavaScript

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

javascript DOM操作,JavaScript

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

JavaScript,JavaScript 配列

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

2020-09-14JavaScript,JavaScript 配列

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

JavaScript,JavaScript 配列

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

JavaScript,JavaScript 文字列

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

2020-06-11JavaScript,JavaScript イベント

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

2020-06-11JavaScript フォーム,JavaScript

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