ＪａｖａＳｃｒｉｐｔ講座(Vol.16)

ＪａｖａＳｃｒｉｐｔ講座
（メールマガジン編）

１０/１６日発行　ヨッシーの”ホームページを作ろう！（JavaScript編）”★Vol.16★

document.writeについて

今までにも何度か出てきた、文字を書く命令document.writeについて、
もう少し詳しくやってみよう。

★ document.writeについて ★

いままでに何度か出てきたdocument.witeという命令。
これは、文字をブラウザに表示するための命令だったね。
そこで、JavaScriptで利用されるビルトインオブジェクトというものについてやってみよう。
(※名前は特に覚えなくてもよい。以下の内容を理解しよう)
document.writeという命令は、正式に書くと実はwindows.document.writeなんだ。
このwindowという文字の、ある場合と無い場合の違いはなんだろう。
実は、このwindowやdocumentとうのはプログラムを実行する場所をあらわしているんだ。
windowというのはブラウザ全体を指していて、documentというのは実際に文字や画像を表示する部分を指しているんだよ。
※厳密には表示部の元の場所、つまりＨＴＭＬ文に文字を書く。
つまり、window(ブラウザ)にあるdocument(表示部)に文字を書く(write)という形になっているんだね。
JavaScriptは通常ブラウザ上で実行されるので、普通なら全ての命令にwindowがついてしまうよね。
でも、毎回命令にwindouwをつけていると効率が悪いので、つけるのは当然のものとして、windowという文字は省略することができるんだ。
このビルトインブジェクトは、後で出てくるフォームなどの扱いでも出てくるからね。

もう一つ、document.writeについて知っておいてほしいのは。
実際には画面に表示する文字を指定するんじゃなくて、ＨＴＭＬ文書そのものに書き込む文字を指定しているんだ。
ここで１つ考えてみよう。
ブラウザに２行にわたって文字を表示したいときはどうすればいいだろう。
下の例文を見てみよう。

例１）
document.write("こんにちわ、");
document.write("ヨッシーです。");

これをブラウザで表示したらどうなると思う？
これを表示すると、

こんにちわ、ヨッシーです。

となってしまうんだ。
２行で表示したいわけだから、これじゃだめだよね。
JavaScriptのソース文では２行に別れている気がするけど、実際にブラウザで表示してみると１行になってしまうんだ。
この命令は実際はＨＴＭＬ文自体に書き込んでいるので、何も指定しなかったら改行されることはないんだ。
このＨＴＭＬ文に書き込んでいるというところでピンと来た人はいるかな。
そう、ＨＴＭＬで改行をあらわす というタグもいっしょにＨＴＭＬ文に書き込んでやればいいね。
つまり、

例２）
document.write("こんにちわ、 ");
docement.write("ヨッシーです。");

これはHTML文書に書くための命令なので、この命令によってHTML文は

≪ＨＴＭＬ内≫
こんにちわ、 ヨッシーです。

となるね。
なので、このように書けば、 のところで改行されることになるよね。

≪表示≫
こんにちわ、
ヨッシーです。

このように表示されるね。
つまり、表示する文字を太くしたかったり文字の大きさを大きくしたいときでも、

document.write("こんにちわ、 ");
docement.write("ヨッシーです。");

のように書けばいいんだ。
・・・って、本当にいいかな？
確かに、今までの解説だけを見れば正しいし、ほぼ正解といってもいいんだけど、
実際に実行してみるとエラーが出てしまうんだ。
ソース文をよくみてごらん、どこが間違ってるかわかるかな。
実は２行目の
docement.write("ヨッシーです。");
が間違っているんだ。
カッコの中を見てね、"（ダブルクォーテーションマーク）があるよね。
それでくくられた文字がＨＴＭＬ文に書き込まれるんだったね。
つまり、
docement.write("ヨッシーです。");
赤い部分がHTML文にかかれるところだね。
けれど、途中でというふうに、
JavaScriptとは関係のないところで " のマークが出てきてるんだ。
僕らから見れば、これはＨＴＭＬの中での " だってわかるけど、コンピューターはそんなことは考えられなくて、
素直にこの " もJavaScriptの命令の一つだと勘違いしてしまうので、表示部がおかしくなってしまうんだ。
つまり、

" ヨッシーです。 "

このように赤の部分で分けて解釈してしまうんだね。
この場合、5(？？？)の部分でエラーが出てしまったんだ。
なぜなら、これをもう少し解析してみると、

" ヨッシーです。 "　　　　　　　　←表示部（？）

このようになっちゃうね。
この問題を解決する方法は３つあって、今からそれを見ていこう。

１．docement.write("ヨッシーです。");
数字の5の前後の " を消したよ。
ＨＴＭＬでは必ず " がないといけないわけではないので、" を消してやれば問題は解決するんだ。
参考≫ＨＴＭＬ講座－－さらによいページを目指すために・・・

２．docement.write("ヨッシーです。");
" と同じ働きをする '（シングルクォーテーションマーク）を使えば、（" と ' は別とみなされるので）問題は解決するよ。

３．docement.write("ヨッシーです。");
\をつかえば、その後ろにある文字は何の働きも持たず、そのまま表示することができるんだ。
だから、\の後ろにある " はそのまま表示されるので、
ヨッシーです。
というふうに、うまくＨＴＭＬ文に挿入できるんだよ。