Javascript – Hello World!

Javascript is a web-based language that you can use with your students.

At its most basic, you can add some interactive elements to your webpage. When you get into advanced Javascript you can work under the AJAX framework (asynchronous JavaScript and XML)

Javascript offers programmers (and our students) access to the Document Object Model. This allows different elements to be changed.

This quick tutorial will show you how to create a simple “Hello World!” message in Javascript.

The nice thing about javascript is that all you NEED to run it is notepad (or other program that can save HTML file) and a web browser.

These are readily available on most (if not all) computers.

Open up notepad. Within here you will want to start an HTML file.javascript 1

A standard template for an HTML file is shown below. We need to include the <html> and </html> tags. These are referred to as open and close tags. The <html> opens the html tag and the </html> closes the tag. Typically </tagName> is a closing tag.


javascript 2
The <head> and </head> tag contain the title tag. In more advanced programming they may include links to CSS files, external Javascript files and Javascript code itself. For now we only have a <title> </title> tag. This tag will allow us to change the text in the blur bar at the top of the screen. The <body> </body> tags will contain any text, images, etc. that we want to show up on the screen. We have nothing in there at this point so nothing will show up.

javascript 3Adding the <title> and </title> tags will make the title bar look like this:

javascript 8

We’ve added the code onload=”alert(‘Hello World!’);” to the body tag. This means that when your internet browser loads the <body> tag there will be a Javascript function (alert) that displays a message that says “Hello World!” to the user.

javascript 4

Now you will want to save your code. Go to File–> Save As. When you click save as you need to change the file type and give it a file name with the extension .htm . Make sure to include quotation marks around the entire filename/extension as shown below:

javascript 5

When you save the file it will now appear as webpage on your desktop (or wherever you saved it). To view the file you can double click on it. To edit it you would need to right-click and select open with notepad.

javascript 5a

Depending on your security settings you may need to allow blocked content for the “alert” message to appear.javascript 6
When you have allowed block content you will see the message as a pop up box:

javascript 7
This is a very basic javascript program. It is not a very sophisticated example and there are better ways to display messages to the user. This is an initial trial in JavaScript.

Please stay tuned for more beginner, intermediate and advanced tutorials in the future.

If you’ve got any questions, comments or suggestions as to how to make this tutorial better, please email me or comment down below.

Have a great day!


Leave a Reply

Your email address will not be published. Required fields are marked *