1.事前知識
事前知識として、上記リンクの内容が必要です。
2.JavaScriptについて
JavaScript とは、Webページで複雑な処理を可能にするプログラミング言語です。
JavaScript には インラインスクリプト , 外部スクリプト , イベントハンドラ という書き方があります。それぞれ以下の通りです。
インラインスクリプト
<script type="text/javascript">
//ここにJavaScriptを書きます。
</script>
外部スクリプト
<script type="text/javascript" src="test.js">//外部ファイルにJavaScriptを書きます。</script>
イベントハンドラ
<input type="button" onclick="ここにJavaScriptを書きます。">
3.記述例
- インラインスクリプト
test1.html
<!DOCTYPE html>
<html>
<head>
<!-- 付加情報 -->
<!-- タイトル -->
<title>JavaScriptの説明</title>
<!-- インラインスクリプトの場合は<head>内に書く -->
<script type="text/javascript">
alert('Hello');
</script>
<!-- 文字コードの指定 -->
<meta charset="utf-8" />
</head>
<body>
<!-- コンテンツ -->
</body>
</html>
- 外部スクリプト
test2.html
<!DOCTYPE html>
<html>
<head>
<!-- 付加情報 -->
<!-- タイトル -->
<title>JavaScriptの説明</title>
<!-- 外部スクリプトの場合は<head>内に書く -->
<script src="test.js"></script>
<!-- 文字コードの指定 -->
<meta charset="utf-8" />
</head>
<body>
<!-- コンテンツ -->
</body>
</html>
test.js
alert("Hello!");
- イベントハンドラ
test3.html
<!DOCTYPE html>
<html>
<head>
<!-- 付加情報 -->
<!-- タイトル -->
<title>JavaScriptの説明</title>
<!-- 文字コードの指定 -->
<meta charset="utf-8" />
</head>
<body>
<!-- コンテンツ -->
<!-- イベントハンドラは<input>内に書く -->
<input type="button" value="JavaScript" onclick="alert('Hello');">
</body>
</html>
中身の文をコピーして、文字コードは UTF-8 を指定し、ファイル名を test1.html,test2.html,test.js,test3.html でデスクトップに保存するとブラウザではこうなります↓↓
-
test1.html
-
test2.html , test.js
-
test3.html
画像のようになれば成功です。
4.GitHub
GitHubにソースコードを公開しています。