Introduction to JavaScript

A program is a set of instructions your computer follows to perform certain tasks, such as performing arithmetic calculations, retrieving and processing data, or displaying webpages.

However, the problem is that machines and humans don't speak the same language. Computers can only deal with binary code made of ones and zeros like this:

110011001100100110101101010101010101110101000101001001000101001010100100101000101

Each digit is referred to as one bit, which can be either 1 or 0.

This is impossible for us to understand. To make life easier for our fellow developers, programming languages were created, providing us with a way to write the instructions using a format we can read. These instructions are then translated into binary code through a process known as compilation.

1init a, 5; // initiate variable a with value 5
2init b, 10; // initiate variable b with value 10
3init c; //initiate variable c
4
5multiply c, a, b; // calculate a times b, store result in variable c
6return c; // return the value stored in c

This example shows a hypothetical programming language that doesn't exist in the real world, but it does demonstrate some key features of a programming language.

A programming language always follows a consistent schema and contains keywords with predefined meanings. For instance, in this example, init initiates a new variable, ; marks the end of an instruction, and return gives the value associated with the variable.

What is JavaScript

JavaScript was initially developed in 1995 for the Netscape Navigator browser as a way to enhance the functionality of webpages by adding programmatic features. It was primarily used for manipulating the Document Object Model (DOM) tree, such as altering the content of an element, changing the HTML attributes, and so on.

Before JavaScript, webpages were mostly static, with only texts and images. There was little feedback on user actions, so JavaScript was created to improve that. With JavaScript, developers could add more interactivity and dynamic behavior to their webpages.

For instance, in the following example, you can click the buttons to move the red box back and forth.

Nowadays, JavaScript has evolved into something much more powerful. Over the years, it has been adopted by all the major web browsers and has become one of the most popular programming languages in the world.

Source: Stack Overflow

Today, it is not only used to manipulate the DOM tree in the frontend but also serves as the backend, allowing you to create full-stack applications using only one programming language.

Hello World!

Without further ado, let's take a look at how JavaScript works in practice.

The easiest way to run JavaScript code is through your web browser. Go to your browser's developer tools, and find the JavaScript console.

Copy and paste the following code into the console and hit the Enter key on your keyboard.

1console.log("Hello World!");

This is how you can print the string Hello World! using JavaScript.

In this example, console is called a module, which is like a package with stuff packed inside. . is called a dot operator that pulls stuff out of that package, and in this case, the function log() is pulled out of the console package.

A function is like a piece of machinery sealed inside a box. You can't see its internal workings, but the box does offer an interface where you can give an input, and the box will either return an output based on that input, or it will perform certain actions.

The function log() will take the input, which is a string "Hello World!" in this case, and print it to the JavaScript console. Putting all of these components together, they form a statement, which is an instruction or a sentence that tells JavaScript to do something. The semi-colon (;) marks the end of that statement.

Two aspects of programming

Data and logic are the two most essential components in programming.

There are several different types of data JavaScript can work with. First of all, there are the strings, which we've seen in the Hello, World! example. Strings are defined as a series of characters enclosed in matching quotes.

1"abcde";

And then there are numbers, which are numeric values:

1100;
2
312.23;
4
53.14e5;

You can perform arithmetic calculations using numbers. For example:

110 + 1; // -> 11
2
399 - 33; // -> 66

Lastly, we also have the Boolean values. If you are new to programming, this might be a new concept to you, but it is nothing to be scared of. There are only two Boolean values, true and false, and they are often used to indicate if a statement is valid or not.

For example, the following statement says 1 is greater than 2, which is obviously not correct, so this statement will return the Boolean value false.

11 > 2;

Strings, numbers, and Boolean values are the most basic data types in JavaScript, which are also called primitives. There are other primitive data types available, such as null and undefined, which are used to indicate empty values. We will talk more about them later.

Besides the data types, there are also data structures that are used to organize other data, such as arrays and objects. Arrays are defined with a pair of square brackets ([]), and inside the brackets, there will be a list of elements separated by commas (,).

1[1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Object is another way to organize data in JavaScript, similar to arrays, but much more flexible and powerful. Objects are created with curly braces ({}), with each item (property) defined in a key: value format. Different properties are also separated with commas.

1{
2  id: 123,
3  name: "Dave",
4  phone: 123456789,
5}

Besides data, logic is also a crucial component in programming. Logic is a set of rules governing how the program manipulates data. It often involves decision-making based on specific criteria.

For example, in JavaScript, the if else statements are used to decide whether or not to execute an instruction based on the defined condition.

1if (temperature < 10) {
2  console.log("Wear winter clothes.");
3} else if (temperature < 25) {
4  console.log("Wear a jacket.");
5} else {
6  console.log("Wear a T-shirt.");
7}

Loops are used to repeat a set of instructions until a condition is violated.

1while (n <= 10) {
2  console.log(n);
3  n = n + 1;
4}

And there are also functions, a code block assigned to a variable, which can be reused anywhere in the program.

1function addNumbers(a, b) {
2  let sum = a + b;
3  return sum;
4}

Lastly, there are the classes, a way to organize everything, data, and logic.

1class Car {
2  constructor(make, model, year) {
3    this.make = make;
4    this.model = model;
5    this.year = year;
6    this.mileage = 0;
7  }
8
9  drive(distance) {. . .}
10
11  displayMileage() {. . .}
12}

We will discuss these concepts more later.