Create Your First JavaScript”Hello World” program.
So far, we’ve introduced JavaScript and JScript, discussed their capabilities and differences, and gone over their history. We then discussed JavaScript browser compatibility issues and learned the syntax required to use the <SCRIPT> and </SCRIPT> tags to embed JavaScripts within HTML pages. Now it’s time to create your first JavaScript. It’s going to be a very basic example, so don’t get your hopes up too high. By tomorrow night, you’ll be writing much more sophisticated scripts.
In this example, you will create the classic “Hello World” script that every programming book since the beginning of time has used as its introductory example. After all, who am I to defy such an honored tradition?
Before you get started, I want to say a quick word about HTML and JavaScript editors. There are plenty of them available, and their features and capabilities vary as much as their prices. It really does not matter which editor you ultimately decide to use. In fact, for the code you see in this book, I used the Notepad program that comes with Windows XP Home Edition.
The first thing I did before approaching any of the coding examples in this book was to create an HTML template that I could use over and over again. Every time I worked on a new script, I used Notepad to open my template and type in my JavaScript statements. Then I chose File and selected Save As from the Notepad menu to save my script with a new file name. If you are using a full-featured HTML editor, it may automatically provide you with a starting template whenever you create a new HTML page. If not, you may want to build and use a template like I did. My template is shown here:
<HTML>
<HEAD>
<TITLE>Script 1.1 – Insert Descriptive Title Here</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
As you can see, my template contains the <HEAD> </HEAD>, <TITLE> </TITLE>, and <BODY> </BODY> tag sets all wrapped inside the starting and ending <HTML> </HTML> tag set. If you want to do so, create your own template now. When you are done, add the following lines inside the body section:
<SCRIPT LANGUAGE=”JavaScript” TYPE=”Text/JavaScript”>
document.write(“Hello World”);
</SCRIPT>
These three statements will make up your first JavaScript. You should recognize the first and last lines as script tags that tell your browser to execute the enclosed JavaScript statements. This script has just one statement. This statement tells the browser to write the message “Hello World” on the current document, which is the window in which the HTML page opened.
Once you have added the three lines of JavaScript to your template, it should look like this:
<HTML>
<HEAD>
<TITLE>Script 1.2 – Sample HTML Page</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”JavaScript” TYPE=”Text/JavaScript”>
document.write(“Hello World”);
</SCRIPT>
</BODY>
</HTML>
Testing Your First Script
Now that you have typed in your first script, you need to save it. I called my script HelloWorld.html. The HTML extension identifies the page as an HTML page. Your computer uses the information in the file’s extension to associate the file with a particular application. An .html extension tells the operating system to open its default browser and pass the HTML file to it. Alternatively, you can use the .htm extension, which is also recognized as an extension for HTML pages.
If you are using a full-featured HTML editor, the editor may enable you to test your script with the click of a button. Because Notepad has no such automatic HTML testing feature, I simply started up a browser and used it to open the HelloWorld.html file. The browser opened my page and ran the script.
Depending on the browser installed on your computer, the process of testing your script is slightly different as outlined in the following procedures.
Testing with Browser
Start Browser
In the menu bar, click on File and then click on Open Web Location.
Type the location of your HTML page and click on Open. Alternatively, click on the Choose File button to browse and find the HTML page and then select it and then click on Open.
Testing your first JavaScript using Browser
After loading your new script and making sure that it works the way that you intended in both Mozila Firefox and Chrome, you know that you probably have a good script. However, both Internet Mozila Firefox and Chrome do a really good job of hiding errors when they occur. I will show you how to look for and fix these errors on Sunday morning. If you did not see the Hello World message displayed, then you probably mistyped something, so go back and reopen your HTML page and double-check your work. For now, I’ll assume that you saw what you expected when you loaded your Web page and everything is okay.
About evirtualguru_ajaygour
The main objective of this website is to provide quality study material to all students (from 1st to 12th class of any board) irrespective of their background as our motto is “Education for Everyone”. It is also a very good platform for teachers who want to share their valuable knowledge.
