JavaScript with Sequence and Control Flow

JavaScript with Sequence

1. Introduction to Sequence in JavaScript

• A sequence is the order in which instructions are executed in a program.

• In JavaScript, statements are executed line by line, from top to bottom, unless directed otherwise by control structures (such as loops or conditionals).

Example

• Code:

  let name = "Alice";
  let age = 20;
  console.log(name);
  console.log(age);

• Sequence of Execution:

  1. Variable name is assigned "Alice".

  2. Variable age is assigned 20.

  3. console.log(name) prints "Alice".

  4. console.log(age) prints 20.

2. Process in JavaScript

• Processing refers to manipulating or computing data.

• This can involve arithmetic operations, string operations, or data transformation.

• JavaScript provides operators such as +, -, *, /, functions, and methods for processing data.

Example

• Code:

  let num1 = 10;
  let num2 = 5;
  let sum = num1 + num2;
  console.log("Sum is: " + sum);

• Processing Description:

  • Adding two numbers and storing the result in sum.

  • Output: "Sum is: 15"

Other Processing Examples

• String Concatenation:

  • Expression: "Hello, " + "World" → "Hello, World"

• Using Functions:

  • Code:
    let square = Math.pow(4, 2); // 4 squared console.log(square); // 16

3. Output in JavaScript

• Output is how the program communicates results to the user.

• Common ways to output data:

  1. console.log() – displays output in the browser console.

  2. alert() – shows a pop-up message to the user.

  3. document.write() – writes output directly to the webpage (less commonly used in modern practice).

Examples

• Console Output:

  console.log("Hello, JavaScript!");

• Alert Popup:

  alert("Welcome to JS Programming!");

• Writing on Web Page:

  document.write("This is JavaScript Output!");

4. Putting It All Together

• A simple program demonstrating sequence, process, and output:

Code

// Sequence & Process  
let firstName = "John";  
let lastName = "Doe";  
let age = 25;  

// Processing  
let fullName = firstName + " " + lastName;  
let nextYearAge = age + 1;  

// Output  
console.log("Full Name: " + fullName);  
console.log("Age next year: " + nextYearAge);  
alert("Welcome, " + fullName + "!");  

• Sequence Description:

  • Lines are executed from top to bottom.

• Process Description:

  • Combine strings to form fullName, calculate next year’s age as nextYearAge.

• Output Description:

  • Display results in the console and as an alert pop-up.

JavaScript with HTML - Control Flow (Conditional Statements)

1. Introduction to Control Flow

• Control flow determines the order in which instructions are executed in a program.

• Conditional statements allow a program to execute certain code only if a condition is true.

• Common conditional statements in JavaScript:

  • if

  • if...else

  • if...else if...else

2. The if Statement

• Executes a block of code only if the condition is true.

Syntax

if (condition) {  
  // code to execute if condition is true  
}

Example

• Code:

let age = 18;  
if (age >= 18) {  
  document.write("You are eligible to vote.<br>");  
}

• Output on web page:

  • "You are eligible to vote."

3. The if…else Statement

Syntax

if (condition) {  
  // code if true  
} else {  
  // code if false  
}

Example

• Code:

let marks = 65;  
if (marks >= 75) {  
  document.write("You got an A grade.<br>");  
} else {  
  document.write("You need to improve.<br>");  
}

• Output if marks = 65:

  • "You need to improve."

4. The if…else if…else Statement

• Useful for evaluating multiple conditions.

Syntax

if (condition1) {  
  // code if condition1 is true  
} else if (condition2) {  
  // code if condition2 is true  
} else {  
  // code if none of the above conditions are true  
}

Example

• Code:

let score = 85;  
if (score >= 90) {  
  document.write("Grade: A<br>");  
} else if (score >= 75) {  
  document.write("Grade: B<br>");  
} else if (score >= 50) {  
  document.write("Grade: C<br>");  
} else {  
  document.write("Grade: F<br>");  
}

• Output if score = 85:

  • "Grade: B"

5. Using Conditional Statements with HTML

• You can integrate JavaScript with HTML to enhance interactivity on web pages.

Example

• Code:

<!DOCTYPE html>
<html>
<head>
  <title>Conditional Example</title>
</head>
<body>
<script>
  let age = prompt("Enter your age:");
  if (age >= 18) {
    document.write("You can vote!<br>");
  } else {
    document.write("You are too young to vote.<br>");
  }
</script>
</body>
</html>

6. switch Statement

• Use switch when you need to evaluate multiple discrete values.

• Often results in cleaner code compared to multiple if...else if statements.

Syntax

switch(expression) {  
  case value1:  
    // code  
    break;  
  case value2:  
    // code  
    break;  
  default:  
    // code if no case matches  
}

Example

• Code:

let day = "Tuesday";
switch(day) {
  case "Monday":  
    document.write("Start of the week<br>");  
    break;  
  case "Tuesday":  
    document.write("Second day<br>");  
    break;  
  case "Friday":  
    document.write("Almost weekend<br>");  
    break;  
  default:  
    document.write("Regular day<br>");  
}

• Output:

  • "Second day"

Activity