2013年1月14日
まずは、HTML5とJavaScriptの関係を探ってみよう。JavaScriptの部分とHTMLに記述するフォームで値を受け渡しする。最初に取り上げるのは、計算が苦手な爺のためのカンタン計算機だ。計算式（文字列）を数式として評価、JavaScriptで計算してウェブページに表示する。
上の枠内をクリックして数式を入力。使えるのは半角数字と演算子の記号。ボタンを押すと、その計算結果が下の枠内に表示される。テキストエディタなどで書いた計算式をコピー＆ペーストすることも可能。注意したいのは、ローカルでは何の問題もないが、ウェブ上で入力された文字列をそのまま「eval(str)」としてしまうと、セキュリティ上問題があるらしい。eval関数は、JavaScriptのすべてのコマンドを評価し、実行してしまうからだ。ま、そんなわけで、ここでは、正規表現を使い、使用できる文字を制限している。
<script type="text/javascript"> //HTML5ではtype属性の指定は不要
var Decimal = 0; //変数の受け渡しのためグローバル変数を設定
function setEval(){
var str = document.myFORM.myValue.value;
if (str.match("[^\(-9]")) { //「()*+,-./0123456789」以外の文字使用を制限
Decimal = 0;
document.getElementById("result").value = 0;
alert("半角数字と記号で入力してね！");
} else {
if(str==""){str=0;}
Decimal = eval(str);
document.getElementById("result").value = Decimal;
}
return Decimal;
}
function setToString(n){
setEval();
document.getElementById("result").value = Decimal.toString(n);
}
</script>
<form name="myFORM"> <input type="text" name="myValue" value="1+2+3*4"> <input type="button" value=" 文字列を数式として計算する！" onclick="setEval()"><br /> <input type="text" id="result" value="0"> <input type="button" value="2 進数 " onclick="setToString(2)"> <input type="button" value="8 進数 " onclick="setToString(8)"> <input type="button" value="16 進数 " onclick="setToString(16)"> </form>