JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. 【JavaScript】idではなくクラス（class）を指定して特定の要素にフォーカスを当てる方法

    JavaScriptでは、focus()メソッドを使うことで任意の要素にフォーカスを設定できます。通常は getElementById() でidを指定するのが一般的ですが、querySelectorAll() を組み合わせれば、id宣言ではなくクラス（class）名を指定して特定の要素にフォーカスを当てることも可能です。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="vi

  2. JavaScriptでランダムカラーを生成する方法【サンプルコード付き】

    JavaScriptを使えば、ボタンをクリックするたびに要素の背景色をランダムに切り替えるといった動的な演出を簡単に実装できます。この記事では、jQueryと組み合わせて16進数のカラーコード（#RRGGBB）をランダムに生成し、指定した要素に適用する方法を、具体的なサンプルコードとともに解説します。 ランダムカラー生成の基本構文 JavaScriptでランダムな色を要素に適用する際の基本的な構文は次の通りです。 $("#yourIdName").css("background-color", yourCustomFunctionNameToGetR

  3. JavaScriptでconst配列を作成する方法！要素の値は変更できる？わかりやすく解説

    JavaScriptでconst配列を作成するには？JavaScriptで定数配列（const配列）を作成するには、配列名の前にconstを記述するだけです。constで宣言された配列は、個々の要素の値を再代入（変更）することは可能ですが、配列全体を新しい配列で再代入することはできません。これは、constが固定するのは「変数への参照（バインディング）」であって、配列の中身そのものではないためです。もし配列の内容自体も変更不可にしたい場合は、Object.freeze()メソッドを使用します。以下は、JavaScriptで定数配列を作成するサンプルコードです。コード例<!DOCTYPE

  4. ユーザー入力から数値を取得し、JavaScriptでコンソールに表示する方法

    document.querySelectorでユーザー入力を取得する JavaScriptでは、document.querySelector(#id名)を使用することで、ユーザーがボタンをクリックしたタイミングで入力フィールドの値を簡単に取得できます。IDセレクタで要素を指定する場合は、先頭に「#」を付けるのがポイントです。 以下は、ユーザーが入力した数値をボタンクリック時に取得し、コンソールに表示するJavaScriptコードのサンプルです。 コード例 <!DOCTYPE html> <html lang="en"> <head> &l

  5. 【初心者向け】JavaScriptでJSONオブジェクトを作成する方法をサンプルコード付きで解説

    JavaScriptでは、波括弧 { } を使ったオブジェクトリテラルを記述するだけで、JSON（JavaScript Object Notation）と同じ「キーと値のペア」構造を持つオブジェクトを簡単に作成できます。JSONは軽量なデータ交換フォーマットであり、API通信や設定ファイルなど、Web開発のさまざまな場面で利用されています。 以下は、JavaScriptでJSONオブジェクトを作成し、ボタンをクリックするとその内容を画面に表示するサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="ja">

  6. JavaScriptでHTML要素にoninputイベントを追加する方法

    HTML要素に入力イベント（oninput）を動的に追加したい場合は、document.getElementById()とaddEventListener()を組み合わせて使用します。この方法なら、HTMLタグに直接属性を記述することなく、JavaScript側から柔軟にイベント処理を設定できます。実装例以下がそのJavaScriptコードです。<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8> <meta name=viewport content=width=device

  7. JSONテキストをJavaScriptのJSONオブジェクトに変換する方法を解説

    JavaScriptでは、JSON.parse()メソッドを使用することで、JSON形式のテキスト文字列をJavaScriptオブジェクトへと変換できます。このメソッドは、APIから取得したデータやサーバーとの通信で受け取ったJSON文字列を、プログラム内で扱いやすいオブジェクトにパースする際に非常に重要な役割を果たします。 以下は、JSONテキストをJavaScriptオブジェクトに変換する具体的なコード例です。 サンプルコード <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /&

  8. JavaScriptで実行中の関数を停止するにはどうすればいい？addEventListenerとclearIntervalの使い方を解説

    JavaScriptでは、一度実行が始まった関数を外部から直接強制終了することはできません。しかし、setInterval()で定期実行されている処理であれば、clearInterval()を使うことで停止できます。ボタンのクリックイベントは、document.getElementById().addEventListener()で登録します。 実装のポイント この仕組みを実現するには、以下の手順に従います。 関数を開始するボタン：クリックされるとsetInterval()を呼び出し、戻り値（タイマーID）を変数に保存します。 関数を停止するボタン：クリックされると保存しておいたタイマーID

  9. JavaScriptの範囲オーバーフロー・範囲アンダーフロー（rangeOverflow／rangeUnderflow）プロパティの使い方

    rangeOverflow・rangeUnderflowプロパティとはJavaScriptでは、フォーム要素の validity プロパティ（ValidityStateオブジェクト）を利用することで、ユーザーが入力した値が条件を満たしているかどうかを簡単に検証できます。この中には、数値の入力範囲をチェックするための「rangeOverflow」と「rangeUnderflow」という2つのプロパティが用意されています。Range Underflow（範囲アンダーフロー）入力要素の値が、min属性で指定された最小値よりも小さい場合、validity.rangeUnderflow は true を

  10. CSSのnth-childでHTML要素に奇数・偶数のスタイルを追加する方法

    Webページを作っていると、リストやカードなど複数の要素に対して「奇数番目」「偶数番目」で異なるスタイルを適用したい場面がよくあります。そのようなときは、CSSの擬似クラスである nth-child(odd) と nth-child(even) を使えば、要素に一つずつクラスを手動で追加しなくても、簡単にスタイルを切り替えることができます。CSSのnth-childを使った基本例以下のコードでは、subjectName クラスを持つ要素に対して、奇数番目の要素は青色、偶数番目の要素は紫色を自動的に適用しています。サンプルコード<!DOCTYPE html> <html lan

  11. JavaScriptオブジェクトのプロパティの追加・アクセス・削除方法を徹底解説

    JavaScriptでは、オブジェクトのプロパティに対して追加・アクセス・削除といった操作を簡単に行うことができます。本記事では、それぞれの操作方法をサンプルコードとともにわかりやすく解説します。 JavaScriptオブジェクトのプロパティ操作の基本 JavaScriptオブジェクトのプロパティは、主に以下の方法で操作します。 プロパティの追加： ドット記法（obj.プロパティ名 = 値;）またはブラケット記法（obj[プロパティ名] = 値;）を使用します。存在しないプロパティに値を代入すると、自動的に新しいプロパティが作成されます。 プロパティへのアクセス： ドット記法（obj.プロパ

  12. JavaScriptのswitchステートメントで共通コードブロックを実装する方法を解説

    JavaScriptのswitchステートメントは、1つの式の評価結果に応じて複数の処理を振り分けるための制御構文です。各caseに対応する処理を記述し、break文でブロックを抜けるのが基本的な書き方となります。以下は、switchステートメントを使って共通コードブロックを実装するサンプルコードです。1〜7の数値を入力すると、対応する曜日を表示するシンプルなWebページを作成します。サンプルコード<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=

  13. JavaScriptのswitch文は厳密比較（===）のみ！型変換されない理由と対処法を実例で解説

    JavaScriptのswitch文は常に厳密比較（===）で判定される JavaScriptのswitch文では、switch式の値と各caseラベルの比較に厳密等価演算子（===）だけが使用されます。つまり、==のような暗黙的な型変換（型強制）は一切行われません。そのため、見た目が同じ値でもデータ型が異なる限り一致とはみなされず、該当するcaseがひとつも見つからなければ、直ちにdefault節が実行されます。 この挙動は、フォーム入力など「必ず文字列として取得される値」を扱う場面で特に重要です。input要素のvalueプロパティは常に文字列を返すため、数値リテラルのcase（case

  14. JavaScriptの正規表現修飾子(g・i・m)をサンプルコード付きで解説

    JavaScriptの正規表現修飾子とは JavaScriptの正規表現における修飾子(フラグ)とは、パターンリテラルの末尾に付加することで検索の挙動を変更できる、省略可能な指定のことです。これを使うことで、大文字と小文字を区別しない検索や文字列全体を対象としたグローバル検索などが簡単に実現できます。さらに、複数の修飾子を組み合わせて指定することも可能です。 主な修飾子の一覧 修飾子説明 gグローバルマッチングを有効にします。最初の一致で処理を止めず、マッチしたすべての結果を返します。 i大文字と小文字を区別しない(ignore case)マッチングを有効にします。 m複数行(mul

  15. JavaScriptで正規表現をテスト・実行する方法｜test()とexec()の使い方

    JavaScriptでは、RegExpオブジェクトを使って正規表現を扱います。パターンが文字列にマッチするかどうかを確認するには test() メソッドを、実際にマッチした結果を取得するには exec() メソッドを使用します。この記事では、両者の違いと具体的な使い方をサンプルコード付きで解説します。 test()メソッドとexec()メソッドの違い test()メソッド： 正規表現パターンが文字列にマッチすれば true、マッチしなければ false を返すシンプルな真偽判定用メソッドです。 exec()メソッド： マッチした場合、マッチした部分文字列などを含む結果の配列を返します。マッチ

  16. JavaScriptのtry文とcatch文の使い方をサンプルコードで解説

    try文とcatch文とはtry文を使うと、コードブロックを実行しながらエラーの有無をテストできます。実行中にエラーが発生した場合、そのエラーはcatch文によって捕捉（キャッチ）され、プログラムが強制終了することなく適切に処理を行うことができます。この仕組みは「例外処理」と呼ばれ、予期しないエラーが発生してもユーザーに分かりやすいメッセージを表示したり、代替処理に切り替えたりする際に非常に役立ちます。JavaScriptにおけるtry文とcatch文のサンプルコード以下は、宣言前に変数へアクセスした際に発生するエラーを、try〜catch文で捕捉して画面に表示する例です。コード例<!D

  17. JavaScriptのエラー名（Error.name）とは？6つの種類と取得方法を例付きで解説

    JavaScriptのエラー名（Error.name）とはJavaScriptでは、発生したエラーの種類を示すためにエラー名（name）という値が使用されます。この値は、エラーオブジェクトの name プロパティを通じて設定したり参照したりすることができます。エラー名として返される可能性のある値は、主に以下の6種類です。No.エラー名と説明1EvalErroreval() 関数の実行中にエラーが発生したことを表します。2RangeError配列の長さなど、数値が有効な範囲外になった場合に発生します。3ReferenceError存在しない変数へのアクセスなど、不正な参照が行われた場合に発生しま

  18. JavaScriptのthisキーワードとは？参照先のオブジェクトをわかりやすく解説

    JavaScriptのthisキーワードは、そのキーワードが属しているオブジェクトを参照します。大きな特徴として、使用される文脈によって参照先が変化するという点があり、これがthisの挙動を理解するうえで重要なポイントとなります。 thisが参照するオブジェクトの一覧 単独で使用した場合、または通常の関数内： グローバルオブジェクト（ブラウザ環境では window オブジェクト）を参照します。 オブジェクトのメソッド内： そのメソッドを所有するオブジェクト自身を参照します。 イベントリスナー内： イベントを受け取ったHTML要素を参照します。 サンプルコード 以下は、JavaScriptの

  19. 【JavaScript】画像をアップロードする前にプレビュー表示する方法を解説

    Webアプリケーションで画像をアップロードする際、送信前に選択した画像を画面上で確認できれば、ユーザーは誤ったファイルを選んでいないかをチェックでき、より安心して操作できます。JavaScriptでは、FileReader()を使用することで、ファイル選択と同時に画像を即座にプレビュー表示できます。 実装サンプルコード 以下は、FileReaderを使って選択した画像をプレビュー表示する完全なHTMLコードです。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="

  20. JavaScriptで特定のテキストを含むdiv要素を非表示にする方法

    JavaScriptで「header」や「footer」など、特定のテキストを含むdiv要素だけを非表示にしたいケースはよくあります。本記事では、その実現方法をサンプルコード付きでわかりやすく解説します。基本的な考え方まず、getElementsByClassName()メソッドを使って対象となるクラス名を持つdiv要素のコレクションを取得します。次に、forループで各要素を順番に反復処理し、OR条件（||）を使って要素内のテキストが特定の文字列と一致するかどうかを判定します。条件に一致した要素に対しては、yourDiv.style.display = noneを設定することで、画面上から非表

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:141/297  20-コンピューター/Page Goto:1 135 136 137 138 139 140 141 142 143 144 145 146 147