連載
» 2009年11月18日 00時00分 公開

初心者のためのJavaScript入門(1):ようこそJavaScriptの世界へ (2/4)

[小島尚基,有限会社インテレクトキューブ]

document.writeって何?

 では、サンプルコード4行目の「document.write」をもう少し詳しく見てみましょう。試しに、自分の好きな言葉を表示させてみましょう。

 やり方は簡単です。" "(ダブルクオーテーション)でくくられている「こんにちは。」を自分の好きな言葉に書き換えるだけです。

 何に書き換えましたか。 実際にやらなくても結果が想像できる人もいると思いますが、何よりも自分でサンプルを書き換えるという行為が大切です。どんどん書き換えてください。

 書き換えが終わったら、javascript.htmlに上書き保存してください。先ほどと同じように、保存したファイルをWebブラウザで開くと…… どうなりましたか。思いどおりに書き換えた文字が表示されたでしょうか。

 簡単すぎて拍子抜けしてしまうかもしれませんが、これも立派なJavaScriptのプログラムです。

 「document.write」で文字を表示したい時は、表示させたい文字を必ず" "でくくってください。うまく文字が表示されなかった人は、表示させたい文字が" "で正しく、くくられているか確かめてみてください。

 何となく分かってきた人もいると思いますが、「document.write」はWebブラウザに文字を表示させたい時に使う命令のようなものです。

計算結果を表示させてみよう

 ただ単に、Webブラウザに決められた文字を表示するだけなら、HTMLでもできますね。でも、「document.write」を使えば、決められた文字以外にも、計算結果を表示するなんていうこともできちゃいます。

 JavaScriptを以下のように書き換えてWebブラウザで見てください。

<html>
  <body>
    <script type="text/javascript">
      document.write(53+18);
    </script>
  </body>
</html>

 「71」と表示されたと思います。53+18=71なので、計算結果の「71」が表示されたのです。

サンプル2

 同じように、「+」を「-」に変えて、引き算もできます。数字を変えて色々な計算結果を試してみてください。

<html>
  <body>
    <script type="text/javascript">
      document.write(53-18);
    </script>
  </body>
</html>
サンプル3

 掛け算や割り算はどのように書けばいいのでしょうか。「×」や「÷」はプログラムでは使えません。「×」と「÷」の代わりに、それぞれ「*(アスタリスク)」と「/(スラッシュ)」を使います。

 3×5の掛け算は以下のように書きます。

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

 12÷4の割り算はこのように書きます。

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

 17÷5のような割り切れない計算の場合、「17/5」と書くと「3.4」のように小数点の答えが表示されます。「17÷5=3余り2」のような割り算の余りを求めたい場合は、「%(パーセント)」を使って以下のように書きます。

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

 どうですか。「document.write」ってすごいですね!

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

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

メールマガジン登録

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