Real Life Objects, Properties, and Methods
In real life, a car is an object.A car has properties like weight and color, and methods like start and stop:
| Object | Properties | Methods |
|---|---|---|
| car | car.name = Fiat car.model = 500 car.weight = 850kg car.color = white |
car.start() car.drive() car.brake() car.stop() |
This code assigns a simple value (Fiat) to a variable named car:
<html>
<body>
<p>Creating a JavaScript Variable.</p>
<p id="demo"></p>
<script>
var car = "Fiat";
document.getElementById("demo").innerHTML = car;
</script>
</body>
</html>
Objects are variables too. But objects can contain many values.
This code assigns many values (Fiat, 500, white) to a variable named car:
<html>
<body>
<p>Creating a JavaScript Object.</p>
<p id="demo"></p>
<script>
var car = {type:"Fiat", model:"500", color:"white"};
document.getElementById("demo").innerHTML = car.type;
</script>
</body>
</html>
The values are written as name:value pairs (name and value separated by a colon).
JavaScript objects are containers for named values.
Object Properties
The name:values pairs (in JavaScript objects) are called properties.
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
| Property | Property Value |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
Object Methods
Methods are actions that can be performed on objects.Methods are stored in properties as function definitions.
| Property | Property Value |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
| fullName | function() {return this.firstName + " " + this.lastName;} |
JavaScript objects are containers for named values called properties or methods.
Object Definition
You define (and create) a JavaScript object with an object literal:<html>
<body>
<p>Creating a JavaScript Object.</p>
<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
Spaces and line breaks are not important. An object definition can span multiple lines:
<html>
<body>
<p>Creating a JavaScript Object.</p>
<p id="demo"></p>
<script>
var person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
Accessing Object Properties
You can access object properties in two ways:
objectName.propertyName
objectName["propertyName"]
Example1
<html><body>
<p>
There are two different ways to access an object property:
</p>
<p>You can use person.property or person["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>
Example2
<body><p>
There are two different ways to access an object property:
</p>
<p>You can use person.property or person["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>
Accessing Object Methods
You access an object method with the following syntax:
objectName.methodName()
Example
<body>
<p>Creating and using an object method.</p>
<p>An object method is a function definition, stored as a property value.</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>
If you access the fullName method, without (), it will return the function definition
Example
<html><body>
<p>An object method is a function definition, stored as a property value.</p>
<p>If you access it without (), it will return the function definition:</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>
A method is actually a function definition stored as a property value.
Do Not Declare Strings, Numbers, and Booleans as Objects!
When a JavaScript variable is declared with the keyword "new", the variable is created as an object:
var x = new String(); // Declares x as a String object
var y = new Number(); // Declares y as a Number object
var z = new Boolean(); // Declares z as a Boolean object
var y = new Number(); // Declares y as a Number object
var z = new Boolean(); // Declares z as a Boolean object
great
ReplyDelete