Demystifying JavaScript: A Beginner's Guide to Understanding Source Code

In modern web development we mainly have three different components which play together into a nice web-based project.

While you can achieve a lot with only those two, in modern web development we cannot ignore interactive elements in our projects. To be able to interact with the visitor, JavaScript was introduced.

In 2003 when I got in touch with JavaScript basics for the first time, we tried to not use it. Back then every browser did execute it very differently, so you could not expect “complex” things to work. Nowadays we “easily” can run whole programs with JavaScript. So don’t be shy, let’s dive right into it.

JavaScript: The Programming Language for Interactive Websites #

The difference between JavaScript compared to HTML and CSS is “Logic”. If you write HTML or CSS it is without logic. For sure you must respect some rules to have it working, but you cannot implement a counter or some app in HTML or CSS. You need JavaScript for the logic needed to implement this.

JavaScript (at least what we discuss today) is running in the browser of your visitor, hence the possibilities are limited to some degree.

Exploring JavaScript Logic and Information Handling #

Programming languages / source code is dealing with “Logic” and “Information”. I know this is a very vague statement.

I care more about “how” I implement something, instead of what in particular I do implement. “What” I implement is driven by external requirements. “How” I implement it, must be driven by my experience. I’m always thinking about “Is it right?”. This helps me prevent implementing shortcuts (even if not necessarily “wrong”, they are mostly “not right”).

You will always learn. You will always change. What you like today, you will probably dislike in 6 months.

There is some basic understandings you should know. They are important in most languages. Programming languages do differ in the way how you specify them, but the basic understanding is very close.

Software always is connecting components.

Understanding JavaScript Variables: Foundations of Dynamic Data Handling #

A variable is a piece of information that you do name but who’s value can change within your source code. It’s a dynamic value.

Think about a counter: There’s a number, the current counted amount. Let’s say it is “5”. In two hours it’s maybe still “5” but maybe it has changed. So we cannot name it “5”. We need to name it somehow, that we remember this information represents the current counted amount.

In JavaScript you can define variables and assign them some value like this:

1

let countedAmount = 5;

There’s more ways to define variables, I’ll skip them in this article.

Now we have a variable named countedAmount which has the value 5. If we want to increase the value, we can write it like this:

1

countedAmount = countedAmount + 1;

Now our variable countedAmount would have the value 6. If we would like to decrease the value, we can write this:

1

countedAmount = countedAmount - 1;

Now our variable countedAmount would have the value 5 again.

While this is easy to read, programmers tend to shorten it slightly. We can increase / decrease a variable by putting ++ or -- after the name:

1

countedAmount++;

Now our variable is back to value 6.

Unlocking the Power of JavaScript Functions: A Comprehensive Overview #

While variables are there to name information, with functions we can “name logic”.

As we saw we can increase or decrease our counter value. There’s a “logic” of how to do it. So let’s give it a name:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

let countedAmount = 5;

function incrementCounter() {
    countedAmount = countedAmount + 1;
}

function decrementCounter() {
    countedAmount = countedAmount - 1;
}

incrementCounter();

Let me explain:

1. We create our variable countedAmount and assign it the value 5
2. We define a function incrementCounter that would increment our countedAmount by 1, whenever we call it
3. We define a function decrementCounter that would decrement our countedAmount by 1, whenever we call it
4. We call incrementCounter

After all this, countedAmount would represent the value 6. It looks complex, but stick to me.

functions can have arguments / parameters. Now it gets interesting. Let’s say, sometimes we want to increment by 1, but sometimes by 2 or any other value. With functions we can do that: While calling a function, we can pass in information for this specific execution. To do so, we change our function slightly:

1
2
3

function incrementCounter(incrementValue) {
    countedAmount = countedAmount + incrementValue;
}

As you can see we defined a argument called incrementValue. This argument now is “available” in the function as any other variable. Now instead of a fix value of 1 for incrementing our countedAmount, we use this variable.

“For sure” we now also need to change the way we call this function, so let’s have a look on the full picture:

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

let countedAmount = 5;

function incrementCounter(incrementValue) {
    countedAmount = countedAmount + incrementValue;
}

function decrementCounter(decrementValue) {
    countedAmount = countedAmount - decrementValue;
}

incrementCounter(2);
decrementCounter(4);

Let me explain:

1. For both functions we added an argument which is used to modify the counter
2. We called incrementCounter with 2, that changed our countedAmount to 7
3. We called decrementCounter with 4, that changed our countedAmount to 3

I did skip talking about types of variables, but if you know that numbers are signed by default, -4 can also be a value. So we can merge the two functions while having the same result:

1
2
3
4
5
6
7
8

let countedAmount = 5;

function modifyCounter(modifyValue) {
    countedAmount = countedAmount + modifyValue;
}

modifyCounter(2);
modifyCounter(-4);

JavaScript Comments: Enhancing Code Clarity and Understanding #

As you write more and more code, you probably tend to loose overview. Naming of variables and functions will help you keeping track of what’s going on. Did you recognize how I called the arguments for incrementCounter and decrementCounter? I could have also used value as a name, at the end it doesn’t matter. But this way it helped me while writing the code (even if it’s not much code).

Another thing that can help you writing code, even if I try to not do it, is writing comments. Comments are part of your source code, which is there for you as the editor, but is ignored by the computer while running your code.

There’s two types of comments: Line comments and Block comments (Are there official terms for it?).

1
2
3
4
5
6
7

// I am a line comment. I will end at the end of this line.

/*
 I am a block comment.
 I will go multi line.
 I will end when * and / meet each other: 
 */

If we add them to our code it can look like this:

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

// Holds our current counter value.
let countedAmount = 5;

/*
    Changes the counter value.
    You can pass in positive or negative values to increment or decrement the counter.
*/
function modifyCounter(modifyValue) {
    countedAmount = countedAmount + modifyValue;
}

// Increment by 2.
modifyCounter(2);

// Decrement by 4.
modifyCounter(-4);

Why I try to prevent them? Review the code and think about the following quote. Think about what can happen:

Comments are lies, waiting to happen.

Deciphering JavaScript Conditions: Empowering Dynamic Decision-Making #

Variables are cool, functions as well, but it still looks quiet static right now. To get more dynamic conditions can help you. Let me show you:

1
2
3
4
5
6
7

if (true) {
    // Code in here will be executed.
}

if (false) {
    // Code in here won't be executed.
}

Let me explain:

1. We defined a condition. The rules are defined in the braces. In the first case it evaluates to true, so the code within the condition, which is within the curly braces, is executed.
2. We defined a condition. The rules are defined in the braces. In the second case it evaluates to false, so the code within the condition, which is within the curly braces, is not executed.

Instead of static values, we can use variables again, to have dynamic evaluation. We could check for example, if some variable is positive or negative:

1
2
3
4
5
6
7
8
9

let someValue = 1;

if (someValue >= 0) {
    // This will be executed.
}

if (someValue < 0) {
    // This won't executed.
}

Let’s say whenever we should modify countedAmount with an even number, the even number should be doubled before use. We can do this if we write the function like this:

1
2
3
4
5
6
7

function modifyCounter(modifyValue) {
    if (modifyValue % 2 == 0) {
        modifyValue = modifyValue * 2;
    }
    
    countedAmount = countedAmount + modifyValue;
}

OK I definitely need to explain:

1. We define our function as before
2. We start with a condition
3. % means modulo, it’s a mathematical function to find the “rest” of a division, so 3 % 2 would be 1 and 2 % 2 would be 0
4. Now we check the result of the modulo operation and compare it to 0. As long as the result was 0 we would get true. In any other case we get false
5. If we get true, the conditional code is executed, modifyValue will be multiplied by 2
6. Whatsoever: We will finally modify our countedAmount with whatever value modifyValue does have now

Writing source code is about how to combine the possibilities to achieve what you want to do.

Harnessing the Potential of JavaScript Loops: A Guide to Dynamic Code Execution #

Let’s change modifyCounter from adding values to multiplying them. And let’s say we want to do it five times always. We probably would have a function like this:

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

function modifyCounter(modifyValue) {
    // First time.
    countedAmount = countedAmount * modifyValue;
    
    // Second time.
    countedAmount = countedAmount * modifyValue;
    
    // Third time.
    countedAmount = countedAmount * modifyValue;
    
    // Fourth time.
    countedAmount = countedAmount * modifyValue;
    
    // Fifth time.
    countedAmount = countedAmount * modifyValue;
}

This doesn’t look smart, but it works. Now let’s say, we don’t want to do it 5 times always, but whenever we call the function we want to decide, how often we do it? For sure we need a second argument for our function but this is not enough.

We also need to repeat the calculation as often as needed: We need loops.

This is for demonstration purpose, for sure countedAmount = countedAmount * modifyValue ^ repeateModification is more efficient.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

let countedAmount = 5;

function modifyCounter(modifyValue, repeateModification) {
    while (repeateModification > 0) {
        countedAmount = countedAmount * modifyValue;
        
        repeateModification--;
    }
}

modifyCounter(2, 3);

Let me explain:

1. We added a new argument to modifyCounter called repeateModification
2. We use a while loop to repeating execute code unless a condition is met
3. The condition is, that repeateModification must be greater than 0
4. As long as this is true, we repeating execute the code in the curly braces
   1. We multiply countedAmount by modifyValue
   2. We decrease repeateModification

In this example we will loop three times, so at the end we will see 40 as a result (5 * 2 * 2 * 2).

JavaScript has multiple loop types. Read about for loops and other on w3school.com.

Objects in JavaScript: A Fundamental Overview #

We used variables to give information a name. We used functions to give logic a name. And now we use objects to give objects a name…?

When my teacher introduced me to object orientated programming in 2006, he said:

Think of a car and you want to store the amount of doors it has.

I immediately thought:

let amountOfDoors = 4; would do the job as well.

Let me re-use the idea of a Car and hopefully I can make up a better showcase.

With Objects you can group variables and functions so they can interact with each other. You can create as many Instances of an Object as you like, they are just variables at the end. Sounds crazy? Lets have a look.

If I define a Object in JavaScript, I start writing a function which has the name of the Object I want to describe, in our case Car seems to be compelling. This function will return a new instance of our object on every call, it’s usually called constructor.

1
2
3

function Car() {
    return {};
}

Right now this function would return an empty object, so let’s think of what we can store here. “Is the car turned on or off” would be interesting, right? So let’s add a variable (for objects it’s called field) and name it isTurnedOn, which by default should is false:

1
2
3
4
5

function Car() {
    return {
        isTurnedOn: false
    };
}

Next, let’s instantiate have two cars:

1
2
3
4
5
6
7
8

function Car() {
    return {
        isTurnedOn: false
    };
}

let car1 = Car();
let car2 = Car();

I told you, objects can group variables and functions. Wouldn’t it be nice if we can turn a car on or off? You can do it like this:

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

function Car() {
    return {
        isTurnedOn: false,
        turnOn: function () {
            this.isTurnedOn = true;
        },
        turnOff: function () {
            this.isTurnedOn = false;
        }
    };
}

let car1 = Car();
let car2 = Car();
car2.turnOn();

Let me explain:

1. We still define our object Car.
2. We define the field isTurnedOn, which is false by default.
3. We define a function turnOn, which will set isTurnedOn of the current object instance to true.
4. We define a function turnOff, which will set isTurnedOn of the current object instance to false.
5. We instantiate car1.
6. We instantiate car2.
7. We call turnOn for car2.

Now car1 would have isTurnedOn as false while car2 would have true for isTurnedOn.

It is just the tip of the iceberg, trust me. Objects, once getting used to it, are magical. They will help you structure your code and be more efficient.

Objects are like children. Right after creation, they are stupid. But as long as you teach them, they can learn. Finally they get intelligent and can run complex tasks for you.

Practical Demo: Displaying Real-Time Clock Using JavaScript #

Let’s do something. Let’s show the current time. And the first question now is, how to integrate JavaScript in HTML?

First, we start with a normal HTML document:

1
2
3
4
5
6
7
8

<!doctype html>
<html lang="en">
<head>
    <title>JavaScript Time</title>
</head>
<body>
</body>
</html>

Now to have something where we can show the time, let’s add a span into the body:

1
2
3
4
5
6
7
8
9

<!doctype html>
<html lang="en">
<head>
    <title>JavaScript Time</title>
</head>
<body>
<span id="time">...</span>
</body>
</html>

Nothing special yet, in your browser you’ll just see .... Now, to integrate some JavaScript into HTML, you need a script element:

1
2
3

<script type="text/javascript">
    // Your JavaScript goes here.
</script>

Talking about JavaScript, we need a function that builds up the time and writes it to the span we have already defined. But let’s go baby-steps here, let’s first write “hello world” to the span, once the function get called.

To interact with the HTML document from JavaScript, we can use the variable document, which is provided by the browser to all our JavaScript code. Now we can ask the document to search for an element by it’s id using getElementById. We will get a element in return, which we can update the text by overwriting the field named textContent. Long story short:

1

document.getElementById("time").textContent = "hello world";

Now after reloading your HTML document in your browser, instead of ... you should see hello world.

In JavaScript, there’s a Date object, that we can use to retrieve information about the current time. It provides functions like getHours, getMinutes and getSeconds so we can render the time to our user. In JavaScript you can concatenate text with +, so "a" + "b" would result in "ab". Now put it all together:

1
2
3
4
5
6
7
8

 function updateTime () {
     let time = new Date();

     document.getElementById("time").textContent =
         time.getHours() + ":" +
         time.getMinutes() + ":" +
         time.getSeconds();
 }

If you now reload your website, you’ll see ... again. That’s because functions get not called automatically. So remember to call your functions whenever needed. If you call it after defining it, you should see the time. Here’s the full code:

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

<!doctype html>
<html lang="en">
<head>
    <title>JavaScript Time</title>
</head>
<body>
<span id="time">...</span>

<script type="text/javascript">
    function updateTime () {
        let time = new Date();

        document.getElementById("time").textContent =
            time.getHours() + ":" +
            time.getMinutes() + ":" +
            time.getSeconds();
    }

    updateTime();
</script>
</body>
</html>

Probably you are wondering why I used a function. It seems just “to complex”, I could have simply direct execute the code without the function. Keep in mind, even if “names” are not relevant, they can help understanding “what’s going on”. Using the function we group the logic needed to update the time on the page and give it a nice name.

The next benefit is, we now can call the function multiple times. Even better, we can tell JavaScript to call our function in an interval. So let’s tell JavaScript to execute this function evey second:

1

setInterval(updateTime, 1000);

And now we have a working, self-updating website showing the clock.