JavaScript II
JavaScript II
• Date objects
• Document Object Model
• Image Object
• Function
Date Object
Methods to get and set day, month, year, hour, minute and
seconds
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>
<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
HTML
document
Document
Object
represents web page
Properties
and
methods
Document Object Model
Document
<html>
Root Element
<head> <body>
Title <h1>
Need of DOM in JavaScript
• 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
Method Description
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
collection of Syntax
elements for
multiple var ele=document.getElementsByClassName('name');
classes
document.getElementsByName() method
Syntax • document.getElementsByName("name")
Image Object
Basics
• Represents HTML <img> element
window.innerHeight window.innerWidth
<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
Method Description
<p id="locat"></p>
<script>
document.getElementById("locat").innerHTML = location.href;
</script>
</body>
</html>
Window Location Object (contd.)
window.location.hostname
<h2>JavaScript</h2>
<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
<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>
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
• Syntax
function functionname(parameter1,
parameter2) {
// code to be executed
}
• Need of functions
Reusability of same code
Function (contd.)
<script>
let c = sum(5, 10);
document.getElementById("f").innerHTML = c;
function sum (a, b) {
return a + b;
}
</script>
</body>
</html>