JavaScriptオブジェクト
JavaScriptにて、オブジェクトというのは、「属性」と「メソッド」を所持するデータのことである
生活の例で、考えると、「車」は一つのオブジェクトである
属性としては、下記ものがある
car.name = Fiat
car.model = 500
car.weight = 850kg
car.color = white
メソッド（処理）としては、以下である
car.start()
car.drive()
car.brake()
car.stop()
すべての車には、上記属性ありながら、それぞれ違うし、メソッドもあるが、実行されるタイミングが違う
JavaScriptにて、複数データが入っている変数として、考えてもいい
普通変数→var car = "Fiat";
オブジェクト→var car = {name:"Fiat", model:500, color:"white"};
ソース例を見てみると、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一白山中(ennya.hatenablog.com)</title>
</head>
<body>
<p>JavaScript オブジェクト生成</p>
<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
document.getElementById("demo").innerHTML =
person.firstName + " 今" + person.age + " 歳である";
</script>
</body>
</html>
見栄えをきれいにする書き方としては、
<script>
var person = {
firstName : "John", //各属性の間は、「,」は絶対必要である
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " 今" + person.age + " 歳である";
</script>
オブジェクトはデータの容器で、「name : value 」の形で、表現される
そのデータを利用方法としては、下記ソースを参照してください
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一白山中(ennya.hatenablog.com)</title>
</head>
<body>
<p>
オブジェクトの属性を利用する方法が二つある
</p>
<p>
.property または ["property"]という形で
</p>
<p id="demo"></p>
<script>
var person = {
firstName : "John",
lastName : "Doe",
id : 5566
};
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一白山中(ennya.hatenablog.com)</title>
</head>
<body>
<p>
オブジェクトの属性を利用する方法が二つある
</p>
<p>
.property または ["property"]という形で
</p>
<p id="demo"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566
};
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>
</body>
「name : value 」のnameが文字列で、valueには、nullでも、undefinedでもOK
var bird = {
name : "Amy",
age : 1,
color : "white",
skill : function () {
console.log("Fly");
},
nickname : null,
play : undefined
}
メソッドは関数のようなもので、オブジェクトに保管される
利用する方法は、関数と同じ（）つければOK
ソース例は以下である
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一白山中(ennya.hatenablog.com)</title>
</head>
<body>
<p>オブジェクトメソッド生成して利用</p>
<p>オブジェクトメソッドは関数として、定義して、オブジェクト属性として保管</p>
<p id="demo"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
もし実行命令（）つけずに、出力すると、関数定義そのものが呈示される
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一白山中(ennya.hatenablog.com)</title>
</head>
<body>
<p>オブジェクトメソッド生成して利用</p>
<p>オブジェクトメソッドは関数として、定義して、オブジェクト属性として保管</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo1").innerHTML = "（）つけずに、関数定義を出力" + person.fullName;
document.getElementById("demo2").innerHTML = "（）つけると、関数実行結果を出力" + person.fullName();
</script>
</body>
</html>
先にオブジェクト宣言する方法もある
var person=new Object();
person.name='太郎'；
person.sex='男'；
person.method=function(){
return this.name+this.sex;
}
属性及びメソッドの名前は唯一性があり、最後に賦与される値が保存される
var person = {
name: "太郎",
age: 18,
sex: "男",
play: "football",
play: function () {
return "like paly football";
}
};
