JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptでドロップダウンリストの全オプションを取得・表示する方法

    ドロップダウンリスト（セレクトボックス）に含まれるすべてのオプションを表示するには、optionsプロパティを使用します。このプロパティはselect要素内の全option要素をコレクションとして返すため、lengthプロパティでオプションの総数を取得し、ループ処理によって各項目を順番に取り出すことができます。 サンプルコード 以下のコードでは、ボタンをクリックするとドロップダウンリストからすべてのオプションを取得し、画面に表示します。 <!DOCTYPE html> <html>    <body>     &nbs

  2. JavaScriptでドロップダウンリストの選択中オプションのインデックスを取得する方法

    selectedIndexプロパティとはドロップダウンリスト（<select>要素）で現在選択されているオプションのインデックスを取得するには、JavaScriptのselectedIndexプロパティを使用します。このプロパティは、選択された<option>要素の位置を0から始まる整数値として返します。1番目のオプションが選択されている場合 → 02番目のオプションが選択されている場合 → 1何も選択されていない場合 → -1実装例以下のコードでは、セレクトボックスで項目を選択し、ボタンをクリックすると、選択されたオプションのインデックスが画面に表示されます。<

  3. JavaScriptでドロップダウンリストの選択したオプションを表示する方法

    JavaScriptを使ってドロップダウンリスト（セレクトボックス）で選択されたオプションを表示するには、selectedIndexプロパティとoptionsコレクションを組み合わせます。以下のコードを実行すると、ユーザーがドロップダウンリストから選択した項目を取得して画面に表示できます。 実装例 ドロップダウンリストから項目を選択し、「Click」ボタンをクリックすると、選択されたオプションのテキストが表示されます。 <!DOCTYPE html> <html>   <body>     <

  4. JavaScriptでドロップダウンリストからオプションを削除する方法

    ドロップダウンリスト（セレクトボックス）からオプションを削除するには、JavaScriptの remove() メソッドを使用します。このメソッドは、引数に指定したインデックス番号に対応するオプション要素を削除します。削除したいオプションは、ユーザーが選択中の項目（selectedIndex）として指定するのが一般的です。 以下のサンプルコードを実行して、実際にドロップダウンからオプションを削除する動作を確認してみましょう。 サンプルコード <!DOCTYPE html> <html> <body> <form id = myFor

  5. JavaScriptでリンクのhreflang属性の値を取得する方法

    JavaScriptでリンク（<a>要素）のhreflang属性の値を取得するには、hreflangプロパティを使用します。このプロパティは、対象リンクが指し示すページの言語コード（例：「en-us」「ja」など）を文字列として返します。基本的な使い方document.getElementById()などでリンク要素を取得した後、hreflangプロパティにアクセスするだけで、属性の値を簡単に読み取ることができます。サンプルコード以下のコードは、リンクのhreflang属性の値を取得して画面に表示する実際の例です。そのままコピーしてブラウザで実行してみてください。<!DOCT

  6. JavaScriptのtoExponential()メソッドで数値を指数表記に強制的に表示する方法

    toExponential()メソッドとはJavaScriptで数値を指数表記（エクスポネンシャル表記）で強制的に表示したい場合は、toExponential()メソッドを使用します。通常、JavaScriptは数値の大きさに応じて標準表記と指数表記を自動的に切り替えますが、このメソッドを使えば、標準表記が使われる範囲の数値であっても、意図的に指数表記へ変換できます。パラメータfractionDigits： 小数点以下の桁数を指定する整数です。省略した場合は、その数値を一意に表現できるだけの桁数が自動的に使用されます。サンプルコード以下のコードを実行すると、toExponential()メソッ

  7. JavaScriptで現在の数値の文字列値を返す方法（toLocaleStringメソッドの使い方）

    toLocaleString() メソッドは、現在の数値を文字列値に変換して返します。返される文字列の書式は、ブラウザや実行環境のロケール（地域・言語）設定に応じて変化するのが特徴です。たとえば、桁区切りのカンマや小数点の表記が、ユーザーの環境ごとに自動的に調整されます。基本構文num.toLocaleString([locales[, options]])locales：言語コード（例：ja-JP、en-US）を指定できます。省略した場合は実行環境のデフォルト設定が使われます。options：通貨表示や小数点以下の桁数など、書式を細かく制御するオプションを指定できます。使用例以下のコードを実

  8. JavaScriptでドキュメントの内容を置き換える方法をわかりやすく解説

    JavaScriptでは、document.open()、document.write()、document.close() を組み合わせることで、現在表示されているドキュメントの内容を新しいコンテンツに置き換えることができます。 特に document.open(text/html, replace) のように第2引数に replace を指定すると、履歴に新しいエントリを追加せず、現在のドキュメントを新しい内容で上書きします。これにより、ページ全体の内容を動的に差し替えることが可能です。 サンプルコード 以下のコードを実行して、ボタンをクリックするとドキュメントの内容が新しいテキストに置き

  9. JavaScriptで文字列を数値に変換する方法を初心者向けに解説！Number・parseInt・parseFloatの使い方

    JavaScriptにおける文字列から数値への変換とは？ JavaScriptでは、フォームに入力された値やAPIから取得したデータなど、文字列として扱われる数値を計算に使う場面が多くあります。その際は、文字列を明示的に数値へ変換する必要があります。主な方法としてNumber()関数を使う方法が基本ですが、状況に応じて他の方法も使い分けると便利です。 1. Number() 関数を使う方法 Number()は、引数として渡した文字列全体を数値に変換する最もシンプルな方法です。文字列の一部でも数字以外が含まれている場合は NaN（Not a Number）を返す点に注意しましょう。 以下のコー

  10. 【JavaScript】ボタンが属するフォームのIDを取得する方法を解説

    JavaScriptでボタンが属するフォームのID（id属性）を取得するには、form要素が持つidプロパティを使用します。基本的な考え方HTMLでは、<button>や<input>などのフォームコントロールは、自身が属するフォームへの参照をformプロパティとして自動的に保持しています。この性質を利用すると、ボタンの要素から直接、親フォームにアクセスし、そのidプロパティを読み取ることができます。サンプルコード以下のコードを実行すると、ボタンからそのボタンが属するフォームのIDを取得して表示できます。<!DOCTYPE html> <html>

  11. JavaScriptでボタンに表示されているテキストを取得する方法

    JavaScriptでボタン上に表示されているテキストを取得するには、innerHTMLプロパティを使用します。このプロパティは、要素の開始タグと終了タグの間にあるコンテンツ（テキストやHTML）を文字列として返します。innerHTMLプロパティの基本的な使い方まず、document.getElementById()メソッドで対象のボタン要素を取得し、そのinnerHTMLプロパティを読み取ることで、ボタンに表示されているテキストを簡単に取得できます。サンプルコード以下のコードを実行して、ボタンの表示テキストを取得する方法を確認してみましょう。<!DOCTYPE html> &l

  12. JavaScriptで文字列を固定幅フォント（等幅フォント）で表示する方法

    JavaScriptのfixed()メソッドを使用すると、文字列を<tt>タグで囲んだ場合と同じように、固定幅フォント（等幅フォント）として表示できます。fixed()メソッドとはfixed()メソッドはStringオブジェクトのメソッドの一つで、呼び出された文字列をHTMLの<tt>タグ（テレタイプ・等幅フォント用タグ）でラップした形式の文字列を返します。これにより、コードや数値の整列などに適した等幅スタイルでテキストを表示できます。サンプルコード以下のコードを実行すると、文字列「Hello world」が固定幅フォントで表示されます。<html> &nb

  13. JavaScriptの関数リテラルとは？無名関数の定義方法と使い方を実例で解説

    関数リテラル（function literal）とは、名前を持たない関数（無名関数・匿名関数）を定義する式のことです。JavaScriptでは、functionキーワードを使ってその場で関数を定義し、変数に代入したり、他の関数に引数として渡したりすることができます。 関数リテラルの基本構文 関数リテラルは「式」であるため、宣言文ではなく値として扱えるのが特徴です。最も基本的な形は以下のとおりです。 var func = function(x, y) { return x * y; }; この例では、2つの引数を受け取って積を返す無名関数を定義し、変数 func に代入しています。この

  14. JavaScriptのCookieに含まれる5つのレコード（フィールド）とは？

    Cookieの仕組み：サーバーとブラウザ間のデータやり取りサーバーは「Cookie」という形で、訪問者のブラウザに対してデータを送信します。ブラウザ側がそのCookieを受け入れた場合、訪問者のハードディスク上にプレーンテキスト形式のレコードとして保存されます。その後、訪問者が同じサイト内の別のページへ移動すると、ブラウザは保存しておいたCookieを再びサーバーへ送信します。サーバーはこれを受け取ることで、「以前どのような情報が保存されていたか」を記憶し、参照できるようになります。これが、ログイン状態の維持やユーザーの設定情報の保持などにCookieが活用される基本的な仕組みです。Cooki

  15. JavaScriptでボタンの値（value）を取得する方法

    JavaScriptでボタンの値を取得するには、valueプロパティを使用します。ボタン要素のvalue属性に設定された文字列を、簡単なコードで読み取ることができます。valueプロパティとinnerHTMLの違いボタンから情報を取得する際、よく使われるプロパティが2つあります。innerHTML：ボタンの開始タグと終了タグの間にあるテキスト（表示されるラベル）を取得します。value：button要素のvalue属性に設定された値を取得します。画面には表示されませんが、フォーム送信時などに利用される内部的な値です。サンプルコード以下のコードを実行すると、ボタンのテキストと値の両方を取得して表

  16. JavaScriptで数値をブール値（Boolean）に変換する方法を解説

    JavaScriptでは、Boolean()関数を使うことで、数値（Number）を簡単にブール値（Boolean）に変換できます。この関数は、引数として渡された値をtrueまたはfalseに変換して返します。基本的な変換ルール数値をブール値に変換する際のルールはシンプルです。0 と NaN は false に変換されますそれ以外のすべての数値（負の数を含む）は true に変換されます実行例以下のコードを実行して、数値からブール値への変換を確認してみましょう。<!DOCTYPE html> <html> <body> <p&g

  17. JavaScript正規表現で文字列の末尾が「p」に一致するかを判定する方法

    JavaScriptの正規表現（RegExp）を使って、「p」で終わる任意の文字列に一致させたい場合は、p$ という量指定子（アンカー）を使用します。ここで重要なのは「$」というメタ文字です。「$」は文字列の末尾（または行末）を表すため、/p$/ のように記述すると、対象の文字列が「p」で終わっている場合にのみマッチします。さらに g フラグ（グローバル検索）を組み合わせると、複数行のテキストでも各行の末尾に対して繰り返しマッチングを行うことができます。サンプルコード<html> <head> <title>JavaScript Re

  18. JavaScriptの正規表現で「p」が2回以上連続する文字列にマッチさせる方法

    JavaScriptの正規表現（RegExp）を使って、「p」が少なくとも2回連続して含まれる任意の文字列にマッチさせたい場合は、量指定子（Quantifier）である p{2} を使用します。 {2} は「直前の文字が2回以上繰り返される」ことを意味します。さらに末尾に g フラグを付けると、文字列内のすべての該当箇所を一度に検索できます。 サンプルコード <html>    <head>       <title>JavaScript Regular Expression</title> &n

  19. JavaScriptでドキュメントの最終更新日時を表示する方法【初心者向け解説】

    Webページがいつ最後に更新されたのかを確認したい場面は少なくありません。JavaScriptを使えば、document.lastModified プロパティを利用するだけで、ドキュメントが最後に変更された日時を簡単に取得・表示できます。lastModifiedプロパティとはdocument.lastModified は、現在のHTMLドキュメントがサーバー上で最後に更新された日時を文字列として返すプロパティです。特別なライブラリや複雑な処理は不要で、1行のコードだけで実装できるのが魅力です。サンプルコード以下のコードを実行すると、JavaScriptでドキュメントの最終更新日時を画面に表示で

  20. JavaScript正規表現で文字列の先頭を特定のパターンと一致させる方法（^の使い方）

    JavaScriptの正規表現（RegExp）を使って、文字列の先頭が特定のパターン「p」と一致するかどうかを調べたい場合は、キャレット（^）を使用します。「^」は文字列の先頭（行頭）を表すアンカーと呼ばれる特殊文字です。たとえば「^p」と記述すると、「pで始まる文字列」にのみマッチさせることができます。サンプルコード以下は、正規表現「/^We/g」を使って、文字列が「We」で始まるかどうかを判定する例です。<html>  <head>    <title>JavaScript Regular Ex

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:239/297  20-コンピューター/Page Goto:1 233 234 235 236 237 238 239 240 241 242 243 244 245