Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Lecture # 14 Javascript: Loops, Branching and Putting it all together."— Presentation transcript:

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

2 JavaScript Putting it all together

3

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


Download ppt "Lecture # 14 Javascript: Loops, Branching and Putting it all together."

Similar presentations


Ads by Google