Scribd Logo
Upload

Welcome to Scribd!

  • 12 views

    JU MVAS M05 C02 SLM Event Handling and Form Handling PDF

    Uploaded by

    Hari Ps
    The document provides an overview of event handling in JavaScript. It begins with an introduction to event handling and then describes different types of events like click, mouse, keyboard, form and window events. It explains how to define event handler functions and attach them to HTML elements using the "onclick", "onsubmit" etc attributes. The document also covers the Window object and its properties and methods for controlling browser windows. It concludes with descriptions of form handling in JavaScript including form field access, and basic validation of form fields.

    Copyright:

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

    JU MVAS M05 C02 SLM Event Handling and Form Handling PDF

    Uploaded by

    Hari Ps
    12 views40 pages
    The document provides an overview of event handling in JavaScript. It begins with an introduction to event handling and then describes different types of events like click, mouse, keyboard, form and window events. It explains how to define event handler functions and attach them to HTML elements using the "onclick", "onsubmit" etc attributes. The document also covers the Window object and its properties and methods for controlling browser windows. It concludes with descriptions of form handling in JavaScript including form field access, and basic validation of form fields.

    Original Title

    JU_MVAS_M05_C02_SLM_Event_Handling_and_Form_Handling.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document provides an overview of event handling in JavaScript. It begins with an introduction to event handling and then describes different types of events like click, mouse, keyboard, form and window events. It explains how to define event handler functions and attach them to HTML elements using the "onclick", "onsubmit" etc attributes. The document also covers the Window object and its properties and methods for controlling browser windows. It concludes with descriptions of form handling in JavaScript including form field access, and basic validation of form fields.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    12 views40 pages

    JU MVAS M05 C02 SLM Event Handling and Form Handling PDF

    Uploaded by

    Hari Ps
    The document provides an overview of event handling in JavaScript. It begins with an introduction to event handling and then describes different types of events like click, mouse, keyboard, form and window events. It explains how to define event handler functions and attach them to HTML elements using the "onclick", "onsubmit" etc attributes. The document also covers the Window object and its properties and methods for controlling browser windows. It concludes with descriptions of form handling in JavaScript including form field access, and basic validation of form fields.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 40

    Chapter Table of Contents

    Aim

    Instructional Objectives

    Learning Outcomes

    285
    5.2.1 Introduction

    5.2.2 Event Handling

    286

    <html>
    <head>
    <script type="text/javascript">
    <!--
    function sayHello()
    {
    alert("Hello World")
    }
    //-->
    </script>
    </head>
    <body>
    <p>Click the following button and see result</p>
    <form>
    <input type="button" onclick="sayHello()" value="Say Hello" />
    </form>
    </body>
    </html>

    287
    5.2.3 Event Types

    Event Description and Syntax

    <button onclick="myFunction()">Click me</button>

    <div oncontextmenu="myFunction()" contextmenu="mymenu">

    <p ondblclick="myFunction()">Double-click me</p>

    <p onmousedown="myFunction()">Click the text!</p>

    <img onmouseenter="bigImg(this)" src="smiley.gif"


    alt="Smiley">

    <img onmouseleave="normalImg(this)" src="smiley.gif"


    alt="Smiley">

    288
    <img onmouseover="bigImg(this)" src="smiley.gif"
    alt="Smiley">

    <input type="text" onkeydown="myFunction()">

    <input type="text" onkeypress="myFunction()">

    <input type="text" onkeyup="myFunction()">

    <select onchange="myFunction()">

    <input type="text" onfocus="myFunction()">

    <input type="text" onfocusin="myFunction()">

    <input type="text" onfocusout="myFunction()">

    289
    <input type="text" oninput="myFunction()">

    <input type="text" oninvalid="alert('You must fill out the


    form!');" required>

    <input type="search" onsearch="myFunction()">

    <input type="text" onselect="myFunction()">

    <form onsubmit="myFunction()">
    Enter name: <input type="text">
    <input type="submit">
    </form>

    <input type="text" oncopy="myFunction()" value="Try to


    copy this text">

    <input type="text" oncut="myFunction()" value="Try to cut


    this text">

    290
    <input type="text" onpaste="myFunction()" value="Paste
    something in here">

    <p draggable="true" ondrag="myFunction(event)">Drag


    me!</p>

    <div ondragenter="myFunction(event)"></div>

    <p draggable="true" ondragstart="myFunction(event)">Drag


    me!</p>

    <video onpause="myFunction()">

    <video onplay="myFunction()">

    <video onabort="myFunction()">

    291
    <video oncanplay="myFunction()">

    <video onseeked="myFunction()">

    var source = new EventSource("demo_sse.php");


    source.onerror = function()
    {
    // Do something to handle error
    };

    var source = new EventSource("demo_sse.php");


    source.onmessage = function(event)
    {
    document.getElementById("myDIV").innerHTML +=
    event.data + "<br>";
    };

    <body ononline="myFunction()">

    <body onoffline="myFunction()">

    292

    1. The onsubmit Event

    object.onsubmit=function(){myScript};

    <html>
    <head>
    <script type="text/javascript">
    <!--
    function validation()
    {
    all validation goes here
    .........
    return either true or false
    }
    //-->
    </script>
    </head>
    <body>
    <form method="POST" action="t.cgi" onsubmit="return validate()">
    .......
    <input type="submit" value="Submit" />
    </form>
    </body>
    </html>

    293
    2. The onload Event

    object.onload=function(){myScript};

    <img src="sample.gif" onload="loadImage()" width="100" height="132">

    <script>
    function loadImage()
    {
    alert("Image is loaded");
    }
    </script>

    3. The onunload Event

    object.onunload=function(){myScript};

    294
    <HTML>

    <HEAD>
    <TITLE>Example 5.1</TITLE>
    </HEAD>

    <BODY onLoad="alert('Hello,Welcome to my page!');"


    onUnload="alert('Goodbye! Sorry to see you go!');">
    <IMG SRC="title.gif">

    </BODY>
    </HTML>

    295
    Self-assessment Questions

    5.2.4 Window Object

    Window Object Properties

    296
    Property Description

    window.closed

    window.frameElement

    window.frames

    window.innerHeight
    window.innerWidth

    297
    window.length

    window.name=winName

    window.parent

    Method Description

    alert(message)

    window.blur()

    298
    window.close()

    confirm(message)

    window.focus()

    window.moveTo(x,y)

    window.open(URL,name,specs,replace)

    299
    window.print()

    prompt(text,defaultText)

    resizeBy(width,height)

    300
    window.stop()

    <!DOCTYPE html>
    <html>
    <body>
    <p>Click the button to loop through the frames on this page and change the
    location of every frame to "w3schools.com".</p>
    <button onclick="myFunction()">Try it</button>
    <br><br>
    <iframe src="http://www.cnn.com"></iframe>
    <iframe src="http://www.bbc.com"></iframe>
    <iframe src="http://www.nytimes.com"></iframe>

    <script>
    function myFunction()
    {
    var frames = window.frames;
    var i;
    for (i = 0; i < frames.length; i++)
    {
    frames[i].location = "http://www.javascript.com";
    }
    }
    </script>
    </body>
    </html>

    Dialog Boxes

     alert( ) method

    301
     confirm( ) method

     prompt( ) method

    302
     print( ) method

    303
    var person = prompt("Please enter your name", "Harry Potter");
    if (person != null)
    {
    document.getElementById("demo").innerHTML =
    "Hello " + person + "! How are you today?";
    }

    Window Control Methods

    304

    5.2.5 Form Handling

    Form Fields

    305
    <!DOCTYPE html>
    <html lang="en"><head>
    <meta charset="utf-8">
    <title>JavaScript Form Validation using a sample registration form</title>
    <meta name="keywords" content="example, JavaScript Form Validation, Sample
    registration form" />
    <meta name="description" content="This document is an example of JavaScript
    Form Validation using a sample registration form. " />
    <link rel='stylesheet' href='js-form-validation.css' type='text/css' />
    <script src="sample-registration-form-validation.js"></script>
    </head>
    <body onload="document.registration.userid.focus();">
    <h1>Registration Form</h1>
    <p>Use tab keys to move from one input field to the next.</p>
    <form name='registration' onSubmit="return formValidation();">
    <ul>
    <li><label for="userid">User id:</label></li>
    <li><input type="text" name="userid" size="12" /></li>
    <li><label for="passid">Password:</label></li>

    306
    <li><input type="password" name="passid" size="12" /></li>
    <li><label for="username">Name:</label></li>
    <li><input type="text" name="username" size="50" /></li>
    <li><label for="address">Address:</label></li>
    <li><input type="text" name="address" size="50" /></li>
    <li><label for="country">Country:</label></li>
    <li><select name="country">
    <option selected="" value="Default">(Please select a country)</option>
    <option value="AF">Australia</option>
    <option value="AL">Canada</option>
    <option value="DZ">India</option>
    <option value="AS">Russia</option>
    <option value="AD">USA</option>
    </select></li>
    <li><label for="zip">ZIP Code:</label></li>
    <li><input type="text" name="zip" /></li>
    <li><label for="email">Email:</label></li>
    <li><input type="text" name="email" size="50" /></li>
    <li><label id="gender">Sex:</label></li>
    <li><input type="radio" name="msex" value="Male" /><span>Male</span></li>
    <li><input type="radio" name="fsex" value="Female"
    /><span>Female</span></li>
    <li><label>Language:</label></li>
    <li><input type="checkbox" name="en" value="en" checked
    /><span>English</span></li>
    <li><input type="checkbox" name="nonen" value="noen" /><span>Non
    English</span></li>
    <li><label for="desc">About:</label></li>
    <li><textarea name="desc" id="desc"></textarea></li>
    <li><input type="submit" name="submit" value="Submit" /></li>
    </ul>
    </form>
    </body>
    </html>

    Form Validation

    307
    1. Basic Validation

    2. Data Format Validation

    <html>
    <body>
    <script>
    function validateform()
    {
    var name=document.myform.name.value;
    var password=document.myform.password.value;

    if (name==null || name=="")
    {
    alert("Name can't be blank");
    return false;
    }else if(password.length<6)
    {
    alert("Password must be at least 6 characters long.");
    return false;
    }
    }
    </script>
    <body>
    <form name="myform" method="post"
    action="http://www.javatpoint.com/javascriptpages/valid.jsp"
    onsubmit="return validateform()" >
    Name: <input type="text" name="name"><br/>
    Password: <input type="password" name="password"><br/>
    <input type="submit" value="register">
    </form>
    </body>
    </html>

    308
    309
    Self-assessment Questions

    5.2.6 User Interface (UI) Elements

    310

    UI Element Description

    311
    312
    5.2.7 Browser Management

    Method Description

    5.2.8 Media Management

    313
    314
    Self-assessment Questions

    315
    Summary
    o

    316
    Terminal Questions

    317
    Answer Keys
    Self-assessment Questions
    Question No. Answer

    318
    Activity

    319
    Bibliography
    e-References

    External Resources

    ©


    ©


    ©

    320
    Video Links

    Topic Link

    321
    Notes:

    322

    You might also like