A Javascript Tutorial

Now some of you are probably like - where are all the javascripts? Well, I figured that since I'm totally changing the way my site works with its content (mostly everything is going to be tutorials from now on) you'll need to stick with me here. First of all, for some of you newbies, let me explain what javascript is (also, let me point out that the correct punctuation is JavaScript and not javascript or Javascript, etc, but either way, it doesn't really matter). Javascript is a scripting language that was first developed by Netscape and Sun. It's related to Java, although it is not true object orientated programming so it is limited in the functions that it does. But you can write basic applications on a web page, but do note that your browser has to be javascript-complient. If you're using a version 3 browser and above, you should be okay, but remember that Microsoft Internet Explorer version 3 doesn't support some of the javascript language because Microsoft had originally written JScript which was meant to rival Netscape's implementation of JavaScript. So if you're still on that browser, upgrade it (in my opinion, MSIE 4 is the best browser out there). But anyways, let's get started with the tutorial. First of all, you should be familiar with HTML before jumping into JavaScript because then you might get lost in this tutorial. I'm not expecting you to know HTML inside and out, but just the basic fundamentals. When writing JavaScript, you can just intertwine it in with the rest of your HTML coding. So type in the scripts as if you were typing in HTML code. Mainly the brain of your javascript goes before the anchoring </head> tag. So that means that some of your javascript's body (mainly the visual part) can go after the <body> tag. I have seen some people just put the whole javascript including the "brain" of it after the <body> tag, but it's up to you. Myself, I have encountered no problems with just putting it all in the body, but I guess we should follow the W3C's standards. W3C? They're the big guys on campus when it comes to the web, to find out who they are, go to the W3C website. Back to javascript, one major rule is to test it out. Testing your work out is very important and I have to stress that.

When you begin your javascript, you'll have to follow some standards. Standards again!?! Yeah. Be sure that you begin it with the following code.

<script language="javascript"> You can also just put script with the less than and greater than sign enclosing it (it being the word script), but because the ever changing world wide web may change, it's just best to put the above code in because I'm sure in the near future another scripting language will come out.

If you've ever programmed in another language before, you probably know about commenting and how it helps you write a program as you go along. Comments are overlooked by the browser so whatever you put in a comment will not be physically shown by the browser, but will be able to be viewed in the source code. Commenting comes in handy when you're writing a program because whether you're a beginner or a advanced user, you can leave a comment whether it be where what part of the javascript needs to be changed or updated or worked on, etc. Here's an example of how a basic javascript comment looks. Also for you techies out there, you may notice that a one line javascript comment is the exact same format as a C++ programming language comment.

//this text, when placed in a javascript will be overlooked by the browser But when working with longer comments, you can use the type of comment that the C programming language uses. Note that before we go on, no knowledge of C or C++ is needed. Thought I'd throw that in FYI. /* this is the type of comment that you use for a large block of text that you want the browser to overlook */ But if this tutorial were just going to tell you about comments then it would be pretty useless. Let's learn, drumroll please, variables. In javascript, whenever you define a variable, you should always use var. But that's when you define it. Then, when you use the variable in a action, you don't have to use var. Huh? Okay, let me try to be more clear. You need to use the command var because if you don't, the computer won't know if it's a variable that it's working with and then you'll get that error message saying whatever is not defined. Even when using variables in a action, it is sometimes better just to have that var there. Maybe it would be easier to understand if I showed you an example so here goes. <script language="JavaScript"> <!-- hide this javascript from older browsers var nrrrrd = 123; // stop hiding --> </script> Now wait a minute Jeannie. What is up with all those extra commands? Well, I figured I would throw a couple more in for ya, just to get this tutorial going. The first line I don't think I have to explain. The second line is something new though. Hmmm, what could it mean? Let's see, it looks like a regular HTML Comment. But why are we inserting the javascript inside of it? The reason is because some older browsers don't support javascript. And since there are still people out there too lazy to upgrade <sigh> us innovators have to make sure that all stays compatible in the world (wide web, that is). But of course, this is impossible right now because of computer settings, browser settings, etc, etc, etc. Anyways, geeze, I'm wondering off the topic. Where was I now, oh yeah - that comment thing is read as a beginning comment rather than a whole block comment (old browsers will read everything in that as a comment that should be overlooked). So when your completely up to date browser goes to interpret the code, it will just look at that line as a one line comment rather than a block comment (like old browsers look at it). Get it? If not, that's okay. It doesn't have to contain the text hide this javascript from older browsers, but I added it anyways. Same goes for that stop hiding thing. Hey now though, how comes that stop hiding thing has two slashes in front of the enclosing arrow? Because if we didn't have the slashes, the browser try and exectute that --> like it was a javascript command. It may all seem really confusing right now, but don't worry 'bout it. Before I forget, let me explain that var nrrrrd = 123; statement. First, that var command told the browser that it was going to be dealing with the variable nrrrrd. Then, it said, "Hey, look - I want that variable nrrrrd to equal the number 123." And to top it all off, you will need to add the semi-colon because this way the browser knows to execute that line as a task.

Tips To Naming Variables
  • Don't begin your variables with numbers!
  • Don't even think about putting spaces in variable names, use the underscore_characer
  • Don't use a word that JavaScript uses in its functions. Like using the variable else. It will just make things more confusing
  • JavaScript is case-sensitive. JS is not the same as js or Js or jS.
  • Use words that deal with what the variable is standing for. Like if you have 27 as the variable for the number of kids in a class, use something like class_number or numberofkids. This way if you ever go to revise your creation, you'll know what goes with what.

But that above example (var nrrrrd = 123) really didn't do anything. I mean, all it did was define the variable nrrrrd. One quick side note (yes another!) - JavaScript is CaSe-SeNsItIvE!!! But if only that variable nrrrrd could have been used in a task . . .

Now there's a novel idea, we could make it do something. So let's see, there are millions of things we could make it do, but what? Maybe solve a calculation? That's it! But before it can do that, let's define some more variables.

<script language="JavaScript"> <!-- hide this javascript from older browsers var nrrrrd = 123; var blah = 3; //do something now with those variables var blah_blah = blah * nrrrrd; // stop hiding --> </script> But it still doesn't display anything. That's where the body of the javascript comes in. The above goes before the closing </head> tag. Now the below will go after the <body> tag. <script language="JavaScript"> <!-- hide me document.writeln("When you take 123 multiplied by 3, you will get"); document.writeln(blah_blah); // show me --> </script> Now that could have easily just typed in rather than taking the time to do the javascript, but what about when you want some better effects? Like a prompt that asks for the user name and then displays it on a page with a message. Now we're talking. But wait a minute, I'm jumping ahead too far, let me explain the above. That is the part that goes in the body. The document.writeIn just says, "Write whatever is inside of these paranthesis into the document." And if it's text inside of quotes inside of paranthesis then just display it, but if it's just text inside of paranthesis without quotes, why it must be a variable! So that document.WriteIn(blah_blah); signalled to the browser that it was going to be a variable.

So now that you have a pretty good grasp of how to define what goes in the head and what goes in the body, let's see if we can't do some more advanced things, whadda ya say?

<script language="JavaScript"> <!-- hide me var_visitor = prompt("What is your name?", "NRRRRD"); // show me --> </script> What the above did is a prompt where a popup prompt came up with a textbox for the user to type in their name. The default was NRRRRD, but they had the operation to delete that and put in their name. So it said that for whatever the variable visitor was, to use their input to equal that variable. It coulda also looked like this: <script language="JavaScript"> <!-- hide me var visitor = prompt("What is your name?", ""); // show me --> </script> So then whatever they typed in would have been substituted in those quotes and saved as the variable iteself. And if you would have wanted to print their name or whatever they said, you could have done this in the body: <script language="JavaScript"> <!-- hide me document.writeln("Hey, welcome to my site"); document.writeln(visitor); // show me --> </script> And that would have written in Hey, welcome to my site with their name after it. Pretty cool, huh? But if you want to change the font color, you'll need to do this: document.writeln(visitor.fontcolor('blue')); So that would have made the person's name in blue. Some of you may wonder why I didn't use the hexadecimal code for blue, but the reason is that if the person has a browser that supports javascript then they have a browser that supposts a specifying color name. Get it? Alright then, let's move on.

Like all programming languages, javascript has something called an if statement. Actually, there's more - an "if then" statement. So in other words, if one thing equals something, then do something about it. Here's an example of a if then statement mixed in with a prompt.

<script language="JavaScript"> <!-- hide me var computer = prompt("Type yes if you like computers"); if (computer == "yes") { alert("Okay, you're cool then"); } // show me --> </script> So what that said was that if the person typed in yes for the prompt, then show an alert saying that they were cool. Get the idea? Oh, and take notice of the curly brackets. Those are necessary. Why? Because this way the alert prompt or whatever the intitial response is supposed to be will only work if they typed in yes.

So now I think you're ready for image swapping.

<img src="test.gif" name="test"> <p> <a href="#" onMouseOver="document.test.src='test1.gif';">move your cursor here</a> <br> <a href="#" onMouseOver="document.test.src='test2';">move your cursor here</a> Where's the language=JavaScript and all that other info?!? Well, mouseovers and onclicks don't require them. The above example dealed with mouseovers. Let's go through this one step at a time.

First, an image was specified - test.gif. Normal HTML so far, but now comes the tricky part. The a href led to the link of #. For those of you die hard HTML users, you may notice that the # usually begins an "in page" link, but there is not a link specification so when the user moves their cursor over the link or clicks on it, it won't go anywhere. Then comes the onMouseOver. That part says that for the document, use the test graphic (and then it goes on to specify the test graphic's location). Notice that it uses a single quote to block off the source of the graphic rather than ". This way it doesn't interfere with the " that went before the document.test. And when the user puts their cursor over the link that says move your cursor here, it will change the image test.gif to image test1.gif. Same part goes for the test2.gif.

But don't go thinking for a second that that's all there is to mouseovers. No way, we haven't ever done the status bar mouseover. Here's how do to that:

<a href="#" onMouseOver="window.status='An overly obsessed computer fanatic';">So Who Are You . . .</a> Here's how that would work:
So Who Are You . . .
So when you moved your mouse over the text "So Who Are You . . ." you should have seen in your status bar (that bar on the bottom of your screen) something appear that said, "An overly obsessed computer fanatic." Alright, what's going on? Well, just like the image swaps, we had the target link be # (so the user wouldn't go anywhere when they clicked on the link). Of course if you want a link that won't display the URL in the status bar, rather a description of the link, then go right ahead and change that # into the URL. And now comes the part that controls the function of this javascript - the onMouseOver command. In this case, the control of the OnMouseOver was window.status which just said that in the status bar of the window, display the text An overly obsessed computer fanatic. And then like all links, there came the anchoring </a> command. That's all. But wait, maybe not . . .

I'll have to say though, that after teaching myself C and C++, JavaScript reminds me of those two languages so much at times. And I've realized that I seriously haven't dug into teaching you the JavaScript language from ground zero. I mean I'm talking literals, objects, etc. Now of course you can leave this tutorial now, but if you're really serious about learning the language, I urge you to continue. Some people may be saying, "Why didn't she just start with the tutorial from scratch and work her way up so I'd learn it all?" My reply to that is that this way, those who just want to know "enough to survive from the language" can hurry up and learn some tricks. But those that want to learn everything can be happy too. So here goes.

Alright, looks like you're one of the many who want to learn JavaScript all the way. If you read the beginning of this tutorial, you should already have a good grounding in variables so I'm going to skip that part here. But I won't skip it entirely, I want to use some variable examples and compare them with literal examples. Literal? Yeah, check out the below.

var nrrrrd = 1234 + cool; Now check out example two. var cool = 40 var a_number = 1234 var nrrrrd = a_number + cool; Can you take a guess at which one used literals and which one used variables. Well both used variables, but it was the first example that used a literal. How can you tell? Because notice how it bluntly had 1234 put down? It didn't use a variable to represent that, it just gave the number straight off. And that brings me to a point on why you shouldn't begin your variables with numbers. If you do, then the browser might interpret it as a literal.

But what about values? Values are important with variables. Below I listed the 4 values you will be working with.