Session 1

Javascript is a high-level, interpreted programming language that is widely used for web development. It was created by Brendan Eich in 1995 and has since become one of the most popular programming languages in the world. JavaScript is primarily used for client-side scripting, allowing developers to create interactive and dynamic web pages. It can also be used on the server-side with environments like Node.js, Deno, Bun and Cloudflare Workers (don’t mix with web workers).

In this session, we will introduce the basic JavaScript constructs, conditional statements and control flow statements. The lab manual includes good examples and exercises to practice these concepts.

Objectives

The objectives of this session are to:

• Understand the basic JavaScript constructs
• Understand conditional statements and control flow statements

Arithmetic Operators

Problem Statement

Q1: Write a JavaScript code to perform the two digit arithmetic operations: Addition, Subtraction, Multiplication and Division.

Approach

To perform arithmetic operations on two digits, we can follow these steps:

• Define two variables to hold the digits we want to operate on.
• Use the arithmetic operators (+, -, *, /) to perform the desired operations.
• Print the results to the console.

Code Implementation

// 1. Define the input numbers
// We use 'let' or 'const' to store our numeric values
const num1 = 15;
const num2 = 10;

console.log(`Operating on numbers: ${num1} and ${num2}\n`);

// 2. Addition (+)
// The sum of two numbers
const addition = num1 + num2;
console.log("Addition: " + num1 + " + " + num2 + " = " + addition);

// 3. Subtraction (-)
// Subtracting the second number from the first
const subtraction = num1 - num2;
console.log("Subtraction: " + num1 + " - " + num2 + " = " + subtraction);

// 4. Multiplication (*)
// The product of two numbers
const multiplication = num1 * num2;
console.log("Multiplication: " + num1 + " * " + num2 + " = " + multiplication);

// 5. Division (/)
// Dividing the first number by the second
// Note: We check if num2 is zero when taking input to avoid mathematical errors
const division = num1 / num2;
console.log("Division: " + num1 + " / " + num2 + " = " + division);

Explanation

• Variables: We use const (constant) because these values aren’t changing during the script’s execution. If you want to change them later, you would use let.

• Arithmetic Operators: JavaScript uses standard mathematical symbols: +, -, *, and /.

• Console.log: This is the standard method to print output to the debugging console.

• Division Safety: In computer science, “Division by Zero” is a common logical error. Including a conditional if check demonstrates good programming practice for your lab submission.

• String Concatenation: Using the + symbol between a string (text in quotes) and a variable allows us to combine them into a single readable sentence for the output.

Pattern Printing

Problem Statement

Q2: Write a JavaScript code to print 1 for 1 time 2 for 2 times, 3 for 3 times and so on up to 10.

Approach

The goal is to create a visual pattern where each number n repeats itself n times on a single line. To achieve this, we need Nested Loops:

• The Outer Loop will act as a counter that moves from 1 to 10. This tells us which number we are currently processing.
• The Inner Loop will run based on the value of the outer loop. If the outer loop is at 5, the inner loop will execute 5 times to print the digit “5”.
• We will collect the digits in a string for each row so they stay on the same line, then print that row before moving to the next number.

Code Implementation

// Outer loop: Determines the number to be printed (1 through 10)
for (let i = 1; i <= 10; i++) {
  let row = ""; // Reset the row string for the current number

  // Inner loop: Controls the frequency of the print
  // It runs 'i' times for the number 'i'
  for (let j = 1; j <= i; j++) {
    row += i + " "; // Append the number and a space to the row
  }

  // Print the completed row to the console
  console.log(row.trim());
}

Explanation

• Nested Loop Logic: Think of this like a clock. The outer loop is the “hour” hand (moving slowly), and the inner loop is the “minute” hand (completing a full cycle for every single step the hour hand takes).

• Dynamic Range: The inner loop condition j <= i is what makes the pattern triangular. Because the limit of the inner loop depends on the current value of the outer loop, the rows get progressively longer.

• String Accumulation: In JavaScript, console.log() automatically adds a new line. To get numbers like 2 2 on the same line, we must first build a string (rowOutput) and print it once the inner loop finishes its work for that row.

• trim() Method: We use .trim() at the end to remove the very last space of each row, ensuring the output is clean for your lab record.

Portfolio Exercise

Q3: Discuss first with the group