unit 5 functions, objects, conditions, and loops
TRANSCRIPT
UNIT 5
FUNCTIO
NS,
OB JE
CTS ,
CON
DIT
ION
S, AN
D L
OO
PS
OBJECTIVES CO6 Create a dynamic website using
JavaScript.
2
LEARNING OUTCOMESLO25 Create a JavaScript function.
LO26 Create custom objects.
LO27 Use and extend built-in objects.
LO28 Write code that uses conditional statements.
LO29 Write code that uses loops.
3
FUNCTION DEFINITION
function Greet() {
alert("Greetings.");
}
4
FUNCTION WITH PARAMETERS
function Greet(who){
alert("Greetings," + who);
}
5
FUNCTION IN A <HEAD><!DOCTYPE html ><head><title>Functions</title><script type="text/javascript">function Greet(who){alert("Greetings," + who);
}</script></head></html>
6
CALLING THE FUNCTION
<body><h1>Function Example</h1><p>Prepare to be greeted twice.</p><script type="text/javascript">Greet("Fred");Greet("Ethel");</script></body>
7
GREET FUNCTION OUTPUT
8
A FUNCTION THAT RETURNS A VALUE<head><title>Function Example: Average</title><script type="text/javascript">function Average(a,b,c,d){result = (a + b + c + d)/4;return result;
}</script></head>
9
CALLING THE AVERAGE FUNCTION<body><h1>Function Example: Average</h1><p>The following is the result of the function call.</p>
<script type="text/javascript">score = Average(3,4,5,6);document.write("The average is:" + score);
</script></body>
10
TYPES OF OBJECTS
11
Built-in objects
DOM objects
Custom objects
CREATING OBJECTS
scores = new Array(4);
12
PROPERTIES A variable stored within the object
test = "This is a test.";document.write(test.length);
Each property has a valuelocation.href=
"http://www.google.com/";
13
METHOD
Function that works with the object's data
location.reload();
14
USING CUSTOM OBJECTS Name the object
Identify its properties
Create a constructor
Define object methods
Create an instance of an object
15
OBJECT CONSTRUCTORfunction Card(name,address,work,home) {
this.name = name;
this.address = address;
this.workphone = work;
this.homephone = home;
}
16
DEFINING METHODS Write a function
Add the function definition to the constructor
17
WRITE A FUNCTIONfunction PrintCard() {line1 = "Name: " + this.name + "<br/>\n";line2 = "Address: " + this.address + "<br/>\n";
line3 = "Work Phone: " + this.workphone + "<br/>\n";
line4 = "Home Phone: " + this.homephone + "<hr/>\n";
document.write(line1, line2, line3, line4);
}
18
ADD THE FUNCTION DEFINITION TO THE CONSTRUCTORfunction Card(name,address,work,home) {
this.name = name;this.address = address;this.workphone = work;this.homephone = home;this.PrintCard = PrintCard;}
19
CREATING AN OBJECT INSTANCE
tom = new Card("Tom Jones",
"123 Elm Street", "555-1234", "555-9876");
20
ASSIGN PROPERTY VALUES AFTER OBJECT CREATION
holmes = new Card();
holmes.name = "Sherlock Holmes";
holmes.address = "221B Baker Street";
holmes.workphone = "555-2345";
holmes.homephone = "555-3456";
21
EXTENDING BUILT-IN OBJECTS
Use the prototype keyword to add a property or method to a built-in object.
22
ADDING A METHOD TO THE STRING OBJECT<script type="text/javascript">function addhead (level) {html = "h" + level;text = this.toString();start = "<" + html + ">";stop = "</" + html + ">";return start + text + stop;}String.prototype.heading = addhead;document.write ("This is a heading 1".heading(1));document.write ("This is a heading 2".heading(2));document.write ("This is a heading 3".heading(3));</script>
23
MATH OBJECT Math.ceil() rounds a number up to the
next integer.
Math.floor() rounds a number down to the next integer.
Math.round() rounds a number to the nearest integer.
24
ROUNDING EXAMPLE
function round(num) {
return Math.round(num * 100) / 100;
}
25
GENERATING RANDOM NUMBERSfunction rand(num) {
return Math.floor(Math.random() * num) + 1;
}
26
WITH KEYWORD
with (lastname) {
window.alert("length of last name: " + length);
capname = toUpperCase();
}
27
DATE FORMATS
birthday = new Date();
birthday = new Date
("November 1, 2010 08:00:00");
birthday = new Date(11,1, 2010);
birthday = new Date(11,1,2010, 8, 0, 0);
28
DATE OBJECT SET METHODS setDate()
setMonth()
setFullYear()
setTime()
setHours()
setMinutes
setSeconds()
29
getDate()
getMonth()
getFullYear()
getTime()
getHours()
getMinutes()
getSeconds()
getMilliseconds()
30
DATE OBJECT GET METHODS
getTimeZoneOffset()
toUTCString()
toLocalString()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCMonth()
getUTCHours()
getUTCMinutes()
getUTCSeconds()
getUTCMilliseconds()
setUTCDate()
setUTCFullYear()
setUTCMonth()
setUTCHours()
setUTCMinutes()
setUTCSeconds()
setUTCMilliseconds()
31
WORKING WITH TIME ZONES
CONVERTING BETWEEN DATE FORMATS Date.parse()method converts a date
string, such as November 1, 2010, to a Date object (number of milliseconds since 1/1/1970).
Date.UTC() method does the opposite. It converts a Date object value (number of milliseconds) to a UTC (GMT) time.
32
IF STATEMENT
if (a == 1) window.alert("Found a 1!");
if (a == 1) {
window.alert("Found a 1!");
a = 0;
}
33
CONDITIONAL OPERATORS
34
Operator Meaning== Is equal to!= Is not equal to< Is less than> Is greater than
>= Is greater than or equal to<= Is less than or equal to
LOGICAL OPERATORS Or
if ((phone == "") || (email == "")) window.alert("Something’s Missing!");
Andif ((phone == "") && (email == "")) window.alert("Both are Missing!");
Notif (!(phone == "")) alert("phone is OK");
35
THE ELSE KEYWORD
if (a == 1) {
alert("Found a 1!");
a = 0;
} else {
alert("Incorrect value: " + a);
}
36
SHORTHAND CONDITIONAL EXPRESSIONSvalue = (a == 1) ? 1 : 0;
Same asif (a == 1) {
value = 1;
} else {
value = 0;
}
37
SHORTHAND EXAMPLE
document.write("Found " + counter +
((counter == 1) ? " word." : " words."));
38
TESTING MULTIPLE CONDITIONSWITH IF AND ELSEif (hours < 10) {document.write("Good morning.");} else if (hours >= 14 && hours <= 17) {document.write("Good afternoon.");} else if (hours >= 17) {document.write("Good evening.");} else {document.write("Good day.");}
39
TESTING MULTIPLE CONDITIONS WITH SWITCHswitch(button) {
case "next":window.location="next.html";
break;case "previous":
window.location="prev.html";break;case "home":
window.location="home.html";break;case "back":
window.location="menu.html";break;default:
window.alert("Wrong button.");} 40
FOR LOOPfor (i=0; i<10; i++) {
document.write("This is line " + i + "<br />");
}
for (i=0; i<10; i++)
document.write("This is line " + i + "<br />");
41
WHILE LOOP
while (total < 10) {
n++;
total += values[n];
}
for (n=0; total < 10; n++) {
total += values[n];
}
42
DO...WHILE LOOPS
do {
n++;
total += values[n];
}
while (total < 10);
43
INFINITE LOOP A loop that never reaches the exit
condition
while (i < 10) {n++;values[n] = 0;
}
Can make the browser stop responding
44
BREAK STATEMENT
while (true) {
n++;
if (values[n] == 1) break;
}
45
CONTINUE STATEMENT
for (i=1; i<21; i++) {
if (score[i]==0) continue;
document.write(
"Student number ",i,
" Score: ", score[i],
"\n");
}
46
LOOPING THROUGH OBJECT PROPERTIES
for (i in navigator) {
document.write("property: " + i);
document.write(" value: " + navigator[i] + "<br>");
}
47