CIS 397—Web Design

advertisement
Chapter 12: Objects
CIS 275—Web Application
Development for Business I
Thinking About Objects






based programming
JavaScript is an object-_______
language (Math, Array, document, window, …).
behaviors
All objects have attributes and exhibit __________.
encapsulate or enclose their attributes and
Objects ____________
behaviors.
Programs communicate with objects through
interfaces (basically function calls).
__________
hiding
Objects possess the property of information ______.
We don’t know (or care) how the object does things.
We just care about what it does.
Using existing objects makes programming easier.
2
Math Object

Rounding a number
7
document.writeln(Math.round(7.25)) displays _____



The round method of the Math class has the
argument 7.25. ________
writeln is a method of the
document object.
3.14159265
Math.PI is approximately _______________
Find the minimum of a series of numbers
1
Math.min(2, 4, 6, 7, 1) returns _____

Find the square root of a number
7
Math.sqrt(49) returns ____

Raise a number to a power
256
Math.pow(2, 8) returns _____
3
The String Object I



JavaScript supports the set of characters called
Unicode
_________.
For a string object, the length property returns the
number of characters in the string.
7
 If lastname=“Johnson”, then lastname.length = ____
You can change the color of text using the fontcolor()
method of the string object.


document.write("<p>" + lastname.fontcolor(‘red’) +
"</p>")
The indexOf() method returns the starting position of
text within a string object, beginning with 0.
4
 lastname.indexOf(“son”) = _____
4
The String Object II

The match() method of the string object returns a
substring if it exists.


The substring(x, y) method returns a substring
starting at position x for y characters.


John
lastname.substring(0, 4) = ______
The toLowerCase() and toUpperCase() methods
convert the characters in a string object to lower or
upper case.


son
lastname.match(“son”) = _______
JOHNSON
lastname.toUpperCase() = _____________
See pp. 384-385 for more String methods.
5
Fig. 12.4 CharacterProcessing.html
<html xmlns =
"http://www.w3.org/1999/xhtml">
<head>
<title>Character Processing
Methods</title>
<script type = "text/javascript">
<!-var s = "ZEBRA";
var s2 = "AbCdEfG";
document.writeln(
"<p>Character at index 0 in ‘ " + s
+ “ ' is " + s.charAt( 0 ) );
document.writeln( "<p>'" +
String.fromCharCode( 87, 79,
82, 68 ) +
"' contains character codes 87,
79, 82 and 68</p>" )
document.writeln( "<p>'" + s2
+ "' in lowercase is '" +
s2.toLowerCase() + "'" );
document.writeln( "<br />'" +
s2 + "' in uppercase is '"
+ s2.toUpperCase() +
"'</p>");
// -->
</script>
document.writeln( "<br
/>Character code at index 0 in '" +
s + "' is " + s.charCodeAt( 0 ) +
</head><body></body>
"</p>" );
</html>
6
Date Object I

Create a date object (assume the date is 7/10/2002)
var today = new Date()

Methods for the date object





7
today.getMonth() returns _____
10
today.getDate() returns _____
2004
today.getFullYear() returns _______
You can also use getHours(), getMinutes, getSeconds()
Check the interesting examples of displaying day,
date, and time.
7
Date Object II

You can create a date object and set the date:
var
var
var
var
var

aDate
aDate
aDate
aDate
aDate
=
=
=
=
=
new
new
new
new
new
Date("October 12, 1988 13:14:00")
Date("October 12, 1988")
Date(88,09,12,13,14,00) // Oct 12, 1:14 p
Date(88,09,12) // Oct 12, 1988
Date(500) // in milliseconds
You can reset parts of a date as follows:
var today = new Date()
today.setDate(today.getDate()-1)
document.write(today.getDate() + "<br />")
8
Window Object I

Alert box
alert("Hello World!")

Confirm box
var name = confirm("Press a button")
if (name == true) {
document.write("You pressed OK")
}
else {
document.write("You pressed Cancel")
}
9
Window Object II

Prompt box
var name = prompt("Please enter your name",“Right here")
if (name != null && name != "") {
document.write("Hello " + name)
}

Function to open two new windows
function openwindow() {
window.open("http://www.microsoft.com")
window.open("http://www.w3schools.com")
}

Sending to a new location
location="http://www.w3schools.com/"
10
Window Object III

Refresh a document
location.reload()

Write text to the status bar
window.status = "put your message here"

Print a page
window.print()
11
Frame Object

frame
Breaking out of a _________
if (window.top != window.self) {
window.top.location=“apage.htm"
}

Updating frames
parent.upperframe.location.href="frame_b.htm"
12
Download