Learning JavaScript part 1

Motivation

I first met JavaScript more than ten years ago. I didn’t see its purpose except for simple effects, such as hiding elements, showing current time or number of visitors. The best things, from my point of view, were made in Flash. And let’s not forget that then JavaScript was recommended to be blocked.

Since then JavaScript came a long way. I learned my ways around but it’s nothing structured. Just bits and pieces here and there. Most of the times I use what I have learned in Java. Which is wrong on a lot of levels. [ref]Java is to JavaScript as is Ham to a Hamster[/ref]

Therefore[ref]I might mix American and British English. I apologize for that now.[/ref] this series of posts will be about giving a structure to what I’ve learned so far and filling the blanks I have missed out.

Basics

First we need some theory. There are statements and expressions.

Example 1 is expression.

Example 2 is statement. At first sight it looks as if the only difference between the two is a semicolon sign, ‘;’. It’s not completely right. Use of expressions we’ll discuss more deeply in part 2 of Learning JavaScript series. Semicolon will tell computer to execute the expression. Without it it may and probably will produce an error.

At this point it’ll come handy to introduce a built-in functions for printing output:

First function comes with a big warning because it will overwrite whole document when you are writing code for browser and produce nothing when you work on server side in node.js. I’ll attempt to explain how the first one works later in the series in post(s) about Document Object Model (DOM).

Variables

Variables are named containers for data stored in computer memory. There are two rules for naming variables in JavaScript:

  1. variable must begin with a letter, ‘$’ (dollar sign) or ‘_’ (underscore)
  2. variables are case sensitive, i. e. x is not X

JavaScript is weak typed language[ref]https://en.wikipedia.org/wiki/Strong_and_weak_typing[/ref] because programmer doesn’t have to, in this case can’t, specify data type of variable, e. g. as in Java or C/C++. When programmer wants to declare a variable they[ref]I don’t want to write he by default or s/he. Watch this to understand why I use singular ‘they’.[/ref] start with keyword var .

First line shows creation of uninitialized variable. System usually sets its value to 0 (zero). On second line is variable initialized to value of three and this type is called Integer. There are also types with floating point called float or double.

Third variable is called string and contains series of characters. Fourth one will not produce an error but it’ll parse "5" + 6 as a string “56”. On this line is also an example of single line comment.  Multiple lines comment is on the last three lines of Example 4.

Operators and comparisons

In Example 1 we used math operator ‘+’ which performs arithmetic operation addition. Another operator we’ve seen so far is ‘=’ which assigns value to a variable. In the tables below can be seen arithmetic operators and their combination with assignment operator:

Operator Name of the operation Example Result
+ addition x = 2 + 2 4
subtraction x = 6 – 2 4
* multiplication x = 3 * 2 6
/ division x = 4 / 2 2
% modulus x = 4 % 3 1
++ increment x = 1
x++
2
decrement x = 1
x–
0

Table 1 – List of operations

Operator Example Example explained Result
= x = 2 x = 2 2
+= x += 3 x = x + 3 5
-= x -= 1 x = x – 1 4
*= x *= 4 x = x * 4 16
/= x /= 8 x = x / 8 2
%= x %= 3 x = x % 3 2

Table 2 – List of operations combined with assignment

Operator ‘+’, it applies for ‘+=’ as well, can be used for concatenating two or more strings:

Besides arithmetical operators and assignment JavaScript has comparison and logical operators. We can choose among three logical operators which determine logic between values and variables.

Operator Name of the operator Example result
&& logical and
|| logical or
! not

Table 3 – List of logical operators

Logical operators are useful whenever we need to combine several comparisons in control structures or loops. Here is a list of available operators.

Operator Name of the operator Example Result
== equal to  8 == 10 false
=== equal value and equal data type 8 === “8” false
8 === 8 true
!= not equal 8 != 10 true
!== different value and different data type 8 !== “10” true
8 !== 10 false
> greater than 8 > 10 false
< less than 8 < 10 true
>= greater than or equal to 8 >= 10 false
<= less than or equal to 8 <= 10 true

Table 4 – List of comparisons

JavaScript has one standalone operator called conditional. This operator assigns value based on a condition.

 Conlusion

In this post we’ve talked about basics of programming, variables, operators and comparisons. In the next post we’ll talk about control structures and loops.

Disclaimer: This series is not intended as tutorial to learn JavaScript. Go buy a good book if you haven’t seen JavaScript or programming before. I just didn’t want to put yet another piece into a drawer to be forgotten for good.

At the moment my resource which I use is Mozilla’s developer guide.