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 <= 10; 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（定数）を宣言するのに使います。値を変えようとするとエラーになります。

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

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

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

<blockquote>
  <p id="out3"></p>
</blockquote>

<script>
  s3 = ""
  for (j = 1; j <= 100; j++) {
    s3 += "羊が" + j + "匹，"
  }
  s3 += "ぐぅ"
  document.getElementById("out3").textContent = s3
</script>