Objects in JavaScript - HTML5 APPLICATIONS DEVELOPMENT MANUAL (2016)

HTML5 APPLICATIONS DEVELOPMENT MANUAL (2016)

22 - Objects in JavaScript

An HTML element is an object, like a house or a car. Just as with real life objects, we can access and modify HTML objects that appear on a screen.

The creation of interactive Web pages and apps relies on our ability to manipulate objects on a screen. Objects are models of things in the real world that were built using data. Objects are grouped into object models, which are used to represent Browsers and Web pages.

In JavaScript, almost "everything" is an object.

- Booleans can be objects (if defined with the new keyword)

- Numbers can be objects (if defined with the new keyword)

- Strings can be objects (if defined with the new keyword)

- Dates are always objects

- Maths are always objects

- Regular expressions are always objects

- Arrays are always objects

- Functions are always objects

- Objects are always objects

All JavaScript values, except primitives, are objects.

JavaScript Primitives

A primitive value is a value that has no properties or methods.

A primitive data type is data that has a primitive value.

JavaScript defines 5 types of primitive data types:

- string

- number

- boolean

- null

- undefined

Primitive values are immutable (they are hardcoded and therefore cannot be changed).

Value

Type

Comment

"Hello"

string

"Hello" is always "Hello"

mar.14

number

3.14 is always 3.14

TRUE

boolean

true is always true

FALSE

boolean

false is always false

null

null (object)

null is always null

undefined

undefined

undefined is always undefined

With JavaScript, you can define and create your own objects.

There are different ways to create new objects:

- Define and create a single object, using an object literal.

- Define and create a single object, with the keyword new.

- Define an object constructor, and then create objects of the constructed type.

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<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 + " " + person.lastName;

</script>

</body>

</html>