HTML内でのjavascriptコードの記述

javascriptをHTML文書内で使用する方法についてまとめます。

HTML内にjavascriptを書く方法は、次の書き方があります。

1.scriptタグ内に記述する

2.外部ファイル化したjavascriptを読み込む

3.HTMLタグにイベントハンドラとして記述する

次に、それぞれ具体的にどのように書くのかを確かめつつ、書いてみます。

headタグもしくはbodyタグ内にscriptタグを書いてその中に記述する方法です。
次のようなHTMLファイルを作成し、ブラウザからアクセスしてみます。

[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>

</head>
<body>

</body>
</html>
[/html]

アクセスした結果、[js]<script></script>[/js]タグ内に記述したjavascriptが動作し、アラートが表示されます。

[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>

</head>
<body>

</body>
</html>
[/html]

外部ファイルのjavascriptには、上記同様に次のように書きます。
ファイル名はmain.jsとして作成し、HTMLファイルと同じ場所に置きます。

[js]
alert(‘test2’);
[/js]

HTMLファイルにアクセスすると、ダイアログが表示されます。

src属性を書いた場合は、[js]<script></script>[/js]タグ内に記述したjavascriptは無効になります。

外部ファイル化した場合、javascriptのプログラムファイルがブラウザにキャッシュされるので注意が必要です。(注：ブラウザ標準の動作として)

src属性には外部サーバのjavascriptを読み込むことも可能です。

HTMLタグ属性にjavascriptのプログラムを直接記述することができます。

下記の簡単なサンプルを書いて、ブラウザでアクセスしてみます。

[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>

</head>
<body>

<div class="test_div" onClick="alert(‘test3’);">testABC</div>

</body>
</html>
[/html]

上記のサンプルでは、ブラウザにアクセスした段階では、特になにも起きません。

画面上に「testABC」という文字列が表示されるので、その文字列をクリックしたタイミングでアラートが表示されます。

この場合の、onClickはイベントハンドラと呼ばれており、クリックした場合の処理を走らせることができます。
この他にもイベントハンドラには種類があるので、目的に合わせてプログラムを実装します。

また、alertメソッドのみでサンプルを書きましたが、実際にはここに外部ファイル等に定義したユーザ関数を割り当て、
その関数内でロジックを実装していく形が多いです。

実際のプロダクト開発では、HTMLに直接記述する場面は多くはなく、外部ファイル化したjavascriptを利用する、
または最近ではjavascriptのフレームワークが多数あるので、その機構に沿ってロジックを組み立てる場合が多いです。

例としては、React、Vue、Next、Angular等々…。多数のフレームワークが存在します。
このブログでもjavascriptの基本的な部分を抑えた後、各種フレームワークに触れていきます。