Multimedia and the World Wide Web
HCI 201 Lecture Notes #8B
HCI 201 Notes #8B 2
What will we learn today?
What is JavaScript? How does JavaScript work? JavaScript examples JavaScript Basics
Variables Commands Operators
HCI 201 Notes #8B 3
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.
HCI 201 Notes #8B 4
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
HCI 201 Notes #8B 5
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.)
HCI 201 Notes #8B 6
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
HCI 201 Notes #8B 7
Java vs. JavaScript
Java JavaScriptComplicated 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 #8B 8
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.- … …
HCI 201 Notes #8B 9
How does JavaScript work?
The <script> tag<script language=“JavaScript”>
<!–– Hide this script from browsers that do not support JavaScript
JavaScript statements go here
// Stop hiding from other browsers -->
</script>
HCI 201 Notes #8B 10
How does JavaScript work?
Attributes of the <script> tag- language = “JavaScript” or
type = “text/javascript”- src = URL
Specifies the source of an external script file.
- charsetSpecifies the character set used to encode the script.
- defer Specifies that the browser should defer executing the script.
HCI 201 Notes #8B 11
How does JavaScript work?
Event and event handlersEvent 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 handlersmouse-related: onClick, onDblClick,
onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut
keyboard-related: onKeyDown, onKeyUp, onKeyPress
document-related: onLoad, onUnLoad, onSubmit, onReset, onSelect, onChange, etc.
HCI 201 Notes #8B 12
How does JavaScript work?
Event Handler HTML/XHTML TagsonAbort img
onBlur, onFocus a, area, body, button, input, label, select, etc.
onChange, onSelect input, select, textarea
onError img
onLoad, onUnLoad body, frameset
onReset, onSubmit form
key-event handler (most tags)
mouse-event handler (most tags)
(see textbook page 437~438)
HCI 201 Notes #8B 13
How does JavaScript work?
JavaScript event handlersExample 1:
<body onLoad=“status=‘Welcome to HCI201!’”>
Example 2:
<a href=“somedoc.html” onMouseOver=“status=‘Click me!’; return true”>Documents</a>
HCI 201 Notes #8B 14
How does JavaScript work?
JavaScript URLsExample 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 #8B 15
JavaScript examples
Example 1:
Dynamically change the appearance Example 2:
Simple calculation Example 3:
Animating objects
HCI 201 Notes #8B 16
JavaScript example 1
1. Assign an event-handler to an event...</head>...<button onClick="ChangeStyle('yellow', 'brown')"> Style 1</button><br> <button onClick="ChangeStyle('lightgreen', 'darkgreen')"> Style 2</button><br> <button onClick="ChangeStyle('lavender', 'purple')"> Style 3</button><br>...
HCI 201 Notes #8B 17
JavaScript example 1
2. Perform actions in the event-handler<head><title>JavaScript Example 1</title><script type="text/javascript"><!-- 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 -->
</script></head>
HCI 201 Notes #8B 18
JavaScript example 21. Assign an event-handler to an event...</head>...<form name=math><input type="text" name="number1"><select size="1" name="optr"> <option value="+" selected>+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select><input type="text" name="number2"><input type="button" value="=" onClick="Calculate(number1.value, number2.value, optr.selectedIndex)"><input type="text" name="answer">
</form>
HCI 201 Notes #8B 19
JavaScript example 22. 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;
}
HCI 201 Notes #8B 20
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)
HCI 201 Notes #8B 21
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)?
HCI 201 Notes #8B 22
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.
HCI 201 Notes #8B 23
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)
HCI 201 Notes #8B 24
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;
HCI 201 Notes #8B 25
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.
HCI 201 Notes #8B 26
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.
AND True False OR True False NOT True False
True True False True True True False True
False False False False True False