サイ本で学ぶJS - 入力値を進数変換して表示するサンプル

遅ればせながらJSを勉強し始めました。サイ本読み始めました。この秋で、人並み？にはJS書けるようになりたいなぁ。

JavaScript 第5版

p.28あたりを読んでいて、試しに入力値を2/8/16進数に変換して表示するサンプルを書いてみました。

<script language="JavaScript">
function convertNumberFormat(){
    var inputNum = new Number(document.inputForm.inputNum.value);
    var calcType = document.inputForm.calcType.value;
    var calcResult = inputNum.toString(calcType);
    var cardinalNum = document.getElementById("cardinalNum");
    var resultNum = document.getElementById("resultNum");
    cardinalNum.innerHTML = calcType;
    resultNum.innerHTML = calcResult;
}
</script>

<form name="inputForm">
10進数 :
    <input type="text" name="inputNum" onkeyup="convertNumberFormat();">
    <select name="calcType" onkeyup="convertNumberFormat();">
        <option value=2>2</option>
        <option value=8>8</option>
        <option value=16>16</option>
    </select>
</form>
<span id="cardinalNum"></span> 進数 : <span id="resultNum"></span>

とりあえずJSでは関数でも何でもオブジェクトのプロパティ（フィールド）として扱えるというのは非常に分かりやすいし、便利ですね。

ただ、なんでもかんでもオブジェクトというわけではなくて、「基本データ型」である数値、文字列（Stringオブジェクトではない）、論理値の3つだけは、オブジェクトとしてふるまうことはできません。オブジェクトとして扱いたい場合は各々のラッパーオブジェクトに変換する必要があります。

• • • -

たとえば、上記のサンプルでは、

var inputNum = new Number(document.inputForm.inputNum.value);

としていますが、これは入力フォームからとってきた基本データ型の数値を、Number（数値基本データ型のラッパークラス）オブジェクトに変換しています。これはNumberオブジェクトのプロパティであるtoStringメソッドを使用するためですね。

var calcResult = inputNum.toString(calcType);

もちろん、以下のようにinputNumの値を四則演算するだけであれば、基本データ型のままでOK。ラッパーオブジェクトに変換する必要はありません。

var inputNum = document.inputForm.inputNum.value;
var calcResult = inputNum + 10;

と、理解してからはごく基本的なことなのだけど、最初ごっちゃになってたので。。。

• • • -

とりあえず、はてダでGoogleガジェットを貼り付けられるようになったので、上記のサンプルのガジェットをつくってみました。

GoogleガジェットはRSSフィード表示くらいしかやったことがなかったので、調べながらやってたら思ったより時間かかってしまった。。＞＜