1. Multimedia and the World Wide Web HCI 201 Lecture Notes #9A

2. HCI 201 Notes #9A2 What will we learn today? JavaScript function JavaScript statements Create a JavaScript program

3. HCI 201 Notes #9A3 JavaScript example 1 1. Assign an event-handler to an event...... Style 1 Style 2 Style 3...

4. HCI 201 Notes #9A4 JavaScript example 1 2. Perform actions in the event-handler JavaScript Example 1 <!-- Hide the script from browsers that do not support JavaScript function ChangeStyle(backColor, fontColor){ document.body.bgColor = backColor; document.body.text = fontColor; } // Stop hiding from other browsers -->

5. HCI 201 Notes #9A5 JavaScript example 2 1. Assign an event-handler to an event...... + - * /

6. HCI 201 Notes #9A6 JavaScript example 2 2. Perform actions in the event-handler function Calculate(number1, number2, operator){ var num1=eval(number1); var num2=eval(number2); var answer; if (operator==0) answer=num1+num2; else if (operator==1) answer=num1-num2; else if (operator==2) answer=num1*num2; else if (operator==3 && num2!="0") answer=num1/num2; else { alert("Error!"); answer="error"; } document.math.answer.value=answer; }

7. HCI 201 Notes #9A7 JavaScript functions function function_name(parameters) { JavaScript commands; } A function is a series of commands that perform some tasks (actions, calculations, etc.). A function_name identifies this function. A function can have 0~many parameters, which are values used by this function. Separate multiple parameters with a,. A set of commands tell this function how to perform the tasks. All commands are enclosed in { }. Each command ends with a ;. Note: function and parameter names should follow the same rules discussed in lecture notes 8B, “creating JavaScript variables”.

8. HCI 201 Notes #9A8 JavaScript function Performing an action Define the function function ShowDate(date) { document.write(“Today is ” + date + “! ”); } Call the function var DateToday = “02/28/2005”; ShowDate(DateToday); Function definition must be placed before the command that calls this function.

9. HCI 201 Notes #9A9 JavaScript function Returning an value Define the function function Area(width, length) { var size=width*length; return size; } Call the function var x = 100; var y = 150; var z = Area(x,y);

10. HCI 201 Notes #9A10 JavaScript condition statement if (condition) { commands set 1 } else { commands set 2 } Condition is an expression that is either true or false. Command set 1 is run if the expression is true. Command set 2 is run if the expression is false. if…else… structures can be nested, one with another.

11. HCI 201 Notes #9A11 JavaScript condition statement if (Day==“03/18/2005”) { alert(“Spring break is here!”); } else { if (Day==“03/28/2005”) { alert(“Time for another long quarter!”); } else { alert(“Study, study, study...”); } Indention is important for understanding nested structures.

12. HCI 201 Notes #9A12 JavaScript condition statement switch(expression){ case ConstantValue1: command(s); break; case ConstantValue2: command(s); break;... default: command(s); } switch … case structure tests the expression and jumps to the case statement that has a matching constant value.

13. HCI 201 Notes #9A13 JavaScript condition statement switch(Day){ case “01/01/2005”: alert(“Happy New Year!”); break; case “02/14/2005”: alert(“Happy Valentine’s Day!”); break;... default: alert(“Happy everyday!”); } default provides a “safe exit”.

14. HCI 201 Notes #9A14 JavaScript loop statement for(start;condition;update){ command(s) in loop; } Start sets the initial value of the counter. Condition (boolean expression) must be true for the loop to continue. Update specifies how the counter changes its value each time the command block is executed. var total=0; i=1 total=0+1=1 for(i=1; i<=4; i++){ i=2 total=1+1=2 total = total + 1; i=3 total=2+1=3 } i=4 total=3+1=4 i=5 exit for loop

15. HCI 201 Notes #9A15 JavaScript loop statement while(condition) { command(s) in loop; } Loop through commands as long as condition is true. do { command(s) in loop; } while(condition); Loop through commands as long as condition is true.

16. HCI 201 Notes #9A16 JavaScript loop statement var num=1; while(num<4) { alert(“One moment, please...”); num++; } What will happen in the following program? var num=1; while(num<4) { alert(“One moment, please...”); }

17. HCI 201 Notes #9A17 JavaScript loop statement Difference between “while … do” and “do … while” Example: var total=10; while(total<10) { document.write(“total = ” + total); } Commands will not be executed if the condition is false. var total=10; do { document.write(“total = ” + total); } while(total<10); Executes commands before checking the condition, so commends get executed for at least once.

18. HCI 201 Notes #9A18 Object, methods, and properties Create a Data object variable = new Date(); returns the current date and time. Create a Data object with specified information variable = new Date(“month, day, year, hours:minutes:seconds”); variable = new Date(year, month, day, hours, minutes, seconds); SomeDay=new Date(“June, 15, 2005, 14:35:00”); SomeDay=new Date(2005, 5, 15, 14, 35, 0);

19. HCI 201 Notes #9A19 Object, methods, and properties JavaScript numbers the months starting with 0 for January up through 11 for December. Hours are expressed in military time. (14:35 rather than 2:35pm) If you omit the hours, minutes, and seconds, JavaScript assumes it is 0 hours, 0 minutes, and 0 seconds. If you omit both the date and time information, JavaScript returns the current date and time (system clock on the user’s computer).

20. HCI 201 Notes #9A20 Object, methods, and properties Methods of the Date object OneDay = new Date(“February, 28, 2005, 12:25:49”); MethodOneDay.method() getSeconds() returns the seconds49 getMinutes() returns the minutes25 getHours() returns the hours(24)12 getDate() returns the day of the month28 getDay() returns the day of the week1 (0-Sun, …, 6-Sat) getMonth() returns the month number 1 (0-Jan, …, 11-Dec) getFullYear() returns the year number2005 getTime() returns the number of mili- 1,103,760,157,184 seconds since 01/01/1970

21. HCI 201 Notes #9A21 JavaScript <!-- Hide the script from browsers that do not support JavaScript function ShowDate() { var Today=new Date(); var ThisDay=Today.getDate(); var ThisMonth=Today.getMonth()+1; var ThisYear=Today.getFullYear(); alert(ThisMonth+"/"+ThisDay+"/"+this year); } //Stop hiding -->...

22. HCI 201 Notes #9A22 Web document object hierarchy window (the browser window) |__frame (a frame within the browser window) |__navigator (the web browser being used) |__history (a list of web pages the user has visited in this session) |__location (the URL of the current web page) |__document (the web page currently shown in the browser window) |__link (a hyperlink on the current web page) |__anchor (a bookmark/target on the current web page) |__form (a form on the current web page) |__button (a button defined in this form) |__textbox (a textbox defined in this form) |__other from elements…

23. HCI 201 Notes #9A23 Document objects and their properties window (DefaultStatus, frames, length, name, status,…) |__frame (document, length, name,…) |__navigator (appName, appVersion,…) |__history (length,…) |__location (href, protocol,…) |__document (bgColor, fgColor, linkColor, title, lastModified,…) |__link (href, target,…) |__anchor (name,…) |__form (name, action, method, length,…) |__button (name, type, value,…) |__textbox (name, size, value,…) |__other from elements…

24. HCI 201 Notes #9A24 Changing / retrieving property values <!-- Hide the script from browsers that do not support JavaScript document.bgColor = “white”; document.InfoForm.city.value = “Chicago”; window.status = “Call 1-800-1234567 for customer services”; BrowserName = navigator.appName; FrameNumber = window.length; document.write(navigator.appVersion+” ”); // Stop hiding from other browsers -->

25. HCI 201 Notes #9A25 Rollover images for hyperlinks

26. HCI 201 Notes #9A26 Changing form element values <!-- Hide the script from browsers that do not support JavaScript function ShowDate() { var Today=new Date(); var ThisDay=Today.getDate(); var ThisMonth=Today.getMonth()+1; var ThisYear=Today.getFullYear(); document.reg.PurchaseDate.value=ThisMonth+"/"+ ThisDay+"/"+ThisYear; } //Stop hiding -->......

27. HCI 201 Notes #9A27 Calling object mathods object.method(parameters) history.back(); window.close(); form.submit(); document.write(“Thank you!”); Calculate(number1.value, number2.value, optr.selectedIndex);

28. HCI 201 Notes #9A28 Respond to events HTML objectsEvent Handler (methods) button, checkbox, radio buttononClick hyperlinkonClick, onMouseOver, onMouseOut textbox, textareaonBlur, onChange, onFocus, onSelect imageonLoad, onError, onAbort formonSubmit, onReset documentonLoad, onUnload, onError windowonLoad, onUnload, onBlur, onFocus Online resource for Document Object Model events: http://www.w3.org/TR/DOM-Level-2-Events/