Wednesday, June 21, 2023

JavaScript Switch Statement

 

The JavaScript Switch Statement

Use the switch statement to select one of many code blocks to be executed.

Syntax

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

This is how it works:

  • The switch expression is evaluated once.
  • The value of the expression is compared with the values of each case.
  • If there is a match, the associated block of code is executed.
  • If there is no match, the default code block is executed.     

    Example

     The getDay() method returns the weekday as a number between 0 and 6.

    (Sunday=0, Monday=1, Tuesday=2 ..)

    This example uses the weekday number to calculate the weekday name:        <!DOCTYPE html>

    <html>

    <body>


    <h2>JavaScript switch</h2>


    <p id="demo"></p>


    <script>

    let day;

    switch (new Date().getDay()) {

      case 0:

        day = "Sunday";

        break;

      case 1:

        day = "Monday";

        break;

      case 2:

        day = "Tuesday";

        break;

      case 3:

        day = "Wednesday";

        break;

      case 4:

        day = "Thursday";

        break;

      case 5:

        day = "Friday";

        break;

      case  6:

        day = "Saturday";

    }

    document.getElementById("demo").innerHTML = "Today is " + day;

    </script>


    </body>

    </html>

at No comments:

JavaScript if....Else

 

JavaScript if, else, and else if

Conditional Statements

Very often when you write code, you want to perform different actions for different decisions.

You can use conditional statements in your code to do this.

In JavaScript we have the following conditional statements:

  • Use if to specify a block of code to be executed, if a specified condition is true
  • Use else to specify a block of code to be executed, if the same condition is false
  • Use else if to specify a new condition to test, if the first condition is false







  • Use switch to specify many alternative blocks of code to be executed    

    The if Statement

    Use the if statement to specify a block of JavaScript code to be executed if a condition is true.

    Example  

    <html>

    <body>


    <h2>JavaScript if</h2>


    <p>Display "Good day!" if the hour is less than 18:00:</p>


    <p id="demo">Good Evening!</p>


    <script>

    if (new Date().getHours() < 18) {

      document.getElementById("demo").innerHTML = "Good day!";

    }

    </script>


    </body>

    </html>

  • The else Statement

    Use the else statement to specify a block of code to be executed if the condition is false.

  • Example  

  • <!DOCTYPE html>
    <html>
    <body>

    <h2>JavaScript if .. else</h2>

    <p>A time-based greeting:</p>

    <p id="demo"></p>

    <script>
    const hour = new Date().getHours(); 
    let greeting;

    if (hour < 18) {
      greeting = "Good day";
    } else {
      greeting = "Good evening";
    }

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

    </body>
    </html>




at No comments:

Sunday, June 18, 2023

JavaScript Booleans

 

Boolean Values

Very often, in programming, you will need a data type that can only have one of two values, like

  • YES / NO
  • ON / OFF
  • TRUE / FALSE

For this, JavaScript has a Boolean data type. It can only take the values true or false.

The Boolean() Function

You can use the Boolean() function to find out if an expression (or a variable) is true:

JavaScript Booleans

Display the value of Boolean(10 > 9):

true

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Booleans</h1>
<p>Display the value of Boolean(10 > 9):</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Boolean(10 > 9);
</script>

</body>
</html>

Comparisons and Conditions

The chapter JS Comparisons gives a full overview of comparison operators.

The chapter JS Conditions gives a full overview of conditional statements.

Here are some examples:

OperatorDescriptionExample
==equal toif (day == "Monday")
>greater thanif (salary > 9000)
<less thanif (age < 18)


at No comments:
Subscribe to: Posts (Atom)

JavaScript Animated

  JavaScript Animated <!DOCTYPE html> <html> <style> #myContainer {   width: 400px;   height: 400px;   position: relative;...

  • HTML Text Formatting Tags
     HTML Text Formatting     <code>              <!Doctype html> <html> <head><title>Html Page Sketc...
  • JavaScript For in Loop
      The For In Loop The JavaScript  for in  statement loops through the properties of an Object: for  (key  in  object) {    //  code block to...
  • JavaScript Events
      JavaScript  Events HTML Events An HTML event can be something the browser does, or something a user does. Here are some examples of HTML e...