I spend a good deal of time in this course talking about document outlines and
the importance of generating a logical clear structure.
In this exercise, we're going to see how important that can be as we
explore using the DOM or Document Object Model.
The DOM is a standardized way of referencing page elements in
HTML documents.
The elements are described as a tree with parent nodes at the top.
And child nodes branching off in a sequence.
So for this document, for
example, the body element would be seen at the top of the tree.
And then this header would be an immediate child node off of that.
The dom not only describes this tree, but also gives us methods for
traversing and accessing these elements programmatically.
All right to explore this concept,
I'm going to be working in the next.htm found on the 08_04 directory.
And what I want to do is scroll down til I
find the functions that we created in the last exercise.
Now the first thing I want to do is actually going to be up top above my on
load function.
And what I'm going to do is rather than make you guys watch me type stuff out.
I'm going to paste, code in and then explain it to you.
So when it gets to the point to where you want to add this,
I'm going to paste the code in at that point, pause the video.
Type the code in, and then play the video and
I'll kind of explain what it's doing and why we're adding it.
So here comes the first bit of code.
So it's another comment just above that.
And I like adding just a little bit of space here.
So I'm going to clean this up a little bit.
There we go.
So go ahead and pause the video.
Type it in like you see here and I'll explain what these do for you.
Okay so we have a comment up top that says declare globals to hold all the links and
all the panel elements.
So what these are is global variables.
The var keyword right here var.
Creates a new variable and then I name those variables whatever I want,
tab lengths and tab panels in this case.
So essentially I'm creating variables to hold all of my tabs and
another variable to hold all of my panels.
Because I'll need to control them through scripting so
I need some way of referencing those items.
Now what is a variable, well a variable is anything I want it to be.
I've always variables in my courses as being a pickle bucket.
When I was a kid I had this stream behind my house.
And I would go down there and I had this plastic pickle bucket.
This is not a joke, I really did and
whatever I found in the stream that day would go in the pickle bucket.
If it was an exciting day it might be a frog, it might be a crayfish.
But if it was a boring day, it would be a rock or some leafs.
But what was interesting about this,
is that means that I could put whatever I wanted to inside that pickle bucket.
It would store whatever information, or objects that I wanted inside of it.
The variables in Java script work the same way.
The tab links variable, is going to contain all of our tabs.
The tab panels variable, is going to contain all of our variables.
And that's going to allow us to reference these items pro grammatically using
the document object model.
So now we need to start putting these variables to use.
And we're going to use the document object model to populate them.
So I'm going to go inside my onLoad function, and get rid of those comments.
Because we are going to start doing what those comments asked us to do.
And I'm going to paste in some more code.
Okay, so once you've typed that in, let's talk about what this is doing.
So the first comment sort of gives us a little idea.
When the page loads, grab the Li elements.
Now those list item elements are the actual tabs themselves.
If you remember, if I scroll up and look at the actual structure of our tabs.
You can see that each of the tabs is inside of a list item element.
So we are creating a variable that's storing all of those in that.
Now, that's referred to as an array.
Because we're storing multiple objects inside a single variable.
It's not that important but it's interesting for
you to hear the terminology.
So we're creating an array.
And storing those list items inside of that.
So what we're doing is we're saying tab links equals.
Equals is what we call an assignment operator.
We're assigning a value.
So we're taking the variable that we created up here and
then we're saying, hey.
That variable that we created, let’s put something in the pickle bucket.
So were saying equals and then we have our document object model being used.
So we’re saying Document, that’s the current open document, and
then we have .getElementById, this is what’s called dot notation.
And this is a way of scripting that basically lets us reference objects and
use what we call methods to manipulate those objects.
So, this object is the document itself, and
then we're using a method called get element by id.
Now this is built, or baked into JavaScript, okay.
So, it's part of the document object model.
We're saying get element by id tabs.
Now remember we have all those ids up here.
Let me show you what this is referencing.
We have a div with an id of tabs.
So essentially we're referencing this element, okay?
Now below that we have another dot notation and
now we're saying, get elements plural by tag name.
List item.
So, essentially, if I were to, say this in pure English.
I would say, hey, go in the open document, find an element that has an ID of tabs.
Inside that, retrieve any elements that have a tag name of list item, or
give me all the list items inside of that.
So that's exactly what this is doing.
And it's storing them in the variable tablinks.
Alright now it's time for my next section of code.
Okay so this is doing something very similar.
We can see that we
have a comment that says now get all the tab panel container divs.
Okay, tab panels.
You can see here once again we're going inside the document,
we're finding an element by ID, containers.
And that's the div tag that contains all of them.
As a matter of fact, if I scroll up, into my tab panels,
you can see there's the div with an ID of containers.
So I'm saying go inside of that, and then once I do that.
I'm saying get all of the elements by tag name.
Then it says div.
Now, unfortunate breakage here, let me shrink my font size down a little bit,
there we go.
So it's document getElementsById containers getElementsByTagName div.
So go inside containers, find all the divs and I'm storing these inside tabPanels.
So again, tab links has all of the lis, list items, the individual tabs
tab panels as the individual divs that are the panels themselves.
So, so far we've created two global variables.
And then used the document object model to store all of our tab widget elements that
we'll need to control through Java Script.
So next, we're going to need to activate our initial tab.
And then react when that tab is clicked.