Download presentation
Presentation is loading. Please wait.
1
JavaScript Event Handling
2
Java script Event Handling
3
What is an Event JavaScript's interaction with HTML is handled through events When the page loads, it is called an event. When the user clicks a button, that click too is an event. Other examples include events like pressing any key, closing a window, resizing a window, etc. HTML events are "things" that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript can "react" on these events.
4
JavaScript lets you execute code when events are detected.
HTML allows event handler attributes, with JavaScript code, to be added to HTML elements. Syntax <some-HTML-element some-event='some JavaScript'> Example <button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
5
onsubmit Event type onsubmit is an event that occurs when you try to submit a form. You can put your form validation against this event type. <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>
6
DHTML with JavaScript
7
DHTML (Dynamic HyperText Markup Language)
It is a new way of looking at and controlling the standard HTML codes and commands collection of technologies that are used to create interactive and animated web sites allows the pages to change at any time, without returning to the Web server first DHTML is NOT a language. DHTML is a TERM describing the art of making dynamic and interactive web pages. DHTML combines HTML, JavaScript, DOM, and CSS. HTML 4 The W3C HTML 4 standard has rich support for dynamic content: HTML supports JavaScript HTML supports the Document Object Model (DOM) HTML supports HTML Events HTML supports Cascading Style Sheets (CSS) DHTML is about using these features to create dynamic and interactive web pages.
8
write the dynamic html on the html document
<body> <h1 id="header">Old Header</h1> <script type="text/javascript"> document.getElementById("header").innerHTML="New Header"; </script> </body> </html> <html> <body> <img id="image" src="Desert.jpg"> <script type="text/javascript"> document.getElementById("image").src="Koala.jpg"; </script> </body> </html>
9
JavaScript, DOM, and CSS With HTML 4, JavaScript and the HTML DOM can be used to change the style any HTML element. To change the style the current HTML element, use the statement: style.property=new style or more correctly: this.style.property=new style <html> <body> <h1 id="header" onclick="this.style.color='red'">Click Me!</h1> <p>If you click the header above, it turns red.</p> </body> </html>
10
To change the style of a specific HTML element, use the statement: document.getElementById(element_id).style.property=new style <html> <body> <h1 onclick="document.getElementById('p1').style.color='red'">Click Me!</h1> <p id="p1">If you click the header above, I turn red.</p> </body> </html>
Similar presentations
