JavaScript Essentials: Conditionals, Loops, and Tasks
1. JavaScript Conditionals
Definition:
Conditionals enable decision-making by executing specific code blocks based on the result of a
condition.
Key Statements:
1. if statement: Executes code if the condition is true.
Example:
let age = 20;
if (age >= 18) {
console.log("You are eligible to vote.");
2. if-else statement: Adds a fallback if the condition is false.
Example:
let number = 5;
if (number % 2 === 0) {
console.log("Even number");
} else {
console.log("Odd number");
3. switch statement: Executes one case block depending on the value.
Example:
let day = "Monday";
switch (day) {
case "Monday":
console.log("Start of the week");
break;
case "Friday":
console.log("Weekend is near");
break;
default:
console.log("Midweek");
Use Cases:
- Login validation
- Form handling
- Decision-making based on user input
2. JavaScript Loops
Definition:
Loops execute a block of code repeatedly based on a condition. They simplify repetitive tasks.
Loop Types:
1. for loop: Executes for a fixed number of iterations.
Example:
for (let i = 0; i < 5; i++) {
console.log(i);
}
2. while loop: Repeats as long as the condition is true.
Example:
let count = 0;
while (count < 3) {
console.log(count);
count++;
3. do-while loop: Executes the block at least once before checking the condition.
Example:
let number = 0;
do {
console.log(number);
number++;
} while (number < 3);
4. forEach loop: Iterates through array elements.
Example:
let colors = ["red", "green", "blue"];
colors.forEach((color) => console.log(color));
5. for-in loop: Iterates over object properties.
Example:
let person = { name: "John", age: 30 };
for (let key in person) {
console.log(`${key}: ${person[key]}`);
}
6. for-of loop: Iterates over iterable objects like arrays or strings.
Example:
let numbers = [1, 2, 3];
for (let num of numbers) {
console.log(num);
Use Cases:
- Iterating through arrays
- Rendering UI dynamically
- Bulk data processing
3. Tasks with Clues
1. Login Page (Conditionals):
- Create a login page where users enter a username and password.
- Use if-else to check credentials and redirect to a welcome page or show an error.
2. Number Guessing Game (Loops):
- Generate a random number between 1 and 10 using Math.random().
- Allow 5 guesses with feedback like "Too high" or "Too low".
- Use a while loop to manage attempts.
3. To-Do List (Repetition):
- Build a dynamic to-do list using arrays and forEach.
- Allow users to add, display, and mark tasks as completed.
4. Quiz Application:
- Display 5 multiple-choice questions.
- Use for and if-else to evaluate answers, calculate scores, and display results.
5. Shopping Cart:
- Create a cart where users add items and calculate total prices.
- Apply a discount for purchases exceeding a certain amount.
Clues for Implementation:
- Use if-else for condition handling.
- Combine loops like for or while with Math.random() for dynamic logic.
- Use arrays for dynamic storage of tasks or items.
- Employ event listeners for user interaction.
