How to Write JavaScript on Your Own Computer

Web services that provide online code editors and tutorials are great – amazing actually. Websites like khanacademy.org and codecademey.com are terrific at guiding people who are totally new to programming, through the basics of web development, and helping them learn how to make all sort of cool projects. However sites like these also fall short of explaining exactly how these web technologies are used offline, in your own environment. Just you and your computer and a web browser – how do you start making stuff on your own?

A common question I see too often is, “How do I make JavaScript programs on my own computer?” Other questions might be how to make web pages using HTML offline (as in, not in Khan Academy), or perhaps PHP or some other language that is taught in an online learning envirnoment, but the process of using that tech on your own machine is just not clear. Well, we’re not going to cover starting up our own server in this tutorial… so that rules out server side languages like PHP – but we will focus on using JavaScript because it is incredibly simple, and there’s no reason it shouldn’t be explained in any of these online tutorial services.

In doing so, we’ll also inadvertently cover how to start making webpages offline as well, since the method we’re going to use to run JavaScript involves creating a webpage that will be written in very simple HTML.

What You Should Know

You don’t need to know anything about programming, or really much about JavaScript either. If you haven’t already tried out Khan Academy or Codecademy yet, I still recommend both of these sites, but after walking through this tutorial you’ll have what it takes to write JavaScript on your own computer (as in, not an online learning environment running code on someone else’s server). That being said, this tutorial will be most beneficial to people who are already familiar with the following:

• How to print text to the console

Easy right? That’s really all you need to know, and if you don’t – no worries! You can follow along anyways. This tutorial is going to be very beginner friendly.

Things You Will Need

Well, for starters you’re going to need a web browser It might seem obvious to some, but this is the most common environment for JavaScript to run in. The JS we write today is going to be running in a browser too. Just so that you see the same things that I see, you should install Chrome right now if you’re not using it already. You can download it here. Thanks!

The only other thing you will need installed is a text editor. This can be Notepad (Windows) or Textedit (Mac) if you wish. Both of these text editors come pre-installed on Windows and Mac OS respectively. However, you may want something that is a little bit nicer to look at. Here are a few of my favourites, all of which are free:

• Atom (What I’ll be using for this tutorial)
• Sublime Text 3
• Brackets

All three are valid choices. It doesn’t really matter which text editor you choose, so long as it is indeed a text editor and not a word processor. So this means that Microsoft Word, Libra Office, or Open Office are all out of the question. Those applications include a bunch of information with the text that you write, and this information does not translate into computer instructions very well. So you must use a text editor that is meant for writing code. Period.

Our First Step

Once you have Chrome, and a text editor such as Atom installed, I want you to create a new directory (or folder if you prefer to call it that…) that will be used for storing all of your future web/JavaScript projects. I call mine batcave Na na na na na na…

After you’ve created a directory for yourself, open the directory and create another directory called my-first-js

Very good.

Pretty simple so far right? Our folder structure should look something like this:

-- user
-- -- batcave
-- -- -- my-first-js

Of course user and batcave may have different names on your own machine.

The next thing is to fire up your editor. In my case it’s Atom.

The first time you open up Atom, it will look a bit different than the screen shot I have above. Not a big deal. All you’re going to do for now is click file -> open folder -> and then select my-first-js.

Atom will now open up a new window, with that directory.

The next step is to create a new file. In Atom, we can right-click on the root directory (which is my-first-js) and then select New File. Name this file index.html.

Atom will then load up a blank HTML file in your editor window (on the right). You don’t need to know what HTML is for this tutorial, but we’ll cover it briefly anyways.

HTML stands for Hypertext Markup Language. It’s the most fundamental language for the web. Web browsers understand HTML, and are able to interpret a type of code called markup and turn this code into a very dull looking web page. If you’re not easily offended by crude language, then here’s a perfect example of what a raw HTML file will look like when loaded by a web browser: http://motherfuckingwebsite.com/

Certainly not the prettiest looking thing ever – as responsive as it may be 😉

What makes websites look pretty like this one, is another language entirely, called CSS (Cascading Style Sheets). But it’s out of scope for this tutorial and I mention it merely as a conceptual aside.

For the interactivity found in websites, we use JavaScript, which some of you may already know. However for the purposes of this tutorial we are not going to be making a real web page. We are only creating an HTML file, so that we have something to place our JavaScript code inside of, and then we are able to load that HTML file into a web browser, which will run our JavaScript.

Even though our file is blank right now, you can already open it up in a browser. Try right-clicking the index.html file and select Copy Full Path. This will copy the full path to your file on your local hard drive.

Good. Now paste the path into your browser.

So… not much going on here. But that’s OK. In a minute we’re going to fill our index.html with everything we need to start writing JavaScript. But first, we’re going to look at how to write JavaScript right here in the browser now!

We’re going to open up the Chrome Developer Tools. This is a special window that any Chrome user can open up, that has a ton of awesome features which are really handy for web developers. So you’re about to see a lot of stuff that might seem intimidating at first, but we’re only going to be concerned with one tool for now – so try not to fret. We’re treading deep waters here, but we’re not swimming far from the dock

You can either hit ctrl + shift + I or… you can right-click anywhere in the viewport (the part of your browser where web pages render) and then click Inspect.

It might seem like a lot to take in here, but we’re going to ignore almost all of it today. Also don’t be concerned if you’re missing some of the tabs that you see here in the screenshot above. Some of my tabs are extras from Chrome extensions I’ve added.

The first tab that should be opened by default is the Elements tab. We’re not going to worry too much about what this means as it’s out of scope for this tutorial, but basically it shows a representation of what the markup inside your HTML file looks like. Which is odd right? Since we didn’t write any code in that file, and yet… here it is… in the developer window – code. Hmm…

That’s just because browsers are really smart (depending on who you ask – and the time of day). The browser opened up a file that had a .html extension and since it didn’t see any markup in that file, it decided to generate some itself. Not enough to show anything in the viewport, but enough that this is technically a valid HTML document.

Enough of the HTML stuff – let’s move on to writing some JS! Find the Console tab and click it.

This is called the developer console… or the JavaScript console, or just… the console. Whatever you want to call it, this is where we can write actual JavaScript live in the browser and have things happen.

Try typing this command into the console and hit enter:

console.log("Hello, Console!")

Cool! So what just happened?

Conceptually for this tutorial, you don’t need to know what console.log() means, other than that if we pass in some text between double quotes, that text will be printed back to us in the console.

You also don’t need to know what undefined means either. For now just know that it doesn’t mean anything bad.

What is important to know, is that we are interacting with a special type of program called an interpreter. An interpreter is a program that translates code on the fly into something that a computer can understand, which eventually, is ones and zeros (on or off, 1 or 0). The interpreter is built into your browser by default. All modern browsers are capable of running JavaScript without having to install anything. We didn’t even have to create the index.html file we made earlier. You can open up the developer tools from any web page you want to, click on the console, and start executing JavaScript!

If the “Hello, Console” example wasn’t exciting enough, try this:

document.body.innerHTML = "<h1>Hello, Viewport!</h1>"

Now we’re talking! Nothing too crazy, but now we’re using JavaScript for something that visually changes the contents of the web page – pretty cool eh? You don’t need to know what that line of code means exactly, but if you do – awesome!

So this is fun and all, but what you’re most likely here for is to learn how to write JavaScript on your own computer – in a text editor not the browser. So let’s do that now.

How To Write JavaScript On Your Own Computer – For Real

In order to write JavaScript in our editor we’re going to need to write a bit of HTML. Don’t worry if you don’t know how – I’m going to give you the code you need Just copy and paste the code below into your index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 
</body>
</html>

If you have Emmet installed with your text editor, you can just type html:5 + tab. Like this…

We’re not going to cover how to install packages, but as you can see from the gif above, Emmet is pretty handy to have. The code that you see is the minimum amount of markup that you’ll have to write for every HTML 5 web page before you start writing anything else. So being able to generate all of that with 7 key strokes is awesome!

Conceptual aside: The type of HTML we are writing is HTML 5. This is the newest standard, and likely the standard that you’ve already been learning if you’ve learned any HTML at all.

Once you have the basic scaffolding in place, we need to add an HTML <script> tag inside of our <body> tag. Your markup should look like this:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script></script>
</body>
</html>

The JavaScript that we write is going to go between the opening <script> and the closing </script> tags. So it’s a good stylistic choice to create some space between these tags. Try something like this:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script>

  // JavaScript code will 
  // be placed here!! 

 </script>
</body>
</html>

Those double slashes by the way – are comments. Those lines are never interpreted by the browser, they are only there for us simple humans to read.

For this next step, we’re going to replace those comments with the following line of code: console.log("Hello, Dolly!!")

Your HTML should now look like this:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script>

  console.log("Hello, Dolly!!")

 </script>
</body>
</html>

Type out that line of code, exactly as you see it there, and save your index.html. Now just incase you closed your browser window for some reason, right-click the index.html file -> click on Copy Full Path -> then paste the path into the URL of your browser and hit enter.

You should see a completely blank screen just like we did last time. However this time something is going to be a little bit different, even though it may not be obvious at first. Try opening up your developer tools and see.

If you forgot, it’s ctrl + shift + I, or right-click -> Inspect.

Click on the Console tab, and you should see the line, Hello, Dolly!! Awesome! If you don’t see this, make sure you remembered to save the index.html file before reloading it in your browser. Also make sure that the line of code is between the <script> and </script> tags. It should look exactly like the example I gave above.

If it worked, congratulations! You just wrote a line of JavaScript in an editor installed on your own local machine, and then loaded it into a browser and had it execute – nice!

Again, this isn’t a tutorial on JavaScript or HTML, so this is really as far as we’re going to go, but I do want to show you one more thing.

How To Put JavaScript Into Separate Files

This is not necessary for beginner level stuff, but it’s good to know how to do it anyways, for when you move on to making websites, apps, or games that require a reasonable amount of code. Let’s look at how we can put our JavaScript into it’s own file with a .js extension, and still have it work exactly as it did in the previous example.

Make A JS File

Start by right-clicking on your project directory in Atom again, and create a new file. We’re going to call this one, dolly.js.

Your project tree should now look like this:

-- my-first-js
-- -- index.html
-- -- dolly.js

Now, we want to go back into our index.html and copy the line of code inside of our script tags. That’s this line by the way:

console.log("Hello, Dolly!!")

Paste that line into your dolly.js and save it.

Back to the index.html file. Delete the code between the script tags and make them look exactly like this:

<script src="/dolly.js"></script>

It must look exactly like this, or it won’t work. Save your index.html, and then reload it in your browser. In your developer console, you should still see Hello, Dolly!!

So how does this work?

The part of the script tag that looks like src is called an HTML attribute. Attributes are extra bits of information that we can attach to HTML tags. In this particular case we are using the src attribute. This attribute tells the script tag, that we have some JavaScript somewhere that we would like it to reference.

We set the src equal to the reference by using the equal sign = and double quotes (optionally single quotes). Inside of the double quotes we can pass it either an absolute, or a relative path to the file that we want to be executed by the browser.

Here’s the difference between “relative” and “absolute”:

Relative:

<script src="/dolly.js"></script

Absolute:

<script src="/C:/Users/danny_000/batcave/my-first-js/dolly.js"></script>

Does that make sense? Absolute is the path from the root of your hard drive (or in a real website the root of the server), and relative is the path from the current working directory. In our case the current working directory or CWD is our my-first-js folder. And since this is the location of both index.html and dolly.js – we don’t need anything other than simply “dolly.js” for our relative path.

Now let’s create another directory just to make sure you really understand how this works. Call this directory js.

Your project structure should look like this now:

-- my-first-js
-- -- js
-- -- index.html
-- -- dolly.js

We want to make it look like this:

-- my-first-js
-- -- js
-- -- -- dolly.js
-- -- index.html

What we want to do, is place dolly.js inside of our js directory. Once you do that, don’t make any changes to the index.html file yet. Try reloading the page to see what happens.

You should see something like this:

GET file:///C:/Users/danny_000/batcave/my-first-js/dolly.js net::ERR_FILE_NOT_FOUND

That just means that the browser tried finding a file called dolly.js inside of the CWD – which is my-first-js (where index.html lives). Since the file is not there, the browser was not able to load it. Let’s fix that!

Go back into Atom and make a quick edit to index.html. This is what we need to change:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script src="/js/dolly.js"></script>
</body>
</html>

All we did here, was prepend js/ to dolly.js so now our relative path is js/dolly.js. Save the file, and reload your browser. And it works!

That’s really all there is to it. If you have any questions about how all of this works, or there is something you feel I didn’t explain very well – let me know! I’ll do my best to make this whole process as clear as possible. I remember too well how frustrating it is to learn how to code when you’re starting from knowing nothing. Hopefully my articles help make it a little less frustrating for you

Cheers,

Dan