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

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

Chapter 1

Introduction to web development

and JavaScript


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.


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

Web Server

E-mail Server

Database ServerThe Internet

`

Client

`

Client


The architecture of the Internet


Terms server

network

local area network (LAN)

wide area network (WAN)

Internet

Internet exchange points (IXP)

Internet service provider (ISP)


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> <head> <title>Example Web Page</title> </head> <body> <p>This is a sample web page</p> </body> </html>


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


How a web server processes a dynamic web page


Terms dynamic web page

application mappings

application server

database server

round trip


Web browsers Internet Explorer

Firefox

Safari

Opera

Chrome

Web servers Apache

IIS


Server-side scripting languages ASP.NET

JSP

PHP

ColdFusion

Ruby

Perl

Python


How JavaScript fits into this architecture


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.


Terms JavaScript

JavaScript engine


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>


The web page in a web browser


Terms 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"> <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 web page in a web browser


Terms Cascading style sheets (CSS)

external style sheet

embedded style sheet

CSS rule set

selector

declaration block


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>


The DOM for the web page

html

bodyhead

title ph1 p h2 ul

lili li

text text text text text

text text text


Terms document object model (DOM)

node

Embedded JavaScript in an XHTML document  <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>


The JavaScript application in a web browser


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.


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.


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


How the web technologies interact


The DOM event cycle

EventOccurs

ScriptExecutes

DOMModified

PageUpdated

PageLoaded


Terms DOM scripting

event-driven programming

event

event handler


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


Terms 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


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 />


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>


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; }


The JavaScript file for the Sales Tax application var $ = function (id) { return document.getElementById(id); } window.onload = function () { $("calculate").onclick = calculate_click; $("subtotal").focus; }


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); } }


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 text-only version available.


A web page with links to other web pages


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.


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 FileOpen command.

If you’re using Windows, find the file in the Windows Explorer and double-click on it.


The source code for the Sales Tax application in Mozilla Firefox


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.

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

Documents

Transcript of Murach’s JavaScript, C1© 2009, Mike Murach & Associates, Inc.Slide 1.