文字列を表示する

広告

指定した位置に文字列を表示させるには次のように記述します。 

document.write("表示する文字列")

引数で指定した文字列を、このJavaScriptを記述した位置に表示します。

サンプルコード

一度試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<p>
ここから下がJavaScriptで出力したものになります。
</p>

<script type="text/javascript" src="./js/script1_1.js">
</script>

<p>
ここから上がJavaScriptで出力したものになります。
</p>

</body>
</html>

document.write("JavaScriptを使って出力しています。");

上記をブラウザで見ると下記のように表示されます。

p1-1

3行表示されている真ん中の行がJavaScriptで書き出した部分です。

もちろん単に文字列を書き出すだけなら、こんな面倒なことをする必要は無いのですが、例えば現在の日付を取得して表示するなど、固定ではない文字列を表示したい時に使います。下記でサンプルを試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<p>
ここから下がJavaScriptで出力したものになります。
</p>

<script type="text/javascript" src="./js/script1_2.js">
</script>

<p>
ここから上がJavaScriptで出力したものになります。
</p>

</body>
</html>

var today = new Date();
var month = today.getMonth() + 1;
var day = today.getDate();
document.write("今日は" + month + "月"+ day + "日です。");

上記をブラウザで見ると下記のように表示されます。

p1-2

JavaScriptを使えば動的に作成した文字列もこのように表示させることができます。

HTML構文をを表示する

documnetへの書き出しは、結局HTMLページ内に記述しているのと同じことなので、単なる文字列だけでなくHTMLで使われているタグも記述できます。

実際に試してみます。下記では<h2>タグを使って書き出してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<p>
ここから下がJavaScriptで出力したものになります。
</p>

<script type="text/javascript" src="./js/script1_3.js">
</script>

<p>
ここから上がJavaScriptで出力したものになります。
</p>

</body>
</html>

document.write("<h2>HTML文書の書き出しテストです</h2>");

上記をブラウザで見ると下記のように表示されます。

p1-3

( Written by Tatsuo Ikura )