Browser APIs

[00:00:00]
>> So, now, these browser APIs over here, we said Fetch is one of them, we're gonna talk about some others. But essentially, the browser can do so much stuff, and the browser exposes so much of that stuff to JavaScript, and has all these kind of like gadgets and tricks and tips and things.

[00:00:23]
And if, does anybody remember Inspector Gadget, was this like cartoon from when I was a kid. I don't know if it's still around, that has, it's like this detective with all this random capabilities, just packed into a little hat, and that is sort of like our web browser.

[00:00:40]
This is like a little logo on your screen, but it can do so much stuff. So, these browser APIs are pretty large [LAUGH] in terms of the surface area of understanding stuff. And so, do you have any guesses for where I'm gonna recommend you go when there's any thing a browser can or might be able to do that you would like to learn more about?

[00:01:07]
>> MDN.
>> MDN, woo, yes, MDN, developer.mozilla.org. So MDN is an amazing learning resource for any kind of web related situation and, look there's a dark mode toggle [LAUGH].
>> [LAUGH]
>> So okay, so let's say I wanna, how does Fetch work again? Okay, well, this is the fetch global function, blah, blah, blah, okay.

[00:01:41]
But this is actually related to the bigger picture Fetch API, which relates not just to JavaScript, but also the wider browser. So I can find all these details about the Fetch API and look, a little breadcrumb to a whole web API's section, cool, cool, cool, cool, nothing much to learn here.

[00:02:03]
And these are only the links I've clicked recently. [LAUGH] As you can see, there is a lot going on. So, again, we're not gonna, by any means we're gonna scratch the surface. We're not gonna by any means cover all of the different browser APIs you should know as a JavaScript developer.

[00:02:20]
None of that cuz it's an ever-growing set and MDN is your friend. Say it with me.
>> MDN is your friend.
>> Yes, and we're gonna be returning to that over and over again. Okay, so, when in doubt, checkout MDN for fun JavaScript facts out the wazoo. So, browser API's, let's talk about a couple of things that we can access in JavaScript.

[00:02:52]
So one thing is we get a fun little window object, wouldn't really call it an API so much is like an interface to all kinds of stuff that's happening here. So there is a global variable window which poke around in the console, gives you essentially the window where you currently find yourself.

[00:03:15]
And by you, I mean this little JavaScript script. [LAUGH] So we can look, for example, at like, okay, what is the location of the current tab in our modern sense that I'm in? Each tab is its own window, because names are hard. And the location might be, for example, to the window API docs on MDN.

[00:03:45]
Guess what? The window is kind of also where we have all of these other handy things that JavaScript exposes to us as global variables. So like for example, we're used to typing document.getelement blah, blah, that's actually the value of the document property on the window object. It's just a handy convenience that the browser exposes that to us in JavaScript as the global variable document.

[00:04:15]
And likewise, the console.logs that we all know and love are also, all of this stuff is in the window, so the window kind of is like, has everything. So there's all kinds of fun things you can poke around in there if you wanna see what else is going on.

[00:04:32]
There's also a property called the navigator. And this is, I guess, a throwback to like Netscape days but the navigator basically means the browser and it's sort of like what's going on with this piece of software that the user is using to read my webpage. So there's all kinds of interesting stuff in there.

[00:04:56]
Again, poke around in your console, see what you can find. But for example on my MacBook, it knows what kind of CPU I'm writing, it also has this, there's a handy and often use dot user agent property that tells you, I'm in Mozilla, so Firefox browser which is running Gecko, which is Mozilla's or Firefox's browser engine, analogous to Chromium.

[00:05:26]
If you're in Chrome, you probably see Chromium there, yeah? Anybody else got any other fun user agent values? And yeah, and again, it knows even what kind of architecture I'm running on. So, all kinds of fun stuff in there.