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.
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.
|
|
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.
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?
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.
So now I think you're ready for image swapping.
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:
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.
But what about values? Values are important with variables. Below I listed the 4 values you will be working with.
numeric: Numeric as in number. Nuff said. But wait, I guess I should show an example.
null: Null = nothing. I mean absolutely nothing. Nada. But that doesn't mean you should go and assume its value is zero. But Jeannie, you said it means nothing!?! Yes I did, but zero is a numeric value.
Boolean: A condition of being true or false.
More to this tutorial within the week.
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 . . .
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 . . .
String: a set of characters that are usually for example words such as apple. But you can even have hghgj as a string. It really doesn't matter. Now you can have numbers, but the second you make a number a string value, it's stripped of its rights as something mathematically related. But how does the computer distinguish a string from a number? Well you need to put quotes around the string.