JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptのaltKeyマウスイベントプロパティとは？役割と使い方を解説

    JavaScriptにおけるaltKeyマウスイベントプロパティは、マウスボタンがクリックされた瞬間に、Altキー（Macの場合はOptionキー）が押されていたかどうかを判定するための読み取り専用プロパティです。 altKeyプロパティの基本 altKeyプロパティは、イベント発生時にAltキーが押されていればtrue、押されていなければfalseを返します。これを活用することで、「Altキー + クリック」のような特定の操作に対して独自の処理を実装できます。 なお、MouseEventにはaltKey以外にも、修飾キーの押下状態を取得できる類似のプロパティが用意されています。 ctrlK

  2. JavaScriptで要素にコンテンツが貼り付けられたときに発生するイベントは？onpasteイベントの使い方を解説

    onpasteイベントとはJavaScriptのonpasteイベントは、ユーザーが要素にコンテンツを貼り付けた（ペーストした）ときに発生するイベントです。テキスト入力欄などで、クリップボードからデータが貼り付けられる瞬間を検知したい場合に使用します。主な活用シーンonpasteイベントは、以下のような場面で役立ちます。貼り付けられたテキストの形式チェックやバリデーション特定の文字や記号の入力制限貼り付け内容の自動整形・加工サンプルコード次のコードを実行すると、onpasteイベントの基本的な動作を確認できます。テキストボックスに何かを貼り付けると、メッセージが表示されます。<!DOCT

  3. JavaScriptで空の配列[]を数値に変換する方法

    JavaScriptで値を数値型に変換するには、Number()メソッドを使用します。空の配列 [] を数値に変換した場合、その結果は 0 になります。これは、空の配列が文字列に変換されると空文字列（）になり、さらにその空文字列が数値変換されると 0 と評価されるためです。サンプルコード以下のコードを実行すると、JavaScriptで [] を数値に変換する動作を確認できます。<!DOCTYPE html> <html>    <body>       <p>Convert [] to Numbe

  4. JavaScriptでInfinity（無限大）をNumber型に変換する方法

    JavaScriptにおけるInfinityとNumberへの変換 JavaScriptでは、Infinity（無限大）はグローバルプロパティの一つであり、すでにNumber型の値として扱われています。ただし、文字列など他の形式の値と組み合わせて扱う場合や、明示的に数値へ変換したい場合には、Number()メソッドを使用します。 Number()メソッドにInfinityを渡すと、結果としてそのままInfinityが返されます。以下のサンプルコードを実行して、JavaScriptでInfinityをNumberに変換する動作を確認してみましょう。 サンプルコード <!DOCTYPE h

  5. JavaScriptでNaNをブール値（Boolean）に変換する方法

    JavaScriptでは、Boolean()メソッドを使うことで、任意の値をブール値（true / false）に変換できます。NaN（Not a Number）も例外ではなく、このメソッドで簡単に変換可能です。NaNをブール値に変換するとどうなる？重要なポイントとして、NaNはJavaScriptにおける「falsy（偽値）」のひとつです。そのため、Boolean()で変換すると、必ず false が返されます。サンプルコード以下のコードを実行すると、NaNがブール値へ変換される様子を確認できます。<!DOCTYPE html> <html>    

  6. JavaScriptで境界線画像がボーダーボックスの外側に広がる量を設定する方法

    概要境界線画像（border image）が要素のボーダーボックスの外側へはみ出す量を設定するには、border-image-outset プロパティを使用します。このプロパティで「外側のエッジ（outside edges）」の値を指定することで、境界線画像をボーダーボックスから外側へどれだけオフセットさせるかを制御できます。ポイント値は1〜4個指定でき、それぞれ上・右・下・左の辺に対応します。値を1つだけ指定した場合は、4辺すべてに同じ値が適用されます。JavaScriptからは element.style.borderImageOutset に値を代入することで動的に変更できます。サンプル

  7. JavaScriptのonresetイベントとは？フォームリセット時の処理を実装する方法

    onresetイベントとはJavaScriptのonresetイベントは、フォーム内の「リセット」ボタンがクリックされ、入力内容が初期化されるタイミングで発生するイベントです。このイベントを利用すると、ユーザーがフォームをリセットした瞬間に、確認メッセージの表示やログの記録など、任意の処理を実行できます。onresetイベントの基本的な使い方form要素にonreset属性を設定し、イベント発生時に呼び出したい関数名を指定します。以下は、フォームがリセットされるとアラートでメッセージを表示するシンプルな例です。サンプルコード<!DOCTYPE html><html>&n

  8. JavaScriptのonsearchイベントとは？使い方と実装例をわかりやすく解説

    onsearchイベントとはonsearchイベントは、検索機能を実装する際に便利なイベントです。ユーザーが<input>要素内で「ENTER」キーを押したとき、またはクリア用の「x」キーを押したときに発生します。このイベントは検索専用の入力欄で使用するため、<input>要素のtype属性は「search」に設定します。対応ブラウザの注意点onsearchイベントは、Internet Explorer、Firefox、Operaではサポートされていない点に注意が必要です。これらのブラウザに対応したい場合は、keydownイベントやform要素のsubmitイベントを組

  9. JavaScriptで要素がドラッグされている間に発生するイベントとは？ondragイベントの使い方を解説

    JavaScriptで要素をドラッグする際に使用するのが ondrag イベントです。このイベントは、要素が実際にドラッグされている間に繰り返し発生します。ドラッグ＆ドロップ関連の主なイベントHTML5のドラッグ＆ドロップAPIには、ondrag以外にも以下のようなイベントがあります。用途に応じて使い分けることで、より柔軟な操作を実現できます。dragstart：ドラッグ操作が開始された瞬間に発生drag：要素がドラッグされている間、継続的に発生dragover：ドラッグ中の要素がドロップ対象の上にあるときに発生drop：要素がドロップされたときに発生dragend：ドラッグ操作が終了したとき

  10. JavaScriptでnullを数値（Number）に変換する方法

    JavaScriptでnullを数値に変換するにはJavaScriptでは、Number()メソッドを使用することで、nullを数値に変換できます。Number(null)の戻り値は「0」になります。これは、JavaScriptの仕様上、nullが「意図的に値が存在しない」ことを示す特別な値であり、数値型へ変換する際には0として扱われるためです。サンプルコード以下のコードを実行して、nullがどのように数値へ変換されるか確認してみましょう。<!DOCTYPE html> <html>    <body>     &nb

  11. 【JavaScript】要素のドラッグ開始時に発生するイベント「ondragstart」とは？使い方を解説

    ondragstartイベントとは ondragstartイベントは、ユーザーが要素のドラッグ操作を開始した瞬間に発生するJavaScriptのイベントです。これはHTML5のドラッグ＆ドロップAPIの一部であり、draggable=true属性を設定した要素に対して利用できます。 このイベントは、ドラッグされるデータをdataTransferオブジェクトに格納する際によく使用されます。dataTransferオブジェクトに保存したデータは、ドロップ先の要素側でgetData()メソッドを使って取り出すことができます。 以下のコードを実行して、ondragstartイベントの実装方法を実際に確

  12. JavaScriptでボックスにドロップシャドウを追加する方法

    ボックス要素にドロップシャドウ（影）を追加するには、JavaScriptの boxShadow プロパティを使用します。このプロパティを使えば、影の位置（オフセット）、ぼかしの強さ、色などを自由に設定できます。 boxShadowプロパティの基本 boxShadow プロパティは、以下の順序で値を指定します。 水平オフセット： 影を右方向へずらす距離（負の値を指定すると左方向へ移動） 垂直オフセット： 影を下方向へずらす距離（負の値を指定すると上方向へ移動） ぼかし半径： 影のぼかし具合（省略可能） 色： 影の色 サンプルコード 以下のコードを実行し、ボタンをクリックすると、ボックスにドロ

  13. JavaScriptで要素のドラッグ完了時に発生するイベントとは？ondragendの使い方を解説

    ondragendイベントとはJavaScriptのondragendイベントは、要素のドラッグ操作が完全に終了したときに発生します。ドラッグ＆ドロップの一連の流れの中で、ユーザーがマウスボタンを離してドラッグが完了した瞬間にトリガーされるイベントです。なお、ドラッグ関連のイベントには、ドラッグ開始時に発生するondragstart、ドロップ対象の上に要素があるときに発生するondragover、実際にドロップされたときに発生するondropなどがあり、これらと組み合わせて使うことで直感的なドラッグ＆ドロップ操作を実現できます。実装例以下のコードを実行すると、JavaScriptでondrag

  14. JavaScriptでテーブルのキャプション位置を設定する方法

    HTMLテーブルのキャプション（表題）の位置を設定するには、JavaScriptの captionSide プロパティを使用します。このプロパティに「top」や「bottom」などの値を指定することで、キャプションを表の上部または下部に自由に配置できます。以下のコードを実行して、テーブルのキャプション位置を変更する方法を確認してみましょう。サンプルコード<!DOCTYPE html> <html> <body> <table id = newTable border = 2> <caption id =

  15. JavaScriptでフロート要素を基準にした要素の位置を操作する方法（clearプロパティの使い方）

    JavaScriptでフロート（浮動）オブジェクトを基準にした要素の位置を取得・設定するには、clearプロパティを使用します。このプロパティは、要素が左右どちら側のフロート要素との回り込みを解除するかを指定するもので、CSSのclearプロパティと同じ役割をJavaScriptから動的に操作できます。clearプロパティで指定できる値left … 左側に配置されたフロート要素との回り込みを解除しますright … 右側に配置されたフロート要素との回り込みを解除しますboth … 左右どちらのフロート要素とも回り込みを解除しますnone … 回り込みを解除しません（初期値）サンプルコード以下の

  16. JavaScriptでHTML属性の値を変更する方法【初心者向けサンプルコード付き】

    JavaScriptでHTML要素の属性（attribute）の値を変更するには、まずgetElementById()などのメソッドで対象の要素を取得し、その属性プロパティに新しい値を代入します。あるいは、setAttribute()メソッドを使う方法もあります。 基本的なサンプルコード 次の例では、画像要素のwidth属性の値を「200」から「250」に変更しています。 <!DOCTYPE html> <html>    <body>       <img id="HTML5" s

  17. JavaScriptのonblurイベントとは？使い方と実装例をわかりやすく解説

    JavaScriptのonblurイベントは、要素がフォーカスを失ったタイミングで発生するイベントです。例えば、テキスト入力欄からカーソル（フォーカス）が外れた瞬間に、特定の処理を実行したい場合などに活用されます。 onblurイベントが発生する場面 onblurイベントは、主に以下のようなケースで発生します。 ユーザーが入力フィールドから別の場所をクリックしたとき Tabキーなどでフォーカスが次の要素へ移動したとき ウィンドウやフレームがアクティブでなくなったとき フォームの入力チェックやバリデーション処理では特によく使われるイベントなので、覚えておくと便利です。 onblurイベントの

  18. JavaScriptのonfocusイベントとは？基本の使い方をサンプルコード付きで解説

    onfocusイベントは、要素がフォーカスを受け取った瞬間に発生するイベントです。テキストボックスやフォーム要素をマウスでクリックしたとき、あるいはTabキーでカーソルが移動してきたときなどに発火します。ユーザーが入力を始めるタイミングを検知できるため、入力欄のハイライト表示やヒントテキストの表示など、フォーム操作を快適にするUIでよく活用されています。 onfocusイベントの実装例 以下は、テキスト入力欄にフォーカスが当たったときに、その背景色を青色に変更するシンプルなサンプルです。実際にコードを実行して、入力欄をクリックしてみてください。 サンプルコード <!DOCTYPE htm

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

    onfocusinイベントは、要素がフォーカスを取得しようとするタイミングで発生するイベントです。テキストボックスやボタンなど、ユーザーが操作対象を選択した瞬間に何らかの処理を実行したい場合に活用できます。 以下のサンプルコードでは、テキスト入力欄にフォーカスが当たると、その背景色が青色に変化するように実装しています。実際にブラウザで動作を確認しながら、onfocusinイベントの挙動を学んでみましょう。 サンプルコード <!DOCTYPE html> <html>    <body>    &nb

  20. JavaScript HTML DOMのnodeNameプロパティとは？使い方とサンプルコードを解説

    JavaScriptにおけるnodeNameプロパティは、ノードの名前（タグ名）を取得するために使用されるプロパティです。HTML要素ノードの場合、要素のタグ名が大文字で返されます。例えば、<h1>要素であれば「H1」、<p>要素であれば「P」という文字列が返ります。nodeNameプロパティの基本仕様読み取り専用： 値を取得することはできますが、設定することはできません。戻り値： 要素ノードの場合はタグ名（大文字）、テキストノードの場合は「#text」、ドキュメントノードの場合は「#document」が返されます。実装例以下のコードを実行すると、JavaScriptで

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:235/297  20-コンピューター/Page Goto:1 229 230 231 232 233 234 235 236 237 238 239 240 241