あちあち情報局

趣味や日曜プログラムなどを書いています

ユーザ用ツール

サイト用ツール

現在位置: トップページ » Hello,World!と表示するJavaScript

サイドバー

メニュー

現在リニューアル中

トップページ

ブログ
コンテンツ
その他
連絡方法
関係者用
旧コンテンツは下部

旧コンテンツ

* ここは旧トップページ

タグ一覧

タグ#
3
1
1
5
3
3
1
1
1
5
2
3
2
1
3
3
12
3
9
5
1
1
4
15
12
4
1
3
3
1
2
1
1
1
1
4
29
8
2
4
3
1
1
8
1
1
1

PV : 2916317

js_helloworld

目次

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

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>

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

js_helloworld.txt · 最終更新: 2018/05/19 20:50 by 管理者

ページ用ツール

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki