Index

ＪＳおみくじ

　初心者学習用の簡単なおみくじです。同じものを三種類つくってみます。後のものほどオブジェクト指向の強い方法となります。オブジェクト指向のプログラミングを実現すると、全体の設計や、後々の修正などの管理が格段にやりやすくなります。他の人が見ても全体像が把握しやすく、後から直すにしても最小の労力で直すことができるようになります。
　また、すべて別ファイルにすることを前提につくっています。オブジェクト指向の学習用にでも試してみてください。

■オブジェクトを配置してつくる
■オブジェクトもコードでつくる
■クラスも利用してつくる

sasaraan programming

Exposition

■オブジェクトを配置してつくる

/* 'omikuji.js'ソース */
// くじの種類
var aUnsei = new Array("大吉","中吉","小吉","吉","末吉","凶","小凶","中凶","大凶");
// くじが出る確率
var aRitsu = new Array(0.05, 0.1, 0.15, 0.2, 0.2, 0.1, 0.1, 0.05, 0.05);
// 表示するテキストオブジェクト
var oText;

// 初期化
function Init(objtext)
{
    oText = objtext;
    with (oText) {
        value = "おみくじ";
        style.width = "6em";
        style.textAlign = "center";
        style.color = "#ffffff";
        style.backgroundColor = "#993333";
    }
}

// くじをひく
function Draw_Click() 
{
    var nRand = Math.random();
    var nRitsu = 0;
    var i;
    for (i=0; i<aRitsu.length; i++) {
        nRitsu += aRitsu[i];
        if (nRand <= nRitsu) break;
    }
    oText.value = aUnsei[i];
}

/* HTMLソース */
<head>
    <meta http-equiv="content-type" content="text/html; charset=Shift_Jis">
    <meta name="content-language" content="ja">
    <title>おみくじ</title>
    <script type="text/javascript" src="omikuji.js"></script>
</head>
<body>
    <input type="text" id="kuji"/> 
    <input type="button" value="くじをひく" onclick="Draw_Click()"/>
    <script type="text/javascript"><!--
        Init(document.getElementById("kuji"));
    --></script>
</body>

●宣言部: 　"aUnsei"と"aRitsu"では、Arrayオブジェクトを使って、表示する文字列と出る確率を配列にしています。宣言と同時に初期化して九つの要素を追加しています。この二つの配列は相互に対応していて、たとえば「大吉」の出る確率は「0.05」、次の「中吉」の出る確率は「0.1」となります。
　"oText"はくじの結果（「吉」とか「凶」とか）を表示する場所です。HTML側でオブジェクトを指定して、Init関数に引数として渡すと、ここに代入されます。
●Init関数: 　Init関数はHTMLのbodyタグ内の任意の場所で呼び出します。引数"objtext"はtextオブジェクトのことです。引数で指定されたtextオブジェクトにおみくじを引いた結果を表示することになります。ただし、このオブジェクトは関数内でしか使えませんので、関数外で宣言した"oText"変数に代入して、他の関数（Draw_Click関数）でも使えるようにしています。
　次のwith構文ではstyleプロパティを使ってtextオブジェクトのスタイルを設定していますが、もちろんこれはHTMLのタグ内で処理しても、別途スタイルシートで設定してもかまいません。
●Draw_Click関数: 　Draw_Click関数は、buttonオブジェクトのonclickイベントに結び付けて使用します。まず、変数"nRand"には、Mathオブジェクトのrandomメソッドを使って乱数を取得しています。ここで生成される乱数は、「0以上1以下の浮動小数点」となります。0も1も含まれます。また、整数ではありませんので注意が必要です。
　次にfor文で、取得した乱数をもとに、おみくじの出る確率に照らし合わせて表示する文字列を割り出します。変数"nRitsu"には、出る確率を計算して代入します。"nRitsu += aRitsu[i];"がこれに当たります。配列aRitsuの最初から順に足していき、乱数"nRand"がその範囲内であればbreakキーワードで構文を抜けます。この時、カウンタ変数"i"は、配列aRitsuの要素の場所を指しているので、対応する配列aUnseiの同じ位置の要素が求める文字列です。最後にoTextオブジェクトのvalueプロパティに代入して処理は完了します。
●HTML側の記述: 　HTML側では、headタグ内でファイルを読み込んでおき、bodyタグ内でInit関数を呼び出しています。この際、あらかじめtextオブジェクトを作成し、id属性を付加（ここでは、id="kuji"）しておく必要があります。そして、getElementByIdメソッドを使ってオブジェクトを特定し、Init関数の引数に渡しています。
　さらに、buttonオブジェクトもあらかじめつくっておき、onclickイベントハンドラにDraw_Click関数を指定します。

■オブジェクトもコードでつくる

/* 'omikuji2.js'ソース */
// くじの種類
var aUnsei = new Array("大吉","中吉","小吉","吉","末吉","凶","小凶","中凶","大凶");
// くじが出る確率
var aRitsu = new Array(0.05, 0.1, 0.15, 0.2, 0.2, 0.1, 0.1, 0.05, 0.05);
// 表示するテキストオブジェクト
var oText;

// 初期化
function Init(parent)
{
    // textオブジェクトの作成
    oText = document.createElement("input");
    with (oText) {
        value = "おみくじ";
        type = "text";
        style.width = "6em";
        style.textAlign = "center";
        style.color = "#ffffff";
        style.backgroundColor = "#993333";
    }
    parent.appendChild(oText);

    // buttonオブジェクトの作成
    var oButton = document.createElement("input");
    with (oButton) {
        value = "くじをひく";
        type = "button";
        onclick = Draw_Click;
    }	
    parent.appendChild(oButton);
}

// くじをひく
function Draw_Click() 
{
    var nRand = Math.random();
    var nRitsu = 0;
    var i;
    for (i=0; i<aRitsu.length; i++) {
        nRitsu += aRitsu[i];
        if (nRand <= nRitsu) break;
    }
    oText.value = aUnsei[i];
}

/* HTMLソース */
<head>
    <meta http-equiv="content-type" content="text/html; charset=Shift_Jis">
    <meta name="content-language" content="ja">
    <title>ＪＳおみくじ</title>
    <script type="text/javascript" src="omikuji2.js"></script>
</head>
<body id="kuji" onload="Init(document.getElementById('kuji'))">
</body>

●宣言部: 　宣言部は同じです。"aUnsei","aRitsu","oText"の各変数を定義しています。
●Init関数: 　Init関数は、引数として親オブジェクト"parent"を必要とします。この親オブジェクト内に、文字を表示するtextオブジェクトと、くじを引く操作に対応するbuttonオブジェクトを動的に作成しています。
　オブジェクトの作成には、createElementメソッドを利用します。引数に作成するオブジェクトの種類を指定します。ここでは二つとも"input"を指定し、typeプロパティに、それぞれ、"text"、"button"を設定します。
　これだけでは、メモリ上にオブジェクトが作成されただけなので、表示するには、これを親オブジェクトに結び付けなければなりません。それにはappendChildメソッドを利用して結びつけます。すると親オブジェクトの子供として組み込まれ表示されるようになります。
●Draw_Click関数: 　Draw_Click関数の中身は同じです。ただし、イベントハンドラの場所はInit関数内のbuttonオブジェクト設定時になります。
●HTML側の記述: 　HTML側では、headタグ内でファイルを読み込んでおきます。ここでは、textオブジェクトもbuttoｎオブジェクトも、Init関数内でつくりますので、事前につくっておく必要はありません。
　Init関数は、bodyタグ内で、onloadイベントハンドラを使って呼び出しています。この際、表示したい場所にid属性を付加（ここでは、id="kuji"）しておく必要があります。そして、getElementByIdメソッドを使ってオブジェクトを特定し、Init関数の引数に渡しています。

■クラスも利用してつくる

/* 'omikuji3.js'ソース */
// "くじ"関数（クラス）
function Kuji(name, ritsu) {
    this.Name = name;    // 名前
    this.Ritsu = ritsu;     // 確率
}

// "Kuji"オブジェクトの配列
var aKuji = new Array(9);
aKuji[0] = new Kuji("大吉", 0.05);
aKuji[1] = new Kuji("中吉", 0.1);
aKuji[2] = new Kuji("小吉", 0.15);
aKuji[3] = new Kuji("吉",    0.2);
aKuji[4] = new Kuji("末吉", 0.2);
aKuji[5] = new Kuji("凶",    0.1);
aKuji[6] = new Kuji("小凶", 0.1);
aKuji[7] = new Kuji("中凶", 0.05);
aKuji[8] = new Kuji("大凶", 0.05);

// 表示するテキストオブジェクト
var oText;

// 初期化
function Init(parent)
{
    // textオブジェクトの作成
    oText = document.createElement("input");
    with (oText) {
        value = "おみくじ";
        type = "text";
        style.width = "6em";
        style.textAlign = "center";
        style.color = "#ffffff";
        style.backgroundColor = "#993333";
    }
    parent.appendChild(oText);

    // buttonオブジェクトの作成
    var oButton = document.createElement("input");
    with (oButton) {
        value = "くじをひく";
        type = "button";
        onclick = Draw_Click;
    }	
    parent.appendChild(oButton);
}

// くじをひく
function Draw_Click() 
{
    var nRand = Math.random();
    var nRitsu = 0;
    var i;
    for (i=0; i<aKuji.length; i++) {
        nRitsu += aKuji[i].Ritsu;
        if (nRand <= nRitsu) break;
    }
    oText.value = aKuji[i].Name;
}

/* HTMLソース */
<head>
    <meta http-equiv="content-type" content="text/html; charset=Shift_Jis">
    <meta name="content-language" content="ja">
    <title>ＪＳおみくじ</title>
    <script type="text/javascript" src="omikuji3.js"></script>
</head>
<body id="kuji" onload="Init(document.getElementById('kuji'))">
</body>

●宣言部: 　宣言部では、まず"Kuji"関数を定義しています。中身は配列aUnseiと配列aRitsuをまとめて一つにしたものです。これがクラスと同様の働きをします。使うときにnewキーワードを使ってインスタンス(オブジェクトのコピー）を作成すると、いくつでも同じ機能を持つオブジェクトを作成することができます。
　関数内では、thisキーワードを使ってプロパティを定義することができます。thisは、自分自身を指すためのキーワードです。ここでは、NameプロパティとRitsuプロパティを設定しています。インスタンスを作成する時は、これらの値を引数で指定（それぞれ"name", "ritsu"）する必要があります。
　変数"aKuji"は、Kujiオブジェクトの配列です。newキーワードを使って九つのオブジェクトを作成と同時に初期化しています。
　oTextの定義は以前と同じです。
●Init関数: 　Init関数は前節と同じです。
●Draw_Click関数: 　Draw_Click関数の中身は前節と同じです。ただし、前節までは"aUnsei"と"aRitsu"の二つの配列にアクセスしていたのに対し、今回は"aKuji"へのアクセスだけで済みます。その代わりに各プロパティ（"Name","Ritsu"）を利用することになります。
●HTML側の記述: 　HTML側の記述は前節と同じです。ただし、読み込むファイル名は異なります。