javascriptを実行する方法 – javascript 初級編

以下はHTMLとJavaScriptを組み合わせたサンプルコードです。この例では、HTMLの「button」要素がクリックされたときに、JavaScriptの「alert」メソッドが呼び出されます。

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript Example</title>
	<script>
		function showMessage() {
			alert("Hello World!");
		}
	</script>
</head>
<body>
	<h1>JavaScript Example</h1>
	<button onclick="showMessage()">Click me!</button>
</body>
</html>

この例では、JavaScriptの「alert」メソッドを使用して、メッセージボックスに “Hello World!”というメッセージを表示しています。HTMLの「button」要素には、JavaScriptの「showMessage」関数がクリックイベントのハンドラとして割り当てられています。ボタンがクリックされたときに、この関数が呼び出されます。

以下に上記HTMLの実行サンプルを表示

JavaScript Example

外部ファイルを使用する場合

こちらはHTML上にmyFunction()を定義せず、外部ファイルで定義したJavaScriptの関数を呼び出す方法です。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>JavaScriptの外部ファイルの例</title>
	<script src="example.js"></script>
</head>
<body>

	<h1>JavaScriptの外部ファイルの例</h1>
	
	<button onclick="helloWorld()">Hello Worldを表示</button>

</body>
</html>

また、上記のHTMLコードに対応するJavaScriptファイルexample.jsの例を以下に示します。helloWorld()関数が定義されています。

function helloWorld() {
	alert("Hello World!");
}