<!DOCTYPE html>
<html>
<!--
Example using (hopefully) unobtrusive JavaScript
Inspired by "Web Programming Step by Step", Stepp, Miller, Kirst
adapted by: Sharon Tuttle
last modified: 2-20-13
-->
<head>
<title> Playing with JavaScript - 1 </title>
<meta charset="utf-8" />
<!-- this external JavaScript please.js contains the function
sayMagicWord
-->
<script src="please.js" type="text/javascript">
</script>
<script type="text/javascript">
/* I am trying to set the onload attribute of the window
object so that it is a function that sets the event
handling for the desired elements when this window exists
*/
window.onload =
function()
{
// add an onclick attribute to the button with
// id="magicButton" whose value is the function
// sayMagicWord
var myButton = document.getElementById("magicButton");
myButton.onclick = sayMagicWord;
};
</script>
</head>
<body>
<!-- notice that there is no JavaScript in this page's body, not
even a function call; all of the JavaScript is in or referenced
referenced in the head element
-->
<!-- the noscript tag and its contents are ignored UNLESS
JavaScript is not enabled or is not available
SO the paragraph within should only be seen when
JavaScript is not available
-->
<noscript>
<p>
Note -- you do not have JavaScript available or enabled.
This page will not work correctly without JavaScript.
</p>
<hr />
</noscript>
<p>
<button id="magicButton">
Say the Magic Word </button>
</p>
<p>
Name: <input type="text" name="text1" id="enteredName" />
</p>
<hr />
<p>
<a href="http://validator.w3.org/check/referer">
Validate this HTML5 page
</a>
</p>
<p>
For full credit, this page must also pass the tests at
<a href="http://lint.brihten.com/html/">
http://lint.brihten.com/html/ </a> when its URL is
entered (and without modifying the default options).
</p>
<p>
<a href=
"http://jigsaw.w3.org/css-validator/check/referer?profile=css3">
<img src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS3!" height="31" width="88" />
</a>
</p>
</body>
</html>