Introduction to Dynamic Web Pages
This is the first in a series of videos designed to show how to make web pages dynamic by using JavaScript and jQuery. To get the most out of these videos, you need to have a basic knowledge of HTML and CSS. If you don't have an understanding of both HTML and CSS, then I would recommend watching my videos on these topics before watching this video series.
JavaScript is a scripting language that can manipulate web pages after they are downloaded to the browser. Here's an example: here we have three headings. If I click on one of the headings, then text below it will be displayed. And I can click on any of these headings to display the text below it. And if I click again, it'll then hide the text. And this is just one of the many things that can be accomplished using JavaScript.
Why Use the jQuery Library?
JavaScript can be very useful, but there are a couple of drawbacks to using it. The first is that JavaScript is not supported equally by all browsers, especially older browsers. Different browsers will sometimes have different ways of doing the same thing.
The second drawback is that some of the impressive things that can be done with JavaScript require complicated programming. A solution to both of these drawbacks is to include the use of jQuery. jQuery is a JavaScript library of code that has already been written for you by some talented programmers. It takes into account the differences between different browsers so that you don't have to, and it simplifies many of the common things that you use JavaScript for.
Focus of the Tutorial Series
So you don't need to know everything about the JavaScript language to do impressive things, because the jQuery programmers have already done much of the work for you. You also don't need to know everything about jQuery either. By learning the fundamentals of jQuery you will be able to achieve some very nice effects.
Therefore this video series will not be a complete tutorial for the JavaScript language, nor will it be a complete tutorial for jQuery. Instead, the intent of this series is to give you the highlights so that you can quickly start doing webpage manipulations and effects.
Setting Up Your Development Environment
I'll be focusing primarily on using the jQuery Library since it's so useful, but I'll also be covering the JavaScript language as needed.
So what do you need to start using JavaScript? You just need a browser, and I'll be using Firefox, and you need a text editor. I'm going to be using notepad++. This is a popular text editor that's very nice to use. I found my copy at notepad-plus-plus.org.
The first thing to know about JavaScript is that the browser must support it. So there may be some browsers that don't support it, like maybe an old web browser. Modern browsers typically have very good support for JavaScript. But browsers typically give the user a way to disable JavaScript, so you can't necessarily assume that your user will have it enabled. So what I like to do is to design my website so that it doesn't need JavaScript. So then I just add JavaScript to it to give it extra functionality. So if a user is using a browser that has JavaScript disabled, the site will still work for them. But if the user has JavaScript enabled, then they'll get extra functionality.
Creating a Basic jQuery Template
So let's start by making a basic JavaScript template that we can reuse. And we're going to start with a JavaScript function that comes from the jQuery library, and this starts with a dollar sign followed by parenthesis. And then in the parentheses, we put the word document, and then follow this with a dot and type ready, and then put a pair of parentheses, and then a semicolon. And a semicolon is used to specify that you have reached the end of a statement, so each complete statement in JavaScript needs to end with this semicolon.
And then inside the parentheses right here, type the word function followed by a pair of parentheses, and then a space, and then put a pair of curly braces. And all of the code that we're going to be writing is going to go in between these two curly braces. So you can put your cursor right in the middle of these two and then press the Enter key a couple of times to make yourself room to work. And then all of our code that we're going to be using is going to go right in the middle here.
So this is a template that we can use for just about all of our JavaScript programming. And this is a jQuery function that tells our code when to run. So all of the code that we put in the center here will run as soon as our HTML page is done loading. If we didn't use this function here, our JavaScript code could start running before our HTML page completely loads, and then it wouldn't work properly. So by using this function, we can ensure that our HTML code has completely loaded before we start running the JavaScript code.
Implementing a Simple Accordion Effect
So now I'm going to go ahead and paste in some code that we're going to use for this example. And you don't need to understand what all of this does right now, but hopefully by the end of this video series this will all make sense.
Now one important thing to learn about JavaScript is that the case of the text matters. So for instance, this is a capital T right here. If I were to make this a small t, then this would not work. So pay particular attention to the capitalization of all of the words that we use.
And as just a brief description of what we're doing right here, this first statement that you see here hides all of the paragraph tags. And remember that since this is placed inside of this ready function up here, this will be run as soon as the HTML page is finished loading. And the next function here is a jQuery function that tells the browser to execute this code as soon as anybody clicks on an H1 tag. And as soon as a user does click on an H1 tag, then this line of code right here is run. And this line tells the browser to toggle the visibility of the tag that comes after the heading tag. And again, by the end of this series, all of this will make a lot more sense.
Saving and Linking Your JavaScript Files
So now let's go ahead and save this file. So just go to the file menu and click save as and let's name it mycode.js. And it's standard practice to end your JavaScript programs with .js. And I'm going to be putting my Javascript file in the same directory where my HTML code is located.
And now I'll show you how to include this into your HTML file. And this is the HTML file that we're going to be using. It's a simple HTML file with just three heading tags, and then each of the heading tags are followed by a P tag. And right above the closing body tag is where I'm going to be adding the script tags that we will use to include our JavaScript programs.
And there are two JavaScript programs that we need to add. The first one is the library for jQuery. And so to add this library we use the script tag, and then we give it a type of text/javascript. And for the source you have a couple of options. The option that you see here uses a CDN hosted website, so you can just type http://code.jquery.com/ followed by the version of jQuery that you are going to be using. As an alternate to this, you can use your own local copy of jQuery as the source, and I'll be showing you how to do that in just a little bit. And then at the end here, don't forget to include the closing script tag.
And then next, we need to add another script tag to include the file that we just made. So the second script tag is just like the first: give it a type of text/javascript, and for the source, since I put the file in the same directory as my HTML code, I just need to type the name of the file which was mycode.js. And then again I need to add the closing script tag.
And one final note on using these script tags: the script tag for the jQuery Library must be placed before the script tag used for our code. So make sure that the order of the script tags that you use matches what you see here.
Testing the Live Example in a Browser
So now we can just run this program. And if you're using the notepad++ editor, you can just go up to the Run tab and then you can just click on the browser that you want to open it up in. And I'm going to use Firefox. And so here's our page that just loaded up. And so now if I click on one of these headings it should make the text below it show up, and then if I click again it should hide it. And so this should work with any of the headings that you click on.
Using a Local Copy of jQuery
Now, you may want to download a copy of the jQuery library. To do that you can go to jquery.com. And while you're at the website, check out the section on browser compatibility listed under documentation. In that section you can see which web browsers are supported. When you're ready to download the jQuery Library, you will find that the code is typically available in two formats. The development format is uncompressed and so it's easy to read, but it's larger. The production format is much smaller, and so that's the format that we'll be using.
I downloaded version 1.8.0 and I named the file... and now my source is just jQuery-1.8.0.min.js. And so this will now use the local copy of jQuery that I downloaded.
So now let's go back to the JavaScript code that we wrote and I want to mention a little bit about commenting your code. JavaScript allows a method to add comments to your code by just putting two forward slashes in a row, and then anything that you put after this will be treated as a comment, so that it will have no effect on the function of the program. So I could type, "hide the P tags," and this would be a comment telling myself what this next statement is doing.
But these comment tags are useful for something else as well. If I were to take this statement right here that hides these P tags and put a comment in front of it, then this line of code will no longer be run. And this is helpful if I'm trying to test and debug my code. So now if I were to remove these two forward slashes, now this code will be executed when I run this Javascript file.
And JavaScript allows another method of commenting multiple lines at once. If you use a forward slash followed by an asterisk, this will comment all the lines up until it finds an asterisk followed by a forward slash. And so now everything in between this and this is considered a comment and this part of the code will not be run. And of course, this could also be a multi-line comment that you're adding. And then again by deleting these, this will make this code so it will be run the next time that you run the program.
Conclusion
Well that concludes this video, and you can find all of the sample code that was used in this video at littlewebhut.com. Well thanks for watching, please subscribe and leave a comment.
