At The Forge

Listing 3. test-3.html, All JavaScript Removed and Placed in atf-events.js

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<title>Unobtrusive JavaScript</title>

<h1>Unobtrusive JavaScript</h1> <script text="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/ *1.6.0.2/prototype.js"></script>

<script text="text/javascript" src="atf-events.js"></script>

<p>A <a href="http://www.nytimes.com" id="hyperlink">hyperlink</a> to The New York Times.</p>

<form method="POST" action="/action" id="the_form">

<input type="text" name="text_field" id="text_field" /> <input type="submit" value="Submit the form" id="submit_button" /> </form>

Listing 4. atf-events.js, Broken JavaScript Code for test-3.html function show_x_and_y(event) { alert(event.pageX + ", " + event.pageY); return false;

$('hyperlink').onmouseover = function() { $('the_form').hide(); } $('hyperlink').onmouseout = function() { $('the_form').show(); }

$('hyperlink').onmouseover = function() { $('the_form').hide(); } $('hyperlink').onmouseout = function() { $('the_form').show(); }

Listing 5. atf-events-2.js, JavaScript Code for test-3.html

Was this article helpful?

0 0

Post a comment