THM: JavaScript Essentials

Solution of JavaScript Essentials Room

Introduction

JavaScript (JS) is a popular scripting language that allows web developers to add interactive features to websites containing HTML and CSS (styling).

Once the HTML elements are created, you can add interactiveness like validation, onClick actions, animations, etc, through JS. Learning the language is equally important as that of HTML and CSS. The JS scripts are used primarily with HTML.

Essential Concepts

Variables

Variables are containers that allow you to store data values in them. Like any other language, variables in JS are similar to containers to store data.

When you store something in a bucket, you also need to label it so that it can be referenced later on easily.

Similarly, in JS, each variable has a name:

when we store a certain value in a variable, we assign a name to it to reference it later. 

There are three ways to declare variables in JS:

var, let, and const.

While var is function-scoped, both let, and const are block-scoped, offering better control over variable visibility within specific code blocks.

Data Types

In JS, data types define the type of value a variable can hold. Examples include string (text), number, boolean (true/false), null, undefined, and object (for more complex data like arrays or objects).

Functions

A function represents a block of code designed to perform a specific task.

Inside a function, you group code that needs to perform a similar task.

For example, you are developing a web application in which you need to print students' results on the web page.

The ideal case would be to create a function PrintResult(rollNum) that would accept the roll number of the user as an argument.

javascript 
   <script>
        function PrintResult(rollNum) {
            alert("Username with roll number " + rollNum + " has passed the exam");
            // any other logic to display the result
        }

        for (let i = 0; i < 100; i++) {
            PrintResult(rollNumbers[i]);
        }
    </script>

So, instead of writing the same print code for all the students, we will use a simple function to print the result.

Loops

Loops allow you to run a code block multiple times as long as a condition is true.

Common loops in JS are for, while, and do...while, which are used to repeat tasks, like going through a list of items.

For example, if we want to print the results of 100 students, we can call the PrintResult(rollNum) function 100 times by writing it 100 times, or we can create a loop that will be iterated through 1 to 100 and will call the PrintResult(rollNum) function as shown below.

javascript 
        // Function to print student result
        function PrintResult(rollNum) {
            alert("Username with roll number " + rollNum + " has passed the exam");
            // any other logic to the display result
        }

        for (let i = 0; i < 100; i++) {
            PrintResult(rollNumbers[i]); // this will be called 100 times 
        }

Request-Response Cycle

In web development, the request-response cycle is when a user's browser (the client) sends a request to a web server, and the server responds with the requested information.

This could be a webpage, data, or other resources.

Answer the questions

What term allows you to run a code block multiple times as long as it is a condition?

Answer: loop

JavaScript Overview

In this task, we’ll use JS to create our first program. JS is an interpreted language, meaning the code is executed directly in the browser without prior compilation. 

Below is a sample JS code demonstrating key concepts, such as defining a variable, understanding data types, using control flow statements, and writing simple functions.

These essential building blocks help create more dynamic and interactive web apps. Don’t worry if it looks a bit new now - we will discuss each of these concepts in detail later on.

javascript 
 // Hello, World! program
console.log("Hello, World!");

// Variable and Data Type
let age = 25; // Number type

// Control Flow Statement
if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are a minor.");
}

// Function
function greet(name) {
    console.log("Hello, " + name + "!");
}

// Calling the function
greet("Bob");

JS is primarily executed on the client side, which makes it easy to inspect and interact with HTML directly within the browser.

We’ll use the Google Chrome Console feature to run our first JS program, allowing us to write and execute JS code easily without additional tools. Follow these steps to get started:

  • Open Google Chrome by clicking the Google Chrome icon on the Desktop of the VM.
  • Once Chrome is open, press Ctrl + Shift + I to open the Console or right-click anywhere on the page and select Inspect.
  • Then, click on the Console tab. This console allows you to run JS code directly in the browser without installing additional software.
  • Let's create a simple JS program that adds two numbers and displays the result. Below is the code:

javascript 
let x = 5;
let y = 10;
let result = x + y;
console.log("The result is: " + result);

  • In the code above, x and y are variables holding the numbers. x + y is an expression that adds the two numbers together, whereas console.log  is a function used to print the result to the console.
  • Copy the above code and paste it into the console by pressing the key Ctrl + V. Once pasted, press Enter.

Congratulations! You’ve successfully created your first program in JS. This is just the beginning, and there’s much more to explore as we dive deeper into JS in this room.

Answer the questions

What is the code output if the value of x is changed to 10?

javascript 
let x = 10;
let y = 10;
let result = x + y;
console.log("The result is: " + result);

Answer: The result is: 20

Is JavaScript a compiled or interpreted language?

Answer: interpreted

Integrating JavaScript in HTML

This task assumes you have a basic understanding of HTML and its structure. This section will explore how JS can be integrated into HTML. Usually, JS is not used to render content; it works with HTML and CSS to create dynamic and interactive web pages. If you're unfamiliar with HTML, reviewing it through the provided link is recommended. There are two main ways to integrate JS into HTML:

  • internally
  • externally.

Internal JavaScript

Internal JS refers to embedding the JS code directly within an HTML document. This method is preferable for beginners because it allows them to see how the script interacts with the HTML. The script is inserted between <script> tags. These tags can be placed inside the <head> section, typically used for scripts that need to be loaded before the page content is rendered, or inside the <body> section, where the script can be utilised to interact with elements as they are loaded on the web page.

Example

To create an HTML document with internal JS, right-click on the Desktop and select Create Document > Empty File. Name the file internal.html. Next, right-click the internal.html file and choose Open with Pluma to open it in a text editor.

Once the editor is open, paste the following code:

javascript 
 <!DOCTYPE html>
<html lang="en">
<head>
    <title>Internal JS</title>
</head>
<body>
    <h1>Addition of Two Numbers</h1>
    <p id="result"></p>

    <script>
        let x = 5;
        let y = 10;
        let result = x + y;
        document.getElementById("result").innerHTML = "The result is: " + result;
    </script>
</body>
</html>

After pasting the code, click File and select Save, which will save the file to internal.html.

Double-click the file to open it in Chrome browser,

In this HTML document, we are using internal JS, meaning the code is placed directly inside the HTML file within the <script> tag.

The script performs a simple task: it adds two numbers (x and y) and then displays the result on the web page.

The JS interacts with the HTML by selecting an element (<p> with id="result") and updating its content using document.getElementById("result").innerHTML.

This internal JS is executed when the browser loads the HTML file.

External JavaScript

External JS involves creating and storing JS code in a separate file ending with a .js file extension. This method helps developers keep the HTML document clean and organised. The external JS file can be stored or hosted on the same web server as the HTML document or stored on an external web server such as the cloud.

We will use the same example for external JS but separate the JS code into a different file.

First, create a new file named script.js and save it on the Desktop with the following code:

javascript 
let x = 5;
let y = 10;
let result = x + y;
document.getElementById("result").innerHTML = "The result is: " + result;

Next, create a new file named external.html and paste the following code (notice that the HTML code is the same as that of the previous example):

html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External JS</title>
</head>
<body>
    <h1>Addition of Two Numbers</h1>
    <p id="result"></p>

    <!-- Link to the external JS file -->
    <script src="script.js"></script>
</body>
</html>

What we did differently is use the src attribute in the <script> tag to load the JS from an external file. When the browser loads the page, it looks for the script.js file and loads its content into the HTML document.

This approach allows us to keep the JS code separate from the HTML, making the code more organised and easier to maintain, especially when working on larger projects.

Answer the questions

Which type of JavaScript integration places the code directly within the HTML document?

Answer: Internal

Which method is better for reusing JS across multiple web pages?

Answer: External

What is the name of the external JS file that is being called by **external_test.html**?

bash 
ubuntu@tryhackme:~$ cat Desktop/exercise/external_test.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External JS</title>
</head>
<body>
    <h1>Can you verify the JS?</h1>
    <p id="result"></p>

    <!-- Link to the external JS file -->
    <script src="thm_external.js"></script>
</body>
</html>
ubuntu@tryhackme:~$

Answer: thm_external.js

What attribute links an external JS file in the `