#13 四則演算
#13 四則演算ここ数回にわたって関数を学んできましたが、今回は関数から少し離れて、四則演算について解説したいと思います。四則演算というのは、足し算、引き算、掛け算、割り算のことですね。えっ？ そんなの小学生でも分かるだろ！ 馬鹿にするな！！ って言われるかもしれませんが、もちろんここで学ぶのは、四則演算をプログラム上で行なう方法についてです。まあ当たり前ですがw
ではまず、単純に「1+2=3」と表示してみましょう！
window.onload = function( ev ) // ブラウザloadイベントに関数を設定
{ // 関数の始まり
const ca = document.getElementById( 'main' ); // 変数caを宣言し、ブラウザ要素を代入
const g = ca.getContext( '2d' ); // 変数gを宣言し、ブラウザ要素の描画コンテキストを代入
g.font = "40px monospace"; // 変数gの書体を40ドットへ
g.fillStyle = "#ffffff"; // 変数gの描画色を城へ
g.fillText( "1+2=3", 40, 80 ); // 変数gへ文字列を描画
} // 関数の終わり
まあ当たり前の結果が表示されますね！ では次に、８行目のプログラムを以下のように書き換えたらどうなるでしょうか？
g.fillText( "1+2=4", 40, 80 ); // 変数gへ文字列を描画
今度も当たり前ですが、指示した通り「1+2=4」と表示されます。でも１＋２は４ではありませんよね？ つまり、何が言いたいかというと、プログラムに「表示」させる方法と、「計算」させる方法は別だということです。では、計算をさせるにはどうすれば良いのかというと、以下のように記述します。
g.fillText( "128+256=" + ( 128 + 256 ), 40, 80 ); // 変数gへ文字列を描画
足し算は出来ましたので、他の演算も試してみましょう。次は引き算です。そんなの教わらなくても出来る！ と言われるかもしれませんが、確かに引き算は簡単です。
g.fillText( "128-32=" + ( 128 - 32 ), 40, 80 ); // 変数gへ文字列を描画
では次に掛け算です。同じように記述すれば良いだけですね！ が、ここで問題が発生します。掛け算の記号が無いのです！ 全角文字なら「×」あるんですけどね。試しに全角文字で記述してみます。
g.fillText( "32×8=" + ( 32 × 8 ), 40, 80 ); // 変数gへ文字列を描画
表示結果はエラーです。
SCRIPT1014: SCRIPT1014: Invalid character main.js (8,32)
Google翻訳先生の回答
足し算と引き算は半角記号が存在するのですが、掛け算と割り算については半角記号が存在しません。全角記号ではエラーになります。ではどうするのかというと、別の半角記号を代用することになっています。
掛け算: *
割り算: /
まとめると、四則演算のプログラムは以下のようになります。
window.onload = function( ev ) // ブラウザloadイベントに関数を設定
{ // 関数の始まり
const ca = document.getElementById( 'main' ); // 変数caを宣言し、ブラウザ要素を代入
const g = ca.getContext( '2d' ); // 変数gを宣言し、ブラウザ要素の描画コンテキストを代入
g.font = "40px monospace"; // 変数gの書体を40ドットへ
g.fillStyle = "#ffffff"; // 変数gの描画色を白へ
g.fillText( "128+256=" + ( 128 + 256 ), 40, 80 ); // 変数gへ文字列を描画
g.fillText( "128-32=" + ( 128 - 32 ) , 40, 130 ); // 変数gへ文字列を描画
g.fillText( "32×8=" + ( 32 * 8 ) , 40, 180 ); // 変数gへ文字列を描画
g.fillText( "128÷32=" + ( 128 / 32 ) , 40, 230 ); // 変数gへ文字列を描画
} // 関数の終わり
今回使用した「+」「-」「*」「/」のような計算のための記号のことを、「演算子」と呼びます。知識の話ですね。そして、演算子自体は難しくないと思うのですが、計算部分に「( )」が必要だったり、その直前に「+」がある理由は、次回以降解説していきたいと思います。
戻る back