Chapter 2: Output
Part 1
Output is the data that is put out from the program. Go figure. The program runs and spits out the results. That's your output. It's pretty much the only way to tell if your program is doing anything. Sure, you could make a program that that counts to one thousand, but what's the point if you can't watch it count?
It's true that the plain html that we made last time is a form of output. The only problem is that it's static. You save the file and open it in the browser and it doesn't do anything except print out the contents of the file. Nothing happens.
To make the page "do stuff" we need to add in some javascript. Javascript enhances webpages with interactivity. When the user does something to the page, the javascript will do something in response. In order to let the user know that something just happened, you'll need to be able to output a message.
On with the code... We'll start with the page we created last time, but with modifications to add the javascript:
<html>
<head>
<title>My First Webpage</title>
<script type="text/javascript">
alert("Vrimples");
</script>
</head>
<body>
Balls!
</body>
</html>
You'll notice the <script> tags in the header. That's where your javascript goes. The <script> element can actually go anywhere in a page, but it's generally preferred that you keep most of the code in the header. As with all rules, however, there is a time and a place for breaking it. Sometimes it's necessary to throw a bit of javascript right in the middle of a paragraph. Just try to keep it to a minimum.
The <b>type="text/javascript"</b> part of the script tag is called an 'attribute'. It's just an extra bit of info about the element that, in this case, tells the browser that the following code is of type "text/javascript". Depending on various factors, the script may or may not work without the type attribute, so you must remember to add it in there.
Inside the script element is where the real fun begins. Instead of just marking up text, as with HTML, we'll be writing actual real code that will do stuff. This simple example simply pops up an alert box with the word "Vrimples". That's what the alert() function does. There are several other ways to output messages to the user, but we'll start with alert() because it's simple, easy to use, and will allow me to introduce a few important programming concepts.
alert() is an example of a function or method. Functions and methods are pretty much the same thing. Later on, when we get to more advanced topics, I'll explain the difference, but for the time being, just think of it as two words for the same thing.
Functions are like actions. When you call a function, the script preforms that action. I like to think of functions as the 'verbs' of programming.
Each function has several parts. In our example, "alert" would be the function name. That's simple enough, right? The name is always followed by a pair of parentheses (). That's how the program knows that it's a function. If you don't put the parentheses, the browser will not treat it as a function and may return an error.
Inside the parentheses is the parameter list. Parameters are bits of information that you pass to the function. The function will take this information and manipulate it or use it for calculations or for whatever it is that the function does.
In this case, alert() only takes one parameter. "Vrimples". "Vrimples" is a <b>string</b>. A string is a group of individual characters that are lumped together with quotation marks. In javascript, you can use either single quotes (') or double quotes ("). You just have to make sure that you use the same type of quote at the beginning and end of the string. The first quote tells the browser to start making a string and the ending one tells the browser to end the string. Other programming languages require you to only use single quotes or to only use double quotes. But since we're not worried about other languages at this point, we'll just forget about it. Just remember to remain consistent.
Something to think about: Supposed you wanted to print out a string with a quotation mark in it... for example: She said "Vrimples". You might try putting alert("She said "Vrimples""). This won't work. Why? Because the browser treats the second quotation mark as the ending mark and starts a new string at the third quotation mark. So what do you do?
You have to use the escape character. In javascript, the escape character is a backslash (\). It tells the browser "The next character after this escape character should be treated differently than it normally would be." So, you would end up with <b>alert("She said \"Vrimples\"")</b>. That way, the browser interprets only the first and last quotation marks as starting and ending the string. It simply prints out the quotes around Vrimples.
But back to our sample code... So you have the alert() function that takes one single string parameter (which, in our example, is the string "Vrimples"). The browser reads that and pops up an alert box with the text "Vrimples" in it.
This is all followed by a semicolon (;). The semicolon tells the browser that it's at the end of a command. It's kind of like a period (.) when you're writing in English. In javascript, the semicolon are optional. You could just have every line of code on a separate line and the browser would treat the line-breaks as semicolon. However, almost every other programming language I know requires you to put a semi colon at the end. Since it won't hurt anything, end every line with a semi colon. It will eventually become a habit that will transfer to other languages, should you decide to learn one.
That right there is the basic syntax of javascript. Just about everything builds on that. Of course, you'll need to do some stuff other than just popping up alert boxes. I would imagine that most tutorials and manuals and books would start talking about variables, loops, functions, and a whole lot of other important fundamentals. We'll get to that later.
My philosophy is 'learn how to do the hard stuff, then go back and learn the basics so you can make the hard stuff more awesome'. That's why in the next chapter, we're going to talk about Object Oriented Programming and The Document Object Model.
Having come this far, hopefully you're enjoying yourself and learning something. If I'm going to fast or throwing too much at you at once, I can pretty much guarantee it's only going to get worse. This here is where things start getting crazy, so hold on to your hat as we jump right in to the thick of it.
~Ben