WebデザイナーのためのJavaScript & jQuery入門

簡単な占いを作ってみよう

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
占いの仕組みを考えることで、配列やランダムな数字を扱えるようになりましょう。
講師:
08:22

字幕

このレッスンでは簡単な占いのプログラムを作ってみましょう。ランダムな要素をどう処理するかがポイントになります。それでは、final のフォルダーを開きhtml の方をブラウザで確認してみましょう。ブラウザが開きましたらちょっとスクロールをすると「占う」というボタンがありますのでクリックしてみましょう。何回かクリックしますとこのようにランダムで点数とラッキーカラーが変わるようになっています。それでは、begin のフォルダーを開いてhtml をブラウザでそして html と main.js の2つを Sublime Text に落としましょう。そして、ウィンドウを並べておきます。そして、これから JavaScript をhtml に直接記述する方法と今回学ぶ外部の JavaScript ファイルを読み込む方法の2つあるという事を覚えておきましょう。それでは、閉じの body があるところの上でscript そして src (ソース )と表記をしてクォーテーションを打ってmain.js そして括弧を閉じるそして、script タグの終了タグを書いておきます。これで、長くなってしまったスクリプト等を外部の js ファイルとして切り離してそして、html で読み込むということができるようになりました。 それでは、このファイルは上書き保存をしておきます。そして、JavaScript の方に移動してこの main.js に記述をしていきましょう。まず必要なものは変数に入れて用意をしておきます。今回は点数であるluck とmessage という変数を2つ設定をしておきます。そして色のリストを配列で作りたいと思います。colors としてその中には括弧をまず作ってそして、色なのでクォーテーションで文字列として記述をしていきますがこのように青の部分をコピーして複製を取っておきます。そして、最後はカンマはいりません。この様にしたら色の中身を他の色に変えていきましょう。緑や白や黄色や紫黒などと7色入れてみました。そして、今度は「占う」ボタンも変数として取得をします。ボタンの中身は document.getElementByIdそして、クォーテーションを打ってボタンとします。これで id 属性のボタンとhtml でついているものを取得することができます。そして、今度は結果部分output という変数を作ってその中にもやはり id で取得しなければなりませんのでgetElementByIdそして括弧の中身がoutput としておきます。 そして、ここからがボタンをクリックしたらのイベントを作りますのでbtn.onclick というものが書いてあります。そして1から 100 までの整数を取り出すにはluck= まず小数点がいらないのでMath. floor で小数点は切り捨てる準備をしておきます。そして、乱数ランダムな数字を取り出すにはMath.random というメソッドを使えますがこれは小数をあくまでも取得するためのメソッドですのでそちらにまず掛け算を 100 します。そうすると、0.1 であっても10、20 といったデータを取得することができます。そしてこれだと 99 点までしか取得できないので+1 として最高点を100 点 としておきます。そして、今度は color の部分です。新しく random_color という物を宣言してそこに colors の配列の中からランダムでやはり取り出したいのでここも小数点切り捨てをまず書いてからランダムな数を取り出しますがやはり「0.~」 ではまずいのでこれに掛け算をします。ここでポイントなのは色の数は7なので color の配列の数を取得するプロパティlength を記述します。 こうすることで色の配列の数7個を取得する事ができてそれに掛け算をすることでランダムな数字を導き出す事ができます。そして、今度はメッセージの部分にhtml を表示しましょう。html はまずh4 と見出し扱いにしておきます。+ ランダムな数字が出る筈のluckそして、ここも html になりますのでspan 点そして span タグの閉じそしてここで見出しタグを閉じておきます。そして、更にメッセージにラッキーカラーも追加したいのでただのイコールではなくて加算をする演算子+= と書いてあげてここに p タグで段落を作りラッキーカラー:そして、+ の random_colorそして、これに閉じタグの p を入れておきます。そして、これを最後にhtml に出力するにはoutput という変数の中身にinnerHTMLこれで中身に表示させることができるようになりますのでmessage という風に今こちらで作った材料をこの中に放り込んだ状態になりましたので上書き保存をしてブラウザ上で更新そして「占う」ボタンを押してみましょう。このようにボタンを押す度に違う結果が出てくるようになれば正解です。このレッスンではどのようにしてランダムな数字を導き出してそのランダムな数字と配列の組み合わせ方を学びました。

WebデザイナーのためのJavaScript & jQuery入門

jQueryはJavaScriptをあまりよく知らない人でも効率良く記述できるように作られたライブラリです。jQueryを使用すると、インタラクティブな演出や仕掛けを効率良くウェブサイトに実装することができます。このコースではJavaScriptとjQueryの基本を学んだうえで、それぞれの実際の応用の仕方について学んでいきます。

2時間49分 (27 ビデオ)
現在、カスタマーレビューはありません…
 

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。