murach’s javascript, c1© 2009, mike murach & associates, inc.slide 1
Post on 21-Dec-2015
217 views
TRANSCRIPT
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 1
Chapter 1
Introduction to web development
and JavaScript
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 2
Objectives
Applied
Load a web page from the Internet or an intranet into a web browser.
View the source code for a web page in a web browser.
Knowledge
Describe the components of a client-server architecture.
Describe HTTP requests and responses.
Distinguish between the way a web server processes static web pages and dynamic web pages.
Name the common web browsers, web servers, and server-side scripting languages.
Describe the use of the core web technologies: XHTML, CSS, the Document Object Model, and JavaScript.
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 3
Objectives (continued) Describe the basis for selecting specific releases of the core
technologies for use in your web development projects.
In general terms, describe the use of AJAX.
Describe the issues of cross-browser compatibility and user accessibility.
Describe the components of an HTTP URL.
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 4
The architecture of a web application
Web Server
E-mail Server
Database ServerThe Internet
`
Client
`
Client
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 5
The architecture of the Internet
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 6
Terms server
network
local area network (LAN)
wide area network (WAN)
Internet
Internet exchange points (IXP)
Internet service provider (ISP)
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 7
How a web server processes a static web page
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 8
A simple HTTP request GET / HTTP/1.1 Host: www.example.com
A simple HTTP response HTTP/1.1 200 OK Content-Type: text/html Content-Length: 136 Server: Apache/2.2.3 <html> <head> <title>Example Web Page</title> </head> <body> <p>This is a sample web page</p> </body> </html>
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 9
Two protocols that web applications depend upon Hypertext Transfer Protocol (HTTP)
Transmission Control Protocol/Internet Protocol ( TCP/IP).
Terms Hypertext Markup Language (HTML)
static web page
HTTP request
HTTP response
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 10
How a web server processes a dynamic web page
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 11
Terms dynamic web page
application mappings
application server
database server
round trip
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 12
Web browsers Internet Explorer
Firefox
Safari
Opera
Chrome
Web servers Apache
IIS
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 13
Server-side scripting languages ASP.NET
JSP
PHP
ColdFusion
Ruby
Perl
Python
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 14
How JavaScript fits into this architecture
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 15
Common uses of JavaScript Validate form data before it is sent to the server for processing.
Respond to user actions such as mouse clicks and key presses.
Create dynamic menus.
Create slide shows.
Animate elements in a web page.
Create timers, clocks, and calendars.
Change the style sheet that a web page uses.
Sort the data that’s in a table.
Control the web browser window.
Detect web browser plug-ins.
Open new web browser windows.
Change images when the user rolls the mouse over an image.
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 16
Terms JavaScript
JavaScript engine
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 17
The code for a web page <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mike's Bait and Tackle Shop</title> </head> <body> <h1>Mike's Bait and Tackle Shop</h1> <p>Welcome to Mike's Bait and Tackle Shop. We have all the gear you'll need to make your next fishing trip a great success!</p> <h2>New Products</h2> <ul> <li>Ultima 3000 Two-handed fly rod</li> <li>Phil's Faux Shrimp Fly - Size 6</li> <li>Titanium Open Back Fly Reel - Black</li> </ul> <p>Contact us by phone at 559-555-6624 to place your order today.</p> </body> </html>
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 18
The web page in a web browser
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 19
Terms Extensible hypertext markup language (XHTML)
XHTML elements
opening tag
closing tag
attribute
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 20
The code for a web page that’s styled with CSS <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mike's Bait and Tackle Shop</title> <style type='text/css'> body { background-color: #333366; color: #FFFFFF; } h1 { color: #FFCC33; border-bottom: 3px solid #FF3333; } ul { list-style-type: square; } </style> </head> <!-- The rest of this document is the same as before -->
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 21
The web page in a web browser
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 22
Terms Cascading style sheets (CSS)
external style sheet
embedded style sheet
CSS rule set
selector
declaration block
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 23
The code for a web page <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mike's Bait and Tackle Shop</title> </head> <body> <h1>Mike's Bait and Tackle Shop</h1> <p>Welcome to Mike's Bait and Tackle Shop. We have all the gear you'll need to make your next fishing trip a great success!</p> <h2>New Products</h2> <ul> <li>Ultima 3000 Two-handed fly rod</li> <li>Phil's Faux Shrimp Fly - Size 6</li> <li>Titanium Open Back Fly Reel - Black</li> </ul> <p>Contact us by phone at 559-555-6624 to place your order today.</p> </body> </html>
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 24
The DOM for the web page
html
bodyhead
title ph1 p h2 ul
lili li
text text text text text
text text text
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 25
Terms document object model (DOM)
node
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 26
Embedded JavaScript in an XHTML document <!-- The code before this is the same as in figure 1-6. --> <p>Contact us by phone at 559-555-6624 to place your order today.</p> <p>© <script type="text/javascript"> var today = new Date(); document.writeln( today.getFullYear() ); </script> Mike's Bait and Tackle Shop</p> </body> </html>
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 27
The JavaScript application in a web browser
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 28
Highlights in the history of the XHTML standards
Version Description
XHTML 1.0 Adopted in January 2000 and revised in August 2002. It reformulates HTML 4 using the syntax of XML
XHTML 1.1 Adopted in May 2001. The control of the presentation of content is now done through CSS.
XHTML 2 Released as a working draft in July 2006. It is intended to be a new version of XHTML, but it may be replaced by XHTML 5.
HTML 5 Released as a working draft in January 2008. It is a new version of HTML 4 and XHTML 1 that defines a new version of the DOM called DOM5 HTML.
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 29
The CSS standards
Version Description
1.0 Adopted in December 1996.
2.0 Adopted in May 1998.
2.1 First released as a candidate standard in February 2004, it was returned to working draft status in June 2005.
3.0 A modularized version of CSS with the earliest drafts in June 1999. Only a few modules have been released as candidate standards.
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 30
The DOM standards
Version Description
1.0 Adopted in October 1998. It describes the objects and interfaces that represent an HTML or XHTML document.
2.0 Adopted in November 2000. It modularized the specification, updated the existing features of DOM, and added views, events, and a CSS interface.
3.0 Adopted in April 2004. It updated the core DOM module and added the ability to convert the DOM to and from an XML document.
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 31
JavaScript versions
Version Date Browser Support
1.0 March 1996 Netscape Navigator 2.0
1.1 August 1996 Netscape Navigator 3.0
1.2 June 1997 Netscape Communicator 4.0
1.3 June 1998 Netscape Communicator 4.06
1.5 November 2000 Netscape 6
November 2004 Mozilla Firefox 1.0
1.6 November 2005 Mozilla Firefox 1.5
1.7 October 2006 Mozilla Firefox 2.0
1.8 June 2008 Mozilla Firefox 3.0
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 32
Target releases for current projects XHTML 1.0
CSS 2.1
DOM 2
JavaScript 1.5
The basis for selecting the target releases The latest releases that are supported
by the most popular web browsers
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 33
How the web technologies interact
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 34
The DOM event cycle
EventOccurs
ScriptExecutes
DOMModified
PageUpdated
PageLoaded
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 35
Terms DOM scripting
event-driven programming
event
event handler
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 36
AJAX-enabled request and response cycle
ServerAJAX HTTP request:The browser requests updated information for a page.
Client
AJAX HTTP response:The server returns the requested information and the page is updated.
Web server
Web serverBrowser
Browser
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 37
Terms rich Internet application (RIA)
AJAX (asynchronous JavaScript and XML)
XMLHttpRequest object
Extensible markup language (XML)
JavaScript object notation (JSON)
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 38
The Sales Tax application in a web browser
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 39
The XHTML file for the Sales Tax application <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Sales Tax Calculator</title> <link rel="stylesheet" type="text/css" href="sales_tax.css" /> <script type="text/javascript" src="sales_tax.js"></script> </head> <body> <div id="content"> <h1>Sales Tax Calculator</h1> <p>Enter the values below and click "Calculate".</p> <div id="taxCalc"> <label for="subtotal">Subtotal:</label> <input type="text" id="subtotal" /><br /> <label for="taxRate">Tax Rate:</label> <input type="text" id="taxRate" />%<br />
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 40
The XHTML file (continued) <label for="salesTax">Sales Tax:</label> <input type="text" id="salesTax" disabled="disabled" /><br /> <label for="total">Total:</label> <input type="text" id="total" disabled="disabled" /><br /> <label> </label> <input type="button" id="calculate" value="Calculate" /><br /> </div> </div> </body> </html>
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 41
The CSS file for the Sales Tax application body { font-family: Arial, Helvetica, sans-serif; background: #333366; } #content { width: 450px; margin: 10px auto; padding: 5px 20px; background: white; border: thin solid black; } #salesTax, #total { color: black; }
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 42
The CSS file (continued) #taxCalc label { display: block; width: 6em; text-align: right; padding-right: 1em; float: left; } #taxCalc input { display: block; float: left; } #taxCalc br { clear: left; }
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 43
The JavaScript file for the Sales Tax application var $ = function (id) { return document.getElementById(id); } window.onload = function () { $("calculate").onclick = calculate_click; $("subtotal").focus; }
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 44
The JavaScript file (continued) var calculate_click = function () { var subtotal = parseFloat( $("subtotal").value ); var taxRate = parseFloat( $("taxRate").value ); $("salesTax").value = ""; $("total").value = ""; if ( isNaN(subtotal) || subtotal < 0 ) { alert("Subtotal must be a number that is zero or more!"); } else if ( isNaN(taxRate) || taxRate < 0 ) { alert("Tax Rate must be a number that is zero or more!"); } else { var salesTax = subtotal * (taxRate / 100); salesTax = parseFloat( salesTax.toFixed(2) ); var total = subtotal + salesTax; $("salesTax").value = salesTax; $("total").value = total.toFixed(2); } }
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 45
The text-only version of the J. K. Rowling web site
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 46
Guidelines for cross-browser compatibility Don’t use browser-specific features in your web pages.
Test your web pages on as many browsers as possible.
Guidelines for user accessibility Design your pages so the most important content will still be
available if a visitor can’t use images, CSS, or JavaScript.
If you work for a government agency, you have to follow the guidelines in Section 508 that are required by federal law.
For a commercial web site, you may need to follow the guidelines in the Americans with Disabilities Act (ADA).
If you build a site that isn’t accessible, you should also have a text-only version available.
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 47
A web page with links to other web pages
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 48
The components of an HTTP URL
http://www.murach.com/books/index.htm
protocol domain name path filename
What happens if you omit parts of a URL If you omit the protocol, the default of http:// will be used.
If you omit the filename, the default document name for the web server will be used. This is typically either index.html or Default.htm.
If you omit the path, you must also omit the filename. Then, the home page for the site will be requested.
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 49
Two ways to access a web page on the Internet Type the URL of a web page into the browser’s address bar.
Click on a link in the current web page to load the next web page.
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 50
Three ways to access a web page on an intranet or on your own computer Type the complete path and filename into the browser’s address
bar.
Use the FileOpen command.
If you’re using Windows, find the file in the Windows Explorer and double-click on it.
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 51
The source code for the Sales Tax application in Mozilla Firefox
Murach’s JavaScript, C1 © 2009, Mike Murach & Associates, Inc. Slide 52
How to view the source code in Mozilla Firefox Use the ViewPage Source command.
How to view the source code in Internet Explorer Use the ViewSource command.