JavaScript in Plain Language (2015)

PART I: AT THE GATES OF ENLIGHTENMENT

1.4 Lab work 1

Ready for some lab work?

Opening the Console

Almost all modern browsers have a test Console built into the browser to assist us in debugging or experimenting with JavaScript. All Consoles provide basically the same options once we have them open. The biggest differences are how we access the Console and what the Console looks like on the screen.

Select one of the following browsers. Download it if you don’t have it installed on your computer. The reason to use one of these browsers is so that my instructions may coincide with your actions as we code along using the JavaScript Console that comes with it. Please feel free to use any other Console if you so desire, but the way to access it may be different.

Google Chrome.

Opera.

Open one of those two browsers and then press the following key sequence to open the Console:

1- If you are using Windows or Linux:

CTRL SHIFT j

If on a MAC:

CMD SHIFT j or ALT-CMD-j

Most likely a window will open at the bottom of your screen.

2- Make sure the tab Console is selected.

If you get any error messages, just clear the screen by right clicking on the white area and selecting “Clear Console”. These errors will happen almost every time you open the console because the Console is inspecting the current opened document, the one you see on screen before you access the Console, and things may not be 100% as expected by the Console, hence the error warnings. Just clear the message so that we gain more window space.

3- If you want (recommended), you can detach the Console from the browser and minimize the browser so that it gets out of your way. After you detach the Console for the first time, it will always stay detached unless you attach it again by toggling the same button.

To detach the Console look for a double square icon on the tab menu of the Console, and click on it. Now you should have two different windows. Minimize the browser to get more room on your Console screen.

Declaring some variables

Let’s start coding...

1- Declare variables x, y and z
(declaration only, no assignments of values at this moment)
and press ENTER after each semicolon in order to activate the expression:

It should look like this:

var x;

var y;

var z;

You could also just use one var and separate the variable names with a comma. That might save you some time if you are simultaneously declaring a bunch of variables with no values given. Don’t forget the semicolon at the end:

var x, y, z;

2- Now, declare another variable but assign a value at the same time.
I’m using variable a with the value of 347:

var a = 347;

3- Declare a variable b containing your first name ( remember, your name is a string of characters):

var b = "Tony";

· NOTE: You can read the value of each variable on the Console by just typing the variable name, followed by the semicolon, and pressing ENTER. Example:
b;
It should display "Tony";

Typing the variable by itself in order to get a value displayed is only possible because we are using a test Console. In real life we would have to use a print command as we will see later.

Inspecting the data type of a variable

Great! So far we have the following variables declared:
x, y, z, a, b.

What kind of variable is variable b? I mean, what type of data does it contain? We know b holds your first name, right?

4- To inspect the variable use the command typeof:

typeof b;

It displays "string". Variable b contains your first name in quotes and therefore it is a string of characters.

5- What about variable a?

typeof a;

It displays "number". Variable a contains the number 347 and therefore it contains data of type number.

· NOTE: Did you notice how the Console tries to finish the word typeof ? If you don’t want to write the whole word yourself just press the TAB key as soon as you see the hint on the display. Or if you’re like me, you’d rather practice typing, just be aware of misspells. The automatic completion can become very handy to speed up programming and avoid typing mistakes, especially when it comes to long commands. Auto typing also helps us remember how each command is written. The test Console is really useful; I use it in real life hundreds of times a day because I’m constantly testing stuff.

What is typeof?

typeof is a unary operator. It is called unary (opposite of binary) because it only takes one operand, the variable to the right of it. An example of a binary operator would be the + sign where we need a left and a right operands.

Let’s do a few more inspections.

6- What type of data is contained in variables x, y, and z? (test them all)

Answer to all: "undefined".

Why it “undefined” and what is undefined?

These variables hold the value of undefined because we haven’t assigned any data to them yet.

JavaScript reserves some memory for each one of these variables and puts a placeholder as data. This placeholder is of type "undefined". It is still a value, a special value, and we can take advantage of it for decision making as you will see later.

Clear the screen by right-clicking and selecting “Clear console”. Note: Clearing the screen does not erase the variables from memory; it only gives us more space on the screen.

Let’s assign some values to variables x, y, z:

7- Assign the following string value to x. Make sure to wrap your string of characters with quotes:

x = "The quick brown fox jumps over the lazy dog";

8- Verify its type of value:

typeof x;

It now displays "string" as a type, rather than "undefined".

9- Assign the variable b to variable y
(assignments go from right to left):

y = b;

y should now contain a copy of your first name just like b does, and its type of value should also be "string".

· Remember: Assignments work from the right operand to the left operand. Also, y and b values are independent of each other. The = sign does not mean equality, it means to assign right to left.

10- Assign a value of type number (any number) to variable z.

· Remember: numbers don’t take quotes. If you wrap a number in quotes it becomes a string of characters and you can’t perform any calculations with it.

11- For further practicing, declare some new variables of your own, assign some data to them and check their type of value.

Just like any other language, the only way to learn JavaScript is to practice daily. Memorizing will not do it; just plain practice will succeed and persist.

END OF LAB