Chapter 1 Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc.Slide 1

Objectives Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 2

Objectives (continued) Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 3

Objectives (continued) Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 4

The components of a web application Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 5

Terms Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 6

A static web page at Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 7

How a web server processes a static web page Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 8

A dynamic web page at amazon.com Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 9

How a web server processes a dynamic web page Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 10

A web page with image swaps and rollovers Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 11

How JavaScript fits into this architecture Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 12

Some of the uses of JavaScript and jQuery Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 13

An HTML file (index.html) in a browser after CSS has been applied to it Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 14

The code for the HTML file named index.html Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 15

The HTML file named index.html (continued) Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 16

The code for the CSS file named _list.css Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 17

The CSS file named _list.css (continued) Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 18

The web page in a browser with JavaScript used for data validation Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 19

The code for the JavaScript file ( _list.js) Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 20

The JavaScript file (continued) Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 21

The primary HTML5 semantic elements Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 22

A page that’s structured with HTML5 elements Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 23

The HTML in a web browser Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 24

The JavaScript shiv that tells older browsers about the HTML5 elements Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 25

Terms Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 26

HTML div elements for a JavaScript application Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 27

HTML span elements for a JavaScript application Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 28

The basic HTML attributes Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 29

HTML that uses these attributes Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 30

The HTML in a web browser with a tooltip displayed for the text box Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 31

Two ways to provide styles Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 32

A head element that includes two style sheets Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 33

How to specify the medium for a style sheet Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 34

HTML that can be selected by type, id, or class Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 35

CSS rule sets that select by type, id, and class Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 36

The HTML elements in a browser Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 37

The CSS file for a typical application in this book Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 38

The CSS file for a typical application (continued) Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 39

Terms Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 40

The web page at c:/jquery/book_apps/ch01/ _list.html Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 41

Four ways to run an HTML page that’s on your own server or computer Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 42

Two ways to run an HTML page on the Internet Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 43

The components of an HTTP URL on the Internet Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 44

The HTML5 ratings of current browsers Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 45

Guidelines for cross-browser compatibility Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 46

The workarounds for using HTML5 semantics Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 47

How to test your web pages in older browsers Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 48

The last dialog box for creating an Aptana project Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 49

How to create a project Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 50

Aptana with the App Explorer shown and a JavaScript file in the second tab Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 51

How to open a file within an Aptana project Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 52

Aptana’s Themes dialog box Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 53

How to apply a new theme for Aptana Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 54

Aptana with an auto-completion list for a JavaScript entry Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 55

To run a web page, click on Aptana’s Run button Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 56 Run button

To rerun a web page in a browser, clicking on the Reload button Murach's JavaScript and jQuery, C1© 2012, Mike Murach & Associates, Inc. Slide 57 Reload button