目次

ここは旧トップページ＞日曜プログラミング

Hello,World!と表示するJavaScript

JavaScriptを使って画面に「Hello,World!」と表示します。

表示する方法は色々ありますがここでは代表的な「document.write」と「innerHTML」を使た方法を紹介します。

document.writeを使う方法

下記のプログラムをUTF8で保存してブラウザで表示すると「Hello,world!」と表示されます。

使用時の注意点はHTML作成時にしか使えません、ページ表示後にonclickイベントなどで使用するとHTMLページが消されてdocument.writeで出力した文字だけが表示されます。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8"> 
  </head>
<body>
  <script>
    document.write("<p>Hello,world!<p>");
  </script>
</body>
</html>

実行結果

表示で使用しているJavaScriptは<script>から</script>の間(下記)の部分だけで、他の部分は一般的なHTML構文となっています。 

  <script>
    document.write("<p>Hello,world!<p>");
  </script>

innerHTMLを使う方法

下記のプログラムをUTF8で保存してブラウザで表示すると「Hello,world!」と表示されます。

document.writeと違い、表示する部分にはinnerHTMLの実行より前に固有のID名を持った要素(p/div/spanなど)が必要です（したがってinnerHTMLはページの最後の方に書かなければなりません。）

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8"> 
  </head>
<body>
  <p id='output_innerhtml'></p>
  <script>
    document.getElementById("output_innerhtml").innerHTML=("Hello,world!");
  </script>
</body>
</html>

実行結果

表示で使用しているのは下記の部分です。事前に用意したp要素(id=output_innerhtml)にinnerHTMLで文字を挿入しています。 

  <p id='output_innerhtml'></p>
  <script>
    document.getElementById("output_innerhtml").innerHTML=("Hello,world!");
  </script>

ここは旧トップページ＞日曜プログラミング