Open your favorite text editor and load up seville.html .We’re going to add the following code to the page, immediately after the </p> (the closing paragraph tag) on line 24:
The whole of the source code with the extra lines added is shown in Listing. Make sure that you have added the code correctly; then save the file as testpage3.html and load it into your favorite browser.
HTML documnet including one line written by Javascirpt
Also in this tag appears the attribute
Now for the meat in the sandwich:
The string within the parentheses we refer to as the argument that we pass to the writeln method. In this case it tells the method what to write to the document object.
We can include as many <script>…</script> tags in our page as we need. However, we must pay some attention to where in the document they are placed.
Here we capture the action of the user clicking the button, using the onClick event handler.When the user’s click is detected, the script carries out the instructions listed in the onClick attribute of the input tag:
Let’s add this code to our HTML document, as shown in Listing. Save the page as testpage4.html after you’ve made the changes and load it into the browser.
Calling alert() from the onClick Event Handler
Our HTML page should now show our new button, as in Figure
The new Click Here button in our web page
Go ahead and click on the button.If everything goes according to plan, an alert dialog pops open as shown in Figure. You can click OK to clear the dialog.
Here’s the code for our function, which we’ll place in the head sectionof our HTML document:
Within the usual <script> tags, we have now defined a function called showAlert, which carries out the commands contained within the curly braces. In this case, there is only one command, a call to the previously encountered alert method.
The dialog that appears after you click on the new botton
We want this alert dialog to appear when the user’s mouse passes over the photograph in our web page.We are therefore going to add an attribute to the <img> tag that contains the image, as follows:
This line uses the onMouseOver event handler to detect when the cursor enters the area occupied by the photograph.When this happens, our new function showAlert is called.
Using the onMouseOver Event Handler
With this HTML document loaded into your browser, roll your mouse over the photograph. An alert box should appear with the message “A Picture of Seville”.
Passing Arguments to Functions
Of course, we could easily call our function from a wide variety of event handlers within ourcontain the message “A Picture of Seville”,which is not very useful!
Wouldn’t it be good if we could tell the function what message to display so that we could have different alert messages for different circumstances? We can achieve this by passing the message to our function as an argument:
The function now “expects” to find the text for the message defined passed as an argument within the call. Rewrite the onMouseOver event handler for the image to provide this:
We’ll also rewrite the button’s onClick event handler to use this function but with a different message:
Other Event Handlers
So far you have seen examples of the onClick and onMouseOver event handlers. Many others are available for use; Table lists a selection of the most popular event handlers.
AJAX Related Interview Questions
|XML Interview Questions||HTML Interview Questions|
|Java Script Interview Questions||Android Interview Questions|
|CSS Interview Questions||Web Developer Guide Interview Questions|
|XSLT Interview Questions||Java XML Interview Questions|
|XML DOM Interview Questions|
All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.