1 of 38

JavaScript – Objects

1

2 of 38

Object - Definition

  • JavaScript is an Object based Programming (OOP) language. An OOP language allows you to define your own objects and make your own variable types.

​

  • It is a special kind of data.

​

  • An object has properties and methods.

​

2

3 of 38

Object

  • Properties
    • Properties are the values associated with an object.

​

Methods

    • Methods are the actions that can be performed on Objects.

3

4 of 38

Object - Example

  • Example :

person

  • Properties of the person object
    • Name
    • Height
    • Weight
    • Age
  • Methods of the person object
    • eat()
    • work()
    • play()

4

5 of 38

Object - Properties�

  • Syntax for accessing a property of an object is:

​

    • objName.propName

​

  • You can add properties to an object by simply giving it a value.

​

  • Example –
    • Object - personObj
    • Properties –
    • personObj.firstname="John"
    • personObj.lastname="Doe"
    • personObj.age=30

5

6 of 38

Object - Method

  • An object can also contain methods.
  • Syntax – method calling:
    • objName.methodName()
  • Note:
    • Parameters required for the method can be passed between the parentheses.
  • Example
  • The personObj has the sleep() method:
    • personObj.sleep()

6

7 of 38

Object Creation

  • In JavaScript the objects can be created using following methods:

​

    • Create a direct instance of an object

​

    • Create a template of an object

7

8 of 38

Direct Instance of an Object

8

9 of 38

Create an object from a template

9

10 of 38

JavaScript – Built-in Objects

  • String
  • Date
  • Boolean
  • Math
  • Array
  • HTML DOM�

​

10

11 of 38

String Object

  • The String object is used to manipulate a stored piece of text.

​

  • It contains functions used to manipulate the string.

11

12 of 38

String - Methods

12

Method Name

Description

big()

Displays a string in a big font

charAt()

Returns the character at a specified position

concat()

Joins two or more strings.

indexOf()

Returns the position of the first occurrence of a specified string value in a string.

13 of 38

String - Methods

13

Method Name

Description

match()

Searches for a specified value in a string

replace()

Replaces some characters with some other characters in a string

search()

Searches a string for a specified value

substring()

Extracts the characters in a string between two specified indices

14 of 38

String - Methods

14

Method

Description

toLowerCase()

Displays a string in lowercase letters

toUpperCase()

Displays a string in uppercase letters

valueOf()

Returns the primitive value of a String object

split()

Splits a string into an array of strings.

15 of 38

String - Methods

15

Method

Description

Displays a blinking string

Displays a string in bold

Displays a string in a specified color

Displays a string in a specified size.

Displays a string in italic.

16 of 38

String - Properties

16

Method

Description

constructor

A reference to the function that created the object.

length

Returns the number of characters in a string.

17 of 38

Example - String Object

17

18 of 38

Date Object

  • The Date object is used to work with dates and times.
  • new keyword is used to define a Date object.
  • Example :

var myDate=new Date()

  • Note:
  • The Date object will automatically hold the current date and time as its initial value.

18

19 of 38

Date Object - Methods

19

Method

Description

Date()

Returns today's date and time

getDate()

Returns the day of the month from a Date object

getDay()

Returns the day of the week from a Date object (from 0-6)

getMonth()

Returns the month from a Date object (from 0-11)

getFullYear()

Returns the year, as a four-digit number, from a Date object

20 of 38

Date Object - Methods

20

Method

Description

getYear()

Returns the year in two-digit format.

getHours()

Returns the hour of a Date object (from 0-23)

getMinutes()

Returns the minutes of a Date object (from 0-59)

getSeconds()

Returns the seconds of a Date object (from 0-59)

getTime()

Returns the number of milliseconds since midnight Jan 1, 1970

21 of 38

Date Object - Methods

21

Method

Description

setDate()

Sets the day of the month in a Date object (from 1-31)

setMonth()

Sets the month in a Date object (from 0-11)

setFullYear()

Sets the year in a Date object (four digits)

setYear()

Sets the year in the Date object (two)

setHours()

Sets the hour in a Date object (from 0-23)

22 of 38

Date Object - Methods

22

Method

Description

setMinutes()

Set the minutes in a Date object (from 0-59).

setSeconds()

Sets the seconds in a Date object (from 0-59)

setTime()

Calculates a date and time by adding or subtracting a specified number of milliseconds to/from midnight January 1, 1970

toString()

Converts a Date object to a string

23 of 38

Example - Date Object

23

24 of 38

Array Object

  • The Array object is used to store a set of values in a single variable name.

​

  • new keyword is used to define an array.

​

  • Syntax:

var myArray=new Array()

24

25 of 38

Array

  • Elements can be added in two ways.
  • First Method

​

var mycars=new Array() mycars[0]="Saab"

mycars[1]="Volvo“

​

  • Second Method

var mycars=new Array("Saab","Volvo")

25

26 of 38

Array

  • A particular element in an array can be referred by the name of the array and the index number. The index number starts at 0.

​

  • Example :

​

document.write(mycars[0])

26

27 of 38

Array Object - Methods

27

Method

Description

concat()

Joins two or more arrays and returns the result.

join()

Puts all the elements of an array into a string. The elements are separated by a specified delimiter

pop()

Removes and returns the last element of an array.

push()

Adds one or more elements to the end of an array.

reverse()

Reverses the order of the elements in an array

28 of 38

Array Object - Methods

28

Method

Description

sort()

Sorts the elements of an array

toString()

Converts an array to a string and returns the result

29 of 38

Array Object - Properties

29

Property Name

Description

length

Sets or returns the number of elements in an array.

30 of 38

Example - Array Object

30

31 of 38

Boolean Object

  • It is an object wrapper for a Boolean value.

​

  • It is used to convert a non-Boolean value to a Boolean value (true or false).

​

31

32 of 38

Boolean Object

  • The new keyword is used to define a Boolean object.

var myBoolean=new Boolean()

​

  • Note:
  • If the Boolean object has no initial value or if it is 0, -0, null, "", false, undefined, or NaN, the object is set to false. Otherwise it is true (even with the string "false")!

​

32

33 of 38

JavaScript - Math Object

  • The Math object allows you to perform common mathematical tasks.

​

  • The Math object includes several mathematical values and functions.

​

  • You do not need to define the Math object before using it.

33

34 of 38

Math Object - Methods

34

Method Name

Description

abs(x)

Returns the absolute value of a number.

ceil(x)

Returns the value of a number rounded upwards to the nearest integer

floor(x)

Returns the value of a number rounded downwards to the nearest integer

max(x,y)

Returns the number with the highest value of x and y

35 of 38

Math Object - Methods

35

Method Name

Description

min(x,y)

Returns the number with the lowest value of x and y

pow(x,y)

Returns the value of x to the power of y

random()

Returns a random number between 0 and 1

round(x)

Rounds a number to the nearest integer.

36 of 38

Math Object - Methods

36

Method Name

Description

sqrt(x)

Returns the square root of a number.

sin(x)

Returns the sine of a number.

cos(x)

Returns the cosine of a number.

tan(x)

Returns the tangent of an angle.

37 of 38

Math Object - Properties

37

Property Name

Description

PI

Returns PI (approx. 3.14159)

​

38 of 38

Example - Math Object

38