Welcome to the Javascript Functions Homepage, Guest!


Javascript | Blocks of code to perform specific tasks




Functions

It will be hard to generalize functions into one small tutorial, but we will try to gather as much information on Javascript functions as possible. A Javascript function is a group of text or block of code that is written and designed to perform a particular task or operation. A Javascript function is executed whenever something has invoked the function, or it is referred to as calling the function.

function myFunction(x, y, z){
    return x + y * z;
}

The function above will return the addition of x and y multiplied by z.




Function Syntax

The syntax for defining a function within Javascript is function keyword, then nameOfFunction, and followed by a set of parenthese: (). Function names can only contain letters, digits, underscores, and dollar signs. The same rules apply to variable names. The parentheses will hold the parameters for the function. The function can hold no parameters to as many as needed: (parameter0, parameter1, ...). The function parameters are the names listed inside of the function parentheses. Function arguments are the real values received byt he function when it is invoked or called. A function is similar to procedures or subroutines that are associated with other programming languages. Inside the Javascript function, the arguments (the parameters) behave as local variables.

function functionName(parameter0, parameter1, parameter2){

     code that will be read and executed;

}




Invocation

The code that is within your function will execute when something calls the function, or commonly known as invokes the function. Invocation can occur when a user clicks a button creating an event, when the function is called (invoked) within Javascript code, or the function call could be automatically set up to self invoke.




Return Statements

Within the function there will be execution code, and possibly a return statement if needed. Javascript will read the code within the function until it reaches a return statement. Once the return statement has been reached, Javascript will return the information to the main running program. Functions often compute return values; the return value will be returned back to the caller.

<!DOCTYPE html>
<html>
    <body>

    <h2>JavaScript Functions</h2

    <p id="tutorial"></p>

    <script>
    
      function myFunction(a, b) {
          return a + b;
        }
        
        document.getElementById("tutorial").innerHTML = myFunction(4, 3);
        
    </script>

    </body>
</html>



Why use Functions? We use functions mainly to reuse code as many times as possible; work smart not hard. A function can be used many different times with many different arguments, to yield many different results.

<!DOCTYPE html>
<html>
  <body>

  <h2>JavaScript Functions</h2>

  <p id="tutorial"></p>

  <script>
  function myFunction(a, b) {
        var x = a + b;
      return x/2;
  }
  document.getElementById("tutorial").innerHTML = myFunction(1, 1);
  </script>

  </body>
</html>




Function Definition

For some reason, you might want to return the function definition of a function. Accessing a function without using the () will result in the definition being returned instead of the function's results.

<!DOCTYPE html>
<html>
  <body>

  <h2>JavaScript Functions</h2>

  <p id="tutorial"></p>

  <script>
  function myFunction(a, b) {
        var x = a + b;
      return x/2;
  }
  document.getElementById("tutorial").innerHTML = myFunction;
  </script>

  </body>
</html>



The above document will return : function myFunction(a, b) { var x = a + b; return x/2; }




Functions as Variables

Instead of just using a function to return a value, use a function as a variable. Variables can be used in formulas, assignments, and many different calculations.

The code below has four functions within the javascript tags. Two functions just return a string value or C or F. One function takes a F degree temperature, and converts the number into a Celsius degree temperature. The last function takes the value from the C degree temperature function and applies that number into reversing the value back into a F degree value. The C value is displayed first in the tutorial p element, and the F degree value is located below inside of the tutorial1 p element.

<!DOCTYPE html>
<html>
  <body>

  <p id="tutorial"></p>
 
  <br>
 
  <p id="tutorial1"></p>
 
  <script>
 
  document.getElementById("tutorial").innerHTML =
  "The temperature is " + toC(77) + stringToReturnC();
 
  document.getElementById("tutorial1").innerHTML =
  "The temperature is " + toF(toC(77)) + stringToReturnF();


  function toC(f) {
      var c = (5/9) * (f - 32);
      return c;
  }

  function stringToReturnC(){
      var abrv = " C";
      return abrv;
  }
 
  function toF(funcToObtainC) {
      var f = funcToObtainC * (9/5) + 32;
    return f;
  }
 
  function stringToReturnF(){
      var abrv = " F";
      return abrv;
  }
 
  </script>

  </body>
</html>



Output:

The temperature is 25 C

The temperature is 77 F







Next, we will take a look at how Objects mimic real life people, places, and things.

Just follow the buttons to continue the tutorial, Guest