Hello and welcome to my JavaScript Tutorial. This is by no means a complete tutorial as I don’t have the time to discuss everything about JavaScript here. This is just a place for you to get started. JavaScript is a fun and interesting scripting language that will add interactivity to you HTML. I assume that since you are trying to learn JavaScript, you already know HTML and some basics of building a web page. Ok so let’s begin..

What is javascript:

In order to add interactivity to HTML pages, Netscape created JavaScript.
JavaScript is a scripting language.
JavaScript is lines of executable computer code that is embedded directly in your HTML.
JavaScript is an interpreted language, which means that it doesn’t need to be complied.
Even without purchasing a license, everyone can use JavaScript.
All major browsers support JavaScript.

The last question I will answer is one I get asked often: Is Java and JavaScript the same thing? The answer is no. They are two completely different languages.

Ok let’s get to the fun stuff shall we. <script> </script> are the HTML tag used to insert JavaScript into you HTML. So let look at a short script written with JavaScript.


Ok this is a simple JavaScript. If you run this script is will produce (Hello World!) to the page.

Now let’s take a closer look at the above script. You first use the <script> tag, then use the attribute to define the scripting language.


Now, we start the script with the document.write command. This will write output to the page.


Then we used the </script> tag to end the script.


And there you have it. That is our first JavaScript. There is one thing I would like to point out, if you have ever used any other programming language each statement has to end with a semicolon. Many programmers continue this when they write JavaScript, but in JavaScript semicolons are generally OPTIONAL. However, if you want to put more than one statement on a single line, a semicolon is required.

There is also one trick that I want to teach you before we move on. How to handle older browsers and I know what you’re thinking and yes there are still people out there that use older browsers. But anyways I’ll teach you how to fix this. Browsers that don’t support JavaScript will display the script on the actual web page. By using the HTML comment tag, you prevent them from doing this.


The two forward slashes at the end of the comment line (//) prevents the JavaScript compiler from compiling the line.

NOTE: you can’t put // in front of the first comment line ( //<!--), because older browsers will display it. It’s strange I know but that’s just the way it is.

Ok, Let’s take a moment to discuss where in your HTML you should put your JavaScript.
JavaScript executes immediately while a page loads into the Browser. But sometimes this isn’t what we want. We may want it to execute after the page has fully loaded or maybe after the user triggers an event but in any case we need a way to control this. We do this by placing the script in a different place in the HTML like so.

First we will look at scripts in the head section of the HTML:
Scripts that are executed when they are called or when the user triggers an event are placed in the head section of the HTML. This way we can ensure that the script is loaded before anyone can use it.


If you want a script to execute when a page loads you would put it in the body of the HTML. A good example of this was our first script when it wrote “Hello World!” after the page had loaded.


You can also place script in both the body and the head of the HTML and there in no limit on the number of scripts that can go into a document.


There are times however that you may need the same script for several different pages and in these case you will want to run an external JavaScript. This is very easy to do all you have to do is write the script in an external file and save it with a .js extension (something.js) here’s an example


Save the file something.js Just remember that you DO NOT add the <script> tag. There you have it you just call the script with the “src” attribute from any of your pages.


Now that was easy wasn’t it? Don’t forget to place the link to the script in the same place that you would normally write it.

Ok moving right along let’s take a look at Variables. A variable is a container for information. You refer to a variable by name to see its value or to change it. Variables values can also change during a script. Now let’s look at some of the rules for variable names. Variable names ARE case sensitive. They also have to begin with a letter or the underscore character.

Ok let’s declare a Variable. You create a variable with the var statement:


You can also create a variable without the var statement like so:


Now let’s assign this variable a value we do this by:


The Variable name is on the left side and the value is on the right. How the variable strname has a value of "Chad".

When you declare a variable within a function the variable can only be accessed within that function. So when you exit that function the variable is destroyed. We call these variables local variables. You can have local variables with the same name in different functions because each function is recognized only by itself. If you declare a variable outside a function then it is accessible by all functions on that page. These functions start when they are declared and are destroyed when the page is closed.


Ok that’s it for now. Next time we will discuss Operators, Functions, Conditional and Looping.

__________________
If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization.

I have tried my best to make sure that this tutorial has no mistakes, but there is always a possibility of one. If notice any mistakes in this tutorial please let me know and I'll see that there fixed. Enjoy the tutorial and I should have the second part out soon.

__________________
If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization.

Wow! Thanks for the tutorial. It is probably better to have something simple like that for those who are beginning with JavaScript. Good job.

__________________
Mr. Bob's Web Design - Tirelessly looking for ways to enhance the customer base of your business.