Scribd Logo
Upload

Welcome to Scribd!

  • 48 views

    The Important Methods of Window Object Are As Follows

    Uploaded by

    Mac John Teves Poblete
    The window object represents a browser window and is automatically created by the browser. It contains methods like alert(), confirm(), and prompt() to display dialog boxes. The history object represents URLs visited and contains methods like back() and forward() to navigate pages. Common HTML events for JavaScript include onclick, onmouseover, onsubmit, and onload, which trigger JavaScript code.

    Copyright:

    © All Rights Reserved
    Download as DOC, PDF, TXT or read online from Scribd

    The Important Methods of Window Object Are As Follows

    Uploaded by

    Mac John Teves Poblete
    48 views5 pages
    The window object represents a browser window and is automatically created by the browser. It contains methods like alert(), confirm(), and prompt() to display dialog boxes. The history object represents URLs visited and contains methods like back() and forward() to navigate pages. Common HTML events for JavaScript include onclick, onmouseover, onsubmit, and onload, which trigger JavaScript code.

    Original Title

    Lec #2 ap

    Copyright

    © © All Rights Reserved

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The window object represents a browser window and is automatically created by the browser. It contains methods like alert(), confirm(), and prompt() to display dialog boxes. The history object represents URLs visited and contains methods like back() and forward() to navigate pages. Common HTML events for JavaScript include onclick, onmouseover, onsubmit, and onload, which trigger JavaScript code.

    Copyright:

    © All Rights Reserved
    Download as DOC, PDF, TXT or read online from Scribd
    Download as doc, pdf, or txt
    48 views5 pages

    The Important Methods of Window Object Are As Follows

    Uploaded by

    Mac John Teves Poblete
    The window object represents a browser window and is automatically created by the browser. It contains methods like alert(), confirm(), and prompt() to display dialog boxes. The history object represents URLs visited and contains methods like back() and forward() to navigate pages. Common HTML events for JavaScript include onclick, onmouseover, onsubmit, and onload, which trigger JavaScript code.

    Copyright:

    © All Rights Reserved
    Download as DOC, PDF, TXT or read online from Scribd
    Download as doc, pdf, or txt
    You are on page 1of 5

    1

    JavaScript Window Object

    The window object represents a window in browser. An object of window is created automatically by the browser.
    Window is the object of browser, it is not the object of javascript. The javascript objects are string, array, date etc.

    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 Alert Box");  
    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("ok");  
    6. }  
    7. else{  
    8. alert("cancel");  
    9. }  
    10.   
    11. }  
    12. </script>  
    13. <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("Who are you?");  

    1
    2

    4. alert("I am "+v);  
    5.   
    6. }  
    7. </script>  
    8. <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.javatpoint.com");  
    4. }  
    5. </script>  
    6. <input type="button" value="javatpoint" onclick="msg()"/> 

    Example of setTimeout() in javascript


    It performs its task after the given milliseconds.
    1. <script type="text/javascript">  
    2. function msg(){  
    3. setTimeout(  
    4. function(){  
    5. alert("Welcome to Javatpoint after 2 seconds")  
    6. },2000);  
    7.   
    8. }  
    9. </script>  
    10.   
    11. <input type="button" value="click" onclick="msg()"/>

    JavaScript History Object

    The JavaScript history object represents an array of URLs visited by the user. By using this object, you can load previous, forward or
    any particular page.

    The history object is the window property, so it can be accessed by:


    window.history  
    or
    history

    Property of JavaScript history object


    There are only 1 property of history object.
    No. Property Description

    1 length returns the length of the history URLs.

    2
    3

    Methods of JavaScript history object


    There are only 3 methods of history object.
    No. Method Description

    1 forward() loads the next page.

    2 back() loads the previous page.

    3 go() loads the given page number.

    Example of history object


    Let’s see the different usage of history object.
    1. history.back();//for previous page  
    2. history.forward();//for next page  
    3. history.go(2);//for next 2nd page  
    4. history.go(-2);//for previous 2nd page 

    HTML/DOM events for JavaScript


    HTML or DOM events are widely used in JavaScript code. JavaScript code is executed with HTML/DOM
    events. So before learning JavaScript, let’s have some idea about events.
    Events Description

    onclick occurs when element is clicked.

    ondblclick occurs when element is double-clicked.

    onfocus occurs when an element gets focus such as button, input, textarea etc.

    onblur occurs when form looses the focus from an element.

    onsubmit occurs when form is submitted.

    onmouseover occurs when mouse is moved over an element.

    onmouseout occurs when mouse is moved out from an element (after moved over).

    onmousedown occurs when mouse button is pressed over an element.

    onmouseup occurs when mouse is released from an element (after mouse is pressed).

    onload occurs when document, object or frameset is loaded.

    onunload occurs when body or frameset is unloaded.

    onscroll occurs when document is scrolled.

    onresized occurs when document is resized.

    3
    4

    onreset occurs when form is reset.

    onkeydown occurs when key is being pressed.

    onkeypress occurs when user presses the key.

    onkeyup occurs when key is released.

    Program 1

    <html>
    <head>
    <script>
    function url1(){
    window.open("http://www.gmail.com");
    }

    function url2(){
    window.location = 'http://www.gmail.com';
    }
    </script>
    </head>
    <body>
    <input type="button" value="using open method" onclick="url1()"/> <br>
    <input type="button" value="using open method without function" onclick="window.open('http://espn.com')"/> <br>
    <input type="button" value="using window property" onclick="url2()"/>
    <br><br><br>sdbsdgs<br><br><a onclick="window.close()"> close me </a>
    </body>
    </html>

    Program 2

    <html>
    <head>
    <script>
    </script>
    </head>
    <body>
    <input type="button" value="open method"
    onclick="open('p1.html','','width=300,height=200,left=600,top=300,address=no,toolbar=no')">
    </body>
    </html>

    Program 3

    <html>
    <head>
    <script>
    function x() {
    alert('you entered age!');
    }
    </script>
    </head>

    4
    5

    <body>
    <a onmouseover="document.getElementById('sp1').innerHTML='this is link 1'"> Link 1 </a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a onmouseover="document.getElementById('sp1').innerHTML='this is link 2'"> Link 2
    </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a onmouseover="document.getElementById('sp1').innerHTML='this is link 3'"> Link 3 </a>
    <br><br><br>
    <span style="width:600px;font-size:2em;border:1px solid green" id="sp1">the message will display here </span>
    </body>
    </html>

    Program 4

    <html>
    <head>
    <script>
    function x() {
    alert('you entered age!');
    }
    </script>
    </head>
    <body>
    <a onmouseover="pic1.src='j2.jpg'" onmouseout="pic1.src='j1.jpg'"> Link 1 </a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a onmouseover="pic1.src='j3.jpg'"> Link 2
    </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a onmouseover="pic1.src='j4.jpg'"> Link 3 </a>
    <br><br><br>
    <span style="width:600px;font-size:2em;border:1px solid green" id="sp1"><center> <img id="pic1" src="j1.jpg"> </center></span>
    </body>
    </html>

    Program 5

    <html>
    <head>
    <script>
    function x() {
    var a=document.getElementById('txta');
    alert('hello! you are '+a.value + ' years old!');
    }
    </script>
    </head>
    <body>
    Enter your age <input type="text" id="txta" onkeyup="x()">
    </body>
    </html>

    You might also like