JavaScript Crash Course

March 20, 2022

Let's master JavaScript from a single article. This crash course will bring us to code basic JavaScript. Feel free to bookmark this article as your mini note of JavaScript.

JavaScript is a programming language that adds interactivity to your website. Not only for websites. We also can make mobile apps, back-ends, and many more. It looks like it tries to be a general-purpose programming language. It was invented by Brendan Eich, a co-founder of Mozilla.

The only programming language that runs on the web browser is JavaScript. You can open the developer console to your web browser, open the Console tab, then type console.log("Hello World!");. Congratulations. We just made a "Hello World!".

Prerequisites

We need to install some prerequisites before we can start coding.

Text editor. I suggest Microsoft Visual Studio Code with some extensions such as Live Preview from Microsoft. So, we can see the HTML result on our text editors.
NodeJS. I suggest installing the LTS version. You can try Node Version Manager to manage NodeJS versions easily. So, we can run the JavaScript on the terminal.

There are Web APIs from web browsers and NodeJS APIs from NodeJS that run on JavaScript. We don't talk about them in this article. Maybe, I will make them in the next articles. Here, we focus on the basic syntax of JavaScript.

Hello World!

1
2
3


// Run this one via a web browser.
document.querySelector("h1").textContent = "Hello World!";
alert("Hello World!");

Create a JavaScript file named main.js with the code above. We created a comment with //, set "Hello World!" as a heading, and showed up the message as an alert.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
    <h1></h1>
    <script src="main.js"></script>
</body>
</html>

Create an HTML file named index.html that loads that main.js. Create an empty <h1> tag. Open it on the web browser and see the result.

We just did a Document Object Model (DOM) manipulation. We put a content to the <h1> tag. We also made an alert to the web browser, a typical message of web browsers.

1
2
3
4
5
6


/**
 * Run this one via NodeJS.
 * Eg; node node.js
 */

console.log("Hello World!");

Create another file named node.js. Type node node.js on your terminal. A message will appear there.

Congratulations. We just did a "Hello World!". Let's go to syntaxes.

Variables

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


var number = 9;
var text = "Lorem ipsum.";

console.log(number, text);

number = 8
text = "Lorem ipsum updated."

console.log(number, text)

var number = 8;
var text = "Lorem ipsum redeclared.";

console.log(number, text);

if (true) {
  var scope = "No block scope.";
}

console.log(scope);

newNumber = 1;

console.log(newNumber);

function print() {
  console.log(number, text);
}

print();

The var is the only native or original JavaScript syntax to define a variable. It runs on old web browsers.

The var can redeclare.
The var can be out of scope.
A variable can be defined without a var.

Let

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


let number = 9;
let text = "Lorem ipsum.";

console.log(number, text);

if (true) {
  let scope = "Has block scope";
}

console.log(scope);

The let was introduced in ES6 (2015).

The let cannot redeclare.
The let must be declared before use.
The let has a block scope.

Const

1
2
3
4
5
6
7
8


const NUMBER = 9;
const TEXT = "Lorem ipsum.";

console.log(NUMBER, TEXT);

NUMBER = 8;

console.log(NUMBER);

The const was introduced in ES6 (2015).

The const cannot redeclare.
The const cannot reassign.
The const has a block scope.

Strings

1
2
3
4
5
6
7
8
9


let string1 = "String 1";
let string2 = 'String 2';
let string3 = "String '3'";
let string4 = "String \"4\"";
let string5 = 'String "5"';
let string6 = string4 + " " + string5;

console.log(string1, string2, string3, string4, string5, string6);
console.log(string6.length, string6.slice(0, 10), string6.split(" "));

Some ways to define strings with its methods.

Numbers

1
2
3
4
5
6
7
8
9


let number = 9;
let pi = 3.14;
let text = "9";

console.log(number, pi);
console.log(number + text, number - text, number * text, number / text);
console.log(number + Number(text));
console.log(Number.MAX_VALUE, Number.MIN_VALUE, number.MAX_VALUE);
console.log(5e-1, 0xFF);

Integer or float is based on what we defined. The number + text will do concatenation instead of being calculated. We need to cast the text to be a number using a Number before calculating it. The Number also has some constants such as a maximum or minimum number or integer.

Booleans

1
2
3
4
5
6


let yes = true;
let no;
let one = 1;
let zero = 0;

console.log(yes, no, Boolean(no), Boolean(one), Boolean(zero));

The no is undefined. It will turn out to be false if we convert it to be a boolean. The same happens on number 0 too.

Arrays

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


let hello = ["Hello", "World!"];
let js = new Array("Hello", "JavaScript!");

console.log(hello, hello[0], hello[1], js);

let nums = [3, 1, 2];

console.log(nums.length, nums.sort());

nums[0]++
nums[nums.length - 1]--

console.log(nums);

We can define arrays by using [] and Array(). It also has some useful methods such as sort.

Objects

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


let person = {
  name: "John Doe",
  age: 1e1
};

console.log(person, person.name, person["age"]);

person.hello = function() {
  return "My name is " + person.name + `. I'm ${person.age} years old.`;
}

console.log(person.hello());

Objects are the same as arrays. The difference is the key could be a string for objects. Objects also can contain functions or methods.

Operators

1
2
3
4
5
6
7


let x = 9, y = -9;

console.log(x + y, x - y, x * y, x / y);
console.log(typeof x, typeof x == "number", typeof x === undefined);

console.log(x ** 2, Math.sqrt(81), x % y);
console.log(~7, 5 & 3, 5 | 3, 5 ^ 3, 23 << 1, -105 >> 1);

The === in JavaScript is to check the data type. There are also some math and bitwise operators. More about Bit Manipulation or Bitwise Operations can be found here.

Conditions

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


let key = 1;

if (key == 1) {
  console.log("one");
} else if (key == 2) {
  console.log("two");
} else {
  console.log("It is a number.");
}

switch (key) {
  case 1:
    console.log("one");

    break;
  case 2:
    console.log("two");

    break;
  default:
    console.log("It is a number.");
}

Standard flow controls on many programming languages also can be found on JavaScript.

Loopings

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


let i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

do {
  console.log("This would be an infinity loop if it were true.")
}
while (false);

for (let i = 0; i < 10; i++) {
  console.log(i);
}

let nums = [3, 2, 1];

for (let num in nums) {
  console.log(num, nums[num]);
}

for (let num of nums) {
  console.log(num);
}

Loopings can happen with while, do-while, and for. The do-while means it will execute at least once. The for-in will cast the index. The for-of will cast the value.

Sets

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


let nums = new Set([1, 2, 3]);

console.log(nums);

nums.add(1);
nums.add(4);
nums.delete(3);

console.log(nums.size, nums.has(3))

for (let num of nums.values()) {
  console.log(num);
}

The Set is a collection of unique values. Mostly used to check unique values in fundamental programming.

Maps

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


const fruits = new Map([
  ["apple", 5],
  ["banana", 3],
  ["orange", 2]
]);

console.log(fruits);

fruits.set("apple", 1);

console.log(fruits.get("apple"));

for (let fruit of fruits.entries()) {
  console.log(fruit, fruit[0], fruit[1]);
}

fruits.forEach(function(value, key) {
  console.log(key, value);
})

The Map is a collection of key-value pairs. Mostly used to count values in fundamental programming.

Classes

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


class Person {
  constructor(name) {
    this.name = name;
  }
  hello() {
    return `My name is ${this.name}.`;
  }
}

let person = new Person("John Doe");

console.log(person.hello());

Classes were introduced in ES6 (2015). Technically, it is a template for objects.

Closing

JavaScript isn't strict. Even the semicolon is optional. But it is a popular programming language and easy to learn. It has many APIs and libraries. Learning the basics of JavaScript will make a great leap to its ecosystem. The example source code can be found here, https://github.com/aristorinjuang/js-crash-course.