If%2C+While%2C+Arrays%2C+Objects+and+Functions

JavaScript Basics

Conditional Statements

• if...else Statement

  • Allows execution of different actions based on conditions.

  • Example:

    var x = 5;
    if (x < 10) {
        alert("Whoop!");
    } else {
        alert("No Whoop!");
    }

  • Structure:

    if (condition) {
        // code here
    } else if (condition) {
        // more code here
    } else {
        // more code here
    }

• Example of Time-Based Greeting:

  <h2>JavaScript if.. else</h2>
  <script>
  const time = new Date().getHours();
  let greeting;
  if (time < 12) {
      greeting = "Good morning";
  } else if (time < 17) {
      greeting = "Good afternoon";
  } else {
      greeting = "Good evening";
  }
  document.getElementById("demo").innerHTML = greeting;
  </script>

Loops

• Purpose: To repeat actions multiple times based on a condition.

• Code block executed every loop. Usually used as a counter.

• Types of Loops:

  • While Loop

  • Do...While Loop

  • For Loop

While Loop

• Executes code as long as the condition is true.

• Example:

  let A = 0;
  while (A < 3) {
      console.log("Hello");
      A = A + 1;
  }

• HTML Example:

  <script>
  let text = "";
  let i = 0;
  while (i < 10) {
      text += "<br>The number is " + i;
      i++;
  }
  document.getElementById("demo").innerHTML = text;
  </script>

Do While Loop

• Similar to the While loop but guarantees the code runs at least once.

• Example:

  let A = 0;
  do {
      console.log("Hello");
      A++;
  } while (A < 3);

• HTML Example:

  <script>
  let text = "";
  let i = 0;
  do {
      text += "<br>The number is " + i;
      i++;
  } while (i < 10);
  document.getElementById("demo").innerHTML = text;
  </script>

For Loop

• Combines initialization, condition, and incrementation/decrementation in one line.

• Example:

  for (var i = 0; i < 10; i++) {
      console.log("Let’s count! " + i);
  }

• HTML Example:

  <script>
  let text = "";
  for (let i = 0; i < 10; i++) {
      text += "The number is " + i + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
  </script>

Arrays

• Used to store multiple values in a single variable.

• Creating an Array:

  var myBreakfast = ["Mushrooms", "Eggs", "Bacon"];  
  var cars = ["Saab", "Volvo", "BMW"];  

• Accessing Elements:

  • Array indexing starts at 0.

  • Example:

    var myBreakfast = ["Mushrooms", "Eggs", "Bacon"];  
    console.log(myBreakfast[0]); // returns "Mushrooms"

  • Accessing a non-existing index (e.g., myBreakfast[3]) results in undefined.

• Array Methods:

  • length: Number of elements in the array.

  • push(): Add element to the end.

  • pop(): Remove last element.

  • Example:

    breakfast.push("Beans"); // ["Mushrooms", "Eggs", "Bacon", "Beans"];

Objects

• Store collections of data with key-value pairs.

• Creating an Object:

  var student = {
      firstName: 'Sally',
      lastName: 'Smith',
      age: 20
  };

• Accessing Object Properties:

  • Dot Notation:

    console.log(student.age); // returns 20

  • Bracket Notation:

    console.log(student['age']); // returns 20

• Modifying Properties:

  • Change existing values or add new properties.

  • Example:

    student.age = 30;
    student.hobbies = ['hiking', 'travel', 'reading'];

Functions

• Definition: A set of statements that perform a specific task.

• Allows code reuse by running code on event triggers or function calls.

• Example of Function:

  function myFunction(a, b) {
      return a * b;
  }
  let x = myFunction(4, 3) * 2; // 24

• HTML Usage:

  <script>
  document.getElementById("demo").innerHTML = x;
  </script>