Multimedia and the World Wide Web HCI 201
Multimedia and the World Wide Web HCI 201 Lecture Notes #8 B # HCI 201 Notes #8 B
What will we learn today? n n What is Java. Script? How does Java. Script work? Java. Script examples Java. Script Basics n n n Variables Commands Operators HCI 201 Notes #8 B 2
Sever-side vs. client-side programs n Sever-side programs 1. The user retrieves the web page from the web server. 1 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. 3 2 *CGI: Common Gateway Interface, see definition in lecture notes # 5. HCI 201 Notes #8 B 3
Sever-side vs. client-side programs n 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 HCI 201 Notes #8 B 4
Client-side programs n Advantages - Scripts can be tested locally before releasing. - Server will not be overloaded with handling programming requests. - More responsive to the user. n Disadvantages - Can never completely replace server-side programs (e. g. , perform search, process purchase order, etc. ) HCI 201 Notes #8 B 5
What is Java. Script? n A programming language - n A scripting language - n Used to add interactivity and function to web pages. It is case sensitive. 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 HCI 201 Notes #8 B 6
Java vs. Java. Script Complicated East 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 HCI 201 Notes #8 B 7
More about Java. Script n Things we can do with Java. Script: - 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. …… HCI 201 Notes #8 B 8
How does Java. Script work? n The <script> tag <script language=“Java. Script”> <!–– Hide this script from browsers that do not support Java. Script statements go here // Stop hiding from other browsers --> </script> HCI 201 Notes #8 B 9
How does Java. Script work? n Attributes of the <script> tag - - language = “Java. Script” 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. HCI 201 Notes #8 B 10
How does Java. Script work? n 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. n Commonly used event handlers mouse-related: on. Click, on. Dbl. Click, on. Mouse. Down, on. Mouse. Up, on. Mouse. Over, on. Mouse. Move, on. Mouse. Out keyboard-related: on. Key. Down, on. Key. Up, on. Key. Press document-related: on. Load, on. Un. Load, on. Submit, on. Reset, on. Select, on. Change, etc. HCI 201 Notes #8 B 11
How does Java. Script work? Event Handler HTML/XHTML Tags on. Abort img on. Blur, on. Focus a, area, body, button, input, label, select, etc. on. Change, on. Select input, select, textarea on. Error img on. Load, on. Un. Load body, frameset on. Reset, on. Submit form key-event handler (most tags) mouse-event handler (most tags) (see textbook page 437~438) HCI 201 Notes #8 B 12
How does Java. Script work? n Java. Script event handlers Example 1: <body on. Load=“status=‘Welcome to HCI 201!’”> Example 2: <a href=“somedoc. html” on. Mouse. Over=“status=‘Click me!’; return true”>Documents</a> HCI 201 Notes #8 B 13
How does Java. Script work? n Java. Script URLs Example 1: <a href=“javascript: alert(‘Error!’)”> Show error message</a> Example 2: <embed src=“Music. wav” name=“midifile” autostart=“false” with=“ 0” height=“ 0”> <a href=“javascript: midifile. play()”> Play the music</a> HCI 201 Notes #8 B 14
Java. Script examples Example 1: Dynamically change the appearance n Example 2: Simple calculation n Example 3: Animating objects n HCI 201 Notes #8 B 15
Java. Script example 1 1. Assign an event-handler to an event. . . </head>. . . <button on. Click="Change. Style('yellow', 'brown')"> Style 1</button> <button on. Click="Change. Style('lightgreen', 'darkgreen')"> Style 2</button> <button on. Click="Change. Style('lavender', 'purple')"> Style 3</button> . . . HCI 201 Notes #8 B 16
Java. Script example 1 2. Perform actions in the event-handler <head> <title>Java. Script Example 1</title> <script type="text/javascript"> <!-- Hide the script from browsers that do not support Java. Script function Change. Style(back. Color, font. Color){ document. body. bg. Color = back. Color; document. body. text = font. Color; } // Stop hiding from other browsers --> </script> </head> HCI 201 Notes #8 B 17
Java. Script example 2 1. Assign an event-handler to an event. . . </head>. . . <form name=math> <input type="text" name="number 1"> <select size="1" name="optr"> <option value="+" selected>+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" name="number 2"> <input type="button" value="=" on. Click="Calculate(number 1. value, number 2. value, optr. selected. Index)"> <input type="text" name="answer"> </form> HCI 201 Notes #8 B 18
Java. Script example 2 2. Perform actions in the event-handler function Calculate(number 1, number 2, operator){ var num 1=eval(number 1); var num 2=eval(number 2); var answer; if (operator==0) answer=num 1+num 2; else if (operator==1) answer=num 1 -num 2; else if (operator==2) answer=num 1*num 2; else if (operator==3 && num 2!="0") answer=num 1/num 2; else { alert("Error!"); answer="error"; } document. math. answer. value=answer; } HCI 201 Notes #8 B 19
Creating Java. Script variables n n A variable is a named element in a program, used to store, retrieve, and pass around information. A variable n n 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 Java. Script. (e. g. , writeln, …) Java. Script supports four n n types of variables: Number (14, 22. 5, -3. 1415, 6. 7 E 2 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) HCI 201 Notes #8 B 20
Declaring Java. Script variables You can declare variables with any of the following three commands: variable; variable = value; n n 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)? HCI 201 Notes #8 B 21
Java. Script commands; n A declaration command creates a variable: var This. Year; n An assignment command assigns a value to a variable: This. Year = 2005; Next. Year = This. Year + 1; n A command can call another Java. Script function: document. write(“Hello, World!”); n Other advanced commands will be covered next week. HCI 201 Notes #8 B 22
Java. Script operators Math operators n + Adds two values together (add numbers, but connect strings) n n n 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) HCIn 201 - Notes #8 B Changes the sign of a value (x=100; y=-x; y= 23
Java. Script operators Assignment operators n = Assigns the value of the variable on the right to the n n n += -= *= /= %= HCI 201 Notes #8 B 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; 24
Java. Script operators Comparison operators (assume we have x=100, y=200) n == X==Y returns true if x equals to y. n != X!=Y returns true if x does not equal to y. n > X>Y returns true if x is greater than y. n < X<Y returns true if x is less than y. n >= X>=Y returns true if x is greater than or equal to y. n <= X<=Y returns true if x is less than or equal to y. HCI 201 Notes #8 B 25
Java. Script operators Logical operators (assume we have x=100, y=200, E 1: x==100, E 2: y==150) n n && (and) E 1&&E 2 returns true if both expressions are true. || (or) E 1||E 2 returns true when either expression E 1 or n ! E 2 is true. (not) !E 1 returns true if E 1 is false, and false if E 1 is true. AND True False OR True False True False True False HCI 201 Notes #8 B True False NOT True False True 26
- Slides: 26