内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
Hello,World!と表示するJavaScript
js_helloworld
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
~~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]]
js_helloworld.txt
· 最終更新: 2018/05/19 20:50 by
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ