JavaScriptで書いてみよう！
（オブジェクト）

オブジェクトとプロパティ

JavaScriptのオブジェクトはプロパティを持っています。プロパティは以下のようにアクセスできます。


構文：
objectName.propertyName

プロパティは値を代入することによって定義できます。


例：
myCar.make = "Ford"
myCar.model = "Mustang"
myCar.year = 1969;

配列は値とそれに関連付けられた単独の変数名の順序のある組み合わせです。JavaScriptでは、配列とプロパティは同じデータ構造に対する異なるインターフェースにすぎません。したがって、以下のようにもアクセスできます。


myCar["make"] = "Ford"
myCar["model"] = "Mustang"
myCar["year"] = 1967

オブジェクトの作成

JavaScriptはいくつかの組込オブジェクトを持っています。また新しいオブジェクトを作成することもできます。


オブジェクトイニシャライザ

（JavaScript 1.2からの機能です）

構文：
objectName = {property1:value1, property2:value2,..., propertyN:valueN}

例：
if (cond) x = {hi:"there"}
myHonda = {color:"red",wheels:4,engine:{cylinders:4,size:2.2}}
//engineプロパティは自身のプロパティを持つオブジェクトです

コンストラクタ関数

以下の方法でオブジェクトを定義できます。
1.コンストラクタ関数を書くことによりオブジェクト型を定義する。
2.newによりインスタンスを定義する。
オブジェクト型を定義するには、名前、プロパティ、メソッドを指定したオブジェクト型のための関数を定義します。


例：
function car(make, model, year) {
   this.make = make
   this.model = model
   this.year = year
}

thisにより、オブジェクトのプロパティに関数に渡された値を代入します。
オブジェクトを定義します。


例：
mycar = new car("Eagle", "Talon TSi", 1993)
kenscar = new car("Nissan", "300ZX", 1992)
vpgscar = new car("Mazda", "Miata", 1990)

プロパティはオブジェクトを持つことができます。その場合、プロパティは以下のようにアクセスできます。


構文：
objectName1.objectName2...objectNamen.propertyName

プロパティはいつでも追加できます。


例：
car1.color = "black"

これは他のオブジェクトには影響を与えません。新しいプロパティを同じ型のすべてのオブジェクトに追加したい場合、オブジェクト型の定義にプロパティを追加しなければなりません。


オブジェクトのプロパティへの位置づけ

プロパティへの位置づけは、名前で初期化したならば名前で、インデックスで初期化したならば、インデックスで行なわなければなりません。
これはオブジェクトとのそのプロパティをコンストラクタ関数で定義し、個別のプロパティを厳密に定義した場合（例、myCar.color = "red")に適用されます。
ただし、FORMなどのHTMLにより反映されるオブジェクトは例外です（document.forms[1]、document.forms["myForm"]どちらでもアクセス可能）。

オブジェクト型へのプロパティの定義

オブジェクト型にプロパティを追加することで、そのオブジェクト型であるすべてのオブジェクトにプロパティを追加することができます。


例：
Car.prototype.color=null
car1.color="black"

メソッドの定義

メソッドはオブジェクトに関連付けられた関数です。標準の関数を定義するのと同様にメソッドを定義し、オブジェクトに関連付けます。


構文：
object.methodname = function_name

以下のようにしてメソッドを呼び出すことができます。


構文：
object.methodname(params);

コンストラクタ関数にメソッドの定義を含めることで、オブジェクト型にメソッドを定義できます。


例：
function displayCar() { //関数を定義しておきます
   var result = "A Beautiful " + this.year + " " + this.make 
      + " " + this.model
   pretty_print(result)
}

function car(make, model, year, owner) { //コンストラクタ関数定義
   this.make = make
   this.model = model
   this.year = year
   this.owner = owner
   this.displayCar = displayCar //メソッドの定義
}

car1.displayCar() //メソッドを呼び出します
car2.displayCar()

thisによるオブジェクト参照

JavaScriptの特殊キーワードthisはメソッドの中で、現在のオブジェクトを参照するのに使用します。


例：
function validate(obj, lowval, hival) {
   if ((obj.value < lowval) || (obj.value > hival))
      alert("Invalid Value!")
}

以下のように呼び出します。


例：
<INPUT TYPE="text" NAME="age" SIZE=3 
   onChange="validate(this, 18, 99)">

一般的に、thisはメソッドの中で呼び出し元のオブジェクトを参照します。
フォームのプロパティと組み合わされたとき、thisは現在のオブジェクトの親フォームを参照可能です。


例：
<FORM NAME="myForm">
Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga">
<P>
<INPUT NAME="button1" TYPE="button" VALUE="Show Form Name"
   onClick="this.form.text1.value=this.form.name">
</FORM>

オブジェクトの削除

delete演算子によりオブジェクトを削除できます。


例：
myobj=new Number()
delete myobj   //objectを削除し、trueを返す

組込コアオブジェクト

ここでは、コアJavaScriptで定義されている組込オブジェクトについて説明します。組込オブジェクトには、Array、Boolean、Date、Function、Math、Number、RegExp、Stringがあります。

Array（配列）オブジェクト

ArrayオブジェクトはJavaScriptにおいて、配列として使用できます。Arrayオブジェクトは追加、反転、ソートなどのメソッドを持っており、配列の大きさを決定する、正規表現に使用するなどのプロパティを持っています。
配列は名前と指標により参照される値の順序のある組み合わせです。


Arrayオブジェクトの作成

構文：
1. arrayObjectName = new Array(element0, element1, ..., elementN)
2. arrayObjectName = new Array(arrayLength)

1.ではelement0, element1, ..., elementNの値によって、Arrayオブジェクトは初期化され、配列の大きさは引数の数となります。2.ではarrayLengthだけの大きさを持ったArrayオブジェクトが作成されます。


例：
billingMethod = new Array(5)

ArrayリテラルもArrayオブジェクトです。


例：
coffees = ["French Roast", "Columbian", "Kona"]

Arrayオブジェクトへの代入

Arrayオブジクェトの代入は、その要素に値を代入することで行ないます。


例：
emp[1] = "Casey Jones"
emp[2] = "Phil Lesh"
emp[3] = "August West"

Arrayオブジェクトの定義時に代入することもできます。


例：
myArray = new Array("Hello", myVar, 3.14159)

Arrayオブジェクトの要素への参照

配列オブジェクトの要素は、配列の順序の数により参照できます。


例：
myArray = new Array("Wind","Rain","Fire")

最初の要素はmyArray[0]、二番目の要素はmyArray[1]で参照できます。配列の大きさはmyArray.lengthで参照できます。要素への指標は0オリジンですが、配列の大きさは配列の要素の数です。


Arrayオブジェクトのメソッド

Arrayオブジェクトは以下のメソッドを持っています。



メソッド	説明
concat	二つの配列を統合し、新しい配列を返します。
join	配列のすべての要素を文字列にします。
pop	最後の要素を削除し、その要素を返します。
push	一つ以上の要素を配列の最後に追加し、最後に追加された要素を返します。
reverse	配列の要素を反転させます。最初の要素は最後になり、最後の要素は最初になります。
shift	最初の要素を削除し、その要素を返します。
slice	配列の部分を抜き出し、新しい配列として返します。
splice	配列に要素を追加または削除します。
sort	配列の要素をソートします。
unshift	配列の最初に要素を追加し、配列の大きさを返します。




二次元Arrayオブジェクト

以下のコードは、二次元Arrayを定義します。


例：
a = new Array(4)
for (i=0; i < 4; i++) {
   a[i] = new Array(4)
   for (j=0; j < 4; j++) {
      a[i][j] = "["+i+","+j+"]"
   }
}

以下のコードは、二次元Arrayを表示します。


for (i=0; i < 4; i++) {
   str = "Row "+i+":"
   for (j=0; j < 4; j++) {
      str += a[i][j]
   }
   document.write(str,"<p>")
}

結果は以下のようになります。


Row 0:[0,0][0,1][0,2][0,3]
Row 1:[1,0][1,1][1,2][1,3]
Row 2:[2,0][2,1][2,2][2,3]
Row 3:[3,0][3,1][3,2][3,3]

配列と正規表現

省略


Boolean（ブーリアン）オブジェクト

Booleanオブジェクトを定義するには、以下のように記述します。


構文：
booleanObjectName = new Boolean(value)

valueの値に関わらず、Booleanオブジェクトを評価すれば必ずtrueになります。


Date（日付）オブジェクト

DateオブジェクトはJavaScriptにおいて、日付と時間として使用できます。日付は、1970/1/1 00:00:00からの経過ミリ秒で保持されます。値の範囲は-100,000,000から100,000,000までです。Dateオブジェクトを作成するには、以下のように記述します。


構文：
dateObjectName = new Date([parameters])

parametersは以下の指定します。 ・何も指定されない場合、現在の日付、時間とみなされます。
・文字列"Month day, year hours:minutes:seconds"。hours、minutes、secondsが省略された場合は0に設定されます。
・整数year、month、day、整数year、month、day、hour、minute、seconds


例：
Xmas95 = new Date()
Xmas95 = new Date("December 25, 1995 13:30:00")
Xmas95 = new Date(1995,11,25)
Xmas95 = new Date(1995,11,25,9,30,0). 

・JavaScript 1.2以前では1970より昔は設定できません。
・Dateオブジェクトはプラットフォームによって異なる振る舞いをします。


Dateオブジェクトのメソッド

日付と時間を扱うDateオブジェクトのメソッドは以下のカテゴリに分類されます。
・"set"メソッド　日付、時間の設定をする。
・"get"メソッド　日付、時間を取得する。
・"to"メソッド　Dateオブジェクトから文字列を返す。
・parseとUTCメソッド　日付文字列を走査する。
"set"と"get"メソッドは秒、分、時、日、曜日、月、年を個別に設定、取得できます。 getDayメソッドは曜日を返しますが、対応するsetDayはありません。曜日は自動的に設定されます。整数の値の範囲は以下のとおりです。
・Seconds、minutes: 0 から 59 まで
・Hours: 0 から 23 まで
・Day: 0 (Sunday) から 6 (Saturday) まで
・Date: 1 から 31 (day of the month) まで
・Months: 0 (January) から 11 (December) まで
・Year: 1900 以上


例：
today = new Date() // 今日の日付を設定
endYear = new Date(1995,12,31,23,59,59,999) // 年末の日、月を設定
endYear.setFullYear(today.getFullYear()) // 年を今年に設定
msPerDay = 24 * 60 * 60 * 1000 // 一日あたりのミリ秒数
daysLeft = (endYear.getTime() - today.getTime()) / msPerDay
daysLeft = Math.round(daysLeft) // 今年の残り日数

Dateオブジェクトの使用例

省略


Function（関数）オブジェクト

Functionオデジェクトは文字列を関数として定義します。Functionオデジェクトを定義するには以下のように記述します。


構文：
functionObjectName = new Function ([arg1, arg2, ... argn], functionBody)

Functionオブジェクトは、呼び出されるたびに評価されるため、関数に比較して効率的ではありません。


例：
var setBGColor = new Function("document.bgColor='antiquewhite'")
var colorChoice="antiquewhite"
if (colorChoice=="antiquewhite") {setBGColor()}

以下のようにすれば、イベントハンドラに関数を関連付けれます。1.の場合、イベントハンドラ名は小文字でなければなりません。


1. document.form1.colorButton.onclick=setBGColor
2. <INPUT NAME="colorButton" TYPE="button"
      VALUE="Change background color"
      onClick="setBGColor()">

変数setBGColorを作成することは、以下の関数を作成することに似ています。


function setBGColor() {
   document.bgColor='antiquewhite'
}

関数の内に関数をネストすることもできます。内側の関数はその外側の関数にプライベートです。
・内側の関数は外側の関数のステートメントのみからアクセスできます。
・内側の関数は外側の関数の引数、変数を使用できます。外側の関数は内側の関数の引数、変数を使用できません。


Math（算術）オブジェクト

Mathオブジェクトは算術的な定数および関数を提供します。例、Math.PIは円周率(3.141...)を表します。
算術的な関数はMathオブジェクトのメソッドです。これらには三角関数、対数関数、指数関数、その他の関数が含まれます。例、Math.sin()は正弦関数を表します。
すべての三角関数は引数としてradiansを取ります。



メソッド	説明
abs	絶対値
sin,cos,tan	三角関数、引数はradians
acos,asin,atan	逆三角関数、戻り値はradians
exp,log	指数、自然対数
ceil	引数以上の最小の整数を返す
floor	引数以下の最大の整数を返す
min,max	二つの引数の最大値または最小値を返します
pow	累乗を返します。最初の引数^二番目の引数
round	最も近い整数に丸めます
sqrt	平方根


他の多くのオブジェクトとは異なり、Mathオブジェクトを定義することはできません。
いくつかの算術的な定数と関数を使用するときに、withステートメントを使用すると"Math"を何度も記述する必要がなく便利です。


例：
with (Math) {
   a = PI * r*r
   y = r*sin(theta) //withがないときはMath.sin()
   x = r*cos(theta) //withがないときはMath.cos()
}

Number（数）オブジェクト

Numberオブジェクトは数的な定数のためのプロパティを持っています。これらのプロパティを変更することはできません。


例：
biggestNum = Number.MAX_VALUE
smallestNum = Number.MIN_VALUE
infiniteNum = Number.POSITIVE_INFINITY
negInfiniteNum = Number.NEGATIVE_INFINITY
notANum = Number.NaN

Numberオブジェクトは参照するだけであり、定義することはできません。
Numberオブジェクトのプロパティは以下のとおりです。



メソッド	説明
MAX_VALUE	最大の数
MIN_VALUE	最小の数
NaN	「数字でない」を意味する値
NEGATIVE_INFINITY	「プラスの無限」を意味する値（オーバーフロー時）
POSITIVE_INFINITY	「マイナスの無限」を意味する値（オーバーフロー時）




正規表現オブジェクト

省略


String（文字列）オブジェクト

StringオブジェクトをStringリテラルと混同しないでください。


例：
s1 = "foo" //Stringリテラルの定義
s2 = new String("foo") //Stringオブジェクトの定義

StringオブジェクトのメソッドはStringリテラルのままで呼び出せます。JavaScriptは自動的にStringリテラルをStringオブジェクトに変換しメソッドを呼び出し、またStringリテラルに戻します。同様に、Stringリテラルに対してlengthプロパティを用いることもできます。
特に必要がなければ、Stringリテラルを使用してください。両者は振る舞いが違います。


例：
s1 = "2 + 2" //Stringリテラルの定義
s2 = new String("2 + 2") //Stringオブジェクトの定義
eval(s1) //これは数4を返します。
eval(s2) //これは文字列"2 + 2"を返します。

Stringオブジェクトはひとつのプロパティと複数のメソッドを持っています。


例：
myString = "Hello, World!"
x = mystring.length //x = 13
x = mystring.toUpperCase() //x = "hello,world!"
x = mystring..toUpperCase() //x = "HELLO, WORLD!"
mystring.substring(4, 9) //x = "o, Wo."

Numberオブジェクトのメソッドは以下のとおりです。



メソッド	説明
anchor	HTMLのアンカーを作成します。
big,blink,bold,fixed,italics,small,strike,sub,sup	HTMLのフォーマット文字列を作成します。
charAt,charCodeAt	文字列中の指定された位置の文字、文字コードを返します。
indexOf,lastIndexOf	指定された文字列の文字列中の最初からの位置。最後からの位置を返します。
link	HTMLのハイパーリンクを作成します。
concat	二つの文字列を連結し、新しい文字列を返します。
fromCharCode	指定さたれ一連のISO-Latin-1コードから文字列を作成します。
split	デリミタで文字列を分割し、配列に格納します。
slice	文字列の部分文字列を返します。
substring,substr	最初の文字位置と最後の文字位置または最初の文字と文字数により、文字列の部分文字列を返します。
match,replace,search	正規表現の処理に用いられます。
toLowerCase,toUpperCase	文字列を小文字または大文字にして返します。