JavaScript

Objects
What are JS objects ?
• JS object is like a real-world entity .
• Object – properties and behavior
• Example :

• Objects in JS is used to represent and organize the data

• In JS object is a collection of key-value pairs.
 Object Creation
• In JS there are three methods of creating
an object : -
 METHOD 1 (using new keyword )

var obj_name = new Object(parameter 1,parameter 2,…)

 METHOD 2 (using object literal )
var object_name = {
Property1 : value ,
Property2 : value ,
….
};
 METHOD 3 (using costructor)
function obj_name(Property1,Property2,…){
this.Property1 = Property1;
this.Property2= Property2;
}
var object_name = {
Property1 : value ,
Property2 : value ,
….
};
 Object Methods
DEFINITION
• Object methods are functions that are defined as properties of an object. They are included
as part of the object's structure and are accessible through object instances.
ACCESS AND INVOCATION
• Object methods are accessed and invoked using the dot notation. By referencing the
object instance followed by the method name and parentheses, you can execute the
method on that specific object.
THIS KEYWORD
• Object methods have access to the object's properties and other methods through
the use of the "this" keyword. Inside a method, "this" refers to the object instance
that the method belongs to, allowing you to access and manipulate its data.
MANIPULATING OBJECT DATA
•Object methods can modify the object's properties, calculate values based on the
object's data, or perform any other operation that is relevant to the object's purpose.

CUSTOM METHODS
In addition to built-in methods provided by JavaScript for various object
types (such as arrays and strings), you can create your own custom methods
for user-defined objects. These methods can be tailored to specific needs and
perform actions or computations that are specific to your application.
• Math object
• Boolean object
• Date object
MATH OBJECT
•JavaScript provides a powerful set of Math objects that developers can use to perform
complex mathematical operations. Understanding these objects is key to creating efficient and
effective JavaScript code.

•Math is a built-in object in JavaScript that provides a set of methods and properties for
performing mathematical tasks. Some of the most commonly used methods include
Math.floor(), Math.random(), Math.pow() and more.

•In addition to methods, the Math object also provides several useful constants such as
Math.PI, Math.E, and Math.SQRT2. These constants can be used in mathematical
calculations to provide accurate and precise results.
 Basic operations
• 'Math.abs() (returns the absolute value of a number)
• Math.floor() (rounds a number down to the nearest integer)
• Math.ceil() (rounds a number up to the nearest integer)
• 'Math.round() (rounds a number to the nearest integer)
• Math.random() (generates a random number between O and 1)

• Math.pow() (raises a number to a specified power)

• Math.sqrt() (calculates the square root of a number)
• 'Math.exp() (calculates the value of Euler's number raised to the power of a number)
• Math.log() (calculates the natural logarithm of a number)
• Math.log10() (calculates the base 10 logarithm of a number)

• Math.sin(), 'Math.cos()", and Math.tan() (calculates the sine, cosine, and tangent of an angle, respectively)
 BOOLEAN OBJECT
• Boolean Object is a wrapper object for a boolean value true or false in JavaScript. In
this presentation, we are going to learn about various Boolean Object methods that help
in manipulating Boolean values

• Boolean() method is used to convert a non-boolean value to a boolean value. If the value
is falsy, it returns false, otherwise, it returns true. This method is useful when we want
to convert a non-boolean value to a boolean value for comparison or conditional
statements.

• toString() method is used to convert a boolean value to a string. It returns the string
'true' or 'false' depending on the boolean value. This method is useful when we want to
convert a boolean value to a string for display or concatenation.

• valueOf() method is used to return the primitive value of a Boolean object. It returns the
boolean value true or false. This method is useful when we want to extract the boolean
 DATE OBJECT
• JavaScript Date Object provides a rich set of methods to work with dates. It is an important aspect of any
web application that deals with dates. This guide will help you master date manipulation in JavaScript.

• To create a new Date object, you can use the new Date() constructor

• Date and Time Components: The Date object provides various methods to access and manipulate diIerent
components of a date and time, such as year, month, day, hour, minute, second, and milliseconds. These
methods include 'getFullYear()`, 'getMonth(), 'getDate()", 'getHours(), getMinutes()`, 'getSeconds(),
and more.

• The Date object allows you to perform calculations and manipulations on dates. You can add or subtract
time intervals using methods like 'setFullYear()`, `setMonth(), 'setDate()', 'setHours()
 Array
 JavaScript array is a single variable that is used to store different element .
 It is often used when we want to store a list of elements and access them by a single variable in JavaScript.
 In Java Script ,an array is a single variable that stores multiple elements

Why Use Arrays?

 An array can hold many values under a single name, and you can access the values by referring to an index number.
var car1 = "Saab"; var car2 = "Volvo"; var car3 = "BMW";
Declaration of An Array
There are basically two ways to declare an array
Syntax:
const arrayName = [value 1 , value 2, ……..];
const arrayName = new Array();
Example
var cars = ["Saab", "Volvo", "BMW “ ];
var cars = new Array("Saab", "Volvo", "BMW");
Accessing Array Elements
You access an array element by referring to the index number:
var cars = ["Saab", "Volvo", "BMW"];
var car = cars[0];

Note: Array indexes start with 0.

[0] is the first element. [1] is the second element
Changing an Array Element
This statement changes the value of the first element in
cars[0] = "Opel";
Example
var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
 Java Script Basic Array Methods
Java Script Array.push() Method

• It adds one or more elements to the end of an array.

• Example:

fruits.pop();
 Java Script Basic Array Methods
Java Script Array.pop() Method
• It removes and returns the last element of an array.
• Example:
 Java Script Basic Array Methods
Shifting An Elements
Shifting is equivalent to popping ,but working on the first element
instead of the last

JavaScript Array shift()

The shift() method removes the first array element and “shift” all other
elements to a lower index.

fruits.pop();
 Java Script Basic Array Methods
JavaScript Array unshift()
The unshift() method adds a new element to an array(at the beginning),and “unshift”
older elements.

fruits.pop();
 Length function()

Reverse function()

2/1/20XX PRESENTATION TITLE

 String
 The String class is used to create string objects.
The string objects are created using ’new' keyword or without using new keyword (shortcut constructor)
 var greet = new String( “Good”); // long form constructor
 var greet = “Good”; //shortcut constructor

 A common need is to get the length of a string. This is achieved through the length property alert
(greet.length); // will display "4“

Another common way to use strings is to concatenate them together using operator
 var str = greet.concat(“ Morning”); //Long form concatenation
 var str = greet + "Moming"; // + operator concatenation

Create JavaScript Strings:

In JavaScript, strings are created by surrounding them with quotes. There are two ways you can use quotes.
• Single quotes: ['Hello']
• Double quotes: ["Hello"]
 JavaScript Strings are immutable

In JavaScript, strings are immutable. That means the characters of a string cannot be changed.
For example,
var a = 'hello’;
a[0] = 'H';
console.log(a); // "hello“

However, you can assign the variable name to a new string.

For example:
 JavaScript String Methods

• String length
• String slice()
• String substring()
• String replace() String replaceAII()
• String toUpperCasef) String toLowerCase() String concat()
• String trim()
• String trimStart()
• String trimEnd() String padStart() String padEnd() String charAt() String charCodeAt()
• String split()
  JavaScript String Length

• The length property returns the length of a string:

• JavaScript String slice()

slice () extracts a part of a string and returns the extracted part in a new string.

The method takes 2 parameters: start position, and end position (end not included).
  JavaScript String substring()
substring() is similar to slice().

The difference is that start and end values less than 0 are treated as 0 in
substring().
Example:
var str = "Apple, Banana, Kiwi ";
var part = str.substring(7, 13);
 Difference between substring() and slice()

• Parameters:
substring(start, end): Takes two parameters, where start is
the starting index of the substring (inclusive) and end is the
ending index of the substring (exclusive).

slice(start, end): Also takes two parameters, where start is the

starting index of the substring (inclusive), and end is the
ending index of the substring (exclusive).

Negative Indices:
substring(): If any parameter is negative, it is treated as zero.
slice(): Negative parameters are counted from the end of the
string. For example, slice(-3) extracts the last three characters
of the string.
 Document Object Model (DOM)
• When a web page is loaded, the browser creates a Document Object Model
of the page.
• DOM is an API for HTML/XML documents
• DOM helps JS to understand what is inside the Html
• It defines a webpage in a hierarchical way to become easy to use and
manipulate
• It represents the entire document as objects and nodes
• Every browsers uses DOM to make the webpage of the document accessible
by JS
• How does JS understand this HTML document ?

HTML

Head Body

Title

h1 div id =“div1” div id =“div2”

DOM example
Example Showing DOM tree p p class =“p2”

PTag1 PTag2
 HTML
• Element node : Element
consist of all tags node
used in html (head ,
body tag) Head Body
Attribute
node
• Attribue node : Title
consist of all attribute Text h1 div id =“div1” div id =“div2”
used in html DOM example node

Example Showing DOM tree p p class =“p2”

• Text node : consist of
value of that
PTag2
particular element PTag1