1. WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: Variables, Functions and Events (there is an audio component to this eLesson) © Dr. David C. Gibbs 2003-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

2. 2 Tutorial 2 Variables, Functions, and Events Section A – Working with Variables and Functions

3. WDMD 170 – UW Stevens Point 3 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

4. WDMD 170 – UW Stevens Point 4 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

5. WDMD 170 – UW Stevens Point 5

6. 6

7. 7 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”;

8. WDMD 170 – UW Stevens Point 8 Use of Variables Variables –Once created: May be changed at any point in the program –Use variable name and assignment operator employeeName = “Althea”;

9. WDMD 170 – UW Stevens Point 9 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!

10. WDMD 170 – UW Stevens Point 10 Variable Naming Convention Naming conventions –Use underscore or capitalization to separate words of an identifier employee_first_name employeeFirstName (called “camel” back naming)

11. WDMD 170 – UW Stevens Point 11

12. WDMD 170 – UW Stevens Point 12

13. WDMD 170 – UW Stevens Point 13 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 and tags Must be formally composed (function definition)

14. WDMD 170 – UW Stevens Point 14 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 { }

15. WDMD 170 – UW Stevens Point 15 Defining a Function: the syntax The syntax for defining a function: function name_of_function(parameters) { statements; }

16. WDMD 170 – UW Stevens Point 16

17. WDMD 170 – UW Stevens Point 17 Function Definition Example function print_company_name(company1,company2,company3) { document.writeln(company1); document.writeln(company2); document.writeln(company3); } reserved wordparametersidentifier

18. WDMD 170 – UW Stevens Point 18 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 example print_company_name("IBM", "Apple", "Microsoft");

19. WDMD 170 – UW Stevens Point 19 Calling Functions Code placement –Functions must be created (defined) before called rendered by browser before –Function definition Place in section –Function call (invocation) Place in section

20. WDMD 170 – UW Stevens Point 20 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 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 definition function print_company_name(company1,company2,company3) { document.writeln(company1); document.writeln(company2); document.writeln(company3); } //function invocation print_company_name("IBM", "Apple", "Microsoft");

21. WDMD 170 – UW Stevens Point 21 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

22. WDMD 170 – UW Stevens Point 22 eTask 2 Here’s a function to calculate the area of a rectangle. Copy and paste the definition and invocation as before. (remember - tags! Save the file as “areaRectangleFn.htm”. //function definition function areaRectangle(length, width) { var area;// local variable area = length * width; //calculate return area;// return the value to the calling variable } //function invocation var area = areaRectangle(7, 5); document.write(area);

23. WDMD 170 – UW Stevens Point 23 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.

24. WDMD 170 – UW Stevens Point 24 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!

25. WDMD 170 – UW Stevens Point 25 Built-in JavaScript Functions Functions defined as part of the JavaScript language Function call identical to the custom functions

26. WDMD 170 – UW Stevens Point 26

27. WDMD 170 – UW Stevens Point 27 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.

28. WDMD 170 – UW Stevens Point 28 eTask 4 Copy and paste the text of the previous slide into the body of an HTML document. Remember to use 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.. tags, or, better yet, modify the write statement to this: document.write(check_myVar + " "); Do the results make sense? If they don’t, ask the question in your eReview group!]

29. WDMD 170 – UW Stevens Point 29 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

30. WDMD 170 – UW Stevens Point 30 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.

31. WDMD 170 – UW Stevens Point 31 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.

32. WDMD 170 – UW Stevens Point 32 End of eLesson Jump to the Beginning of this eLesson WDMD 170 Course Schedule D2L Courseware Site