この文書の現在のバージョンと選択したバージョンの差分を表示します。
両方とも前のリビジョン 前のリビジョン | |||
js_helloworld [2018/05/19 20:50] 管理者 |
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]] | ||
+ | |||
+ | |||