JavaScript in Plain Language (2015)

PART II: ENTERING THE SECOND REALM

“I try all night to play a pretty note.”
Jimi Hendrix

2.1 Adding more syntax

Code blocks - Using an editor

Up this this point we have been writing one liner statements and as soon as we press ENTER on the Console, the code gets executed. We could actually write several lines of code in the Console by holding the shift-key when we press Enter. That would take us to the second line where we could continue writing our script. Although this works, it is not an ideal arrangement. It is much better to write code on a text editor and then copy/paste it to the Console when we are finished.

I’m sure you have some sort of a text editor on your computer. Do not use Word or WordPad because they add hidden formatting code which interferes with your script. Microsoft Windows comes with Notepad. Notepad works and I use it hundreds of times a day to filter out text as I copy from one source to paste onto another because it strips any visible or hidden format. But I also use other free editors such as the free Notepad++, Programmer's Notepad, and Brackets, to write real code.

NOTE: Since May 2015, Microsoft has release a really cool free source code editor called Visual Studio Code which works in Windows 7 and up, Linux and Mac. This is highly recommended but for now I am going to recommend something much simpler to do our exercises and you will see why. Please read on.

Of course you may use any one of your favorite plain text editors, but let me introduce to you an online editor that comes really handy because you don’t have to rely on your computer to get going. I use this online tool many times a day because it also allows me to beautify the code when I click the beautify button (creating proper white space):

jsbeautifier.org

Please Bookmark the site. The only disadvantage with this arrangement is that you can’t save the code directly, but right now we are not saving anything, we are experimenting and jsbeautifier works well for this purpose because it actually teaches us how JavaScript syntax should be presented.

What is a code block?

A code block is usually a collection of different statements that come together to create a certain functionality. The best way to save groups of code is by creating a function. We will get to play with functions soon.

A code block is usually limited (surrounded) by an opening curly brace { and a closing curly brace }.

Here’s an example of a code block:

{
var x = "Hello";
console.log(x);
}

We will use code blocks from our next project on.

Commenting code

Sometimes we want to make a note in our code to explain the purpose of a code line to another human being but we don’t want JavaScript to throw an error when it sees our comment.

There are two ways to make comments:

1- Using two forward slashes.
With this style of commenting we can’t press the Enter key and write a second comment line. It must be done all in one continuous line:
// This is a comment. Hello fellow reader, how are you?

2- Using a forward slash and an asterisk to start the comment and an asterisk and a forward slash to end the comment: /* */
This comment can span for as many lines as you wish:
/* With this comment I can comment a whole page
and create as many lines as I want. Once upon a time in a very far away land called New Jersey, formerly known as Schejachbi, there was an American Indian tribe known as Lenape... */

Let’s move on to conditional branching which a very important step into real programming.