Real Life Objects, Properties, and Methods - Zenodo
-
Upload
khangminh22 -
Category
Documents
-
view
0 -
download
0
Transcript of Real Life Objects, Properties, and Methods - Zenodo
28.3.2019 JavaScript Objects
https://www.w3schools.com/js/js_objects.asp 1/16
❮ Previous Next ❯
JavaScript Objects
Real Life Objects, Properties, and MethodsIn 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.name = Fiat car.model = 500
car.start() car.drive()
T H E W O R L D ' S L A R G E S T W E B D E V E L O P E R S I T E
w3schools.com
HTML CSS JAVASCRIPT MORE
We use cookies to understand how you use our site and to improve your experience. This includes personalizing content and advertising.
Manage choicesOK
28.3.2019 JavaScript Objects
https://www.w3schools.com/js/js_objects.asp 2/16
car.weight = 850kg car.color = white
car.brake() car.stop()
All cars have the same properties, but the property values differ from car to car.
All cars have the same methods, but the methods are performed at different times.
JavaScript ObjectsYou have already learned that JavaScript variables are containers for data values.
This code assigns a simple value (Fiat) to a variable named car:
var car = "Fiat";
Try it Yourself »
Objects are variables too. But objects can contain many values.
This code assigns many values (Fiat, 500, white) to a variable named car:We use cookies to understand how you use our site and to improve your experience. This includes personalizing content and advertising.
Manage choicesOK
28.3.2019 JavaScript Objects
https://www.w3schools.com/js/js_objects.asp 3/16
var car = {type:"Fiat", model:"500", color:"white"};
Try it Yourself »
The values are written as name:value pairs (name and value separated by a colon).
JavaScript objects are containers for named values called properties or methods.
Object DefinitionYou define (and create) a JavaScript object with an object literal:We use cookies to understand how you use our site and to improve your experience. This includes personalizing content and advertising.
Manage choicesOK
28.3.2019 JavaScript Objects
https://www.w3schools.com/js/js_objects.asp 4/16
Example
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Try it Yourself »
Spaces and line breaks are not important. An object definition can span multiple lines:
Example
var person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" };
Try it Yourself »
Object PropertiesThe name:values pairs in JavaScript objects are called properties:
Property Property Value
We use cookies to understand how you use our site and to improve your experience. This includes personalizing content and advertising.
Manage choicesOK
28.3.2019 JavaScript Objects
https://www.w3schools.com/js/js_objects.asp 5/16
firstName John
lastName Doe
age 50
eyeColor blue
Accessing Object PropertiesYou can access object properties in two ways:
objectName.propertyName
or
objectName["propertyName"]
Example1
person.lastName;
Try it Yourself »We use cookies to understand how you use our site and to improve your experience. This includes personalizing content and advertising.
Manage choicesOK
28.3.2019 JavaScript Objects
https://www.w3schools.com/js/js_objects.asp 6/16
Example2
person["lastName"];
Try it Yourself »
Object MethodsObjects can also have 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;}
A method is a function stored as a property.We use cookies to understand how you use our site and to improve your experience. This includes personalizing content and advertising.
Manage choicesOK
28.3.2019 JavaScript Objects
https://www.w3schools.com/js/js_objects.asp 7/16
Example
var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } };
The this KeywordIn a function definition, this refers to the "owner" of the function.
In the example above, this is the person object that "owns" the fullName function.
In other words, this.firstName means the firstName property of this object.
Read more about the this keyword at JS this Keyword.
Accessing Object MethodsYou access an object method with the following syntax:We use cookies to understand how you use our site and to improve your experience. This includes personalizing content and advertising.
Manage choicesOK
28.3.2019 JavaScript Objects
https://www.w3schools.com/js/js_objects.asp 8/16
objectName.methodName()
Example
name = person.fullName();
Try it Yourself »
If you access a method without the () parentheses, it will return the function definition:
Example
name = person.fullName;
Try it Yourself »
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
We use cookies to understand how you use our site and to improve your experience. This includes personalizing content and advertising.
Manage choicesOK
28.3.2019 JavaScript Objects
https://www.w3schools.com/js/js_objects.asp 9/16
var z = new Boolean(); // Declares z as a Boolean object
Avoid String , Number , and Boolean objects. They complicate your code and slow down execution speed.
You will learn more about objects later in this tutorial.
Test Yourself With Exercises
Exercise:Alert "John" by extracting information from the person object.
var person = { firstName: "John", lastName: "Doe" }; alert( );
Submit Answer »
We use cookies to understand how you use our site and to improve your experience. This includes personalizing content and advertising.
Manage choicesOK
28.3.2019 JavaScript Objects
https://www.w3schools.com/js/js_objects.asp 10/16
❮ Previous Next ❯
Start the Exercise
We use cookies to understand how you use our site and to improve your experience. This includes personalizing content and advertising.
Manage choicesOK
28.3.2019 JavaScript Objects
https://www.w3schools.com/js/js_objects.asp 11/16
COLOR PICKERWe use cookies to understand how you use our site and to improve your experience. This includes personalizing content and advertising.
Manage choicesOK
28.3.2019 JavaScript Objects
https://www.w3schools.com/js/js_objects.asp 12/16
HOW TO
Tabs Dropdowns Accordions Side Navigation Top Navigation Modal Boxes Progress Bars Parallax Login Form HTML Includes Google Maps Range Sliders Tooltips Slideshow Filter List Sort List
SHARE
We use cookies to understand how you use our site and to improve your experience. This includes personalizing content and advertising.
Manage choicesOK
28.3.2019 JavaScript Objects
https://www.w3schools.com/js/js_objects.asp 13/16
CERTIFICATES
HTML CSS
JavaScript SQL
Python PHP
jQuery Bootstrap
XML
Read More »
We use cookies to understand how you use our site and to improve your experience. This includes personalizing content and advertising.
Manage choicesOK
28.3.2019 JavaScript Objects
https://www.w3schools.com/js/js_objects.asp 14/16
We use cookies to understand how you use our site and to improve your experience. This includes personalizing content and advertising.
Manage choicesOK
28.3.2019 JavaScript Objects
https://www.w3schools.com/js/js_objects.asp 15/16
REPORT ERROR PRINT PAGE FORUM ABOUT
Top TutorialsHTML Tutorial CSS Tutorial
Top ReferencesHTML Reference CSS Reference
Kartenzahlungen leicht gemachtAb jetzt auch kontaktlose Zahlungen akzeptieren.
We use cookies to understand how you use our site and to improve your experience. This includes personalizing content and advertising.
Manage choicesOK
28.3.2019 JavaScript Objects
https://www.w3schools.com/js/js_objects.asp 16/16
JavaScript Tutorial How To Tutorial
SQL Tutorial Python Tutorial W3.CSS Tutorial
Bootstrap Tutorial PHP 5 Tutorial PHP 7 Tutorial jQuery Tutorial Java Tutorial
JavaScript Reference SQL Reference
Python Reference W3.CSS Reference
Bootstrap Reference PHP Reference HTML Colors
jQuery Reference Angular Reference
Java Reference
Top ExamplesHTML Examples CSS Examples
JavaScript Examples How To Examples
SQL Examples Python Examples W3.CSS Examples
Bootstrap Examples PHP Examples
jQuery Examples Java Examples XML Examples
Web CertificatesHTML Certificate CSS Certificate
JavaScript Certificate SQL Certificate
Python Certificate jQuery Certificate
PHP Certificate Bootstrap Certificate
XML Certificate
Get Certified »
W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, andexamples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our
terms of use, cookie and privacy policy. Copyright 1999-2019 by Refsnes Data. All Rights Reserved. Powered by W3.CSS.
We use cookies to understand how you use our site and to improve your experience. This includes personalizing content and advertising.
Manage choicesOK