Storing Data in JavaScript

[00:00:00]
>> We were just about to explore the world that maybe for some of us is quite familiar. For those of you new to JavaScript, we are going to walk through this quite pure language. JavaScript becomes the most popular language in the world, because it runs in the web browser, which is almost an operating system level of available features to it.

[00:00:27]
So let's actually even draw that for a second. Another sort of schematic diagram here of the web browser. I think it'd be useful to keep in this corner here for a bit. That's very strange shape, keep in the corner here. Okay, so the only file type we can open directly in the web browser, actually, when you open a www.wikipedia.org, whatever page, it's loading what file type Alexa, what's the only file that you can actually open directly in the web browser?

[00:00:58]
HTML. HTML, exactly. So it's literally, and we're doing this mostly on our local computers, that means on our computer itself, but it's literally taking in, for example, like app.html, loading it in. And then that is being parsed, that means line by line it's being interpreted, read figured out what it says by the HTML parser, there it is.

[00:01:26]
Okay, and then that is adding to our C++ list of, look at that, list of elements, there we go. C++ list of elements, those are added to by the HTML parser. However, HTML is also where, if we look at our HTML code there, we can add a file of JavaScript code.

[00:01:56]
We always talk in hard parts, if you ever watched it, about JavaScript starts running, but how? You know what? It says running by us linking a script of JavaScript code, a file a JAVA script in our HTML that's going to start our JavaScript engine executing. Here it is, says our java engine, and look at this, JavaScript engine is gonna have a store of data that can be changed.

[00:02:24]
It's gonna have a thread of execution that can thread through and execute code line by line and run code. What a dream, it's beautiful. Let's do it. But note, other than that, Java is a pretty basic language. I think it's very nice language, there's a couple of very cool things.

[00:02:45]
We're gonna see that JavaScript lets us have code saved and functions arbitrarily. That means, without us directly influencing it ourselves, execute, run later on out of order in which they were saved or defined or stored, known as asynchronicity, out of order. On by the way, user actions happening.

[00:03:12]
When they do that, they're gonna need to have the data from when those functions were saved defined. That's known as closure, that's our favorite feature from JavaScript, right? That's the backpack, there we go. [LAUGH] So JavaScript though, besides that, it's pretty basic language. Sees data, runs code to change that data, does it inside execution contexts that will place many stores of data.

[00:03:36]
That is it, it's gonna become profoundly powerful though, if we can save data, change it, and then use it maybe in the DOM, in a C++ list. Which we know as soon as anything's added here, will be displayed as pixels on a webpage, beautiful. Note actually technically what's happening there is the render engine is shooting out an image of the page to the graphics card, the graphics hardware 60 times a second.

[00:04:10]
Kind of cool, right, 60 times a second. That's actually the output of the web browser. It's like throwing funneling out an image, 60 times a second to graphics card. Okay, great. So we know then, for our purposes, we'll just keep it as like a nice web page, there it is.

[00:04:28]
And that's our output, we are going to have our DOM in purple from now on. And a big change, there it is, it's our C++ list of elements. There it is, list of elements, beautiful. The first thing we're adding here, Phil, is what element from our HTML which is not C++.

[00:04:53]
That's our HTML code. I'm probably gonna just, yeah, we are gonna run our HTML code first. What's the first thing it adds to our C++ list of nodes, Phil? A script element or a script node? Script, exactly. Script, linking to which file? App.js. And Phil said it better than me there, exactly.

[00:05:11]
A script node, perfect. Now, that won't show anything on the page. But we know that anything that's added to the DOM will be added to the page if it's a visual element. And this is all handled by the core of the web files of or web code of the browser.

[00:05:31]
Okay, beautiful. Let's go into JavaScript. Here we go. JavaScript has a, well, JavaScript, it has a memory for storing data bit constrained here, so we'll try and keep this tight. And it has a call stack, That is going to be a list of the functions that are currently executing, currently running.

[00:05:59]
When we start off running JavaScript, so I'm not gonna assume anything here, I know hopefully many of you have seen hard parts of JavaScript, maybe you haven't. We know that JavaScript is going to, when running, automatically be in the global the whole file, so the call stack will keep track of what's running.

[00:06:17]
And it's initially running all the code, which is the global almost single the overall file of code is a function called global that is now running. As soon as we start running a function, it will be added to that stack of functions being run, that list of functions being run so that we can keep track of where we are.

[00:06:35]
Okay, but let's start our very first line of JavaScript here. Let's start with who would like to call on? Let's have John. You're up John, what's our first line of Java? So what are we storing in memory? And note people, we're storing data, and user interface engineering is all about displaying content or data.

[00:06:55]
And be able to change it, I'm very excited that we're storing some data, that might be able to be changed. John, go ahead. First just interface with the pause, and it's setting it to the undeclared, That sounds very fancy already. [LAUGH] Yes, so we are going to in line 1 store, and keep it simple for us John, So it is setting it to the Hi then.

[00:07:19]
Yes, Hi, and then it'll hard for me to write hand emoji, so I'm not gonna do that for long. So what are we gonna do, Alexa, right after that? Then we're gonna reassign post to the string Hi. Beautiful, reassign, much easier for me to write there it is, perfect.

[00:07:39]
And now things immediately get kind of interesting. We have here, console log, post, the value of post selector is what? That string hi exclamation. Beautiful, there it is. Okay, this is interesting. So, the console, first thing to say, the console is not in JavaScript, not a chance. Let's have it over here, purple, not meaning it's in the DOM, just not in JavaScript.

[00:08:13]
There it is. So that is to say, it's not a JavaScript engine but it is in our web browser as a whole. So it actually sits as a separate feature as part of the dev tools, that somehow from JavaScript we have access to it. And we get access to it actually automatically as soon as JavaScript loads in the web browser, its memory gets populated with a very useful object, just a regular JavaScript object by the name of console.

[00:08:45]
There it is. And init is a function, a method of the name log,that when we run it by putting params on the end, ain't really doing all that much in JavaScript. Much more interestingly, what it's doing is it's linked out to the console where we then, so our log here is really speaking to the console.

[00:09:13]
That's actually a whole wealth of functions in here. Does anybody know any other ones? Yes, Phil, please Error Error, good cool. I definitely know all of these. [LAUGH] So I'm not gonna spell them just in case, okay, maybe it's error that some of the error possibly, yes. Yeah, exactly.

[00:09:29]
Yes, Justice, go ahead. Table. Table, yes. I knew that one, table well done, brilliant, table. Each of these when run ain't doing anything all that much interesting in JavaScript. And you got one? Yeah, time. Time. He's a definitely all of them. Yes, Paul, please. Dir. Dir, that dir, exactly, I knew that one.

[00:09:51]
I was recently taught that one, brilliant. All of these are all functions that when run, they are what they call technically web browser APIs. That means they're features of the web browser that we API interface with from JavaScript, okay? What are we gonna be displaying here Alexa on our console.

[00:10:11]
The string Hi! Exactly, perfect, the string Hi exclamation mark. So our console is a object full of functions that are backdooring out of JavaScript into another part of the web browser. Well, this might give us a clue. I got some hope that we got this lovely data that we can change in JavaScript and can take that data and maybe access our C++ object known as the model of the page, the document.

[00:10:43]
Not just with HTML, it was a one-time very intuitive load onto this object, onto this list, but perhaps we can do it with JavaScript. And that would require that in JavaScript, we had some sort of label for that feature outside of JavaScript called the DOM. Maybe the object would be called DOM.

[00:11:07]
No, what's the object called, Phil? Document. Document, exactly. We do get automatically in JavaScript a regular old object by the name of document. And it's gonna have, folk, a hidden link. Whenever you see in JavaScript hidden links out to other parts of the web browser, know that it's probably being stored as a hidden property on an object.

[00:11:38]
We can't just have links out to other parts of the web browser directly stored in JavaScript. What even is that as a structure, as a way of storing stuff? We can store, what data structures can we store in JavaScript? What data formats can we store? Justus, what can we store in JavaScript?

[00:11:52]
1s and 0s? Yeah, wow. In JavaScript, I mean, you can definitely store the number, so numbers. Yes, what else John? There is objects Objects, perfect, strings, arrays. Binary. Yeah, we have Boolean, but really we have nowhere is there like hidden link, nowhere is that linked to outside feature.

[00:12:15]
So the way we capture that always is within an object. In this case, our object stored in the label document is gonna have a hidden property linking to this position in C++, where we have our list of all the elements on the page. Beautiful, and it's going to be full to the brim, or as we say in England, just so you can spread a new word, because it isn't normal phrase, but it's gonna be chock a block with, [LAUGH] I don't wanna be a clean show your parody.

[00:12:50]
Okay, a block full of functions that when they run are gonna check what's linked it's the C++ environment, C++ runtime, in which we have a list of elements that will auto be added to the page. So it's gonna link to that whenever we run a function on document like, well there's a few, query selector, but there's many, they are not going to do only work in JavaScript, they're also gonna have a look at the hidden link.

[00:13:21]
See it's a link to this model of the page and do some work there, which is just bloody fantastic. We are gonna have access to this C++ runtime from within JavaScript. Wow, okay. So, data and code to change is only available in JavaScript. A JavaScript file of code, added using HTML, that's what we did, right?

[00:13:45]
That little script added the JavaScript is in an entire run time. It's got three weeks for you to run code. Memory for storing data it can then execute that code and it can also have functions run later asynchronously, which is really cool.