職案人

currentTargetプロパティとtargetプロパティの違い

currentTargetプロパティとtargetプロパティの違い【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【Event.currentTargetプロパティとEvent.targetプロパティの違い】Event.currentTargetプロパティ→現在イベントリスナーが実行されている要素を指します。イベントが伝播している際に、イベントリスナーを設定した要素を指します。イベントハンドラの場合は＜inputtype="button"value="button"id="xxx"＞＜script＞functionbutotnClick(event){console.log('Hello');}letbutton=document.getElementById('xxx');//...currentTargetプロパティとtargetプロパティの違い

2024/08/29 14:25

JS--発生したイベント情報の取得

発生したイベント情報の取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【Eventオブジェクトを受け取る】ターゲットとなる要素（＜input＞など）のプロパティに対してイベントハンドラを登録する場合と、addEventListenerメソッドを使ってイベントリスナーを登録した場合、イベントが発生すると登録したコールバック関数が呼び出されます。この時、一番目の引数に発生したイベントの情報が格納されたEventオブジェクトが渡されてきます。例文＜inputtype="button"value="button"id="xxx"＞＜script＞//コールバック関数functionbutotnClick(event){console.log('Hello');}letbutton=d...JS--発生したイベント情報の取得

2024/08/28 16:34

イベントハンドラの記述位置

イベントハンドラを登録するコードの記述位置に関する注意と対処方法【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【コード順序に依るエラー】例文＜script＞要素と＜input＞要素の順序を逆さにすると、エラー>>TypeError:Cannotreadproperty'addEventListener'ofnull理由は、HTMLページはファイルのダウンロードが終わったあと、HTMLページに記述されている内容をページの先頭から順にパース(解析)してDOMツリーを構築し始め、＜script＞タグを見つける度、パースを中断してjavascriptのコードを実行し始める。最初にgetElementByIdメソッドを使ってid属性が'xxx'の要素ノードを取得しようとしますが、この要素...イベントハンドラの記述位置

2024/08/26 14:58

JS--イベントリスナーの登録

イベントリスナーの登録【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【イベントリスナー】イベントリスナー（EventListener）は、プログラミングにおいて特定のイベントが発生したときに、そのイベントに応じて何らかの処理を行うための仕組みです。簡単に言えば、イベントリスナーは「何かが起きたら教えてね」というプログラムの部品です。【イベントハンドラと、イベントリスナーの関係】イベントリスナー:「ボタンがクリックされたら何かをする」と設定しておく。target.addEventListener(type（イベントの種類）,callback（イベントハンドラにコールバックを選択）[])イベントハンドラ:ボタンがクリックされたときに、実際に「何かをする」ためのコード。＜inputt...JS--イベントリスナーの登録

2024/08/21 13:58

JS--要素のプロパティにイベントハンドラを登録する

要素のプロパティにイベントハンドラを登録する【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム■DOMを使って取得した要素のプロパティに対してイベントハンドラを登録する方法について解説する。基本的な使い方はHTML要素の属性に対していイベントハンドラを登録する方法と似ていますが、JavaScriptのコードのみで実現することが出来る。【要素オブジェクトのプロパティにイベントハンドラを登録す】HTML要素の属性としてイベントハンドラを設定する場合には、要素の属性値に直接イベントハンドラを記述していました。＜inputtype="button"value="button"onclick="イベントハンドラ"＞DOMを使用するとHTMLページの中の任意の要素を要素オブジェクトとして取得で...JS--要素のプロパティにイベントハンドラを登録する

2024/08/18 11:23

JS--イベントハンドラの登録

イベントハンドラの登録【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【HTML要素の属性としてイベントハンドラを登録する】HTML要素の属性を使ってイベントハンドラを登録する方法です。例えばinput要素でマウスでクリックしたときに実行するイベントハンドラを登録するには次のように記述します。・方法＜nputtype="button"value="button"onclick="イベントハンドラ"＞onclick属性に対する値としてイベントハンドラを記述します。イベントハンドラの個所には実行するJavaScriptのコードや関数を記述します。イベントハンドラとしてJavaScriptのコードを直接記述するには次のように記述します。実行する文が一つの場合は末尾のセミコロンは省略でき...JS--イベントハンドラの登録

2024/08/16 11:15

JS--クラスの継承

クラスの継承【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【class構文とは】class構文はコンストラクタやメソッドを簡単に定義できるものです。15年のES2015(ES6)からjavaScriptに導入されるようになった。【class構文の書き方】1.クラス宣言する書式classクラス名{//コンストラクタや、メソッドを定義する}2、class式を用いる方法→class式での特徴としてクラスを再宣言（再定義）することができる。varmyClass=class{//コンストラクタやメソッドを定義する}【コンストラクタを作る】コンストラクタ、つまりクラスの初期化をconstructorメソッドで行うclassUser{//インスタンスのプロパティ設定と初期化construct...JS--クラスの継承

2024/08/12 16:10

JS--オブジェクト指向のclassを理解する

オブジェクト指向のclassを理解する【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【classとは】JavaScriptのclassは、オブジェクト指向プログラミング（OOP）の概念を実現するための構文です。クラスは、同じプロパティやメソッドを持つオブジェクトの設計図となるものです。classキーワードを使用してクラスを宣言し、そのクラス内でプロパティやメソッドを定義します。クラス内で定義されたメソッドは、そのクラスから作成されたオブジェクト（インスタンス）で使用することができます。基本構造classMyClass{constructor(){//コンストラクタ:インスタンスを作成する際に実行されるメソッド//インスタンス固有の初期化処理を行う}method1(){//メソッ...JS--オブジェクト指向のclassを理解する

2024/08/09 14:35

JS--ドキュメントに文字を書く

ドキュメントに文字を書く【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ドキュメントに文字列を書き込む】Documentオブジェクトのwriteメソッドは、ドキュメントに対して文字列を書き込みます。書式：document.write(string)引数に指定した文字列をドキュメントに対して書き込みます。書き込まれた文字列はHTMLコードとして扱われます。サンプルブラウザを立ち上げる<script>要素の下にHelloが書き込まれていることが確認できます。このように簡単にドキュメントに対して文字列の形式でHTMLコードを書き込むことができますが、現在HTMLに関する仕様を定めているHTMLLivingstandardではこのメソッドの使用について推奨はしていません。Documen...JS--ドキュメントに文字を書く

2024/08/07 14:23

JS--複数のノードをまとめて追加

複数のノードをまとめて追加【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【DocumentFragmentオブジェクトとは】DocumentFragmentオブジェクトは、JavaScriptで使われる特別なオブジェクトで、親ノードを持たない軽量なドキュメントの一部を表します。これを使うと、複数のノードを一時的にまとめて操作し、最終的に一度にDOMツリーに追加することができます。【DocumentFragmentオブジェクトを作成する】最初に空のDocumentFragmentオブジェクトを作成します。DocumentオブジェクトのcreateDocumentFragmentメソッドを使います。書式:document.createDocumentFragment()実際に作成す...JS--複数のノードをまとめて追加

2024/08/06 16:23

JS--現在処理を実行しているscript要素を取得

現在処理を実行しているscript要素を取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【currentScriptプロパティの使い方】DocumentオブジェクトのcurrentScriptプロパティを参照すると現在実行している<script>要素を取得します。書式；document.currentScriptサンプルこのHTMLページをブラウザで表示するとコンソールには次のように出力されます＜script＞letelement=document.currentScript;console.log(element);＜/script＞ブラウザを立ち上げるJS--現在処理を実行しているscript要素を取得

2024/08/04 14:52

HTMLを表す文字列からノードを作成し指定の位置に追加

HTMLを表す文字列からノードを作成し指定の位置に追加【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ノードを指定の位置に追加する】ElementオブジェクトのinsertAdjacentHTMLメソッドを使うと指定した文字列からノードを作成し追加することができます。書式：element.insertAdjacentHTML(position,text)2番目の引数に指定した文字列をHTML文として解析し、HTML文からノードを作成します。作成したノードを1番目の引数で指定した位置に追加します。1番目の引数で指定する位置2番目の引数にはHTMLとして解析可能な文字列を指定例文：'＜pclass="msg"＞Hello＜/p＞'サンプル・ブラウザを立ち上げる「前のノードを追加」ボ...HTMLを表す文字列からノードを作成し指定の位置に追加

2024/08/03 15:24

JS--ノードの削除

ノードの削除【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ノード削除方法】削除方法には、ChildNodeオブジェクトのremoveメソッドを使うか、NodeオブジェクトのremoveChildメソッドを使うかです。【removeメソッド】removeメソッドは指定のノードを削除します。書式：childnode.remove()例文id属性がxxxのノードを削除する場合letchildnode=document.getElementById('xxx');childnode.remove();【removeChildメソッド】NodeオブジェクトのremoveChildメソッドはノードを削除します。書式：parentnode.removeChild(childnode)1番目...JS--ノードの削除

2024/08/02 15:12

JS--ノードの置換

ノードの置換【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ノードを別のノードに置き換える方法】1.ChildNodeオブジェクトのreplaceWithメソッドを使ってノードを別のノードに置き換える方法書式；childnode.replaceWith(node[,node,...])引数には置き換えるNodeオブジェクトまたはDOMStringオブジェクトを指定します。DOMStringオブジェクトを指定した場合はテキストノードに自動的に変換されて追加されます。複数のノードを指定した場合は、対象のノードを複数のノードと置き換えます。2.NodeオブジェクトのreplaceChildメソッドを使ってノードを別のノードに置き換える方法書式：parentnode.replaceCh...JS--ノードの置換

2024/08/01 15:54