Web Design with HTML and CSS

218

Interactivity on the web

Web Design with HTML and CSS Digital Classroom

11 Save your page, and then preview it in your browser. Leave the default name value in

for now and click OK. A new page is built based on the code you added in the previous

step. Click the Back button in your web browser, click the Submit button again, and then

type your name. Click OK; a new page with the new value is created.

The value from the text fi eld is written on the page.

This is a relatively simple JavaScript function, but it should give you a basic

understanding of how JavaScript communicates with the HTML elements on a page, as

well as the basic logic of a JavaScript function. In the next exercise, you’ll learna about

JavaScript events.

JavaScript events

The JavaScript event you worked with in the previous exercise was an onclick event that

triggered the code when you clicked the Submit button. There are other events available you

can use, and to better understand how these events work, you will modify the example.

1 In your HTML code, change your onclick event to the onmouseover event

(highlighted in red):

<input type="button" onmouseover="show_prompt()" value="Submit" />

2 Save your fi le and preview it in your browser. Now place your cursor over the button

without clicking; the prompt window appears. The onmouseover event triggers the

JavaScript as soon as the cursor enters the area of the button.