JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptでCookieを読み取る方法を解説！サンプルコード付き

    JavaScriptでは、document.cookieプロパティを使用することで、ブラウザに保存されているCookieを簡単に読み取ることができます。本記事では、実際に動作するサンプルコードをもとに、Cookieの読み取り方法をわかりやすく解説します。 注意：このサンプルを実行するには、ローカルサーバー環境が必要です。HTMLファイルを直接ブラウザで開いた場合、Cookieが正しく機能しないことがあります。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta charset=

  2. JavaScriptのスクロールイベントとは？基本の使い方をサンプルコードで解説

    JavaScriptにおけるスクロールイベント（scroll event）は、ユーザーがスクロールバーを上下に操作したときに発生するイベントです。ページのスクロール位置に応じて処理を実行したい場合に活用される、非常に重要なイベントのひとつです。 スクロールイベントの基本的な仕組み スクロールイベントは、windowオブジェクトやスクロール可能な要素に対してaddEventListener()メソッドを使って登録できます。スクロールが行われるたびに、登録した関数が繰り返し呼び出される仕組みになっています。 以下は、JavaScriptでスクロールイベントを使用したサンプルコードです。 サンプルコ

  3. JavaScriptのロードイベントとは？ページ読み込みイベントの種類と使い方を解説

    JavaScriptにおけるページのロードイベントは、Webページが読み込まれる、またはアンロード（破棄）されるタイミングで発生します。これらのイベントを適切に使い分けることで、ページの状態に応じた処理を正確に実行できるようになります。 主なロードイベントの種類 JavaScriptで利用できる代表的なページロードイベントは以下の通りです。 イベント説明 DOMContentLoadedDOMツリーの構築が完了した時点で発生します。スタイルシートや画像などの外部リソースがまだ読み込まれていなくても実行されるため、高速な初期化処理に適しています。 Loadブラウザがすべてのリソース（画像

  4. JavaScriptのフォーカスイベントとは？種類と使い方を実例付きで解説

    JavaScriptのフォーカスイベントとはフォーカスイベントは、要素がフォーカスを取得したとき、あるいはフォーカスを失ったときに発生するイベントです。テキストボックスやフォーム要素をクリックしたとき、Tabキーで移動したときなどに発生し、入力フォームのバリデーションやUIの強調表示など、さまざまな場面で活用されます。主なフォーカスイベントの種類イベント説明blur要素がフォーカスを失ったときに発生します。focus要素がフォーカスを取得したときに発生します。focusin要素がフォーカスを取得しようとしているときに発生します。focusとの違いは、親要素へのバブリングが行われる点です。foc

  5. JavaScriptにおけるpreventDefault()とreturn falseの違いを徹底解説

    preventDefault()とreturn falseの基本的な違いpreventDefault()は、イベントが発生した際にブラウザのデフォルト動作をキャンセルするメソッドです。例えば、リンクをクリックしたときのページ遷移を防ぎたい場合などに使用します。ただし、イベント自体の伝播（バブリング）は止められず、後続の処理も通常どおり実行されます。一方、return falseは、インラインのイベントハンドラやjQueryなどの環境で使われた場合、デフォルト動作を停止するだけでなく、イベントの伝播も阻止します。また、関数内でreturn falseに到達した時点でそれ以降の処理は実行されず、即

  6. JavaScriptのlocation.protocolプロパティの使い方を解説！現在のURLプロトコルを取得する方法

    location.protocolプロパティとは JavaScriptのlocation.protocolプロパティは、現在表示しているページのURLに含まれるプロトコル（通信方式）を取得または設定するために使用されます。プロトコルとは、URLの先頭部分にある「http:」「https:」「file:」などのことで、ブラウザがどのような方式でリソースにアクセスしているかを示すものです。 このプロパティは読み取り専用として扱われることが多く、主に現在のページが安全な接続（HTTPS）かどうかを判定したい場合などに活用されます。 主な特徴 現在のURLのプロトコルを文字列として返す（例：「htt

  7. JavaScriptで別のフィールドと同じ値を入力欄に自動入力する方法

    Webフォームを作成していると、「1つ目に入力した住所をそのまま2つ目のフィールドにも入れたい」といった場面はよくあります。JavaScriptを使えば、ボタンを1つクリックするだけで、別のフィールドと同じ値を簡単に自動入力できます。本記事では、その具体的な実装方法をサンプルコード付きで解説します。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport&quo

  8. JavaScriptで入力に応じて自動的に高さが変わるテキストエリアを作成する方法

    Webフォームなどで長い文章を入力する際、テキストエリアの高さが固定されているとスクロールが必要になり、使い勝手が損なわれることがあります。そこで役立つのが、入力内容に応じて高さを自動的に調整する「自動リサイズテキストエリア」です。 仕組み 実装のポイントは次の2点です。 inputイベント：ユーザーがテキストを入力・貼り付けするたびに処理を実行します。 scrollHeightプロパティ：要素の中身全体の高さを取得し、その値をstyle.heightに設定することで、コンテンツに合わせた高さに変更できます。 一度heightを「auto」に戻してからscrollHeightを設定するのが

  9. JavaScriptでブール値（true/false）を切り替える方法をわかりやすく解説

    JavaScriptでブール値（true / false）を切り替える（トグルする）最も簡単な方法は、論理NOT演算子「!」を使うことです。現在の値の前に「!」を付けて代入し直すだけで、trueとfalseを相互に反転できます。 ブール値を切り替える基本構文 let boolVal = true; boolVal = !boolVal; // false に反転する ! 演算子は真偽値を反転させる働きがあるため、ボタンのクリックで表示・非表示を切り替えるUIや、ON / OFF スイッチの実装などで頻繁に利用されます。 実装例 以下は、ボタンをクリックするたびにブール値を切り替え、その結果を画

  10. JavaScriptでiframeをフルスクリーン表示に設定する方法

    Webページに埋め込んだiframe（インラインフレーム）を、ボタン操作ひとつで画面いっぱいに表示できたら便利ですよね。JavaScriptを使えば、CSSクラスの付け替えだけでこの動作をシンプルに実装できます。 サンプルコード 以下は、ボタンをクリックするとiframeが全画面サイズに切り替わるサンプルです。iframeに対して幅「100vw」・高さ「100vh」を指定したCSSクラスを適用しています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-

  11. JavaScriptでテキストエリアの矢印キー操作を無効にする方法

    JavaScriptを使えば、テキストエリア（textarea）内での矢印キーによるスクロールを簡単に無効化できます。仕組みとしては、keydownイベントを監視し、矢印キーが押されたタイミングでpreventDefault()を呼び出すことで、ブラウザのデフォルトのスクロール動作をキャンセルします。 実装例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport"

  12. JavaScriptでdiv要素から値を取得するには？undefinedになる原因と解決法

    div要素はinput要素とは異なり、valueプロパティを持っていません。そのため、element.valueのようにアクセスすると「undefined」が返されてしまいます。 div要素の中身（テキストやHTML）を取得したい場合は、document.getElementById().innerHTMLを使用します。以下がJavaScriptのコード例です。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> &l

  13. JavaScriptで派生プロパティをオーバーライドする方法をわかりやすく解説

    JavaScriptでは、Object.create()メソッドを使うことで、既存のオブジェクトをプロトタイプとして持つ新しいオブジェクト（派生オブジェクト）を作成できます。派生オブジェクトはプロトタイプのプロパティをそのまま継承しますが、同名のプロパティに新しい値を代入することで、継承された値を簡単に上書き（オーバーライド）できます。以下は、JavaScriptで派生プロパティをオーバーライドする具体的なコード例です。サンプルコード<!DOCTYPE html> <html lang="en"> <head> <meta char

  14. JavaScriptのSymbol（シンボル）とは？特徴と基本的な使い方を解説

    JavaScriptにおけるSymbol（シンボル）は、ES6（ECMAScript 2015）で新たに導入されたプリミティブデータ型の一つです。シンボルは呼び出されるたびに必ず完全に一意（ユニーク）な値を返し、組み込みのSymbol()ファクトリ関数を使って生成します。Symbolの主な特徴文字列や数値と同じくプリミティブ型として扱われるSymbol()を呼び出すたびに、たとえ同じ引数（説明用の文字列）を渡しても、必ず異なる新しいシンボルが生成されるオブジェクトのプロパティキーとして利用でき、名前の衝突を防ぐことができるJavaScriptシンボルのサンプルコード以下のコードでは、同じ文字列

  15. JavaScriptにおける継承の基本を具体例で解説

    JavaScriptは、クラスベースではなくプロトタイプベースのオブジェクト指向言語です。そのため、継承はprototype（プロトタイプ）オブジェクトを通じて実現されます。コンストラクタ関数のprototypeプロパティにメソッドやプロパティを追加すると、そのコンストラクタから生成されたすべてのインスタンスが、それらを共有して利用できるようになります。 プロトタイプによる継承の仕組み JavaScriptでは、インスタンスからプロパティやメソッドが参照されるとき、まずオブジェクト自身を検索し、見つからなければプロトタイプチェーンをたどって上位のオブジェクトへと探しに行きます。これにより、各イ

  16. JavaScriptのlastIndexプロパティの使い方を解説！正規表現のマッチ位置を取得する方法

    JavaScriptのlastIndexプロパティとは JavaScriptのlastIndexプロパティは、正規表現によるマッチが発生したインデックス位置（文字位置）を返すプロパティです。このプロパティを利用すると、次回のマッチ検索はその位置から再開されます。 重要なポイントとして、lastIndexプロパティが機能するのは、正規表現に「g」（グローバル）フラグが設定されている場合のみです。「g」フラグがない場合、lastIndexは常に0のまま変化しません。 lastIndexプロパティの主な特徴 マッチが見つかった位置の次のインデックスを記録します test()メソッドやexec()メ

  17. JavaScriptで正規表現のマッチ結果をループ処理する方法

    はじめにJavaScriptでは、match()メソッドとグローバルフラグ（/g）を組み合わせることで、文字列内のすべての正規表現マッチ結果を取得し、それらをループ処理することができます。本記事では、実際のコード例を通じてその実装方法を解説します。コード例以下は、JavaScriptで正規表現のマッチ結果をループ処理するサンプルコードです。この例では、文章の中で「at」で終わる単語をすべて検索しています。<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8

  18. JavaScriptのモジュールとは？基本の仕組みと使い方を実例付きで解説

    JavaScriptのモジュールとはモジュール（Module）は、ES2015（ES6）で導入された機能で、大きなコードを小さな部品ごとのファイルに分割して管理するための仕組みです。モジュールの中には、クラスや関数など必要な処理をまとめて定義できます。モジュールでは、「export」と「import」という2つのキーワードが中心となります。exportを使って変数・関数・オブジェクトを外部に公開し、importを使って別のファイルからそれらを読み込んで利用します。従来のJavaScriptでは、読み込んだすべてのスクリプトがグローバルスコープを共有していたため、変数名の衝突などの問題が発生しや

  19. 【初心者向け】JavaScriptの非同期関数（async/await）をサンプルコード付きで解説

    非同期関数（async function）とはJavaScriptの非同期関数は、asyncキーワードを付けて定義する特別な関数です。ES2017（ES8）で標準仕様に組み込まれ、従来のコールバック関数よりも簡潔で読みやすい形でPromiseを扱えるようにするために導入されました。async関数の内部ではawaitキーワードを使用できます。awaitを付けた箇所では処理の流れが一時停止し、対象のPromiseが完了（resolveまたはreject）するまで待機します。この仕組みにより、非同期処理をあたかも同期処理のような直感的なコードとして書ける点が最大のメリットです。押さえておきたいポイン

  20. JavaScriptのキーイベントとは？keydown・keypress・keyupの違いと使い方を解説

    キーイベントとはキーイベント（Key Events）は、ユーザーがキーボードを操作したタイミングで発生するイベントです。JavaScriptでは、主に以下の3種類のキーイベントが用意されています。イベント説明onkeydownユーザーがキーを押し始めた（押している）瞬間に発生します。すべてのキーで検出可能です。onkeypressユーザーがキーを押したときに発生します。ただし、文字を生成しないキー（Shift、Ctrlなど）では発生しないため注意が必要です。onkeyupユーザーが押していたキーを離した瞬間に発生します。それぞれのイベントは発生タイミングが異なるため、用途に応じて使い分けること

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