文字列を繋げてdocument.writeで出力

document.writeで文字列を表示

●●の文字列をjavascriptで表示させる場合、 headの中でなくて bodyの中の表示させたい位置で、
<script type="text/javascript"> document.write( "●●" ); </script> と書きます。
以下にその例を示すます。それはで動作を確認きます。

<html lang="ja"><head><title>test</title>
<script type="text/javascript"><!--
 var s="トランスポート層の<b>プロトコル</b>";
// --></script>
</head>
<body>
TCPは、<script type="text/javascript"> document.write(s); </script>です。<br>
UDPも、<script type="text/javascript"> document.write(s); </script>です。<br>
</body>
</html>

このように<script type="text/javascript">～</script> の部分は、複数のヵ所で書くことができて、～の部分は書いた順番に、HTMLの初期表示前に実行します。そして、 document.write(s); のヵ所で sの文字列を埋め込むように表示します。上記は次のように書いても同じです。

<html lang="ja"><head><title>test</title>
</head>
<body>
TCPは、<script type="text/javascript"><!--
 var s="トランスポート層の<b>プロトコル</b>";
 document.write(s); 
// --></script>です。<br>
UDPも、<script type="text/javascript"> document.write(s); </script>です。
</body>
</html>

これらは、変数sの記憶内容を設定する部分の一箇所を変更することで、２箇所を同時に変更できる利点があります。例えば、
var s="トランスポート層の<b>プロトコル</b>";を
var s="OSI参照モデルでレイヤー4の<b>プロトコル</b>"; に変更すると、
で確認でききる表示の動作に変更できます。

なお次の変数を使わない例は、JavaScriptを使う利点はありません。ですが、同じ動作をする例として示します。

<html lang="ja"><head><title>test</title>
</head>
<body>
TCPは、<script type="text/javascript"> document.write("トランスポート層の<b>プロトコル</b>"); </script>です。<br>
UDPも、<script type="text/javascript"> document.write("トランスポート層の<b>プロトコル</b>"); </script>です。
</body>
</html>

また、次のようにsubの名前で作った関数を呼ぶ出す作り方でも、同様に動作します。

<html lang="ja"><head><title>test</title>
<script type="text/javascript"><!--
 var s="トランスポート層の<b>プロトコル</b>";
 function sub(){
   document.write(s);
 }
// --></script>
</head>
<body>
TCPは、<script type="text/javascript"> sub(); </script>です。<br>
UDPも、<script type="text/javascript"> sub(); </script>です。<br>
</body>
</html>

HTMLの初期表示のタイミングでdocument.writeを実行させる場合は、上記のように実行箇所へdocument.writeの出力を埋め込む表示になります。
ですが、HTMLの表示が終了した後で、document.writeを使うと、上記のような埋め込み表示になりません。
表示が終わってからの、document.writeによる挙動はブラウザによって異なるようです。その意味で、以下のように、ボタンなどのイベントなどで、document.writeを動作させる使い方は好ましくないと言えます。
ブラウザやバージョンによって動作が変わるからです。（IEではHTMLの後に追加されようです。）
これはで動作を確認きます。

<html lang="ja"><head><title>test</title>
<script type="text/javascript"><!--
 var s="トランスポート層の<b>プロトコル</b>";
 function sub(){
   document.write(s);
 }
// --></script>
</head>
<body>
TCPは、<script type="text/javascript"> sub(); </script>です。←これは正しいが、<br>
<input class="LG" type="button" value="sub()の実行" onclick="sub()">←この使い方は好ましくない。
</body>
</html>

文字列を+=で連結してalertで確認

変数+=文字列; の表現で、変数の内容の最後に、文字列連結した新しい文字列へ変更できます。
例
var s="ABC<br>\n";
s+="DEFG<br>\n";
s+="XYZ<br>n";
alert(s);この実行例は、で動作を確認きます。

文字列を+=で連結してdocument.writeで出力する練習

xxxの名前の変数に、 += を使って ' と'（シングルクォート）で囲む文字列を連結して記憶させ、
それを<script type="text/javascript"> document.write(xxx); </script> で表示させる練習です。
なお、文脈セレクタの表現も使っていますので注目してください。

なおここで、spanにdisplayのスタイルを指定している部分があります。ここで本来インライン要素であるspanを、ブロック要素ととして表示させる指定値のblockを使っています。これを使うと、逆に本来はブロック要素をinlineの指定値でインライン要素として振る舞うようにすることも可能です。