こんにちは、プログラマーのふみです。みなさんは色々な計算ができる Webページを作ろうと思ったことはありますか？
私は表計算ソフト（Microsoft Excel）で設計計算ができるファイルを色々作った経験がありますが、外出すると Excel が使えなくて不便を感じていました。そんなとき、ウェブ上に計算できるページを作ってあれば、外出先でもスマートフォンからアクセスして計算できて便利になると常々思っていました。
そこで、HTML と JavaScript を使って、Webページの入力フォームから常用対数の出力換算ができる JavaScript のサンプルプログラムを作ってみましたので紹介します。
CONTENTS
常用対数の出力換算について
ある値が一定の割合で増幅、減衰する計算は、通常、掛け算、割り算でしなければなりませんが、常用対数を用いると足し算、引き算で簡単に計算できるようになります。
具体的に例をあげると、無線機の電波が、給電線（フィーダー／ケーブル）、分配器（スプリッタ）、分岐器（カプラ）等を通ってアンテナから出るときの出力（電波の強さ）を計算するときに常用対数を使います。
このときの計算方法は、まず、無線機の出力（mW）を dBm に換算します。給電線や分配器、分岐器、コネクタは損失が発生するので、減衰量（dBm）を引き算し、アンテナは電波が強くなるので利得（dBi）を足し算して、アンテナから出てくる電波の強さ（dBm）を計算します。
常用対数の出力換算は、無線機の出力（mW）を dBm に換算するときや、アンテナ端の出力（dBm）を mW に換算するときに使用します。
dBm を mW に換算するプログラム
入力フォームから dBm を mW に換算するプログラムを紹介します。
次のコードのHTMLファイルを作成して実行してみましょう。
<form style="
width: 360px;
background: #eeeeee;
padding: 10px;
text-align: center;
">
<p style="font-size: 24px;">
常用対数換算 [dBm → mW]
</p>
<p>
<input type="text" id="decibel_milli" style="
width: 80px;
text-align:right;
">（dBm）＝<span id="msg_ans1"> </span>（mW）
</p>
<p id="msg_alert1" style="color: #ff0000;"></p>
<p>
<input type="button" value="計 算" onclick="cange_mw();" style="
width: 100px;
height: 50px;
font-size: 18px;
">
</p>
<noscript>
このブラウザはスクリプトが実行しないように制限されています。
</noscript>
</form>
<script type="text/javascript">
function cange_mw() {
var dbm = document.getElementById("decibel_milli").value;
var mw = Math.round(Math.pow(10, dbm / 10) * 1000) / 1000
var ans1
var alert1
if (dbm === '' || Number.isNaN(dbm * 1)){
ans1 = ' ';
alert1 = '値が入力されていません';
} else {
ans1 = mw;
alert1 = '';
}
document.getElementById("msg_ans1").innerHTML = ans1;
document.getElementById("msg_alert1").innerHTML = alert1;
}
</script>
上記は<form ～</form>がHTMLの記述で、<script ～</script>が JavaScript の記述です。
input タグの「計算」のボタンから JavaScript の function（関数） cange_mw を呼び出しています。
HTMLファイルを作成したら、ダブルクリックでブラウザを開いてみましょう。
ブラウザに dBm を mW に換算する入力フォームが表示されます。
テキストボックスに数値を入力後、「計算」のボタンをクリックして、dBm 換算値が表示されることを確認してみましょう。
この記事に組み込んだ、dBm を mW に換算する入力フォームは、一番上にあります。
mW を dBm に換算するプログラム
入力フォームから mW を dBm に換算するプログラムを紹介します。
次のコードのHTMLファイルを作成して実行してみましょう。
<form style="
width: 360px;
background: #eeeeee;
padding: 10px;
text-align: center;
">
<p style="font-size: 24px;">
常用対数換算 [mW → dBm]
</p>
<p>
<input type="text" id="milliwatt" style="
width: 80px;
text-align:right;
">（mW）＝<span id="msg_ans2"> </span>（dBm）
</p>
<p id="msg_alert2" style="color: #ff0000;"></p>
<p>
<input type="button" value="計 算" onclick="cange_dbm();" style="
width: 100px;
height: 50px;
font-size: 18px;
">
</p>
<noscript>
このブラウザはスクリプトが実行しないように制限されています。
</noscript>
</form>
<script type="text/javascript">
function cange_dbm() {
var mw = document.getElementById("milliwatt").value;
var dbm = Math.round(Math.log10(mw) * 10 * 1000) / 1000;
var ans2;
var alert2;
if (mw <= 0 || Number.isNaN(mw * 1)){
ans2 = ' ';
alert2 = '値が入力されていません';
} else {
ans2 = dbm;
alert2 = '';
}
document.getElementById("msg_ans2").innerHTML = ans2;
document.getElementById("msg_alert2").innerHTML = alert2;
}
</script>
上記は<form ～</form>がHTMLの記述で、<script ～</script>が JavaScript の記述です。
input タグの「計算」のボタンから JavaScript の function（関数） cange_dbm を呼び出しています。
HTMLファイルを作成したら、ダブルクリックでブラウザを開いてみましょう。
ブラウザに mW を dBm に換算する入力フォームが表示されます。
テキストボックスに数値を入力後、「計算」のボタンをクリックして、mW 換算値が表示されることを確認してみましょう。
この記事に組み込んだ、mW を dBm に換算する入力フォームは、上から2番目にあります。
今回使用したコードについて
論理演算子 ||
「||」は左右の式のどちらかが true のときに true を返す論理演算子です。
if 命令の条件等で使用します。
VB系のプログラミング言語では「OR」に相当します。
isNaN メソッド
構文
Number.isNaN( value )
演算結果の値 value が数値で表現できないとき（Not a Number）は true を返します。
今回紹介した入力フォームでは、数値でない文字列に1を掛けると Not a Number になるので isNaN メソッドは true を返します。
isNaN の「N」は大文字で記述します。
log10 メソッド
構文
Math.log10(x)
値 x に対して、10 を底とする対数（常用対数）を返します。
例えば x が1000のとき、1000 = 103 になるので Math.log10(1000) は3を返します。
まとめ
- 常用対数は乗徐する計算を簡略化するときに用いられる
- 「||」は左右の式のどちらかが true のときに true を返す論理演算子
- 数値でない文字列に1を掛けると Not a Number になる
ありがとうございました。
今回の記事を今一理解できなかった方は、こちらの記事も参考にしてみてください。：
【JavaScript】Windows Webプログラミング入門（第1回）プログラムの作成と実行
【JavaScript】Windows Webプログラミング BMI計算の入力フォームを作る
コメント