JavaScript Code with Functions

- March 23, 2017

This is where JavaScript functions come into play.

In this lesson, you will learn:

what functions are and how they are used in JavaScript;
how to retrieve information from functions;
how to give information to functions;
what variable scope is all about.

In the process you will also learn how to:

get today's date dynamically;
change the value of an HTML button element dynamically.

Functions: what they are and what they are for

In previous lessons you used JavaScript functions to perform some actions quickly and easily like generating random numbers, writing something on a web page, etc. In fact, JavaScript has a great many built-in functions like write(), alert(), getElementById(), random(), floor(), and several others. Wherever you spot a pair of round brackets there's likely a function in action.

JavaScript also gives you the option to craft your own functions.

A function is a way of packaging your JavaScript commands so you can easily reuse them every time you need the same piece of functionality implemented in your website.

This suggests that there are 2 distinct phases to a function:

The phase where the function is declared (created);
The phase where the function is called (used).

Let's go through each phase in turn.

Declare a function

The basic structure of a JavaScript function looks like this:

 
   //keyword function followed by your
 
   //chosen name for the function
 
   //Don't forget the round brackets!
 
   function functionName()
 
   //the code block is inside curly braces
 
   {
 
   //code you want to run goes here
 
   }

Call a function

Once you put a block of code into a function, you can use it anywhere you need that functionality in your website. What you need to do is just call the function.

You do this by typing the function name followed by brackets and the function will do its job - just like you did with alert(). Here's how it's done:

 
   //Type the function name (without the keyword function)
 
   //Don't forget the round brackets!
 
   functionName();

That's all you need: whatever code you stuffed into your function gets executed at this point.

Let's see how this works in practice. Fire off your text editor: it's time to get coding!

Try out: declare your function

Prepare a simple HTML page like the one below. The program we're going to build has the following goals:

to get today's date dynamically when the user clicks a button;
to display today's date on the web page;
to change the value attribute of the button after it's clicked: to have the button still displaying Get Date after the date has been displayed looks a bit confusing to the user.

 
   <!DOCTYPE html>
   <html>
   <head>
   <title>Lesson 8: Declare a function</title>
   </head>
   <body>
   <h1>Lesson 8: Declare a function</h1>
 
   <div>
 
     <h2>Today's date is:</h2>
   
     <span id="calendar"></span>
   
     <input type="button" id="myButton" value="Get Date" />
 
 
   </div>
   
   <script type="text/javascript">
 
   //Declare your function here
 
   function showDate()
 
   {
 
   //the block of code starts here:
 
   //First get all your vars ready
 
   //This is how JavaScript retrieves today's date
 
   var today = new Date();
 
   //get hold of the calendar span element
 
   //where today's date will be inserted
 
   var myCalendar = document.getElementById("calendar");
 
   //get hold of the button:you need this when it comes
 
   //to change its value attribute
 
   var myButton = document.getElementById("myButton");
 
   //insert the date in the span element.
 
   //toDateString() changes the date just retrieved
 
   //into a user-friendly format for display
 
   myCalendar.innerHTML = today.toDateString();
 
   //change the value attribute of the button
 
   //to say something more appropriate once the date is displayed
 
   myButton.value = "Well done!";
 
   }
 
   </script>
  
   </body>
   </html>

Try out: call your function

If you review your program's goals as set out at the beginning, you'll see that all the action takes place after the user clicks the button on the page. This tells us that we need to handle the button's onclick event.

If you go back to lesson 3 for a moment, you remember that one way in which this can easily be done is to put some JavaScript code as the value of the HTML element onclick attribute.

Just add an onclick attribute to the button element and plug your showDate() function right in there, like so:

<input type="button" id="myButton" value="Get Date" onclick="showDate();" />

Search This Blog

Visionedix