Web API Example

[00:00:00]
>> Will Sentance: Below this blue line here is gonna be the things that are not happening in JavaScript at all. They're gonna be our web browser features. Are they in JavaScript? No, no, no, no, absolutely not. Up here same as normal. Here's our global memory in JavaScript. There it is.

[00:00:34]
Here's our call stack over here. There it is. And here we go, line one, line one, Mark, line one, what do we do my friend?
>> Mark: We're defining a function printHello.
>> Will Sentance: Very nice from Mark, he just came back in and straight on point, excellent from Mark. We're defining a function printHello, there it is.

[00:01:05]
Saved, beautiful. Okay, now things get interesting. Now we head to the next line. What is this line doing? We are going to, I erased much of it so I'm gonna put it back on. But we had our web Browser being a combination of JavaScript and browser features that we get labels for from within JavaScript.

[00:01:36]
And look at this one here, setTimeout is a label for a timer in the web browser. So let's do our first line of JavaScript that's really just gonna be a command, a message down to the web browser features. It's not even gonna do anything in JavaScript. Here it is, setTimeout.

[00:02:05]
All right, here we go. Am I allowed to have someone come to the whiteboard, Mark? No, all right, Ethan, it is your honored moment my friend. Come up here.
>> Ethan: [LAUGH]
>> Will Sentance: Take the blue pen.
>> Ethan: My goodness.
>> Will Sentance: And draw a line for me from where setTimeout is in JavaScript to where its consequence will be in the web browser.

[00:02:29]
Draw me a line from where it is in JavaScript to where its consequence might be on this blackboard here.
>> Ethan: All right.
>> Will Sentance: It's a long straight line.
>> Speaker 4: [LAUGH]
>> Will Sentance: Is he right? Let's give him a huge hand.
>> Audience: [APPLAUSE]
>> Will Sentance: Thank you, Ethan. One up from Ethan, all right.

[00:02:49]
No, okay, good. No, that's perfect, perfect. We have set up a timer in the web browser. There it is, nothing to do with JavaScript. In the web browser there's our timer. Now, what information Brayden, do we need for this to be a successful timer?
>> Brayden: printHello.
>> Will Sentance: Yeah, yeah, sure.

[00:03:15]
But something even more important, Jeff?
>> Jeff: Duration.
>> Will Sentance: Duration of the timer, exactly. Which is 1,000 milliseconds. So there we go, 1,000 milliseconds. That is to say, timeouts, consequences, consequences all in the web browser, what feature? It's the timer and it's gonna take 1,000 milliseconds. There it is.

[00:03:43]
Now, we're not setting up a timer for no reason, we're setting it up so we can run the function on its completion. So let's have over here On Completion and On Completion, Matt, what are we gonna want to have happen? We want to run printHello.
>> Matt: We want to call, we want to run printHello back in JavaScript.

[00:04:02]
>> Will Sentance: So you're gonna grab the printHello function as well, and there it is, our printHello.
>> Will Sentance: On completion, beautiful. Now, is it complete? And this is wherefore we're gonna have to add a new part to our puzzle. And that's my green pen that represents time passing. So we're setting this off at roughly 0, beautiful, roughly 0 milliseconds.

[00:04:43]
That's when this line triggers the work in the background. At 0 millisecond folk, is this timer, this 1,000 milliseconds timer Dan, is it complete?
>> Dan: It is not.
>> Will Sentance: It is not, it is not. But has the JavaScript facade function done its work? It has. Its only job was to do what?

[00:05:06]
Its only job was to do what, Brayden?
>> Brayden: Set the timer.
>> Will Sentance: Set the timer up in the?
>> Brayden: Browser.
>> Will Sentance: In the web browser. That's its only job. So what can we do at that moment after setting up that work, well, at one millisecond, we can move onto what line, Todd?

[00:05:24]
What line can we move straight onto?
>> Todd: Console log me first.
>> Will Sentance: We can move straight onto console log Me first! Look at this, people. Straight onto console log me first. There it is, and I will put our console over here. And if anybody tells me it should be in blue, because my brother feature yes, I know but we'll put it over here, me first.

[00:05:51]
And look at that, isn't that beautiful, people? At one millisecond, and to be clear by the way, these timings here are what I call ordinal. That means that like they're showing us the order of things happening actually would take like nanoseconds to do that next line, but there's a sort of a milliseconds to be easier and there is me.

[00:06:12]
Me first at one millisecond and folk, all of our regular JavaScript code is done. But in the background in the web browser, time is passing, tick tock. Tick, tock, there it is.
>> Todd: Yeah.
>> Will Sentance: Shout out to our favorite big box retailer, there it is.
>> Audience: [LAUGH]
>> Will Sentance: In the web browser, time is passing.

[00:06:37]
And at 1,000 milliseconds, Kayla, what do we think is gonna have happened? Is our timer complete?
>> Kayla: Yeah.
>> Will Sentance: It is.
>> Kayla: It's gonna call the function.
>> Will Sentance: She is spot on. The timer is complete and that function there is gonna head right back into JavaScript. We're gonna put it on the call stack, cuz that's how we run a function on the calls as it goes, and look, tons of time has passed, tons of time has passed.

[00:07:06]
At 1,000 milliseconds, JavaScript with the help of the web browser is going to somehow automatically start executing, printHello. And what's that going to do folk? That's going to put on the console and display in the console. Hello, at 1,000 milliseconds, we get Hello, and people, that's it. Set timeout, all we need to know really is that set timeout ain't really has nothing to do a JavaScript at all.

[00:07:39]
Now, technically it does have a return value in JavaScript is not just not that interesting is like an ID for the timer. That's real Java set timeout is all the way down here in the web browser. That's it's real purpose. Once we realized that, I guess yeah, that bit setting up a web browser feature takes like that time, is zero millisecond, one millisecond meaning we can plow straight on.

[00:08:02]
Look at this, we're going to plow straight on to running at one minute second straight after a console on me first. And then in the background, our time is doing all this stuff in the web browser, nothing to do with JavaScript. JavaScript is just one of the many features of the web browser, the web browser is an incredible application sitting down there, that's it.