JavaScript | コンピューター

JavaScriptのHTML DOM「nodeValue」プロパティの使い方を解説

nodeValueプロパティとはJavaScriptのDOM（Document Object Model）におけるnodeValueプロパティは、指定したノードの値を取得または設定するために使用されます。このプロパティを使うことで、テキストノードの内容や属性ノードの値などにアクセスできます。nodeValueプロパティを使用する際は、対象となるノードを明示的に指定する必要があります。たとえば、要素の子ノードであるテキストノードの値を取得したい場合は、childNodesコレクションを経由して目的のノードにアクセスします。主なポイント要素ノード（ELEMENT_NODE）の場合、nodeValu

JavaScriptのonfocusoutイベントとは？基本的な使い方とサンプルコードを解説

JavaScriptのonfocusoutイベントは、要素がフォーカスを失おうとした瞬間に発生するイベントです。テキスト入力欄からユーザーが別の場所へ移動したタイミングを検知したい場合などに活用できます。この記事では、onfocusoutイベントの基本的な仕組みと、実際に動作するサンプルコードを通じてその実装方法を解説します。onfocusoutイベントの基本onfocusoutイベントは、input要素やtextarea要素など、フォーカスを受け取れる要素に対して設定できます。フォーカスが外れた直後に指定した関数を実行できるため、入力値のバリデーション（検証）や表示の切り替えなどに便利です。

JavaScriptのoninputイベントとは？基本的な使い方を実例付きで解説

oninputイベントは、テキストボックスなどの入力フィールドにユーザーが値を入力したタイミングで発生するJavaScriptのイベントです。文字を入力したり削除したりするたびに即座に処理が実行されるため、入力内容のリアルタイム表示やバリデーションなど、インタラクティブなWebページを作成する際に非常に便利です。 oninputイベントの基本的な実装例以下のコードでは、テキストボックスに入力された内容を取得し、その場ですぐに画面へ表示しています。 <!DOCTYPE html> <html> <body> &

JavaScriptで画像の境界線の幅を設定する方法を解説

JavaScriptで画像の境界線（ボーダーイメージ）の幅を設定するには、borderImageWidthプロパティを使用します。このプロパティを使うことで、CSSで指定した境界線画像の表示幅を、JavaScriptから動的に変更できます。borderImageWidthプロパティとはborderImageWidthプロパティは、境界線画像の幅を指定するためのプロパティです。値には「px」などの単位付きの数値や、要素の幅に対する割合を表す数値（1、1 1 1 1など）を指定できます。上辺・右辺・下辺・左辺の順に、1〜4つの値をスペースで区切って設定することも可能です。サンプルコード以下のコード

JavaScriptのoninvalidイベントとは？基本的な使い方を実例付きで解説

oninvalidイベントとはoninvalidイベントは、<input>要素に入力された値がバリデーション（妥当性チェック）に失敗した場合に発生するイベントです。例えば、required属性が設定された入力フィールドが空のままフォームが送信されようとしたときに、このイベントを利用して「入力が必要です」といった警告メッセージを表示できます。これにより、ユーザーがフォームの入力漏れに気づきやすくなり、ユーザビリティの向上につながります。主な活用シーン必須項目が未入力のまま送信ボタンが押されたときにアラートを表示する入力形式（メールアドレスや数値など）が不正な場合にカスタムメッセージを

JavaScriptのabortイベントとは？画像読み込みの中断を検知する使い方を解説

JavaScriptの abortイベント（onabort）は、画像などのリソースの読み込みがユーザーやブラウザによって中断されたときに発生するイベントです。例えば、ページの表示中にユーザーが別のページへ移動したり、読み込みを停止した場合などに発火します。このイベントは主に <img> 要素に対して使用され、onabort 属性または addEventListener() を使ってハンドラを登録できます。画像の読み込みが途中で止まった際に、エラーメッセージを表示したり、代替処理を実行したりするのに役立ちます。 abortイベントの基本的な実装例以下のコードでは、画像の読み込みが

JavaScriptで関数の実行を停止する方法｜clearTimeout()メソッドの使い方

JavaScriptで関数の実行を停止するには、clearTimeout()メソッドを使用します。このメソッドは、setTimeout()関数によって設定されたタイマーを解除し、まだ実行されていない処理が呼び出されるのをキャンセルします。 clearTimeout()メソッドの基本 setTimeout()は、指定した時間の経過後に関数を一度だけ実行するメソッドで、呼び出し時に一意のタイマーIDを返します。clearTimeout()にこのIDを渡すことで、実行待ちの処理を取り消すことができます。サンプルコード以下のコードを実行して、JavaScriptにおけるclearTimeout()

JavaScriptのonhashchangeイベントの使い方をわかりやすく解説

URLのアンカー部分（#以降のハッシュ）が変更されると、onhashchangeイベントが発生します。このイベントを利用することで、ハッシュの変化を検知し、任意の処理を実行できます。以下のコードを実行して、JavaScriptでonhashchangeイベントを実装する方法を確認してみましょう。サンプルコード <!DOCTYPE html> <html> <body onhashchange="newFunc"> <button onclick="fu

JavaScriptのonpageshowイベントの使い方を解説

onpageshowイベントは、JavaScriptにおいてユーザーが新しいWebページに到達したとき、つまりページが表示されたタイミングで発生するイベントです。 onpageshowイベントの特徴 onpageshowイベントはonloadイベントとよく似ていますが、動作に重要な違いがあります。onloadイベントはページが最初に読み込まれたときに一度だけ発生しますが、onpageshowイベントはページが表示されるたびに発生します。そのため、ブラウザの「戻る」ボタンなどでキャッシュからページが再表示された場合でも、onpageshowイベントは確実に発火します。また、イベントオブジェクト

JavaScriptのonbeforeunloadイベントの使い方を解説

JavaScriptのonbeforeunloadイベントは、ドキュメントがアンロードされる直前（ページを離れる、タブを閉じる、別のページへ移動するなど）に発生するイベントです。このイベントを利用すると、ユーザーがページを離れようとしたタイミングで確認メッセージを表示したり、入力中のデータ保存などの処理を実行したりできます。onbeforeunloadイベントの基本onbeforeunloadイベントは、<body>要素に直接指定するか、JavaScriptからwindow.onbeforeunloadとして設定します。イベントハンドラ内で文字列を返すと、多くのブラウザではページを

JavaScriptのonpagehideイベントの使い方を徹底解説

onpagehideイベントは、ユーザーが現在のページから離れて別のページへ移動しようとしたときに発生するJavaScriptのイベントです。具体的には、次のような操作がトリガーとなります。ブラウザの「戻る」「進む」ボタンによるページ移動リンクのクリックによる別ページへの遷移ページの再読み込み（リロード）タブやウィンドウを閉じる操作 onpagehideイベントの主な活用シーンこのイベントは、ユーザーがページを離れる直前に処理を実行したい場合に便利です。代表的な用途は以下の通りです。入力途中のフォームデータを一時保存する（localStorageなど）ユーザーの離脱をアクセ

JavaScriptのonscrollイベントとは？使い方と実装サンプルを解説

onscrollイベントとは JavaScriptのonscrollイベントは、要素に割り当てられたスクロールバーが動かされた（スクロールされた）タイミングで発生するイベントです。ブラウザウィンドウ全体のスクロールだけでなく、overflow: scroll; などを指定してスクロール可能にした要素に対しても利用できます。このイベントを活用することで、「スクロール量に応じたヘッダーの表示・非表示」「無限スクロール」「スクロール連動アニメーション」など、ユーザーのスクロール操作に反応するインタラクティブな機能を実装できます。 onscrollイベントの基本的な使い方以下のサンプルコードでは

JavaScriptのonresizeイベントとは？ウィンドウサイズを取得する方法とサンプルコード

onresizeイベントの基本リサイズ（resize）イベントは、ブラウザのウィンドウサイズが変更されたときに発生するイベントです。このイベントを利用すると、ユーザーがウィンドウを拡大・縮小したタイミングを検知し、それに応じた処理を実行できます。リサイズ後のウィンドウサイズを取得するには、JavaScriptのwindow.outerWidth（ウィンドウの幅）とwindow.outerHeight（ウィンドウの高さ）プロパティを使用します。サンプルコード以下のコードを実行すると、onresizeイベントの動作を実際に確認できます。ブラウザのウィンドウをリサイズするたびに、最新のウィンドウの幅

【初心者向け】JavaScriptのdocument.titleでページタイトルを取得・変更する方法

JavaScriptでWebページのタイトル（<title>タグの内容）を操作したい場合は、document.title プロパティを使用します。document.titleとは？document.title は、現在表示しているHTMLドキュメントのタイトルを読み書きできるプロパティです。値を取得する場合： var x = document.title; のように参照することで、現在のタイトル文字列が返されます。値を変更する場合： document.title = 新しいタイトル; のように代入すると、ブラウザのタブやウィンドウに表示されるタイトルを動的に書き換えられます。サンプ

JavaScriptのonunloadイベントの使い方をわかりやすく解説

onunloadイベントとは？onunloadイベントは、ページがアンロード（別のページへの移動や再読み込み）されるタイミングで発生するイベントです。ユーザーがページを離れる瞬間に、何らかの処理を実行したい場合に利用されます。例えば、ページを閉じる際にメッセージを表示したり、ログを出力したりするといった使い方が可能です。ただし、ブラウザによってはポップアップ表示が制限されるなど、期待どおりに動作しないケースもある点に注意しましょう。onunloadイベントの実装例以下のコードでは、body要素にonunload属性を設定し、ページがアンロードされたときに関数newFunc()を呼び出しています

JavaScriptのdocument.formsプロパティでフォーム数を取得する方法

document.formsとはJavaScriptのdocument.formsプロパティは、現在のドキュメント内に存在するすべての<form>要素のコレクション（HTMLCollection）を返します。このコレクションのlengthプロパティを参照することで、ドキュメント内にいくつの<form>タグが含まれているかを簡単に取得できます。サンプルコード以下のコードでは、ページ内に2つのフォームを配置し、document.forms.lengthを使ってフォームの総数を取得して表示しています。<!DOCTYPE html> <html> &nb

JavaScriptで1〜200の乱数を返す方法｜Math.random()とMath.floor()の使い方を解説

JavaScriptで1〜200の乱数を生成するには？JavaScriptで1から200までの範囲のランダムな整数（乱数）を取得するには、Math.random()メソッドとMath.floor()メソッドを組み合わせて使用します。仕組みのポイントMath.random()は「0以上1未満」の浮動小数点数を返します。この値に200を掛けると「0以上200未満」の数値になり、Math.floor()で小数点以下を切り捨てると0〜199の整数が得られます。最後に+1を加算することで、目的である「1〜200の整数」を生成できるという流れです。サンプルコード以下のコードを実行すると、JavaScrip

JavaScriptでWebページのプロトコル（http／https）を取得する方法

現在開いているWebページが「http」なのか「https」なのかを判定したい場面は、開発中によくあります。そんなときに役立つのが、ブラウザが標準で提供している window.location オブジェクトです。window.location.protocol の基本window.location.protocol プロパティを参照すると、そのページで使用されているプロトコルを文字列として取得できます。返される値には末尾のコロン（:）が含まれるため、結果は「http:」または「https:」のようになります。たとえば、SSLで保護されたサイトでは「https:」が返され、保護されていない通常の

JavaScriptのwindow.screenオブジェクトの主なプロパティ一覧と使い方

JavaScriptのwindow.screenオブジェクトは、ユーザーの画面（ディスプレイ）に関する情報を取得するために使用されます。このオブジェクトを利用することで、画面のサイズや利用可能な領域などをプログラムから参照できます。 window.screenオブジェクトの主なプロパティ window.screenオブジェクトには、以下のようなプロパティが用意されています。 screen.width — 画面全体の幅（ピクセル数） screen.height — 画面全体の高さ（ピクセル数） screen.availWidth — タスクバーなどのシステムUIを除いた、実際に利用可能な画面の

JavaScriptのdocument.imagesプロパティでドキュメント内の画像を取得・操作する方法

JavaScriptでページ内に含まれる<img>タグの情報を取得したい場合は、document.imagesプロパティを使用します。このプロパティは、ドキュメント内のすべての画像要素を格納したHTMLCollectionを返します。 document.imagesの基本 document.images.lengthとすることで、ドキュメント内に存在する<img>タグの総数を簡単に取得できます。また、インデックス番号を指定することで、個々の画像要素へアクセスすることも可能です。サンプルコード以下のコードを実行すると、JavaScriptのdocument.image