Introduction to web development and JavaScript

(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 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 Database Server

The Internet

` Client

E-mail Server `

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)

(2)

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

 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 Ch  Chrome

Web servers

 Apache  IIS

(3)

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>

(4)

Terms

 Extensible hypertext markup language (XHTML)  XHTML elements

 opening tag  closing tag

 attribute

The code for a web page that’s styled with CSS

<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

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

(5)

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

y ();

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.

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

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

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

(6)

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

Web browser

Web page (XHTML and CSS) DOM

JavaScript

The DOM event cycle

Terms

 DOM scripting  event-driven programming  event  event handler  event handler

(7)

Terms

 rich Internet application (RIA)

 AJAX (asynchronous JavaScript and XML)  XMLHttpRequest object

 Extensible markup language (XML)  JavaScript object notation (JSON)

 JavaScript object notation (JSON)

The Sales Tax application in a web browser

The XHTML file for the Sales Tax application

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

(8)

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}

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.

(9)

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

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

Introduction to web development and JavaScript

Chapter 1

Introduction

to web development

to web development

and JavaScript

Objectives

Objectives (continued)

The architecture of a web application

The architecture of the Internet

Terms

How a web server processes a static web page

A simple HTTP request

A simple HTTP response

Two protocols that web applications depend upon

Terms

How a web server processes a dynamic web page

Terms

Web browsers

Web servers

Server-side scripting languages

How JavaScript fits into this architecture

Common uses of JavaScript

Terms

The code for a web page

Terms

The code for a web page that’s styled with CSS

The web page in a web browser

Terms

The code for a web page

Terms

Embedded JavaScript in an XHTML document

The JavaScript application in a web browser

Highlights in the history of the XHTML standards

The CSS standards

The DOM standards

JavaScript versions

Target releases for current projects

The basis for selecting the target releases

How the web technologies interact

The DOM event cycle

Terms

Terms

The Sales Tax application in a web browser

The XHTML file for the Sales Tax application

The XHTML file (continued)

The CSS file for the Sales Tax application

The CSS file (continued)

The JavaScript file for the Sales Tax application

The JavaScript file (continued)

The text-only version of the J. K. Rowling web site

Guidelines for cross-browser compatibility

Guidelines for user accessibility

A web page with links to other web pages

The components of an HTTP URL

What happens if you omit parts of a URL

Two ways to access a web page on the Internet

Three ways to access a web page on an intranet or

on your own computer

The source code for the Sales Tax application

in Mozilla Firefox

How to view the source code in Mozilla Firefox

How to view the source code in Internet Explorer

_{The components of an HTTP URL}