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

In this task, you will attach event handlers for the header links. You will also fetch some content using an AJAX request and make the modal visible.

Get Unlimited Access Now

Transcript from the "Task #1 - Introduction" Lesson

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

[00:00:03]
>> Kyle Simpson: Let's look at our app in page. I've implied a couple of things by this silly little design. One is that we've got a little carousel here that I should be able to go left and right in my carousel. You'll notice that it's not functional, we're gonna let you wire up the events to make that functional.

[00:00:22] And then you notice this big blue area over here on the right. What does that thing signify? Essentially that signifies a details pane, that if I were to click one of these items in my carousel list, it would show up a set of details about that person. So my stupid little example here is, this is like a page for a company that provides tech support and you're trying to schedule one of these individuals to come out to your office and help you with your computer.

[00:00:50] So you've got a list of the available tech support technicians that you can click on and see their details and figure out who you wanna schedule, okay. So it's just my basic little metaphor for what this app is supposed to be.
>> Kyle Simpson: [COUGH] So we're gonna wire up these events and these functionalities first just getting our feet wet with using jQuery to do a couple of basic tasks.

[00:01:16] But our much more important focus here is on how the code that I've already written, how can we improve it to organize it better? And that's really where we're gonna solidify a lot of the discussions that we were just having about what's the purpose of a module and a closure, whatever, we're gonna see why that's such a useful tool for code organization.

[00:01:36] So starting with the first task, it says open up header.js. So let's do that. In your directory you're gonna have a header.js file. Js, header.js. it's empty. That's super not helpful, right. This is where you get to write some code, right. Now what's the purpose, what are we trying to have it do, it says open up the file.

[00:02:03] Let's go back to the Read Me. What's the purpose? In this file you're going to attach event handlers for the header links. When you use a jQuery document ready event handler to make sure that your code doesn't run too early. So first step, if you haven't had much experience with jQuery, is you're gonna want, we can take out that comment, you're gonna wanna say, (document).ready.

[00:02:29] And all the code that we're gonna write right now. We're gonna put inside of that ready function. What document ready does, it is a special event that your browser fires that lets you know that the DOM has been parsed and it's ready to go. [COUGH] So if we're gonna do anything with the DOM like we are here.

[00:02:51] We wanna make sure that we're in a ready state. Now let's go back to the design. If we look at the design here. You'll notice that I got a couple of links up here. That imply or they link to pages. Like one is for registering, the ones for log in.

[00:03:09] If I click them right now, you notice I do a full page refresh, full page load to one of those other files which is not at all what I want. What I want user experience wise, is that clicking on one of the links pops up that page in a modal, okay.

[00:03:25] Now the modal already exists. You don't have to define the modal or its CSS or anything. But we need to actually invoke that model and have it load the code, load the URL from one of these links that's clicked on. Okay. So our first step is to set up a click handler.

[00:03:45] And we wanna figure out on what do I want to attach my click handler to. Well there are some links there that we wanna attach to, so you should probably open up the index.html. And get a little bit familiar with the markup that I've provided.
>> Kyle Simpson: Specifically, I'll call your attention to these links right here, which are in fact the register and login links.

[00:04:18]
>> Kyle Simpson: So what we wanna do is get those links and attach event handlers to them so that when they are clicked they fire our event handlers rather than just doing a navigate. Now I've provided these rel attributes on all of these different elements that you need to interact with.

[00:04:38] You notice I'm saying the rel = and then I have a value in there like js-register. There's lots of different schools of thought. We're on task 1, it's being asked in the chatroom what tasks, where on task 1. And we're on the first step of task 1. There's lots of different schools of thought of how from your JavaScript code should you figure out what elements in the DOM you want to interact with.

[00:05:04] A lot of people like to put an ID on their element and then look up the element by its ID. It's a very common and very powerful, practice your pattern. I'm not a big fan of that approach and the reason is that IDs are usually more used in your CSS.

[00:05:24] If I open up the CSS file that's provided with the site. Probably the part that I'm least proud of because I'm not really a CSS person at all. But you notice in my CSS, I have several places where I'm referencing elements by their ID like pound page and I've got a few down here like pound carousel.

[00:05:43] IDs are much more commonly associated with attaching styles to a specific element in your page. And the problem is not on small projects but on big projects what you'll very quickly learn in your JavaScript career, is that it's very common, for somebody to come through and re-factor the markup of your page and change out the IDs or to change the way the CSS works and to pick different ID values.

[00:06:10] And if your JavaScript is also relying on that information, then your JavaScript breaks. So it's just one more piece that you have to maintain, if you change an ID and it's used for CSS and you change an ID and it's also used for JavaScript, now you're not gonna fix them in both places.

[00:06:26] So I prefer. I don't care what happens to the CSS folks, I'm not a CSS person so they can do whatever they want. But in the JavaScript world I don't like to use ID's because I don't like to have to worry that somebody is gonna come back and make me have to change a bunch of my code.

[00:06:40]
>> Speaker 2: Just a quick [INAUDIBLE] smacks guy has the same thing to say about IDs in relationship to CSS.
>> Kyle Simpson: Good, he's a smart dude so that probably means that I'm just cribbing off of some other smart person. So, I don't like to use IDs in my JavaScript. A lot of people use IDs in JavaScript and class names only for CSS.

[00:07:03] Still it's not my particular brand. So another thing that people will do is they will attach a data attribute. That's a new HTML5 thing. It'll attach a data attribute for looking at elements. My preferred approach, this is all just a preamble to say, my preferred approach is to use the rel attribute.

[00:07:25] The reason I like this attribute is that it is valid on nearly every single element in your page. But almost all elements, it doesn't mean anything on them. So it's just sitting there valid but it has no meaning. Which means it's a nice little like hook for us to use.

[00:07:42]
>> Speaker 3: What was its purpose originally?
>> Kyle Simpson: So what rel means, is relationship. Okay? Now look at, for example, rel nofollow on an a tag. That's actually a real thing. That's not something I've made up. Rel nofollow on <a> tags. What that tells a search engine is. The relationship between the page that I'm linking to and my page is no relationship at all.

[00:08:08] Don't follow it, don't give it any search engine juice. And that's a very common thing in the SEO world is to put nofollow relationships on your links. For pages that you're linking to for information but you're not endorsing them in any way. Okay, so here rel means the relationship between my page and some other page.

[00:08:29] Another place that rel is used that you'll very commonly see is on the link tag. And here the relationship is pointing at another file, not a URL, but another file. And it's saying the relationship between that file and my file is that I want to use him as a stylesheet.

[00:08:49]
>> Kyle Simpson: But in both of those places, relationship means relationship between myself and some other entity. So I, Kyle, took that and extended it slightly, I pushed the envelope a little bit further and I said, if I wanted to define a relationship between a DOM element and my JavaScript code.

[00:09:10] Then I can use the rel attribute to give it some identifier for the relationship between element and JavaScript code. So that's why I like rel is that it defines a relationship here. In this case it gives an identifier that I can hook to, and the relationship is telling me that's something I'm only gonna use for JavaScript purposes.

[00:09:29] Not gonna use it for any other purpose other than JavaScript.
>> Kyle Simpson: Lots of different schools of thought on it. You don't have to get too wrapped up if you totally disagree with me and you like to use ideas or that's the way you end up if the company does that where you work, that's totally fine too.

[00:09:46] But I like to use rel attribute, so the code that we're working with, that'll be kinda already going with the flow.