At the core of writing JavaScript you'll find functions.
Functions are reusable blocks of code that can perform tasks when called upon.
They help us write efficient applications by grouping commonly performed tasks into
a single block of code which can then be executed if it's needed.
So we're going to write the basics of our tabbed panel functions down here in
the script tag.
To do that, open up the next.htm file, found in 08_03.
Although, we are kind of just picking up right where we left off, so
if you wanted to keep the other one open that's fine too.
So, underneath the comment that says tabbed panels, I'm going to tab over and
I'm going to write our first function by typing window, this is the window object,
.onload equals function.
Then I'm going to open and close parentheses, open a curly brace just like
we did with CSS, and I'm going to hit Return twice and close it.
Let's talk about what this is.
So, window is referencing an object, and
the object is the document window itself, meaning the page you're on.
Onload is referencing an event.
So when you're finished loading.
So this is just another way of saying,
hey that when the page has finished loading I want to perform a function.
I want to execute some code.
So essentially now everything in these curly braces is going to execute.
It's just some syntax basically.
Like the open and close parenthesis that may seem confusing to you.
But the curly braces, if you did our chapter on CSS,
you're probably used to that.
They're used to basically group code together that's going to
execute when this function is run.
This function's going to run when the page loads.
So this is also what we call an anonymous function,
meaning it doesn't really have a name, it just performs and does something for us.
Okay now, inside of this, I'm just going to do a couple of
comments to remind me of what has to happen inside this function.
I'm going to type in, set initial panel state.
And then on a line below that, I'm going to type in, listen for
clicks on tabs.
Now I like doing this when I'm in the planning stages of my scripting.
So, I'll get down and I kind of sketch what I want the application or
the little widget or whatever is that I'm working on to do,
and then I'll write a little comments to myself like this.
Like hey, I need to set the initial panel state so that one is visible and
two are hidden.
And then I need to register event listeners for the tabs, so
that when they're clicked on I can respond to them.
So those are the two things that I really need this particular function to
do for me.
All right, so I'll also need one more function as well.
So I'm going to go down on the next line, and I'm going to type in function and
then space and then displayPanel, and notice the P is capitalized there.
This is called CamelCase naming.
And lower case first word, upper case second word, they're all one big thing.
The next thing I'm going to do is open and close my parentheses here.
So this function name is not something that already exists inside JavaScript.
This is something that I came up with.
I invented this.
And JavaScript allows up to do that.
Essentially, I'm creating a function, I'm giving it a name.
Whatever I want to name it.
In this case I'm naming it displayPanel.
The names of functions typically describe what they do.
And then inside this I'm going to store code that does just that,
that displays the panel when something has been clicked on.
So I can call this any time I want to by calling this particular name.
I'm going to open up a curly brace here.
I'm going to hit Return twice.
Close my curly braces.
So syntactically it looks similar but
this is how we create what we all a named function.
And I gave it the name that I wanted for it, which was displayPanel.
Inside of this I'm going to go ahead and do a comment here.
I'm going to say respond to tab clicks, so I'm describing the functionality
that I want inside of it, and on the next line I'm going to do one more comment.
I'm going to type in change panel display and activate tabs.
All right, I'll save that.
So right now it's not really going to do anything for us but
we have sort of what I like to call the skeletons of the functions that
are going to complete our tabbed panel for it.
One of them will fire when our document loads, and
another function, we will fire when we call it.