7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 12Length: 1.4 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 What You Need

Before we dive into coding, let me show you the tools you need to follow along. I'll also show you how to get started with the starter project.

Related Links

1.2 What You Need

Before we dive right into the Document Object Model, I want to very briefly go over the tools that I use and that you will see on screen. So that if you want to follow along exactly as you see them, you will have the tools available to you. So the first one isn't necessarily a tool as it is a framework. It's a JavaScript runtime, it's called Node.js. And if you don't already have this installed then I highly recommend that you do so because as you work more, and more with JavaScript, you're going to be using, not necessarily Node, but we install Node to get a utility called Node Package Manager or NPM. That's how we manage all of our dependencies, and it's not just for JavaScript. We've, you do stuff with the PHP, ASP.NET, Ruby, I mean there's a lot of different server-side technologies that you can use NPM is involved in some way. That's just how it is today. So you will want to download and install the LTS version, that stands for long term support. Now, the version number really doesn't matter as far as we are concerned. Now of course if you do start writing Node applications, which is really cool because you can write web and desktop applications, then yes, the version number is kind of important. However, for our purposes we just want NPM. So just take whatever the long term support version is, because that is going to be supported long term, and download and install it. It is a very straightforward installation. Just take the defaults and you're good to go. So that's the first thing. The second thing is a code editor and you might already have one. But if not, I highly recommend Visual Studio Code. The website is code.visualstudio.com and this is a cross-platform code editor, and it's very very good for JavaScript. In fact it's probably the best editor for JavaScript. Now of course there are other alternatives if you want to use them like Sublime Text, there's Adam, there's even the full blown version of Visual Studio. I mean you use whatever you are comfortable with. But I highly recommend Visual Studio Code. Once again, it's a very straight forward installation. Just take the defaults and you are good to go. So those are really the two main tools that we will use in this course. The other thing that I wanna talk about is the source code for this course, which of course we haven't written yet. However, in the GitHub repository, there is going to be a folder called Getting Started and it's going to have everything that you need to get started with something from scratch if you want to create your own project, or if you want to start a lesson from scratch, you can just copy the Getting Started folder and well, get started that way. But this is an NPM project, and it is almost completely set up. In fact, all we have to do is run a command from the command line and that is going to install everything that we need to get up and running. Because what I want to use is an HTTP server. Because at least as far as I am concerned, that's the best way to do any type of web development is to incorporate an HTTP server. Because when it comes to working with JavaScript, yes, you can go to whatever HTML file and double click and load that in the browser. And for the most part, it's going to work. However, there are some things that will not work, like if you do any type of HTTP communication, that will not work. So, if you need to do anything like that, then you're going to have to have a web server. But, I like to have a web server anyway. So that is what this getting started package is for. It will install a very lightweight HTTP server so that we can just get up and running very quickly. So we want to go to the command line. Because we want to install all of the dependencies for this getting started thing. So we of course want to navigate to the folder, in this case it's down one, and then getting started. And then we're going to run NPM install. And this is going to install everything. And then once it's done, then we can file up our code editor and we can get started. And the really cool thing about lite-server is that it also watches the files in our project and then any time a JavaScript or HTML file is changed, it's going to automatically refresh the browser so we don't have to switch back and forth between code and the browser and hit refresh all of the time. So to fire up our server, we just want to say npm run server, and that's going to run our server. It's going to tell us where our server is located, that is the address and the port. In this case, it's local host with a port of 3001 so let's fire up the browser. And we aren't going to see anything because there is an HTML file, but there's nothing there. So if we go to local host port 3001, then there we go. In fact, this is new to me. I was not expecting to see this. So it looks like lite-server now has this UI for managing this particular installation, which is cool. That's great. That doesn't do anything for what we really wanted to see which was this. Which of course, is just a blank page because, as I mentioned, there is an index file but there's nothing there. If we wanted to view the source, of course, there's nothing. So, let's add something. Let's go to the index HTML file inside of our code editor, and we're going to start by just pressing the exclamation point, followed by a tab, that's going to give us some boilerplate HTML and then for the body let's just say Hello, World. So we're going to save that. Now, if we go and look at our tab that has the file, well, that did not automatically update. But that was also because we didn't have any HTML so it didn't inject the auto updating feature. So now we have our index file. And if we look at the source code, we could see there is what we added in. But we can also see that lite-server is injecting some HTML. And that is so that it will sync between what we see in the browser and what we have in our code. So if we change this again, save it, go back to the browser, we can see that the browser automatically updated. And so now we have a place to get started and in the next lesson, we will look at how to find and retrieve elements in the document.

Back to the top