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?
What You Should Know
- 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
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:
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
batcave Na na na na na na…
After you’ve created a directory for yourself, open the directory and create another directory called
Pretty simple so far right? Our folder structure should look something like this:
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
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
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.
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
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
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.
Try typing this command into the console and hit
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.
If the “Hello, Console” example wasn’t exciting enough, try this:
document.body.innerHTML = "<h1>Hello, Viewport!</h1>"
<!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>
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:
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 ->
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> tags. It should look exactly like the example I gave above.
.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,
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:
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:
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
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”:
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
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
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
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 🙂