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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

Slide 27 var date1 = new Date(); date1.setFullYear(2011, 6, 1); // , 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()); // , ok //Now inspect value of date1 // , expecting // I didn't assign a new date to date1 // WHY is date1 changed?

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

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

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

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

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

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

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.

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

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

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

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

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

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

Murach’s JavaScript, C2© 2009, Mike Murach & Associates, Inc.Slide 41 New HTML5 events for forms and input are at: They include: oninput, onfocus,onchange,onblur,onsubmit,onselect, onforminput, onformchange, oninvalid

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

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:

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

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

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

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

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

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

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?

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.

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?