Javascript
  1. Javascript intro
  2. Javascript basics
  3. Javascript variables
  4. Javascript functions
  5. Javascript popup boxes
  6. Javascript conditions
  7. Javascript loops
  8. Javascript arrays
  9. Javascript objects
  10. Javascript strings
  11. Javascript events
  12. Javascript errors
  13. Javascript DOM
  14. Javascript elements
  15. Javascript new windows
  16. Javascript date & time
  17. Javascript cookies
  18. Javascript print
  19. Javascript redirect
  20. Javascript void
  21. Javascript summary

Javascript functions

A function is a segment of code grouped into a single entity. The great thing about functions is that you can re-use them. By doing so, you eliminate the need to re-type the same code over and over again. Once you implement a function, you can use its code by calling that function.

This tutorial focuses on:

Creating functions

To create a function, use the function keyword, followed by the function name, followed by parentheses, followed by an opening brace and a closing brace. The lines of code which make up the function will go in between the braces.

Syntax:
function function_name(){ code for function goes here; }
Example:
<script type="text/javascript"> function printMessage(){ document.write("Hello, this is a function"); } </script>

NOTE: Functions should be specified in a script in the head section of an HTML document because a script placed in the head section of a webpage will be executed when it is called, or when certain events are triggered such as the clicking of a button or when a form is submitted.

Using parameters

Parameters are variables placed inside the parentheses of a function which are used by the code inside the function in some way. Parameters are separated by commas.

Syntax:
function function_name(param1, param2, etc.){ code for function goes here; }
Example:
<script type="text/javascript"> function printMessage(name){ document.write("Hello " + name + "!"); } </script>

This function takes a value supplied by its name parameter and prints a message on a webpage.

Calling functions

Once you create a function, how do you actually use it? You have to call the function.

To call a function, refer to the function name and pass the appropriate parameter values to it (if the function has any parameters).

Example:
<html> <head> <script type="text/javascript"> function subtract(num1, num2){ document.write(num1 - num2); } </script> <title>Calling functions</title> </head> <body> <script type="text/javascript"> subtract(10, 5); </script> </body> </html>
Output:
5

Returning values

Functions can be used to return values. By doing so, the function simply acts as a value after its code has been executed. This way, a variable can take the value of a function which returns a value.

To return a value from a function, the return keyword is used within the function.

Example:
<script type="text/javascript"> function add(num1, num2){ return num1 + num2; } </script>

In the above code, the function add(num1, num2) will return the value of the addition of its two parameters. Since this function returns a value, a variable can take its value.

Example:
<html> <head> <script type="text/javascript"> function add(num1, num2){ return num1 + num2; } </script> <title>Calling functions</title> </head> <body> <script type="text/javascript"> var additionResult = add(5, 2); document.write(additionResult); </script> </body> </html>
Output:
7

Javascript's built-in functions

Javascript has several built-in functions you can use for various purposes.

NOTE: Javascript's built-in functions are known as methods since they are part of an object definition.

Example:
<html> <head> <title>Javascript's built-in functions</title> </head> <body> <input type="button" value="Click here for a message" onclick="alert('Javascript is cool!');" document.write("Here is some text"); document.write("<br /><a href='http://www.yahoo.com' target='_blank'>Go to Yahoo!</a>"); document.write("<br />" + Math.max(5, 10)); document.write("<br />" + Math.round(1.6)); </body> </html>
Output:

Variable scope

The scope of a variable is the area of a script in which the variable can be used. There are local variables and global variables.

Local variables

Local variables are variables declared inside a function (including parameters of functions as well). These variables have no scope outside of the function they are declared in.

Global variables

Global variables are variables declared outside of a function. Global variables have scope through out the entire script on a page, as well as any other scripts on the same page, and external scripts.

Example:
<html> <head> <script type="text/javascript"> function afunction(){ var a_variable = "this is a local variable"; } </script> <title>Variable scope</title> </head> <body> <script type="text/javascript"> document.write("the value of the variable a_variable is " + a_variable); </script> </body> </html>

In the above code, the variable a_variable is a local variable, for this reason it has no scope outside of the function in which it is declared. When you try to access it, you will get no output.

The above example rewritten with a_variable being a global variable:
<html> <head> <script type="text/javascript"> var a_variable = "this is a global variable"; </script> <title>Variable scope</title> </head> <body> <script type="text/javascript"> document.write("the value of the variable a_variable is " + a_variable); </script> </body> </html>
Output:
the value of the variable a_variable is this is a global variable

In the above code the variable a_variable is a global variable, for this reason it has global scope and when you try to access it you get its value.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information