Scribd
Upload
12 views

Methods of window n document object

Uploaded by

sadasib.padhy
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
12 views

Methods of window n document object

Uploaded by

sadasib.padhy
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/ 10

Methods of window object

The important methods of window object are as follows:

Method Description

alert() displays the alert box containing message with ok button.

confirm() displays the confirm dialog box containing message with ok and
cancel button.

prompt() displays a dialog box to get input from the user.

open() opens the new window.

close() closes the current window.

setTimeout() performs action after specified time like calling function,


evaluating expressions etc.

Example of alert() in javascript

It displays alert dialog box. It has message and ok button.

1. <script type="text/javascript">
2. function msg(){
3. alert("Hello TRIDENT");
4. }
5. </script>
6. <input type="button" value="click" onclick="msg()"/>

Example of confirm() in javascript

It displays the confirm dialog box. It has message with ok and cancel buttons.

1. <script type="text/javascript">
2. function msg(){
3. var v= confirm("Are u sure?");
4. if(v==true){
5. alert("U ve clicked on ok");
6. }
7. else{
8. alert("U ve clicked on cancel");
9. }

10. }
11. </script>

12. <input type="button" value="delete record" onclick="msg()"/>

Example of prompt() in javascript

It displays prompt dialog box for input. It has message and textfield.

1. <script type="text/javascript">
2. function msg(){
3. var v= prompt("What is ur name?");
4. alert("I am "+v);

5. }
6. </script>

7. <input type="button" value="click" onclick="msg()"/>

Example of open() in javascript

It displays the content in a new window.

1. <script type="text/javascript">
2. function msg(){
3. open("http://www.google.com");
4. }
5. </script>
6. <input type="button" value="GOOGLE" onclick="msg()"/>

1. <script type="text/javascript">
2. function msg(){
3. var b=open("","my win","width=20,height=15");
4. b.document.write("my window");
5. }
6. </script>

7. <input type="button" value="create window" onclick="msg()">

window.open("https://www.w3schools.com", "_blank", "toolbar=yes,scrollbars


=yes,resizable=yes,top=500,left=500,width=400,height=400");

Example of close() in javascript

1. <script type="text/javascript">
2. var b;
3. function msg(){
4. b=open("","my win","width=20,height=15");
5. b.document.write("my window");
6. }
7. function closewin(){
8. b.close();
9. }

10. </script>
11. <input type="button" value="create window" onclick="msg();">

12. <input type="button" value="close window" onclick="closewin();">


setTimeout allows us to run a function once after the interval of time.
setInterval allows us to run a function repeatedly, starting after the
interval of time, then repeating continuously at that interval

setTimeout Example

<head>

<title>

HTML | DOM Window setTimeout() method

</title>

</head>

<body>

<input type=”button” value=”click” onclick="tact();">

Press me

</button>

<script>

function tat() {

alert('Welcome to TRIDENT');

function tact()

{
setTimeout(tat,2000)

</script>

</body>

</html>

setInterval Example

<!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>

The getElementById() is a method used to return the element that has the ID
attribute with the specified value.

function tact()

const myElement = document.getElementById("demo");

myElement.style.color = "red";

Or just change its color:

document.getElementById("demo").style.color = "red";

Example of getElementsByName()

<!DOCTYPE html>

<html>

<head>

<title>DOM getElementsByName() Method</title>


</head>

<body>

<!-- Multiple html element with test name -->

<h1 name="test">TRIDENT sample 1</h1>

<h1 name="test">TRIDENT sample 2</h1>

<h1 name="test">TRIDENT sample 3</h1>

<p>DOM getElementsByName() Method</p>

<script>

// Accessing the element by getElementsByName method

var temp = document.getElementsByName("test");

document.write(temp[0].innerHTML);

document.write(temp[1]);

document.write(temp[2]);

</script>

</body>

</html>
The innerHTML property can be used to write the dynamic html on the html

document.

Example of getElementsByTagName()

<!DOCTYPE html>

<html>

<script>

function t()

document.getElementsByTagName("p")[0].innerHTML = "Hello World!";

</script>

<body>

<h1>The Document Object</h1>

<h2>The getElementsByTagName() Method</h2>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<input type="button" value="click" onclick="t();">

</body>
</html>

EXAMPLE 2

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

margin: 5px;

</style>

</head>

<body>

<div id="myDIV">

<p>First p element in div.</p>

<p>Second p element in div.</p>

<p>Third p element in div.</p>

</div>
<p>Click the button to add a background color to all p elements inside the
div element.</p>

<input type=”button” value=”show “ onclick="myFunction();">Try it

<script>

function myFunction() {

var x = document.getElementById("myDIV");

var y = x.getElementsByTagName("P");

var i;

for (i = 0; i < y.length; i++) {

y[i].style.backgroundColor = "red";

</script>

</body>

</html>

You might also like