#はじめに
JS(JavaScriptの略)の基礎のプログラムについてPCの中のプログラムを整理がてら紹介します。今回は「イベント・変数の使い方」についてです。ただし、今回は不正な値を検知するなどは行っていないので、そのまま検証する場合はローカル環境で使ってください。また、このプラグラムはよろしくない点も多数あるのでご了承ください。
#実際の動作するデモ動画
デモ動画をYouTubeで公開しています。どのような挙動で動くのか見たい方はそちらで見てください。
デモ動画はこちら
#プログラム
今回はhoge01.htmlからhoge01.jsを呼び出して実行しています。
<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>
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プログラムを呼び出すことができます。
<script type="text/javascript" src="読み込みたいJavaScriptファイルのパス"></script>
参考サイト：JavaScriptの基本
##画面の上にカーソルを置くと背景色が変える方法
動画では一番最後に出てくるところですが、まずhtml側の準備から説明します。画像の上にカーソルがある、カーソルがなくなったというのを取得するにはonmouseover、onmouseoutを利用することでできます。
<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属性
次に、changeBackgroundColor関数についてです。この関数はhoge01.js内にあり、html側で呼び出され関数の引数が0のときは背景色が赤色になり、文字が白に、1のときは背景色が白色になり、文字が黒になります。
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
名前を入れてもらって挨拶をする
まぁ、実際はこれ文字入力ダイアログというのを表示して、OKボタンが押されると値を格納してその結果をalertで出しているだけです。では、早速コードを見ていきましょう。
<input type="button" value="挨拶" onclick="greeting()" >
formタグで囲まれている中にこのように書くことでボタンが作成され、クリックされるとgreeting()という自分がhoge01.jsに作成した関数が実行されます。ちなみにボタンに書かれている「挨拶」はこのタグ内のvalueの値「挨拶」が表示されたものです。
参考サイト：type="button"
そして、本題の文字入力ダイアログについて書かれている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()
参考サイト：入力された文字列に含まれる空白文字を削除する
参考サイト：アラート表示
##更新日を取得
ボタンについては上記と同じなので説明を省きます。では、本題の更新日を表示するプログラムは次の通りです。
function rolloverDate(){
var last_modified = document.lastModified;
alert("最終更新日は" + last_modified + "です");
}
document.lastModifiedというのを使うことで最新の更新時間を取得することができます。また、自分の動画では「ユーザが更新した時間が表示される」と書いたのですが、これは自分の書き間違いです。申し訳ありません。ではなぜそのような間違いをしたかというと...
[Q] 更新日ではなく、現在日付が表示されます
[A] 無料ホームページサービスなどのサーバーを利用していると、そのサーバーがページに広告バナーなどを挿入してページを新しくを作り直して送信するために、表示は更新日付ではなく現在日付になる場合があります。
【イヌでもわかるJavaScript講座 - 更新日時(lastModified)より】
ローカルで開発している時も同じように更新日付ではなく現在日付になってしまいます。document.lastModifiedが更新日を取得してれるのはわかっていたのですが、なぜか...（＾＾；）
参考サイト：イヌでもわかるJavaScript講座 - 更新日時(lastModified)
##足し算・引き算・いろいろな計算
これらは全て同じようなものなのでまとめて書きます。とりあえず例は足し算だけ。
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
とまぁ、ひとまずそこは置いといて、それら入力された値をa_number_1、a_number_2に格納し、それらを足し合わせた結果をa_resultに格納しalertで表示。以上( º言º` )！
という感じです←
円周とか円錐の体積は次のようなサイトに公式が落ちているのでそれを記述しただけですので省きます←
参考サイト：（例題対比）扇形の面積，円錐の表面積