JavaScript & The New Web

So, I’ve decided to revive this Blog, and what better way then to do a tutorial series. This one, will be about JavaScript. I chose this, well because I end up using JavaScript the most these days. That isn’t to say that there aren’t other very good languages I can write about; but JavaScript just seems to be a more used language. With Node.JS, React, Electron, and just the Web in general, JS has made it’s way far more into the light then most others. And if you’re reading this, you already have the tools to write it. Probably. JavaScript is the language that brings the web to life. A way to add interactivity and logic into the browser. And since it runs on the browser, if you have one of those (Again, you are reading this on a website), then you’re good to go! A simple text editor and your trusty browser will get you started. That’s not to say you can’t improve your coding situation; but we’ll come to that later.

What is JavaScript?

JavaScript, or JS for short is a “Dynamic Interpreted Programming Language.” Dynamic, because it conforms to whatever you want it to do. Interpreted because it doesn’t require a compiler, and just “runs” in your browser. And of course Programming Language, because we still have to type it out. If you’re an absolute beginner, don’t get too caught up in the lingo. Just know that you type it out, hit save, and refresh your browser. Bingo, that easy. For now…

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.

Now that we have a folder that we can work in. We need to create the first file, which is our webpage. I know this is about JavaScript, but we need a “container” of sorts to get the browser to open it. So create a new file in the folder named “index.html”. Index is a common name for a web-page and signifies that it’s the
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….

<!DOCTYPE html>
<html>
<head><title>JavaScriptTutorial</title></head>
<body>
< div id="root"></div >
< script src="./tutorial.js"></ script>
</body>
</html>

NOTE: Due to WordPress blocking the html tags, you’ll have to remove the spaces after the < and the / signs.

If you’re familiar with HTML this should look familiar. If not, don’t worry, this is about JavaScript so I won’t go through this. Just know that this gives us a basic page, with an empty container, and loads our script file (Script being the term for the code we’re gonna write).

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…
console.log("Hello World");

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)…

parent.child.grandChild.greatGrandChild

The thought process here though, is that “grandChild” is both a child or property of “child” and also the parent of “greatGrandChild”. You’ll be creating your own objects with child properties later, but it helps to know this ahead of time since it is used A LOT in JavaScript.

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!

Because of the parenthesis we are now “assuming” or calling on the property “log” as if it where a function. And lucky for us it is, well, not really luck since I knew that ahead of time. And because knowing some information ahead of time is really valuable, functions allow us to pass in parameters. Essentially, they allow us to give them information to work with. In our case we gave it what’s called a string literal. String being a grouping of characters like numbers and letters and what-not. And literal, meaning literally just this data. Literal is the term in programming for anything that’s concretely declared, or doesn’t change. The opposite being variable but we’ll get to that later. So our string literal, is literally just “Hello World” and will never change. From here, the function takes our string and does whatever it wants with it. We close off the function call with the ending parenthesis. And the final bit is the semi-colon on the end. The semi-colon tells the computer that we are done with this line or instruction. And that whatever we type after this will be considered as a new one. This is a common syntax pattern in programming languages and JavaScript is no exception. While the versatility of JS is pretty great and browsers will guess for you if you forget to put one in, do your best to form a habit of ALWAYS ending your lines with a semi-colon. Any hopes of getting a job as a professional coder rely on that habit. Many of programmers have lost sleep and gained gray hairs because their program wouldn’t run due to a missing semi-colon somewhere deep in their code.

So to summarize, and explain in more human terms exactly what this simple line of code did was…

  1. Asked the computer for the globally available object named “console”
  2. Asked the computer to get a property from it named “log”
  3. Called that function “log”
  4. Gave it a string to use
  5. 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.

Conclusion

That marks the end of the first part of teaching you JavaScript. It was a pretty deep dive, but I hope it made sense. The next couple parts will go over more of the easier stuff that makes up the backbones of programming. For further education I highly recommend bookmarking the “documentation” or “reference” for the language itself. It is fundamental to have, and even I myself keep it open to go find whatever property or function I’m looking for. With JavaScript the goto documentation is at MDN, or Mozilla Developer Network, and is considered the de-facto documentation.
JavaScript Documentation

And with that, happy coding!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: