This course is out of date and does not reflect Frontend Masters current standards. We now recommend you take the JavaScript: The Hard Parts course.
Transcript from the "Exercise 12: Creating the $ function" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Justin Meyer: So the first thing we're gonna do now is we're gonna start implementing the $ function, and the $ function we're gonna treat as a constructor function for now. So what we wanna be able to write is new $ and then we pass it CSS selector. It get all elements in the page that match that CSS selector and it's going to add those elements to the instance that was just created in such a way that that instance looks like an array like object.
[00:00:38] And there's a trick to making this happen, that I will kind of walk people through, will probably give like 15 minutes a little bit longer because I want people to finish this one on their own. And let me give a little context to it, so this hint, is the kinda fast sneaky way of, well let me describe this problem a little bit better.
[00:01:12] Okay, so let's say I had an array of items.
>> Justin Meyer: We've all seen on array of items and that could look like you know 1, 2. Let me not use those let me do foo, bar, zed. Okay, so that's that's an array of items. But like we've seen things can be already like that just means that they have a length and they have a properties that match that they have like a 0, 1, 2, and 3 properties.
[00:01:52] So I could have something that's array like that equals 0 is foo, 1 is bar, 2 is zed, and then it has a length property of 3. So when you use jQuery it's actually making an instance of something. But it has properties on it that make it array-like.
[00:02:25] Part of it's magic is that it acts like an array but it has all of these methods that arrays don't have on it and. Probably this next exercise and one more of the two trickiest exercises today, is how do you convert the instance in here which would be this.
[00:02:51] How do you make it given some elements maybe given some elements like this make it look like this. Now there's a trick to doing it which is on the slide which is down here which I'll come back to. But you can solve this anyway that you can kind of rationally do it and maybe the easiest way to understand it first is just simply going through the array and copying the properties to this so making sure that this has a 0 property, a 1 property, a 2 property, and a length.
[00:03:25] If you get from the selector three elements. So think of it this way the easiest way to solve that I think conceptually is given a selector use document query selector all to go get your elements, you get an array of elements back. Do a loop to go through each one of those elements and copy, add properties to this that are 0, 1, 2, as many elements as you have, and a length property.
[00:03:55] That's what you need to do to make your instances of $ behave just like jQuery will behave, any questions on that? I know it's confusing, but you'll see the answer and hopefully, it'll make sense. So we'll do-
>> Speaker 2: Right now, like your verbalization of what this should do.
[00:04:16] Just like comment it out for us, like you mentioned.
>> Justin Meyer: Do you want me to write it out.
>> Speaker 2: Right.
>> Justin Meyer: Sure I'll write it out. Get elements from the page using selector, d.qsa. [LAUGH] Then go through
>> Speaker 3: You should probably state that that's abbreviated.
>> Justin Meyer: It'll be the hint that I put up, but sure I can, or I'll-
[00:04:57]
>> Speaker 3: I just meant you should verbalize that.
>> Justin Meyer: Yeah.
>> Justin Meyer: Using document.querySelectorAll, and then once you have all your elements. Go through them and copy to this. I go through each element and copy to this as a numeric property.
>> Justin Meyer: And then also set length property.
>> Justin Meyer: To the number of elements in the array.
[00:05:54]
>> Justin Meyer: And what will be showing at the end of this with that hint is at the very bottom. A hint at the bottom is a way to essentially do these steps with very little code, but all explain that after I explain a longer way of doing it which is what you guys should try it first I think.
[00:06:19] Any other questions?
>> Justin Meyer: Any on this guy?
>> Justin Meyer: Okay, so never mind. So one question that some people might be talking about online is jQuery doesn't you don't the pass new before you JQuery right? So if you saw we're making something where you have to do.
>> Justin Meyer: Ready to go.
[00:07:08] We're making some the where you have to do new $. We're going to remove you having to do new it's just easier to get everything started by requiring people to call the new at first. Or, we'll make it work just like jQuery in a moment.
>> Justin Meyer: So, I think I'll leave this up, then.
[00:07:35] The verbalization. Yeah, cause you guys can see the tests if you need to. So, I'll leave this up.