javascriptの勉強をしているプログラミング初心者の方向けに！
今回は、Mathクラスの勉強として、運試しサイトの作成をやってみましょう！
Mathクラスは、数値の演算を行う上で非常に便利な関数や定数が用意されています。確実に使うことが出来るようになっておきましょう！！
作成サイトの概要
まずは、今回作成していくサイトの概要から見ていきます。
まずは完成サイトを確認してみよう
今回作成するサイトの完成サイトを見てみましょう。
それがこちら。
デザインに関しては、今回の勉強内容から外れるため非常にシンプルなものにしています。
これから作成するサイトのイメージは出来ましたでしょうか？
詳細な設計に関してもちょっと見ていきましょう。
詳細設計を見ていきます
今回の作成サイトの簡単な内容はこちら。
「記事タイトル」を入力してもらい、「運試し！」ボタンを押すとPV（ページビュー）数がランダムに表示されるサイト
※PVとは、そのWebページが何回見られたかの数字を表す単位のことです。
ただ、ランダムに数字を表示といっても、完全にランダムでは面白くありません。
なので、入力された記事タイトルの文字数を使って、ちょっと制御をかけてみます。制御の内容に関しては、実際に作成しながら見ていきたいと思うので、ここでは省略させていただきます。
まあ、何はともあれ作っていきましょう！
さっそく作成開始！
それでは、作成をしていきましょう！
まずは、ページを作るのでHTMLを書いていきます！
HTMLを書いていきます
まず定型文の所を書いていきます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>記事タイトル de 運試し！</title> </head> <body> </body> </html>
はい、定型文にプラスして、titleタグだけ書いておきました。
続いて、headタグを書いていきます。
<head> <meta charset="utf-8"> <title>記事タイトル de 運試し！</title> <link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript" src="main.js"></script> </head>
今回は、CSSもjavascriptも別ファイルにしたいと思うのでheadタグではそのファイルを読み込むだけです。
さらに続いてbodyタグも埋めていきます。
必要な要素としては、
・運試しボタン
・結果表示領域
ってところですね。
<body> <p>記事タイトル：<input type="text" name="task" id="txtTitle"></p> <p><input type="submit" value="運試し！" onclick="btnClick();"></p> <div id="output"></div> </body>
こんな感じ。
ポイントとしては、
<input type="text" name="task" id="txtTitle"> <div id="output"></div>
記事タイトルのinputタグと出力用のdivタグに、「id」を指定しておきます。
javascriptで、入力文字を取得したいし、出力する所を指定しないといけないので。
あと、ボタンにはクリックしたときのイベントも設定しておきましょう！
CSSをちょっとだけ
今回は特にデザインは触らない予定だったのですが、記事タイトルの入力タグ。
さすがに初期のままだと幅が短すぎるので、伸ばしておきます。
#txtTitle {
width: 600px;
}
もっとデザインをキレイにしたい！って方は、お好きなようにCSSを書いて頂ければと思います！
javascriptを書いていく！！
はい！今回のメイン部分ですね！
javascriptを書いていきます！
一気にいきますよ！！
まずは、上でボタンのクリックイベントに指定しておいたfunctionを作成します。
function btnClick(){
};
それでは中身を作っていきます！
まずは、入力された記事タイトルの取得と出力するdivタグを取得しておきます。
そして、取得した記事タイトルの文字数を取得しておきます。
ソースはこんな感じ。
//入力された記事タイトルを取得
var title = document.getElementById('txtTitle').value;
//出力するオブジェクトを取得
var out = document.getElementById('output');
//記事タイトルの文字数を取得
var count = title.length;
要素の取得は「getElementById」でIDを指定して取得してきます。
「.value」を付ければ、その要素の値を取得できます。
文字数の取得は
「.length」をつければ文字数を取得できます。
続いて、文字数を使って制御をかけると書いていた通り、その処理を書いていきます！
内容としては、
・最終結果数値に重みをつける
とします。
重みに関しては、
・４０文字以上の場合は、桁数重みを「0.8」、通常重みを「0.8」に
・３５文字ちょうどの場合は、桁数重みを「1.5」、通常重みを「2.0」に
・それ以外の場合は、桁数重みを「1.0」、通常重みを「1.25」に
こんな感じにしてみましょう！特に理由はないです！！
//通常重み
var weight = 0;
//桁数重み
var dgtweight = 0;
//文字数で重みを決定
if (count < 15) {
weight = 0.5;
dgtweight = 0.8;
}
else if (count > 40) {
weight = 0.8;
dgtweight = 0.8;
}
else if (count == 35){
weight = 2;
dgtweight = 1.5;
}
else {
weight = 1;
dgtweight = 1.25;
}
みんな大好き！「if文」ですね！！
さて、ここまでは前ふりみたいなもんです！！
やっとMathクラスを使っていきます！！
まずは「桁数」を決める処理から！
桁数は、「０～９」桁で割り振りをしてみます。
ここで「０」が指定されたら・・・な結果になってしまいますが気にしない！！
気になる人は、digに＋１してもらえばオッケーです。
そして、重みを掛けてあげて、小数は四捨五入してあげましょう。
ソースはこんな感じ。
//桁数を決定 var dig = Math.floor( Math.random() * 10 ); dig = Math.round(dig * dgtweight);
ここで使っている
「random関数」と「floor関数」と「round関数」です！
0.0以上1.0未満の乱数を返します。
小数点以下の値を切り捨てた結果を返します。
四捨五入を計算しその結果を返します。
これで桁数が決定しましたね！！
続いて、それぞれの桁毎に数字を決めていきます。
やり方はこんな感じ。
//出力する数値を保持
var pv = 0;
//各桁に数字を割り振る
for (var i = 0; i < dig; i++){
var num = Math.ceil( Math.random() * 10 );
var keta = Math.pow(10, i);
if (i == 0) {
pv = num;
}
else {
pv = pv + (num * keta);
}
}
まずは、0~9の数値を取得します。
そして、今がどの桁の数字なのかを乗数を使って判別していきます。
最後に、出力する数値に足し合わせていけばオッケー。
ここで新しく出てくる
「ceil関数」と「pow関数」
小数点以下の値を切り上げした結果を返します。
累乗を計算した結果を返します。
これで出力結果の数値を作ることが出来たので、重みを掛け合わせて、出力するdivタグにセットすれば完了です。
//pvに重みをかける pv = Math.round(pv * weight); out.innerHTML = pv + " PV";
動かしてみる！
作成が完了したのでさっそく動かしてみます！
みなさんが作成したものとはちょっと見た目が違いますが、中身は一緒です。
※このブログ用でちょっとだけデザイン付けてるだけです。
この記事のタイトルを入力してます！
それでは、いざゆかん！！
ん？・・・・３PVって・・・。
３回しか見られないってことですね！！悲しすぎる。
こういう時は、まず「F12」を押してと。
これで。
こうですね！！
何をやってるかわからないって方は、こちらの記事をヒントにしてみて下さーい！！
まとめ
いかがでしたか？
今回ご紹介したMath関数は絶対に使えるようになっておいた方が良いので
他にもたくさんあるし、何か作りながら勉強してみることをオススメしますよ！
＜合わせて読みたい！＞
ブログ村に参加してます！
それでは、
のらくら でした！
[…] 【javascript初心者用】Mathクラスの勉強に！運試しサイトの作成方法！！ […]