In HTML if we want to add styling to our documents, we can use the style element.
Likewise, if we want to add scripting to our pages,
we can use the aptly named script element.
And that is where we're going to start our tabbed panels.
So I've opened up the next.htm from the 08 underscore 02 directory.
Now before we start adding any scripting to the page,
I want to talk about the structure of the file.
If I were to preview the file in the browser right now and
scroll down, we have this little section over here on the right-hand side now.
It says, Core Languages and it has three examples.
HTML, CSS and JavaScript.
So these are going to be our tabbed panels.
Right now, of course, we don't have any scripting written.
So we're seeing them the same way somebody would see them,
they didn't have JavaScript enabled.
And the functionality of them is actually pretty good.
If you click on CSS tab for example, it goes down to CSS.
You click on JavaScript, it jumps down to JavaScript.
So it still kind of, sort of works and you can see everything.
And I really like making sure that anything that I
build that's going to have scripting involved in it,
at least functions at a very minimal level in case the JavaScript is disabled.
I don't want content hidden to the point to where somebody can't access it.
So it's very important for
me that everybody can access my content, not just people with JavaScript enabled.
Okay.
The next thing I want to do before we start scripting is go over
the structure of those elements.
Because it's really important that we understand how this sort of
works hand in hand.
The way that you structure elements in your HTML.
Matters greatly with the type of scripting that's required to control them.
So if I scroll down a little bit and get into my main article, I can see
that right here on line 28, I have another aside with a role of complementary.
Semantically, this is related to the content on the page, so it fits.
And I have a class of languages and
that's going to allow me to control it through CSS.
Inside that, I have a heading three of Core Languages.
So that is the title of the section, this is side that I'm in.
And there after, I'm using divs.
Now remember, earlier in the course, we talked about how divs allow us
to group content together without having to have an explicit semantic meaning.
So we have a lot of tabs going on here and
divs are extremely useful for grouping this type of content.
The first thing we have is a div that's with an id of tabContainer.
Now the use of id's here is really important,
because JavaScript allows us to do a lot of different things.
One of the things that allows us to do is go through our document and
retrieve elements or reference elements based on certain attributes.
One of the attributes that it can reference is the id attribute.
So the id attribute is unique.
Meaning, I can only use it once per page.
So if I give an id of tabContainer, I know in scripting that,
that is the only element that I could be referring to.
So, this has a div id of tabContainer and
that surrounds both the tabs and then the panels themselves.
So the tabs are in another div with the id of tabs.
I have three of those, tabs 1, 2 and 3.
And notice that they are linking down to the ids of the panels below them.
And then I just have the text that displays HTML, CSS and JavaScript.
Now below the tabs, I have another div with an id of containers.
This wraps all of the actual panels themselves, panels 1, 2 and 3.
Inside of that, I have the individual panels.
Notice that they have the id of tabPanel1.
We have tabPanel2 and we have tabPanel3.
And each of these divs surrounds an h4 followed by paragraphs that have
descriptive text.
That is the entire structure of my tabbed panels.
I try to make elements like this,
as small as possible in terms of structural elements.
I don't like over using a lot of div tags.
Although, I certainly have a good many here.
They all serve a specific purpose.
So I try to make this as light weight as possible.
Okay.
Lets scroll all the way down to the bottom of our page.
The same way that when we were wanting to do some styling, we used a style tag.
When we want to do some scripting, we used a script tag.
Now, where you place the script tag is pretty important.
We're going to place ours at the bottom of the page.
So go down below the footer, but
in front of the closing body tag and we're going to open up a new script tag.
Now, script tags can have a couple of different attributes.
The only one we're going to use right now is type and
the type that we're going to give it is text forward slash javascript.
That lets the user agent know what type of script is being added.
Now once you open up a script tag, you also need a closing script tag.
Essentially, we need to have our opening script tag with attributed type
equals text javascript and then a closing script tag.
Now with HTML5, we don't necessarily need to specify that type.
The user agent can parse the script and pretty much assumes it's java script.
But I still think it's a good idea every now and
then, especially when I'm not referencing an external script to let it
know what type of script is inside the script tag.
All right.
Inside the script tag, I'm going to do a comment.
JavaScript comments are just two forward slashes.
So, forward slash, forward slash.
And inside that, I'm going to type in tabbed panels.
And that's just a note to myself that hey,
my tabbed panel scripts are going to start here.
We haven't done a whole lot of commenting in our HTML or
our CSS, but commenting in JavaScript is really important.
It's actually quite common for you to come back, six months to a year later.
And forget why you wrote a function to do a certain thing.
It's also very common for you to have to work on somebody else's scripts or for
somebody to work of yours.
These comments can help people know a particular function is doing or
what a line of code is doing.
And it makes maintaining or working on somebody else's scripts a lot easier.
All right.
I'm going to go ahead and save that.
And now that we've opened up the script tag,
we can begin the process of writing our tabbed panel scripts.
And we're going to start that in the next exercise