1. Slide 1 MIS3023 Professor: Akhilesh Bajaj The University of Tulsa

2. Slide 2 Goals -Download all the files for the book from the textbook website. www.murach.com -Create a folder for our class and run some sample code -Decide which editor to use: Aptana, Notepad++ -Learn how to use Firebug to step through a program and see how it visually executes -Learn about the big picture of the Web and where JavaScript fits in

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

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

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

6. Slide 6

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

8. Slide 8

9. © 2012, Mike Murach & Associates, Inc.Slide 9

10. © 2012, Mike Murach & Associates, Inc.Slide 10

11. Murach's HTML5 and CSS3, C1© 2012, Mike Murach & Associates, Inc.Slide 11 All images are loaded with the web page to the client. The client then does some of the processing using JavaScript.

12. Murach's HTML5 and CSS3, C1© 2012, Mike Murach & Associates, Inc.Slide 12 Image rollover Image swap

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

14. Murach's HTML5 and CSS3, C1© 2012, Mike Murach & Associates, Inc.Slide 14 Attribute of img element Opening Tag of HTML element with lang attribute defined

15. Murach's HTML5 and CSS3, C1© 2012, Mike Murach & Associates, Inc.Slide 15

16. Murach's HTML5 and CSS3, C1© 2012, Mike Murach & Associates, Inc.Slide 16 In the section of the HTML document

17. Murach's HTML5 and CSS3, C1© 2012, Mike Murach & Associates, Inc.Slide 17  Rule Set selector Declaration block

18. Murach's HTML5 and CSS3, C1© 2012, Mike Murach & Associates, Inc.Slide 18

19. Murach's HTML5 and CSS3, C1© 2012, Mike Murach & Associates, Inc.Slide 19

20. Murach's HTML5 and CSS3, C1© 2012, Mike Murach & Associates, Inc.Slide 20

21. Murach's HTML5 and CSS3, C1© 2012, Mike Murach & Associates, Inc.Slide 21

22. Murach's HTML5 and CSS3, C1© 2012, Mike Murach & Associates, Inc.Slide 22

23. Murach's HTML5 and CSS3, C1© 2012, Mike Murach & Associates, Inc.Slide 23

24. Murach's HTML5 and CSS3, C1© 2012, Mike Murach & Associates, Inc.Slide 24

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

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

27. Murach’s JavaScript, C1© 2009, Mike Murach & Associates, Inc. Slide 27

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

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

30. Murach’s JavaScript, C1© 2009, Mike Murach & Associates, Inc. Slide 30

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

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

33. © 2009, Mike Murach & Associates, Inc. Slide 33

34. Murach’s JavaScript, C1© 2009, Mike Murach & Associates, Inc. Slide 34

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

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

37. Murach’s JavaScript, C1© 2009, Mike Murach & Associates, Inc. Slide 37

38. Murach’s JavaScript, C1© 2009, Mike Murach & Associates, Inc. Slide 38

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

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

41. Murach’s JavaScript, C1© 2009, Mike Murach & Associates, Inc. Slide 41

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

43. Murach’s JavaScript, C1© 2009, Mike Murach & Associates, Inc. Slide 43

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

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

46. Slide 46 Fun In Class Assignment Chapter 1 -Copy the sales tax application pages (the.html, the.css and the.js files) into a separate folder called FunInClassChapt1 ). -Run the code to make sure it works from this folder. -Modify the code to do the following: -Have the user input shipping charges as an additional field before the salesTax and total fields. Call it shippingCharges. -Check to make sure a number is entered for this new field -Total should now include shipping charges as well. -Play with the CSS to make the interface look a little better. For example, the fields may need some spacing around them. They seem a little close together. Try changing the background color.

47. Slide 47 Fun In Class Assignment Chapter 1 with Prompts -Copy the folder created in the earlier assignment and rename the copied folder to Sales_tax_prompts -Run the code to make sure it works from this folder. -Modify the code to do the following: -Modify the HTML page so it only shows the output fields: Sales Tax and Total -Accept the inputs for subTotal, taxRate and shippingCharges as prompts. -Check to make sure a number is entered for this new field -Total should now include shipping charges as well.