ブログでJavaScriptの『document.write(“ブログに表示”)でブログでプログラミング

ハローワールド

超初心者用の JavaScript で最初からHTMLやCSSを説明されるよりも、WordPressのグーテンベルグでも、コードエディタでそのままSciptを書き出していろんなことができたほうがよいかと思う。

コードエディタでも余計な『<br>』タグや『<p>』タグがいれられるので、『カスタムHTML』に記述することにした。

なんといっても、『console』に書き出しというのが一番むずかしい。そう、そもそも『console』の画面にたどりつけないからだ(笑)

■ブログに表示できる魔法ことば『documentwrite』

『document.write』でブログに表示したほうが圧倒的にわかりやすい!

『Hello World』と表示したい場合は…

JavaScriptでは…

<script>
document.write("Hello Wold");
</script>

と記述する。

『script』と『/script』の間が 『JavaScript』が実行されていて、その間のdocument.write(“ブログに表示”)によって、ブログに表示される。 ちなみに『JavaScript』と『Java』は全く別物なので要注意!

数字や関数は『()』に直接記述し、『文字列』は(”文字列”)のように『” “』で囲ってあげる必要がある。

 

と記述する。

■現在の時刻をブログに表示してみよう『new Date();』

 

現在の時刻を表示したければ 『new Date(); 』を使う。

『var』の『date』に『現在の時刻』が代入され、
document.write(date)として、最後に『;』java scriptのピリオドをつけてみた。

<script>
var date = new Date ();
document.write(date);
</script>

このように、WordPressの『ヴィジュアルエディター』ではなく、『コードエディター』で書くと…

…とめでたく、
『new Date ()』でひっぱってきた今日の『日付』を 『var』を使って、『date』に代入し、『document.write(date);』でブログに表示されました!

■現在のURLをブログに表示してみよう『location』

現在の『URL』を表示したければ、『location』を使います。

WordPressの記述画面から『カスタムHTML』を呼び出し…

と、カスタムHTMLに記述すると…

と表示されます。

■現在の時刻をブログに表示してみよう『new Date();』

現在の時刻はこのように記述して…

<script>
var now = new Date();
document.write("<p>現在時刻は…");

var y = now.getFullYear();
var mo = now.getMonth() + 1;
var d = now.getDate();
var week = now.getDay();
var weeks = ["日", "月", "火", "水", "木", "金", "土"];
var w = weeks[week];
var t = now.getHours();
var mi = now.getMinutes();
var s = now.getSeconds();
//var ms = now.getMilliseconds();
document.write(y + "年" + mo + "月" + d + "日" + w + "曜日" + t + "時" + mi + "分" + s + "秒" + ms + "ミリ秒");
</script>

このように表示される…。

 

『document.write(“ブログに表示”)』で簡単にブログにプログラミングすることができます。

この記事に関連する記事