multimedia and the world wide web hci 201 lecture notes #8b

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


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.



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.



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)



JavaScript event handlersExample 1:

<body onLoad=“status=‘Welcome to HCI201!’”>

Example 2:

<a href=“somedoc.html” onMouseOver=“status=‘Click me!’; return true”>Documents</a>



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>


JavaScript examples

Example 1:

Dynamically change the appearance Example 2:

Simple calculation Example 3:

Animating objects


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

JavaScript example 1

2. Perform actions in the event-handler<head><title>JavaScript Example 1</title><script type="text/javascript">

</script></head>


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>


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;

}


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)


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)?


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.


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)



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;



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.



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