Much like CSS, JavaScript is more efficient when externalized and
referenced as a resource.
This will help reduce the amount of code used in your HTML files and
make it a little bit easier to maintain and reuse your scripts.
So to show you how this works I've opened up the next.htm from the 08_07 directory
and this really does kind of pick up from where we left off.
Our script tag is down here at the bottom of the page.
It has all of our fully functioning code in it.
And what if I had other tabs on other pages I wanted to use?
I would have to copy and paste this into the page and
again if I modified the function.
I'd have to modify it a bunch of times, so, that's not really the most
efficient way to do this, not like the way we did with our CSS.
So, what I'm going to do, is go up to file, and choose new.
I'm going to save this file in the 08_07 folder,
what I'm going to do is create a brand new folder inside of that.
And this one is going to be _scripts.
So the same way for my CSS, I did _css, for
my scripting resources, I'll create a folder called _scripts.
And inside that, I'm going to call this tabs.js, because these are my tabs.
The same way that CSS has a .css extension,
JavaScript has a .js extension and this is one of the things I love.
This is one of those sort of lightbulb moments for me.
The HTML files, CSS files and JavaScript files, they're all text files.
They just have different extensions in them.
All right.
So I'm going to hit Save.
And then what I'm going to do is I'm going to switch over to my next file and
everything inside these script tags, so not the script tags themselves, but
everything inside of them,
I'm going to highlight those, and I'm just going to go ahead and copy them.
Then I'm going to go back into the tabs file that I just created, and
I'm just going to paste them, and that's it.
I'm just moving the code from one to another.
Now I want to make sure that I get everything.
And by the way, I really should have mentioned this in the previous movie,
but if you were trying to get this to work, and for whatever reason you couldn't
get your panels to work, JavaScript is really picky about its syntax.
If you have one letter off,
if you have one dot out of place, if you have one curly brace out of place.
Then none of it's going to work so
you really need to go back through your code with a fine tooth comb,
compare it to the finish files and you should be able to find your errors.
I'm going to save this and then go back in to the next .htm and now I can go
ahead and delete that script tag and I'm going to remove the script tag and
all of it's contents, everything about it, all right, I'll save this.
And when I go up to my browser, I can see that my tabbed panels no longer work, and
that's because we've removed the code for them.
All right.
Now, where you locate your script tags is really important.
Basically, whenever a browser encounters a script tag,
it's going to stop rendering the page, execute the code, and
then resume rendering the page once it's finished running the scripts.
Because of that, from a performance standpoint.
A lot of developers like to put their scripts at the bottom of the page.
That's where we had ours earlier.
Well, just for the sake of being complete in terms of putting our resources
together, I'm going to instead place this script tag up in the head of the document.
It doesn't really matter where you place a script of this size, because it's so
small nobody'll notice the difference.
But, this is one of the things that when you learn JavaScript,
you need to learn these types of practices so
that your pages can have the best performance possible.
So, what I'm going to do is down below the link tag,
that's bringing in my CSS, I'm going to open up a script tag.
And in this script tag, I'm just going to use the source attribute.
And for the source attribute,
I'm going to point to the _scripts/tabs.js, src=_scripts/tabs.js.
So it doesn't use href like link does, it uses source.
All right.
Now I need to close that enduring mysteries.
I also need to have a closing script tag.
So in addition to having opening script tag.
I have to have this closing script tag,
even if there's no JavaScript in the middle of it.
That's very different from the link tag and
it's just one of those HTML syntax things that you have to know.
All right.
So now we're telling the browser, hey,
we've got some JavaScript that needs to run and you can find it in this file.
So now I'll save this file, go back into my browser, reload the page.
And as I do that, go back into the browser and
reload my page, and as I do that, I can see that
now my tab's panels are functioning exactly the way that I wanted to.
Awesome.
So hey, you know, a lot like the chapter on CSS, there's just no
way to efficiently or effectively teach JavaScript in one chapter.
So, if some of the syntax that I went through, if it seemed like I
went through it kind of fast, if you didn't grasp it all or understand what
everything is doing, do not worry, panic, or be upset about that at all.
That's perfectly understandable, that means you're normal.
My goal for this chapter is simply to introduce you to JavaScript and
some of its capabilities, and go over enough syntax so that you're going to be
comfortable with continuing to learn JavaScript on your own.
In fact, I highly recommend going through Simon Allardice's excellent
JavaScript Essential Training course shortly after completing this one.