20140404 汎用計算機を作成する④
お題
汎用計算機を作る
下記のブログで作成したアプリをさらに改良。具体的にはスマホでボタンを押すとソフトウェアキーボードが出現していたので、一度readonlyにしてからtextareaに入力するようにした。
http://mocomei.hateblo.jp/entry/2014/04/05/114651
ソース
<!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>Calculator</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles/core3.css"/>
<link rel="apple-touch-icon" href="images/calculator.jpg"/>
<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>
<tr>
<td><button class="arrow">→</button></td>
<td><button class="arrow">←</button></td>
<td><button class="arrow">BS</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').attr('readonly', true);
target_temp = document.getElementById('target').value;
// 計算式内が初期メッセージであればクリア
if(target_temp == 'ここに計算式を入れてください') {
target_temp = '';
}
var target = document.getElementById('target');
var pos = target.selectionStart;
var before_text = target_temp.substring(0, pos);
var after_text = target_temp.substring(pos);
target.value = before_text + $(this).text() + after_text;
// キャレットを設定する
target.selectionStart = pos + 1;
target.selectionEnd = pos + 1;
$('#target').attr('readonly', false);
});
// 矢印とBSを入力するイベントハンドラ
$('.arrow').click(function() {
$('#target').attr('readonly',true);
var target = document.getElementById('target');
target_temp = target.value;
// 計算式内が初期メッセージであればクリア
if(target_temp == 'ここに計算式を入れてください') {
target_temp = '';
}
var pos = target.selectionStart;
if ($(this).text() == '→') {
target.selectionStart = pos + 1;
target.selectionEnd = pos + 1;
} else if($(this).text() == '←') {
target.selectionStart = pos - 1;
target.selectionEnd = pos - 1;
} else if($(this).text() == 'BS') {
var before_text = target_temp.substring(0, pos - 1);
var after_text = target_temp.substring(pos);
target.value = before_text + after_text;
target.selectionStart = pos - 1;
target.selectionEnd = pos - 1;
}
$('#target').attr('readonly', false);
});
$('#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/calculator4.html
