scriptタグ

眠れない夜は羊を数えてみましょう。

<p id="out1"></p>

<script>
  let s1 = "";
  for (let i = 1; i <= 100; i++) {
    s1 += "羊が" + i + "匹,";
  }
  s1 += "ぐぅ";
  document.getElementById("out1").textContent = s1;
</script>

textContent ではプレインテキストしか出力できません。HTMLを出力するには innerHTML を使います。

<p id="out2"></p>

<script>
  let s2 = "";
  for (let i = 1; i <= 100; i++) {
    s2 +=  "羊が" + i + "匹<br>";
  }
  s2 += "ぐぅ";
  document.getElementById("out2").innerHTML = s2;
</script>

細かなこと

昔は次のように document.write() を使っていましたが,今は非推奨です。

<p>
<script>
  for (let i = 1; i <= 100; i++) {
    document.write("羊が" + i + "匹,");
  }
  document.write("ぐぅ");
</script>
</p>

<script> の代わりに

<script type="text/javascript">

と書いてもかまいません。今のHTMLでは type="text/javascript" は省略できます。なお,昔は

<script language="javascript">

と書きました。

JavaScriptの機能を切っているブラウザのためのメッセージを noscript というタグで表示することができます。

<p id="out1"></p>

<script>
  let s1 = "";
  for (let i = 1; i <= 100; i++) {
    s1 += "羊が" + i + "匹,";
  }
  s1 += "ぐぅ";
  document.getElementById("out1").textContent = s1;
</script>

<noscript>
  <p>あなたのブラウザはJavaScriptをサポートしていません。</p>
</noscript>

昔は変数を宣言するのに var を使いましたが,今は let を使う書き方が推奨されています。両者は「スコープ」(変数の存在範囲)が違います。var で宣言した変数は全体(関数の中なら関数全体)がスコープになりますが,let ではブロック({ ... } で囲まれた範囲)がスコープになります(ブロックがなければ let 以降全体)。let では,例えば

  let s1 = "";
  s1 += "羊が" + i + "匹,";  // エラー!
  for (let i = 1; i <= 10; i++) {
    s1 += "羊が" + i + "匹,";
  }
  s1 += "羊が" + i + "匹,";  // エラー!
  document.getElementById("out1").textContent = s1;

は2箇所でエラーになりますが,var では

  let s1 = "";
  s1 += "羊が" + i + "匹,";  // 「羊がundefined匹」と表示される
  for (var i = 1; i <= 10; i++) {
    s1 += "羊が" + i + "匹,";
  }
  s1 += "羊が" + i + "匹,";  // 「羊が11匹」と表示される
  document.getElementById("out1").textContent = s1;

のように,for ループの前後でも i が使えてしまいます(ただし最初は何も入っていないので undefined となる)。

let に似たブロックスコープのもので const というものもあります。こちらはconstant(定数)を宣言するのに使います。値を変えようとするとエラーになります。

ただ,過去のしがらみで,varletconst も使わないで変数を使ってしまうこともできてしまいます。これを避けるためには,コードの先頭に "use strict"; と書いておきます。こうすることによって「strict モード」になり,エラーチェックを厳密にしてくれます。

  "use strict";
  s1 = "";      // エラー!

最後に,JavaScript の行末(または } の直前または入力の終わり)のセミコロン ; はだいたい省略可能です。特に HTML の onclick="..." などの中に書く JavaScript コードの最後にはセミコロンを付けないことが多いと思います。JavaScript は改行がスペースと同じ意味ではないので,変なところで改行するとエラーになることがあります。