• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 1. Introduction to JavaScript > JavaScript and Events

1.4. JavaScript and Events

HTML is static. It can be used to create buttons and boxes and fillout forms, but it cannot by itself react to user input. Normally, the browser bundles up the form information and sends it off to a server to be handled. But JavaScript is not static; it is dynamic. It can interact asynchronously with users on the client side. For example, when a user fills out a form; presses a button, link, or image; or moves his mouse over a link, JavaScript can respond to the event and interact dynamically with the user. For example, JavaScript can examine user input and validate it before sending it off to a server, or cause a new image to appear if a mouse moves over a link or presses a button. Events are discussed in detail in Chapter 12, “Handling Events,” but you should be made aware of them right at the beginning because they are inherently part of what JavaScript does, and there will be examples throughout this text that make use of them.

The events are tied to HTML. In the following example, an HTML form is created with the <form> tag and its attributes. Along with the type and value attributes, the JavaScript onClick event handler is just another attribute of the HTML <form> tag. The type of input box is called a "button" and the value assigned to the button is "Pinch me". When the user clicks on the button in the browser window, a JavaScript event, called Click, will be triggered. The onClick event handler is assigned a value which is the command that will be executed after the button has been clicked. In our example, it will result in an alert being sent to the user, displaying “OUCH!!”. See the output of Example 1.1 in Figures 1.2 and 1.3.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint