【入門編2】JavaScriptで簡単な計算を行ってみよう

JavaScript入門

今回はJavaScriptで四則演算をする方法を解説します。

JavaScriptに限らず、四則演算はプログラミングの基礎と言えます。

やり方はそこまで難しくないので、足し算や引き算のやり方をしっかり覚えましょう。

また、四則演算以外の演算方法についても併せて触れていきます。

本記事を読むことで、四則演算に関することはマスターできますよ。

JavaSciptで数値を表示する

四則演算のやり方の前に、まずJavaScriptで数値を表示する方法をみていきましょう。

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
document.write(1)
</script>
</body>
</html>

○実行結果

JavaScriptで文字列や数値を表示する場合「document.write」を使います

scriptタグの中を変更に、上記のように記述してください。

注意点ですが、文字列ではなく数値を表示する場合、””で括る必要はありません

実行結果を確認すると、ブラウザに「1」と表示されていることが分かります。

数値ではなく文字列を表示する方法は、【入門編1】JavaScriptとは?Hello Worldの出し方を学ぼうで解説しているので、こちらをお読みください。

JavaSciptで四則演算を行う方法

それではJavaScriptで四則演算を行う方法をみていきましょう。

本記事では基本的な四則演算方法と、その他の演算方法に分けて解説します。

基本的な四則演算を行う

まずはJavaScriptで足し算を行いましょう。

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
document.write(4+2)
</script>
</body>
</html>

○実行結果

足し算を行う場合、上記のように「+」という記号を使います

4+2は6ですので、実行するとブラウザに「6」が表示されます。

続いて、引き算を行います。

○コード例

<script>
document.write(4-2)
</script>

○実行結果

引き算を行う場合は「-」を使います

ブラウザに「2」か表示されます。

続いて、掛け算を行います。

○コード例

<script>
document.write(4*2)
</script>

○実行結果

掛け算を行う場合は「*」という記号を使います

プログラミングでは「×」という記号は使いません

掛け算の場合全て「*」を使うので注意しましょう。

最後に、割り算を行います。

○コード例

<script>
document.write(4/2)
</script>

○実行結果

割り算を行う場合は「/」という記号を使います

プログラミングでは「÷」という記号は使いません

掛け算と割り算は、プログラミング特有の記号を使います。

そこさえ気をつければ、JavaScriptでの四則演算は難しくないでしょう。

なお、掛け算や足し算が混じった演算も、もちろん可能です。

例をみていきましょう。

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
document.write(5*4+2)
</script>
</body>
</html>

○実行結果

5*4+2の結果である「22」が表示されています。

また、「()」を使うことで、足し算から計算することも可能です。

○コード例

<script>
document.write(5*(4+2))
</script>

○実行結果

先程とは違い、30が表示されていますね。

このあたりは通常の計算と同じなので、分かりやすいでしょう。

その他の演算を行う

四則演算以外にも、JavaScriptではいくつかの演算処理が可能です。

まず割り算の「余り」を表示する方法を解説します。

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
document.write(5%2)
</script>
</body>
</html>

○実行結果

割り算の余りを表示する場合「%」を使います

5/2の余りは1なので「1」が表示されます。

プログラムにおいて、割り算の余りの値を使用する機会は、多くあります。

たとえば、数値が偶数か奇数かを見分ける際、2で割った余りが1か0かで判別します。

最後に乗算のやり方を紹介します。

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
document.write(5**2)
</script>
</body>
</html>

○実行結果

乗算を行う場合は「**」という記号を使います

「*」を2回使うことで乗算を表すのです。

5の2条は25なので「25」が表示されます。

乗算をする場合もたまにあるので、このやり方も覚えておきましょう。

以上がJavaScriptでの演算の基本となります。

まとめ

本記事ではJavaScriptでの四則演算方法について解説しました。

四則演算の方法や、割り算の余りを取得する方法、乗算を行う方法がお分かり頂けたかと思います。

今回は簡単な例を紹介しましたが、もっと大きな数の計算をすることももちろん可能です。

本記事のサンプルコード内の数値を変更し、どんな表示結果になるか確認してみましょう

次回は、JavaScriptで変数を扱う方法について解説します。

挫折率が高い??プログラミング学習のポイント
駆け出しエンジニアが一緒に学ぶ
CANITは、Progateやドットインストールで独学している人達同士をつなげます。駆け出しエンジニアのあなたのためのSNSです。
JavaScript入門
【この記事を書いた人】
谷津弘樹

某自社開発のIT企業に勤めていた元webプログラマーです。主にサーバーサイド側を担当し、phpを使った開発経験があります。現在は退職しフリーランスライターとして活動中。IT系の記事を主に執筆し生計を立てています。

CANIT
タイトルとURLをコピーしました