スキップしてメイン コンテンツに移動

投稿

3月, 2016の投稿を表示しています

【JavaScript基本から 第2回】出力方法

出力方法 JavaScript を出力(表示)するには色々な方法があります。
最も多いのが次の4種類

警告ダイアログ window.alert()HTMLに直接文字を書き出す document.write()HTMLの要素に中身を書く innerHTMLコンソール上に表示する console.log()

これらの使い方を一つずつ見ていきます。



警告ダイアログ window.alert() 記述例
<!DOCTYPE html> <html> <body> <script> window.alert('今日はいい天気ですね'); </script> </body> </html>
この場合、ページを開いた瞬間にメッセージ「今日はいい天気ですね」がポップアップメッセージで表示されます。



HTMLに直接文字を書き出す document.write() 記述例
<!DOCTYPE html> <html> <body> <script> document.write('今日はいい天気ですね'); </script> </body> </html>
この場合は、ページの中に表示されます。



HTMLの要素に中身を書く innerHTML 記述例
<!DOCTYPE html> <html> <body> <p id="msg"></p> <script> document.getElementById("msg").innerHTML = '今日はいい天気ですね'; </script> </body> </html>
document.write() は、スクリプトを書いた場所に直接文字を出力するのに対し、innerHTMLでは、出力したい場所をHTML内のID名で指定し、そこに書きだしています。

この例の場合は、 ID名msgを持った p タグの中に、メッセージが組み込まれます。



コンソール上に表示する…

【JavaScript基本から 第1回】JavaScriptはどこに書くの?

JavaScriptはどこに書くの? JavaScriptは  タグの中と、 内の好きな位置に書くことができます。



<script> タグ JavaScriptのコードは<script> 〜</script> タグの間に書くルールがあります。 記述例
<script> document.getElementById("demo").innerHTML = "Hello World!!"; </script>

*以前のJavaScriptではtype属性を使って、<script type="text/javascript"></script> と書いていましたが、 今はこのtype属性は必須ではありません。



JavaScriptは <head> タグや <body> タグ内に書く HTML内に、何個でもJavaScriptを書くことができます。
JavaScriptは<head> タグや <body> タグ、または、その両方に書くことができます。

*好きな場所に書くことはまったく問題ありませんが、見やすいコードのためには1箇所にまとめて書くことが望ましいです。



<head> タグ内に書いた場合の例 JavaScriptをHTMLの<head> タグ内に書いた例です。
下記のサンプルでは、ボタンをクリックしたときに、関数を実行する例です。 記述例
<!DOCTYPE html> <html> <head> <script> function myFunction() { document.getElementById("demo").innerHTML = "内容が書き換わりました"; } </script> </head> <body> <p id="demo"&gtボタンをクリックすると内容が変わります</p> <button type=&qu…