multimedia and the world wide web hci 201 lecture notes #9a

Multimedia and the World Wide Web

HCI 201 Lecture Notes #9A

HCI 201 Notes #9A 2

What will we learn today?

JavaScript function JavaScript statements Create a JavaScript program

HCI 201 Notes #9A 3

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 #9A 4

JavaScript example 1

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

</script></head>

HCI 201 Notes #9A 5

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 #9A 6

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 #9A 7

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

HCI 201 Notes #9A 8

JavaScript function

Performing an action Define the function function ShowDate(date) {

document.write(“Today is ” + date + “!<br>”);}

Call the function var DateToday = “02/28/2005”;ShowDate(DateToday);

Function definition must be placed before the command that calls this function.

HCI 201 Notes #9A 9

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

HCI 201 Notes #9A 10

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.


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.


JavaScript condition statementswitch(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.


JavaScript condition statementswitch(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”.


JavaScript loop statementfor(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


JavaScript loop statementwhile(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.


JavaScript loop statementvar 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...”);

}


JavaScript loop statementDifference 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.


Object, methods, and properties Create a Data objectvariable = new Date();returns the current date and time. Create a Data object with specified informationvariable = 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);


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


Object, methods, and properties Methods of the Date objectOneDay = new Date(“February, 28, 2005, 12:25:49”);

Method OneDay.method()

getSeconds() returns the seconds 49

getMinutes() returns the minutes 25

getHours() returns the hours(24) 12

getDate() returns the day of the month 28

getDay() returns the day of the week 1 (0-Sun, …, 6-Sat)

getMonth() returns the month number 1 (0-Jan, …, 11-Dec)

getFullYear() returns the year number 2005

getTime() returns the number of mili- 1,103,760,157,184

seconds since 01/01/1970

JavaScript<SCRIPT TYPE="text/javascript">

</SCRIPT>...<input type=button name="Date" value="Today" onclick="ShowDate()">


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…

Changing / retrieving property values

<script type="text/javascript">

</script>


Rollover images for hyperlinks

<a href="next.html" onMouseover="document.arrow.src='redArrow.gif'" onMouseout="document.arrow.src='blueArrow.gif'"><img src="blueArrow.gif" border=0 name="arrow"></a>

Changing form element values<SCRIPT TYPE="text/javascript"></SCRIPT>...<form name=reg>...<input name="PurchaseDate" size=20 maxlength=20><input type=button name=“DateToday” value=“Today” onclick="ShowDate()">


Calling object mathods

object.method(parameters)

history.back();<input type=button value=“BACK” onclick=“history.back()”>

window.close();<input type=button value=“CLOSE” onclick=“window.close()”>

form.submit();

document.write(“Thank you!”);

Calculate(number1.value, number2.value, optr.selectedIndex);


Respond to events

HTML objects Event Handler (methods)button, checkbox, radio button onClick

hyperlink onClick, onMouseOver, onMouseOut

textbox, textarea onBlur, onChange, onFocus, onSelect

image onLoad, onError, onAbort

form onSubmit, onReset

document onLoad, onUnload, onError

window onLoad, onUnload, onBlur, onFocus

Online resource for Document Object Model events:http://www.w3.org/TR/DOM-Level-2-Events/

multimedia and the world wide web hci 201 lecture notes #9a

Documents

javascript program slide

lecture notes

9a3 javascript example

world wide web hci