ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

【jQeury】「お仕事診断」をするプログラムを書いてみた ※配列、Mathオブジェクト

2016年5月7日

名前を入力して、「診断する」ボタンを押すとお仕事診断ができるプログラムを書いたので、内容を整理する為に記事を書いてみた。
今回主に、配列、Mathオブジェクト(floor、random)を使用した。
以下がそのsampleコードとなります。

【html】

1
2
3
4
5
6
7
<body>
<h1>お仕事</h1>
    <p><input type="text" id="name" value=""></p>
    <p><input type="button" id="button" value="診断する"></p>
    <h2>診断結果</h2>
    <p id="result">こちらに結果が表示されます。</p>
</body>

【js】

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function(){
$('#button').click(function(){
var name = $('#name').val();
if(name == ''){
alert('名前を入力してください');
return;
};
var kind = ["みんなに優しい","性格がわるい","温厚な","怠け者の","仕事のできる","足が臭い"];
var type = ["泥棒","警察官","公務員","プログラマー","営業職","キャリアウーマン"];
var kinds = kind[Math.floor(Math.random() * kind.length)];
var types = type[Math.floor(Math.random() * type.length)];
$('#result').text(name + 'さんは「' + kinds + types + '」です!');
});
});

上記のプログラムを日本語にしたら、以下のようなロジックとなる。

  • #buttonをクリックしたら実行
  • #nameのvalを取得する変数「name」を作成
  • 次に診断結果となる「お仕事」の配列(kind、type)を作成
  • 作成した配列をランダムで取得する変数(kinds、types)を作成
  • #resultに入っている文字を入力された名前とお仕事に書き換わるようにする
  • ボックスの中が空だったら「名前を入力してください」というアラートを出すようにする

今回、Math.random() が最初しっくりこなかったが、これは0~1未満の数字をランダムに返す(0~0.99)ので、kind.length(今回6コ ※type.lengthも同様)と乗算してあげることで配列に格納されている(0~5の数字)を返してくれることになる!
例えば、乗算の結果がそれぞれkind[2]、type[0]の場合は、「温厚な泥棒」という結果になる。
※Math.floorは小数点以下を切り捨てる処理

ちなみに僕の診断結果は、
yabikuさんは「怠け者のプログラマー」です!
とのこと、、、そんなに怠け者じゃないけどな〜

【デモ】
http://341552227d92946d.main.jp/20160507sample/sample.html

【参考サイト】
http://dotinstall.com/lessons/shindan_js_v2/50103

関連記事

  • コピペでOK!ハンバーガーメニューを横からスライド表示させるサンプル(レスポンシブ対応)2017年11月27日 コピペでOK!ハンバーガーメニューを横からスライド表示させるサンプル(レスポンシブ対応)
  • iPhone(ios)でスクロール時に起きるresizeイベントをなくす方法2017年7月4日 iPhone(ios)でスクロール時に起きるresizeイベントをなくす方法
  • 【jQuery】スマホ時にトップへ戻るボタンの表示非表示が一瞬チラつく場合の対処法2017年11月1日 【jQuery】スマホ時にトップへ戻るボタンの表示非表示が一瞬チラつく場合の対処法
  • 【jQuery】要素にランダムかつ重複なしにクラスを付与する方法2019年1月27日 【jQuery】要素にランダムかつ重複なしにクラスを付与する方法
  • 【jQuery】scrollme.jsプラグインが動作しない!?jQueryのバージョンが原因だった!2017年11月2日 【jQuery】scrollme.jsプラグインが動作しない!?jQueryのバージョンが原因だった!

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.