DHTML - Events & Buttons
DeepPatel30
7,481 views
18 slides
May 13, 2016
Slide 1 of 18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
About This Presentation
DHTML : Events & Buttons
Slide Content
Web technology Active Learning Assessment Submitted By: Deep Patel 130410107064 TY CE II B Batch
DHTML: Events & Buttons Active Learning Assessment
What is DHTML? DHTML is NOT a language. DHTML is a TERM describing the art of making dynamic and interactive web pages. DHTML combines HTML, JavaScript, the HTML DOM, and CSS. According to the World Wide Web Consortium (W3C): "Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated."
Events & Buttons Events are the actions that the user performs when they visit your page. They may, for example move the mouse around or click on buttons. When an event happens it triggers objects that are associated with that kind of event. Event Handlers catch these events and execute code in response.
Events can be classified into 4 categories for ease of understanding: Window Events Mouse Events Keyboard Events Form Events
Window Events The Window itself has its own events, which trigger when a new page is starting up ( onLoad ), shutting down ( onUnload ),being resized ( onResize ), moved ( onMove ), canceled ( onAbort ) or when an error occurs ( onError ). There is also an event triggered when the window moves to foreground ( onFocus ) or changes to background ( onBlur ).
Mouse Events The mouse has a few events associated with it when a button is pressed ( onMousedown ) on top of an element and when it is released ( onMouseup ); When the mouse moves and the pointer is already over an element ( onMousemove ) and when it moves away from the element ( onMouseout ). Events are triggered also when the pointer is over an element ( onMouseover ) and when it is clicked once ( onClick ) or twice ( onDblclick ).
Keyboard Events Events can be triggered when the key is pressed down ( onKeydown ) and when it is released ( onKeyup ). The complete key sequence, down press and up release, triggers another event ( onKeypress ).
Form Events Events can be triggered when the reset button on the form is clicked ( onReset ) or when the submit button is clicked ( onSubmit ). Even when a content is selected on a page ( onSelect ) event is generated.
Events Event When does it happen? onabort Visitor aborts page loading onblur Visitor leaves an object onchange Visitor changes the value of an object onclick Visitor clicks on an object ondblclick Visitor double clicks on an object onfocus Visitor makes an object active onkeydown Key is being pressed down onkeypress Key is pressed onkeyup Key is being released
onload Page has finished loading onmousedown User presses a mouse button onmousemove Cursor moves on an object onmouseout Cursor moves off an object onmouseover Cursor moves over an object onmouseup Visitor releases a mouse button onreset Visitor resets a form onselect Visitor selects a content on a page onsubmit Visitor submits a form onunload Visitor closes a page
Using Events Each of the events can be used to trigger scripts to run. Below mentioned script shows how it is possible to trap the exiting of the user from a page. <html> <head> <meta http- equiv =“Content-Type” content=“text/html; charset=iso-8859-1”> </script> </head> <body onUnload =“alert(‘Bye, see you again!’)”> <h1>Hello!</h1> </body> </html>
Using a Mouse click & Button for events This script uses the button to trigger a function that will output "Hello World" in a p element with id=“demo’. <html> <body> <button onclick =" myFunction ()">Click me</button> <p id="demo"></p> <script> function myFunction () { document.getElementById ("demo"). innerHTML = "Hello World"; } </script> </body> </html>
Using Mouse over and Mouse out The event of mouse passing into and out of an element is captured. <html> <body bgcolor =“green”> <h1 onmouseover =“ style.color =‘yellow’" onmouseout =" style.color =‘ black’”>Hover here!</h1> </body> </html>
More Mouse Events <html> <body> <p id="p1" onmousedown =" mouseDown ()" onmouseup =" mouseUp ()">Click the text! </p> <script> function mouseDown () { document.getElementById ("p1"). style.color = "red"; } function mouseUp () { document.getElementById ("p1"). style.color = "green"; } </script> </body> </html>
Using Keyboard events A function is triggered when the user is pressing a key in the input field. <html> <body> <input type="text" onkeypress =" myFunction ()"> <script> function myFunction () { alert("You pressed a key inside the input field"); } </script> </body> </html>
Using Form Events When you submit the form, a function is triggered which alerts some text. <html> <body> <form onsubmit =" myFunction ()"> Enter name: <input type="text" name=" fname "> <input type="submit" value="Submit"> </form> <script> function myFunction () { alert("The form was submitted"); } </script> </body> </html>
Thank You! Bibliography http://www.w3schools.com/tags/ref_eventattributes.asp Developing Web Applications – Ralph Moseley
Tags
Categories
DesignDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 7,481
- Slides 18
- Favorites 5
- Age 3489 days
Related Slideshows
1
MGV Residential Design projects for different clients, including a New Mexico Adobe project-1-.pdf
mannyvesa
26 views
16
EUNITED_Advocacy and Public Engagement through Visual Media
GeorgeDiamandis11
30 views
31
DESIGN THINKINGGG PPT 2 TOPIC IDEATION.pptx
HibaZaidi2
24 views
36
DESIGN THINKING CHAPTER 1 PPTT PPT 1.pptx
HibaZaidi2
27 views
112
Hinduism and Its History - PowerPoint Slides.pptx
ConorMcCormack10
23 views
20
Service Attributes of Manufactured Parts.pptx
MustafaEnesKrmac
24 views