JavaScriptの勉強７　〜基礎の基礎　オブジェクト指向とメソッド、プロパティ

オブジェクトの位置と配列

一つのページの中に複数のフォームやテキストフィールドなどのオブジェクトがある場合、特定のオブジェクトから値を取り出したり、書きこんだりするとき、そのオブジェクトの位置を示す必要がある。

オブジェクトの全体の構成

オブジェクトの階層構造は以下のようになっている。windowが最上位のオブジェクトである。

window
- frame
  - document
    - anchor
    - link
    - form
      - element
- location
- history

windowがあり、もしframeがあれば、frameごとにdocumentがあり、その中にlinkやanchor、formが含まれる。
formにはテキストフィールドやボタンなどのformを構成する要素が含まれていて、これらはelementと呼ばれる。
frameを使用していなければwindowからdocumentへ直接つながる。

フォームの位置を指示する

HTMLファイルの中に、formタグが複数ある場合、forms配列が自動的に作られる。
一番目のフォームはform[0]で指定され、二番目はform[1]、三番目はform[2]となる。
配列は、0から始まることに注意する。
elementに関しても同様に、element[0]などと指定する。

フォームやテキストフィールドの名前で指定することもできる。
以下、例。

<form name="formA">                    // document.forms[0] or document.formA or this.form
<input type="text" name="textA">       // document.forms[0].elements[0] or document.formA.textA or this.form.textA
<input type="text" name="textB">       // document.forms[0].elements[1] or document.formA.textB or this.form.textB
<input type="button" name="buttonC">   // document.forms[0].elements[2] or document.formA.buttonC or this.form.buttonC
</form>

<form name="formB">                    // document.forms[1]
<input type="text" name="textD">       // document.forms[1].elements[0] 
<input type="text" name="textE">       // document.forms[1].elements[1] 
<input type="radio" name="radioF">     // document.forms[1].elements[2] 
</form>

オブジェクトとメソッドとプロパティ

オブジェクトとは

オブジェクトとは、電化製品のようなもの。
ただデータを入れたりするだけでなく、その使い方も決められている。
例えば、テレビをオブジェクトとすると、電源を付ける、ボリュームを調整する、チャンネルを変える、消すなどの使い方を持っている。
JavaScriptでは、例えばdocumentオブジェクトやformオブジェクトなどがある。

メソッドとは

オブジェクトに含まれている使い方のこと。
JavaScriptでは、例えばdocumentオブジェクトにはwrite()メソッドがある。
documentを書きだすという方法。document.write()のように「.」でつなげる。

プロパティとは

プロパティには、あらかじめ設定しておいた値や特定の情報が格納されている。
プロパティもオブジェクトの一部。
JavaScriptでは、elements[0].valueや、document.bgColorなどがある。

プロパティの値の設定

オブジェクト.プロパティ = 値

例）
document.bgColor = "red";  // 背景色を赤に設定という意味。

プロパティの値の取得

変数 = オブジェクト.プロパティ
メソッド(オブジェクト.プロパティ)
と書く。
例えば、
a = document.forms[0].elements[0].name;
と書くと、aという変数に、フォームのエレメントの名前を代入する、という意味。

サンプルプログラム

今回学んだことを使ってプログラムを作った。

仕様

月給と貯金に回す割合とボーナスをフォームに代入すると、年間にできる貯金を計算する。

コード

<html>
<head>
<title>貯金計算</title>
<script language="javascript">
  function calcStock(salary, rate, bonus_number){
    var stock = 0;
    var bonus = salary * bonus_number;
    for(i=1;i<=12;i++){
    stock = stock + salary * rate/100
      if(i==6 || i==12){
        stock = stock + bonus
      }
    }
    return stock;
  }
  
  function writeStock(salary, rate, bonus_number, person){
    if (salary=="" || rate=="" || bonus_number=="" || person==""){
      alert('値を入力して下さい');
    }
    else{
    document.write(person + "さんの月給は" + salary + "円、ボーナスは半期で" + bonus_number + "か月分です。<br /><br />" + person + "さんは月給の" + rate + "％とボーナス全てを貯金に回します。<br /><br />");

    document.write(person + "さんの一年間の貯金は" + calcStock(salary,rate,bonus_number) + "円になります。<br /><br /><br />");
    }
  }
</script>
</head>

<body>
<form name = "fName">
名前：<input type="text" size=30 name="person">さん<br /><br />
月給：<input type="text" size=30 name="salary">円　
貯金の割合<input type="text" size=5 name="rate">％　
ボーナス<input type="text" size=5 name="bonus_number">ヵ月／年　
<input type="button" name="btn1" value="算出" 
onClick="writeStock(this.form.salary.value, this.form.rate.value, this.form.bonus_number.value, this.form.person.value)">
</form>
</body>
</html>

お読み頂きありがとうございます。
少しでもお役に立てたらクリックお願いします↓。