超初心者用の 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(“ブログに表示”)』で簡単にブログにプログラミングすることができます。 働きながらエンジニアになる! 出世払いでエンジニアになる!