WEB DESIGNING VNSGU UNIT 4 JAVASCRIPT OBJECTS

UNIT 4 : JAVASCRIPT OBJECTS
1. Creating object :(By object literal, By creating instance of
Object, By using an object constructor)
2. Date object :
1. Date constructor: Date(), Date(milliseconds),
Date(dateString), Date(year, month, day, hours, minutes,
seconds, milliseconds)
2. Date Methods: getDate(), getDay(),getMonth(),
getHours(),
setDate, setMonth(),setDay(), toString()

3. Document Object Model (DOM):
1. DOM concepts
2. DOM properties
3. DOM methods :
• write(),
• writeln(),
• getElementById(),
• getElementsByName()

4.1 Document Object Model (DOM):
1. DOM concepts
2. DOM properties
3. DOM methods :
• write(),
• writeln(),
• getElementById(),
• getElementsByName()

4.1.1 DOM concepts
• The Document Object Model (DOM) is an
application programming interface (API) for
manipulating HTML documents(add, remove,
and modify parts of an HTML document).
• It defines the logical structure of the documents
in the form of a tree of objects where each
HTML element is represented as a node.
• When a web page is loaded, the browser creates
a Document Object Model of the page.

<!doctype html>
<html>
<head>
<title>My title</title>
</head>
<body>
<h1> My header</h1>
<a href=“link.html”>My link</a>
</body>
</html>

With the object model, JavaScript gets all the power it
needs to create dynamic HTML:
• JavaScript can change all the HTML elements in the
page
• JavaScript can change all the HTML attributes in the
page
• JavaScript can change all the CSS styles in the page
• JavaScript can remove existing HTML elements and
attributes
• JavaScript can add new HTML elements and
attributes
• JavaScript can react to all existing HTML events in
the page
• JavaScript can create new HTML events in the page

• NOTE: In the DOM, all HTML elements are
defined as Objects. So it will have both
property and method.
• The document object represents your web
page.
• If you want to access any element in an HTML
page, you always start with accessing the
document object.

4.1.2 DOM properties
□ DOM properties are values (of HTML Elements)
that you can set or change.
□ DOM properties are accessed using the
“document” object.
□ Syntax:
■ document.property_name

Properties Description
links refers to all <a> and <area> elements that have a “href” attributes
anchors refers to all <a> elements that have “name” attributes
scripts refers to all <script> elements
images refers to all <img> elements
doctype Specify the document’s type
head Refers to all < head> elements
Forms refers to all <form> elements
cookie returns all name/value pairs of cookies in the document
Domain refers domain name of the server
lastModified get the date and time of the last updated document
Title refers to <title> of the document
URL specify the URL of the Document

<html>
<body>
<p id="demo">Hello Javascript</p>
<script>
document.getElementById("demo").innerHTM
L = "Hello World!";
</script>
</body>
</html>

The innerHTML property is useful for getting
or replacing the content of HTML elements.

4.1.3 DOM methods :
 DOM methods are actions you can
perform (on HTML Elements).
□ write()
□ writeln()
□ getElementById()
□ getElementsByName()

write()
□ Write some text directly to the HTML
document.
□ Syntax:
■ document.write(exp1, exp2, exp3, ...)

Example:
<script>
document.write(“VNSGU”);
</script>

writeln()
□ The writeln() method is identical to the
document.write() method, with the
addition of writing a newline character
after each statement.

Example:
<script>
document.writeln(“VNSGU”);
document.writeln(“SURAT”);
</script>

getElementById()
□ The getElementById() method returns the
element that has the ID attribute with the
specified value.
□ Syntax:
■ document.getElementById(elementID)

Example:
<html>
<head>
<script>
function test()
{
var s=document.getElementById("txt").value;
document.write(s);
}
</script>
</head>
<body>
Enter Your Name :<input type="text" id="txt"> <br>
<input type="button" value="Click Here" onclick="test();">
</body>
</html>

getElementsByName()
□ The getElementsByName() method returns
a collection of all elements in the
document with the specified name.
□ The HTMLCollection object represents a
collection of nodes. The nodes can be
accessed by index numbers. The index starts
at 0.
□ Syntax:
■ document.getElementsByName(name)

Example:
<html>
<head>
<script>
function test()
{
var s1=document.getElementsByName("txt")[0].value;
var s2=document.getElementsByName("txt")[1].value;
document.write(s1+" "+s2);
alert(s1+" "+s2);
}
</script>
</head>
<body>
Enter Your First Name :<input type="text" name="txt"> <br>
Enter Your Last Name :<input type="text" name="txt"> <br>
<input type="button" value="Click Here" onclick="test();">
</body>
</html>

4.2 Creating object
 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

4.2 Creating object
 With JavaScript, you can define and create
your own objects.
 There are different ways to create new
objects:
1. Create a single object, using an object
literal.
2. Create a single object, with the keyword
new.
3. Define an object constructor, and then
create objects of the constructed type.

By object literal
□ The object literal is an easy way of
creating an object.
□ Using an object literal, you both define and
create an object in one statement.
□ An object literal is a list of name:value pairs
(like age:50) inside curly braces {}.
□ Syntax:
var object_name={ property1:value1,
property2:value2,….
propertyN:valueN
};

Example
<html>
<head>
<script>
var student={name:"ram",location:"Ayodhya",
Age:10000};
document.write(student.name);
</script>
</head>
</html>

By creating instance of Object
□ The second way to create an object is
using new keyword with object().
□ The new operator is used to create an
instance of an object.
□ Dot . and square brackets [] can be used to
specify properties and methods.

□ Syntax:
■ var object_name= new Object();
■ Object_name.property_name=property_value;
//specify property using dot
■ Object_name[“property_name”]=property_value;
// specify property using []

Example
<html>
<head>
<script>
var student = new Object();
student.name="Ram";
student["location"]="Ayodhya";
document.write(student.name+"<br>");
document.write(student["location"]);
</script>
</head>
</html>

By using an object constructor
□ First create a function with parameters
then assign value to each parameters
using this keyword.
□ this keyword refers to the current object.

□ Syntax:
function function_name(parameter1,
parameter2,...., parametern)
{
this.parameter1=value1;
this.parameter2=value2;
...
this.parametern=valuen;
}
object_name= new function_name(value1,
value2,....valuen);

Example:
<html>
<head>
<script>
function stud(name,location,age)
{
this.name=name; this.location=location; this.age=age;
}
student = new stud("Ram","Ayodhya",1000);
document.write(student.name+"<br>");
document.writeln(student.location+"<br>");
document.writeln(student.age);
</script>
</head>
</html>

4.3 Date object :
4.3.1 Date constructor:
• Date(),
• Date(milliseconds),
• Date(dateString),
• Date(year, month, day, hours,
minutes, seconds, milliseconds)

4.3.2 Date Methods:
• getDate(),
• getDay(),
• getMonth(),
• getHours(),
• setDate(),
• setMonth(),
• setDay(),
• toString()

Date constructor:
□ The purpose of date object is to work with
date (days, months, years) and time
(milliseconds, seconds, minutes, hours).
□ Date object is created using new Date().
□ Syntax :
var dateObj=new Date();

Date()
□ This is the default constructor with no
argument.
□ It initializes the Date object with the
current date and time.

Example:
<html>
<head>
<script>
var dateObj= new Date();
document.write(dateObj);
</script>
</head>
</html>

Date(milliseconds)
□ This method is with integer parameter.
□ It represents the date inmilliseconds.
□ Syntax:
Date.getMilliseconds()

Example:
<html>
<head>
<script>
var dateObj= new Date();
document.write(dateObj.getMilliseconds());
</script>
</head>
</html>

Date(dateString)
□ A dateString parameter is string value
representing a date, in the format accepted
by the Date.parse() method.

Example:
<html>
<head>
<script>
var str="8/25/2021";
dateObj= new Date(str);
document.write(dateObj);
</script>
</head>
</html>

Date(year, month, day, [ hours,
minutes, seconds, milliseconds])

Example:
<html>
<head>
<script>
bdate= new Date(1988,9,25,8,57,58,0);
document.write(bdate);
</script>
</head>
</html>

4.2.2 Date Methods:
□ getDate()
□ getDay()
□ getMonth()
□ getHours()
□ setDate
□ setMonth()
□ setDay()
□ toString()

getDate()
□ It returns the day (from 1 to 31) of the
month.

getDay()
□ It returns the day of the week.
□ Value form 0 to 6 (Sunday to Saturday).

getMonth()
□ It returns the month.
□ The value is from 0 to 11 (January to December).

getHours()
□ It returns the hours.
□ Value is from 0 to 23.

Example
<html>
<head>
<script>
var bdate= new Date();
document.write("Day of Month :"+bdate.getDate()+"<br>");
document.write("Day :"+bdate.getDay()+"<br>");
document.write("Month :"+bdate.getMonth()+"<br>");
document.write("Hour :"+bdate.getHours()+"<br>");
</script>
</head>
</html>

setDate()
□ It sets the day of given date object.

setMonth()
□ It sets the day of the month of given date
object.

setDay()
□ It sets the day of the month of given date
object.

toString()
□ It converts date object to string value.

Example
<html>
<head>
<script>
var bdate= new Date();
bdate.setDate(10);
bdate.setMonth(10);
bdate.toString();
document.write("Day of Month :"+bdate.getDate()+"<br>");
document.write("Day :"+bdate.getDay()+"<br>");
document.write("Month :"+bdate.getMonth()+"<br>");
document.write("To String :"+bdate.toString()+"<br>");
</script>
</head>
</html>

WEB DESIGNING VNSGU UNIT 4 JAVASCRIPT OBJECTS

More Related Content

Similar to WEB DESIGNING VNSGU UNIT 4 JAVASCRIPT OBJECTS

More from divyapatel123440

Recently uploaded

WEB DESIGNING VNSGU UNIT 4 JAVASCRIPT OBJECTS