Web Development (Session 12)

Shape Image One

BASIC CONCEPTS
& LOOPS IN
JAVASCRIPT

Introduction

JavaScript is a powerful scripting language used to create dynamic and interactive web content. Understanding its basic concepts and control structures like loops is fundamental for any aspiring web developer. This section will cover variables, data types, operators, and loops in JavaScript.

Basic Concepts

1. Variables:

Variables are containers for storing data values. In JavaScript, you can declare variables using var, let, or const.

let name = “Alice”;

const age = 25;

var city = “New York”;

2. Data Types:

JavaScript supports several data types, including:

String: Used for text.

let greeting = “Hello, World!”;

Number: Used for numeric values.

let score = 100;

Boolean: Used for true/false values.
javascript
Copy code
let isActive = true;

Array: Used for storing multiple values.

let colors = [“red”, “green”, “blue”];


Object: Used for storing key-value pairs.

let person = { name: “Alice”, age: 25 };

3. Operators:

JavaScript includes various operators for performing operations on variables.

Arithmetic Operators: +, , *, /, %
let sum = 10 + 5;

let product = 10 * 5;

Comparison Operators: ==, ===, !=, !==, <, >, <=, >=
let isEqual = (10 == “10”); // true

let isStrictEqual = (10 === “10”); // false

Logical Operators: &&, ||, !
let isBothTrue = (true && false); // false

let isEitherTrue = (true || false); // true

Loops

Loops are used to execute a block of code repeatedly until a specified condition is met.

1. for Loop:

The for loop is used to repeat a block of code a certain number of times.

for (let i = 0; i < 5; i++) {

    console.log(“Iteration ” + i);

}

2. while Loop:

The while loop is used to repeat a block of code as long as a specified condition is true.

let i = 0;

while (i < 5) {

    console.log(“Iteration ” + i);

    i++;

}

3. do...while Loop:

The dowhile loop is similar to the while loop, but it executes the block of code at least once before checking the condition.

let i = 0;

do {

    console.log(“Iteration ” + i);

    i++;

} while (i < 5);

4. for...in Loop:

The for…in loop is used to iterate over the properties of an object.

let person = { name: “Alice”, age: 25 };

for (let key in person) {

    console.log(key + “: ” + person[key]);

}

5. for...of Loop:

The for…of loop is used to iterate over the values of an iterable object (like an array).

let colors = [“red”, “green”, “blue”];

for (let color of colors) {

    console.log(color);

}

Examples and Use Cases

1. Looping Through an Array:

Using a for loop to iterate through an array and print each element.

let fruits = [“apple”, “banana”, “cherry”];

for (let i = 0; i < fruits.length; i++) {

    console.log(fruits[i]);

}

2. Calculating the Sum of Numbers:

Using a while loop to calculate the sum of numbers from 1 to 10.

let sum = 0;

let i = 1;

while (i <= 10) {

    sum += i;

    i++;

}

console.log(“Sum: ” + sum);

3. Validating User Input:

Using a do…while loop to prompt the user until valid input is received.

let input;

do {

    input = prompt(“Enter a number greater than 10:”);

} while (input <= 10);

console.log(“You entered: ” + input);

Additional Resources

Articles:
Videos:

Conclusion

Understanding basic concepts like variables, data types, and operators, along with control structures like loops, is fundamental for mastering JavaScript. Practice these concepts to build a strong foundation in JavaScript programming.

Optimized by Optimole
WhatsApp whatsapp
Messenger messenger
Instagram instagram
Call Us phone
chat