20140402 汎用計算機を作成する②
お題
汎用計算機を作成する。下記のブログで作成したアプリの改良版です。
http://mocomei.hateblo.jp/entry/2014/04/01/224639
プログラム概要
テキストエリアに計算式を直接入力か、ボタンを教えて計算式をくみ上げていき
計算をするボタンをクリックすると計算結果が出力される
ソース
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=350, minimum-scale=0.5, maximum-scale=3, user-scalable=yes">
<title>汎用計算機</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles/core2.css"/>
<script>
$(function() {
if($('#target').text == 'ここに計算式を入れてください') {
$('#target').blur();
}
});
</script>
</head>
<body>
<textarea id="target" cols="40" rows="5" style="background:##f5ffe8">ここに計算式を入れてください</textarea>
<br><br>
<table style="border:rigid; background:#ffffff">
<tr>
<td><button class="operand">1</button></td>
<td><button class="operand">2</button></td>
<td><button class="operand">3</button></td>
<td><button class="operand">4</button></td>
<td><button class="operand">5</button></td>
</tr>
<tr>
<td><button class="operand">6</button></td>
<td><button class="operand">7</button></td>
<td><button class="operand">8</button></td>
<td><button class="operand">9</button></td>
<td><button class="operand">0</button></td>
<td><button class="operand">.</button></td>
</tr>
<tr>
<td><button class="operand">(</button></td>
<td><button class="operand">)</button></td>
<td><button class="operand">{</button></td>
<td><button class="operand">}</button></td>
<td><button class="operand">[</button></td>
<td><button class="operand">]</button></td>
</tr>
<tr>
<td><button class="operand">+</button></td>
<td><button class="operand">-</button></td>
<td><button class="operand">×</button></td>
<td><button class="operand">÷</button></td>
<td><button class="operand">%</button></td>
</tr>
</table>
<br>
<button id="doCalc" class="green90x24">計算をする</button>
<button id="doClear" class="green90x24">結果をクリア</button>
<button id="doClearFormula" class="green90x24">計算式をクリア</button>
<br>
<h3>計算結果</h3>
<ul id="hist"></ul>
<script>
$(function(){
$('#doClearFormula').click(function(){
document.getElementById('target').value = '';
});
$('.operand').click(function() {
target_temp = document.getElementById('target').value;
if(target_temp == 'ここに計算式を入れてください') {
target_temp = '';
}
document.getElementById('target').value = target_temp + $(this).text();
});
$('#target').keypress(function(e) {
if(e.which == 13) {
calculate();
} else if (e.which == 27) {
document.getElementById('target').value = '';
}
});
$('#doCalc').click(function() {
calculate();
});
$('#doClear').click(function() {
$('#hist').empty();
});
function calculate(){
var temp_formula = $('#target').val();
temp_formula = temp_formula.replace(/=/g, '');
var formula;
formula = temp_formula.replace(/\[/g, '(');
formula = formula.replace(/\]/g, ')');
formula = formula.replace(/{/g, '(');
formula = formula.replace(/}/g, ')');
formula = formula.replace(/×/g, '*');
formula = formula.replace(/÷/g, '/');
if(formula.match(/[^0-9\. +-\\(*\)/%()\([\)\]{}\\n]/)){
alert('計算式には数字と演算子しか利用できません。改行も利用できません。');
return;
}
if(formula == undefined || formula.trim() == '') {
alert('計算式が入力されていません');
return;
}
var ans = eval(formula);
var $hist = temp_formula + ' = ' + ans;
$('#hist').prepend($('<li>' + $hist + '</li>'));
}
$('#target').focus(function() {
if($('#target').text() == 'ここに計算式を入れてください') {
$('#target').text('');
}
});
});
</script>
</body>
</html>
URL
http://www4386up.sakura.ne.jp/itiapp/calculator/calculator2.html
ちなみにこれくらいのウェブサイトの構築であればHTML＋CSSがある程度わかれば、下記の書籍で勉強すれば十分構築できるようになります。ご興味があればJS、jQueryで開発されたい方はご購入をおすすめいたします。2か月程度で読み終わります。
