ブログの記事内でJavaScriptを使って計算できるようにする: パソコンを便利に！！

2021年05月07日

ブログの記事内でJavaScriptを使って計算できるようにする

HTML5のoutputタグを使うと、ブログの記事内で簡単に計算ができることが分かったので、いろいろな計算をやってみました。
そのときの記事がこれ ↓ です。

　ブログ上でHTML5の新機能outputを使って2乗・平方根・四捨五入などの計算をする

関数もJavaScriptと同じように書いてあげれば、ちゃんと計算してくれます。

仕事で、電卓で計算して、その計算結果をパソコンのソフトに入力するといったような作業をしているので、その電卓計算部分をブログの記事内での計算に置き換えてしまおうと考えています。
同じパソコンの画面上で計算できれば、電卓に表示された計算結果を見て、パソコンのソフトに入力していた部分が、コピーと貼り付けに置き換えられるのと、おそらく計算で叩くキーも少なくできるはず。
少なからずメリットはあるはずです。

ただ、いろいろ計算ページを作り始めてみると、HTML5のoutputタグを使う計算だと、少し変わった計算をしようとすると無理みたいだと思うところも出てきました。
例えば、円の直径を入力して、円の面積と周長を計算させることは出来そうにありません。
input（入力）はいくつあってもいいのですが、output（計算結果）は１つしかできないので、面積か周長のどちらかしか計算できないようなのです。
また、条件によって計算を変える「if ～～」みたいなことも、出来そうにありません。
単に私が分からないだけで、実際にはやり方がある可能性もありますが、ネット上の情報が少ないので、とりあえず今のところは出来ないと判断するしかなさそうです。

せっかくブログに計算ページを作るメリットを考えついたところなので、ここであきらめないで、難しそうという理由でこれまで避けてきた JavaScript に挑戦してみることにしました。

参考になりそうなサンプルコード

JavaScript を使ってブログに計算ページを作るやり方が見つからないかとネット上を探してみると、JavaScript を初歩から説明してくれている記事はいろいろ見つかりますが、そのものズバリというような記事はなかなかなくて、まず何をどうすればいいかが分かりません。
それでも何とか自分でも参考にできそうだと見つけたのが、↓ こちらの掲示板のやり取りです。
　JavaScriptのフォーム入力数値を複数計算式に当てたい

「JavaScriptのフォーム入力数値を複数計算式に当てたい」という質問に対して、AKさんがサンプルコードを書いて回答しているのですが、そのサンプルコードを真似すれば、やりたいと思っていることが出来そうな感じです。
AKさんはいくつかサンプルコードを書いてくれていますが、最初のサンプルコードを参考にしてみることにします。

サンプルコードの最初の5行はHTMLの <head> 部分に入れるもので、ブログの各記事には入れないので、とりあえず考えずに、どうも必要らしいということになれば、後で入れることにします。

<form> ～ </form> 部分が、計算のための入力と、計算結果を表示する部分です。
この <form> ～ </form> の表示部分と、<script> ～ </script> の計算部分を、ブログの1つの記事に入れてみて、うまく機能すれば目的の第一段階は達成できそうです。

ブログに計算ページを作るだけなら簡単かも

上で書いた考えで、実際に簡単な計算を作ってみました。

↑ ここに計算のためのフォームのコードと、JavaScript のコードを入れています。
JavaScriptは表示されず、計算のためのフォームだけが表示されています。
ＡとＢに数値を入力して［計算］ボタンをクリックすると、計算結果が表示されるはずです。

やはり、ブログの記事内に、計算のためのフォームのコードと、JavaScript のコードを書いてやれば、ちゃんと機能するようです。
であれば、ブログ記事内で JavaScript で計算できるようにするのは、そんなに難しくはなさそうです。

コードの解説（フォーム）

上で設置した計算フォームのコードを説明します。
計算フォームのコードは、↓ このようになっています。

<form action="#" name="calformTasuKakeru">
  Ａ：<input type="text" name="a" value="">
  Ｂ：<input type="text" name="b" value="">

  <input type="button" name="keisan" value="計算" onClick="calTasuKakeru();">
  <input type="reset" name="reset" value="クリア">

  Ａ＋Ｂ＝<input type="text" name="ans1" value="">
  Ａ×Ｂ＝<input type="text" name="ans2" value="">
</form>

１）計算のためのフォームは、<form> ～ </form> の間に書きます。

action="#" は、通常は # 部分に入力したデータを送信する送信先のURLを書きますが、ブログの記事内で計算させるだけなので、次画面に送信する意味になる # を入れています。
つまり、action="#" とすることで、入力したデータはどこにも送信されず、その画面で使うだけという扱いになります。

name="calformTasuKakeru" で、この計算フォームに名前を付けています。
この名前はアルファベットと数字で自由に付けることができますが、同じブログ内で重複しないように、計算フォームごとに別の名前を付けないといけません。
ブログ内で同じ名前のフォームがあると、JavaScript で計算させるときに、どの計算フォームの値か分からないので、計算できません。

２）2行目と3行目が、数値を入力するための入力ボックスです。
Ａ：<input type="text" name="a" value="">
Ｂ：<input type="text" name="b" value="">

「Ａ：」と「Ｂ：」は、そこに何を入力させるか表示するラベルです。
適当な分かりやすい言葉を書いておきます。

<input type="text"> と書くことで、入力のためのテキストボックスが表示されます。
name="a" と name="b" は、テキストボックスの名前です。
この名前はアルファベットと数字で自由に付けられ、ブログの中で重複しても大丈夫ですが、同じフォームの中で重複すると、JavaScript でどの値か分からないので計算できません。

value="" はそのテキストボックスの初期値で、この書き方だと初期値は空白になります。
通常は空白でいいと思いますが、数字を入力すると分からせるために「"0"」としておいてもいいですし、そこでよく使われる値を入れておいてもいいかもしれません。

３）4行目が、［計算］ボタンのコードです。
<input type="button" name="keisan" value="計算" onClick="calTasuKakeru();">

<input type="button"> と書くことで、ボタンが表示されます。

name="keisan" はボタンの名前で、入力ボックスと同じように、同じフォームの中で重複しないように名前を付けます。

value="計算" でボタンに表示される言葉を設定します。

onClick="calTasuKakeru();" でボタンをクリックしたときに何をさせるかを書きます。
ここでは、calTasuKakeru() という名前の JavaScript を実行するようにしています。
この JavaScript の名前もフォームの名前と同じで、ブログの中で重複しないように名前を付けます。
重複があると、どの JavaScript を実行すればいいか分からないからです。

４）5行目が、［クリア］ボタンのコードです。
<input type="reset" name="reset" value="クリア">

［計算］ボタンのコードとほぼ同じですが、ボタンをクリックしたときに何をさせるかのコードがありません。
<input type="reset"> と書くことで、フォーム内の入力・出力の値をリセットする機能があるようです。

５）6行目と7行目が、計算結果を表示するコードです。
Ａ＋Ｂ＝<input type="text" name="ans1" value="">
Ａ×Ｂ＝<input type="text" name="ans2" value="">

「Ａ＋Ｂ＝」と「Ａ×Ｂ＝」は、計算結果が何かを分からせるためのラベルです。
適当な分かりやすい言葉を書いておきます。

コードの内容は、入力ボックスと同じです。
name="ans1" と name="ans2" は、入力ボックスと同じように、同じフォームの中で重複しないように名前を付けます。

計算結果なので、Ａ＋Ｂ＝<output name="ans1">0</output> と書いてテキストボックスの形にしないこともできますが、<input type="text"> を使うと計算結果が枠の中に表示されて分かりやすいので、今回はこちらを採用しています。

コードの解説（JavaScript）

JavaScript のコードを説明します。
フォームで入力された値で計算して、計算結果をフォームに返す役割をしている部分です。
JavaScript のコードは、↓ このようになっています。

<script language="javascript">
function calTasuKakeru()
{
  // フォームで入力したデータABを変数に代入
  inputValueA = document.calformTasuKakeru.a.value - 0;
  inputValueB = document.calformTasuKakeru.b.value - 0;

  // 変数を使って計算
  ans1 = inputValueA + inputValueB;
  ans2 = inputValueA * inputValueB;

  // 計算結果をフォームに出力
  document.calformTasuKakeru.ans1.value = ans1;
  document.calformTasuKakeru.ans2.value = ans2;
}
</script>

１）JavaScript のコードは、<script language="javascript"> ～ </script> の間に書きます。

今回のような計算のための JavaScript の場合は、2行目の function calTasuKakeru() で JavaScript の名前を書いて、3行目の { と最後の } の間に計算内容を書きます。
JavaScript の名前は、フォームの［計算］ボタンのコードで書いた onClick="calTasuKakeru();" の名前と同じになります。
つまり、［計算］ボタンをクリックすると、この JavaScript の計算が実行されるというわけです。

２）5行目と6行目で、フォームで入力した値を変数に代入しています。
inputValueA = document.calformTasuKakeru.a.value - 0;
inputValueB = document.calformTasuKakeru.b.value - 0;

4行目の「// フォームで入力したデータABを変数に代入」部分はコメント行で、行の先頭に「//」を入れた行は
JavaScript の実行に関係ないメモになります。

inputValueA と inputValueB が変数の名前で、それぞれフォーム（calformTasuKakeru）の a と b の値を代入しています。
言葉にすると「document のフォーム（calformTasuKakeru）の a の値（value）を変数 inputValueA に代入する。」ということになります。
行末の「- 0」は 0 を引いていて計算に影響がなく、なくしても問題なく計算できるようですが、何かそのように書いておく方がいい理由がありそうなので、サンプルコードに従って同じように入れています。

３）変数 inputValueA と inputValueB を使って計算します。
ans1 = inputValueA + inputValueB;
ans2 = inputValueA * inputValueB;
inputValueA と inputValueB を足した計算結果を ans1 に、inputValueA と inputValueB を掛けた計算結果を ans2 に、それぞれ代入しています。

４）計算結果 ans1 と ans2 の値を、それぞれフォームの ans1 と ans2 の値に代入します。
document.calformTasuKakeru.ans1.value = ans1;
document.calformTasuKakeru.ans2.value = ans2;
言葉にすると「document のフォーム（calformTasuKakeru）の ans1 の値（value）を ans1 にする。」ということになります。

その他

少しごちゃごちゃと書きましたが、やってみると計算させるだけの JavaScript であれば、意外と簡単にできることが分かりました。
ただ、このままでは見栄えも悪いですし、計算ページとしての使い勝手もイマイチなので、次回以降の記事でもう少し工夫していこうと思います。

JavaScript については、プログラミング言語を購入して使うようなものなのかなとも思いましたが、どうやらその必要はなくて、決まりに従って今回書いたようなコードを書いてやれば、そのまま動作して使えるようで、お金が掛かるものではなさそうです。

JavaScript で計算ページ関連記事の一覧

posted by ぽん太親父 at 20:37 | Comment(0) | TrackBack(0) | JavaScript

この記事へのコメント

コメントを書く

この記事へのトラックバックURL
https://fanblogs.jp/tb/10707461

※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック