Posted on Dec 28, 2023 • Edited on Dec 31, 2023

Part 7: All You Need to Know to Master Web Development With HTML CSS and JavaScript

#webdev #javascript #beginners #tutorial

Conquering Control Flow: Your Guide to JavaScript's Decision-Making Power.

Introduction
Conditional Statements
Loops
Break and Continue
Projects
References and Resources

Unlocking Dynamic JavaScript with Control Flow

Control flow is like a director, guiding your code through various paths and decisions. It's essential for building interactive and responsive programs that adapt to user input and changing conditions. Here's a guide to mastering control flow in JavaScript, packed with examples and use cases:

Key Concepts and Examples

1. Conditional Statements:

if/else:
- Example: "If the user is logged in, display their profile. Else, show the login page."
```
 if (isLoggedIn) { showProfile(); } else { showLoginPage(); } 
```

switch/case:

Example: "Choose a language based on the user's selection."

 switch (selectedLanguage) { case "en": setLanguage("English"); break; case "es": setLanguage("Spanish"); break; default: setLanguage("English"); // Default option }

2. Loops:

for loop:
- Example: "Count down from 10 to 1, displaying each number."
```
 for (let i = 10; i >= 1; i--) { console.log(i); } 
```

while loop:

Example: "Repeat a quiz question until the user answers correctly."

 while (answer !== correctAnswer) { askQuestion(); answer = getUserInput(); }

for...of loop:

Example: "Display each item in a shopping cart."

 for (const item of cartItems) { console.log(item.name, item.price); }

3. Break and Continue:

Break:

Example: "Exit a loop when a specific condition is met."

 for (let i = 0; i < 100; i++) { if (foundItem) { break; // Exit the loop when item is found } // Continue searching... }

Continue:

Example: "Skip to the next iteration of a loop."

 for (let i = 0; i < numbers.length; i++) { if (numbers[i] % 2 === 0) { continue; // Skip even numbers } // Process odd numbers... }

Projects

Project 1: Coin Flipping Game

function playCoinGame() { let correctGuesses = 0; const totalFlips = 3; // Adjust for desired number of flips for (let i = 1; i <= totalFlips; i++) { const coinFlip = Math.random() >= 0.5 ? "heads" : "tails"; console.log(`Flip ${i}: Guess heads or tails?`); let userGuess = ""; while (userGuess !== "heads" && userGuess !== "tails") { userGuess = prompt("Enter your guess (heads or tails):").toLowerCase(); if (userGuess !== "heads" && userGuess !== "tails") { console.log("Invalid guess. Please enter heads or tails."); } } if (userGuess === coinFlip) { console.log(`Correct! It's ${coinFlip}.`); correctGuesses++; } else { console.log(`Incorrect. It was ${coinFlip}.`); } } console.log(`You guessed ${correctGuesses} out of ${totalFlips} correctly.`); } playCoinGame();

Project 2: Text-Based Adventure Game

let currentRoom = "start"; function startRoom() { console.log("You are in a dark forest."); console.log("There is a path to the north and a cave to the east."); let choice = prompt("Do you go north or east?"); if (choice.toLowerCase() === "north") { currentRoom = "north"; } else if (choice.toLowerCase() === "east") { currentRoom = "cave"; } else { console.log("Invalid choice."); startRoom(); } } // Add more rooms and choices as needed startRoom();

Project 3: Password Generator

function generatePassword(length, requirements) { let characters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+-=[]{};':\"\\|,.<>/?"; let password = ""; for (let i = 0; i < length; i++) { let randomIndex = Math.floor(Math.random() * characters.length); let character = characters[randomIndex]; // Check requirements (example) if (requirements.includes("uppercase") && !/[A-Z]/.test(password)) { character = character.toUpperCase(); } password += character; } return password; } const password = generatePassword(12, ["uppercase", "number", "symbol"]); console.log(password);