UNIT 5 FUNCTIONS, OBJECTS, CONDITIONS, AND LOOPS

OBJECTIVES  CO6 Create a dynamic website using JavaScript. 2

LEARNING OUTCOMES LO25 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 Functions function Greet(who){ alert("Greetings," + who); } 6

CALLING THE FUNCTION Function Example Prepare to be greeted twice. Greet("Fred"); Greet("Ethel"); 7

GREET FUNCTION OUTPUT 8

A FUNCTION THAT RETURNS A VALUE Function Example: Average function Average(a,b,c,d){ result = (a + b + c + d)/4; return result; } 9

CALLING THE AVERAGE FUNCTION Function Example: Average The following is the result of the function call. score = Average(3,4,5,6); document.write("The average is:" + score); 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 value location.href= " 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 CONSTRUCTOR function 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 FUNCTION function PrintCard() { line1 = "Name: " + this.name + " \n"; line2 = "Address: " + this.address + " \n"; line3 = "Work Phone: " + this.workphone + " \n"; line4 = "Home Phone: " + this.homephone + " \n"; document.write(line1, line2, line3, line4); } 18

ADD THE FUNCTION DEFINITION TO THE CONSTRUCTOR function 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", " ", " "); 20

ASSIGN PROPERTY VALUES AFTER OBJECT CREATION holmes = new Card(); holmes.name = "Sherlock Holmes"; holmes.address = "221B Baker Street"; holmes.workphone = " "; holmes.homephone = " "; 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 function addhead (level) { html = "h" + level; text = this.toString(); start = " "; stop = " "; 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)); 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 NUMBERS function 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, :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 OperatorMeaning ==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 == "") || ( == "")) window.alert("Something’s Missing!");  And if ((phone == "") && ( == "")) window.alert("Both are Missing!");  Not if (!(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 EXPRESSIONS value = (a == 1) ? 1 : 0; Same as if (a == 1) { value = 1; } else { value = 0; } 37

SHORTHAND EXAMPLE document.write("Found " + counter + ((counter == 1) ? " word." : " words.")); 38

TESTING MULTIPLE CONDITIONS WITH IF AND ELSE if (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 SWITCH switch(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 LOOP for (i=0; i<10; i++) { document.write("This is line " + i + " "); } for (i=0; i<10; i++) document.write("This is line " + i + " "); 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] + " "); } 47