Download presentation
Presentation is loading. Please wait.
Published byShea Myer Modified over 9 years ago
1
Lecture # 14 Javascript: Loops, Branching and Putting it all together
2
JavaScript Putting it all together
4
Step 1 - Background and image snowflake.gif Santa.jpg
5
Step 1 - Background and image Wishes for Santa Wishes for Santa
6
Step 2 - Check boxes
7
Wishes for Santa Wishes for Santa What do you like? Clothes Toys CDs
8
Step 3 - Radio buttons
9
Step 3 - Radio Buttons Wishes for Santa Wishes for Santa What do you like? Clothes Toys CDs What is your neck size? 15 16 17 18
10
Step 4 - Each on a line
11
What is your neck size? 15 16 17 18
12
Step 5 - Choices in table
13
Shirts Shoes CDs Microwave Popcorn Pants Tie Video games Trip to Paris
14
Step 6 - Another table
15
What is your neck size? 15 16 17 18 What is your favorite color? Red Blue Green Yellow Purple Step 6 - Another table
16
Step 7 - Naughty or Nice
17
Have you been Naughty? Nice? What do you like?
18
Step 8 - Button and wish list
19
Yellow Purple
20
Step 9 - action on the button
21
<input type="button" value="Make your Wish" onClick="makeWish();"> <textarea name="theWish" rows=5 cols=40>
22
Step 9 - action on the button Wishes for Santa function makeWish() { alert("makeWish"); }
23
Step 10
24
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
25
Step 11 List of Wishes
26
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
27
Step 12 – Neck size and Favorite Color
28
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"; }
29
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"; }
30
Big lessons Take it one piece at a time Make sure each piece works before moving on
Similar presentations
© 2024 SlidePlayer.com Inc.
All rights reserved.