"Hello, World!": Your first Javascript, well, script.
It is either illegal or immoral (or both) to start off a programming tutorial of any kind without using the ubiquitous "Hello, World!" example. Since I would truly hate to be accused of being either immoral or a criminal (yeah, right), we'll start as tradition requires.
First, when adding Javascript to an HTML document, you need to use the <script> tags, and you need to tell the web browser that you will be writing Javascript (as opposed to VBScript, for example):
<script type="text/javascript">
Next, since not all browsers grok Javascript, and since you don't want to have a lot of messy Javascript cluttering up your beautiful web page if someone visits your page using such a browser, you will need to wrap your code in HTML comment tags like this:
<!-- insert Javascript here //-->
If you are very familiar with HTML, you will notice that there are two slashes ("//") before the "end-of-HTML-comment" tag. Two slashes like that are markers for Javascript comments. Anything else on that line will be considered comments to Javascript, and will be ignored. They are necessary because Javascript might choke on the HTML, so to make sure both the HTML and Javascript are happy with the code, you'll need to wrap the Javascript code inside HTML comment tags and precede the HTML end-of-comment tag with a Javascript comment marker, as well. It's a kluge, but it makes everything work nicely, regardless of whether or not the browser can actually interpret the Javascript.
Finally, to actually display some text in Javascript, you will use the "document.write" method. If you aren't familiar with Object-Oriented programming, don't worry. We'll discuss methods in a later lesson. For now, all that is important is to understand that you use the keyword "document.write" to write output.
Here is how the complete script should look:
<script type="text/javascript">
<!--
document.write("Hello, World!")
//-->
</script>
So, where in an HTML document do you place the script? There are actually three ways to embed Javascript in an HTML document. First, you can place the script in the header, usually after the closing "title" tag but before the closing "head" tag, like so:
<html>
<head>
<title>
Sample Javascript
</title>
<script type="javascript">
<!--
document.write("Hello, World!")
//-->
</script>
</head>
<body>
</body>
<html>
Alternatively, you can include the script between the "body"tags, like this:
<html>
<head>
<title>
Sample Javascript
</title>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello, World!")
//-->
</script>
</body>
<html>
Finally, if you only want to execute a couple of statements, like the document.write above, in response to some user action (called an "event"), you can include the Javascript code in-line in your HTML like this:
<input type="button" value="Don't Click Me!" onClick="alert('I said not to click me!')">
One last point to make before wrapping up lesson 1: you can also reference Javascript code in an external file (that is, Javascript code that exists outside of your HTML document). Suppose you have the file "external.js" on your webserver:
function clickMe()
{
alert('You clicked me!');
}
(source code for external.js)
...and that you have the following HTML document on your web server:
<html>
<head>
<script src="./external.js">
</script>
</head>
<body>
<input type="submit" onClick="clickMe()">
</body>
</html>
Your HTML document will use the function "clickMe()" that is defined in your external Javascript library, "external.js". Don't worry if you don't understand everything in the above example -- we'll discuss functions in Lesson 5. For now, I just want you to understand that you can use Javascript code in files that exist outside of your HTML document.
This is very useful technique that allows you to build "libraries" of functions that you can re-use in multiple HTML files. For example, when we discuss AJAX in Lesson 25, you will find that there are a number of functions that you will use in every AJAX applet you create. Rather than reinventing the wheel every time you create an AJAX script, you can instead create an library of Javascript code that you reference in all of your AJAX applications.
This is how the "Hello, World!" script above looks on a web page.
