ちょっと便利?・・・ここでは占い入門レベルで遊んでみました

   

JavaScriptをかじってみたい

少し前まで、「JavaScriptはウイルスの元凶」といわれる時期があリましたね。そのために、ずっとそれ使うのを避けていたのですが、今ではほとんどのブラウザは「使用OK」のようなので、ちょっと勉強してみようかな? と思って、簡単そうな書籍を購入して読み始めました。

しかし、購入した本の解説が悪いのか、私のアタマが悪いのか、結局、「何かしようとしても何も出来ない状態」から抜け出せません。

そこで、何か自分で作ってやってみなければ先に進まないと思い、簡単な「占い」を作ってみようと考えてみました。

と言っても、1からやるのは大変です。
WEBの記事を探すと、「占い本舗YnPさん」がいろいろ面白いものを作っておられたので、それを参考に超簡単なものをつくってみましたので、何かのヒントになれば・・・。

今回やろうとしていることは

①ボタンを押すと ②「占い」の答えが表示される ・・・ というだけのことです。

これだけの簡単な内容ですが、ここには、「配列」「関数」など、いろんな内容が詰まっていて、ここからいろいろなことに発展させられそうですので、ともかく、作ったものを説明しているのが今回の内容です。

ここでは、「こんなことをやれば、こんな事ができる」というイメージを知っていただくもので、JavaScriptについては、詳しい説明はしていません(できるレベルではありません)のでご容赦ください。

出来上がった占いはこれです。

九星滔天易断 監修 「今日の一日」
今日のあなたの運勢は!
ご宣託

協力:YNPさん

コードは次のような内容です。ともかく、このHPのコードを見てください。

 javascriptのプログラム部分 

「今日のあなたの運勢」はどうでしたですか?・・・これで結構遊べるでしょう!

主要部分の説明 

01-17行のJavaScriptで計算する部分と、18- のhtmlで画面に表示する部分からなります。

【02-03行】

関数を宣言varしています。関数名はooneとotwo としました。それを10個(0から9)の配列new arrayに当てはめます。

配列は0から始まリます。また、定義の仕方もいろいろあるのですが、この書き方はシンプルな書き方にしています。

関数名は勝手に決めればいいのですが、「予約語」というJavaScriptで決まっているものは使えません。

【04-08と09-13行】
配列の内容です。
これも、勝手に書きたい単語にすればいいのですが、ある程度、意味がわかるような文字にしておくのがいいでしょう。

あとの関数のところの内容を見ればわかるのですが、ooneとotwoに対応したものが、htmlで作る表中の窓に表示されるというものになっています。

次行からが、このメインで、少し重要なところです。

【14行】
関数fanction を定義します。 これらの書き方は決まっています。

function unun(){var oa=Math.round(10*Math.random());

赤字以外は書き方が決まっています。

関数の名前をununとしていますが、これは「運運」というだけのもので勝手に決めたものです。

次の、Math.random というのは「数学関数」の一つで、(細かい説明は抜きにして)0-1の間の乱数を発生させるものです。

それを10倍して整数部分を作っています。

例えば、作られた乱数が0.2316・・・とすると、10倍して2.316・・・にして、小数部分を切ってしまえば、0-9のランダムな整数が出来ます。

今回は、配列に入れた項目は10ですので10倍していますが、30の配列があり、0-29の乱数を発生したいならば、30を掛けてやるといいことになります。

その後の、Math.round という、小数点以下をまるめる関数を使って、整数の「oa」を算出しています。
このoaは、0-9の整数になっています。


普通はこの「oa」を「13-14行」のfirst・secondに渡してやればいいのですが、YNPさんは、[oa%10]という、「oa」を10で割った「余り」を「oe」として、それを表示させるようにされています。

多分、初回に同じものがでないように、乱数にバラエティーをあたえているのかもしれませんが、私のプログラムに加えるとすると、

oe=oa%10;document.noNaka.first.value=oone[oe];  
document.noNaka.second.value=otwo[oe];}

このあたりが、私のようなド素人とはひと味違うところなのでしょう。

ちなみに、この方法の違い[余りをとったもの(オレンジの棒グラフ)と取らないもの(青い棒グラフ)の違い]で、答えがどうなるのかを実際に30回表示させて試してみたのが下のグラフです。

この出現頻度を見ると、どちらも「ランダム性」があると言えるでしょう。もちろん、もっと試行を重ねれば、均一になって来るのですが、この結果の様子でも、結構、結果にばらつきがあるので、「偶然性」があるようになっていますね。


ここでは私のやり方のままでおいておきますが、これらはこれらを含めて、徐々に勉強することにします。

【15-16行】
htmlで「noNaka」というフォーム名の内容を画面に表示させます。
firstとsecondという枠に「ooneとotwo」の結果を表示します。
これらの名前は、勝手につけます。

【18-44行」】
表示させる枠の幅などを適当に指定します。

【28行】の<input type="button" value="Push:占ってみる" onclick="unun()" />
がJavaScriptを呼び出す「イベントハンドラ」と呼ばれるものです。


これだけのものですが・・・

カードをめくる、易で占う、おみくじを引く・・・ これらの「占い」の要素は「偶然性=ランダム」です。

もちろん、暦などの一部の占いなどでは、天体の運行の計算等によって算出されるものもありますが、計算で将来がわかるということはありません。

さらに、「当たるも八卦、当たらぬも・・・」というように、このような偶然性をどう表現するのか(結果として答えるのか)・・・というのも奥深くて面白いものです。

ここでの内容は、大したものではありませんが、いろいろと考えて発展できそうなものですので、この簡単な「占い」を作ってみて、それらも勉強してみようと思いました。


 
(来歴)H30.9 誤字、文章見直し R1.8 見直し

 【国際都市のローカル空港:大阪国際空港
大阪国際空港
大阪の人は伊丹空港と呼んでいる、市街地の真ん中にあって国際線のない国際空港ですが、今、工事が進んでいて大きく変ぼう中です。

 【オンライン英会話スクールの選びかた
スカイプを利用した英会話スクールの選び方
安い価格で簡単に英会話に触れることができる、スカイプを利用した英会話スクールの受講手順などを私が受講している経験を交えて紹介します。

 シニアでセブに単身の英語留学記
セブに英語留学に行きました
67歳で単身4週間フィリピンのセブ・マクタン島の英語学校に留学をしました。町や学校の様子などともに、渡航全般について9ページにわたり詳しく書いています。

 【キャラクターからの手紙「キャラレター
ポケモンサトシから手紙が届くサービス
お誕生日にTVのポケモンやリカちゃんなどのキャラクターから子どもさんに手紙が届くサービスがあります。プレゼントにどうでしょう。

記事の紹介

 【Googleで紹介された千里川土手
千里川土手上空を飛行機が・・・
着陸する飛行機が迫力満点で見ることができる場所として古くから有名です。駐車場や周りの案内をしています。

 【東大阪市加納緩衝緑地
加納緩衝緑地
東大阪の北部にある公園ですが、年々景観が良くなっています。一部を紹介しています。

 【交野市の源氏の滝
交野市 源氏の滝
WEBではパワースポットと紹介されていますが、なんとなくそれが感じられる場所で、涼を求めるのもいいでしょう。交野市のキャラクター「おりひめちゃん」

 【大阪モノレール 18駅を紹介
交野市 源氏の滝
4両で走るかわいいモノレール。ガンバ大阪のホームグラウンド最寄り駅の万博記念公園駅など18の駅を紹介しています

 【淀川の起点から大阪湾までを歩く
淀川を歩く
宇治川から淀川に名前を変えて大阪湾に注いでいますが、全行程を歩きました。