Scribd
Upload
13 views9 pages

Browser

Study with me

Uploaded by

janhavi1292006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views9 pages

Browser

Study with me

Uploaded by

janhavi1292006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Creating a webpage in new Window:

HTML anchor tag is used to open URLs in a new tab using the target=”_blank”
attribute. In JavaScript, we have an inbuilt method window.open() which is used
to open a new browser window or new tab depending on the browser settings.

<html>
<head>
<title>Open URL in New Tab </title>
</head>
<body>
<p> Click the button to open
<b> geeksforgeeks.org </b>
in new tab
</p>
<button onclick="NewTab()">
Open Geeksforgeeks
</button>
<script>
function NewTab() {
window.open(
"https://www.geeksforgeeks.org", "_blank");
}
</script>
</body>
</html>

Timers:

The window object allows execution of code at specified time intervals.

These time intervals are called timing events.

The two key methods to use with JavaScript are:

 setTimeout(function, milliseconds)
Executes a function, after waiting a specified number of milliseconds.

 setInterval(function, milliseconds)
Same as setTimeout(), but repeats the execution of the function continuously.

The setTimeout() and setInterval() are both methods of the HTML DOM Window object.

The setTimeout() Method


window.setTimeout(function, milliseconds);

The window.setTimeout() method can be written without the window prefix.

The first parameter is a function to be executed.

The second parameter indicates the number of milliseconds before execution.

1.

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Timing</h2>

<p>Click "Try it". Wait 3 seconds, and the page will alert "Hello".</p>
<button onclick="setTimeout(myFunction, 3000);">Try it</button>

<script>

function myFunction() {

alert('Hello');

</script>

</body>

</html>

2.

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Timing</h2>

<p>Click "Try it". Wait 3 seconds. The page will alert "Hello".</p>

<p>Click "Stop" to prevent the first function to execute.</p>

<p>(You must click "Stop" before the 3 seconds are up.)</p>

<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>

<button onclick="clearTimeout(myVar)">Stop it</button>

<script>

function myFunction() {

alert("Hello");

</script>

</body>

</html>
The setInterval() Method
The setInterval() method repeats a given function at every given time-interval.

window.setInterval(function, milliseconds);

The window.setInterval() method can be written without the window prefix.

The first parameter is the function to be executed.

The second parameter indicates the length of the time-interval between each execution.

This example executes a function called "myTimer" once every second (like a digital watch)

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Timing</h2>

<p>A script on this page starts this clock:</p>

<p id="demo"></p>

<script>

setInterval(myTimer, 1000);

function myTimer() {

const d = new Date();

document.getElementById("demo").innerHTML = d.toLocaleTimeString();

</script>

</body>

</html>
browser location and history in javascript

Window Location
The window.location object can be written without the window prefix.

Some examples:

 window.location.hostname returns the domain name of the web host


 window.location.pathname returns the path and filename of the current
page
 window.location.protocol returns the web protocol used (http: or https:)

Window Location Pathname


The window.location.pathname property returns the pathname of the current
page.

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML =

"Page path is: " + window.location.pathname;

</script>

</body> </html>
Window Location Hostname
The window.location.hostname property returns the name of the internet host
(of the current page).

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML =

"Page hostname is: " + window.location.hostname;

</script>

</body>

</html>

Window Location Protocol


The window.location.protocol property returns the web protocol of the page.

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript</h2>
<h3>The window.location object</h3>

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML =

"The page protocol is: " + window.location.protocol;

</script>

</body>

</html>

Window History
The window.history object can be written without the window prefix.

To protect the privacy of the users, there are limitations to how


JavaScript can access this object.

Some methods:

 history.back() - same as clicking back in the browser


 history.forward() - same as clicking forward in the browser

History Back

The history.back() method loads the previous URL in the history list.

This is the same as clicking the Back button in the browser.

<html>
<head>
<script>
function goBack() {
window.history.back()
}
</script>
</head>
<body>

<input type="button" value="Back" onclick="goBack()


">
</body>
</html>

History Forward

The history.forward() method loads the next URL in the history list.

This is the same as clicking the Forward button in the browser.

<html>
<head>
<script>
function goForward() {
window.history.forward()
}
</script>
</head>
<body>

<input type="button" value="Forward" onclick="goFor


ward()">

</body>
</html>

You might also like