{"id":1566,"date":"2016-07-29T12:57:27","date_gmt":"2016-07-29T12:57:27","guid":{"rendered":"http:\/\/javascript-tutor.net\/?page_id=1566"},"modified":"2017-11-16T23:14:32","modified_gmt":"2017-11-16T23:14:32","slug":"creating-objects-javascript","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/creating-objects-javascript\/","title":{"rendered":"JavaScript Lesson 33: Creating an Object Using Literal Notation"},"content":{"rendered":"

<Previous Lesson><\/a>\u00a0[Table of Contents]<\/a>\u00a0<Next Lesson><\/a><\/strong><\/h3>\n

Introduction<\/h2>\n

An object is something that has properties and methods. For example, a car has properties like color, model, and methods such as start, accelerate and stop.<\/p>\n

An object in JavaScript also has properties and methods. A JavaScript object actually comprises variables and functions. A variable inside an object is called a property and a function inside an object is called a method.<\/p>\n

Creating an Object<\/h2>\n

There are two\u00a0ways to create a JavaScript object, namely using literal notation and using object constructor notation<\/p>\n

1. Using Literal Notation<\/h3>\n

The syntax to create an object is<\/p>\n

var objectName={\r\n\r\nproperty1=\"=value1,\r\nproperty2=\"=value2,\r\n..................\r\n.................\r\nproeprtyn=valuen,\r\nMyMethod: MyFunction(){ }\r\n\r\n};\r\n<\/pre>\n
Example 1.1<\/h4>\n
<!DOCTYPE html>\r\n<html>\r\n<body>\r\n\r\n<p>The Phone Object.<\/p>\r\n\r\n<h3>Model:<b id=\"model\"><\/b><\/h3>\r\n<h3> Brand:<b id=\"brand\"><\/b><\/h3>\r\n<h3>Price:<b id=\"price\"><\/b><\/h3>\r\n\r\n<script>\r\nvar phone= {model:\"Note8\", brand:\"Samsung\", color:\"white\",price:\"$2000\"};\r\ndocument.getElementById(\"model\").innerHTML = phone.model;\r\ndocument.getElementById(\"brand\").innerHTML = phone.brand;\r\ndocument.getElementById(\"price\").innerHTML = phone.price;\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
The output<\/p>\n
The Phone Object.<\/p>\n
Model:<\/b><\/h3>\n
Brand:<\/b><\/h3>\n
Price:<\/b><\/h3>\n