Transcript
  • JavaScript

Getting Set Up

From the class:  The JavaScript Runtime

I'd like to show you around how to use the source code for this class so you can play along with the examples. You can find the URL for the source code in the show notes for the class. The URL is up here as well. So all the source code is on GitHub, and you can grab it by getting this link here, and then cloning the GitHub repository. Once you've copied the URL, you can type get clone and then paste it into the console.

And then change into the directory, and you'll find for each class, or each lesson in the class, there's a folder that will demonstrate all the code that we use in the class. So let's change into the basic folder, and I'll show you around an example. The example app should have three files, and this is just going to be a regular Node.js web application. So there's a file called server.js where you'll find that code.

Now, this is not a class specifically on Node.js, HTTP, or the web, but I find that the Chrome browser debugger is so good at showing us what's happening that I'd like to spend most of the time in this class in the Chrome debugging tools. So that means I want it to have an easy way to serve up this JavaScript into the browser. So that's what this HTTP server does.

So what we'll do is we'll use Node.js to start up the server, and then we have three URLs that we can use to load up the app. The HTML, the app.js, and then a standard 404 error if you hit a URL that doesn't exist. So that's our simple web server, and then over in the app.js is were we'll put our example code, and then in the app.html is where we have any HTML that we might use, but mostly it's for this script tag here, where we'll load up the application.

Now, the reason I'm using Node.js and not another framework like Meteor to demonstrate these concepts is because I want to remove all of the magic, and just show you the very specific thing in JavaScript that I want to show in the various lessons. And so I wanted the simplest possible framework that we can use to demonstrate these concepts. So to start up the app, what I need to use is Node.js. So I can type node, and then server, or I can type the full server.js.

But with Node I can just type node server, and that'll start up the server, which is listening on local host 3,000. So next up we'll open up the Chrome debugger in the browser. So what I've done here is navigated to the local host 3,000, which is where the server's running. And if we look at the source code for this, it's loaded up our application.js file. And now we have access to that inside of the debug tools down here in the bottom.

So just to make sure that it worked OK, I can type sayHello and call this function, and that drops us into the debugger, as expected. Now, since we're not going to be using any of the HTML up here, what I'll often do in these lessons is click this button here to take the debugger out into its own window, and then make that take up the entire dimension that we have available. So I'll do this, and then make it take up the entire window.

That makes it easier to see what it is that we're doing. Now that we have our JavaScript in the debug developer tools of Chrome, we have a JavaScript console down at the bottom, we can look at watch expressions or the call stack, variables that are in scope, and use all the power that this debugging console gives us.

Now, if you don't have Node.js installed yet you, can head over to nodejs.org and click the Install button, and just follow the instructions. It should be pretty easy to install, and then you should be able to use the node command line tool that we were just using previously. So now you should be all set up to follow along in the rest of the class.