CSCI 121 - Lecture 12 - JavaScript Functions, Conditional and Control Statements

Topics Covered

• JavaScript Functions:
1. What are Functions?
• A JavaScript function is a block of code designed to perform a particular task.
• A JavaScript function is executed when "something" invokes it (calls it).

• function myFunction(p1, p2) {
      return p1 * p2;              // The function returns the product of p1 and p2
  }
  

2. Function Syntax
• A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().
• Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).
• The parentheses may include parameter names separated by commas: (parameter1, parameter2, ...).
• The code to be executed, by the function, is placed inside curly brackets: {}

• function name(parameter1, parameter2, parameter3) {
      // code to be executed
  }
  

• Function parameters are the names listed in the function definition.
• Function arguments are the real values received by the function when it is invoked.
• Inside the function, the arguments (the parameters) behave as local variables.
3. Function Invocation
• The code inside the function will execute when "something" invokes (calls) the function:
• When an event occurs (when a user clicks a button)
• When it is invoked (called) from JavaScript code
• Automatically (self invoked) - we won't cover those at this time
4. Function Return
• When JavaScript reaches a return statement, the function will stop executing.
• If the function was invoked from a statement, JavaScript will "return" to execute the code after the invoking statement.
• Functions often compute a return value. The return value is "returned" back to the "caller":

• var x = myFunction(4, 3);        // Function is called, return value will end up in x
  
  function myFunction(a, b) {
      return a * b;                // Function returns the product of a and b
  }
  

• The result in X above will be:  12
5. Why Functions?
• You can reuse code: Define the code once, and use it many times.
• You can use the same code many times with different arguments, to produce different results.
• Example - Convert Fahrenheit to Celsius:

• function toCelsius(fahrenheit) {
      return (5/9) * (fahrenheit-32);
  }
  document.getElementById("demo").innerHTML = toCelsius(77);
  

• JavaScript Conditional and Control Statements
1. Conditional Statements
1. Overview
• Conditional statements are used to perform different actions based on different conditions.
• 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
2. If
• Use the if statement to specify a block of JavaScript code to be executed if a condition is true.
• Syntax:

• if (condition) {
      block of code to be executed if the condition is true
  }
  

• Example - Make a "Good day" greeting if the hour is less than 18:00:

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

3. Else
• Use the else statement to specify a block of code to be executed if the condition is false.
• Syntax:

• if (condition) {
      block of code to be executed if the condition is true
  }
  } else { 
      block of code to be executed if the condition is false
  }
  

• Example - If the hour is less than 18, create a "Good day" greeting, otherwise "Good evening":

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

4. Else If
• Use the else if statement to specify a new condition if the first condition is false.
• Syntax:

• if (condition1) {
      block of code to be executed if condition1 is true
  } else if (condition2) {
      block of code to be executed if condition1 is false and condition2 is true
  } else {
      block of code to be executed if condition1 is false and condition2 is false
  }
  

• Example - If hour is less than 10:00, create a "Good morning" greeting, if not, but time is less than 20:00, create a "Good day" greeting, otherwise a "Good evening":

• if (hour < 10) {
      greeting = "Good morning";
  } else if (hour < 20) {
      greeting = "Good day";
  } else {
      greeting = "Good evening";
  }
  

5. Switch
• Use the switch statement to select one of many blocks of code to be executed.
• Syntax:

• switch(expression) {
      case n:
          code block
          break;
      case n:
          code block
          break;
      default:
          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.
• Example - The getDay() method returns the weekday as a number between 0 and 6. (Sunday=0, Monday=1, Tuesday=2 ..). Use the weekday number to calculate weekday name:

• 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";
  }
  

• The break keyword
• When JavaScript reaches a break keyword, it breaks out of the switch block.
• This will stop the execution of more code and case testing inside the block.
• When a match is found, and the job is done, it's time for a break. There is no need for more testing.
• A break can save a lot of execution time because it "ignores" the execution of all the rest of the code in the switch block.
• It is not necessary to break the last case in a switch block. The block breaks (ends) there anyway.
• The default keyword - Specifies the code to run if there is no case match:
• Multiple Cases - Common code can be used for multiple cases.
• Sometimes, in a switch block, you will want different cases to use the same code, or fall-through to a common default.
• Note from the next example, that cases can share the same code block, and that the default case does not have to be the last case in a switch block:

• switch (new Date().getDay()) {
      case 1:
      case 2:
      case 3:
      default: 
          text = "Looking forward to the Weekend";
          break; 
      case 4:
      case 5:
         text = "Soon it is Weekend";
          break; 
      case 0:
      case 6:
         text = "It is Weekend";
  }
  
2. Control Statements (aka Loops)
• See Lecture 13

* Examples and content from W3Schools.com.