Lecture 7 – JavaScript Arrays & Functions

Now it is time to study the two very important components of JavaScript, the Arrays and Functions.

Let us begin with Arrays first.

JavaScript Arrays

Programmers can, in fact, store multiple values in a single variable using Arrays. However, you can only put sequential elements of fixed size and same type in arrays. Arrays are the best option to store a collection of data. But most often, it is used to store collection of same types of variables. The syntax of JavaScript array is as follows.

var countries = new Array( "united states", "united kingdom", "france" );   

A list of integers or strings constitutes an Array Parameter. For specifying array’s initial length, you normally specify a numeric or integer parameter with the array constructor.

It is very easy to create an array as well. All you need to do is to assign values to a variable as explained by the following example.

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>
       
  
     var countries = ( "united states", "united kingdom", "france" );   
          
</body>

</html>

We can set and assess values in an array using ordinal numbers. However, the first element always has the value 0, the second element has a value of 1, and so on. In our example:

  • Countries[0] is United States
  • Countries[1] is United Kingdome
  • Countries[2] is France

JavaScript Functions

Sometimes, you have to execute the same statement on multiple places on your document. It would simply be foolish to write separate code to perform same function again and again. Therefore, we use JavaScript functions which are a set of code you can call anytime and anywhere in your program. Functions help a developer break down a big problem into smaller and manageable problems, thus enabling him to write a more modular code.

We have already seen examples of functions such as write() and alert() in the previous lectures. Apart from built-in functions, it is also possible to write your own functions.

Function Definition

We have to define a function before using it. Using a function keyword is the best and easiest method of defining a function in JavaScript. A unique function name follows the function keyword. A list of parameters then follows the function name. Curly braces enclosing a statement block find itself at the end of the function. The following is a basic syntax of a JavaScript function.

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>
       
  
    
       function functionname(parameter-list) {
          statements
       }
        
</body>

</html>

And, we will explain functions with the help of the following example.

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>
       
  
    
       function myName() {
         alert('Martin Kobler')
       }
       
        
</body>

</html>

Calling a Function

You also have to call a function for it to execute the statement within the curly braces. Once again, you can call the function anywhere on your program. Just write down the name of the function in the script to revoke the function as shown in the following example.

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>

  <form>
    <input type="button" onclick="myName()" value="My Name">
  </form>
       
  
    
       function myName() {
         alert('Martin Kobler');
       }
       
        
</body>

</html>

The above code will produce the following result.

In the next lecture, we will study JavaScript Events.