Objectives Chapter 1 Introduction to web development and JavaScript 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 1 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 2 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. The architecture of a web application ` Client The Internet Web Server Database Server ` Client E-mail Server Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 3 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 4 The architecture of the Internet 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 5 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 6 1
How a web server processes a static web page 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> <title>example Web Page</title> <body> <p>this is a sample web page</p> Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 7 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 8 Two protocols that web applications depend upon Hypertext Transfer Protocol (HTTP) Transmission Control Protocol/Internet Protocol ( TCP/IP). How a web server processes a dynamic web page Hypertext Markup Language (HTML) static web page HTTP request HTTP response Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 9 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 10 dynamic web page application mappings application server database server round trip Web browsers Internet Explorer Firefox Safari Opera Chrome Web servers Apache IIS Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 11 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 12 2
Server-side scripting languages ASP.NET JSP PHP ColdFusion Ruby Perl Python How JavaScript fits into this architecture Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 13 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 14 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. JavaScript JavaScript engine Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 15 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 16 The code for a web page <html xmlns="http://www.w3.org/1999/xhtml"> <title>mike's Bait and Tackle Shop</title> <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> The web page in a web browser Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 17 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 18 3
Extensible hypertext markup language (XHTML) XHTML elements opening tag closing tag attribute The code for a web page that s styled with CSS <html xmlns="http://www.w3.org/1999/xhtml"> <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> <!-- The rest of this document is the same as before --> Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 19 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 20 The web page in a web browser 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 21 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 22 The code for a web page <html xmlns="http://www.w3.org/1999/xhtml"> <title>mike's Bait and Tackle Shop</title> <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> The DOM for the web page Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 23 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 24 4
document object model (DOM) node 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> Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 25 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 26 The JavaScript application in a web browser Highlights in the history of the XHTML standards Version XHTML 1.0 XHTML 1.1 XHTML 2 HTML 5 Description Adopted in January 2000 and revised in August 2002. It reformulates HTML 4 using the syntax of XML Adopted in May 2001. The control of the presentation of content is now done through CSS. 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. 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 27 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 28 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. 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 29 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 30 5
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 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 31 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 32 How the web technologies interact The DOM event cycle Web browser Web page (XHTML and CSS) DOM JavaScript Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 33 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 34 DOM scripting event-driven programming event event handler AJAX-enabled request and response cycle Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 35 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 36 6
rich Internet application (RIA) AJAX (asynchronous JavaScript and XML) XMLHttpRequest object Extensible markup language (XML) JavaScript object notation (JSON) The Sales Tax application in a web browser Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 37 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 38 The XHTML file for the Sales Tax application <html xmlns="http://www.w3.org/1999/xhtml"> <title>sales Tax Calculator</title> <link rel="stylesheet" type="text/css" href="sales_tax.css" /> <script type="text/javascript" src="sales_tax.js"></script> <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 /> 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> Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 39 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 40 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; 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 41 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 42 7
The JavaScript file for the Sales Tax application var $ = function (id) { return document.getelementbyid(id); The JavaScript file (continued) var calculate_click = function () { var subtotal = parsefloat( $("subtotal").value ); var taxrate = parsefloat( $("taxrate").value ); window.onload = function () { $("calculate").onclick = calculate_click; $("subtotal").focus; $("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 43 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 44 The text-only version of the J. K. Rowling web site 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 textonly version available. Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 45 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 46 A web page with links to other web pages The components of an HTTP URL 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 47 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 48 8
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. 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 File Open 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 49 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 50 The source code for the Sales Tax application in Mozilla Firefox How to view the source code in Mozilla Firefox Use the View Page Source command. How to view the source code in Internet Explorer Use the View Source command. Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 51 Murach s JavaScript, C1 2009, Mike Murach & Associates, Inc. Slide 52 9