Introduction to OO and the DOM
Modern programming techniques utilize what is called Object Oriented Programming. Objects are basically self contained things that contain other things. They're Objects.
Before you create an object, you have to write a class. A class is simply the piece of code that defines what an object is and what kind of stuff you can do with it. Writing classes are a bit beyond the scope of this section. We'll just go over what an object is and how to use them.
Lets use an analogy. What's an object that everyone can relate to? How about balls? Okay, so a "ball" is an object in real life, and we'll use a "ball" as our object in programming.
Objects are made up of two types of parts: Methods and Properties. Typically, you can access an object's parts using "dot notation". Object.Method() or Object.Property ... not too hard.
A method is just a function that is owned by an object. It can either be something that the object does, or it can be something that can be done to the object.
For our example: You can kick a ball. So if kick() is a method of our ball object, and you wanted to kick the ball, you'd do ball.kick(). Balls can also explode. So, if you wanted to make the ball explode, do ball.explode().
A property is something that describes the object. Or another object that the main object owns. It's important to note that properties are not functions, so you don't put () at the end.
Back to our example: Balls might have a size. So, maybe ball.size might return "big" or "small". Also, balls might have hair. ball.hair would return a hair object.
Hair is another object, so it'd be like a 'sub-object'. Hair would probably have some methods and properties of its own. You might want to pluck one of the hairs off the ball: ball.hair.pluck(); or maybe you want to find out what color the ball's hair is: ball.hair.color might return "blonde" or "black".
So, there's your crash course in object oriented programming. We'll probably go into more details later.
Now, because we're still in the "Output" chapter, you might be wondering what these objects have to do with outputting anything. That's where we get to the DOM or Document Object Model.
Web pages are like one giant object with sub-objects and methods that can be used to manipulate the page and the objects within the page.
The top level, root object is the window. The alert() function we used earlier, is actually a method of the window object. You could, if you wanted to do window.alert("vrimples"); and get the same effect. Window is an exception, however, in that you don't have to write it everytime. It's kind of assumed.
Probably the most important property of the window is the document. Document is everything that is displayed in the window. This is where most of the good stuff goes down.
Document has a method called write(). It writes stuff to the document. Example:
<html>
<head>
<title>My First Webpage</title>
<script type="text/javascript">
document.write("VRIMPLES");
</script>
</head>
<body>
Balls!
</body>
</html>
Instead of using alert() to output "VRIMPLES", we use document.write() ... Which simply writes out "VRIMPLES" when that line is parsed.
Now, that's a good way to output stuff into a web page using javaScript, but there's another way that I prefer. It's a little more involved, but you can do a lot more with it. The following code is a modified version of our original code, but knowing what you know about objects, I think you can handle it.
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
Balls!
<div id="output"></div>
<script type="text/javascript">
document.getElementById("output").innerHTML = "VRIMPLES";
</script>
</body>
</html>
Here, we're introducing a few new elements. An important thing to remember is that each element is essentially a property or sub-object of document.
The first new thing is the <div> tag. <div> creates a new block element. It stands for "division". Div's are mainly used to create sections of HTML and divide it from other parts. Block elements are separated from the rest of the rendered html, placing a new line above and below that section.
This particular div has two properties that we play with. The first is the "id" property. Here, we're defining it inside the tag itself and, thus, is set as soon as the div is rendered. id makes it much easier to access via javascript.
The <div> is followed by the javascript. Note that we've moved the javascript down, below the <div>. This is because the <div> must be created before we can access it with the javascript. The browser parses the code from top to bottom. If we kept the javascript in the header, the browser would try to access the output <div> before it is created and would return an error. Having the javascript at the end allows it to access the div, now that it's created.
Now, the new line of javascript: document.getElementById("output").innerHTML = "VRIMPLES";
What this says is "use the getElementById method to grab the output div, then set the output div's innerHTML property to "VRIMPLES".
getElementById() is a method of document. For the most part, the pre-defined methods do exactly what the name implies. getElementById() gives you access to the element with the id specified in the parameter list. That's why we needed to specify the id in the tag itself--so that we know what element we're trying to access.
In my opinion, this is the easiest way to access elements. There are other ways to do this, utilizing different functions which "walk the object tree". I like this way, though. It's nice and simple.
So, getElementById() gives you access to the element. Basically, the code is substituting "document.getElementById("output")" with "the output div". The javascript now thinks that it's doing 'outputdiv.innerHTML = "VRIMPLES";' Of course, you can't access the 'outputdiv' directly, so this is the next best way.
The output div element has its own set of methods and properties. One of its properties is innerHTML. As you've probably guessed, it contains all the HTML that is inside the element. With this property, you can 'get' and 'set' the inner HTML.
You can set the value of a property by using the '=' operator. It's important to realize that this is really an "equals" operator, it's a "set" operator. Instead of "innerHTML equals VRIMPLES", it's more accurate to say "innerHTML is VRIPMLES" or "innerHTML becomes VRIMPLES".
What we're doing is putting the value of "VRIMPLES" into the innerHTML property of the output div. We'll be using the = operator a lot from now on.
To summarize: Create an empty <div> element with an id of "output". Using the getElementById() method, grab the div with an id of "output" and cram "VRIMPLES" into its innerHTML.
Not so hard, right?
Next time: Variables.
Wisdom Archive
- August 2008 (2)
- July 2008 (2)
- June 2008 (3)
- May 2008 (3)
- April 2008 (4)
- March 2008 (7)
- February 2008 (6)
- January 2008 (1)
- December 2007 (3)
- November 2007 (9)
- October 2007 (26)
- August 2007 (1)
- June 2007 (1)
- May 2007 (1)
- March 2007 (1)
- February 2007 (2)
- December 2006 (4)
- November 2006 (4)
- October 2006 (5)
- September 2006 (2)
- August 2006 (1)
Categories
- poonheads (22)
- music (17)
- comic (16)
- site news (12)
- coding (11)
- Classic Wisdom (10)
- video (10)
- I Love Music (9)
- javascript (9)
- photo (9)
- rant (8)
- tutorial (8)
- web design (8)
- hardware (7)
- hobby (7)
- mustaches (7)
- gear (6)
- horrifying (6)
- story time (6)
- earworm (5)
- food (5)
- art (4)
- software (4)
- Coding for Complete Noobs (3)
- movie (3)
- Captain Numbskull (2)
- Everyday Wisdom (2)
- beverage (2)
- knives (2)
- review (2)
- toys (1)
Wednesday, March 26, 2008
Coding for Complete Noobs: Chapter 2 part 2
Labels:
coding,
Coding for Complete Noobs,
javascript,
web design