Javascript If Else Statement

3 Key excerpts on "Javascript If Else Statement"

• 

  No longer available |Learn more

  The JavaScript Workshop

  A New, Interactive Approach to Learning JavaScript

  • Joseph Labrecque, Jahred Love, Daniel Rosenbaum, Nick Turner, Gaurav Mehla, Alonzo L. Hosford, Florian Sloot, Philip Kirkbride(Authors)
  • 2019(Publication Date)
  • Packt Publishing

    (Publisher)

  Code blocks are statements that are placed between an open and close curly bracket. The syntax is as follows: //Code block      {                    //Statement       //Statement       //Statement    } Code blocks by themselves do not offer any statement flow advantage until you combine them with conditional or loop statements.

  Conditional Flow Statements

  Conditional statements use logic expressions to choose from among a set of statements to process.

  if...else Statement

  The if , else...if , and else statements give you four structures for selecting or skipping blocks of code.

  if Statement

  Code in an if statement is processed if the expression evaluates to true and is skipped if the expression evaluates to false . The syntax is as follows:

  if(boolean expression){    //Statement    //Statement    //Statement } if(boolean expression)    //Single statement

  This shows the flow of the if statement. If the Boolean expression is true , the code is processed. If false , the code is skipped:

  Figure 3.4: The if flowchart

  Exercise 3.05: Writing an if statement

  In this exercise, you will use the if statement to test for an even number between 1 and 6 and test the results in your web browser console window. Let's get started:

  1. Open the if-statement.html document in your web browser.
  2. Open the web developer console window using your web browser.
  3. Open the if-statement.js document in your code editor, replace all of its content with the following code, and then save it:var diceValue = Math.floor(Math.random() * 6) + 1; console.log("Dice value:", diceValue); if(diceValue % 2 != 0){ console.log("Is an odd number."); }
  4. The Math.random() function randomly creates a whole number from 1 to 6 and displays it in the console. Here, the if statement states that if the remainder of the number, divided by two, is not zero, that is, diceValue % 2 != 0 , then the if expression is true and the console.log() message is displayed in the console.
  5. Reload the if-statement.html web page in your web browser with the console window open. Repeat until you see a version of the two examples:// Example of output if the number is odd.   Dice value: 3   Is an odd number.

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  Beginning HTML and CSS

  • Rob Larsen(Author)
  • 2013(Publication Date)
  • Wrox

    (Publisher)

  if...else statements, which are used when you want to execute one set of code if a condition is true and another if it is false
• switch statements, which are used when you want to select one block of code from many depending on a situation

if Statements

if statements enable code to be executed when the condition specified is met; if the condition is true then the code in the curly braces is executed. Here is the syntax for an if statement:
if ( condition ){ //code to be executed if condition is true }
For example, you might want to start your homepage with the text “Good Morning” if the time is in the morning. You can achieve this using the following script (ch10_eg04.js ):
var date = new Date(); var time = date.getHours(); if (time < 12) { document.body.innerHTML += '<h1>Good Morning</h1>'; }
This example first creates a Date object (which you learn about later in the chapter) and then calls the getHours() method of the Date object to find the time in hours (using the 24-hour clock). If the time in hours is less than 12, then the script writes an <h1> element saying “Good Morning” into the body of the page. (If it is after 12, you see a blank page because nothing is written to it.) This example uses the innerHTML property to write the <h1> into the page. The innerHTML property is a string that represents the HTML markup inside any HTML element. In this case, you add the string <h1>Good Morning</h1> to the body by using the shorthand += assignment operator on the string.
For clarity this line could be rewritten
document. body. innerHTML = document. body. innerHTML + ' <h1>Good Morning</h1> ' ;

if . . . else Statements

When you have two possible situations and you want to react differently for each, you can use an if...else statement. This means: “If the conditions specified are met, run the first block of code; otherwise run the second block.” The syntax follows:
if ( condition ){ //code to be executed if condition is true } else{ //code to be executed if condition is false }