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 "Day 1 Recap" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Justin Meyer: So for today's set up please make sure you have open in your browser exercise/DOM/test.html and breeds.html, we'll use breeds later. Test is gonna test your version of jQuery. And then open in your editor exercises/DOM/my_jquery which we'll be using right now. Hopefully you have the extend implemented, if not I will show you how to get that implemented.
[00:00:34] We implemented that right at the end of yesterday. And also open my_tabs, that's where we'll build the tabs at the end of the day. So today it's really about understanding the DOM but by building jQuery. We're going to finish up jQuery function utilities, these are just a bunch of functional helpers that jQuery adds.
[00:00:57] This is still more like JavaScript knowledge but then once we're done with that we gonna go into the day two agenda. We're gonna talk about how you find elements in the page. How you go from one element to another element. How you read element attributes and properties get and set them.
[00:01:14] How styles are computed on an element and a little bit about how layout and positioning works. And then we'll teach you pretty much everything there is to know about events. And then take all that knowledge and build a version of jQuery and finish the class building your own tabs widget with their own version of jQuery.
[00:01:37] But first I want to review this handout that we give, which kinda serves as a summary of everything we learned yesterday. [COUGH] So, I'm just gonna walk through what it means and what it looks like. So if you ever find yourself, how did that work again, you can remember it.
[00:01:59] So remember everything ,when you create a variable, it's essentially creating a kind of registry and an entry in a call object that points to whatever the value is on the right hand side of the equal side. That's for the most part what equal does. So that's why we created this val here that points to 5 and a me that points to an object and that has a name property that points to Justin.
[00:02:30] [COUGH] Then next, when you create a function, there's a few things that happen. Or sorry, not when you create a function, when you define a function. Which kind of is a synonym, actually. When you define a function, a function object is created in memory. The function always knows about its parent call object, and the function has a prototype object that's created automatically.
[00:02:57] We didn't really talk about it yesterday but [COUGH] These default prototype objects have a constructor property that points back to the function that created them. So this is what happens whenever you see a function defined like this. Again, it doesn't really know anything about what's going on in here.
[00:03:19] Next when a function is called or invoked, a new call object is created. And the first thing is its arguments are translated. So you can see here it's got arg1 points to what me points to. And val is our arg2 is going to have its own copy, this is the pass by reference and pass by value thing.
[00:03:48] And then it's also going to have its value for this called remember we learned that whenever a function is called without dot, it's always this inside that function, even though we don't show it in here. If we were to put in here this is going to be the window.
[00:04:04] That's why this points to the window. So, you can see when a function is called, it's called object has this inside of it. That's how, where that comes from. And, then the function is actually ran and any variables declared in this function are also stored in this call object.
[00:04:24] That's what happens when you run a function.
>> Justin Meyer: Finally, let's talk about when you use the new keyword. But to use the new keyword we're gonna set up a Dog constructor function, so the exact same thing is gonna happen. A function that knows about its call object that has a default prototype object.
[00:04:44] [COUGH] Then we're gonna add a speak function, so we're doing dog.prototype.speak. Now if we were being extremely hyper vigilant, we would also, this function itself has a prototype of object and it knows about its call object. But we didn't draw it in because it would get too messy and then we're going to finally do what the new operator does.
[00:05:12] If you remember from yesterday the new operator creates a new object in memory, step one. And that's gonna sign that objects proto property to the constructor function's prototype object.
>> Justin Meyer: And then it's going to actually run the function. And again whenever you call a function, a new call object is created.
[00:05:41] This is going to be set to point to the new instance created in memory and name really should be pointing and I just realized to it's own copy of Fido. The way that we're kind of phrasing it in the reality JavaScript could actually potentially point here. But for this, it should be pointing to it's own copy of Fido.
[00:06:04] And then the body of the function is gonna be run and then it's gonna set this name property to point, actually to set this name property point to a zone copy of Fido. So, that's how that gets set up. And this is why we could call with a dot operator pup.speak, because the dot operator would, first we look up pup and we get this object.
[00:06:28] And the dot operator would say, give me the speak property of this not find it follow the proto chain to this object which is the constructor function prototype, find speak and call that. Cool, everything we learned yesterday. Awesome, good job guys. Okay, so with that, I want to make sure that everybody is kind of where we ended up yesterday.
[00:07:00] So some people I know left early or left online. We implemented this extend function. Basically just to recap it, it just extend, it copies all the properties from object into target and then returns target. If you're behind or if any point, you guys today, get you fall behind, there's in this folder, there's a final folder that has the final implementation of everything that we're gonna be working on today.
[00:07:35] Try, if you're here working with me, don't cheat. It's better for you to try and struggle and then wait for me to give the answer because you'll absolutely learn better that way. Trying even if you're struggling cuz we're giving short amount of time today. If you're struggling you don't do anything, the struggle is good, it's worth it.
[00:07:53] It will help you learn better that way. So try not to cheat unless you for some good reason have fallen behind. So for those who are already behind cuz they didn't get to do this, please go to my_jquery here and copy that that extend code into the extend code in exercise/DOM/my_jquery.
[00:08:24] And then once you've done that and everybody should have it. So if they open the exercises/DOM/test.html page, they see this first test pass. So quick show of hands, is everybody about there in the room right now? Show of nodding heads looks good. Okay, so now we’ll move on to the next exercise.
[00:08:56]
>> Justin Meyer: I think he’s going to be-
>> Student 1: What is the dollar sign?
>> Justin Meyer: What is the dollar sign?
>> Student 1: Yeah.
>> Justin Meyer: The dollar sign is, that's a good question, the dollar sign is just like if I wrote A = something. The dollar sign is just another character that you can use in variable names.
[00:09:16] And variable names like you can use the letter A for a variable name. So it's kind of like I just did var it is, it's more like I did window.$ = that which is really what I'm doing up here. So it's just that
>> Student 2: [CROSSTALK] To use for jQuery, jQuery is gonna [INAUDIBLE] As their character that you can use to invoke it.
[00:09:42]
>> Justin Meyer: Yeah, but it's not, the thing that I want to communicate is that it's not special in any way. It's not like it has some special powers or special ability besides what jQuery either gives it or we're going to give it.
>> Justin Meyer: Good question, okay, so back to the slide.
[00:10:09]
>> Student 2: There's a question in the chat, what is a selector?
>> Justin Meyer: Selector is just the argument. To be clear we haven't implemented the dollar function yet and we haven't implemented anything except for a dollar extend. We'll come back to the dollar function and implement it after we implement all of these things here.
[00:10:32] But we needed like a dollar object so we could add things to it for this part of the training,