1. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 1

2. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 2

3. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 3

4. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 4

5. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 5

6. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 6

7. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 7

8. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 8

9. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 9

10. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 10

11. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 11

12. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 12

13. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 13

14. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 14

15. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 15

16. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 16

17. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 17

18. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 18

19. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 19

20. Slide 20 Variables versus Objects in JavaScript -Variable names refer to one fixed memory location. They cannot change memory addresses. -Object names contain a memory address that is changeable. They can be used to point to object blobs. -Both variables and objects have methods that we can call. -Object blobs need to be created using the new keyword. -If an object blob has no object name pointing to it, then it’s memory address has been lost and it is garbage. This is automatically collected. See TestVariableAssignments.html.

21. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 21

22. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 22

23. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 23

24. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 24

25. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 25

26. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 26

27. Slide 27 var date1 = new Date(); date1.setFullYear(2011, 6, 1); // 2011-07-01, ok // set date2 the same date as date1 var date2 = date1; // now I'm gonna set a new date for date2 date2.setFullYear(2011, 9, 8); alert("Date2 is "+ (date2.getMonth()+1) + "-" + date2.getDate() + "-" + date2.getFullYear()); alert("Date1 is " + date1.getMonth()+1) + "-" + date1.getDate() + "-" + date1.getFullYear()); // 2011-10-08, ok //Now inspect value of date1 // 2011-10-08, expecting 2011-07-01 // I didn't assign a new date to date1 // WHY is date1 changed?

28. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 28

29. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 29

30. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 30 One common programming error Confusing the assignment operator ( = ) with the equality operator ( ==).

31. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 31

32. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 32

33. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 33

34. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc. Slide 34 Fun In Class Assignment for if Write a javascript based program, called ComputeTotalSalary.java for our sales force. The program should have 1 html file, 1 css file and 1 js file. It should ask the user to input the name of the salesperson (String), the base salary and the total sales of last year (check they Are both numbers). If the sales are below zero, the program should print an error and exit. If the sales are between $1 and $25,000, the program should add a bonus of 5% of the sales to the base. If the sales are between $25,000 and $50,000, the program should add a bonus of 10% of sales. If the sales are between $50,000 and $100,000 it should add a bonus of 15% of sales. Sales over $100,000 merit a 20% of-sales bonus. Finally, the program should print the statement: The final salary of ----- is $XXXX.XX and exit.

35. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 35

36. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 36

37. Slide 37 var calculate_click = function () { do { $("salesTax").value = ""; $("total").value = ""; do { var subtotal = parseFloat(prompt("Please enter the subTotal as a number") ); if(isNaN(subtotal) || subtotal < 0 ) alert("Subtotal must be a number that is zero or more!"); } while(isNaN(subtotal) || subtotal < 0 ); do { var taxRate = parseFloat( prompt("Please enter the taxRate as a percentage number") ); if( isNaN(taxRate) || taxRate < 0 ) alert("Tax Rate must be a number that is zero or more!"); } while( isNaN(taxRate) || taxRate < 0 ); for(var shippingCharges = parseFloat( prompt("Please enter the shipping Charges as a number")); (isNaN(shippingCharges) || shippingCharges < 0 ); alert("Shipping Charges must be a number that is zero or more!"), shippingCharges = parseFloat( prompt("Please enter the shipping Charges as a number")) ); var salesTax = subtotal * (taxRate / 100); salesTax = parseFloat( salesTax.toFixed(2) ); var total = subtotal + salesTax + shippingCharges; $("salesTax").value = salesTax; $("total").value = "$"+total.toFixed(2); var response = confirm("Run again? "); //alert("The value of response is" + response); } while(response);//end do-while $("salesTax").value = ""; $("total").value = ""; }//calculaet_click

38. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc. Slide 38 Fun In Class Assignment for while and for Recall the javascript based program, called ComputeTotalSalary.java for our sales force. The program has 1 html file, 1 css file and 1 js file. It should ask the user to input the name of the salesperson (String), the base salary and the total sales of last year (check they are both numbers). If the sales are below zero, the program should print an error and exit. If the sales are between $1 and $25,000, the program should add a bonus of 5% of the sales to the base. If the sales are between $25,000 and $50,000, the program should add a bonus of 10% of sales. If the sales are between $50,000 and $100,000 it should add a bonus of 15% of sales. Sales over $100,000 merit a 20% of-sales bonus. Finally, the program should print the statement: The final salary of ----- is $XXXX.XX and exit. -Modify the program so that input values are checked using a do-while & a for loop. How do these loops work in an event driven application versus a purely procedural application? Look at: SalesForceCompensationEventError web application

39. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 39

40. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 40

41. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 41 New HTML5 events for forms and input are at: http://www.htmlgoodies.com/html5/tutorials/HTML5-Development-Form--Keyboard-Events-3885651.htm They include: oninput, onfocus,onchange,onblur,onsubmit,onselect, onforminput, onformchange, oninvalid

42. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 42

43. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 43 Fun in Class Assignment: Try to get this page to work in your browser. Modify it so that it opens the duckduckgo website when the button is clicked. Hint: http://www.pageresource.com/jscript/jwinopen.htm

44. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 44

45. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 45

46. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 46

47. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 47

48. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 48

49. Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 49

50. Slide 50 ImagesOnMouseOver Web Application -How many images are there? -How many sizes are there for each image? -How were these images created? (using Paint) - What happens to each image onmouseover? -What happens to each image onmouseout ? -How could we extend this to other forms of interactive web pages?

51. Slide 51 Fun In Class Assignment for functions Write a program that asks the user to key in strings, until the user types in *** to finish. Once the user has finished inputting the strings, the program prints out the string that had the maximum number of unique alphabets in it. It also prints out the count of these alphabets. To write this program, create a separate function called countAlpha(var s) that returns the number of unique alphabets in s. Create only one button on HTML page that is labeled: RunCountAlpha Sketch the overall code and the code for the function. Algorithm 1: Take all alphabets and check each one. Algorithm 2: Take first letter of string, scan forward. Eliminate duplicate characters. Then take second letter and repeat. Return length of final string. Use s=s..replace(/\s/g, ''); to remove whitespace after every pass.

52. Slide 52 Second Fun In Class Assignment for functions Take the homework assignment 2: building a calculator. Let us try to split this into functions -What functionality is repeated a lot? -How can we break the complex overall problem into parts that work independently but can call on each other?