Are you looking to learn web development but don't know where to start? Do you struggle to keep track of all the different languages, frameworks, and tools that are used in web development? Look no further! Our web development notes have got you covered.
Our comprehensive notes cover all the ess...
Table of Contents
Objectives ...................................................................................................................................................................... 2
14.1 Introduction........................................................................................................................................................ 2
14.1.1 Introduction to JavaScript Functions ........................................................................................................ 2
14.1.2 Uses of Functions ..................................................................................................................................... 2
14.2 Using Functions ................................................................................................................................................. 2
14.2.1 Using built-in functions ............................................................................................................................ 3
14.2.2 Using user-defined functions .................................................................................................................... 3
14.2.3 Defining and invoking a function in the same file .................................................................................... 3
14.2.4 Invoking a file defined in a different file .................................................................................................. 3
14.2.5 Executing code using 'eval' ....................................................................................................................... 4
14.3 Creating user-defined functions ......................................................................................................................... 4
14.3.1 A simple function to display the String “hello” ........................................................................................ 4
14.3.2 Creating a function using function statements .......................................................................................... 5
14.3.3 Creating a function using the 'Function()' constructor ............................................................................. 5
14.3.4 Creating a function using function literals ................................................................................................ 6
14.4 Some simple functions ....................................................................................................................................... 6
14.4.1 Mathematical functions............................................................................................................................. 6
14.4.2 Functions that RETURN a value .............................................................................................................. 7
14.4.3 Defining a function that returns a value .................................................................................................... 8
14.4.4 A date Function......................................................................................................................................... 8
14.4.5 The today function described .................................................................................................................... 9
14.5 Mathematical Functions ................................................................................................................................... 11
14.5.1 A form for calculations ........................................................................................................................... 11
14.5.2 A familiar calculator interface ................................................................................................................ 13
14.5.3 Some Function activities ......................................................................................................................... 15
14.6 Form Validation ............................................................................................................................................... 17
14.6.1 Testing for empty fields .......................................................................................................................... 17
14.6.2 The HTML defining the table ................................................................................................................. 17
14.6.3 The JavaScript function to validate the form fields ................................................................................ 18
14.6.4 Simplifying the code with a new function .............................................................................................. 19
14.6.5 Improving user interaction ...................................................................................................................... 20
14.6.6 Validation of multiple fields ................................................................................................................... 20
14.7 Testing for numeric fields ................................................................................................................................ 21
14.8 Testing for invalid field combination............................................................................................................... 23
14.9 The remaining activities ................................................................................................................................... 27
14.9.1 Activity 6: Completing the colour model form ....................................................................................... 27
14.9.2 Activity 7: Avoiding Multiple Messages ................................................................................................ 27
14.10 Review Questions........................................................................................................................................ 28
14.10.1 Review Question 1 ............................................................................................................................. 28
14.10.2 Review Question 2 ............................................................................................................................. 28
14.10.3 Review Question 3 ............................................................................................................................. 28
14.10.4 Review Question 4 ............................................................................................................................. 29
14.11 Discussion Topic ......................................................................................................................................... 29
14.12 Extension: More complex functions............................................................................................................ 29
14.13 Discussions and Answers ............................................................................................................................ 31
14.13.1 Discussion of Exercise 1 .................................................................................................................... 31
14.13.2 Discussion of Activity 1 ..................................................................................................................... 31
14.13.3 Discussion of Activity 2 ..................................................................................................................... 32
14.13.4 Discussion of Activity 3 ..................................................................................................................... 32
14.13.5 Discussion of Activity 4 ..................................................................................................................... 32
14.13.6 Discussion of Activity 5 ..................................................................................................................... 33
14.13.7 Discussion of Activity 6 ..................................................................................................................... 33
14.13.8 Discussion of Activity 7 .................................................................................................................... 33
, JavaScript 3: Functions
14.13.9 Discussion of Review Question 1 ....................................................................................................... 35
14.13.10 Discussion of Review Question 2 ....................................................................................................... 35
14.13.11 Discussion of Review Question 3 ....................................................................................................... 36
14.13.12 Discussion of Review Question 4 ....................................................................................................... 36
14.13.13 Thoughts on Discussion Topic ........................................................................................................... 36
Objectives
At the end of this chapter you will be able to:
• Understand the importance of functions;
• Write HTML files using JavaScript functions;
14.1 Introduction
14.1.1 Introduction to JavaScript Functions
JavaScript functions are usually given a name, but since JavaScript functions are just objects in their own right, they
can be stored in variables and object properties (see later unit). Functions are different from other objects in that they
can be invoked (executed) with the use of a special operator ().
JavaScript provides many pre-written (built-it) functions, for example the function write, provided by the document
object (see in a later unit how related functions can be stored inside objects; as we noted a few units ago, such
functions are called methods).
An example of the write function being invoked is as follows:
document.write( "This message appears in the HTML document" );
An example of the alert function being invoked is as follows:
alert( "This message appears in an alert dialog" );
Some functions return a value. For example, mathematical functions perform calculations on the provided data
and return numerical results. Other functions return true/false values, or text. Some functions return no value at
all, but rather perform a side-effect; write is one such function whose side-effect is to send text to the HTML
document. Functions frequently both perform a side-effect and return a value.
14.1.2 Uses of Functions
Functions can be used for many different purposes. In the past, JavaScript was used to create scrolling status bar
messages for sites that want to give out important information that the user may miss while browsing the site (these
proved to be largely irritating to the user, and have been very rarely used in the last few years). Displaying the date
and time is also a common use of JavaScript. Image mouseovers, implemented using the HTML event system
described in the previous chapter, are also widely used.
Functions are very useful when used in conjunction with HTML forms. Form entry can be validated, and the input
of early parts of the forms might be used to invoke functions to automatically enter appropriate data in other
parts of the forms.
To Do
Read up about JavaScripts Functions in your textbook.
14.2 Using Functions
2
, JavaScript 3: Functions
14.2.1 Using built-in functions
The following lines illustrate the use of built-in functions:
document.write( "Hello" ); document.write(
Math.sqr( 2 ) );
document.write( "The bigger of 4 and 5 is : " + Math.bigger(4, 5) );
14.2.2 Using user-defined functions
You can define your own functions in the same file that they are invoked in, or in a different file which you can then
load in a browser whenever you wish to use the function. Each of these situations are illustrated below.
14.2.3 Defining and invoking a function in the same file
The following code defines and invokes a function named displayHello:
<HTML>
<SCRIPT>
/////////////////////////////
/// define function here ///
///////////////////////////// function
displayHello()
{
document.write( "Hello" )
}
/////////////////////////////
/// invoke function here ///
///////////////////////////// displayHello();
</SCRIPT>
</HTML>
The browser output when this HTML file is loaded is as follows:
14.2.4 Invoking a file defined in a different file
Some functions prove very useful; in order to use them in multiple Web pages they can be stored in a separate
file. In the example below, the function displayHello has been defined in the file helloFunction.js. The HTML
below uses two <SCRIPT> tags, one to load the function definition from helloFunction.js, and the second to invoke
the function:
<SCRIPT SRC="helloFunction.js"></SCRIPT>
<SCRIPT> <!--
/// invoke function here /// displayHello();
</SCRIPT> -->
3
, JavaScript 3: Functions
The contents of the file helloFunction.js is simply the JavaScript definition of the function:
/// define function here /// function displayHello()
{
document.write( "Hello" )
}
Notice that helloFunction.js is not an HTML file and does not contain any HTML tags. This is signified by choosing an
appropriate file extension — the convention is to use the two-character extension ".js" for JavaScript files.
14.2.5 Executing code using 'eval'
The eval operator expects a String containing JavaScript as an argument, and will execute the String as if it where a
JavaScript statement. The code below creates a String named myStatements and then executes the String using eval:
var myStatements = " var n = 10; alert( n ); n++; alert( n ) " ;
eval( myStatements );
The result of executing this code is the two alert dialogs:
14.3 Creating user-defined functions
14.3.1 A simple function to display the String “hello”
Let’s assume that we want to create a function that simply executes the following line:
document.write( "Hello" );
This function does not need any arguments, since it will do the same thing every time. The body of our function
will be the single JavaScript statement above.
The table below illustrates a design for our function:
Name (optional)
Arguments (optional)
4
The benefits of buying summaries with Stuvia:
Guaranteed quality through customer reviews
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller arshshops24. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for $20.49. You're not tied to anything after your purchase.
