Scribd Logo
Upload

Welcome to Scribd!

  • Web Technology: School of Computer Science and Applications Varish P V

    Uploaded by

    Shamanth RD
    14 views33 pages
    The document discusses event handling and dynamic documents with JavaScript. It covers: 1. Event handling from body elements, buttons, text boxes, and password elements. 2. The DOM 2 event model. 3. Dynamic documents with JavaScript including positioning elements, moving elements, changing visibility, colors, fonts, and dynamic content. 4. Stacking elements, locating the mouse cursor, and reacting to mouse clicks and slow element movement.

    Original Description:

    Original Title

    WT_B18CA5030_Unit-4

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses event handling and dynamic documents with JavaScript. It covers: 1. Event handling from body elements, buttons, text boxes, and password elements. 2. The DOM 2 event model. 3. Dynamic documents with JavaScript including positioning elements, moving elements, changing visibility, colors, fonts, and dynamic content. 4. Stacking elements, locating the mouse cursor, and reacting to mouse clicks and slow element movement.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    14 views33 pages

    Web Technology: School of Computer Science and Applications Varish P V

    Uploaded by

    Shamanth RD
    The document discusses event handling and dynamic documents with JavaScript. It covers: 1. Event handling from body elements, buttons, text boxes, and password elements. 2. The DOM 2 event model. 3. Dynamic documents with JavaScript including positioning elements, moving elements, changing visibility, colors, fonts, and dynamic content. 4. Stacking elements, locating the mouse cursor, and reacting to mouse clicks and slow element movement.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 33

    Established as per the Section 2(f) of the UGC Act, 1956

    Approved by AICTE, COA and BCI, New Delhi

    WEB TECHNOLOGY

    School of Computer Science and Applications

    Varish P V
    Unit-4
    UNIT 4

    Event Handling & Dynamic Documents with Java Script


    Event Handling:
    Handling Events from Body Elements, Handling Events from Button
    Elements, Handling Events from Text Box and Password Elements, The DOM
    2 Event Model.
    Dynamic Documents with JavaScript:
    Introduction, Positioning Elements, Moving Elements, Element Visibility,
    Changing Colors and Fonts, Dynamic Content, Stacking Elements, Locating
    the Mouse Cursor, Reacting to a Mouse Click, Slow Movement of Elements.
    LECTURE 1: TOPICS DISCUSSED IN PREVIOUS
    UNIT
    Screen Output, Keyboard Input & Control
    Statements

    Pattern Matching Using Regular Expressions

    The JavaScript Execution Environment, The


    Document Object Model

    Element Access in JavaScript, Events and Event


    Handling
    TOPICS TO BE LEARNED FROM THIS CLASS

    Events and Event Handling

    Handling Events from Body Elements

    Handling Events from Button Elements


    EVENTS IN JAVA SCRIPT
    EVENTS IN JAVA SCRIPT

     The action performed by the user on the page is called is an event

     An HTML event can be something the browser does, or something a


    user does.
     Here are some examples of HTML events:
    – When a user clicks the mouse
    – When a web page has loaded
    – When an image has been loaded
    – When the mouse moves over an element
    – When an input field is changed
    – When an HTML form is submitted
    – When a user strokes a key
    EVENTS IN JAVA SCRIPT

    Load focus click keypress submit

    UnLoad blur dblclick keydown change

    Resize focusin mouseover keyup

    Scroll focusout mouseout


    mouseup
    mousedown
    HANDLING EVENTS FROM BODY

    Load Unload
    LOAD EVENT
    <!DOCTYPE html>
    <html>
    <body onload="msg()">
    <h1>Welcome to my Home Page</h1>
    <p>Close this window or press F5 to reload the page.</p>
    <p><strong>Note:</strong> Due to different browser settings, this event may not always
    work as expected.</p>
    <script>
    function msg() {
    alert(“Welcome to my home page");
    }
    </script>
    </body>
    </html>

    Execute
    HANDLING EVENTS FROM BUTTON ELEMENTS
    CLICK EVENT
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function msg() {
    alert("Hello World");
    }
    </script>
    </head>
    <body>
    <p>Click the button to trigger a function.</p>
    <button onclick=“msg()"><img src="image/click.jpg" width="100" height="100" /></button>
    </body>
    </html>

    Execute
    CLICK EVENT
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function color() {
    document. body. style. background = "yellow";
    }
    </script>
    </head>
    <body>
    <p>Click the button to change the page color</p>
    <button onclick="color()">Change Color</button>
    </body>
    </html>

    Execute
    ONSUBMIT EVENT
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function msg() {
    alert("hello");
    }
    </script>
    </head>
    <body>
    <p>Click submit to trigger a function.</p>
    <form onsubmit="msg()">
    <input type="submit">
    </form>

    </body>
    </html>

    Execute
    SUMMARY

    Events and Event Handling

    Handling Events from Body Elements

    Handling Events from Button Elements


    QUIZ FOR THIS CLASS

    1. Select the body event?


    A) mousup B) load
    B
    C) change D) keypress

    2. Select the button event?


    A) click B) change
    A
    C) keypress D) None
    LECTURE 2: TOPICS DISCUSSED IN PREVIOUS CLASS

    Events and Event Handling

    Handling Events from Body Elements

    Handling Events from Button Elements


    TOPICS TO BE LEARNED FROM THIS CLASS

    Handling Events from Text Box


    TEXT BOX EVENTS

    blur

    focus
    CHANGE EVENT
    <!DOCTYPE html>
    <html>
    <body>

    <p>Modify the text in the input field, then click outside the field to fire the onchange event.</p>

    Enter some text: <input type="text" name="txt" value="Hello" onchange="chfun(this.value)">

    <script>
    function chfun(val) {
    alert("The input value has changed. The new value is: " + val);
    }
    </script>

    </body>
    </html>
    Execute
    CHANGE EVENT
    <!DOCTYPE html>
    <html>
    <body>
    Enter age: <input type="text" onchange="check(this.value)">

    <script>
    function check(age) {
    if(age<18){
    alert("Not eligible for voting");
    }
    else{
    alert("Eligible for voting");
    }
    }
    </script>

    </body>
    </html>
    Execute
    CHANGE EVENT
    <html>
    <body>
    Enter Marks: <input type="text" onchange="check(this.value)">

    <script>
    function check(m) {
    if(m<0){
    alert("marks cannot be -ve");
    }
    else if(m>100){
    alert("marks cannot be > 100");
    }
    else{
    alert("done");
    }
    }
    </script>
    </body>
    </html>
    Execute
    CHANGE EVENT
    <html>
    <body>
    Enter Mobile No: <input type="text" onchange="check(this.value)">
    <script>
    function check(m) {

    if(m.length == 10 ){
    alert("correct");
    }
    else{
    alert("incorrect number");
    }

    }
    </script>
    </body>
    </html>

    Execute
    CHANGE EVENT
    <!DOCTYPE html>
    <html>
    <body>
    <form name="rate">
    Enter product cost: <input type="text" name="pcost"> <br>
    Enter gst rate: <input type="text" name="gst" onchange="calculate()"> <br>
    Total Amount: <input type="text" name="tamt" >
    </form>
    <script>
    function calculate() {
    var c=parseFloat(document.rate.pcost.value);
    var g=parseFloat(document.rate.gst.value);
    document.rate.tamt.value=c+(g/100)*c;
    }
    </script>
    </body>
    </html>

    Execute
    DISCUSSION
    KEY PRESS EVENT
    <!DOCTYPE html>
    <html>
    <body>

    <p>A function is triggered when the user is pressing a key in the input field.</p>

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

    <script>
    function myFunction() {

    alert("You pressed a key inside the input field");


    }

    </script>

    </body>
    </html>

    Execute
    KEY UP & KEY DOWN
    <!DOCTYPE html>
    <html>
    <body>
    <p>Press and hold down a key inside the text field to set a red background color. Release the key
    to set a green background color.</p>
    <input type="text" id="demo" onkeydown="keydownFunction()" onkeyup="keyupFunction()">

    <script>
    function keydownFunction() {
    document.getElementById("demo").style.backgroundColor = "red";
    }

    function keyupFunction() {
    document.getElementById("demo").style.backgroundColor = "green";
    }
    </script>
    </body>
    </html>

    Execute
    KEY UP & KEY DOWN
    <!DOCTYPE html>
    <html>
    <body>
    Enter your name: <input type="text" id="fname" onkeyup="alp(this)" onkeydown="alp(this)">
    <script>
    function alp(ele){
    var val = ele.value;
    var len = val.length;
    if(val.search(/[^a-zA-Z ]/) != -1){ // if(val.search(/\D/) != -1) --> for number check
    alert("Enter Only Alphabets");
    ele.value = ele.value.substring(0,len-1);
    ele.select();
    }
    }

    </script>
    </body>
    </html>

    Execute
    BLUR
    <!DOCTYPE html>
    <html>
    <body>

    Enter your name: <input type="text" id="fname" onblur="myFunction()">

    <p>When you leave the input field, a function is triggered which transforms the input text to upper
    case.</p>

    <script>
    function myFunction() {
    var x = document.getElementById("fname");
    x.value = x.value.toUpperCase();
    }
    </script>

    </body>
    </html>
    FOCUS
    <!DOCTYPE html>
    <html>
    <body>

    Enter your name: <input type="text" onfocus="myFunction(this)">

    <p>When the input field gets focus, a function is triggered which changes the background-
    color.</p>

    <script>
    function myFunction(x) {
    x.style.background = "yellow";
    }
    </script>

    </body>
    </html>
    HANDLING EVENTS FROM PASSWORD ELEMENT
    <html>
    <body>
    <form>
    Password: <input type="password" id="myPsw">
    </form>
    <p>Write something in the password field, and then click the buttons to display and/or change the
    value.</p>
    <button onclick="display()">Display value</button>
    <button onclick="change()">Change value</button>
    <script>
    function display() {
    var x = document.getElementById("myPsw").value;
    alert("The value of the password field is: " + x);
    }
    function change() {
    var x = document.getElementById("myPsw").value = "NewPassword123";
    alert ("The value was changed to: " + x);
    }
    </script>
    </body>
    </html>
    DYNAMIC DOCUMENTS WITH JAVASCRIPT

    • A dynamic HTML document is one whose tag attributes, tag contents, or


    element style properties can be changed after the document has been and is
    still being displayed by a browser

    • Consider only W3C standard approaches

    • Examples will use DOM 0 event model.


    Work for both IE6 and NS6

    • Dynamic changes in a document achieved through JavaScript.

    • Scripts address the elements of the document using their DOM addresses

    • Complete Concepts - http://www.ens.utulsa.edu/~diaz/cs2043/Chp6/


    REFERENCES

    1. M.Deitel, P.J.Deitel, A.B.Goldberg, “INTERNET & WORLD WIDE WEB HOW TO


    PROGRAM”, 3rd Edition, Pearson Education / PHI, 2004.

    2. Chris Bates, “WEB PROGRAMMING BUILDING INTERNET APPLICATIONS”,3rd


    Edition, Wiley India, 2006. 3. XueBai et al, “The Web Warrior Guide to Web
    Programming”, Thomson, 2003.

    3. Sklar, “THE WEB WARRIOR GUIDE TO WEB DESIGN TECHNOLOGIES”, 1st


    Edition, Cengage Learning India.

    4. Web References :
    www.w3schools.com
    www.quora.com
    www.coursera.org
    Thank You

    You might also like