JavaScript: From Fundamentals to Functional JS Objects Exercise

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

[00:00:04]
>> Bianca Gandolfo: So now it's exercise time. Normally, at how we handle exercises is we would go to the pairing machines and do that. But since we can't do that, we're going to have to mix it up. If you're here together, I recommend pairing. I think it's really helpful and it makes things fun.

[00:00:20] You learn how to communicate your code, and actually, you can clarify in your mind your understanding to take these intuitive understandings of how JavaScript works and apply these rules to them. And really make that solid, so if you can, pair up. And I'm just gonna walk you through a little bit how to get started with the exercises.

[00:00:45] Again, if you just type in the bit.ly, so the bit.ly is bit.ly/js102-exercises. And you can also find that on the first slide and I think Mark sent out an email prior. And so that will bring you to this, this get hub repo. And what you can do then is you can download, hit this button here, download zip, oops, so you download the zip here.

[00:01:17] Let's see. I'll just save it for now. And so what we're gonna be doing today is we're gonna be doing this eFarmony Project. So eFarmony is this hot new dating app for animals.
>> Speaker 2: [LAUGH]
>> Bianca Gandolfo: Looking for funding, so if there's any VC's out there, it's a great idea, and I have hundreds of engineers across the world working on it right now.

[00:01:44] Jokes aside, we're going to clone down the repo and we're going to start here. In the before you get started section, it's gonna tell you how to navigate the files and where to go. We just downloaded the zip, and now we're gonna explore the file. So if we show this in our finder, we had to unzip it, of course.

[00:02:12] And then we're gonna go in here. And so the first thing we can do is we're gonna open our index.html file. And we'll notice that this page is intentionally left blank. And basically what this is for, this html page is for, is just to be able to play in your console with the code that you write and your script.js file.

[00:02:37] So if we go here to our script.js file and were gonna open it with our text editor, whatever you choose. And we'll see, and comments here, were gonna use this file, its actually not just part one, it's gonna be, we're just gonna do all of our code in this file.

[00:02:55] And so if we just console.log, animal here. You're gonna be typing animal a lot, and farm a lot today. And we refresh here, we see we have a console.log animal. So that's one way, that's one work flow. Again, you type in the text editor. You save it. Saving is important.

[00:03:16] And then you refresh the page, and that's when you can access the changes in your code. For example, we can say var myAnimal = {} and we can give it some properties. Maybe it's a sheep so it says baaahhhh. Again, I've saved it so for me Cmd+S is save and then I refresh the page, Cmd+R.

[00:03:41] And then I can type in myAnimal. So notice myAnimal I can then access in my developer tools. So I'm using Chrome, you can also use Firefox, if that's what you prefer. And to open your developer tools, you go to View, Developer, and then JavaScript Console. And if you get lost in it, you can always on this first, there's a bunch of tabs and it's easy to get lost in the tabs.

[00:04:11] You can always just click here and click back to console. And so that's the workflow of how you're going to be doing this project. If you're online you could try jsbin. It might be more helpful if you wanna share your code in the chatroom. So if you put it in jsbin you would just need to put your JavaScript here and then you have your console.

[00:04:33] So if you open your JS Bin, this way. So where you have the JavaScript tab on one side and the Console on the other, and then you can do the same thing. And then you would hit Run and that would print out to your console. And so, that's sort of the workflow of how you're gonna be doing this project.

[00:04:54] So, throughout the day, what we're gonna be doing is we're gonna be implementing two parts of this app. We're gonna be making the data structures and we're gonna be adding some functionality to it. There's no UI, this is not like a CSS class. It's only gonna be two parts of your application.

[00:05:14] Again, the data structures and the functionality, like very crude, basic functionality. And if you think about it, apps are really just three parts. You have your data, you have your view, like the UI, and then you have the functionality behind it. So you're kind of making two-thirds of an app, anyway.

[00:05:33] So even though it might not be flashy, you still, that's two-thirds done. And if anyone makes a UI for it, please send it to me. That'd be really cool to see that, cool. So we explored the files. Some other fun things is, I do give free tutoring to people who correct.

[00:05:59] Whoever sends the most corrections to either my slides, my exercises, clarifies any unclear directions or gives me anything like that. I do give free tutoring. For more directions on free tutoring you can see this tab and note on free tutoring. And yeah, and so what we're gonna do is we're just gonna do the objects one.

[00:06:21] You're gonna open that here. And this is just a readme file, so you don't have to download it or anything. You can just go through the projects. And I'll give you about 15 or 20 minutes or so to go through this. And I'll just walk around.