「エンジニアの仕事がしたい」という人から「プログラムを覚えたいけどどの言語がいいか？」という質問をよく受ける。
個人的には「C言語」と言いたいトコロだけど、最近の事情を考慮して「JavaScript」と答えている。
インタプリタとして、簡易に構築も出来るため、勉強するにはサーバーがなくても勉強ができるJavaScriptは
プログラム初心者にはとてもいい言語と言えるでしょう。
色々な基本が盛り込まれている「電卓」
各種計算、表示、ボタンイベント、など、見栄えを良くしたければCSSも知っておく必要もあるが、
課題としてはとてもいいと思ってます。
とりあえず、プログラムも全て掲載しておきますが、是非初心者の人は、自分なりの電卓を企画して
構築してみてください。
例えば「関数電卓」や「メモリ機能付き」などのプログラムを作るとスキルもグッと向上すると思いますよ。
サンプル
電卓サンプルページ
画面イメージ
ソースコード
<html>
<head>
<title>calculator</title>
<style>
#calc{
-webkit-border-radius:8px;
}
table{
border-collapse:collapse;
border:4px solid black;
-webkit-border-radius:8px;
}
th,td{
text-align:center;
border:1px solid black;
width:40px;
height:40px;
}
th:hover ,td:hover{
background-color:#FED;
}
th:active ,td:active{
background-color:#FAA;
}
th{
font-weight:normal;
background-color:#DDF;
}
td{
}
input{
width:100%;
height:40px;
border:0;
background-color:#FFD;
}
.btn{
cursor:pointer;
}
</style>
</head>
<body>
<div id='calc'>
<table>
<tr>
<td colspan="3"><input type='text' id='total' readonly/></td>
<th class='btn'>c</th>
</tr>
<tr>
<td class='btn'>7</td>
<td class='btn'>8</td>
<td class='btn'>9</td>
<th class='btn'>+</th>
</tr>
<tr>
<td class='btn'>4</td>
<td class='btn'>5</td>
<td class='btn'>6</td>
<th class='btn'>-</th>
</tr>
<tr>
<td class='btn'>1</td>
<td class='btn'>2</td>
<td class='btn'>3</td>
<th class='btn'>x</th>
</tr>
<tr>
<td class='btn'>0</td>
<th class='btn'>.</th>
<th class='btn'>/</th>
<th class='btn'>=</th>
</tr>
</table>
</div>
<script type='text/javascript'>
var btn = document.getElementsByClassName("btn");
for(var i=0;i<btn .length;i++){
btn[i].onclick=function(){proc.click(this)};
}
var proc={
data:{
num:0,
mark:""
},
click:function(e){
var t = document.getElementById("total");
if(t==null){return}
if(e.innerHTML==""){return}
//数字
var k = e.innerHTML;
if(k.match(/[0-9]/)){
if(this.data.mark=="="){
this.data.mark="";
this.data.num=0;
t.value="";
}
//数字の追記
t.value += k;
//先頭の0をとる
if(t.value=="00" || !t.value.match(/¥./)){
t.value = t.value *1;
}
}
//ピリオド
else if(k=="."){
//2回目の.は無視する
if(!t.value.match(/¥./)){
//記号の追記
t.value += k;
}
}
//クリア
else if(k.match(/c/i)){
//表示のクリア
t.value = "";
}
//記号
else{
//+
if(this.data.mark=="+"){
this.data.num = this.data.num + (t.value*1);
}
//-
else if(this.data.mark=="-"){
if(t.value==""){
if(this.data.mark=="="){
this.data.mark="";
this.data.num=0;
t.value="";
}
//マイナスの追記
t.value += k;
}
this.data.num = this.data.num - (t.value*1);
}
//*
else if(this.data.mark=="*" || this.data.mark.match(/x/i)){
this.data.num = this.data.num * (t.value*1);
}
// /
else if(this.data.mark=="/"){
if(t.value==0){
this.data.num = 0;
}
else{
this.data.num = this.data.num / (t.value*1);
}
}
else{
this.data.num = (t.value*1);
}
//イコール
if(k=="="){
t.value = this.data.num;
}
else{
//表示クリア
t.value = "";
}
//押された記号の記憶
this.data.mark = e.innerHTML;
}
}
};
</script>
</body>
</html>
