QuickRead 15: JavaScript Part 1

What's that?
Using JavaScript, you can add interactivity to your web page. When forms are used (forms are the white rectangles found on web pages that you type text in - the login rectangle and password rectangle on hotmail.com or yahoo.com are examples of forms), the input that visitors enter in the form fields is sent to be processed by a program written in Perl, Java or C. These programs reside in a computer far away from the visitor (usually). When you use JavaScript, the input that a visitor enters is processed right at the browser. This makes for very fast interaction and as people have been finding out, some delightful results. JavaScript is easy to learn and is very similar in principle to popularly used programming languages like Java and C++. It also lets us introduce a buzzword, dynamic. The idea of making a web page more dynamic is the idea of making it change in response to things the user does.

 
 
That last paragraph didn't tell me squat. What's JavaScript again?
JavaScript can be thought of as a special kind of english that you use to instruct the computer to do things for you. This special english is very limited in terms of vocabulary and sentence constructions that you can use to communicate with the computer. In fact, the restriction is so strictly enforced that even the slighest deviation from understood words and sentence constructions will result in miscommunication. Depending on the kind of miscommunication, the computer will either do something you didn't expect it to do, or it will tell you that it doesn't understand you using "error messages." For instance, all sentences in our new JavaScript english end in semi colons, not periods. If you were to end a sentence with a period, the computer will tell you that your sentence has an error.
The sentences used to communicate with the computer, taken together are called code.

One other thing, contary to popular opinion (and contrary to common sense), Javascript and Java are NOT the same language. They are similar in some respects and both are used on the web. Javascript is code inside the html pages and executed by your browser, while Java "applets" are separate files and can work outside of a web browser.

 
 
Where does the "code" for my JavaScript go:
JavaScript code can go anywhere in the HTML document. Typically large blocks of JavaScript go near the top of your page right in between the </title> and </head> tags. The starting tag for your code would be <script> and the closing tag would be </script>. Not too surprising.(you probably would have guessed that any way).

<html>
<title>Title...</title>
<script>
cool javascript code goes in here
</script>
<body>
rest of the body is here...

Some JavaScript is used as part of other html tags, namely the "a" tag (the one you use for links). This type of JavaScript is activated by some relation between the mouse pointer and the stuff between the <a ...> and </a>. Examples include methods in JavaScript such as "onMouseOver" (hovering your mouse over a picture for instance, could activate JavaScript that will change the picture) , "onMouseOut" (moving your mouse away from a picture for instance, could activate JavaScript that will change the picture) and "onClick" (clicking on a link, could activate JavaScript that will do something like printing something on the page). We will look at the HTML tags involved, the JavaScript code, and the way to activate JavaScript code in the following paragraphs. In general, if you aren't using JavaScript code that is part of an 'a' tag, then you should put it at the top using the script tag. If it is part of an 'a' tag, then it should go between the body and /body tags and is NOT part of a script tag.

If you have frames, then JavaScript goes in the file for the frame you want the code to work for. In other words, you won't put it into index.html (which just defines your frames) but into main.html or menu.html or whatever you call the file for one of the individual frames.

 
 
Printing stuff, Part 1
Among the many things we can get the computer to do, printing to the computer screen is a pretty basic function. In our special JavaScript english, we can do this by using the code: document.writeln("stuff to be printed goes in here"); (which should be up at the top between script and /script tags). Let's explore that sentence a little bit. document.writeln is 'function' in JavaScript. It is kinda like a verb in english, or more specifically like a command in english. It is telling the brower to do something. It tells the browser to print, or 'WRITE LiNe', the stuff inside of the following set of parenthesis and to print it to the 'document'. (One note, that is a lowercase l in writeln not an uppercase I.)The word 'document' is the way JavaScript refers to the webpage that it is in (as opposed to changing some other page or some other frame). So the above example would print the words stuff to be printed goes in here to the web page (but not in italics by the way). The quotes have to be there and it will print exactly what is inside the quotes. If you actually want to print a " or ' itself, then put a backslash \ before it. For example, if you wanted to print Keep on going, don't stop! then you would use the code,
document.writeln ('Keep on going, don\'t stop!');
OR
document.writeln ("Keep on going, don\'t stop!");

The limitation of this so far, is that you can only print predetermined words. Or another way, you can't change what you print based on, say what the user wants. This is normal for HTML and if that was all JavaScript could print, it wouldn't be useful. In fact, you can't tell by looking at a webpage whether the text was just in a normal html file, or printed by document.writeln which means an example of this (so far), isn't of much use. The next sections will explain some of what makes JavaScript (and indeed programming languages in general) more useful.

 
 
Variables, the Storage Boxes of JavaScript
Variables in JavaScript aren't that different from the variables you used back in your math classes. The value of a variable may change (ie vary) as time goes by. Variables are kind of like a storage box, you can put things in them, and then get them back out later.

On any computer, if you want to remember something, you store it in memory, ie RAM. RAM is divided up into little blocks that each have their own address. That address is an ugly string of numbers and letters like 837FA3800. Not very pretty or very easy to use. JavaScript variables hide some of this from us. So instead of refering to information I stored at 837FA3800, I just use the variable name something. JavaScript takes care of remembering the address (or addresses) for us, all we do is refer to the variable name. In JavaScript, the names of variables have to start with a letter or an underscore and then continue with letters, numbers, or underscores. For example _big, big, big9, big_9 are all valid variable names, while 9big is not valid because it begins with a number. You can't use spaces or punctuation marks in variable names so big-9 or big.9 are not legal. Also, we recommend that you use all lowercase names (it will make life easier for you and us; FYI: case-sensitivity is browser specific, don't count on it). Typically you want to use a name for the variable that means something to you. For example, if you had a variable that stored someone's first name you might call it first_name though as far as JavaScript is concerned you could have called it xyz or even last_name. Variable names to JavaScript are just labels, it has no concept of the meaning of the words "first name" or "last name", it just makes boxes with those labels. However, you will confuse yourself if you store your first name in last_name and your last name in first_name (confused yet?, see what I mean. The variable names should be mean something to you even though they won't to JavaScript).

If you want to use a variable in JavaScript the first thing you have to do is tell JavaScript you want one. You do this by "declaring" the variable using the keyword var (we computer people are lazy typists and like abbreviations, actually we are even lazier as there are times when you can get away without declaring the variable at, but that is a VERY bad habbit to get into as problems often arise. Also, most programming languages won't let you do that). For example, to tell JavaScript you want a variable named 'big' you say:
var big;
Notice the ; at the end, JavaScript uses the ; kind of like how English uses a . in that it marks the end of a sentence or statement. Now we have a variable called big. It is common to give a value to a variable when you declare it. This value is what will be stored in the box the variable represents (that little spot in memory). For example:
var big = 99999;
creates (or declares) a box named big as a variable and puts (or more precisely assigns) an integer (whole number) value of 99,999 to it. Numbers are assigned without quotes surrounding the value. So now there is a box named big with the value of 99999 in it.

Variables in JavaScript are pretty friendly when it comes to storing things. You want a number in your box, no problem. A letter, easy. Several words, still no problem. The same variable does it all with very little effort on our part (remember that lazy programmer thing). Lets look at some words:
big = "Go Gators";
assigns the words "Go Gators" to a variable called big. Notice that the words are in quotes (without the quotes you would either get an error or have the code behave in an unexpected way). In JavaScript, if you put " around something it looks at it just like plain characters. Without quotes, it thinks you are either giving it a command (like document.writeln) or talking about a variable. Summation: be VERY careful with your ". Also, don't forget the ; at the end of the statement. A common programming term (just about every language does this) is "string". A string is a series of letters, numbers, spaces, or other characters INSIDE of " (or '). A string is something that is taken at face value so to speak. For example, "big" means the word big, that is the letters b, i, and g. big without the quotes means the variable big, or more precisely, what is inside the box named big. Again, be careful with your quotes. Numerical values like 99999 or -5.3 don't need quotes because JavaScript realizes they are numbers. So:
var small=-5.3;
works just fine. A variable named small is created and -5.3 is stored there.

Another example: var nba = "Pacers Rock";
assigns the words "Pacers Rock" to a Variable called nba. Since we had " we are talking about a string Pacers Rock and not a variable called Pacers.

Once you have a variable you can change it! (thats what variables are there for after all). This is done with an = sign. Example:
big=12345;
Now the box labeled big has 12345 in it. Since we already had a variable big, I didn't need to declare it again with var (you only declare variables once). Giving a variable a value like this is called "assigning" as in you just assigned the value 12,345 to the variable big.
big="Hello, ";
Now the box has the string Hello, (complete with that last space after the ,). Now big as a string instead of a number. JavaScript doesn't care what you store in the variable, after it is your variable. JavaScript DOES care that you have a ; at the end. You can also do more complicated things, like:
big=15+small;
Now what happens is that since there aren't any " around small, and since small isn't a command to JavaScript, JavaScript looks in its back yard for a box labeled small. Lets assume that you declared a variable named small like we did a little ways above here (var small=-5.3;). JavaScript takes whatever value small has (-5.3 in our example), adds it to 15 (which gives you 9.7), and assigns the result (or answer) to big. So now the value of big is 9.7. It is also important to note that small is not changed in any way. Assigning takes whats on the left of the = and puts it in the thing on the right. Since small is on the right, it doesn't get any new values assigned to it. So right now big is 9.7 and small is -5.3.

 
 
Printing Stuff, Part 2
It is all very nice to play with variables, but at some point or another we need to know what is in the variable. Specifically, we want to print it out. After all, what good is a computer without output? Here are some examples:
document.writeln(nba);
will print "Pacers Rock" because nba is a Variable which has as its value (meaning the box with the name nba contains) the string "Go Pacers." Since there are no " around nba JavaScript looks for a variable named nba.

document.writeln("nba");
will print the actuall word nba to the screen. If it is quotes, it is taken as is. So to print a word, use quotes but to print a variable don't use quotes. For example

document.writeln("<fontcolor=blue>nba</font>");
will print the letters nba with the font tags. document.writeln doesn't know that it is a font tag, it just prints the stuff in quotes exactly as it is written. When it gets printed to the web page, the browser will say, "Hey, thats an HTML tag, you want blue" and so the word NBA will appear in blue. You can use any html tags within the quotes as they will be interpreted by the browser normally.

Now what if you want to print both variables, and some actual words? You can still use document.writeln, but you need a little more.
document.writeln("I like the number " + big + ", don't you?");
This prints the string I like the number followed by whatever value the variable big has, followed by the string , don't you?. The + sign is used to glue together the different parts to be printed. Another example:
document.writeln("<b>" + nba + "</b>");
will print "Pacers Rock" in bold since the browser will interpret the b tag.

Instead of using html tags inside the quotes leading to messy quotes and plusses, here are some other things things we can do to strings:

var nba_blue = nba.fontcolor('blue');
which will assign the string "Pacers Rock" in blue, to a NEW Variable called nba_blue. You can use other html colors here. Note that variable nba still has the string "Pacers Rock" in black. It wasn't changed.

var nba_italics = nba.italics();
italisizes "Pacers Rock" and assigns it to a new variable nba_italics.

var big_nba = nba.toUpperCase();
assigns "PACERS ROCK" to big_nba. Notice the "U" and "C" in toUpperCase are capitalized. It will not work if you have a small "u" or "c." If you wanted to print the all caps version of the variable nba then you need to print the variable big_nba NOT the variable nba (as it didn't change). Also, remember JavaScript sees the variable name just as a label so nba_red doesn't have to have anything to do with "Pacers Rock" in red.

One warning in the land of JavaScript, beware of the line wrap. When a line gets to the right edge of the screen in Pico (or other editors) it typically wraps it self on to the next line. Don't let a string (something in quotes) wrap.

This is good:
document.println ("Hello I am a long line");
This isn't:
document.println ("Hello I am a
long line");
This will also work:
document.println
("Hello I am a long line");
So will this:
document.println ("Hello I am" +
" a long line");

.
.
Get behind the wheel!
Type out the following JavaScript and see what it does:

<html>
<head><title>JavaScript</title>
<script>
var name="Kramer";
document.writeln("<font color=red>" + name + " where's the money you owe me!! </font>");
var italic_test=name.italics(); document.writeln("<p><font color=red>" + italic_test + " is the greatest person to walk this earth! </font>");
</script>

</head>
<body>

This is the body </body>
</html>



Type your code here:

.


Index
12  

15

 16   17   18