What should I know before?
I will try my best to deliver this towards absolute beginners as much as possible. But to save time I’m going to skip all the history stuff you might get if this was a semester long class. I expect you to know your way around a browser, and your computer. I expect you to have a basic understanding of math. And I also expect you to have decent logical skills. A good programmer can surmise how things work using logic and previous knowledge. If you know another programming language already then this should come extremely easy. If not, then put your thinking hat on.
Let’s get started!
Alright, to start we need to setup our environment. Environment meaning, your work-space. Like files and places to save it all. I personally like having a Folder on my computer that holds my projects, then I just create a new folder in that for whatever project I’m working on. You can put these anywhere you like on your computer. But basically, we need an empty folder somewhere so we can work.
NOTE: It’s extremely useful in programming to have your system show you the file extension when maneuvering around your system. Every OS is different, but this’ll save your life! In Windows 10 you can do this by opening a folder, any folder, and clicking “View” at the top. Then go to Options, which should open a dialog. From there it’s the “View” tab again, and the advanced settings should have a checkbox for “Hide extensions for known file type”. Make sure that’s unchecked. If you get lost, google is your friend.
starting point of the path. Anyways, open this file up in whatever text editor you have around. Just don’t use anything with crazy formatting like Word. The built-in notepad is good enough. Once the file is open for editing, paste in this code….
< div id="root"></div >
< script src="./tutorial.js"></ script>
NOTE: Due to WordPress blocking the html tags, you’ll have to remove the spaces after the < and the / signs.
Ok, so know that we have the “skeleton” page, let’s create the actual script file now. In the code you pasted it calls for a file named “tutorial.js” in the same folder that the index page is in. So go ahead and create a new file with that name in the same folder you should still be in. Once that new file is created and opened, paste in this code…
Go ahead and save both documents. Chances are pretty great that if you just double-click on that “index.html” file now, your browser should open. If not, open it with your browser, or whatever context menu you have available. You should be greeted with a blank page. That’s ok, that’s intended. The code we wrote will only show up in what’s called the “console”. It’s a tool for developers to use, and comes included with your browser. You just need to open it. For most (if not all) browser’s this is as easy as right clicking in the page’s window and pressing “Inspect” if using Chrome. On Firefox is should be available from the “Tools” menu as “Web Console”. The keyboard shortcut is Control+Shift+J for Chrome, and Control+Shift+K for Firefox. When the window opens up it should be showing the console. If not you may need to find the tab for it depending on your browser. On chrome it’s just called “Console”. If you see a line printed in there that says “Hello World” then you where successful. Any error looking things (red text is a dead-giveaway) and you might have messed something up. I’m going to assume it worked since this has been copy-paste so far. And if it did, the initial hard part is done. You’re environment is now setup. You should have the webpage that your code works in, your code file, and the console available for testing. Of course you’ll want to give yourself some upgrades later to make your life easier. But this is a humble starting point!
Whew! That was rough
Maybe not too rough hopefully. But at this point we can actually start the real coding. Just remember every time we change our “script” file, we have to save it, and refresh the webpage in the browser for the effects to take hold. So Control+S on the script file, and Control+R with your index page open. Now, to explaining what we just did. The code console.log(“Hello World”); is an example of using the developer console, to write a message. In this case the message is the classic Hello World that practically every language ever taught has used. Now the confusing part is how all this works. In it’s basic sense, the “console” part is an object in what’s called Global Scope. Global Scope means it’s available from anywhere, it is given from the browser so you can use it anywhere in your code, anytime. Object means basically a container of pre-made code. In this case, it’s the code that interacts with the console. Right, so the next part is the “.log” portion. Here the period marks where you’re going to start asking for a member or property of the aforementioned object. That property being “log” in this case. It helps in thinking of this like a Parent-Child relationship. Here: “console” is the parent, period means we are now going to ask for a child, and “log” is the child. You can keep this chain going as far as you want, and as far as there are properties. Consider it like this (not runnable code)…
The next part is the ‘(“Hello World”);’ portion. From this point we have told the computer we are looking for the child property called “log” from it’s global parent named “console”, but now we need to do something with that. In this case the parenthesis signifies that we are calling on a function. A function is some bit of pre-made code that does some actions. Because JS is dynamic, it doesn’t concern itself with what type of data you’re interacting with, just whether it can execute the instructions. What this means is that objects can be parents to any kind of data. Whether it’s simple primitive types like numbers, or more complex actions like functions. Or, even more objects. This gives a huge amount a freedom and flexibility, but can be a pit-trap in having to remember what everything is. Anyways, back to the task at hand!
So to summarize, and explain in more human terms exactly what this simple line of code did was…
- Asked the computer for the globally available object named “console”
- Asked the computer to get a property from it named “log”
- Called that function “log”
- Gave it a string to use
- Ended our call
And that’s exactly what the browser carried out. It fetched the console for us, and logged the string to it. And that’s exactly what you saw in your console window.
And with that, happy coding!