multimedia and the world wide web hci 201 lecture notes #9a
Post on 19-Dec-2015
226 Views
Preview:
TRANSCRIPT
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"><!-- 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 #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.
HCI 201 Notes #9A 11
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.
HCI 201 Notes #9A 12
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.
HCI 201 Notes #9A 13
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”.
HCI 201 Notes #9A 14
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
HCI 201 Notes #9A 15
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.
HCI 201 Notes #9A 16
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...”);
}
HCI 201 Notes #9A 17
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.
HCI 201 Notes #9A 18
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);
HCI 201 Notes #9A 19
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).
HCI 201 Notes #9A 20
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
HCI 201 Notes #9A 21
JavaScript<SCRIPT TYPE="text/javascript"><!-- Hide the script from browsers that do not support JavaScript
function ShowDate() { var Today=new Date(); var ThisDay=Today.getDate(); var ThisMonth=Today.getMonth()+1; var ThisYear=Today.getFullYear();
alert(ThisMonth+"/"+ThisDay+"/"+this year); }//Stop hiding -->
</SCRIPT>...<input type=button name="Date" value="Today" onclick="ShowDate()">
HCI 201 Notes #9A 22
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…
HCI 201 Notes #9A 23
Document objects and their properties
window (DefaultStatus, frames, length, name, status,…)
|__frame (document, length, name,…)
|__navigator (appName, appVersion,…)
|__history (length,…)
|__location (href, protocol,…)
|__document (bgColor, fgColor, linkColor, title, lastModified,…)
|__link (href, target,…)
|__anchor (name,…)
|__form (name, action, method, length,…)
|__button (name, type, value,…)
|__textbox (name, size, value,…) |__other from elements…
HCI 201 Notes #9A 24
Changing / retrieving property values
<script type="text/javascript"><!-- Hide the script from browsers that do not support JavaScript
document.bgColor = “white”;document.InfoForm.city.value = “Chicago”;window.status = “Call 1-800-1234567 for customer services”;
BrowserName = navigator.appName;FrameNumber = window.length;
document.write(navigator.appVersion+”<br>”);// Stop hiding from other browsers -->
</script>
HCI 201 Notes #9A 25
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>
HCI 201 Notes #9A 26
Changing form element values<SCRIPT TYPE="text/javascript"><!-- Hide the script from browsers that do not support JavaScript function ShowDate() { var Today=new Date(); var ThisDay=Today.getDate(); var ThisMonth=Today.getMonth()+1; var ThisYear=Today.getFullYear();
document.reg.PurchaseDate.value=ThisMonth+"/"+ThisDay+"/"+ThisYear; }//Stop hiding --></SCRIPT>...<form name=reg>...<input name="PurchaseDate" size=20 maxlength=20><input type=button name=“DateToday” value=“Today” onclick="ShowDate()">
HCI 201 Notes #9A 27
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);
HCI 201 Notes #9A 28
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/
top related