はじめに

VScodeでJavascriptを実装していきます。
VScodeは各自でダウンロードしておいてください。

Javascriptを実装する場合、HTMLファイルが必要になってきます。
手順としては、

プロジェクト作成
HTMLファイルを作成
Javascriptファイルを作成

となります。
自分は初心者の頃、入門編といいつつ文字ばかりの記事見てて目が痛かったので、できるだけ画像メインの書式にします。
もし、Javascript勉強したての方がいらっしゃいましたら、とりあえず以下の手順通りやってみてください。
できた上で、何か不明な点があれば適宜調べていきましょう。

PC環境

MacBook Pro (M1 Max, 2021)
mac OS Monterey (ver 12.5)
SSD 2TB
RAM 32GB

プロジェクト作成

VScodeを開き、「フォルダを開く」をクリック。
「新規フォルダ」からフォルダを作り、「作成」をクリック。
フォルダの名前は適宜決めていただいて構いません。初心者の方は、とりあえず「Test01」と入力しましょう。
フォルダが作成できたら、「開く」をクリック
赤枠のボタンから、HTMLファイルを作成します。
HTMLファイル名は適宜決めていただいて構いませんが、〇〇.htmlの書き方にしてください。
初心者の方は、とりあえず「index.html」と入力しましょう。
以下のコードを入力し、キーボードの［control］+[S] (同時押し) で保存します。
赤枠のボタンから、Javascriptファイルを作成します。
Javascriptファイル名は適宜決めていただいて構いませんが、〇〇.jsの書き方にしてください。
初心者の方は、とりあえず「test.js」と入力しましょう。
以下のコードを入力し、キーボードの［control］+[S] (同時押し) で保存します。
ここで再び同じフォルダ内のhtmlファイルに戻り、以下のコードを追記し、キーボードの［control］+[S] (同時押し) で保存します。

これで実装は完了です。では動くかどうかみてみましょう。
Macの場合はFinderから、Windowsの場合はエクスプローラから、作成したフォルダを探し、htmlファイルをダブルクリックします。
ブラウザ(ここではchrome)が起動し、「Hello World」と書かれていることを確認します。

で、javascriptファイルで作成した「こんにちは」はどこで表示されるの？ということなのですが
右クリックから「検証」をクリックします。
右側にデベロッパーツールが表示されるので、「Console」をクリックします。
「こんにちは」が表示されればOKです！

終わりに

さて、Javascriptは実際に動いたでしょうか。
といいつつも、まだJavascriptを実装して動かしたという実感はあまりないかもしれません。
Javascriptは、Webブラウザ上で活躍するプログラミング言語です。
一例を挙げると、ホームページのエラー画面もJavascriptで実装されるのがほとんどです。

パスワードを入力し忘れるとこのような表示がされますよね、こういったものをJavascriptで実装していきます。
何となくイメージがついたでしょうか。
私も未熟の身ですが、これからもJavascriptを一緒に勉強していきましょう。