JavaScript

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（リターン）キーにイベント処理を加えるには、いくつかの ...

JavaScriptでマウスホイールの操作情報を取得してイベントを実装する方法です。 マウスホイールの操作情報を取得する JavaScriptでマウスホイールの操作・アクションを取得するには「window.onmousewheel」を利用し ...

JavaScript内でXMLHttpRequest()を使って別のjsファイルを読み込んで別ファイルのJavaScript関数を実行する方法になります。 JavaScript内で別のJavaScriptファイルを読み込むサンプルコード 別 ...

スクロール量に合わせてページの背景色のCSSを変更していく方法と、シンプルなJavaScriptの動作サンプルとサンプルコードです。 スクロール量に合わせて背景色を変更する 動作サンプル See the Pen JavaScript Cha ...

JavaScriptを使ってCSSのスタイルを動的に変更する方法です。 要素の背景色を変更するボタン、要素のポジションを変更するボタン、また.styleで指定可能な主なstyle属性一覧を紹介しています。 要素の背景色を変更するボタン Ja ...

JavaScriptを使って指定した要素に対してマウスホバー（マウスオーバー）イベントを実装する方法です。 マウスホバーイベントを実装する方法 JavaScriptを使って指定した要素に対してマウスホバー（マウスオーバー）イベントはaddE ...

JavaScriptを使ってクリック時などに要素のclassからidを取得する方法です。 クリック時・マウスホバー時・ドラッグ時などのパターンを紹介しています。 要素のクリック時にclassからidを取得する方法 JavaScriptを使っ ...

JavaScriptを使って現在表示中のページがHTTPかHTTPSかを判別する方法です。 またHTTPの場合にHTTPSのページにリダイレクトする方法も紹介しています。 httpかhttpsかを判別する方法 location.protoc ...

JavaScriptを使った文字列の前方一致や後方一致を判別する方法です。 文字列の前方一致を判別する startsWith()関数を利用して文字列の前方一致を判別する方法になります。 startsWith()関数は指定した文字列の前方が第 ...