[WordPress][JavaScript]で運勢診断作ってみたー

どうもー最近JavaScriptを勉強しようと思ってきたオーカワです。

最近WordPressで「ここをこうしたい」とか「こう出来たらいいなー」って思っても、PHPだけだと出来ないことが多くて、JavaScriptわかればなーってのが多いですねー

ウェブ制作するのもJavaScriptは覚えておいた方がいいと思いますし、おそらく自分の大学の研究にも使うかなーと(rosbridgeとか)。

あと余談ですが、JavaScriptをJavaと呼んじゃ駄目ですよー 怖いおじさん達に怒られちゃいます(笑)

JavaScriptとは、プログラミング言語のひとつである。 Javaと名前が似ているが、異なるプログラミング言語である(後述の#歴史を参照)。 一般的に、プロトタイプベースのオブジェクト指向スクリプト言語であると言われている。

JavaScript - ウィキペディア

以前PHPを使用して下らない運命診断作りました。見て頂けましたか?

【たった5行】WordPress ショートコードで運勢診断作ってみた
Wodpressにはショートコードという機能がある事を知りました。ショートコードで遊べそうだなって思いつきで記事にしてしまった次第です。 今回は作ったショートコードについて紹介していこうと思います。

6月23日

↑のように自動で日付を出力してくれます。

今回は勉強の一貫として同じものをJavascriptで書いてみようかなと

Hello world表示させてもつまらないし

同じものを違うプログラムで書くのって勉強になりますよね!!

よしやるゾ〜〜  オォ〜〜!!

JavaScriptの記述方法

WordPressで記述する時はテキストモードを使います。

JavaScriptを記事内で表示する方法はいくつかあるみたいですね。

こちらの記事に詳しくのっていました。

JavaScriptを記事内で使うと通常は正常に動作しません。 これ

僕は面倒なので、プラグインを使わずに書いていきます。

方法は簡単で<div>タグで<script>タグを囲むだけです。

<div>
<script>
ここに書いていきます。
</script>
</div>

おそらくコードが長くなると外部ファイルとしてJavaScriptを読み込んだ方が早そうですね。

作成したコード

日付の表示はこちらのサイトを参考にさせて頂きました。

ほぼコピペで終わってしまいます(笑)

で、実際に作ったコードがこちら

このコードを適当なところにコピペするだけで動くはずです。

注意

W3Cさんのページにこんな事が書いてありました。。。。

document . write(text...)

In general, adds the given string(s) to the Document's input stream.

This method has very idiosyncratic behavior. In some cases, this method can affect the state of the HTML parser while the parser is running, resulting in a DOM that does not correspond to the source of the document. In other cases, the call can clear the current page first, as if document.open() had been called. In yet more cases, the method is simply ignored, or throws an exception. To make matters worse, the exact behavior of this method can in some cases be dependent on network latency, which can lead to failures that are very hard to debug. For all these reasons, use of this method is strongly discouraged.

This method throws an INVALID_STATE_ERR exception when invoked on XML documents.

HTML5/W3C

英語だ......じゃなくて.......

この文面を見る限り[document.write]は推奨されていないみたいですね......

しかし、この記事を書きながらJavascriptを勉強してるオーカワには到底理解が出来ない話なので、このまま使わさせて頂きます。コピペ最高

もしわかった事があれば追記していこうかなと。

結果

出来ました〜〜〜(地味)

一応画像だとこんな感じです。

余談

あれっ?運命診断作ってなくね?これがタイトル詐欺である。よくやります

日付の表示もPHPはページを更新する事で変化しますが、Javascriptだと更新しなくても可能だったり

document.writeだけだと出来ませんが...

なのでこんなことも(わかりやすい時刻にしました)

※こ↑こ↓

一応コードも載せときます。。。少しだけ難しくなっています

いつも初めてのプログラミング言語を勉強する時ってHello worldだけ表示して、後はわからないところをググっいてましたが、JavaScriptは本読んで勉強した方がよさそうな気がしました。まだ専門用語も覚えていないから説明もうまくできないし......

今度大学の図書館に行って考えてみまーす

The following two tabs change content below.

オーカワ

大学4年生。ロボット勉強中!!
オーカワのページ 連絡先: okawa@routecompass.net