VscodeにNode.jsを組み込む
【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
node,js:v20.18.0
参照サイト
Visual Studio CodeとNode.jsの導入について
Node.jsはインストールされているものとする
【VSCodeにNode.js用のパッケージ入れる】
1.eslintを入れる。
Javascriptの書き方を事前にチェックしてくれる品質管理ツールです
2.Node.js Modulesを入れる
Node.jsの機能をインテリセンスを自動的に表示してくれます。
Node.js
【Node.jsとは】
Node.jsは、一般的なJavaScriptでサーバーサイドの処理を制御できるように作られたもので大量のアクセスを高速に捌くことができる特徴があります。
以前、JavaScriptはユーザーのブラウザ上で動作し、動的なWebページを構築するために使われていました。そして、サーバーサイドではPHPやRubyを使って開発するのが一般的でした。
しかし、Node.jsの登場により、サーバー上でもJavaScriptを実行できるようになり、開発者はフロントエンドとバックエンドの両方をJavaScriptで書けるようになり、またモジュール機能によりさまざまな機能を簡単に組み込めるパッケージが公表される様になった。
【Node.js＝ランタイム環境】
ランタイム環境は、プログラムが動作するために必要な機能やリソースを提供する環境です。例えば、Node.jsは、JavaScriptがサーバーサイドで動作するために必要なAPIやライブラリを提供しています。これにより、JavaScriptがネットワーク通信やファイルの読み書きを簡単に扱えるようになり、サーバーサイドの処理が可能になります。
つまり、JavaScriptはNode.jsを使って、OSにアクセスして、ファイル操作、ネット通信が出来る様になる。
【ダウンロード】
Windows環境にNode.jsをインストールする方法
リンクをクリックすると、下図のNode.jsのホームページが表示される。
・「ダウンロード」をクリックする
上記のファイルがダンロードされる。
【インストール】
ダウンロードされたファイルをクリックすると、インストールが開始されされたら、下図が表示される
Nextボタンをクリックする
2，下図の画面が表示される
ライセンに同意のチェックを入れて、Nextボタンをクリックする
3、下図の画面が表示される
任意のフォルダーを洗濯したい場合
changeボタンを押す
任意のフォルダを作り、それを選んだら、OKボタンをクリックすると、
下図のような画面が表示される。
OKボタンをクリックする
下図のような画面が表示される
Nextボタンをクリックする
4，下図の画面が表示される
Nextボタンを押す
5，下図の画面が表示される
Nextボタンをクリックする
6、インストール画面が表示される
Installボタンをクリックする
7、下図の画面が表示される
はいを選択し、クリックする
8，インストールの構築が始まる
9、完了
Finishボタンを押す
スタートアップに、Node.jsアイコンが表示される
以上で終わり、
resize イベント
【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム
【resize イベント】
resize イベントはブラウザのウィンドウサイズが変更されたときに発生するイベントです。
onresize プロパティに対してイベントハンドラを設定したり、 addEventListener メソッドの引数として resize を指定してイベントリスナーを登録できます。
【resizeイベントの使い方】
resize イベントはページを表示しているブラウザのウィンドウサイズが変更されたときに発生するイベントです。
【onresize プロパティ】
window オブジェクトのプロパティにイベントハンドラを登録する場合
イベントハンドラには、無名関数、アロー関数、コールバック関数は使える。
【イベントリスナーを登録する場合】
addEventListener メソッドの一番目の引数に、'resize' を指定する。二番目には、イベントハンドラを指定する。
【イベントハンドラに引数：eventを使った場合】
イベントが発生してイベントハンドラやイベントリスナーが呼び出されるとき、引数として発生したイベントに関する情報が含まれる Event オブジェクトが渡されてきます。 load イベントの場合は UIEvent オブジェクトが渡されてきます。
サンプル
ブラウザを起動
ウインドウのサイズを変更
【onresize プロパティと body タグの onresize 属性の両方にイベントハンドラを登録した場合】
サンプルコード
以上
beforeunload イベント
【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム
【beforeunloadイベントとは】
→HTML ページが現在のページから他のページへ遷移する直前に発生するイベントです。
遷移前のため、確認ダイアログを表示してページの遷移をキャンセルすることができます。
onbeforeunload プロパティに対してイベントハンドラを設定したり、 addEventListener メソッドの引数として beforeunload を指定してイベントリスナーを登録できます。
【beforeunloadイベントの使い方】
beforeunload イベントは HTML ページが現在のページから他のページへ遷移する直前に発生するイベントです。
【window.onbeforeunload プロパティにイベントハンドラを登録した場合】
プロパティを使用する場合は、イベントハンドラに無名関数またはアロー関数式を使って記述することもできます。
Event オブジェクトの preventDefault メソッドはブラウザのデフォルトの処理(例えばリンクをクリックしたらそのリンク先へページが遷移するなど)をキャンセルするためのメソッドです。
Event オブジェクトの returnValue プロパティに何らかの値を設定することで確認ダイアログが表示されます。
【イベントリスナーを登録する場合】
addEventListener メソッドの最初の引数に'beforeunload' を指定する。
サンプルコード
ブラウザを立ち上げる
リンクをクリックする
「このページを離れる」ボタンをクリックする
【DOMContentLoadedイベントとloadイベントの違い】
HTML ページのダウンロードが完了したあと、 HTML を解析して DOM ツリーを作成します。この時点で DOMContentLoaded イベントが発生しますが、この時点はまだページに含まれる画像やスタイルシートの読み込みが完了しているかどうかは分かりません。
画像などのすべてのリソースの読み込みが完了すると load イベントが発生します。
DOMContentLoadedイベント
【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム
【DOMContentLoaded イベントとは】
DOMContentLoaded イベントは HTML ページの読み込みが完了し HTML のパース(解析)が完了して DOM ツリーの構築が完了した時点で発生するイベントです。このイベントは addEventListener メソッドの引数として DOMContentLoaded を指定してイベントリスナーを登録してのみ利用できます。
【DOMContentLoadedイベントの使い方】
DOMContentLoaded イベントは HTML ページの読み込みが完了し HTML のパース(解析)が完了して DOM ツリーの構築が完了した時点で発生するイベントです。
【イベントリスナーを登録する場合】
DOMContentLoaded イベントについては属性やプロパティを利用した方法は使用出来ない。
【引数に Event が使われていたら】
サンプルコード
ブラウザを起動する
【DOMContentLoadedイベントとloadイベントの違い】
HTML ページのダウンロードが完了したあと、 HTML を解析して DOM ツリーを作成します。
この時点で DOMContentLoaded イベントが発生しますが、この時点はまだページに含まれる画像やスタイルシートの読み込みが完了しているかどうかは分かりません。画像などのすべてのリソースの読み込みが完了すると load イベントが発生します。
