js_helloworld

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- js_helloworld [2018/05/19 20:47] – 管理者
+++ js_helloworld [2018/05/19 20:50] (現在) – 管理者
@@ 行 1: / 行 1: @@
+~~NOCACHE~~
+{{tag>JavaScript}}
+[[start]]＞[[programming_start]]
+====== Hello,World!と表示するJavaScript ======
+JavaScriptを使って画面に「Hello,World!」と表示します。
+表示する方法は色々ありますがここでは代表的な「document.write」と「innerHTML」を使た方法を紹介します。
+----
+<html>
+<style>.b1{border:1px solid #000;}</style>
+</html>
+===== document.writeを使う方法 =====
+下記のプログラムをUTF8で保存してブラウザで表示すると「Hello,world!」と表示されます。
+使用時の注意点はHTML作成時にしか使えません、ページ表示後にonclickイベントなどで使用するとHTMLページが消されてdocument.writeで出力した文字だけが表示されます。
+<file javascript index.html>
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8">
+  </head>
+<body>
+  <script>
+    document.write("<p>Hello,world!<p>");
+  </script>
+</body>
+</html>
+</file>
+実行結果
+<html>
+  <div class="b1">
+    <script>
+      document.write("<p>Hello,world!</p>");
+   </script>
+</div>
+</html>
+表示で使用しているJavaScriptは<script>から</script>の間(下記)の部分だけで、他の部分は一般的なHTML構文となっています。
+<code javascript>
+  <script>
+    document.write("<p>Hello,world!<p>");
+  </script>
+</code>
+-----
+===== innerHTMLを使う方法 =====
+下記のプログラムをUTF8で保存してブラウザで表示すると「Hello,world!」と表示されます。
+document.writeと違い、表示する部分にはinnerHTMLの実行より前に固有のID名を持った要素(p/div/spanなど)が必要です（したがってinnerHTMLはページの最後の方に書かなければなりません。）
+<file javascript 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>
+</file>
+実行結果
+<html>
+  <div class="b1">
+  <p id='output_innerhtml'></p>
+  <script>
+    document.getElementById("output_innerhtml").innerHTML=("Hello,world!");
+  </script>
+  </div>
+</html>
+表示で使用しているのは下記の部分です。事前に用意したp要素(id=output_innerhtml)にinnerHTMLで文字を挿入しています。
+<code>
+  <p id='output_innerhtml'></p>
+  <script>
+    document.getElementById("output_innerhtml").innerHTML=("Hello,world!");
+  </script>
+</code>
+----
+[[start]]＞[[programming_start]]