Lecture # 14 Javascript: Loops, Branching and Putting it all together

JavaScript Putting it all together

Step 1 - Background and image snowflake.gif Santa.jpg

Step 1 - Background and image Wishes for Santa Wishes for Santa

Step 2 - Check boxes

Wishes for Santa Wishes for Santa What do you like? Clothes Toys CDs

Step 3 - Radio buttons

Step 3 - Radio Buttons Wishes for Santa Wishes for Santa What do you like? Clothes Toys CDs What is your neck size?

Step 4 - Each on a line

What is your neck size?

Step 5 - Choices in table

Shirts Shoes CDs Microwave Popcorn Pants Tie Video games Trip to Paris

Step 6 - Another table

What is your neck size? What is your favorite color? Red Blue Green Yellow Purple Step 6 - Another table

Step 7 - Naughty or Nice

Have you been Naughty? Nice? What do you like?

Step 8 - Button and wish list

Yellow Purple

Step 9 - action on the button

<input type="button" value="Make your Wish" onClick="makeWish();"> <textarea name="theWish" rows=5 cols=40>

Step 9 - action on the button Wishes for Santa function makeWish() { alert("makeWish"); }

Step 10

function makeChoices() {return "the choices"; } function neckSize() {return "the neckSize"; } function favColor() {return "the favColor"; } function makeWish() { if (document.wishes.NorN[0].checked) {document.wishes.theWish.value="You were Naughty"; } else {document.wishes.theWish.value= makeChoices()+neckSize()+favColor(); } Step 10

Step 11 List of Wishes

function makeChoices() { rslt=""; if (document.wishes.shirts.checked) { rslt = rslt + "Shirts" + "\n"; } if (document.wishes.shoes.checked) { rslt = rslt + "Shoes" + "\n"; } if (document.wishes.cds.checked) { rslt = rslt + "CDs" + "\n"; } if (document.wishes.microwave.checked) { rslt = rslt + "Microwave" + "\n"; } if (document.wishes.popcorn.checked) { rslt = rslt + "Popcorn" + "\n"; } // code omitted for brevity return rslt+"\n"; } Step 11

Step 12 – Neck size and Favorite Color

Step 12 function neckSize() { size = ""; if (document.wishes.neck[0].checked) { size = "15"; } else if (document.wishes.neck[1].checked) { size = "16"; } else if (document.wishes.neck[2].checked) { size = "17"; } else if (document.wishes.neck[3].checked) { size = "18"; } return "Neck size = " + size + "\n"; }

Step 12 function favColor() { color = ""; if (document.wishes.color[0].checked) { color = "Red"; } else if (document.wishes.color[1].checked) { color = "Blue"; } else if (document.wishes.color[2].checked) { color = "Green"; } else if (document.wishes.color[3].checked) { color = "Yellow"; } else if (document.wishes.color[4].checked) { color = "Purple"; } return "Color = " + color + "\n"; }

Big lessons Take it one piece at a time Make sure each piece works before moving on