最新JavaScript入門講座ーWebサイトでJavaScript動かそう

これまでの記事では、JavaScriptをコンソール・ターミナルで実行してきました。
ですがJavaScriptは本来はWebブラウザで実行するためのプログラミング言語です。

JavaScriptはWEBブラウザで扱うことがほとんどですので、ブラウザでJavaScriptを動かしてこそ、JavaScriptの入り口と言っていいでしょう。

そこで、本記事ではJavaScriptをWebブラウザで実行する方法を解説していきます。

本記事のペルソナ

JavaScript初学者の方
JavaScriptをブラウザで実行する方法を知りたい方

第34回非同期処理

第36回ダイアログ

JavaScriptをWebブラウザで実行する
まとめ
文献

JavaScriptをWebブラウザで実行する

JavaScriptを許可する

まず、Webブラウザの設定を行います。
本記事の解説では、Google Chromeを前提に解説していきます。

まず、Chromeの設定を開き、サイトの設定を選択します。

次に、サイトの設定からJavaScriptの項目を選択します。

そうしましたら、JavaScriptの許可をONにします。
これで、ブラウザでJavaScriptが実行されます。

最近はデフォルトでJavaScriptが許可されている場合が多いですが、もし許可されていない場合はブラウザでJavaScriptが走りませんので、一応確認しておきましょう。

Htmlファイルの用意

続いて、JavaScriptを読み込むためのウェブページを用意します。

ここで、HTMLファイルの出番です。
今回はJavaScriptを動かすのみですので、下記程度の記述で大丈夫です。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title></title>

    </head>
    <body>

    </body>
</html>

もし、HTMLあたりのことがあまり詳しくないという方もいるかも知れませんが、心配する必要はありません。今後、少しずつ学んでいけば問題ありません。少しずつやっていきましょう。

まず、HTMLファイルには様々な要素を記述していきますが、実際は必要のないものもあります。
上記の記述がHTMLのテンプレートと言って良いでしょう。上記の記述のみで、HTMLファイルはしっかりと読み込んでくれます。

今後、HTMLファイルを作るときはこれをインデックスとして保存しておくと良いでしょう。

JavaScriptを記述

では、今回の趣旨であるJavaScriptをブラウザで動かすために記述していきます。
ウェブブラウザでJavaScriptを実行するために、HTMLファイルに記述をしていくのですが、その方法は複数あります。

JavaScriptの書き方

HTMLファイルに直接書く
JSファイルに記述し、HTMLファイルでそれを読み込む

JavaScriptを記述する方法は主に上の２つとなります。
JavaScriptの記述が長大になったり、処理が複雑になってくるとファイルを分けるといったことが多いです。ただ、ファイル数が多くなると、管理や保守することも考える必要があります。

今回はわけるほどの理由がありませんので、オーソドックスにHTMLファイルに直接記述する方式で行きましょう。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座
        </title>
        <script type="text/javascript">
            let dividendStock = ["KO","PG","XOM","T","VZ","PFE","MO","IBM"];
            for(let i = 0;i < dividendStock.length;i++){
                console.log(`配当株 ${i} : ${dividendStock[i]}`);
            }
            
        </script>
    </head>
    <body>

    </body>
</html>

先程の記述の<head></head>タグの中にJavaScriptを記述します。
HTMLファイルに直接記述するためには<script></script>タグという、HTMLタグの中に書きます。ここ以外にJavaScriptを書いてもエラーになります。

また、<body>タグの中に記述する方法もありますが、今回は省略します。