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