Difference between revisions of "A Simple JavaScript Example"
| Line 37: | Line 37: | ||
document.writeln( "Hello World" ); | document.writeln( "Hello World" ); | ||
</script> | </script> | ||
| + | |||
| + | <form> | ||
<p> | <p> | ||
| − | <input type=button | + | <input type=button value="Press me" onClick="alert('Goodbye cruel world')"> |
| − | + | ||
| − | + | ||
</p> | </p> | ||
| + | </form> | ||
</body> | </body> | ||
</html> | </html> | ||
</pre> | </pre> | ||
Revision as of 16:00, 9 April 2007
No programming book would be complete without an initial example application just to get the reader started, and this book is no exception. In addition to a quick confidence boost for the novice this serves as a good opportunity to check that the environment being used for the rest of this book is fully functional.
Ever since the first book on programming for the C language was published it has become traditional that the first example consists of writing code to display the words "Hello World". With this tradition in mind we will begin with such as example.
Using your favorite editor create an HTML file with the following content:
<html> <head> <title>My First JavaScript Example </head> <body> <script type="text/javascript" language="JavaScript"> document.writeln( "Hello World" ); </script> </body>
Load the HTML file into JavaScript enabled browser and a web page will be displayed shwoing the text "Hello World". All that this script does is define the standard HTML tags that you would expect to see in an HTML page and also defined embedded JavaScript code that writes text out to the current document (document is the JavaScript object for a web page).
Previously we discussed the event driven nature of JavaScript. In the next example we will extend the "Hello World" example to include event handling, in this case designing our script to display an alert dialog when a button is pressed.
Edit the previous HTNL file and modify the script code so that is resembles the following:
<html>
<head>
<title>My First JavaScript Example
</head>
<body>
<script type="text/javascript" language="JavaScript">
document.writeln( "Hello World" );
</script>
<form>
<p>
<input type=button value="Press me" onClick="alert('Goodbye cruel world')">
</p>
</form>
</body>
</html>
