B118 Web Programming

B118 Web Programming Session #7 More JavaScript Application Examples March 15, 2004

Tonight’s Agenda • Midterm #1 Discussion • Chapters 3 & 7 quiz tonight !!! • Chapters 10, 11, 14 quiz next week !!! • JavaScript Arrays • Advanced JavaScript Control Structures

JavaScript Arrays

JavaScript Examples • Twelve Days of Christmas • Using Switch statement • Using Arrays • Using Objects 9.11 (“The Twelve Days of Christmas” Song) Write a script that uses repetition and switch structures to print the song “The Twelve Days of Christmas.” One switch structure should be used to print the day (i.e., “First,” “Second,” etc.). A separate switch structure should be used to print the remainder of each verse.

Twelve Days of Christmas Using Switch for( var i = 1; i <= 12; i++ ){ var day, newGift, gifts, oldGifts; switch( i ){ case 1: day = "first"; newGift = "a partridge in a pear tree."; oldGifts = "and " + newGift; break; case 2: day = "second"; newGift = "two turtle doves"; break; } if ( i == 1 ) gifts = newGift; else{ gifts = newGift + " " + oldGifts; oldGifts = gifts; } document.writeln(" On the " + day + " of Christmas " + "my true love sent to me: " + gifts );

Twelve Days of Christmas Using Arrays var gift_array = [ ["zero","gift opening time!!!"] , ["first","a partridge in a pear tree."] , ["second","two turtle doves"] ]; for( var i = 1; i <= 12; i++ ){ var day, newGift, gifts, oldGifts; day = gift_array[i][0]; newGift = gift_array[i][1]; if( i == 1 ) { gifts = newGift; oldGifts = "and " + newGift; } else{ gifts = newGift + " " + oldGifts; oldGifts = gifts; } document.writeln( " On the " + day + " of Christmas " + "my true love sent to me: " + gifts ); }

Twelve Days of Christmas Using Objects function gift_object(day,gift) { this.day = day this.gift = gift } var gift_object_array = [ new gift_object("zero","gift opening time!!!") , new gift_object("first","a partridge in a pear tree.") , new gift_object("second","two turtle doves") ]; for( var i = 1; i <= 12; i++ ){ var day, newGift, gifts, oldGifts; day = gift_object_array[i].day; newGift = gift_object_array[i].gift; if( i == 1 ) { gifts = newGift; oldGifts = "and " + newGift; } else{ gifts = newGift + " " + oldGifts; oldGifts = gifts; } document.writeln(" On the " + day + " of Christmas " + "my true love sent to me: " + gifts ); }

Comparison • Switch • Reduces clutter from nested IF • Arrays • Groups all of the text into one area (easier to maintain/translate into another language) • Objects • Makes data structure internally managed (within the object)

Advanced JavaScript Control Structures • For/in • Switch • ?:

For/in • foreach elementinan array // sum all of the elements of theArray // (result is total = 15 at end of for loop var theArray = {1,2,3,4,5}; var total = 0; for (var element in theArray) total += theArray[ element ];

Switch • Used instead of multiple, nested IF statements to handle situations where you have multiple selections • Example: Twelve Days of Christmas

Switch Example • Nested IF choice = window.prompt( "Select a list style:\n" + "1 (bullet), 2 (numbered), 3 (lettered)", "1" ); if ( choice == 1 ) { listType = "Bullet List“} else { if ( choise == 2 ) { listType = "Ordered List: Numbered“ } else { if (choice == 3 ) { listType = "Ordered List: Lettered“ } else { validInput = false } } } }

Switch Example • Replace with choice = window.prompt( "Select a list style:\n" + "1 (bullet), 2 (numbered), 3 (lettered)", "1" ); switch ( choice ) { case "1": listType = "Bullet List"; break; case "2": listType = "Ordered List: Numbered"; break; case "3": listType = "Ordered List: Lettered"; break; default: validInput = false; }

?: • Conditional operator • Instead of • Use if ( studentGrade >= 60 ) { document.writeln (“passed”) } else { document.writeln (“failed”) } } document.writeln ( studentGrade >= 60 ? “passed” : “failed” );

B118 Web Programming