Slide 1 MIS3023 Professor: Akhilesh Bajaj The University of Tulsa

Slide 2 Goals -Download all the files for the book from the textbook website. -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

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

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

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

Slide 6

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

Slide 8

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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.