Basic Javascript

Morphmaster · 26-06-2005, 18:46

Let's start with a traditional Hello World! Seems every programming tutorial begins with that.

Copy the following and save as hello.html..

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

Then add SCRIPT and comment tags within the HEAD section. These do a few things. The script tags tell the browser that some sort of scripting is contained between (in this case "javascript"). It also contains HTML comments so older or non-JS capable browsers will ignore the scripting contained within. The last thing is a javascript comment (//) which we will learn about later.

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="javascript"></SCRIPT>

</HEAD>
<BODY>

</BODY>
</HTML>

Now we'll make a function. A function does something. It executes a series of instructions. We'll start with an empty shell...

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="javascript"></SCRIPT>

</HEAD>
<BODY>

</BODY>
</HTML>

Now we'll add the function name and an alert box that say's "Hello World!"...

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="javascript"></SCRIPT>

</HEAD>
<BODY>

</BODY>
</HTML>

Notice how the function is structured. The word function declaring that it is in fact, a function. The function name - HelloWorld. The parentheses ( ), these have a use that we'll get into later, and the curly brackets - { } that contain the set of instructions.

So, that's it for the function in the head tags. It's just sitting there waiting for something to call it. How about we make it execute when we click on a link? Sounds good to me. Here's a generic link that points nowhere for now...

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="javascript"></SCRIPT>

</HEAD>
<BODY>

<A HREF="">Hello</A>

</BODY>
</HTML>

Make it point to the function...

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="javascript"></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:HelloWorld()">Hello</A>

</BODY>
</HTML>

Now try it.

Well, whaddya know about that? Your first javascript.

Before we go on, there's something else we should make clear. Javascript and Java are two completely different things. What we just did is Javascript, NOT Java. Java is a whole nuther thing. The only real thing the two have in common are the letters J-A-V-A in their name. Long long ago, Netscape made a new scripting language for their browser. They called it LiveScript. About that time, the Java programming language was gaining in popularity so the folks at Netscape renamed their scripting language to JavaScript to catch the Java wave. The two have been confused ever since. To add to the confusion, Microsoft saw that this scripting thing was pretty cool so they decided to incorporate it into their browser too. Except they call their flavor of javascript Jscript. (Gee, what a clever bunch.)

Now, to further add to the confusion, not only are there differences between Netscape's javascript and Microsoft's Jscript, but because this scripting is an evolving technology, there are even further differences between scripting support depending on what version of browser you're using. Oh goodie. Well, here's the good news... most of the javascript you'll get into is simple basic stuff that is easily handled by the majority of modern browsers. And ALL of the scripting we'll touch on in this tutorial is easily handled by all the major browsers.

And one more thing since I'm thinking about it and it's very important... javascript is case-sensitive. Again...

JAVASCRIPT IS CASE-SENSITIVE

The function HelloWorld is not the same as helloworld. Be very careful about this. Case related errors can be frustrating because you get an error that says that MyVariable doesn't exist when there it is plain as day - myvariable. Understand?

26-06-2005, 18:46	#1 (permalink)
Morphmaster Ultimo Supremo Join Date: May 2005 Location: /public_html/Cgi-bin/ Posts: 1,417 iTrader: 0 / 0%	Basic Javascript Let's start with a traditional Hello World! Seems every programming tutorial begins with that. Copy the following and save as hello.html.. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </BODY> </HTML> Then add SCRIPT and comment tags within the HEAD section. These do a few things. The script tags tell the browser that some sort of scripting is contained between (in this case "javascript"). It also contains HTML comments so older or non-JS capable browsers will ignore the scripting contained within. The last thing is a javascript comment (//) which we will learn about later. <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="javascript"><!-- //--></SCRIPT> </HEAD> <BODY> </BODY> </HTML> Now we'll make a function. A function does something. It executes a series of instructions. We'll start with an empty shell... <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="javascript"><!-- function () { } //--></SCRIPT> </HEAD> <BODY> </BODY> </HTML> Now we'll add the function name and an alert box that say's "Hello World!"... <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="javascript"><!-- function HelloWorld() { alert ("Hello World!"); } //--></SCRIPT> </HEAD> <BODY> </BODY> </HTML> Notice how the function is structured. The word function declaring that it is in fact, a function. The function name - HelloWorld. The parentheses ( ), these have a use that we'll get into later, and the curly brackets - { } that contain the set of instructions. So, that's it for the function in the head tags. It's just sitting there waiting for something to call it. How about we make it execute when we click on a link? Sounds good to me. Here's a generic link that points nowhere for now... <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="javascript"><!-- function HelloWorld() { alert ("Hello World!"); } //--></SCRIPT> </HEAD> <BODY> <A HREF="">Hello</A> </BODY> </HTML> Make it point to the function... <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="javascript"><!-- function HelloWorld() { alert ("Hello World!"); } //--></SCRIPT> </HEAD> <BODY> <A HREF="javascript:HelloWorld()">Hello</A> </BODY> </HTML> Now try it. Well, whaddya know about that? Your first javascript. Before we go on, there's something else we should make clear. Javascript and Java are two completely different things. What we just did is Javascript, NOT Java. Java is a whole nuther thing. The only real thing the two have in common are the letters J-A-V-A in their name. Long long ago, Netscape made a new scripting language for their browser. They called it LiveScript. About that time, the Java programming language was gaining in popularity so the folks at Netscape renamed their scripting language to JavaScript to catch the Java wave. The two have been confused ever since. To add to the confusion, Microsoft saw that this scripting thing was pretty cool so they decided to incorporate it into their browser too. Except they call their flavor of javascript Jscript. (Gee, what a clever bunch.) Now, to further add to the confusion, not only are there differences between Netscape's javascript and Microsoft's Jscript, but because this scripting is an evolving technology, there are even further differences between scripting support depending on what version of browser you're using. Oh goodie. Well, here's the good news... most of the javascript you'll get into is simple basic stuff that is easily handled by the majority of modern browsers. And ALL of the scripting we'll touch on in this tutorial is easily handled by all the major browsers. And one more thing since I'm thinking about it and it's very important... javascript is case-sensitive. Again... JAVASCRIPT IS CASE-SENSITIVE The function HelloWorld is not the same as helloworld. Be very careful about this. Case related errors can be frustrating because you get an error that says that MyVariable doesn't exist when there it is plain as day - myvariable. Understand? __________________ Thanks Tom Have you ever thought what it's like, to be wanderers in the fourth dimension? Have you? To be exiles?

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
New JavaScript effects Library!	FrozenDice	Website Design Forum	2	28-10-2005 02:25
Basic HTML?	01wojtowicz	HTML, DHTML and CSS	3	31-08-2005 10:20
Manipulating Attributes Using Javascript	Shwaza	Website Design Articles	1	09-06-2005 07:44
Basic Buttons	asgsoft	Flash Articles	2	14-05-2005 09:49
Basic HTML	Bmg	Programming Articles	0	07-04-2005 16:20

Basic Javascript

Basic Javascript

Similar Threads