ようこそJavaScriptの世界へ：初心者のためのJavaScript入門（1）（4/4 ページ）

» 2009年11月18日 00時00分 公開
[小島尚基，有限会社インテレクトキューブ]
前のページへ 1|2|3|4 　　　　　　

複数行で表示するには？

　今回は先に表示結果から見てみましょう。

サンプル12

　この画面のように、複数行に分けて表示をしたいときはどうしたらいいでしょう。まずは、素直に1行ずつ書いて結果を見てみましょう。

<html>
  <body>
    <script type="text/javascript">
      document.write("1.りんご");
      document.write("2.みかん");
      document.write("3.バナナ");
    </script>
  </body>
</html>

　さて、結果は……

サンプル13

　1行につながって表示されてしまいました。改行するにはHTMLタグの「<br>」を使います。

<html>
  <body>
    <script type="text/javascript">
      document.write("1.りんご<br>");
      document.write("2.みかん<br>");
      document.write("3.バナナ");
    </script>
  </body>
</html>

　また、1行のJavaScriptで、

<html>
  <body>
    <script type="text/javascript">
      document.write("1.りんご<br>2.みかん<br>3.バナナ");
    </script>
  </body>
</html>

　と書くこともできます。

サンプル12

　このように、「document.write」の表示にはHTMLタグを使うことができます。ここではHTMLタグについてはあまり触れませんが、皆さんも自分で他のHTMLタグを使って色々と表示してみてください。

ようこそJavaScriptの世界へ

　「document.write」で、簡単に表示ができることが体験できました。今回は文字や計算結果を表示しただけですが、覚えるほどにWebブラウザを自分の思いどおりに動かすことができるのがJavaScriptです。

　今回の内容をまとめると、

  • document.writeで文章をWebブラウザに表示する
  • document.writeで計算結果を表示する
  • 表示をつなげる方法と四則演算（＋−×÷）の書き方

を説明しました。

　次回までの課題を出したいところですが、まだ表示ができるようになっただけなので、今回は出せる課題がありません。その代わり、サンプルを必ず自分で実行してみてください。

　そしてサンプルの文字や数字を書き換えて思いどおりに動くかどうかを試してみてください。

　次回はフォームやボタンを使って動的なプログラムを書いてみましょう。

「次回」へ


「初心者のためのJavaScript入門」バックナンバー
前のページへ 1|2|3|4 　　　　　　

Copyright © ITmedia, Inc. All Rights Reserved.

＠IT

@ITについて

RSSについて

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

メールマガジン登録

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