View source for A Simple JavaScript Example

<table border="0" cellspacing="0">
<tr>
<td width="20%">[[The History of JavaScript|Previous]]<td align="center">[[JavaScript Essentials|Table of Contents]]<td width="20%" align="right">[[Embedding JavaScript into Web pages|Next]]</td>
<tr>
<td width="20%">The History of JavaScript<td align="center"><td width="20%" align="right">Embedding JavaScript into Web pages</td>
</table>
<hr>


<htmlet>jscript</htmlet>


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.

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.

== A First JavaScript Example ==

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:

<pre>
<html>
<head>
   <title>My First JavaScript Example</title>
</head>

<body>

<script type="text/javascript" language="JavaScript">
   document.writeln( "Hello World" );
</script>

</body>
</html>
</pre>

Load the HTML file into a JavaScript enabled browser and a web page will be displayed showing 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 define 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 HTML file and modify the script code so that is resembles the following:

<pre>
<html>
<head>
   <title>My First JavaScript Example</title>
</head>

<body>

<script type="text/javascript" language="JavaScript">
   document.writeln( "Hello World" );
</script>

<form>
   <input type=button value="Press me" onClick="alert('Goodbye cruel world')">
</form>

</body>
</html>
</pre>

When loaded into a web browser the page will appear as before, but this time a push button is visible in the page which, when pressed, will display an alert dialog containing the words "Goodbye cruel world". In order to make this happen we have used the HTML ''<form>'' and ''<input>'' tags to make the button visible and combined this with the onClick event handler. We've specified that when the onClick event of the button is triggered (i.e. when the user clicks on it) then the JavaScript to display the alert dialog should be executed.


<htmlet>jscript</htmlet>



<htmlet>ezoicbottom</htmlet>
<hr>
<table border="0" cellspacing="0">
<tr>
<td width="20%">[[The History of JavaScript|Previous]]<td align="center">[[JavaScript Essentials|Table of Contents]]<td width="20%" align="right">[[Embedding JavaScript into Web pages|Next]]</td>
<tr>
<td width="20%">The History of JavaScript<td align="center"><td width="20%" align="right">Embedding JavaScript into Web pages</td>
</table>
<hr>