ようこそJavaScriptの世界へ初心者のためのJavaScript入門(1)(3/4 ページ)

» 2009年11月18日 00時00分 公開
[小島尚基有限会社インテレクトキューブ]

表示をつなげるには?

 計算結果だけではそっけないので、「6+4=10」のように式と答えを表示させたいと思います。

 単純に「6+4=10」という文字を表示させるのではなく、 答えの「10」の部分はJavaScriptで計算して求めてみましょう。

 JavaScriptでは、 文字と文字、文字と数字、数字と文字のような表示をつなげるときも「+」を使います。

 この例では、式の部分の文字「6+4=」と、計算部分の「6+4」を「+」でつなげます。

<html>
  <body>
    <script type="text/javascript">
      document.write("6+4="+(6+4));
    </script>
  </body>
</html>
サンプル7

 ここで、計算部分が( )でくくられているのに気付いたでしょうか。この( )がないとどうなるか、実際にやってみます。

<html>
  <body>
    <script type="text/javascript">
      document.write("6+4="+6+4);
    </script>
  </body>
</html>
サンプル8

 なんと、計算部分が計算として解釈されずに、「6」と「4」をつなげただけの「64」という表示になってしまいました。

 では、足し算ではなく、引き算で試してみましょう。「6-4」を( )でくくらなかった場合はどのようになるでしょうか。

<html>
  <body>
    <script type="text/javascript">
      document.write("6+4="+6-4);
    </script>
  </body>
</html>
サンプル9

 思わぬ結果になったと思います。この表示は「Not a Number」の略で、「数字じゃない」という意味です。数字以外を計算しようとすると、答えとして「NaN」が返ってきます。

 「"6-4="+6-4」の場合、まず「"6-4="+6」までが先ほどと同じく、文字として解釈されて「6+4=6」となります。次の「-4」は引き算として扱われるため、「"6+4=6"-4」のように数字ではないものから引き算をしようとして、結果として「NaN」が表示されてしまったのです。

 掛け算や割り算ではどうなるか、実際にやってみましょう。

 掛け算の場合、

<html>
  <body>
    <script type="text/javascript">
      document.write("6*4="+6*4);
    </script>
  </body>
</html>
サンプル10

 割り算の場合、

<html>
  <body>
    <script type="text/javascript">
      document.write("6/4="+6/4);
    </script>
  </body>
</html>
サンプル11

と、正しく表示されます。これはなぜでしょうか。

 JavaScriptでも算数のルールと同じく、四則演算(+−×÷)の混ざった計算では、掛け算・割り算を足し算・引き算より先に計算します。そのため、掛け算・割り算が先に計算され「"6*4="+24」となり、正しい表示になります。

 慣れないうちは、文字と数字をつなげて表示する場合に、文字をつなげる「+」と計算の「+」を混同して思わぬミスが起きないよう、計算部分を( )に入れるようにすると安全です。

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。