Scribd
Upload
15 views

JavaScript II

Uploaded by

bhukyapraneetha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

JavaScript II

Uploaded by

bhukyapraneetha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 49

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>

You might also like