JavaScriptを書く方法は、大きく分けてHTMLファイル内に書く方法とHTMLファイルの外部から読み込む方法があります。今回は、HTMLファイル内に書く2つの方法を説明します。

<script>要素に書く

まず、HTMLファイル内に書く方法の一つ目、<script>要素内に書く方法です。

ページに入るとこんにちは

ページに入るとこんにちは

たとえば次のように書いて、そのファイルをブラウザで開くと、開いたとたんに「こんにちは」というダイアログが現れます。
<html> 
<head></head> 
<script type="text/javascript">
     //ここにスクリプトを書きます
</script> 
<body> 
ここにページのコンテンツ 
</body> 
</html>

次に、HTMLファイル内の<script>要素の中にスクリプトを書きます。
<script type="text/javascript">
alert("こんにちは")
</script>  

でも、いきなりページに入ってダイアログが出たのでは迷惑です。

サンプルはこちら。ボタンをクリックするとダイアログを表示します。

サンプルはこちら。ボタンをクリックするとダイアログを表示します。

そこで前出のように、ボタンをクリックしてからダイアログが開くようにコードを書き換えてみましょう。たとえばこうなります。

 

<button id="btn">
押してね
</button>

<script type="text/javascript">
	btn = document.getElementById("btn");
	btn.onclick = function(){
		//ここにクリック時のコードを書きます
		alert('こんにちは');
	}
</script>

では、分解してみましょう。まず、ボタンのHTMLを見てください。
<button id="btn">
押してね
</button>

これはボタンです。id名は「btn」です。ただ、このボタンをクリックしても何も起こりません。そこで、JavaScriptです。まず、<script>要素内のコードの1行目を見てください。
  btn = document.getElementById("btn");

これでid名が「btn」であるさきほどのボタン要素が、「btn」という名前でJavaScriptから扱うことができるようになりました。

「btn」という名前は「btn1」でも「buttonA」でも構いません。これは、JavaScriptで扱うデータ(ここではボタン要素)を入れて名前をつけたもので「変数」と言います。「変数」については、後日また説明します。

これでボタン要素は、btnという名前で扱うことができるようになりました。さて次の行がポイントです。
btn.onclick = function(){
	//ここにクリック時のコードを書きます
	alert('こんにちは');
	}

「btn.onclick」とあります。また、「onclick」が出てきました。 「onclick」は「クリックすると」という意味です。ここでは「クリックすると」「 function(){.....}」が実行されます。

「function」は初めて出てきましたね。 これも後日あらためて説明しますが「関数」と言って、JavaScriptの命令をいくつもまとめて書いて置く場所です。いくつもの命令を「{...}」の中に書くと、その一式の命令群をまとめて実行させることができます。ここでは、そのfunctionの中に「alert('こんにちは');」を書いています。

さて、どうなりますか?

そうです。ボタンをクリックすると、alertダイアログで'こんにちは'と表示されるはずです。試してみましょう。ボタンクリックで、ダイアログが出ましたね。