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

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

Contents

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);

References and Resources

Official Documentation:

• MDN Web Docs: https://developer.mozilla.org/en-US/docs/Glossary/Control_flow
• JavaScript Guide: https://javascriptguide.com/

Tutorials and Articles:

• FreeCodeCamp: https://www.freecodecamp.org/news/full-javascript-course-for-beginners/
• W3Schools: https://www.w3schools.com/js/js_loop_for.asp
• The Net Ninja: https://www.youtube.com/watch?v=JloLGV9DmtQ

Books:

• Eloquent JavaScript: https://eloquentjavascript.net/
• JavaScript for Kids: https://www.pdfdrive.com/javascript-for-kids-e18717703.html

Videos:

• Khan Academy: https://en.wikipedia.org/wiki/Control_flow
• Traversy Media: https://www.youtube.com/watch?v=hdI2bqOjy3c
• Coding with Chris: https://www.youtube.com/watch?v=zIJ1udbeoYY