javascriptをHTMLタグ内に書く – propansystem プロパンシステム

前回の記事はHTMLソース内にjavascriptを書く方法と、外部ファイルにjavascriptを書く方法を試してみました。

また、HTMLソース内にjavascriptを書く方法は、HTMLソースのタグ内に書く方法もあります。

簡単なサンプルを書いてみました。

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script>
//サンプル用関数(ボタン)
function alert_button()
{
	alert('test BUTTON!');
}

//サンプル用関数(リンク)
function alert_link()
{
	alert('test LINK !');
}
</script>

</head>
<body>

<button onclick="alert('test');">タグ内に直接書く</button>
<button onclick="alert_button();">タグ内から関数を呼ぶ</button>
<div onclick="alert_link();">文字に対してクリックイベントを付与</div>

</body>
</html>

ボタンが2個表示あり、HTMLソース内の button に対して、onclickイベントを付与しています。
このイベントはボタンを押したタイミングで発動されるもので、ユーザの動作に応じて命令が実行されます。
(他にもイベントの種類は多数あるので、別途まとめる予定です)

1つ目のボタンにでjavascriptのalert関数をそのまま呼び出していますが、2つ目のボタンには、HTMLのhead内に記述した独自の関数を呼び出しています。

また、ボタンの下の文字列に対しても、クリックした独自の関数を呼ぶようにイベントを付与しています。

どの方法でも動作には変わりはないですが、実装する場面で書き分けてプログラムします。

コメントを残す