Transcript from the "Writing the JavaScript" Lesson
[00:00:00]
>> Brian Holt: Everyone at a good starting point, we're ready go? Stoked? [SOUND] All right. [LAUGH] So here's what I wanna do. I wanna have some sort of running total, right? I wanna actually keep track of a number of what's been added, what's subtracted, right? Because if we come back over to our calculator.
[00:00:22]
It's this one, okay? So if I do like 5 + 5, right? You have to know what was in there previously, right? You have to keep track of what was in there, right? Because if I do 5 + 5 that's gonna be 10, right? Where's that other 5 being held?
[00:00:36]
You need to hold it somewhere, right? And now if I say + 36, you're gonna do 10 + 36, but I have to hold that 10 somewhere, right? So I'm gonna call that my running total.
>> Brian Holt: So let runningTotal = 0, right? Cuz you're gonna start off at 0, you're gonna assume that the thing starts off at 0.
[00:01:01]
Now I need to keep track of what I'm gonna call the buffer, right? So if I say like 25 or clear 25, right? The buffer is gonna represent what's actually on the screen at any given time. Now, I'm gonna give you a bit of advice that you're welcome to not follow.
[00:01:20]
You could query the DOM every single time that you wanted to know what was on screen, right? I find it preferable to keep that information in JavaScript and constantly write it to the screen. So you have to decide what your source of truth is. And you'll hear that frequently with JavaScript developers is where's your source of truth?
[00:01:38]
Is the source of truth what's on the screen? Or is the screen simply displaying where the source of truth is coming from, right? So I'm gonna tell you that I think you should keep your source of truth out of the DOM and in JavaScript land. Because there's a bunch of reasons for that, but in general, it's just easier if everything lives in JavaScript.
[00:01:59]
And your interface is just a reflection of your source of truth. Does that make sense what I'm telling you, right? So I could just say, what's here on the screen and query that out of the DOM. I could pull it out of the DOM. To me, it's better to keep that in JavaScript, okay?
[00:02:17]
So let buffer, the initial thing that's going to be on there is 0, right? It's gonna be string 0. Because what's actually gonna be on screen is always going to be a string. So it's good for us to keep in mind what is that and keep that as a string the whole time.
[00:02:34]
Then we wanna have previous operator.
>> Brian Holt: So if I click 25 + 35 and click =. What was I doing before? What did I click before? I clicked +, right? So I have to keep that + somewhere, right? So you have to hold on to that bit of state, right?
[00:02:59]
This is a stateful interface. When I say stateful interface that means that it's keeping track of previous actions despite the fact that it's not showing me those actions, okay? And then if I hit equal then I have to commit or flush out that operation. Good so far? Okay, so that's a previous operator is gonna represent.
[00:03:19]
It's gonna represent like if they clicked plus or minus or divide or multiplication or anything like that.
>> Brian Holt: Okay, and then here I'm just gonna grab the screen const screen = document.getElement by ID.
>> Brian Holt: Or querySelector rather. querySelector.screen.
>> Brian Holt: And this is where we are actually be writing out to.
[00:03:52]
Programming in general is about taking large problems and breaking them into smaller problems, and smaller problems and breaking them into smaller problems until eventually you get to a point where it's like okay, I can do that. [LAUGH] Right, so,
>> Brian Holt: Let's just pick a button or pick a problem and start solving it, right?
[00:04:18]
So let's start with what happens if a user clicks one of the buttons. So function, button click,
>> Brian Holt: I wanna start with the init. So I'm gonna write a function called init. So if I'm writing just raw JavaScript like we're doing right now, I tend to have init function where I know this function gets called once and it kinda just sets everything up, right?
[00:04:45]
And then down here I will call init.
>> Brian Holt: There's no reason that you couldn't just do this all in the global scope. You don't have to put it inside of an init function. For me, I just like it because I can scroll down through a bunch of stuff and say okay, here's my init function, this is where everything gets set up.
[00:05:04]
For me, it's just kind of like future documentation of like, here's a function that gets run once. If you need to set event listeners or do anything like that, this is the place to do it. Personal convention, I'm gonna even say it's common in the JavaScript community. It's just something that I choose to do.
[00:05:19]
The other thing I really need to set up here is I need to set up my event listener. So I'm gonna say document.querySelector.calc buttons. So this is the data that wraps all of the calculator buttons.
>> Brian Holt: And then here I'm going to add an event listener of click,
[00:05:50]
>> Brian Holt: Function event.
>> Brian Holt: And then here I'm gonna create some function up here called buttonClick that's actually going to handle that. I'm not gonna write it in here cuz I think this is gonna be a little bit easier to do. So what I'm gonna do for that is I'm gonna say buttonClick.
[00:06:06]
And I'm gonna put event.target.innerText,
>> Brian Holt: So let's do this.
>> Brian Holt: So you can see any one of these buttons here has a 7, 8, 9, multiplication 4, 5, right? So by passing in that inner text, this button click is going to receive whatever that particular button click had on it, so it's gonna be some sort of value, right?
[00:06:42]
It's either gonna be backspace or 7 or 8 or 9 or something like that.
>> Brian Holt: I could just pass the event in there directly. But this just keeps the logic a little, it's gonna be a little bit cleaner here in buttonClick because I've already pulled the value out.
[00:07:00]
>> Speaker 2: Instead of add event listener, what does event mean? So on click you're calling a function that takes in something called event. And then you call the buttonClick function with that event, what is that? What does that mean?
>> Brian Holt: So this event is gonna be the actual DOM event, right?
[00:07:17]
Remember we're looking at before whenever you typed in it, it will give you back an event, right? So this is coming directly from the browser, the browser hand is like here is the event that just happened.
>> Speaker 2: And I thought the event was the click.
>> Brian Holt: That's the event type.
[00:07:32]
So that's the type of event that it's listening for, right? So this is listening for click events. And then this is the event that comes back from the browser.
>> Speaker 2: I clicked on this thing?
>> Brian Holt: So that's what the event.target is, right?
>> Speaker 2: Okay.
>> Brian Holt: So this event has a bunch of stuff on it.
[00:07:49]
For the most part usual, you don't really care about most of the other stuff that's happening. But yeah, this comes from the browser. And there's a ton of stuff on it. In fact, we can take a look at it here in just a second what it actually looks like.
[00:08:01]
>> Speaker 2: I just don't know, I don't understand what it is if it's not the click event that we're doing.
>> Brian Holt: So let's just start from beginning and see if this helps. So here I'm grabbing the calc buttons, right? This is gonna be a div, right? On the page, if we go over to our index.html, it's this div, right?
[00:08:23]
>> Speaker 2: You mean section?
>> Brian Holt: Section, yeah, relatively the same thing. Yes, section. So it grabs the handle on this section, okay? And then it adds an event listener and just says whenever a click event happens, run this function, okay? The browser, whenever it called URL even listener, here's everything that I know about this event.
[00:08:45]
That object is the event object.
>> Speaker 2: Okay, so that might have things about the position of your cursor on the screen, the time that it happened, the date?
>> Brian Holt: A bunch of stuff like that.
>> Speaker 2: Okay.
>> Brian Holt: Yep. Make sense?
>> Speaker 2: Yes.
>> Brian Holt: Cool.