A First JavaScript Program
There is a programming tradition that when you learn a new programming language, the first program you write is a program that displays the sentence �Hello World�. This is usually called a �Hello World� program. The intention is to take on a relatively small task, displaying predetermined text, and use it to learn how to use the language tools, like the compiler and interpreter and a little bit of syntax. This doesn't make a lot of sense for JavaScript, since JavaScript is usually used in combination with mark-up languages like HTML and XML that are already capable of displaying predetermined text without JavaScript. JavaScript really doesn't come into use until there is a need for some sort of situation specific action. So a JavaScript �Hello World� program would need to somehow react to the user or the environment, not just display the phrase �Hello World!� This leaves a lot of possibilities; for our �Hello World� program, we are going to give a different response depending on the time of day.
Using your text editor, save the following program into a file on your computer or web server as hello_world.html. (If even the first few lines of this don't make sense to you or you don't already have a text editor and JavaScript-capable browser, check out Getting Ready to Learn JavaScript)
PROGRAM
<html>
<head><title>Hello World in JavaScript</title></head>
<body>
<script type="text/javascript">
<!--
// get the current date and time
var now = new Date()
// Check the time
if ( now.getHours() < 12 )
{
// It's before noon
// print "Good Morning World!" in the window
document.write("Good Morning World!")
}
else
{
// It's after noon
// just print "Hello World!" in the window
document.write("Hello World!")
}
//-->
</script>
<noscript>Hi Non-JavaScript User!</noscript>
</body>
</html>
TRY OUT YOUR PROGRAM
Open hello_world.html in your web browser. If your program works, you will see either "Good Morning World!" or "Hello World!" in your browser window. Don't get too worried if it seems like the time of day is wrong, most likely your computer's clock is wrong, but your program still worked! If you see "Hi Non-JavaScript User!", you need to turn on JavaScript in your browser. If you just see a blank window, you have an error. Go back and double check that you typed everything correctly. You can also find a copy of the program here. (Use your browser's view source feature to see the code.) If you still have problems, post a message in the forum and we'll figure it out together.
Congratulations, you've now written your first JavaScript program! Don't worry if you don't understand everything in the program yet, that will come with time. Now that you have this simple program, how can you use your HTML skills to make this more attractive? What do you need to learn to do in JavaScript to make this more useful to you? Are there other situations you would rather react to?
Using your text editor, save the following program into a file on your computer or web server as hello_world.html. (If even the first few lines of this don't make sense to you or you don't already have a text editor and JavaScript-capable browser, check out Getting Ready to Learn JavaScript)
PROGRAM
<html>
<head><title>Hello World in JavaScript</title></head>
<body>
<script type="text/javascript">
<!--
// get the current date and time
var now = new Date()
// Check the time
if ( now.getHours() < 12 )
{
// It's before noon
// print "Good Morning World!" in the window
document.write("Good Morning World!")
}
else
{
// It's after noon
// just print "Hello World!" in the window
document.write("Hello World!")
}
//-->
</script>
<noscript>Hi Non-JavaScript User!</noscript>
</body>
</html>
TRY OUT YOUR PROGRAM
Open hello_world.html in your web browser. If your program works, you will see either "Good Morning World!" or "Hello World!" in your browser window. Don't get too worried if it seems like the time of day is wrong, most likely your computer's clock is wrong, but your program still worked! If you see "Hi Non-JavaScript User!", you need to turn on JavaScript in your browser. If you just see a blank window, you have an error. Go back and double check that you typed everything correctly. You can also find a copy of the program here. (Use your browser's view source feature to see the code.) If you still have problems, post a message in the forum and we'll figure it out together.
Congratulations, you've now written your first JavaScript program! Don't worry if you don't understand everything in the program yet, that will come with time. Now that you have this simple program, how can you use your HTML skills to make this more attractive? What do you need to learn to do in JavaScript to make this more useful to you? Are there other situations you would rather react to?
This site needs an editor - click to learn more!
You Should Also Read:
JavaScript Beginners' Resources
JavaScript and Java Site and Newsletter
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 by Julie L Baumler. All rights reserved.
This content was written by Julie L Baumler. If you wish to use this content in any manner, you need written permission. Contact
BellaOnline Administration
for details.
