Introduction

JavaScript. Let's go. Good morning. Good afternoon. Good evening. No matter where you're coming from. Hope you all are doing well. Tonight. Bangers only folks. Bangers only folks. We got some JavaScript to get into. Hey, what's going on everybody? Get on in here. Get on in here. Hope you all are doing well.

Hope you're fired up. Hope you're ready to get into our first programming language. We've done markup languages. Now it's time for our programming language. Hey, see a lot of readies to see a lot of readies. You know how we do. I always like to start off with the question of the day. The question of the day today is would you rather would you rather one free Domino's pizza that is the best thing you have ever and will ever taste or would you rather a free Domino's pizza every month for the rest of your life so I'm gonna I want to see one or month one means you want the one best thing you'll ever taste and will ever taste and month means a free pizza every month let's see one or month one or month we don't exactly blah we go get all right i've seen i've seen a good mix here i've seen a good mix we got some months we got some ones you know what i i'm still feeling i'm feeling the one on this one. I want, I want to, but then you peak, right? Like if you have the one best thing you'll ever taste, like, and you're, you're, you're younger, like it's just, it's just over. Right. I don't know, but a free pizza each month would be pretty dope. I'm going to go, you know, I'm going to switch it. I'm going to go one free pizza a month. I think that that'll keep me, you know, make it something special.

It comes every month. I'm going to go with that. I don't want to peak this early. I want to peak this early. All right. I don't want to have the best thing ever It tastes great. I'm gonna go with one free pizza a month Hey We have to trying to get around this Domino's ban it comes free I haven't paid for it All right, shout out Domino's pizza hope you all doing well, all right, let's talk about tonight We've got a lot to get into, a lot to get into folks. We're gonna talk a little bit about what it's like to learn JavaScript, the trials, the tribulations, the trough of sorrow, what it really takes to understand JavaScript. Then we're gonna dive into like what actually is programming, right? We're gonna take a little bit of time to talk through what is programming, what is it at its essence. We're going to build a YouTube background picker. All those YouTubers have really dope backgrounds. They got lights going. We're going to build an app that can help them choose their next background. We're going to learn about variables and types.

So if you did the, the homework, you might be, you might already be there. You might already know about these, these, these variables and types things, but if it's still not clear, we're going to go in that tonight. We're going to build a not so great calculator. It's gonna be a very, very simple calculator. We're gonna build that together. We're gonna look at how to do arithmetic, math in JavaScript. We're gonna work through conditional logic. We're gonna build an agri-parent simulator if we have the time, and then we're gonna build a temperature converter together. So a lot to get through tonight. We might have to save the agri-parent or the temperature converter to next class. We're gonna try and do the thing tonight. All right. As always, you know how I like to start off. I like to start off with my questions, so if you got questions, maybe I got answers. How y'all doing?

Who's going to carry the boats and laws? We going to carry the boats and the laws, that's all I'm going to say. Good I'm good, yeah, thank you for asking. Can we turn in the layouts if we're a tad behind? That's a great question. So I think folks are all gonna be in different places, right? Remember, when I asked you to do the layouts, I said to get the layouts done as close as you can with the time you had allotted. Some folks are gonna have more time, some folks are gonna have less time. So I want you to submit all your layouts tonight as far as you got them, right? Remember, I wasn't looking for pixel perfection. I said, if you had a client, do you rather go to your client and say, I got all seven of the projects some of the way there, or I only got one of them the way there, right? So turn in what you got, as far as you got, and feel good with the work that you've been able to do. And I think this is a really important question to start off with because for most of us, we had never touched code before, right? We'd never touched code before. And in 10 nights, you gave me 10 nights.

Think about where you are in just 10 nights of code. You gave me 10 nights where you just came to class, you put in some work. Think about where you are right now. And so a lot of people, when this assignment is due, when this assignment is due, they don't feel great about where they got with their layouts. Maybe they didn't get as far as they wanted. Maybe they're missing one or two. But it's been 10. Class, let that sink in for a second 10 nights. Think about how far you have come in just 10 nights and you should be proud. You should be proud. I don't care how far you got. I don't care how good your layouts look. You should be damn proud of yourself because you know why there are thousands of other people that said they wanted to learn how to code this year and where the fuck they at. I don't see them. I'm looking.

I don't see them. But you're here. You showed up. You put in some of the work. You deserve to be proud of where you're at and what you got done. I don't care how far along you got and how care the perfect they are. You are miles ahead of all the people that said, you know what? I wanna make a difference in my life this year. I wanna make a positive change in my life. I'm gonna learn how to code and they sat on their butts. They didn't put in any work. They didn't show up to class. They didn't turn in any homework. They didn't get any layouts done. So you can't hang your head low when you're miles ahead of the thousands and thousands of other people that said they wanted to learn this shit and then did nothing.

Right? So, I know this is a little weird. I want you to congratulate yourself. I want you to say your name, right? And then say that you're proud of yourself for the work that you did, for the times that you showed up. I want you to say it out loud. I don't care if you're, I know some of you are at Starbucks, some of you in the back of Panera Bread. I don't care. I want you to say your name and that you're proud of yourself. Leon, I'm proud of you. You put in a lot of work over these past couple weeks. I want you to say it if you're here. I want you to say I want you to literally say it out loud Cuz you deserve it Daddy Yankee in the house. What's up? I'm proud of you.

I'm proud of you to daddy Yankee Cool that's how I want to start tonight. I want to start tonight You should be damn proud that you're here that you showed up because there are thousands of other people that said the same shit And they ain't here no more They ain't here no more. It's just us You should be proud tonight there's a lot right tonight there's a lot and what I want to kind of put out there is that you should be proud of yourself and tonight I want you to be sponges I want you to be sponges tonight is not the night to understand tonight is not the night for things It's the click and make sense tonight is not the night for you to understand JavaScript. Tonight is about me showing you some dope stuff, right? I'm a dope person. I do dope things, right? So tonight is about me showing you some cool stuff. I want you to sit back and go, ah, that's pretty cool. I kind of get this JavaScript thing and what it might be able to do. I don't care if you learn syntax tonight. I don't care if you learn any JavaScript tonight. I want you to look at the stuff that we're able to do tonight and go, huh? That's pretty cool I'm excited to spend the next couple weeks learning that stuff. You're not gonna walk away tonight a JavaScript master Right, it's just not gonna happen. And so I want you to be a sponge to absorb to take it all in To ask some good questions and then we're gonna have the next couple of weeks for all this stuff to click I'm gonna show you a lot of stuff tonight.

This will not be the only time we see this stuff We're gonna recover things over and over again. Dab. Let's go. Hey, how you doing? Right? We're gonna do this stuff over and over again. So tonight you're a sponge you're absorbing you're turning on your Beyonce We're gonna go down the rollercoaster together, but we're gonna have fun cool If you haven't checked in yet, please go ahead and check in You always do exclamation point check in here in chat or the tweets always in the follow along materials channel in the going live Channel, or if you just follow me on Twitter, you'll see it go live an hour before class for folks that are new My name is Leon. We are running a 30-week software engineering boot camp The goal is to go from zero to employed or absolutely free All of our content is always put out there for free never behind any paywalls You can come learn how to code with the best community to learn how to code live online hands down or 25,000 strong in our discord Exclamation point discord here in chat or Leon Noel comm slash discord come get your questions answered Find folks that are going to go through the struggle. We call it the trough of sorrow together Alright folks, thank you for checking in Submitting work, those layouts that we talked about, right? Get all the layouts in, you can use CodePen, you can use Glitch, you can use any of the things that you feel comfortable with. I want you to submit your layouts where they are at. Where they are at, okay? Where they're at. And like I said, hang your head high. I don't give a crap how far you got.

I don't give a crap how good your layouts look. Every single person here, including myself, can do better. We can all do better. I don't care how crispy you think your layouts look. You can do better. I'll get you one dab. I'll get you one. You can do better. So tonight, when you're submitting these stuff, you keep your head high. You're miles ahead of folks that said they want to do this crap and ain't doing it. So submit what you got as far as you got to be proud of what the work that you put in, then as you have time, as you have the privilege of time, make them better. You can always come back to your work and make it better. Whenever I have free time and I want to put it in investing it into learning, I go back and I redo stuff. I add the stuff. I tweak stuff.

You can do the same. Maybe you learn more Flexbox over the next couple of weeks and you come back and you make them better. This submission will stay open. This submission will stay open. Resubmit it. I don't care if it's a week from now, a month from now, when you feel better about it, when you feel like you've done more, when you've done better, come back and re-submit. Alrighty. We don't get got. We go get. Exactly, we go get. All right. OCC, hey, thank you for the thousand bits. That's wild, I appreciate that. Thank you so much. And thank you everyone for all the subs and the primers where Jeff Bezos is sweating right now.

Seeing their net worth just go down from all the prime subs that come in. If you have Amazon Prime, it's completely free to sub. A lot of folks did that last time and I really, really appreciate it. All the subs go to the nonprofit I work at during the day. So I appreciate y'all. All right. I, about a year or so ago, was talking to one of our experts in residence at Resilient Coders. Senders VT, hey, thank you for the gifted subs. I appreciate you. Thank you so much. Thank you for being here. Their name is Vons, and they're an expert in residence. They were a student that went through RC, then they joined Wayfair as an engineer, then they joined Salesforce as an engineer, and then they came back and joined Resilient Coders as a person's in the classroom with us. We don't, we, so a lot of, a lot of bootcamps, they do some shady shit where like, their graduates get immediately hired back. We don't, we don't do that.

You got to go into the workforce and then come back. I see some folks know Vons, they are really the best. They are. All right. So I was talking to them about a year ago and they were relating, super, a lot of love, let me turn it down a little bit. they were relating their learning to code journey to their martial arts background, right? And they practiced martial arts for a very, very long time. And the thing that they always said was that the way they pushed themselves was always about half hard work and then half believing they could do the things that they wanted to do. and they actually related it to a baby learning how to walk. So this is not my knowledge, this is Vaughn's, but I love it. It's the perfect ethos. It's the perfect mindset to go into learning JavaScript because it really highlights a really important point. When a baby is learning how to walk, they fall, they get up, they fall again, they get up, they fall again, they get up, They keep falling, they keep getting back up and eventually. They learn how to walk and the beautiful thing sometimes they poop themselves. Exactly.

Sometimes they poop themselves, but the beautiful thing is you don't ever see a baby in the corner doing this. I'm never going to learn how to walk. This is, this is, this will never happen. I see all these adults walking around. I'll never be able to do that. I didn't eat my carrots today, and since I didn't eat my carrots, I'm not gonna be able to walk later. I fell earlier, and I hit my knee, and now I'll never be able to walk, right? You don't have... Nobody puts baby in the corner, right? They're not in the corner having an existential crisis about learning how to walk. They see everyone doing it around them and they know that with time they will learn how to walk too. That's the mindset you need to have going into JavaScript. JavaScript is going to be half hard work, like really hard work, and half just believing you can do it. And believing you can do it is actually the harder part. So many folks will get one, two, three classes into JavaScript, and that's it.

That they're packing it up, they're going home, because after three classes, they don't feel like it's clicking. For three classes, they don't feel like that they're ever gonna be able to learn JavaScript in the future, ever. with time you will it's half hard work it's half believing you can do it and that believing you can do it is the hard part if you were learning Japanese right if you didn't already speak Japanese and you were trying to learn Japanese for the first time and you were three classes in you wouldn't be stressing out over the fact that you were not fluent in that brand new language, right? You wouldn't be sitting in a corner, crying yourself to sleep, feeling ashamed, feeling bad, feeling down about yourself because after three classes, you weren't fluent in Japanese. You weren't flying to, you weren't flying to Japan to like live it up. Right. You know that it's going to take you a long time. You know, it's going to take a lot of hard work, right? You know that eventually you could get there, but it's going to be half hard work going to be half believing you can do it I have seen students from every walk of life You name it. I've worked with a student from that background and I've seen all these different types of people be successful I do not care your background. I do not care how good you are at math. I do not care If you went to school, I do not care if you have a degree you can learn JavaScript. It's half hard work, and it's half believing you can do it, and that believing you can do it is the hard part, but I'm gonna tell you right now, you can do it. You can. Absolutely.

And we're gonna do it together. When you get stuck, when you fall down, go on Discord so we can pick you back up. When you trip and you poop yourself, just like the baby on the screen, come to discord. So we can pick you back up. You're going to fall over and over and over again, but you're going to keep getting back up. And what I need for you to believe in this moment is that it is possible for you to learn this language. It is possible for you to build amazing things. You have all the raw materials you need. And just like the video I had you watch. Right. Just like I had the video that I had you watch before class when that bell rings. It's time to go to work Don't show up in the ring if you don't think you can win because you can Time to put in work It's time to push. It's time to fall. It's time to get back up and we'll get there together All right Cool. So we're talking about the golden rule now, but for the first time we hit the last piece here, right?

We always said that our content goes in our HTML, our style goes in our CSS, but finally we get to the behavior and interaction piece, right? We're able to put our behavior interaction in our JavaScript, right? And we keep all these things separate, why? Organization, exactly. It's all about organization, right? And tonight we're gonna finally see, we're gonna finally see this behavior and interaction come to life. So far we've covered HTML and CSS. HTML and CSS are what we call markup languages. They're not true programming languages, right? Some people will nerd out on that. But tonight, JavaScript is a fully featured programming language. We're gonna be able to do amazing things with it. We're gonna be able to build and finally add that behavior interaction. Cool. The other beautiful thing about JavaScript is that it is a beautiful language that is a higher level language.

It's something that we can understand as humans and share our code with each other and understand what's happening in our programs. We're gonna be able to digest that tonight and build some cool stuff. All right, in our HTML and CSS classes, we saw IDs in classes. They're important to bring up again right now because we're gonna use IDs to target specific elements in our HTML that we wanna attach or listen to for behaviors, right? So we're gonna see in our JavaScript that we're gonna target these IDs to target one specific thing in our code so we can do cool stuff with it. Same thing with classes. We might be using classes a little bit more now to target multiple elements to add those behaviors, to add those interactions to our application. So if you haven't really used your IDs or classes that much, get ready, we're about to see a lot of them. Cool. Let's talk about programming. Let's get our fingers on the keyboard. Let's hit some of that clackety clack. we're all here to learn our first true programming language that is JavaScript. But before we get there, we've got to actually understand what the heck programming actually is. So the key rule here, the thing that you need to keep in mind above all, is that a computer will do what you tell it to do.

It's beautiful. We can tell computers to do amazing things and they'll do them with precision and speed that humans cannot comprehend or do on their own. But at a fundamental level, a computer will do what you tell it to do. So a program is simply a set of instructions that you write to tell a computer what to do. If you ever said like, what's a program? A program is just a set of instructions. Keep that idea of a set of instructions in your brain. So if computers just do what we tell them to do, well a program is just those instructions that we write to tell a computer what to do. And if a program is a set of instructions, well then programming is the task of writing those instructions in a language that the computer can understand. Okay. Now, the wonderful thing is we are going to learn JavaScript tonight. JavaScript is a beautiful language that humans can understand. Right. That I can share my JavaScript code with you. You can look at it and quickly realize maybe what's happening in the program.

And we're able to share with other engineers that can quickly look at it and understand what's going on. but that JavaScript is actually not something that a computer truly understands. It's too high level. That JavaScript has to be broken down all the way into something that the computer can actually understand. So tonight we're gonna be focusing a lot on the higher level JavaScript that we can exchange with each other to understand what's going on in our sets of instructions we're writing for the computer. But we're also going to spend a few moments tonight to talk about what's happening deep down that level, at the lower level, at the deeper, we call it closer to the metal, right? The stuff that the computer can actually really understand. Cool. So I need you to give me some artistic license here. Some educational freedom, as we might say. Give me the chance to present an example that's not 100% true or correct, but it's something that we can hopefully latch onto to better understand this idea of low level versus high level. And I appreciate all the non-spam in chat. Oh, that's beautiful. It's just nones all the way down. Thank you everyone.

So if you're subbed, you get the emotes. If you who got a gifted sub, which a lot of people in our community love to do, you have the emotes. If you use your Prime for free, you have the emotes. But if you have channel points, you can unlock the emotes with your channel points as well. Love all the nuns, man, that's hilarious. All right, give me some freedom here. Now, here is a very simple circuit that I'm gonna draw. we're going to have a wire coming out this side we're going to connect it to a battery and then a wire that comes up this way this is a closed circuit with a battery and a light bulb and so this light bulb would be turned on right so right now the circuit is closed and the light is on. Thank you so much for thank you so much for the five get the subs. I appreciate you. It's so loud. I think the, um, the alert sounds are back to what they were before, but all One second, let's make sure that it's not too wild. One second, I can fix it. All right, there we go. Oh, I cut it in half, so hopefully it's not too wild.

Boom, all right, that should work. There we go, I left you in the dark to fix it, we're good. Alrighty, so here we have a circuit, right? We have a circuit and right now it's a completely closed circuit so the light is on. Let's go ahead and slightly modify the circuit so that there is a switch and so we'll have a completely closed circuit on the right with a battery and then over here we have a switch. So right now. If slip a brick, hey, thank you for the 10 gifted subs. That's so wild. Thank you for being here. Vippy slip on a stick brick. All right, that's wild. Thank you for being here. Thank you for the gift of subs. It's still loud. It's better but still loud.

All right, well, we'll fix it during the break. To go a bit more, all right, I got you. Thank you for the gifted subs. All right, right now we have a circuit with a switch on it. And right now the switch is open, so the light is not on, all right? If I was to close the circuit, our light would turn on. right? The light would turn on. So we now have a circuit that we could represent one where the light is on and one where the light is off. If I wanted to represent this circuit and the most basic form, I see a lot of folks kind of slowly getting here where we're going, is we could represent it with like a singular character. Maybe if the circuit was off or open we could represent it with a zero. And if the circuit was closed, maybe we could represent it with a one, right? And then we can start to represent our circuits as either open or closed, or in this case, on or off, right? On or off. And this beautiful base level kind of understanding is the fundamental aspect that we can use to build up to our modern computers.

And let me show you how. So we have a very simple circuit here, but let's add another switch. Let's go ahead and have a switch on both sides. There we go. If I wanted to represent this switch with the logic that we just presented, it, right? What number would I use to represent this circuit? What could I write? Throw it in chat for me, please. Yeah, we can represent this as zero, zero, right? That both the switches are open. Now, something really cool, let's say I closed this circuit here. How can I represent this circuit, chat? Yeah, let's say one zero. All right. Now our circuit is one zero.

We're saying that the first switch is closed or, and then the second one is still open. And then how could I represent this circuit right here? How could I represent this new circuit? Yeah, I can represent it with one, one. Dope. So now I have a circuit that I'm representing with one, one. And something very special just happened. By saying one, one, we just built up the most simplest bit of logic. When I say one, one, what logic am I actually representing? Very, very simple bit of logic. When I say one, one, I'm saying what? I'm saying this blank this. Yeah, I'm saying and. I'm saying this switch and this switch are both closed. So at its very basic form, just from this idea of on and off, and just with a very simple circuit, it, I could then demonstrate this idea of, and, and I have the very simplest bit of logic already.

We start to build these up and we call them logic gates. And at a very fundamental level, we can build up from these zeros and ones, these on and offs to very simple logic to slightly larger bits of logic, right? We throw in things like a arithmetic logic unit, which helps us do calculations. We throw in a program counter and we throw in a little bit of memory and we have a computer, right? So from this very base logic, we can build up to a language that the computer can at least understand at this very raw level. This zeros and ones, this very basic logic. But we as humans do not want to be talking in zeros and ones. We do not want to be talking in these like very primitive bits of logic. We want to be able to talk in a language that makes sense. So while the computer may understand this, we build up on top of that logic and we go higher and higher until we're writing out something that's human readable that we can understand as humans and not be talking nonsense and zeros and ones. And so that's where JavaScript comes from. JavaScript is a language that humans can understand that looks like it's written in normal English, But eventually can be broken all the way down into this very simple logic these zeros and ones that the computer can realistically understand Okay. Now the cool thing is you can really nerd out over this stuff. There is this Wonderful book by Chris Pretzeld called code the hidden language of computing or I think it's called and Chris Pretzeld walks through this in in amazing detail and they start all the way back with how ships used to communicate. Does anyone know how like way back in the day different ships across the horizon would communicate with each other?

Way before Morse code. Yeah, they would use flags. They would wave different flags and they could build out a whole communication system off of waving different flags. And then those flags eventually, when it became nighttime, they would switch to lights and they would start flashing different bits of light at night so folks in the distance could see. And those lights turned into Morse code. And then from Morse code, we got higher and higher levels all the way up to modern computing. So if this stuff is really cool to you, if you feel like you want to nerd out on this, I really recommend Chris Pretzel's book, code the hidden language. I'll put it on Discord after after class, but this idea of base low level computing is how computers really work. And we're just lucky that we're not here 30, 40, 50 years ago. We don't have to write this anymore. We can write high level languages, JavaScript that make way more sense and know underneath the hood, they're being broken down into stuff like this. Cool. Now, I gave you some homework. The homework was to watch Independence Day, okay? If you didn't watch Independence Day, it's a wrap.

This whole rest of this class, the whole rest of the cohort will all be Independence Day themed. It's just over. I'm joking. We're going to use Independence Day to highlight a very specific story that I think it's important for us to understand before we move into actual JavaScript. All right. So if you watched Independence Day, right, these alien ships come to Earth, right? These alien ships come to Earth. And when the alien ships come to Earth, something weird happens. We had actually had a crashed alien ship that was the Roswell crash. We had a crashed alien ship, it was in Area 51. And when the alien ships came to Earth, what happened to the ship that we had in Area 51? Yeah, you got that, yep. it turned on, right? When the other ships came close, the ship we had in Area 51, like turned on. The power came on, it's shields came on, it activated.

And so this is a really interesting bit of information. That means somehow there's like proximity and maybe like their communication and their power systems are like intertwined. Like they're able to like communicate to other ships. They're able to like send power to those other ships and so we know that they're connected in some way Right that when the other ships came close this ship that we had got power it turned on it had its shields Right, and so that leads like something pretty interesting that could happen that that the the communication the power systems are all kind of connected All right, cool now There was a ship in the USA that we immediately tried to like nuke out of orbit And we hit it with our nukes, right? And nothing happened. Why did nothing happen when we hit it with our nukes, the alien ship that was over the US, or one of them that was over the US? Yeah, it had shields. And so the shields, we hit it with the nuke and it just like poof, popped off, like nothing happened, the shields were too great. And so we knew, right? We knew that if we wanted to like save the world, we're going to have to bring down those force fields, those shields. So what did Jeff Goldblum do to save the world? What did Jeff Goldblum do to save the world? Yeah, they wrote a computer virus that they then injected into the alien mothership. And the cool thing is, Once we put the virus into the alien mothership, since we know like that communication power system is intertwined, as soon as we injected the virus into the alien mothership, all the other alien ships, their, their, their shields went down and we were able to hit them with a nuke, save the world, America. Right.

And so how, how was Jeff Goldblum able to write a program that ran on an alien mothership so we could bring down their shields, hit them with the nukes, save the world, America? How is that possible? I'm seeing a lot of people say like JavaScript. No, we're not there yet. I don't think the alien ships were using JavaScript. Maybe, maybe out there in galaxy far, far away, they're still writing JavaScript. No, we did something else. We have to assume, right? We have to assume, even though these are advanced alien civilizations, we have to assume that there are some universal constants in this world or in this universe, I should say, right? We should assume that like math is a universal constant. We should assume like physics is a universal constant. And maybe this idea of on and off are also universal constants. So if on and off is a universal constant, right? And even though they are an alien civilization from far, far away, their computing systems still have to boil down to zeros and ones, to binary, to on and off. It's universal, right?

And so Jeff Goldblum, what they did is they did something called reverse engineering. They took their code and they reduced it all the way down to the zeros and ones, and they built it all the way back up to a virus that they could inject into the alien mothership. And I know this sounds like really far-fetched And it is because of the amount of time that they had to do it. But the act of doing it is not too out there. Reverse engineering is a skill set. There are some people in this world that are very, very good at it. They can do it very, very quickly. One of my favorite YouTubers, their name is Scanline. And what they do is they people like send them stuff and they reverse engineer anything you send them and like get it to do weird stuff. Right. The very first time I heard about reverse, well, not the first time, but the first time I was really excited about it, there's this talk that I'll put on Discord afterwards of this woman that reverse engineers Tamagotchis. Tamagotchis are like little virtual pets and they reverse engineer it all the way back to like the machine level code, a little bit above those zeros and ones. And then they were able to build back up to make the Tamagotchis do really cool stuff, right? And it like blew, I remember watching that talk and my mind just being blown. I was like, you could do that?

People are people are saying that's my middle school years. Yeah, mine too. I still got my Tamagotchi's. Oh, look at that. Boom. It's not a Tamagotchi. That is a Pokemon Pikachu two and has a little padama in it. Yeah, I know you're jealous. It's okay. And back in the day, I was all about my virtual pets. I'd be walking around school, bam, Having the you know, you just had on your backpack. You had to make sure everybody saw. Boom. Look at it right there. I had the baby nano.

That was the hot one for a minute. I had the Digimon. That was a hot one for a second. I had the the Salem gigapet. Bam, in your face right there walking down the hall. Yeah, I was I was cool. It's all right. Anyway, back to our story, the idea of having this alien civilization Breaking it all the way back down to the zeros and ones and all the way back up. That's a true story That could really happen, right? We could do that and so around this way. We like to mark this momentous occasion, right We need to mark this momentum the momentous occasion we have a saying around here for for this legendary event in human history If you've been around these parts before, do you know what we call this epic moment in human history? The 4th of July, it's not 4th of July. Yeah, we call this binary upload boom, right? We wrote binary, we upload it, it went boom, right? Cause we nuked them, America.

And what I want you to remember here is that as you're writing JavaScript, JavaScript. You are sitting on the shoulders of giants, folks that have come before us to write the ones and zeros, the zeros and ones, to write the machine code, to write the assembly that sits on top of that, to write the code that interfaces with the assembly in C, to then use that C to build up to the languages that we use today like JavaScript, right? And so when you're writing JavaScript and you can understand it like a human, know that it is breaking down all the way to these zeros and ones and we don't have switches anymore like we don't have like physical like closing switches we have transistors and those transistors are turning on and off and so as you're writing javascript you have this immense amount of power right the power to to bring down shields the power to to destroy alien civilizations And we just have a few things for you to learn to wield that power correctly and so tonight We learn JavaScript Let's get some All righty, so JavaScript Is a language that we are going to use to tell the computer what to do I don't need you to get it tonight Thank you, I don't need you to get it tonight I need you to sit back relax enjoy soak up what we're about to cover like a sponge, see the cool stuff that we can eventually start to do, right, and take that excitement into our next few classes where we go deep and all these topics start to make sense. But tonight's not the night. Tonight's for me to show you some cool stuff, to do some dope things together, and to hopefully be inspired for what's to come. All right. When we wrote HTML and CSS, we had a specific syntax, right? We had a specific syntax. We had these rules that we had to follow when writing our HTML and CSS. We had carrots, we had curly braces, all these things that we had to follow for it to work. Well, JavaScript has its own specific syntax as well. All right, and so over the next couple classes, we're gonna introduce more and more, right, of this syntax, right? We're gonna introduce more and more of this syntax. And as we go through it, as we go through it, we're gonna pick up a lot of more characters. And I bring this up right now because as you start to write more JavaScript, your fingers are gonna stretch.

they're gonna expand, right? They're gonna expand. You're gonna be using keys that you haven't really ever used before. And so this is another gentle reminder to take care of yourself. Cause a lot of people really do burn out their hands when they first start getting into their first real programming languages. Because I'm gonna show you right now, all of the characters that actually show up when you're writing JavaScript, okay? There's a lot of special characters that we're going to use. And I just want to make sure that everyone understands the different characters, what they are, how we're going to use them. And so let's go ahead and just take a quick second to walk through all the different characters and see them. Open up my inspector here. I'm going to open up my console just so I can type here and show you some stuff. All right, I'm just gonna look at my keyboard here, and I'm gonna walk through the different things that I see. So starting off, we have our lovely square brackets. We're gonna use these square brackets a lot, especially when it comes to using things like arrays. So these square brackets are really important to kind of recognize, okay?

Next we have, some people call these curly braces. They're technically called figure brackets, but I call them curly braces because that's the dope thing to do and I'm a dope person. So I'm gonna call them curly braces. Next we have our less than and greater sign with our JavaScript. They're not really like brackets, right? They're not the things that we're using to encapsulate like you did with HTML. We're using these for logic. Less than or greater than. Right? So we're going to start seeing these be used when we get to comparison. When we get to our conditional logic later today. Right? We're going to be using them for less than or greater than. Things like that. We're still going to have our commas and ticks.

They have places. Sorry. And dots. They have their place in JavaScript. We have a forward which we'll see when we get to things like division. Our forward slash will be used for division. And we also have our question mark. This question mark in JavaScript actually gets a name. It's called a ternary selector. Don't worry about that for right now. I'm just showing you that it'll come up and some people might call it a ternary, but we'll get there. We're gonna have our colons and our semicolons and we're gonna use these quite often, colon, and then semicolon. We're going to have our singular quotes and our double quotes. And we're also going to have ticks, which are with the tilde key, right? That all kind of serve similar purposes.

We're going to have backslashes that you'll see come up. And then really important on that key, right above your enter key is the pipe character. And this double, whenever you have these two pipe characters next to each other, that is how we represent the logic of or, right? How we say or. So whenever you see the double pipe character, that's or. We're gonna have hyphens and they're gonna be used for subtraction, right? And then we're gonna have our parentheses. Now, for some reason, I don't know when I picked up this habit. I call parentheses parens. I don't know where it comes from. So if you ever hear me talking about parens, I just mean parentheses. I've tried to wipe it from my vocabulary. It just doesn't want to get out of there. So you ever hear me say parens. I mean parentheses we're gonna have our asterisk for multiplication and Then double ampersand is another bit of logic for and right double pipe characters or double Ampersand is and so like this and that We have a percent sign, but we don't call the percent sign in most programming languages We call it modulus and this percent sign or modulus is how we get remainders Right.

It's how we get the remainder. So like when you divide a number by another number whatever is left over. That's the remainder That's what modulus is for and don't worry. We're gonna see all these come up again I just wanted to show you them before we get started We're gonna see the dollar sign come up, but most people refer to this as bling So whenever I say the word bling, I actually mean the dollar sign that you see there. Octothorpes are still gonna come up. They're not hashtags, they're not pound signs, they're octothorpes. And then one that comes up a lot, because it actually means not in JavaScript, is the bang. It's not an exclamation point, it is bang. So if you ever heard me say like bang discord, bang slides, what I'm actually saying is exclamation point discord, exclamation point slides, right? And so instead of calling an exclamation point, we call it a bang. Cool. We got our plus sign for addition. We got our equal sign for assignment and comparison. When we get a little bit further. And then we also have a till day, which will come into effect as well.

So if you notice all these characters on the edge of your hands, right? There are things you're gonna be reaching for. So please, watch the Dr. Levi video, get your hands moving, stretching, take your breaks. When we take a break together, actually take your break, right? Make sure that you're giving a good stretch, you're shaking out your hands, that you can be in this for the long haul or the long run. All right, now, speaking of breaks, before we jump into our YouTube background picker and see JavaScript alive for the first time, let's take our break. We'll take a little bit early today. We're gonna take our five minutes. If you're new around here, we like to be healthy. We like to make sure that we're in this for the long haul. We take five minute breaks at the top of the hour. If you're able, please get up, move around, stretch. If you're watching this on YouTube, before you take your break on YouTube, go ahead and give us a thumbs up. If you aren't subscribed, go ahead and subscribe, right?

And let's go ahead and take our five minute break. Alrighty. Five minutes on the clock. Bring the tunes up and I'll give y'all what you really want is Bob in five. You Yo Oh. Yeah, DM Bill, it's all JavaScript today. We're in. Woo. How many left, folks? Share the stretching video? It's dr. Levi the fitness doctor. It's on our discord Here it again What kind of domino's pizza should I order tonight? Oh a hard question playing with spinach way to go What's hydration today it's just uh some nice tea vanilla chai that I normally go with Oh with some with some jalapenos too has to move Why Domino's because of the best pizza All right, folks come on back come on back Should we code along? Not tonight, Civic.

Not tonight, Civic. Place the night to enjoy, to ask good questions, not to code along. All right, come on back, folks. Chill the music here. All righty. So tonight we're going to look at some code. And like I said before the break, you're a sponge. You're not trying to get the perfect meaning. You're not trying to even really understand what's going on. It's just to look and go, oh, that's pretty cool. And then in a few more classes, you'll be able to do it all together. All right, so I'm gonna go ahead and open up our starter code for this evening. If you're new and you want the starter code, we always share that on our Discord before class. So you can do !discord. It's just leonnoel.com slash discord.

You agree to the rules and then there's this follow along materials channel that I'll always have everything that yeah that you need Yeah, I didn't change the sound alerts we keep them loud All right Rolling loud And be a murder in Miami if they play it rolling loud Oh, no, did I move my folder one second? I like flip click and I don't know where I moved the folder. Oh, there you go. All right, so my desktop There we go, all right cool All right So here in my class 12 folder, right? In my class 12 folder, we have this background picker and I'm gonna open up the HTML and I'm also gonna open up the JavaScript for the first time, folks. We got JavaScript files. Sledge, it's up to you. Everybody's different. Join the catch up crew on Discord though. All right. First class, we got some JavaScript. Now, remember your sponge, let's get lost together. Have a good time. Let's let's get lost in the code and see where we wind up, right? All right, I'm going to go ahead and open this HTML in the browser.

And here we go. We got a lovely YouTube background picker, okay? If you're a YouTuber, you need a dope background, right? You need to be able to like have your lights going to stand out these days. And so what we have here is the ability. Right, the ability to click on things and for the very first time have behavior and interaction, so I click on pink, boom, background goes pink, boom. Green, boom, blue, boom. All right. I can I can I can go to town on it. Look at me go. Oh boy There we go, cool Alrighty so we have the ability to affect the dom Right. We have the ability to affect the dom and what the heck do I mean by affect the DOM? So what we see here is that when I refresh, all these changes go away, all right? All these changes go away, but when I click, there are some changes that are taking effect, okay? And this at first is a pretty weird concept because when I click green, right?

When I click green, is there anything, right? Is there anything that has changed in my files? Like has my CSS changed to now include green? No, right? No, there's nothing that's magically changed in my files. And if I'm actually in here and I open this up in the inspector, right? I open this up in the inspector. I can see all this stuff in here. Make this a little bit smaller. I can see all this stuff that looks like HTML, right? It looks like HTML, right? But it's not. it's not really HTML. It is the rendering of our HTML. What the browser does is it reads your HTML, it reads your CSS, and it paints a lovely picture.

So what you are seeing here is a lovely picture, right, that has been rendered. It's a painting. It is not the actual HTML or the actual CSS, right? It is a rendering of that HTML and that CSS. If you had a painter and a painter sits down to paint a lovely model, right? The painter sits down, they draw a lovely model, right? We would never say that this painting is the model. It is a rendering of the model. The painter saw the model, right, and painted the model. We would never say that this painting is the model. If the painter goes ahead and gives the model a clown nose, Right? Gives them a clown nose. The model, like the model isn't magically poof, like there's not magically like a red nose that pops onto that model, right? This is the rendering or the picture, right? This is the rendering or the picture, right?

Of the model. Same thing is happening in the browser. The very first thing I just showed you, right? The very first thing I just showed you, like when we first were writing our HTML and CSS, is that we opened up the H1, and we saw that the H1 was big, bold, black, and beautiful, just like myself, right? We saw that very, very first time. But did I ever write CSS that made it bold, that made it big, right? We never wrote that CSS. So where the heck did it come from? Where did that boldness come from? That size come from, right? It came because what we're seeing in the browser is not the direct carbon copy of the HTML and the CSS. It is the rendering of that HTML and that CSS in the browser. All right, if I go ahead and I refresh, right? If I go ahead and I go in here and I change this to Twitch background picker, right? And I hit enter, right?

I changed this to Twitch background picker. Has my code updated? Like if I go back into my code, right? If I go back into my code, Like, am I going to see that YouTube has been changed? No. I didn't affect the files. I affected the rendering of those files. Right? As soon as I come back and I refresh, why does it go back to YouTube? Right? Why does it go back to YouTube? I refreshed. Why does it go back to YouTube chat? because it's repainted, it re-renders exactly. It re-reads the HTML, it re-reads the CSS, and it repaints the picture.

So every single time you click refresh, you're repainting the picture, you're re-rendering, it's re-reading the HTML, it's re-reading the JavaScript, and it's painting what we see here in the browser. This concept is called the DOM, or the Document Object Model. What you're seeing here on the right-hand side is not your HTML, it is the rendering of that HTML. All this that we see here in the inspector, it looks an awful lot like HTML, but it's not. It's the rendering of the DOM, the document object model. Whenever we refresh the page, we re-render the DOM, right? Now, the cool thing is we can mess with the DOM. We can come along and make changes to it, right? We can manipulate it. We can add behavior and interaction to our sites with JavaScript, right? With JavaScript, right? And what happens is that we're manipulating the DOM. We're never actually manipulating our files. So as soon as we refresh all those changes to the Dom go away Okay, I like to think about my grandma's famous tofu soup Right. Grandma has an amazing tofu soup has three ingredients water or water Salt and Tofu right the amazing tofu soup recipe and grandma makes this tofu soup right we got a nice pot going it's steaming tasty it looks good right but I got a jerk cousin and my jerk of a cousin comes along and they throw a tomato into the soup.

When my jerk of a cousin comes along and throws a tomato into the soup, does the recipe magically update like we live in Harry Potter land? Like, does my recipe magically change? No, the recipe doesn't change, right? The way that we, the recipe doesn't change. It's just the rendering of that soup that has changed. I could refresh that soup. I could throw it all out and then rebuild it from the recipe, the water, the salt, tofu, and be back to my original state without the tomato. This is exactly what happens when you refresh the page. We throw out the DOM, everything that's in there gets thrown out and we reread the instructions. We reread the recipe, we reread the HTML, we reread the CSS and we paint a new picture. So the beautiful thing is that JavaScript is our jerk of a cousin. It can come in, it can mess with our soup, right? It can mess with a soup, right? It can mess with the soup. It can make changes to it, right?

But as soon as we refresh, it all gets thrown out and we re-render based on the recipe. So in this example, JavaScript is the jerk of a cousin. We can use JavaScript to change the DOM, to manipulate the DOM, to change the words we see, to change the colors we see, to make things move and spin. But as soon, right? As soon as we refresh the page, all that goes out and we re-render the DOM. So keep that in mind. As we're making these changes with JavaScript, we're not actually affecting the files. We're not actually making changes to our HTML or CSS. We're just making changes to what we see in the browser. And we're making changes to this concept called the DOM. At any point we refresh, all those changes go away. we restart by rereading the HTML and CSS. Cool. All right. Now that we have that concept down, let's go ahead and look at some actual code.

What you'll notice is that I have three LIs. Right? I have three LIs. I have an LI with the ID of purple, an LI with the ID of green, and an ID, sorry, an LI with the ID of blue. right, of Bloom. And this is gonna be helpful because what we're actually doing is when we click these individual LIs, we want different stuff to happen. So let's look at our JavaScript. Don't be overwhelmed. Tonight's not the night for it to make all the sense. We just want to talk through what we're seeing here. All right? What I am saying is, hey, I'm looking up here. I have these three very specific sets of instructions. Remember I said, JavaScript is about instructions, right? When we're writing programming languages, we're writing instructions.

Let me break down this instruction because it's human readable. Trust me, it's human readable. Let me show you. The document is the thing that we were just talking about, right? It's that rendering of the HTML and CSS. When we look at this page, we're looking at the document. Right? We're looking at the document. And what we are saying is, hey, when you're looking at this document, go get something that has the ID of purple. Right? So we're looking inside that document and we're gonna find something that has the ID of purple. and we're saying, hey, when you click on it, right? When you click on it, I want you to run this set of instructions. Right? I want you to run this set of instructions.

So if we look, we can actually see, if we open up our inspector, we're looking at, when I'm looking at this right here, what am I looking at? I'm looking at this stuff that looks like HTML over here. What am I actually looking at? Yeah, I'm looking at the DOM, or we're gonna say document for right now, right? DOM stands for the document object model, right? So we're looking at it. Is there something in this document that has the ID of purple? Yeah, it's right here. Look at this LI. This LI has the ID of purple. Right and so what I am saying when I look at this code is I'm saying hey Go look in that document find something that has the idea of purple and When you click on it when you click on it run these sets of instructions So if we come down here and we look at this set of instructions Right? We look at that set of instructions called party purple. The first set of instructions, right? The first set of instructions says, hey, go back to that document. Find the body.

We know that all of our HTML documents have a body. And give it a background around color, that's that color, right? And then go again, right? Go again, look in that document, find the body again and change the font color to white. So we are writing instructions in a way that's kind of maybe almost a little bit human readable, right? Remember tonight you're a sponge. We're going to see these instructions over and over again. and we're gonna learn all the different bits and bobs and the different pieces, but we're doing something very specific. We're saying, hey, when somebody clicks on this thing in the document, run these instructions, and the instructions are very clear. Make the background purple and make the font color white. That's it. That's it. Now, these right here, we call event listeners. You are listening for events, right? In this case, the event is clicking, right?

That's the event we're listening for. It's called a click, right? We're listening for that event called a click. However, I never think of them as event listeners. I always think of them as Smurfs. Yep, think of them as Smurfs. Now some people are like, Leon, what the heck are Smurfs? I know we have a global audience. So let me show you what a Smurf is real quick. These are Smurfs. They're little blue people that like live in mushrooms and shit, very popular back in the day. They have some new movies that came out recently, but these are smurfs, okay? When I am setting up an event listener, what I am really doing is putting a little smurf somewhere on the page in the DOM, if we have to use the the actual term, right? So So when I say, hey, go to that page, go into that document, find something that has the idea of purple, we're gonna actually put a smurf. So if we go and we look at our page, what we actually did is we put a little smurf here.

Right, we got a little smurf here. And this smurf is just gonna sit there all day long on the block by themselves, right? And when they hear the click, right? I'm coming in. Ready? Three, two, one, click. The Smurf goes, ay-yo! Right? The Smurf saw the click, right? It saw the click and it was like, ay-yo! Right? And what it said, it said, ay-yo! Give me some party purple. Wanted the party purple, folks. wanted the party purple.

So we went and got the party purple, right? The Smurf was like, hey yo, somebody clicked, give me the party purple. And so we went and we got the party purple. We went, we made the background purple, and we made the font color white. We outside, we are outside. I'm inside, but I'm about to be outside, right? Now, the cool thing is, we actually set up three different smurfs, right? We got three different smurfs here. We got the party purple smurf, we got the party green smurf, and the party blue smurf. We set up three event listeners, three things that are just sitting there all day long, listening for clicks, right? So if we go back and look, it's actually three smurfs. Purple smurf, green smurf, blue smurf. They about that life. They on the block by themselves, right? And they hear the clicks.

And when they hear the clicks, they tell a certain set of instructions to run, right? They run the block. And when they hear that click, they say, you do this right now, right? You do this right now. And so when the green smurf hears the click, it says, all right, time to run these instructions, the party green instructions. And those instructions say, hey, go to that document, find the body, make the background color green, then do it again. and go to that document, find the body, make the font color white. And that's why when you click on the green box, it turns green and white. That Smurf, here is the click, and then make sure that those instructions are carried out. Now you can call them Smurfs, you can call them event listeners, that's up to you. All right, they run these streets, they run these events, and you can call them what you want. You're gonna hear me call them Smurfs sometimes, you're gonna hear me call them event listeners, but they're the same thing. They're just sitting there, they're waiting, they're listening for a click, and when they hear the click, they tell certain things to pop off. Cool. So now for homework, we're not going to do it right now.

Tonight we're sponges. We're not really going to type tonight, right? We're not going to get our hands dirty. This is a very rare class where I'm not asking you to like immediately start coding or immediately start typing. So I want you to absorb, right? Next class, I got you. Tuesday's class, I got you. Thursday's class, I got you. This is the rare class where we're not going to be Super typing along but for homework Your goal is to come back to this code and I want you to add another smurf Right. I want you to add Another smurf that's listening. It's gonna carry out some other instructions Right. So that means you're gonna have to add another Li That means you're going to have to add another smurf or event listener. I don't know why some people call it that. And you're going to add another set of instructions. We eventually give these sets of instructions a name called a function, but we're not there yet.

All right. So that's going to be your homework. So you're going to come back. You're going to add a new smurf. You're going to add a new set of instructions. You're going to add a new event listener. Right. And then once you do that and you feel, all right, I got it all to work. You're going to save this somewhere else on your computer and you're going to delete it all and you're going to type it all out. And when you get stuck, you're going to look at your copy of it and then you're going to delete it all. And you're going to redo it, delete it, redo it, delete it, redo, delete it until you don't need to look at the example anymore. You're going to get your active recall in, your spaced repetition in, but the idea is that you're going to delete it all, do it again, delete it all, do it again until you don't need to look at the reference anymore and you're not copying and pasting. For this next two weeks, you might as well get rid of the C and V keys. Take them off. We're not going to need them.

We don't copy and paste. When we're first learning a programming language, the worst thing you can do is copy and paste, look at all these new characters, right? That we're about to start using. You got to get practice hitting those keys. You got to get practice with the way that you type it all out. Right? So no copy and paste. Not around here. Not this week, two or three weeks from now. Sure. Knock your socks off, but not right now. You got to get used to it. You got to get to the flow. You got to hit the keys. You got to make sure that things are going well All right Keep it moving Now when learning to code and you're learning your first programming language Majora that's hilarious When you're first learning your first programming language in this case JavaScript there are four major things that you have to learn.

You have to learn variables, you have to learn conditionals, you have to learn functions, you have to learn loops. If you can understand variables, conditionals, functions, and loops, you can build whatever you want. You can build whatever the heck you want, just with those four things. And so when people get into JavaScript, They think it's going to be like this wild adventure that they'll never be able to lock down But it's really just getting good at like four things Okay All right, like four things objects will come a little bit later But not really you don't even need to use them like those are extra Right, but it's really just those four things if you can learn those four things variables conditionals functions and loops You can build whatever you want Okay Everything else is a little bit extra. They make our lives easier. We get other data structures that make our lives easier. Objects, arrays, things like that. They make our lives easier, but you can build whatever you want with just these four things. All right, cool. So tonight we're gonna look at variables and we're gonna look at conditionals. Next week we'll add functions, we'll add loops, and we'll keep moving along the pattern here. All right, so variables. What the heck are variables? Variables are what we can use, right, to tell our program to remember a value for later on. We're gonna need to store information, right, and be able to use that information later on.

Variables are the entity that we use to store those values to be used later on, okay? When we were talking about the zeros and ones and like the building up to a modern computer, one of the things a computer needs is memory, like a place to store stuff, right? And the reason why computers are so much better than humans at a lot of this stuff is because humans forget, right? Computers can remember lots and lots of stuff because they have memory. And the main way we use this memory to start out are through variables. All right. So when we are using a variable, there are a couple different steps. So let's imagine we have a space for memory. So I'm just gonna go ahead and draw a space here. I'm just gonna call this memory. All right, this is our space for memory. When we are using variables, we have two really fundamental steps. The first step we call declaration, and the second step we call assignment. Declaration is what we use, right? It's what we use to create a space in memory.

Right, declaration enables us to create a space in memory. I like to think of variables as data buckets. All they are are buckets of data. So you create a bucket, you put something into that bucket, and then later on when you want it you can go back and pull it out of the bucket. That's all variables are. They're creating buckets that we can store stuff in and at some future date we can go and take stuff out of the bucket. So we have a keyword here called let and in JavaScript there are some special words. They're called reserved words. There are words that JavaScript looks out for and understands. When it sees the word let, that's like alarm bells going off for JavaScript saying, hey, hey, hey, wait a minute, whoa, whoa, whoa, whoa, whoa, whoa. Somebody is trying to create a bucket, a bucket of data, right? A bucket of data. And so when it sees that keyword let, All right, when it sees the keyword let, it creates a new space in memory. And so right here, I've done my declaration step. I've created a new space in memory called age, right?

So if we could actually look into the computer's memory, right now there would be a space that is empty, that is marked for age, right? Now, right now, is there anything stored in that bucket called age? There is not. At this moment in time, there is nothing stored in that bucket. That takes us to our next step, which we call assignment. With the assignment stage, right, with the assignment step, we can actually assign that bucket a value. Like we can put something in it. So here you can see, I'm going to set age equal to 25. That's the same thing as putting the number 25 into our bucket. All right. And now that bucket is stored in memory. And at any point in time, I want to retrieve that age. I can ask the computer, hey, what's stored in the age bucket and it will give me 25. Right. The name we give this is called a variable.

It's just a bucket. Right. The bucket that holds stuff. Right. And there are two steps with variables where you create the space in memory called declaration. And where you assign it a value called assignment. Cool. Now the cool thing is once we start assigning stuff to memory, we can use it however we please. So let's pretend that we're Facebook, right? Facebook stores a lot of stuff, right? Facebook knows your age. They probably know your location. They know your last sexual partner. They know your birth date. They know a lot of stuff about you right and so the People always freak out about this one.

It's true right so think about this Facebook knows your location right They can see two phones in the same location for the night Right and then those two phones don't go back to the same location at night ever again So they know who you're sleeping with. If you got that Facebook app on your phone. So let's be real, right? So they're storing age. Maybe they also want to store your location, right? So let's go ahead and declare a variable called location. So we'll say let location, that's our declaration step. And so we go ahead and create a new space in memory, called location, beautiful. And then the next step, right? The next step is assigning it a location. Let's just say Boston, right? So we assigned it a location of Boston. So this first step was the declaration step, and this step was the assignment. it. Now in memory is Boston.

Beautiful. So now we have all these things in memory and what we can do and why this is so cool is we can start to use these things that are stored in memory. I can say Bob age. Sorry. Let's just say Bob is age. right bob is not in location right so what happens here is we're trying to use these variables so instead of it saying age bob is age it would say bob is 25 and instead of saying location right, we would say Bob is not in Boston, right? The beautiful thing here is that these different variables, this age, this location will be different for each person, but we could still have the same use. We could still say Bob is blank, right? Bob is not in blank. And we could change the age as they get older. we could change the location as their location changes, but our actual use doesn't have to change. And so the beautiful thing is that variables enable us to store values to use later on, and we can use them throughout our entire program. Sometimes we're plopping them into the DOM, sometimes we're adding to them, sometimes we're subtracting from them, sometimes we're reassigning them or changing them. So variables at a low level are just buckets that we put data into, right? And eventually we can reuse that data if we want.

All right, when you are naming your variable, right? When you are naming your variables, you're most likely gonna have to stick to a convention. The convention that I use is something called camelCase. I use CamelCase on all of my HTML, my CSS, my JavaScript. Throughout my entire code basis, it's always CamelCase. And the idea is that the first word in your variable is lowercase, and then every other word is capitalized. So here you can see number of apples, number is lowercase, of an apples is capitalized. Right now with this variable What is this part here that I circled called chat? What's that part called? What's the part I just I just circled called Nice called declaration exactly and what is this part called Yeah, it's called assignment. Exactly, it's called assignment. So if I had memory again, right, if we're looking at our memory, we would see a new space in memory that was declared called number of apples, right? And inside that, we would assign it the value of nine. Beautiful. Now, we can store all kinds of data in our variables.

Like those data buckets can hold all kinds of different data. It's all data, it just has different types. We've seen two different types of data so far. Can anybody guess the two types of data that we've seen so far? We've seen two different kinds of data so far, at least two. Yeah, we saw numbers like the number nine or the age of 25. And then we saw strings. Strings are just a fancy way of saying a piece of text, right? So we saw the string of Boston, right? And so those are two of the data types we're gonna learn first on, but there are so many others. So let's explore numbers and strings for right now, and we'll get to the others in future classes All right strings in JavaScript will always be surrounded by quotes Right, you can use double quotes Or you can use single quotes and in a little bit in a couple classes We'll also see how to use ticks for template literals, but we're not there yet, right? So our strings are always be wrapped in double quotes single quotes or ticks But it's up to you. It's like your preference of what you want to use the thing that you have to remember However is whatever you use on the outside You cannot use on the inside without doing a trick Alright, so here I have they purchased it and I have single quotes on the outside and double quotes on the inside So we're good But if I had done double quotes on the outside, we would have run into a very specific problem. Let me show you the problem we would have run into. So I'm going to type this out.

I'm going to use double quotes on the outside. They purchase. And then I'm going to say it, right? they purchased it what happened here what happened here this isn't the the orange that it should be yeah we got two separate strings here we have two separate strings this first string is day space right and the second string is space it because those quotes terminated it closed the first string and then there's some empty stuff, and then there's another string. So whenever you use the same quotes on the outside as on the inside, you're gonna wind up breaking it up into two separate strings. Now, for the folks that did the homework, what do you think JavaScript is trying to think that purchased is? What is JavaScript gonna try and see if purchased is? Yeah, JavaScript is going to look for a variable called purchased, right? It's looking for a variable called purchase. But when I hit enter, I get a syntax error, unexpected identifier. It's because there's nothing that has been what called purchased. There's a very specific word we have to say here. There's nothing that has been what that is called purchased. Yeah. Yeah, there's nothing that has been declared that is called purchase.

There's nothing in memory. There's no space in memory with the name purchased. So it's going to get an error because there's nothing in memory called purchased. Nice. All right. There is a trick however, we can escape our quotes. So if I go ahead and put a backslash before each quote, it escapes it. It means it tells JavaScript, hey, ignore, ignore these double quotes, right? Ignore these double quotes so that I can have my cake and eat it too. It's called escaping. So those backslashes enable us to escape those quotes so that it doesn't create two separate strings and a variable that's not declared. We can keep our double quotes on the outside and our double quotes on the inside, but you just have to escape. Nice. Same thing happens with single quotes. If we replace these with single quotes, then our contraction would end here and we'd wind up with the same problem.

Excuse me. Now, if you're like, whoa, we can escape. What else can we do? Well, there is something else we can do. We can do these things right here. If we do escape n, what that does is it's the same thing as like hitting enter. Right, so it'll give you a carriage return. If you do escape T, it'll give you some tabbing. Right, it'll give you a tab. Now, why do you think I put a lovely like warning light down here? Why do you think I have a lovely warning light? That sounds an awful lot like CSS. Yes, let's go. We don't fire chat. Let's go.

You don't get got we go get exactly, that's really close to CSS like Spacing stuff returning stuff. Oh, no, it's a little too close for me. I sounds a little too much like CSS It sounds like we're getting a little too close with a violating separation of concerns. So yeah, I don't know I think I'll stay with that from now We go get exactly All right So we talked about strings. Let's talk about Numbers, let's talk about numbers. So in JavaScript, we have two kinds of numbers that you're gonna run into a lot. You're gonna run into integers, which are just like whole numbers, and you're gonna run into floated values, which are numbers with decimal places. So integers, like our whole numbers, our floated values have decimal places. So whenever you hear somebody talk about floats in JavaScript or most programming languages, because it just means a number with decimal places. There's a little bit more nuance to it, but that's what they're talking about. In JavaScript, you can also have signed numbers. People are like freaking out, no, Flows, no. I loved all the tweets after class on Tuesday. They had me giggling. Yeah, we have two different kinds of signed numbers in JavaScript.

We can have positive numbers and we can have negative numbers cool in JavaScript we have Different types of arithmetic right different operators that handle our math so in JavaScript we use the plus sign for addition We use the hyphen for subtraction We use the asterisk for multiplication. We use the forward slash for division. And then the last one, the last one is the percent. And that is our modulus. It's how we get our remainder. Now, before we get into modulus, people are gonna freak out. Leon, I thought you said there's no math. You don't need math to be a web developer, a full stack web developer. You just don't need it. There's very little math that you're gonna ever really realistically get into but you need to know how to do basic arithmetic You do need to know how to do like basic addition subtraction It's gonna come in handy. So Don't think we're gonna just go off the cliff into like discrete math or anything like that We're not we're gonna stick with the basics here folks quick maths exactly quick maths Modulus, it's how we get remainder, right? Nope. That's why I have a phone Leon is why we, it's how we get a remainder. So chat, if I did 10 mod four, what would I get? I did 10 mod four, what would I get?

We would get two, right? Cause four would go into 10 twice and we'd have two left over. And we can actually use the console to do this too, right? If we go to the console, we can do 10 mod four, and we see we have two left over, right? If I did 10 mod six, you can see that I would get four, right, six goes into 10 one time, and there's four left over, right? So modulus is just the remainder, right? And a lot of people are like, Leon, why would I ever need modulus? Well, Modulus actually comes in handy a lot. Not just to get remainders, but there's something really cool that if you understand how remainders work, that you can figure something out. Let me show you real quick. Let me do two things here and see if you can guess what I'm getting at. So let's go ahead and do, let's go ahead and do seven mod two, and then I'm gonna do eight mod two. What do you think I could use modulus to figure out? Yeah, check, got it. We could use modulus to figure out even and odd, right?

If you use modulus with the number two, so you take some number and you mod it by two and you get a remainder of anything, like anything that's not zero, you know that that's an odd number. But if you get zero, you know that that's an even number, right? So very quickly you can use modulus to determine if something is even or odd. And this actually becomes the cornerstone of a very famous programming challenge called FizzBuzz. What FizzBuzz says is print the numbers between one and a hundred. If the number is divisible by three, print Fizz. If the number is divisible by five, print Buzz. Numbers divisible by three and five, print FizzBuzz. And so this is like the cornerstone of that. You would just do the number mod five, the number, sorry, mod three, you do the number mod five, and then you do the number by mod 15 or three and five, right? And so we're not there yet, but this modulus does actually come up. It helps us for figuring out odd and even, and also pretty helpful when it comes to some of the like quintessential coding challenges that we'll be getting to very shortly. Cool. All right. Let's take a look at a not-so-great calculator, and then we will go ahead and take a break.

So I'm going to go ahead and open up my code for the not-so-great calculator. I'm going to go ahead and close our background picker. You can hear all the Smurfs slowly dying in the background you hear him no god no god please no no no no gargamel i think yeah oh no all right it's too loud i gotta fix that i gotta figure out i thought it was um i thought it was just the sound alerts that were as loud but i guess it's the whole system settings that You're allowed, I'll figure it out. You're awake now, gotcha, there you go. Welcome back. All right, let's go ahead and open up this simple calculator. All right, so I'm gonna open this in the browser. And here's a very simple calculator. If I click 0, I get 0. If I click plus 3, it goes up by 3. It's a little bit bigger. If I click plus 9, it goes up by 9. If I click minus 2, it goes down by 2. Since I can click, right? Right?

Since I can click on four different things, what do I know that I have four of? Since I can click on four different things, what do you know I have four of? Yeah, I got four Smurfs or four event listeners, right? Whatever you want to call them, right? I have at least four Smurfs or at least four event listeners that are listening for these clicks, right? So if I click zero, that Smurf is telling something to happen. If I click this plus three, another Smurf is telling something else to happen. If I click plus nine, another Smurf is telling something else to happen. If I click minus two, another smurf's telling something else to happen. So these are our event listeners. Now, if we go ahead and look at our code, we can see that there are four different LIs. There's pumpkin. There is domino's pizza, right? Then we have zebra and we have can't think of anything cause I ran out of ideas. All right, cool.

So we have these four LIs with their own IDs. so we can use those IDs when it comes to our JavaScript. We can target those specific allies, right? We can target those specific allies. Everybody's saying, did you get a sponsorship? No, I just really like dominoes. All right. Now, once again, remember we're sponges. Don't let this be overwhelming. We're gonna break through every single bit that's here happening. All right. Once again, we're saying go to the document, right? The DOM, right? Right? We're going to the document, we're going to the DOM, we're going to that rendering of our HTML and CSS, and we're gonna look for something that has the ID of pumpkin.

The query selector is just another way of finding elements. And so here we're telling it, just like we would find stuff in CSS basically, is what we can use inside a query selector. So when you see the Octothorpe pumpkin, you know that we're looking for something that has the ID of pumpkin. And when we find it, we put our Smurf on the block, right? That's us putting the Smurf on the block. So just to run through that again, we're looking in the DOM, like the rendering of our HTML and CSS. We're looking for the thing that has the ID of pumpkin. and when we find it, we place our smurf, right? And the cool thing, right? The cool thing is that this smurf, right? This smurf can actually change, right? Can actually change what it's looking for, right? It can change what it's looking for, right? So right now, it's at the click. And so we're seeing the difference here.

Is querySelector and getElementByIdInterchangeable? They are, there are slight differences. We'll get to those later on. Remember, we're sponges tonight. It doesn't matter. We're baddies, we're writing bad code. All right. The cool thing here is we're using this addEventListener, where we saw before on click, guess what? On click can only do what? On click can only... How can I time out for less amount of time? When I said Little Caesars, trying to time them out. Mods, can you time them out just for a few seconds? Thank you. Yeah.

Right now we, please don't do that. We have an event listener is listening for a click, right? But we can change it, right? OnClick can only handle clicks. AddEventListener can handle every single type of event, right? All right, so let's change this to mouse enter. All right, we're gonna change this to mouse enter. I'm gonna save, I'm gonna come back, I'm gonna refresh, beautiful. Now, we have our lovely Smurf sitting here. I've got a lovely Smurf sitting here. I'm gonna hit the plus three, right? Just so you can see that there's some three here, but watch, I'm not gonna click. Actually, I'll show you down here, look. This is me clicking plus three. You hear the click?

See the click? Plus three. But look, as I move my mouse in, not clicking, it goes back to zero. Right? Plus three, you hear the click. Moving my mouse in, boom, back to zero. Right? So these are different events, right? These are different events. And the beautiful thing is that Leon ASMR and the cool thing is that when you use add event listener You get to use all the events mouse enter mouse leave click double click, right? there are all these other things you can use and so as we kind of Continue on we won't ever really use on click because it doesn't give us the flexibility, right? But what we said here is hey Look in the DOM find the thing that has the ID of pumpkin put a Smurf on it or an event listener on it that's listening for this type of event. And when the Smurf sees or hears that event, it tells this set of instructions to run, right? So this set of instructions down here says to do something to total and then to do something else. Let's talk about this first part here.

Total equals zero. Anybody know what this is called? This is called something very specific that you might have picked up from the homework. It's close to assignment, close to assignment, yes. It's reassignment, it's reassignment, right? If we look up here, we can see that we declared a variable called total and we assigned the value of zero. Here, we're reassigning it to zero, right? We're reassigning it to zero. If we look at the other sets of instructions, we're doing other things to that variable called total, right? Here, I'm adding three to total. So if total was zero, I'm doing zero plus three and reassigning total to now be three, right? Let's go and open up the inspector and play around with that idea. All right. So we have a space in memory. Let's go ahead and create our console.

Let's go ahead and sign total. Let total equal zero. Great. Oh, sorry. Let's do a different variable. Let's go ahead and do, because we already have total. We're running the page already has total. Let's go, let's call it let age equal 25. There we go. So what we've created now is a space in memory called age, and it's equal to 25. If I want, I got, I did get got, right? If I want, I can reassign age to be some other value. So I can go ahead, let's see what age is right now. If I hit age and I hit enter, I get 25, right? We can see that 25 timed out.

Sorry. Y'all wiling. I'm so sorry. I won't do that again. I apologize. Somebody just said Papa John's in all caps. And I went, I like, I think the mods deleted it and I timed them out. Like I went to time them out, but the mods already deleted it. This is a domino stream folks. All right. So I type in, I typed in age, right? I typed in age and I got 25 back, right? I got 25 back, right? Y'all want, I'm gonna find y'all. I'm just gonna go back to the logs.

Bam, bam, bam, bam, bam, bam, bam, bam. I'm just gonna be like. I'm gonna set up an event listener that'll ban y'all. That's what we'll do. But we'll, on office hours, you come back. We'll write some JavaScript that bans all the people shouting out other pizza places when this is a domino stream. I'll show you how to code it and then we'll just let it run and we'll do it that way. All right, so we have age equaling 25. I can reassign age to be something else, right? Here we go, age equals 30. When I do that, right, when I do that, the spot that was 25 is now 30, right? That space in memory has been reassigned to 30. Cool. We can also go ahead and add, right? We can also add, right?

So we can do age equals age plus five. If I hit enter, what is the space in memory now gonna hold? All right, if I hit enter, right, what is the space of memory gonna hold? Go in and chat for me. 35, exactly. We've reassigned it now to be 35. The reason why it's 35 is because age, at this point in time, was 30. So I do 30 plus five, which is 35, and that 35 is what winds up reassigning age, right? What winds up reassigning age, right? We took a value, we added to it, and we reassigned it. Cool. We can also do a different, slightly different way of doing this, right? Could also do this age plus equals 10, right? And where would we be at? Yeah, we'd be at 45.

We just add a 10 to our age. It reassigned age to be 10 more. And so that space in memory would now be 45. Cool. So there are different ways of doing the reassignment. There are different ways of adding incrementally. We can add by one by doing plus plus. We'll see all of this, don't worry. We're gonna see all of these examples in way more depth with way more things going forward. Tonight, I'm just trying to show you some cool stuff, right? If you're not getting it, that's okay. I'm just trying to show you some cool things. This idea of variables, we can reassign them. We can do different stuff with them. It's dope.

Cool. So let's take a look at this code and then we'll take a break. Cool. So we have this variable called total, right? That we're going to reassign as we go along. And we have all of these different smurfs or event listeners, right? So we have these event listeners that we click on, the Smurf hears them and does something, right? So let's click on plus three and walk through the code of what just happened. All right, what line was the event listener that just heard that? What line had the event listener that heard the plus three? Yeah, it's line, let's look, if we look, the plus three was, oh, would you imagine that Domino's pizza? Huh? Who would have thought? Right? It was Domino's pizza, right?

Which is line four, right? So we heard the click on Domino's pizza. And when we heard the click, when that Smurf heard the click on Domino's Pizza, right, that plus three, right, when it heard the click on Domino's Pizza, what set of instructions did the Smurf tell to run? What set of instructions did the Smurf tell to run? Ayo, Jumanji! Exactly. Exactly, exactly. Now, as we've learned, there's only one Independence Day. And as we learned, there's only one Jumanji. All right, so it ran Jumanji. So are we gonna run this block of code? Are we gonna run this set of instructions? No, we're not gonna run this set of instructions. we're gonna run the set of instructions that have the name Jumanji. Great.

And the first thing we do, what is line 14 doing? What do we call this? We just learned this. What do we call line 14? What is happening on line 14? What do we call this? Yeah, we're reassigning total to whatever total was, it is now total plus three. So this is the very first time we clicked. We know total started off at zero. So at the end of line 14, total is what? At the end of, when we get done with line 14, total is at what? Yeah, total is now at three. Great, so our last line of code, let's read it out and see if we can understand what's happening here. We're gonna go back to the DOM. We're gonna go back to the document, at the rendering that we've been talking about all night.

We're gonna look for something that has the ID of place to put results. And then we're gonna put some text inside of it. And that text that we're gonna put inside is total. But right now total is what? Total is three. Dream in zero nine zero four. Thank you for the hydration. Cheers to you Thank you It's three right? So let's see we can figure this out Go to the document Find the thing that has the idea of place to put result and then put inside of it the number three All right. Let's look Is there something, if we look inside the DOM, is there something with the ID of place to put result? Ah, here we go. Here's a span that has the ID of place to put result. So we're gonna put something in there. We're gonna put some text in there, all right? We're gonna put some text in there and that text we're gonna put in there right now is the number three.

So that's why we see the DOM right here, and we see the three here, and we see the three there, because we've updated it, right? We put the bit of text three in there, right? If we go ahead and click something else, let's click the plus nine, we can see the DOM update in real time, right? We click these other things, we're seeing the DOM update in real time, right? This is the beauty of JavaScript, right? It is the beauty of JavaScript. It is the jerk. It can come along and mess with the DOM in real time. But if I refresh, what happens? If I refresh, what happens? It all resets, right? I'll refresh, boom, it all goes back to nothing. Poof, all the work we put in, all the DOM manipulation that happened, it completely resets, it goes back. Let's look. right now there's nothing inside right there's nothing inside that place to put results if we look right if we look at our html it's because there is nothing in the span to begin with i can put something in here i can put let's let's put but bob in here let's put bot we'll put the we'll put the word bob in here this is going to cause some problems let's put bob in here Let's save, let's come back, let's refresh, right?

Now, now the DOM starts off with Bob in there, right? The DOM starts off with Bob here, right? And if we were to click anything but the zero, we'd run into issues, right? If we click plus three now, we're good. But let me refresh and let me do plus nine. Right? Plus nine. Right? Let's go ahead and do plus three. Let me refresh here. Wait a minute. Wait a minute. Wait a minute. Let's refresh. Wait a minute.

Plus nine. How to go from Bob to nine? How'd it go from Bob to nine? Bob plus nine should be nine Bob. So there's some some interesting things that are eventually going to happen here. We're eventually going to get into this idea of strings and numbers. Right. Right. But was Was total actually Bob? Let's think about this. Was Bob actually total? No, total was zero. Total had nothing to do with what I put in this span to start. Total doesn't care what was in that span to start, right? Bob never even crossed the mind of it to be Bob, right?

Because Bob is just what was inside the span, but we don't care. There's there's nothing here that says worry about the span it just says Total is zero and do zero plus nine now if we do up here and we start acting reckless, right? We put Bob up here and set Bob the total and we come back and then we start playing games, right? then we're gonna get into some weird situations where we're running into like because strings being added to numbers and they're different types and this gets weird, right? We can always go back to zero and we're in a good shape, right? Because zero, it doesn't care what total was, it just completely reassigns it back to zero. Here we were seeing what's called string concatenation, but I just wanted to show you that because one of the reasons why people struggle a little bit with JavaScript is eventually there's like some of these like weird things that pop up, But we're gonna spend a lot of time on that stuff. We're gonna see all that in the future. But for now, let's set this back to zero. And we just know that when we click on something, we're firing an event listener. That event listener tells some instructions to run. And we can see these instructions doing some sort of reassignment and then putting that reassigned stuff into the DOM. All right, let's take a well-deserved break. When we come back from the break, We're going to talk about making decisions using conditionals. Let's go ahead and take a break, but five minutes on the clock.

If you're new around here, we like to be healthy. We like to take our time. If you're able to please get up, move around, stretch, hydrate, kiss some babies, walk some dogs, and I'll see you back here in five. He loves tech. This is great. Hey, I'm glad you think so. In five you You Bob looks how I felt this week, happy on the outside, dead on the inside. Did you know that Gargamel was trying to capture Smurfs to melt them down into gold? I just knew there was something weird while he was chasing them. That's pretty cool. I didn't know that. Will you solve the remaining layouts during office hours? Yep. We'll get through most of them during office hours. I played Breath of the Wild, of course.

I didn't finish it though, but yeah, I played it, it's fun. We raid internet? Of course. We always raid. I don't really know too much about Elden Ring, yeah, I'm not, I'm not really, I like heard of it, but I haven't like looked into it much yet. How many teacups do you have? A lot. Thoughts on TypeScript, I use it. Different tools, right? Different tools for different jobs. I do like Pip Club. Cool, all right folks, come on back, come on back. You don't post office hours on YouTube? I don't. So you show up.

You can always watch the VODs on Twitch though. They're on there for 60 days Come on back folks. Come on back When's the cs goes we're gonna be up hopefully soon we're just working on getting the last touches going I want to be able to like be done with it and then never have to like touch it for a while Cool all right folks get in here already Do you ever get tired of us? No, it's always fun. All right, come on folks, get him back in here and let's keep pushing. All right, talked about the big four, right? We had variables, conditionals, loops, and functions. So far we talked about variables. Now let's talk about the next, which is those conditionals, right? Those conditionals are what we're gonna use to make decisions. All righty, so here we have a value that is either true or false, right? We have the ability to say, all right, if whatever happens inside of here is true, we will do what happens inside of the curly braces. All right, now, if what is inside of here is not true, we do not do what's inside the curly braces. And so what we have to realize is that if we want to be able to use conditionals and make decisions, we actually have to be able to make comparisons, right? But to make comparisons, we got to learn how to compare stuff in JavaScript.

The idea is to be able to using these values, right? Using these values, be able to see whether or not something is equal to something else, if something is less than something else, if something is greater than something else, right? And the idea here is that we have to figure out all these different ways to do comparison. Alrighty, here is the first thing that we're comparing. Right here, we're comparing the number nine to the number nine. So is the number nine equal to the number nine? Is that true or false? It's true, right? The number nine is indeed equal to the number nine. So that is true. All right, look at the next one. Is the number seven equal to the number three? No, that is false. The number seven is not equal to the number three, so that will give us a false value. But where it gets a little odd with JavaScript is this idea that we can compare a string to another string, right?

we can say, all right, is the string hello equal to the string hello, right? And in JavaScript, that's actually true. The one string is equal to the other string, right? So they're both true here. So what we wanna start doing is take a little bit deeper look in how we make these comparisons, how we figure out these equalities and move through it. All right, so here I have done something very specific. What have I done right here? What is this right here? Yeah, I've done an assignment, right? There's actually no declaration step there, right? So let's pretend that there was a declaration step that said like let X, right? That was just strictly assignment, right? and what we're noticing is that I used one equal sign for that assignment, all right? I used one equal sign for that assignment. What we're gonna notice is when it comes to comparison, we're gonna use two or three equal signs, not one.

So it's something that we actually have to be very careful about. If we ever just use one equal sign, we're doing assignment again. but two or three equal signs is how we do comparison. All right, so wherever we see X here, we know X is what? Wherever we see X, we know X is what in this case? X is three, nice. So when we look at this, we're saying, is three equal to the number eight? So is number three equal to the number eight? But when you see two equal signs, it's just the value. Right, just the value. So is number three equal to the number eight in value? No, they are not equal in value, so we get false. Where JavaScript gets a little tricky is when we look at this next line. X is equal to number three. So does number three, answer the first question first here, does number three equal string three in value, in value?

Does number three equal string three in value? The answer to that question is yes. They are the same in value, three is three. However, when we have three equal signs, we're not just looking for value, we're also looking for type. One, in this case, is a number. This is number three. This over here, however, is what? What is that one over there? Yeah, it's string three. It's string three, exactly. One is a number and one is a string. And when you have three equal signs, you're saying I wanna compare stuff not only on value, but I also wanna compare stuff on type. So in this case, it passes the first check. They are the same in value, but they are not the same in type, so we would get false. However, when we come down to this last one here, we get to compare, does number three equal number three in value chat?

Does number three equal number three in value? Yes. And does number three equal number three in type? Yeah, they're both numbers. So that would be true, right? So we have to remember in JavaScript, one equal sign has nothing to do with comparison. It's just assignment. Two equal signs, we're looking at value. Three equal signs, we're looking at value and type. Cool. All right. We got a bunch of other ones down here and these scare a lot of people. So we're just not going to do them tonight. We'll come back to them maybe next class or sometime next week. So we're going to skip those for now.

We'll come back to those because that's where people just close the computer and run away. So we'll save those for another day. All right. Remember, the whole reason we cared about these, these like conditional statements, right? These idea of something is equal to, or eventually greater than and less than, right? It's because we wanna be able to do stuff based on certain things being true. We wanna be able to make decisions using conditionals. Remember we said the big four, variables, conditionals, loops, and functions. This is the basis of conditionals and how we make decisions. And they actually just follow one really important rule. If whatever is inside the parentheses is true, we do what happens inside the curly braces. That's it. So if what is inside the parentheses is true, we wind up doing what is inside of the curly braces. Hey, hey, thank you for the hydration. Cheers to you.

All right, so let's take a look at this. Here we go. There are actually three different steps that you can have when using conditional syntax. If you use an if, and this condition is true, you do what's inside the curly braces and then you stop. That's it, you're done. As soon as you hit something that's true, you stop. You don't move on to any other values, right? However, if this condition was not true, right? If it was not true, we would move on to the else if and check to see if this was true, right? So if this was false, we move on to the else-if. And the cool thing is, you can actually have as many else-ifs as you want. So you could have an if, and then an else-if, and else-if, and else-if, and else-if, and else-if, and else-if, and you're just checking more and more stuff, right? But let's say the if was false, the else-if was false, the else would automagically run, right? it would automatically run, automatically run, right? It doesn't need a condition.

It just runs if everything else above it was false. See a lot of people hitting bingo right now. I got you. I knew what was happening. All right, so keep that in mind. You can have an if, as many else ifs as you want, and then just one else. And you don't need to have an else. It's just if everything else was false, The else will just automatically run right? It just will it doesn't need to check anything. It just runs So it's typically used for like a default All right. So let's look at this in action All right, we're gonna declare a variable Const pizza equals Domino's All right cons pizza equals Domino's because we're declaring a variable called dominoes. Now pizza called dom, that's set equal to dominoes, right? That is assigned the value of dominoes. Now, why did I use this keyword here called const? Anyway, I did the homework, know why I called this const pizza, not let pizza?

Because const or constants, it don't change. It'll never change. It will always be dominoes. It's not changing to anything else. It will never be reassigned. It can't be reassigned when you have a const That keyword that's declaring a variable, but you said as a const it can't be reassigned Right. So just like pizza will always be dominoes It can't be reassigned right? So if you're going to declare a variable you can use let or stuff that will change or const for stuff that will never change like pizza being equal to dominoes. All right. So we have our const of pizza equaling dominoes. So let's check out our first if here. Does pizza equal Papa John's in value and type? Hell no, right? So if the if is not true, we move on to the else if, right? We move on to the else if.

So here we're looking at the else if and we say, hey, does pizza equal dominoes in value and type? That is true, right? We can see that pizza does indeed equal dominoes in value and type. So print it to the console would be all aboard the train to Flavortown. The console is this thing right here Right. This is the console. We would see something be printed here that says all aboard the train to Flavortown All right Cool what if What if we didn't know how to spell dominoes, right? What if what if we spelled dominoes with an E? We're new around these parts. We spelled it with an E. What would happen? What would eventually wind up being printed to the console? Will be printed to the console It would be what are you even doing with your life exactly that is what would be printed to the console because right If there was an E here Pizza would not equal Papa John. So the if would be not true. We move on to the else if.

In this case, pizza would not be equal to Domino's because we spelled it wrong, right? So then we'd go to the else. Did the else need to check anything to run? Did the else need to check anything to run? No, it just ran and we print it to the console. What are you even doing with your life? Cool. So this is the idea of you can have ifs, as many else ifs as you want, and then else ifs. We're gonna see a lot of this in action. We're gonna get a lot of hands-on keyboard time with this stuff. So we'll see a lot of this in the next coming weeks. All right. What is the danger between assignment and comparison? Why do I throw that up here with big red alerts? What is the danger between assignment and comparison?

Yeah, if we accidentally used one equal sign instead of two or three, we're gonna run into a very specific error. Let's actually copy this code from here and I'm gonna put it into my console. Let's go ahead and copy it. And so I'm just gonna paste it into my console and I'm gonna hit enter. so we can see that it printed to the console all aboard the train to Flavortown right all aboard the train the Flavortown but let's run it again let's run it again but instead of doing three equal signs here let's do one all right let's do one and if we hit enter what assignment to a constant variable somebody tried to change dominoes to Papa John's like what were they thinking right what happened here yeah right here when there's one equal sign what just tried to happen when there's one equal sign what what what just happened there since it's one equal sign it tried to reassign right it tried to reassign it tried it tried to set pizza to Papa John's but const said hell no pizza is constant and will always be dominoes you You can't change it to anything else, right? That reassignment did not come through. This is a Domino's house sold. This is a Domino's bootcamp. And they got got. Right? So we gotta be careful. If you ever do this one equal sign, what you're gonna wind up doing is not comparison, right? It's not gonna be comparison. It's going to be reassignment. So be careful.

Don't get got. When you're doing comparison, you need two or three equal signs, not one. One is assignment. You got, you got, got. Mozilla, thank you. All right. The cool thing is we can actually put multiple conditions in our conditional logic, right? So if we, where'd my pencil go? If we wanna check for two things at the same time, we can check. So if name equals Bruce and your parents are dead, then we can turn off the bat signal because Batman is here, right? So that's both. Both have to be true. And if both are true, we can turn off the bat signal because Batman is there. So double ampersand is and. Both sides have to be true, right?

The left-hand side has to be true and the right-hand side has to be true. We can also have or, right? Liana Spider cuz confirmed. The outside, huh? All right, we can have or, right? Or means that just one of them has to be true. So if day equals Saturday, or, right? Or day equals Sunday, then we know that it's the weekend, right? Only one has to be true. So we're gonna start to see our conditional logic get a little bit more complex. We can do just straight up, right? Just got straight up one value that we're looking for, right, one value that we're looking for, or we can look for both values. We can look for either or values. And so these conditions can get a little bit more complicated over time. All right, so to kind of demonstrate this, and this will be our, All right, I think this will be our last example for tonight, and then we'll kind of lay out what the next week will look like.

And what I wanna start off with is this example here called class weekend or boring day. All right, class weekend or boring day. Someone said, is JavaScript back-end? JavaScript can run on the back-end and the front-end. What we're looking at right now is front-end or client-side JavaScript, yeah. All right, so we're gonna open up class weekend or boring day. So our starter code. If you're new around here, you need the starter code, you can do exclamation point discord. Go on our discord, agree to the rules, and you'll see all the starter code in our follow along materials channel. All right. So I'm going to go ahead and open up the class weekend or boring day. All right, so here we have, if we look, a form, right? We have a form and that form says day of the week for the label, and then we have an input for the day of the week, right? It has the ID of day, but it's a place for us to put the day of the week. We have a button that we can eventually click That'll that'll help us check to see if the day of the week equals something and then we have an id called place to see So the idea here is if we open this in the browser It's a bit bigger.

What I want to be able to do is put in a day of the week right Put in a day of the week. I want to be able to click the button And I want to see if it's class All right. I want to see if it's class the weekend or boring, right? Is it a class day, a weekend, or a boring day, right? So, if we look, and we have this button that we're gonna click called check, what do we know that we need? What do we know we need? If we're just looking at this, what do we know we need? We need a Smurf, exactly, we need an event listener that's gonna listen for that click. Now, what else do we need this program to do? What do we need this program to do? It's going to listen for the click, but then what are the instructions that it's going to do? Yeah, I need to do a couple of things. It's going to need to be able to get the value out of the input, right? We need some way of getting the value out of the input. Once we have that value that was in the input, we need to figure out, we need to do some comparison, some conditional logic, exactly.

See so many people saying comparison. We need to do some conditional logic, some comparison. We need to see if the day equals Tuesday or Thursday, because then we'll be in class. We need to see if the day equals Saturday or Sunday, because that would be a weekend. And if it's not a Tuesday or Thursday, or a Saturday or Sunday, we need to just say boring, right? And make it sure it says boring. All right, so what we just talked through right there is something we call pseudocode. I didn't really use any like technical jargon, maybe other than like event listener, right? But what we just did is we just talked out loud about what our program is going to do. We call this pseudocode. Whenever I start to write a program, the first thing I do is I talk through my pseudocode. Yeah, it's like a story about the program, exactly, right? Like a story about what I'm about to do. And often I'll sit here and I'll talk to Bob, right? Or I'll talk to my rubber duck, right?

And I will talk through what I want my code to do. In just plain English, we call this pseudocode. So eventually, next week, we're going to spend a lot of time with pseudocode. You're going to write out in plain language the steps that you want your code to take. Right? So that you can then fill in with the actual JavaScript. And early on in your JavaScript career, you'll write pseudocode and spend a hell of a lot of time Googling, stack overflowing trying to figure out like what the actual syntax is to solve the challenge that you have so it's not that you have to have like all this stuff in your brain you write out your pseudocode and then you can look up how to do that thing through your research right and the beautiful thing is if you get good at pseudocode right so people are like how do you spell that Let me pull it up real quick for you. Pseudocode. The cool thing is if you get good at pseudocode, right, you can program in any language, right? We're learning JavaScript, but the skills are transferable. Most languages are gonna have variables, conditionals, functions, and loops. You might call them slightly different things, but they're gonna have all that same stuff. And if you get good at writing pseudocode and figuring out how to fill in the syntax based off of your pseudocode, you can code in any language. So it's a really powerful skill and the biggest skill that I want you to have As we start going through the next couple of weeks and we're going to spend a lot of time on it Cool, but let's uh, let's jump back to our code here All right, so we kind of talked through what's happening in the html We know there's a form where we need to get stuff out of this input that has the idea of day We know we have a button that we need to put a smurf on smurf fun So we can hear the click and we know we want to eventually put the result like probably in this h2 or something Well, so here we go. I have some Pre-written logic here.

I have my smurf. I Have the ability to get the value out of the input This is how you get the value of the input the input had the ID of day I can get the value out of it. So whatever was put into that input, I can get the value out. What I want you to do is I want you to take five minutes and I want you to write some code. Look at the conditionals we had in the slides, exclamation point slides, and I want you to say whether it is a class day, a boring day, sorry, a class day, a weekend, or a boring day, all right? Put five minutes on the clock and you're gonna try getting this done Music on for you Dig deep you got this. It's in practice. Look at the slides Use your googling You got this oh geez a slow jazz What happened to no typing today? You got got. I'm not too excited. Thank you for the hydration. Cheers to you. Whatever, whatever day you want, everyone's like, I thought we weren't typing today. Do y'all put your keyboards away? Like they're just stored away in the closet.

Yeah, I got, what can I say? Yeah. out of here with the Duns. How are you unwinding after class sessions these days? I haven't been, I've just been, I've been working, people saw me, I added folks to that Northeastern channel at like one o'clock in the morning. I've been grinding folks. A lot of work to get this stuff done. Can you repeat the assignment? It's to make this work. You're going to write your conditionals to see if it's a class day, a weekend, or a boring day. I get my sleep. I'll skip on my sleep, but what you do with the time that you have awake About three minutes left folks You got this dig deep What's the difference between inner text and inner html one just puts text one can put Uh a full bit of html like you can put like a whole div or a section or a paragraph, you know Do you have a full-time job on top of teaching? Yeah, I teach I teach during the day too. I run a help run another boot camp during the day A non-profit boot camp for folks of color called resilient coders What's the difference between Java and JS? They're two different, completely different languages.

We're actually gonna talk a lot about that. The people that wrote JavaScript were like, hey, what's a popular language? Oh, Java's popular. Let's call ours JavaScript. I'm lost. You can't be lost. We're not, we're not here to do anything today. We're here to just to be sponges, right? All this stuff, we're going to go in deeper. What is TypeScript? You can think of like TypeScript as JavaScript on the right way with extra bits and bobs that make it a little bit easier to be maintainable and write cleaner. Minute left, folks. Will we learn OPP? Yeah. We'll learn OOP, object oriented programming.

Should we learn TypeScript along JavaScript? Hell no. Learn JavaScript and then if you want to pick up TypeScript, you can. 30 seconds, folks. I prefer functional or OOP. I think my brain just works better in OOP. I mean, I write a lot of functional code, but I think my brain just thinks better, object-oriented. I got my headphones in. Alright folks, come on back, come on back. Let's do this thing. We'll go over the homework and we'll do a raid. Come on back, come on back, let's do this thing. All right. Chill the music here. All right, so we already have it set up with our smurf, right?

We already have our smurf set up. we have the ability to pull the value out of the input, right? Then we just need our conditional logic. So let's just go ahead and put the conditional that we've seen already. We saw with the dominoes example, we saw an if and else if, right? And then an else. So let's just use that for here. Now, we're gonna check at first to see if day equals what? Day equals what? Thank you, Sonia. If day equals what? Yeah, we're gonna see if day equals Tuesday. Or, and how do I say or? How do I say or? Yeah, there we go.

Double pipe character or day equals Thursday. Cool. And if it's day equals Tuesday or Thursday, we could put it into the DOM. Like there's a way to put it into the DOM. I'm gonna let you figure out how to put it in the DOM. I'm just gonna use an alert for now. I want you as part of your homework, like put it into the DOM so the user can see it. So I'm gonna say class day, right? Right, I'm gonna say class day as an alert. Alert will just be like a pop-up, right? I want you to put it into the DOM. All right, so if it's not Tuesday or Thursday, what's the next thing we wanna check? What's the next thing we want to check? Hey, I want to check for the weekend. So we'll say day equals Saturday or day equals Sunday.

Cool. And if it is, we'll just going to alert weekend. Right? And if it's not Tuesday, Thursday, Saturday, or Sunday, what do we want to alert? Exactly. Boring. There we go. Cool. All right, let's save this and see if we got anything working here. All right, let's refresh. Let's type in Tuesday and click check. Boom, we got class day. Nice, let's try Saturday. Boom, we got the weekend and let's try Monday. All right, beautiful, we got boring in the pop-up.

Cool, so what's working? Oh, if there's like one problem that you're probably gonna run into with the way we have this coded right now. Yeah. The case sensitive. Exactly. Right. Case sensitive. Exactly. So if we were to come back and we already do this, we get boring. What? It says Tuesday, but we get boring, right? We still get boring when we type in Tuesday with the lowercase T because we look our code, it's saying this day equal T, capitalized T, right? And so we have to make sure that our day value, right, our day value matches exactly the string or it won't be a match. It is case sensitive. So part of your homework is to figure out how to make sure that this is not case sensitive, right?

So part of your homework is to make sure that you can make this not be case sensitive. AriaDNVA, thank you for the hydration. Cheers to you. So due Tuesday, a class day, I want you to have this working where it will work with lowercase capitalized, right? So it doesn't matter. The cases don't matter. And I want you to show it in the DOM, like I wanna see the result on the page, right? If we look, there is a place for you to put, if it's class day, weekend, or boring day, I want you to put it in there. So that's part of the homework. Make sure that it works with all the casing and then make sure you put it in the actual DOM. Cool. All right, we are going to save the Angry Parent Simulator and our temperature converter until next class. We'll save those for next class. And let's talk about the homework. So next class, we're gonna go deeper into JavaScript, right?

We're gonna go deeper into JavaScript. What I need you to do as part of your homework is plan out your networking for next week, right? What events are you going to? What conferences are you going to? How are you going to meet two people already in tech that are not friends and family, right? Remember this week is supposed to be one, next week is supposed to be two. So don't wait until next week to plan out your week in terms of networking. Make sure you plan out your networking now, right? Next, you have two different things I want you to read. I want you to read the javascript.info variables. and at the end there are tasks, right? I want you to set up, I want you to do the tasks that are at the end of each of those, at the end of the variable section, and I need you to read the function basics, and I need you to do the task at the end as well, right? This is all due Tuesday, all due Tuesday. Line out your networking, do these two bits of reading, do the tasks that come along with the reading, and then I want you to go back through all three of the projects that we've done so far. So you're going to go back to the YouTube picker.

You're going to go back to the not so great calculator, and you're going to go back to the, what day it is. I want you to add something to each of them, right? I want you to add, I want you to add, uh, something to each of them, right? I want you to add something to each of them, right? I want you to for the YouTube background picker. I want you to Right. I want you to add a different color for the or the Not so great calculator. All right, but not so great calculator. I want you to add another Like value there. I want you to have like another button like a minus five. All right, what day is today? I want you to make sure that it works with any casing and I want you to put the result in the DOM All right. You got a lot of stuff that I want you to add to change to manipulate but I Want you once you did once you figured all those things out I want you to delete all the JavaScript and do it again for each assignment And then I want you once you get it done delete it again and do it and do it And so you don't need to peek at the examples So the point here is to get that repetition in so you don't need to look at the example. And once you no longer need to look at those examples, you will now have a base of syntax that's going to carry you into the next couple of weeks that's already in your brain. Cool.

And then the last thing I want you to do is something nice for yourself this weekend, right? So whatever you want to do for yourself this weekend, do something nice for yourself. You deserve it. You've been working hard. We're getting into something that's gonna be a little bit difficult. So don't forget the third thing. We manage our frustration, we're consistent, and we take care of ourselves. Do something special for yourself this week. I'm gonna ask on Tuesday what you did, so you better have done something nice. All right, that's all I wanted to cover tonight. Hopefully you had some fun getting into the basics of JavaScript. Let's go ahead and do a raid. And after the raid, the weekend is yours. Have some fun. I'm probably gonna go live to test out the sound stuff before Sunday.

We have office hours on Sunday So coming through I look at some layouts. We're gonna have some fun. We're gonna answer some questions So I'll see you all on Sunday and then the rest of you I'll see on Tuesday. So let's go and do a raid Boom I'll see you over there Have some fun, have a wonderful rest of your day, a wonderful weekend, and it gets way more exciting from here, folks. This is just the beginning of JavaScript. Can't wait to see you in two to three months with all the skills that you have. Let's read.

End of Transcript