超初心者向け!!JavaScriptも一緒に学ぼう。Part.2

前回の続きです。Part.1はこちら。

超初心者向け!!JavaScriptも一緒に学ぼう。Part.1
さぁ、オーカワに触発されPC言語について学び始めたオサダ...

前回学んだことを(めちゃめちゃ)発展させながら、オーカワの運勢診断をアレンジしてみます。できるかな?

オーカワから学ぶまで、僕はプログラミングとは暗記だと思っていたのですが、全然そんなことはないそうです。

むしろわからなければどんどん調べて、自分のプログラムに昇華させる事の方が遥かに大事なんだそうです。

そんな訳で、いろいろ調べながらやっちゃいますよ!!今回はPart.1と違い、タグの説明ではないです!!初心者でもこんなことができるよ!って感じの記事ですので、ご了承ください。

作っていきましょう!

イメージは、日付を取得し適当に運勢を決めて、それをおみくじ画像のクリックで表示する、というプログラム。

きっとできるさ。人間が想像できることはすべて可能なんだ。僕如きの思想がプログラミングで再現できないわけがない……。

Step1:まずは日付を表示させる

JavaScriptは利用者の端末から様々な情報を取得し、保存することができます。

今回は日付を取得してみます。こちらのサイトを参考にしました。

こんな感じに表示させることができます。

ここまでで一段落。フゥ……。

ちなみにこんな感じ。

<div><script> //html内にJavaScriptを動作させるには左のタグが必要。
    var hiduke = new Date(); //hidukeという変数に日付や時間などを取得。
    var month = hiduke.getMonth()+1; //monthという変数の中に、月を取得。+1は必須
    var day = hiduke.getDate(); //dayに日付を取得。
    document.write("今日は、" + month + "月" + day + "日です。"); //表示。
</script></div>

『new Date()』というMathオブジェクト(初めからJavaScriptに組み込まれている機能)が年度や日付、時間などを取得してくれるようです。その中から月と日を変数に保存して表示しました。

今回はhidukeという、シンプルというかもはや安直極まりない名前にしましたが、何でもいいですよ。

Step2:画像クリックに対応させてみる

次は、挿入した画像のクリックによって、ポップアップ画面で任意の文章を起こしてみます。

画像はpng(sample.png)ですこのpngをクリックするとJavaScriptが実

質問サイトですが、シンプルなのでこちらを見るとわかりやすいかもしれないです。

とりあえずStep1で作った日付を表示させてみますか。下の画像をクリックしてみて下さい。

出ましたかね?ポップアップをブロックしてると出ないかも?

こんな感じになってます。関数の名前は『imgClick1()』にしてみました。(関数は前回やらなかったので、次の時に解説したいと思います。申し訳ありません。)

<div><script>
    function imgClick1(){
        alert("今日は、" + month + "月" + day + "日です。");
    }  //このfunctionで、クリック後の動作を決めている。alertはポップアップ。
</script></div>
<p><a onclick="imgClick1()"><img src="http://routecompass.net/wp-content/uploads/2017/06/a844e18ead3a961516886b3982270eef-300x300.png" alt="" width="300" height="300" class="alignnone size-medium wp-image-2800" /></a></p> <-- htmlで画像を表示。クリックも取得している。 -->

monthとdayの変数は、Step1のものをそのまま使えている様子。ふむふむ。

実はこのクリック&ポップアップ。htmlだけでもできるようですね。(決められた文章しか出せませんが……)知らなかった……。

『onclick="○○"』で「クリックしたら○○と名付けられた動作を作動させる。」というイメージですね。そこに関数『imgClick1()』を入れているわけです。

『img src=""』の部分はWordPressで画像を挿入したらいろいろ付いたので、すみませんちょっとよくわかんないです。

Step3:ランダムに運勢を表示する

運勢を出すのをランダムにしたいので、乱数を使用することにしました。

乱数は、『random()』『floor()』というMathオブジェクトを使います。こちらを参考にしました。

JavaScriptでランダムでメッセージや画像を表示したい時に、

このオブジェクトを使うと『0~任意の整数』をランダムで取り出すことができるので、数字に対して運勢を決めて表示するという形式にしました。

ということでこれが完成品!!!さぁみなさん、おみくじですよ。クリックしてみてください!!

どうですか!!楽しめませんか!!僕は楽しいです、たくさんクリックしちゃう!!!!

こんな感じで作りました。if-elseたくさん使ってますよ。

<div><script>
    function imgClick2() {
        var i = Math.floor(Math.random() * 100);
        var yoso;
        if (i < 20) {
            yoso = "大吉";
        } else if (i >= 20 && i < 50) {
            yoso = "凶";
        } else if (i >= 50 && i < 65) {
            yoso = "大凶";
        } else {
            yoso = "吉";
        }
      alert("今日は、" + month + "月" + day + "日です。今日のあなたの運勢は" + yoso + "です。");
    }
</script></div>
<p><a onclick="imgClick2()"><img src="http://routecompass.net/wp-content/uploads/2017/06/50429c0c416317dee67920a0351fb92c-1-300x285.png" alt="" width="300" height="285" class="alignnone size-medium wp-image-2811" /></a></p>

Math.floor(Math.random() * 100); という部分は、

  • Math.random()で0~0.9999....(1未満)の数を出し、
  • Math.floor()で小数点以下を切り捨てる。

こんな動作をしています。

そのため『*100』することで『0~99.999...』となり、さらに小数点以下を切り捨てて『0~99』という数字が出て来るわけですね。

各運勢の確率は適当ですので、数字を変えてみたり、1/100の確率でレア運勢(超吉とか)を入れてみてもたのしいかもしれませんね。

まとめ

初心者ながら、結構楽しく作れました。

いやはや、完成してよかったですよ。最初は調べても全然理解出来なかった……。

でも一回作ってみると、ここが無駄だとか、ここをこうすればもっとよくなるとか、いろいろ考えるようになるんですよね。これが成長……!!

ちなみにこんなに短いプログラムで、早速オーカワ氏に無駄を指摘されました。

オーカワ「Math.floor()いらなくね?」

オサダ「……?……!!た、たしかに!!!!」

今回僕は、『ランダムに出てきた数字がどの範囲になるかで判定する』形式を取っていたので、小数点は別にあっても良かったわけですね。

言われてみればめちゃめちゃ納得ですよ。さすがオーカワ!!!

さぁ今回の出来は60点くらいってことにしておきましょう!!問題点指摘されたし!

また色々作ってみたいですねぇ。もし手を出してみたい!って人は、僕と一緒に学んでいきましょう!!!

ただし、次のJavaScript講座の更新は……未定です!!!(^ω^)

ちなみに、僕の永遠のライバル・オーカワ氏の現在のJavaScriptレベルは下の記事から……。強くね?

【解説】アナグラム全パターン作成
以前Pythonでアナグラム解析をする記事を書かせて頂きまし...

The following two tabs change content below.

オサダ

様々なジャンルの記事を書いていきます。
興味がないのに読んでしまう。そんな記事を目指して。

言葉を介してあなたのもとに。言葉がなくともあなたと共に。

連絡先:osada@routecompass.net