こんにちは、Mottyです。
今回はJavascriptを使ってみました。
##概要
今回はJavascriptの処女作で電卓アプリを作ってみました。
定番ですが、HTML・JavascriptによるWebアプリ作品です。
##ソースコード
Calculator.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content = "width = device-width, instial-sale = 1.0">
<meta http-equiv= "X-UA-Compatible" content = "ie=edge">
<title> Document</title>
<link rel = "stylesheet" href="Design.css">
</head>
<body>
<script src = "System.js"></script>
<input id ="result" type = "text" size ="20" style = "width:208px"/>
<br/>
<input type = "button" value = "7" onClick ="disp(7)"/>
<input type = "button" value = "8" onClick ="disp(8)"/>
<input type = "button" value = "9" onClick ="disp(9)"/>
<input type = "button" value = "/" onClick ="disp('/')"/>
<br/>
<input type = "button" value = "4" onClick ="disp(4)"/>
<input type = "button" value = "5" onClick ="disp(5)"/>
<input type = "button" value = "6" onClick ="disp(6)"/>
<input type = "button" value = "*" onClick ="disp('*')"/>
<br/>
<input type = "button" value = "1" onClick ="disp(1)"/>
<input type = "button" value = "2" onClick ="disp(2)"/>
<input type = "button" value = "3" onClick ="disp(3)"/>
<input type = "button" value = "-" onClick ="disp('-')"/>
<br>
<input type = "button" value = "0" onClick ="disp(0)"/>
<input type = "button" value = "C" onClick ="clear()"/>
<input type = "button" value = "=" onClick ="enter()"/>
<input type = "button" value = "+" onClick ="disp('+')"/>
</body>
</html>
Design.css
input{
width:50px;
height:50px;
}
textbox{
width:200px;
height:50px;
}
System.js
var EnterFlag = false;
function disp(n){
var obj = document.getElementById("result");
obj.value += n;
}
function enter(){
var obj = document.getElementById("result");
obj.value = eval(obj.value);
EnterFlag = true;
}
function clear(){
var obj = document.getElementById("result");
obj.value == "0";
}
##結果
しっかり表示してくれました。
パーツとメソッドの繋ぎ方がポイントということを分かっていれば
プログラミング言語が変わっても物自体はちゃんと作れそう。
（しかし配列とかクラスを使えばもっと綺麗なコードをかけたのでは・・・。）