Overview
• Date objects
• Document Object Model
• Image Object
• Function
Date Object
Basics To get year, moth and day
Work with date and time
To display a timer on webpage
Use different date constructors to create date object
Methods to get and set day, month, year, hour, minute and
seconds
new Date(): To create date object
Date Object (Contd.)
Date()
Date(year,
month, day,
hours, minutes, Variants of Date
seconds, date (miliseconds)
milliseconds) constructor
Date(dateString)
Date Object (contd.)
new Date()
• Displays current date and time
• Example:
const cdt = new Date();
<!DOCTYPE html>
<html>
<body>
<h2>Demonstration of JavaScript new Date()</h2>
<p id="date"></p>
<script>
const cdt = new Date();
document.getElementById("date").innerHTML = cdt;
</script>
</body>
</html>
Date Object (contd.)
<script>
var date=new Date();
var day=date.getDate();
var month=date.getMonth()+1;
var year=date.getFullYear();
document.write("<br>Date is: "+day+"/"+month
+"/"+year);
</script>
const d = new Date();
Get Date Methods
Method Description Example Output
getFullYear() returns year d.getFullYear(); 2023
getMonth() returns month d.getMonth(); 4
[0-11]
getDate() returns date[1-31] d.getDate(); 17
getHours() returns hours d.getHours(); 15
Number[0-23]
getMinutes() returns minutes d.getMinutes(); 30
Number[0-59]
getSeconds() returns seconds d.getSeconds(); 58
Number[0-59]
getDay() returns weekdays d.getDay(); 1
Number[0-6]
Set Date Methods
Method Description Example
setFullYear() sets year d.setFullYear(2021);
setMonth() sets month d.setMonth();
[0-11]
setDate() sets date d.setDate();
Number[1-31]
setHours() sets hours d.setHours();
Number[0-23]
setMinutes() sets minutes d.setMinutes();
Number[0-59]
setSeconds() sets seconds d.setSeconds();
Number[0-59]
Document Object
HTML
document
Document
Object
represents web page
Properties
and
methods
Document Object Model
World Wide Web Standard for accessing
Consortium documents
Update the content
structure, and style of a
document
Document Object Model (Contd.)
Document
Anchor Form link
Text Text Area Checkbox Radio Select Reset
Button
Document Object Model (contd.)
• World Wide Web Consortium standard
• Defines a way to access and modify the
document content
• HTML DOM: Standard object model for HTML
documents
HTML elements as objects
Properties (values) of all HTML elements
Methods (actions)to access all HTML elements
Document Object Model (contd.)
• Constructed as a tree of objects
<html>
Root Element
<head> <body>
Title <h1>
Need of DOM in JavaScript
Change HTML Change HTML Change CSS
elements attributes Styles
Delete HTML Add HTML
elements elements
JavaScript HTML DOM Methods
• Example
Method getElementById
(Access HTML element using ID)
Property innerHTML
(Way to get or replace the content
of HTML elements including
<html>
and body )
Methods of document object
Method Description
write("string") Writes given string on document
writeln("string") Writes given string on document with
newline character at end
getElementById() Returns element having given id
getElementsByName() Returns all the elements having the given
name value
getElementsByTagName() returns all the elements having the given
tag name
getElementsByClassName() returns all the elements having the given
class name
JavaScript HTML DOM Methods
(contd.)
• Finding HTML elements
Method Description
document.getElementById(id) Find an element by element id
document.getElementsByTagName(name)
Find elements by tag name
document.getElementsByClassName(name)
Find elements by class name
Accessing field value by document object
document.formA.name.value
HTML document
Name of form
Attribute name
of input text
Value of input text
document.getElementById Method
Returns elements of specific To get value of input field by
ID defining id
document.getElementById Method
• Syntax:
document.getElementById(id).innerHTML = new HTML
• Changes the content of <p> element
• Example
<!DOCTYPE html>
<html>
<body>
<h2>Use of innerHTML</h2>
<p><b>Paragraph content</b></p>
<p id="js"></p>
<script>
document.getElementById("js").innerHTML = "Paragraph content is changed
into the First JavaScript";
</script>
</body>
</html>
Changing the Value of an Attribute
• Syntax
document.getElementById(id).attribute = new value
• Example
<!DOCTYPE html>
<html>
<body>
<img id="logo" src="google.png">
<script>
document.getElementById("logo").src = "NITP.jpg";
</script>
</body>
</html>
getElementsByClassName()
Selecting Search whole
elements Array-like object consists of document and
through their elements having specific return only those
class name classname elements for
value specified match
Returns
collection of Syntax
elements for
multiple var ele=document.getElementsByClassName('name');
classes
document.getElementsByName() method
• Returns all the element of specified
Basics
name
Syntax • document.getElementsByName("name")
Image Object
Basics
• Represents HTML <img> element
How to access image object
keyword variable_name = document.getElementById(“ID
name");
Example:
let x = document.getElementById(“imgo");
Image Object (contd.)
• Example
<!DOCTYPE html>
<html>
<body>
<h2>Access an image object</h2>
<img id="imgo" src="nitp.jpg" alt="NITP" width="200" height="200">
<button onclick="imgFunction()">Get it</button>
<p id="io"></p>
<script>
function imgFunction() {
let a = document.getElementById("imgo").src;
document.getElementById("io").innerHTML = a;
}
</script>
</body>
</html>
Image Object (contd.)
Create an Image Object
• var x = document.createElement("IMG");
Example:
<!DOCTYPE html>
<html>
<body>
<p>Create an IMG element by clicking the button</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.createElement("IMG");
x.setAttribute("src", "nitp.jpg");
x.setAttribute("width", "300");
x.setAttribute("height", "200");
x.setAttribute("alt", "NIT Patna");
document.body.appendChild(x);
}
</script>
</body>
</html>
Window Object
Window in browser Object of browser
Window Object
• Represents the browser’s window
window.document.getElementById("header");
document.getElementById("header");
Window Size
window.innerHeight window.innerWidth
Inner height of browser Inner width of browser
window window
let h = window.innerHeight; let w = window.innerWidth;
Window Size (contd.)
• Example of window.innerHeight
<!DOCTYPE html>
<html>
<body>
<h2>Window Height</h2>
<p id="wh"></p>
<script>
document.getElementById("wh").innerHTML = window.innerHeight+"px";
</script>
</body>
</html>
Window Size (contd.)
• Example of window.innerWidth
<!DOCTYPE html>
<html>
<body>
<h2>Window Width</h2>
<p id="wd"></p>
<script>
document.getElementById("wd").innerHTML = innerWidth+"px";
</script>
</body>
</html>
Methods of Window Object
Method Description
Open() Opens new window
Close() Close the current window
moveTo() Moves the current window
resizeTo() resize the current window
Methods of Window Object
Method Description
alert() alert box containing message with ok
button
confirm() confirm dialog box containing message
with ok and cancel button
prompt() dialog box to get input from the user
setTimeout() performs action after specified time like
calling function, evaluating expressions
Window Location Object
• Used to get the current page address
• Properties:
window.location.href
window.location.hostname
window.location.pathname
window.location.protocol
window.location.port
Window Location Object (contd.)
window.location.href
• Returns URL of current page
• window.location.href
• Example:
<!DOCTYPE html>
<html>
<body>
<h3>Location object</h3>
<p id="locat"></p>
<script>
document.getElementById("locat").innerHTML = location.href;
</script>
</body>
</html>
Window Location Object (contd.)
window.location.hostname
• Returns the name of internet host
• Example:
<!DOCTYPE html>
<html>
<body>
<h3>location object</h3>
<p id="host"></p>
<script>
document.getElementById("host").innerHTML =
location.hostname;
</script>
</body>
</html>
Window Location Object (contd.)
window location pathname
• returns the pathname of the current page
• Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<h3>window location pathname object</h3>
<p id="wlp"></p>
<script>
document.getElementById("wlp").innerHTML = window.location.pathname;
</script>
</body>
</html>
Window Location Object (contd.)
window.location.protocol
• Returns web protocol of page.
• Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<h3>The window.location protocol</h3>
<p id="wlp"></p>
<script>
document.getElementById("wlp").innerHTML = window.location.protocol;
</script>
</body>
</html>
Window Location Object (contd.)
window.location.port
• returns the number of the internet host port
• Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<h3>The window.location protocol</h3>
<p id="wlp"></p>
<script>
document.getElementById("wlp").innerHTML = window.location.port;
</script>
</body>
</html>
Window Location Object (contd.)
window.location.assign
<!DOCTYPE html>
<html>
<body>
<h3>The window location object</h3>
<input type="button" value="Google" onclick="newPage()">
<script>
function newPage() {
window.location.assign("https://www.google.com")
}
</script>
</body>
</html>
Window History Object
• Comprised of URLs visited by user
• Property of window object
• How to access
window.history or history
Example:
let length = history.length;
Output: No. of URLs in history list
Window History Object (contd.)
• Methods
1. back():
only works if previous page exists
<button onclick="history.back()">Go Back</button>
2. forward()
only works if a next page exists.
<button onclick="history.forward()">Go Forward</button>
3. go()
loads a URL (page) from the history list and only works if the page exist
in the history list
history.go(number)
Negative: Go back
Positive: Go forward
Window History Object
1.history.back();//previous page
2.history.forward();//next page
3.history.go(2);//next 2nd page
4.history.go(-2);//previous 2nd page
Function
• Lines of code to perform a action
• Executed when something calls it
• Two ways of using function
1. Function declaration
2. Function Expression
Function (contd.)
• How to define/declare a function
Function defined with function keyword. Three parts to
define a function
1. Define a name: Follow same rule as variable
2. Indicate arguments (): include parameter names
separated by comma
3. Add statements: Use curly brackets {}
• Function Expression: stored in a variable
Example:
const f = function (x, y) {return x + y};
document.getElementById("demo").innerHTML = f(5, 6);
Function (contd.)
• Syntax
function functionname(parameter1,
parameter2) {
// code to be executed
}
• Need of functions
Reusability of same code
Function (contd.)
• How to call a function
When an event occurs
When it is invoked (called) from JavaScript
code
Function (contd.)
• Function return: indicates end of execution
• Return result to caller
• Example:
• let c = sum(4, 3);
function sum (a, b) {
return a + b;
}
Function (contd.)
• Example:
<!DOCTYPE html>
<html>
<body>
<h2>Example of JavaScript Function</h2>
<p id="f"></p>
<script>
let c = sum(5, 10);
document.getElementById("f").innerHTML = c;
function sum (a, b) {
return a + b;
}
</script>
</body>
</html>
