1. Computing

Learn JavaScript

Hello World

Join the Discussion

Questions? Comments?

Related Terms

JavaScript HTML Browser

Introduction

Just about all programming courses start off with a simple program called "Hello World". This program is designed to output the text "Hello World" from the program and is designed to introduce you to the programming language and show you how to write, compile, and execute programs using that language. JavaScript is a scripting language so it doesn't need to be compiled - instead it is executed directly by the web browser - but we still need to know how to write the code and attach it to our web page.

Your First Script

The first thing that we need to do is to add some HTML into the body section of our web page.

<script type="text/javascript">
</script>

These two lines form a container into which we can place our JavaScript code. The parameters on the script tag identify the content surrounded by these tags as JavaScript code to be executed rather than text to be displayed.

There will also be times when you will want to add JavaScript to the head section of your page (which is the best place to put it all) and some JavaScript can even be added into parameters in the HTML tags themselves but for the first few tutorials we will stick with placing our JavaScript between these tags in the body section of the page.

Where about's in the body section should you place the tags? Well the JavaScript is going into the body section of your page because we intend to use the JavaScript to display something on the page. The script tags (and the JavaScript that we are about to add to it) should therefore be positioned within your page content at the place where we want the output from the script to appear.

The usual purpose of a "Hello World" script is to output the text "Hello World" so let's add the JavaScript statement to do this between the HTML script tags. The complete code added to the page will now look like this:

<script type="text/javascript">
document.write('<b>Hello World</b>');
</script>

So let's examine our first line of JavaScript and see what we have learned so far about writing JavaScript code.

The first thing that we have learned is that we can get JavaScript to output something to our web page by using document.write. The "document" part of this command identifies the current web page as what we are updating and the "write" is how we are updating it - ie. by writing something to the page. You will find the what portion of these commands is usually referred to as an object and the how portion is usually referred to as the method. The actual value that is to be written out is contained between the parentheses that follow.

In this instance we want to write out the text "Hello World". In the example I have surrounded the text with apostrophes (') rather than quotes ("). Surrounding your JavaScript text with apostrophes rather than quotes will make it easier to including quotes in the text to be written out.

The example text is also surrounded by HTML bold tags. This will result in the text being displayed on the page in bold. You can easily include HTML code into your JavaScript document.write statements and since the JavaScript writes its output into the page before the page is processed by the browser, any HTML that is included will be processed exactly the same as if it were statically coded into the page.

Finally you will notice that the line ends with a semi-colon (;). The semi-colon is what determines where individual JavaScript statements end in the same way that a greater than (>) determines where an HTML tag ends.

The document.write statement is the easiest way to output something into our web page. It certainly isn't the best way (it's the worst way) but it is the easiest way and so we will use it through the earlier tutorials while looking at the core part of the JavaScript language.

If you look at other people's JavaScript you may find a language="javascript" (possibly with a number on the end). That part of the script tag is now obsolete and should be removed (you may still find it on some of the pages of this site that were written some time ago and which I haven't yet had time to go back and correct, if you do then just make sure you use type='text/javascript' instead).

Using What You Know

At this stage you are probably wondering what you can possibly do using just the JavaScript that you have learned in this first tutorial. Well not everyone uses a web browser that supports JavaScript and some whose browsers do support JavaScript have it disabled. We can make use of what we already know to hide parts of our page from those whose browsers don't support JavaScript.

Suppose that we have obtained some complex JavaScript from one of the many JavaScript libraries available on the internet and have followed the instructions to install it on one of our web pages. We might now have a web page that only functions correctly when JavaScript is enabled. It would be preferable if we could hide the existance of that page from visitors whose browsers don't have JavaScript enabled.

We can use what we have learned in this tutorial to edit the page(s) that link to the page that we want to hide so that the link only appears when JavaScript is enabled. To do this we locate the HTML code in the page that forms the link to the page to be hidden and replace the static link code with our JavaScript code above. For example, suppose the static link code reads as follows:

<a href="script.htm">Page Requiring JavaScript</a>

We would replace this code exactly where it appears with:

<script type="text/javascript">
document.write('<a href="script.htm">Page Requiring JavaScript</a>');
</script>

For visitors who have JavaScript enabled the page will look exactly the same as before but for those visitors without JavaScript the link to script.htm no longer appears.

©2014 About.com. All rights reserved.