1. Multimedia and the World Wide Web HCI 201 Lecture Notes #8B

2. HCI 201 Notes #8B2 What will we learn today? What is JavaScript? How does JavaScript work? JavaScript examples JavaScript Basics Variables Commands Operators

3. HCI 201 Notes #8B3 Sever-side vs. client-side programs Sever-side programs 1.The user retrieves the web page from the web server. 2.The user works with the page to send information back to a CGI* script running on the server. 3. The CGI script returns any output to the user. 1 2 3 *CGI: Common Gateway Interface, see definition in lecture notes # 5.

4. HCI 201 Notes #8B4 Sever-side vs. client-side programs Client-side programs 1.The user retrieves the web page from the web server with a program attached. 2.The user runs the program locally, receiving instant feedback. 1 2

5. HCI 201 Notes #8B5 Client-side programs Advantages - Scripts can be tested locally before releasing. - Server will not be overloaded with handling programming requests. - More responsive to the user. Disadvantages - Can never completely replace server-side programs (e.g., perform search, process purchase order, etc.)

6. HCI 201 Notes #8B6 What is JavaScript? A programming language - Used to add interactivity and function to web pages. - It is case sensitive. A scripting language - Can be interpreted and executed by web browsers. - Can be sprinkled throughout an HTML document. - Easier to learn. An object-oriented programming language - Objects, properties, and methods

7. HCI 201 Notes #8B7 Java vs. JavaScript JavaJavaScript ComplicatedEast to learn and use Requires the JDK (Java Developer’s Kit) to create applets No developer’s kit required Program must be saved as separate files and compiled before they can be run Scripts are written directly into the HTML file and require no compiling Powerful, used for complex tasks Used for relatively simple tasks

8. HCI 201 Notes #8B8 More about JavaScript Things we can do with JavaScript: - Change the appearance of the document. (font, color, rollover images, pull-down menus, etc.) - Provide dynamic information. (status bar, date and time updates, etc.) - Interact with user. (alert messages, open a new window, etc.) - Validate user’s input. - General computational tasks. - … …

9. HCI 201 Notes #8B9 How does JavaScript work? The tag <!–– Hide this script from browsers that do not support JavaScript JavaScript statements go here // Stop hiding from other browsers -->

10. HCI 201 Notes #8B10 How does JavaScript work? Attributes of the tag - language = “JavaScript” or type = “text/javascript” - src = URL Specifies the source of an external script file. - charset Specifies the character set used to encode the script. - defer Specifies that the browser should defer executing the script.

11. HCI 201 Notes #8B11 How does JavaScript work? Event and event handlers Event handler is a program used to detect and react to events that occur while a page is loading, rendering, or being browsed. Commonly used event handlers mouse-related: onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut keyboard-related: onKeyDown, onKeyUp, onKeyPress document-related: onLoad, onUnLoad, onSubmit, onReset, onSelect, onChange, etc.

12. HCI 201 Notes #8B12 How does JavaScript work? Event HandlerHTML/XHTML Tags onAbortimg onBlur, onFocusa, area, body, button, input, label, select, etc. onChange, onSelectinput, select, textarea onErrorimg onLoad, onUnLoadbody, frameset onReset, onSubmitform key-event handler(most tags) mouse-event handler(most tags) (see textbook page 437~438)

13. HCI 201 Notes #8B13 How does JavaScript work? JavaScript event handlers Example 1: Example 2: Documents

14. HCI 201 Notes #8B14 How does JavaScript work? JavaScript URLs Example 1: Show error message Example 2: Play the music

15. HCI 201 Notes #8B15 JavaScript examples Example 1: Dynamically change the appearance Example 2: Simple calculation Example 3: Animating objects

16. HCI 201 Notes #8B16 JavaScript example 1 1. Assign an event-handler to an event...... Style 1 Style 2 Style 3...

17. HCI 201 Notes #8B17 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 -->

18. HCI 201 Notes #8B18 JavaScript example 2 1. Assign an event-handler to an event...... + - * /

19. HCI 201 Notes #8B19 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; }

20. HCI 201 Notes #8B20 Creating JavaScript variables A variable is a named element in a program, used to store, retrieve, and pass around information. A variable name should follow the rules: Start with a letter or an underscore, followed by any letters, numbers, or underscores. Case sensitive. No space in a variable name. Some keywords are reserved by JavaScript. (e.g., write, writeln, …) JavaScript supports four types of variables : Number (14, 22.5, -3.1415, 6.7E2 or 670) String (“Hello”, “Happy Holidays!”, ‘Hello’ is valid, but “Hello’ is not) Boolean (true or false, 1 or 0) Null (a variable is created but haven’t been assigned any value yet)

21. HCI 201 Notes #8B21 Declaring JavaScript variables You can declare variables with any of the following three commands: var variable; var variable = value; variable = value; The first command creates a variable without assigning a value to it, so this variable is currently a (number, string, boolean, or null)? The second and third commands both create a variable and assign it a value. So this variable is now a (number, string, boolean, or null)?

22. HCI 201 Notes #8B22 JavaScript commands JavaScript commands; A declaration command creates a variable: var ThisYear; An assignment command assigns a value to a variable: ThisYear = 2005; NextYear = ThisYear + 1; A command can call another JavaScript function: document.write(“Hello, World!”); Other advanced commands will be covered next week.

23. HCI 201 Notes #8B23 JavaScript operators Math operators + Adds two values together (add numbers, but connect strings) - Subtracts one value from another * Multiplies two values together / Divides one value by another % Gets the remainder after dividing one value by another ++ Increases a value by 1 ( x=100; y=x++;  y=101 ) -- Decreases a value by 1 ( x=100; y=x--;  y=99 ) - Changes the sign of a value ( x=100; y=-x;  y=-100 )

24. HCI 201 Notes #8B24 JavaScript operators Assignment operators = Assigns the value of the variable on the right to the one on the left ( x=100; y=x; Greetings=“Hello!” ) += x += y;  x = x + y; -= x -= y;  x = x - y; *= x *= y;  x = x * y; /= x /= y;  x = x / y; %= x %= y;  x = x % y;

25. HCI 201 Notes #8B25 JavaScript operators Comparison operators (assume we have x=100, y=200) == X==Y returns true if x equals to y. != X!=Y returns true if x does not equal to y. > X>Y returns true if x is greater than y. < X<Y returns true if x is less than y. >= X>=Y returns true if x is greater than or equal to y. <= X<=Y returns true if x is less than or equal to y.

26. HCI 201 Notes #8B26 JavaScript operators Logical operators (assume we have x=100, y=200, E1: x==100, E2: y==150) && (and) E1&&E2 returns true if both expressions are true. || (or) E1||E2 returns true when either expression E1 or E2 is true. ! (not) !E1 returns true if E1 is false, and false if E1 is true. ANDTrueFalseORTrueFalseNOTTrueFalse True FalseTrue FalseTrue False TrueFalse