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

JavaScriptで本格的なプログラミングの世界に触れてみよう。連載を通じて実用的なアプリケーションを作れるようになるはず！？（編集部）

[小島尚基，有限会社インテレクトキューブ] PC用表示関連情報

LINE

Hatena

前のページへ | 　　　　　　

複数行で表示するには？

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

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

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

　さて、結果は……

　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>

　と書くこともできます。

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

ようこそJavaScriptの世界へ

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

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

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

を説明しました。

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

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

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

「次回」へ

「初心者のためのJavaScript入門」バックナンバー

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

複数行で表示するには？

ようこそJavaScriptの世界へ

関連記事

HTML5＋UX 記事ランキング