【javascript初心者用】Mathクラスの勉強に!運試しサイトの作成方法!!2017/05/12SHAREツイートシェアはてブGoogle+PocketLINEツイートシェアはてブGoogle+PocketLINEスポンサーリンクjavascriptの勉強をしているプログラミング初心者の方向けに!今回は、Mathクラスの勉強として、運試しサイトの作成をやってみましょう!Mathクラスは、数値の演算を行う上で非常に便利な関数や定数が用意されています。作成サイトの概要まずは完成サイトを確認してみよう詳細設計を見ていきますさっそく作成開始!HTMLを書いていきますCSSをちょっとだけjavascriptを書いていく!!動かしてみる!まとめスポンサーリンク作成サイトの概要まずは、今回作成していくサイトの概要から見ていきます。完成サイトを確認してみよう今回作成するサイトの完成サイトを見てみましょう。運試し!!デザインに関しては、今回の勉強内容から外れるため非常にシンプルなものにしています。これから作成するサイトのイメージは出来ましたでしょうか?詳細な設計に関してもちょっと見ていきましょう。詳細設計を見ていきます今回の作成サイトの簡単な内容はこちら。「記事タイトル」を入力してもらい、「運試し!」ボタンを押すとPV(ページビュー)数がランダムに表示されるサイト※PVとは、そのWebページが何回見られたかの数字を表す単位のことです。ランダムに数字を表示といっても、完全にランダムでは面白くありません。入力された記事タイトルの文字数を使って、ちょっと制御をかけてみます。制御の内容に関しては、実際に作成しながら見ていきたいと思うので、ここでは省略させていただきます。何はともあれ作っていきましょう!さっそく作成開始!それでは、作成をしていきましょう!まずは、ページを作るのでHTMLを書いていきます!HTMLを書いていきますまず定型文の所を書いていきます。運試し!</title></head><body></body></html>はい、定型文にプラスして、titleタグだけ書いておきました。続いて、headタグを書いていきます。src="main.js"></script></head>今回は、CSSもjavascriptも別ファイルにしたいと思うのでheadタグではそのファイルを読み込むだけです。続いてbodyタグも埋めていきます。・記事タイトルを入力するコントロール・運試しボタン・結果表示領域ってところですね。id="output"></div></body>こんな感じ。id="output"></div>記事タイトルのinputタグと出力用のdivタグに、「id」を指定しておきます。javascriptで、入力文字を取得したいし、出力する所を指定しないといけないので。あと、ボタンにはクリックしたときのイベントも設定しておきましょう!CSSをちょっとだけ今回は特にデザインは触らない予定だったのですが、記事タイトルの入力タグ。初期のままだと幅が短すぎるので、伸ばしておきます。600px;}もっとデザインをキレイにしたい!って方は、お好きなようにCSSを書いて頂ければと思います!javascriptを書いていく!!はい!今回のメイン部分ですね!javascriptを書いていきます!一気にいきますよ!!まずは、上でボタンのクリックイベントに指定しておいたfunctionを作成します。btnClick(){};それでは中身を作っていきます!まずは、入力された記事タイトルの取得と出力するdivタグを取得しておきます。取得した記事タイトルの文字数を取得しておきます。title.length;要素の取得は「getElementById」でIDを指定して取得してきます。「.value」を付ければ、その要素の値を取得できます。文字数の取得は「.length」をつければ文字数を取得できます。・結果数値の桁数を取得する際の重みをつける・最終結果数値に重みをつけるとします。}みんな大好き!「if文」ですね!!さて、ここまでは前ふりみたいなもんです!!やっとMathクラスを使っていきます!!まずは「桁数」を決める処理から!桁数は、「0~9」桁で割り振りをしてみます。ここで「0」が指定されたら・・・な結果になってしまいますが気にしない!!気になる人は、digに+1してもらえばオッケーです。重みを掛けてあげて、小数は四捨五入してあげましょう。ここで使っているMathクラスは3つ!「random関数」と「floor関数」と「round関数」です!「random関数」0.0以上1.0未満の乱数を返します。小数点以下の値を切り捨てた結果を返します。四捨五入を計算しその結果を返します。これで桁数が決定しましたね!!続いて、それぞれの桁毎に数字を決めていきます。}まずは、0~9の数値を取得します。今がどの桁の数字なのかを乗数を使って判別していきます。最後に、出力する数値に足し合わせていけばオッケー。小数点以下の値を切り上げした結果を返します。累乗を計算した結果を返します。これで出力結果の数値を作ることが出来たので、重みを掛け合わせて、出力するdivタグにセットすれば完了です。PV";動かしてみる!作成が完了したのでさっそく動かしてみます!みなさんが作成したものとはちょっと見た目が違いますが、中身は一緒です。※このブログ用でちょっとだけデザイン付けてるだけです。この記事のタイトルを入力してます!それでは、いざゆかん!!ん?・・・・3PVって・・・。3回しか見られないってことですね!!悲しすぎる。いう時は、まず「F12」を押してと。見ておきたい!自分のサイトのHTML確認方法!まとめいかがでしたか?今回ご紹介したMath関数は絶対に使えるようになっておいた方が良いので他にもたくさんあるし、何か作りながら勉強してみることをオススメしますよ!<合わせて読みたい!>【プログラミング】初心者におすすめ!勉強したことを身に着ける思考法。UI】超シンプルタスク管理を作ってみる。2017をインストールしよう!【第7話】作って学ぶPHP!初心者による実践録!~一覧画面2~【Excel】たった2つのショートカットで作業効率!【リリース】超シンプル!!ブックマークを管理するだけのサイト!未熟なITエンジニアだった私が、転職して1年でスキルアップしたこと。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。【teratail(テラテイル)】プログラミング初心者におすす...プロフィールのらくらへっぽこプログラマーとして、日々頑張って勉強をしております。未熟なITエンジニアだった私が、転職して1年でスキルアップしたこと。【リリース】朝が苦手な私が、朝活応援サイトを作りました。5万円だけ入れて半年放置した結果。