This course contains good reference material, but does not reflect our current quality standards.

Check out a free preview of the full Organizing JavaScript Functionality course:
The "Task #3 - app.js" Lesson is part of the full, Organizing JavaScript Functionality course featured in this preview video. Here's what you'd learn in this lesson:

The final step of the third task is to centralize the jQuery document.ready events. Currently each module has a ready event. Instead, the three events can be combined into a single app.js file.

Get Unlimited Access Now

Transcript from the "Task #3 - app.js" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Kyle Simpson: Let's come back to our read me. Check and see.
>> Kyle Simpson: So item number 4 suggested that we do exactly what I just talked you through. There's one last item. This hopefully, is a much easier thing to get your brain around. But there's one last item to Task 3, it says Refactor so there's only one jQuery document ready event, and it should call the init method of each of the three modules.

[00:00:32] Suggests here that we wanna add a new file. So I'm gonna create a new file. I'm gonna call it for my purposes. app.js. It should have a document ready event in it.
>> Kyle Simpson: Now inside of this code, I want to call all 3 of the initialization methods for all of my modules.

[00:00:58] So I have Header.init and I do need the parenthesis here cuz I'm calling the functions. What's the next one I need?
>> Student: Carousel.
>> Kyle Simpson: Carousel.init
>> Student: And details.
>> Kyle Simpson: And Details.init.
>> Kyle Simpson: That wasn't that hard, right? The last step then is to go back to those other modules, and take out that superfluous (document).ready that was hanging out at the bottom of each of those files.

[00:01:34]
>> Kyle Simpson: Does everybody see how I did that?
>> Kyle Simpson: One last step, I need to actually load app.js, so I need to add a script tag in here. Now, you'll notice that small little detail, this one needs to run. We need to be sure that this one runs after these things have been loaded.

[00:02:00] So, just to be really, really sure that that's gonna happen, it's not technically a big deal, but just to be really, really sure, I'm gonna put it at the end of my script tags less so. App.js.
>> Kyle Simpson: Let's double check our work, make sure that Task 3 is still come completely functioning.

[00:02:29] I did break something, what did I break?
>> Student: You save something.
>> Kyle Simpson: Did I save it to the wrong location? I probably saved it to the wrong location. Save As, yep, I suppose save it in the JS folder. [LAUGH] Okay, so I made the mistake, saved it in the wrong location.

[00:02:50] Now I've saved it to the correct location. Hopefully, Yup it uploads. Now this should work. The question was does that order ever matter? Sometimes. Sometimes the order of things that get loaded matters, because JavaScript will run those programs in the order that they are listed.