WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: Variables, Functions and Events (there is an audio component to this eLesson) © Dr

1 WDMD 170 – UW Stevens Point

WDMD 170 Internet Languages

eLesson: Variables, Functions and

Events(there is an audio component to this eLesson)

© Dr. David C. Gibbs2003-04

NOTE: click on the “Slide Show” icon in the lower right of the screen to hear the audio track

WDMD 170 – UW Stevens Point


Tutorial 2

Variables, Functions, and Events

Section A – Working with Variables and Functions


Tutorial 2A Topics

• Section A – Working with Variables and Functions– How to declare and use variables– How to define and call functions and

“returns” functions– About built-in JavaScript functions– About variable scope


Variables and Variable Names

• Variables – also known as identifiers– Values stored in computer memory

locations– Value can vary over time– Cannot use reserved words as variables

• reserved Words or Keywords are part of the JavaScript language syntax

– Variable name example:•employeeName




Variable Declaration and Defining

• Variables– To create:

• Use keyword var to declare the variable• Use the assignment operator to assign the variable a

value

– Declare, then assign value (initialize)• var employeeName;• employeeName = “Ricky”;

– Declare and assign variable in a single statement• Called “declare and define”• var employeeName = “Ricky”;


Use of Variables

• Variables– Once created:

• May be changed at any point in the program

– Use variable name and assignment operator•employeeName = “Althea”;


Syntax Rules for Variables

• Cannot use reserved words & spaces• Must begin with one of the following:

– Uppercase or lowercase ASCII letter– Dollar sign ($) or underscore (_)

• Can use numbers, but not as first character

• Variables are case-sensitive– e.g. employeeName and EmployeeName are

DIFFERENT!


Variable Naming Convention

• Naming conventions– Use underscore or capitalization to

separate words of an identifier•employee_first_name•employeeFirstName (called “camel” back

naming)




Functions

• Defining Custom Functions– Function:

• Individual statements grouped together to form a specific procedure

• Allows you to treat the group of statements as a single unit

• Must be contained between <script> and </script> tags

• Must be formally composed (function definition)


Defining a Function:Function Components

• Defining Custom Functions– A function definition consists of three parts:

• Reserved word function followed by the function name (identifier)

• Parameters required by the function, contained within parentheses following the name

– Parameters variables used within the function– Zero or more may be used

• Function statements, delimited by curly braces { }


Defining a Function:the syntax

• The syntax for defining a function:

function name_of_function(parameters) {

statements;

}



Function Definition Example

function print_company_name(company1,company2,company3) {document.writeln(company1);document.writeln(company2);document.writeln(company3);

}

reserved word parametersidentifier


Calling or Invoking a Function

• Calling Functions– Function invocation or call

• Statement including function name followed by a list of arguments in parentheses

• Parameter of function definition takes on value of argument passed to function in function call

– for exampleprint_company_name("IBM", "Apple", "Microsoft");


Calling Functions

• Code placement– Functions must be created (defined)

before called• <head> rendered by browser before

<body>

– Function definition• Place in <head> section

– Function call (invocation)• Place in <body> section


eTask 1

Copy and paste the text of the function definition into the head of an HTML document. Copy and paste the function invocation into the body. Remember to use <script> tags in both cases! Save your file as “FirstFunctionExample.htm” in your Tutorial02 folder. Preview the code.

Does it display the company names properly?

//function definitionfunction print_company_name(company1,company2,company3) {

document.writeln(company1);document.writeln(company2);document.writeln(company3);

}

//function invocation

print_company_name("IBM", "Apple", "Microsoft");


Roles of Functions

• A function can return nothing– Just performing some task (as in the

previous example – wrote out company names)

• A function can return a value– Perform a calculation and return the result

• var returnValue = functionCall(parm1,parm2);

– A return statement must be added to function definition


eTask 2

Here’s a function to calculate the area of a rectangle. Copy and paste the definition and invocation as before. (remember - <script> tags! Save the file as “areaRectangleFn.htm”.

//function definitionfunction areaRectangle(length, width) {

var area; // local variablearea = length * width; //calculatereturn area;// return the value to the calling variable

}

//function invocation

var area = areaRectangle(7, 5);

document.write(area);


Types of Functions

There are 2 types of functions; – those that do something– those that “return” something

Those that do are usually just called “functions”. Those that return are called “return-type” or “returns” functions.


eTask 3

Refer to the instructions on pages 55-6 (Gosselin).

• Create the file TwoFunctionsProgram.htm.

• Preview the .htm file. • Compare your results with that of page

57!


Built-in JavaScript Functions

• Functions defined as part of the JavaScript language

• Function call identical to the custom functions



Built-In Function Example

var myVar, check_myVar;

myVar = “two";check_myVar = isNaN(myVar);document.write(check_myVar);

Displays “true”.

isNaN() stands for “is not a number”. It is a returns function that gives back true if the contents of its single parameter is NOT a valid number, and false if it is a valid number.


eTask 4Copy and paste the text of the previous slide into the body of

an HTML document. Remember to use <script> tags. Save your file as “using_IsNaN.htm”. View the results. You

should get “true”.

Copy the three line sequence (not the var declarations) three more times (in the same file). Change the assignment statement to myVar to 2, “2”, and “2b”, respectively.

NOTE: If you want your results written on separate lines, add the <pre>..</pre> tags, or, better yet, modify the write statement to this:document.write(check_myVar + "<br>");

Do the results make sense? If they don’t, ask the question in your eReview group!]


Variable Scope

• Defines where in the program a declared variable can be used– Global variable

• Declared outside a function and is available to all parts of the program

• var keyword optional

– Local variable• Declared inside a function and is only available within

the function it is declared

– Global and local variables can use same identifier


Assignment – Scope of Variables• Type in the JavaScript program found on pages 70-1.

• Save the file as scopeOfJSVars.htm.

• View the program. (After getting the error message, you can comment out the offending line.)

• Add the following questions to the body of the HTML document (and then provide answers immediately underneath).1. Why did “localVariable” cause an error?2. What is it about “secondGlobalVariable” that makes it global even

though it is declared within the function?3. Can a global variable and a local variable have the same name? If

not, why not? If so, how does the program determine which to use?

• Complete the exercise and attach the file in a post to your eReview discussion group. Describe any difficulties you might have had in completing the problem.

• Please do not copy it to your web page until one week later.


Assignment

• Exercise #8 page 80 (Gosselin, Tutorial 02A)

• Complete the exercise and attach the file in a post to your eReview discussion group. Describe any difficulties you might have had in completing the problem.

• Please do not copy it to your web page until one week later.


End of eLesson

• Jump to the Beginning of this eLesson

• WDMD 170 Course Schedule

• D2L Courseware Site

Documents

WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: Variables, Functions and Events (there is an audio component to this eLesson) © Dr