プログラミング独学day53の学習で、得たことや気づきを教えて！
今日は
・jQuery バナー画像をランダムに表示させる
をアウトプットします！
こんにちは。プログラミングでweb制作ができるようになりたいharuです。
2歳0歳の育児をしながら、22時〜1時に独学しています！
→プログラミング学習day53、もりけん塾day9
わかったことや、気付きをログに残します。
同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。
【jQuery】 バナー画像をランダムに表示させる
今日は、「jQuery標準デザイン講座本」からアウトプットです。
バナー画像をランダムに表示させていきます。
これをやるには、生のJavaScriptの知識が必要です。
何を隠そう、わたしはjQueryを触りながらその都度出てきたJavaScriptを学習しているというスタイル。(こりゃ怒られそうやで…)
今回は、いくつかJavaScriptの基礎が出てきたので、制作の流れとともにまとめたいと思います。
完成物
完成物はこちら。
ちょっと、gif画像にしたら速度が半端ないんだけどw
更新ボタンを押すと、バナーがランダムに変わるという制作物です。
構成
必要な構成をまとめます
【構成】
①画像のファイル名を「配列」にする
②ランダムな整数を生成する
③バナーを表示する
バナーをランダムに表示させてみよう
ここから制作に入ります。
構成① ファイル名を配列にする
5つあるバナー画像をまとめて使いたい→「配列」を宣言する
→複数のデータをまとめて管理するためのboxのこと
配列を宣言する方法(＝boxに入れよう！)
→ var 配列名 = [A, B, C, D, E];
ちなみに…
0番目：A
1番目：B
2番目：C… のように0番目から数える
ということで、初心者ゆえ、前置きが長くなったが配列を宣言してみる。
[]で囲まれたboxのなかに、まとめて扱いたいimgファイル名をいれていきます。
→ファイル名は「red.jpg」のようになってます
構成② ランダムな整数を生成する
次に、さっき宣言した「配列」のimgファイル名をランダムに取り出せるようにしていきます。
そのためには
というプログラムを組む必要があります。
①Math.random()
まず、JavaScriptの「Math.random」というオブジェクトを使って0~1未満のランダムな整数を作ります。それを変数numに代入する。
→数値のいろいろな処理ができる
バリエーション豊富
例) Math.floor() 少数を切り捨てて整数にする
Math.ceil() 少数を切り上げて整数にする
Math.round() 少数を四捨五入する
そして、その中のひとつがMath.random
→0~1未満のランダムな値を作ることができるオブジェクト
これで、0~0.99999…の数字を作ることができました。
②変数numに5をかける
Math.random()で作った0~0.999…の値に5をかけます。
画像ファイルが5つあるからです。
これで、0~4.9999…という値ができあがります。
③小数点を切り捨てて整数にする
先ほどまとめたMathオブジェクトの１つ、Math.flooeで小数点を切り捨てます。
ここまでで、0~4の5つの整数がランダムに生成されます。
構成③ バナーを表示
最後にMath.random()〜で生成した値を使って、バナーをランダムに表示させていきます。
.attr()でimg要素のsrc属性部分を書き換えます。
つまり、画像ファイル名を変えていきます。
→先ほど var bannerArray = [] で画像ファイルの配列を宣言したのでした。
ここでのbannerArray[]は、[]に番号を入れることで配列内の要素を取得するためのものです。
あとがき
もりけんさんのHPはこちら
