PGTUTOR.COM: JavaScript tutor- Lesson 1

JavaScript tutor- Lesson 1

Let's get started with the following:

<html>
<head>
<title></title>
</head>

<body>
</body>

</html>

Copy or type it into notepad and save this as hello_world.html. Since all programming tutorials start off with saying "hello world", why should I be any different?

Now add a couple of javascript script tags within the head tags.

The script tags always go within the head tags- never the body tags.

<html>
<head>
<title></title>

<script type="text/javascript">

</script>

</head>

<body>
</body>

</html>

Most ordinary tutorials start off with writing text in javascript but we won't learn that until lesson 12 or something! I have my reasons. We'll start off by learning functions which other ordinary tutorials teach you half way through their tutorial. Strange? Maybe.

Now add an empty function within the javascript tags.

<html>
<head>
<title></title>

<script type="text/javascript">

function() {

}

</script>

</head>

<body>
</body>

</html>

Right now the function has no name- give it the name MyMessage.

<html>
<head>
<title></title>

<script type="text/javascript">

function MyMessage() {

}
</script>

</head>

<body>
</body>

</html>

Important: JavaScript is case-sensitive. myMessage is different from mymessage which is different from MyMessage etc.

Right now your function does nothing. So add a very famous popup- an alert box that says "Hello World!"

<html>
<head>
<title></title>

<script type="text/javascript">

function MyMessage() {

alert("Hello World!");

}
</script>

</head>

<body>
</body>

</html>

Now let's stop for a second and notice the basic structure of the function. Notice the empty (). In later lessons they won't be empty. But you must have these in your JavaScript. Then notice the {}. Within these curly brackets is the set of instructions that your function must obey. Finally, at the end of alert box notice that there's a semicolon. Just include it for now and its use will become clearer as you practice more.

Now you might not believe this but the script is complete. Now all you have to do is call the script. You can do this in many ways but for now we'll use a link that points to the function.

<html>
<head>
<title></title>

<script type="text/javascript">

function MyMessage() {
alert("Hello World!");
}
</script>

</head>

<body>

<a href="javascript: MyMessage()">Say Something</a>

</body>
</html>

View your work here

So, that's your first javascript. In case your script isn't working, I'd like to repeat: JavaScript is case-sensitive.

One more thing before we move on. Probably the biggest problem with JavaScript is that a script might work perfectly well in IE and show errors in Netscape. When you start writing your own scripts, you must ensure that your script is tested in two or three browsers. Professional programmers in javascript write a script for IE, and then modify it so that it works in Netscape or vice versa.

For this beginner tutorial, this shouldn't be a problem. In case you're curious, I use IE.

<< BACK NEXT >>

PgTutor - The easy way to make a website ...

Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

PGTUTOR is an award winning website. In the past 2 years, we've won over 20 legitimate awards. Go to our awards page to verify for yourself.

You're not taking a risk when buying our products. If for any reason you're unsatisfied with the quality of our product(s), we'll refund your money. Also, you get to keep the product you bought.