Lesson 2: Hello World!
Javascript, a scripting language built into nearly all Internet browsers is also a programming language. And, it has become tradition that the first program written in any programming language be the “Hello World!” program. Today, we’ll create two different versions of this program, in Javascript, as we introduce some basic syntax of Javascript.
The Hello World program is a program which simply displays the text “Hello World”.
Getting Started
For Javascript to do something, it first needs an HTML page. This HTML page can be extremely simple, just the core of the HTML code that every HTML page needs, which you can find in the first of the HTML lessons. For simplicity sake, we’ll use inline code in our example today, however, it is best if you create your programs in external Javascript files.
You can use this template for our two examples:
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Hello World!</title> <script type="text/javascript"> </script> </head> <body> </body> </html>
All of the code we’ll do today will go between the style element’s opening and ending tag.
Version 1 – The Pop-up Hello World!
In this version of Hello World! we’ll have our text displaying Hello World! in a small pop-up box when our page first loads. To do this we will use the built-in function “alert()”, which brings up a pop-up with a message. A function is essentially a group of code which can be called repeatedly. To call, or run the code inside, the function, you use the function’s name, followed by parentheses.
You can also specify parameters, which are values you pass to a function which it can do work with. To pass parameters, you place the values in the parentheses, separating each value by a comma.
The alert function takes one parameter, a string, which is the message to display in the pop-up. A string is a group of characters, surrounded by either double or single quotation marks. It is a “string” of characters. We’ll discuss strings and other data types in a future lesson.
The other thing to remember about Javascript is that at the end of every line you have to put a semi-colon (;). The reason you need a semi-colon is because you can actually have separate Javascript commands on a single line, or split up a single command onto multiple lines. So, to tell Javascript when you’ve finished one command, you put a semi-colon.
So, the code for this program is simply a call to alert, with our Hello World! string in the parentheses. Place this code in your script element, save the HTML file, and open the file in your favorite Internet browser:
Code
alert("Hello World!");
If everything was done properly, as soon as you load the page it should pop up a box that says “Hello World!” and has an okay button which will close the box.
Version 2 – The document.write() version
Another method to create a Hello World! program is to use the document.write() function. This function allows you to override the code in the HTML document with new code.
There is a problem with this method though, in that it will clear ALL of the HTML, including the DOCTYPE and head. To counter this, we’ll have to put each line of our HTML in a different document.write() function. This isn’t an efficient method for practical applications, and we’ll discuss better methods in later lessons.
Before you use the document.write() function, you need to call the document.open() function. It doesn’t take any parameters. Calling this function clears the HTML and gets it ready for writing. You can then make as many calls to document.write() as you need. This function takes a string, just like alert(). After you are done writing, call document.close(), which also takes no parameters, to close the HTML and get it to display.
Here is the code for our second version. Place this code within the script element, save the HTML file, then run it in an Internet browser:
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hello World!</title>
<script type="text/javascript">
document.open();
document.write("<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">");
document.write("<html>");
document.write("<head>");
document.write(" <title>Hello World!</title>");
document.write("</head>");
document.write("<body>");
document.write("<p>Hello World!</p>
document.write("</body>");
document.write("</html>");
document.close();
</script>
</head>
<body>
</body>
</html>
As I said before, this isn’t a very efficient method for practical applications, but this is another classic method of displaying the Hello World text, so we’ll use it. In a future lesson you’ll learn more practical methods of inserting new text and code to your HTML documents.
In this lesson we created two versions of Hello World, one within a pop-up and one where we override the content of HTML with our new code. We also learned how to call built-in functions and learned what strings were. We also learned that we should always putt a semi-colon at the end of every command in Javascript.
In our next lesson we’ll cover the various basic Javascript data types, such as string, integers, floating-point numbers, arrays and more.
