【JavaScript基礎01】イベント・変数の使い方

#はじめに
JS(JavaScriptの略)の基礎のプログラムについてPCの中のプログラムを整理がてら紹介します。今回は「イベント・変数の使い方」についてです。ただし、今回は不正な値を検知するなどは行っていないので、そのまま検証する場合はローカル環境で使ってください。また、このプラグラムはよろしくない点も多数あるのでご了承ください。

#実際の動作するデモ動画
デモ動画をYouTubeで公開しています。どのような挙動で動くのか見たい方はそちらで見てください。
デモ動画は[こちら](https://www.youtube.com/watch?v=RzDA_yCHmRg&feature=youtu.be)

#プログラム
今回は`hoge01.html`から`hoge01.js`を呼び出して実行しています。

```html:hoge01.html
<html>
	<head>
		<meta charset="utf-8">
		<title>イベント・変数の使い方</title>
		<script type="text/javascript" src="hoge01.js"></script>
	</head>

	<body >
		<h1>イベント・変数の使い方</h1>
		
		<a href="#"  onmouseover="changeBackgroundColor(1)" onmouseout="changeBackgroundColor(0)">
			<img src="icon.png" style="max-height:100px;width:auto;border:red solid 1px;background:white;">
		</a>
		<form>
			<input type="button" value="挨拶" onclick="greeting()" >
			<input type="button" value="更新日を表示" onclick="rolloverDate()" >
			<br><br>
			<table >
				<tr>
					<td>数字を入力して計算(足し算編):</td>
					<td><input type="button" value="変数" onclick="addNumber()"></td>
				</tr>
				<tr>
					<td>数字を入力して計算(引き算編):</td>
					<td><input type="button" value="変数" onclick="subtractionNumber()"></td>
				</tr>
				<tr>
					<td>高さと半径から...</td>
					<td><input type="button" value="計算"  onclick="calculation()"></td>
				</tr>
			</table>
		</form>
	</body>
</html>
```


```js:hoge01.js
var checknumber = 0;
var pi =  3.14159;

function changeBackgroundColor(_checknumber){
	checknumber = _checknumber;
	if(checknumber==1){
		document.bgColor = "#ff0000";
		document.fgColor = "#ffffff";
	}else{
		document.bgColor = "#ffffff";
		document.fgColor = "#000000";
	}
}

function greeting(){
	var user_name;
	user_name = prompt('空白を入れずに、お名前を入力してください');
	user_name = user_name.replace(/\s+/g,"");
	if(user_name == ''){
		alert('名前を入力してください');
	}else{
		alert(user_name +'さん、こんにちは');
	}
}

function rolloverDate(){
	var last_modified = document.lastModified;
	alert("最終更新日は" + last_modified + "です");
}

function addNumber(){
	var a_number_1 = eval(prompt('1つ目の数字を入れてください'));
	var a_number_2 = eval(prompt('2つ目の数字を入れてください'));
	var a_result = a_number_1 + a_number_2;
	alert('足し算の答えは' + a_result + 'です');
}

function subtractionNumber(){
	var s_number_1 = eval(prompt('1つ目の数字を入れてください'));
	var s_number_2 = eval(prompt('2つ目の数字を入れてください'));
	var s_result = s_number_1 - s_number_2;
	alert('足し算の答えは' + s_result + 'です');
}

function calculation(){
	var r = eval(prompt('半径'));
	var h = eval(prompt('高さ'));
	var circumference = 2*r*pi;
	var s = r*r*pi;
	var cylinderSurfaceArea = s*2 + circumference*h;
	var cylinderVolume = s*h;
	var circularConeVolume = cylinderVolume/3;
	var sphereSurfaceArea = 4*s;
	var sphereVolume = sphereSurfaceArea*r/3;
	alert('円の円周：' +  circumference + '\n円の面積：' +  s + '\n円柱の表面積：' +  cylinderSurfaceArea + '\n円柱の体積：' +  cylinderVolume + '\n円錐の体積：' +  circularConeVolume  +　'\n球の表面積：' +  sphereSurfaceArea +　'\n球の体積：' +  sphereVolume);
}
```


#解説
##外部のjsプログラムを呼び出す方法
今回はheadタグ内(`<head>〜</head>`)で呼んでいます。scriptタグを使うことで、外部のjsプログラムを呼び出すことができます。

```html:外部のjsプログラムを呼び出すプログラム
<script type="text/javascript" src="読み込みたいJavaScriptファイルのパス"></script>
```

参考サイト：[JavaScriptの基本](http://javascriptist.net/index.php/JavaScript%E3%81%AE%E5%9F%BA%E6%9C%AC)

##画面の上にカーソルを置くと背景色が変える方法
動画では一番最後に出てくるところですが、まずhtml側の準備から説明します。画像の上にカーソルがある、カーソルがなくなったというのを取得するには`onmouseover`、`onmouseout`を利用することでできます。

```html:
<a href="#"  onmouseover="changeBackgroundColor(1)" onmouseout="changeBackgroundColor(0)">
	<img src="icon.png" style="max-height:100px;width:auto;border:red solid 1px;background:white;">
</a>
```

参考サイト：[onmouseout属性 onmouseover属性](https://w3g.jp/xhtml/dic/onmouseout)

次に、changeBackgroundColor関数についてです。この関数はhoge01.js内にあり、html側で呼び出され関数の引数が0のときは背景色が赤色になり、文字が白に、1のときは背景色が白色になり、文字が黒になります。

```js:changeBackgroundColor関数
function changeBackgroundColor(_checknumber){
	checknumber = _checknumber;
	if(checknumber==1){
		document.bgColor = "#ff0000";
		document.fgColor = "#ffffff";
	}else{
		document.bgColor = "#ffffff";
		document.fgColor = "#000000";
	}
}
```

ちなみに、上のコードを見てもらえれば分かるかもしれませんが、背景色を変えるときは`document.bgColor`を使い、文字の色を変えたいときは`document.fgColor`を使えばできます。

参考サイト：[document.fgColor](http://www.htmq.com/js/document_fgcolor.shtml)

## 名前を入れてもらって挨拶をする
まぁ、実際はこれ文字入力ダイアログというのを表示して、OKボタンが押されると値を格納してその結果をalertで出しているだけです。では、早速コードを見ていきましょう。

```html:hoge01.html側
<input type="button" value="挨拶" onclick="greeting()" >
```

formタグで囲まれている中にこのように書くことでボタンが作成され、クリックされると`greeting()`という自分がhoge01.jsに作成した関数が実行されます。ちなみにボタンに書かれている「挨拶」はこのタグ内のvalueの値「挨拶」が表示されたものです。

参考サイト：[type="button"](http://www.htmq.com/html5/input_type_button.shtml)

そして、本題の文字入力ダイアログについて書かれているgreeting関数のコードは以下のとおり。

```js:greeting関数
function greeting(){
	var user_name;
	user_name = prompt('空白を入れずに、お名前を入力してください');
	user_name = user_name.replace(/\s+/g,"");
	if(user_name == ''){
		alert('名前を入力してください');
	}else{
		alert(user_name +'さん、こんにちは');
	}
}
```

上記のプログラムの中に`prompt`という関数があると思うのですが、これによって文字入力を可能にしており、そこで入力された値をvalue型のuser_nameに格納し、ちょっと正規表現を用いて空白を削除し、user_nameに何も入っていなければalert関数を用いて「名前を入力してください」と表示し、入っていれば「(入力された文字)さん、こんにちは」とalert関数を用いて表示されるようにしています。

参考サイト：[ウィンドウ名.prompt()](http://www.htmq.com/js/window_prompt.shtml)
参考サイト：[入力された文字列に含まれる空白文字を削除する](http://www.nishishi.com/javascript/2013/trim-space-chars.html)
参考サイト：[アラート表示](http://www.pori2.net/js/kihon/4.html)

##更新日を取得
ボタンについては上記と同じなので説明を省きます。では、本題の更新日を表示するプログラムは次の通りです。

```js:rolloverDate関数
function rolloverDate(){
    var last_modified = document.lastModified;
    alert("最終更新日は" + last_modified + "です");
}
```

`document.lastModified`というのを使うことで最新の更新時間を取得することができます。また、自分の動画では「ユーザが更新した時間が表示される」と書いたのですが、これは自分の書き間違いです。申し訳ありません。ではなぜそのような間違いをしたかというと...

>[Q]　更新日ではなく、現在日付が表示されます
[A]　無料ホームページサービスなどのサーバーを利用していると、そのサーバーがページに広告バナーなどを挿入してページを新しくを作り直して送信するために、表示は更新日付ではなく現在日付になる場合があります。
【[イヌでもわかるJavaScript講座 - 更新日時(lastModified)](http://www.red.oit-net.jp/tatsuya/java/lastmdfy.htm)より】

ローカルで開発している時も同じように更新日付ではなく現在日付になってしまいます。`document.lastModified`が更新日を取得してれるのはわかっていたのですが、なぜか...（＾＾；）

参考サイト：[イヌでもわかるJavaScript講座 - 更新日時(lastModified)](http://www.red.oit-net.jp/tatsuya/java/lastmdfy.htm)

##足し算・引き算・いろいろな計算
これらは全て同じようなものなのでまとめて書きます。とりあえず例は足し算だけ。

```js:addNumber関数
function addNumber(){
    var a_number_1 = eval(prompt('1つ目の数字を入れてください'));
    var a_number_2 = eval(prompt('2つ目の数字を入れてください'));
    var a_result = a_number_1 + a_number_2;
    alert('足し算の答えは' + a_result + 'です');
}
```

先ほどの文字入力と何が違うかというと、`prompt()`が`eval()`というのに囲まれているということだけ。この`eval()`と`prompt`を用いることで数字以外が入力されるとそこで処理が終わります。
しかし、実はこの`eval()`は危険な関数であるので実際に外部に公開するときは違う方法を利用して行った方がいいと思われます。このプログラムは参考程度にしてください。

参考サイト：[eval - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/eval)

とまぁ、ひとまずそこは置いといて、それら入力された値を`a_number_1`、`a_number_2`に格納し、それらを足し合わせた結果を`a_result`に格納し`alert`で表示。以上( º言º` )！

という感じです←

円周とか円錐の体積は次のようなサイトに公式が落ちているのでそれを記述しただけですので省きます←
参考サイト：[（例題対比）扇形の面積，円錐の表面積](http://www.geisya.or.jp/~mwm48961/math2/sector1_episode.htm)