slide 1 mis3023 professor: akhilesh bajaj the university of tulsa

Chapter 1

Introduction to web development

MIS3023

Professor: Akhilesh Bajaj

The University of Tulsa

Goals

-Download all the files for the book from the textbook website.www.murach.com -Create a folder for our class and run some sample code

-Decide which editor to use: Aptana, Notepad++

-Learn how to use Firebug to step through a program and see how it visually executes

-Learn about the big picture of the Web and where JavaScript fits in

http://www.murach.com/

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

The architecture of a web application

Web Server

E-mail Server

Database ServerThe Internet

`

Client

`

Client


The architecture of the Internet

`

`

`LAN

`

` `

LAN

` ``LAN

`LAN

WAN

`

`LAN

`

`LAN

`

`

LAN

` ``

LAN

WAN

` `LAN

WAN

``

LAN

WAN

`

`

`LAN

``

`LAN

IXP

IXPIXP


Terms server

network

local area network (LAN)

wide area network (WAN)

Internet

Internet exchange points (IXP)

Internet service provider (ISP)

A static web page

How a web server processes a static web page

HTTP request

HTTP response(with HTML)

HTMLfile

Web Server

`

Client(web browser)


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

A dynamic web page at amazon.com

© 2012, Mike Murach & Associates, Inc. Slide 9

How a web server processes a dynamic web page

Application ServerWeb Server

Application script

Database Server

HTTP request

HTTP response(with HTML)

`

Client(web browser)


Web browsers Internet Explorer

Firefox

Chrome

Safari

Opera

Server-side scripting languages ASP.NET

JSP

PHP

ColdFusion

Ruby

Perl

Python

Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc. Slide 11

How JavaScript fits into this architecture

HTTP request

HTTP response(with HTML and

JavaScript)

HTMLfile

Web Server

`

Client(web browser)

JavaScriptfile

All images are loaded with the web page to the client. The client then does some of the processing using JavaScript.

Three of the common uses of JavaScript Data validation

Image swaps and rollovers

Slide shows


A web page with image swaps and rollovers

Imagerollover

Imageswap


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.


The code for an HTML file <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript book</title> </head> <body> <h1>JavaScript and DOM Scripting</h1> <img src="javascriptbook.jpg" alt="JavaScript Book"> <p>Today, web users expect web sites to provide advanced features, dynamic user interfaces, ... </p> <p>Now, at last, your trainees can learn both JavaScript and DOM scripting in this one great book. To find out how this book does it, <a href="">read more...</a> </p><br><br><br> </body> </html>

Attribute of img element

Opening Tag of HTML element with lang attribute defined


The HTML displayed in a web browser


The link element for a style sheet <link rel="stylesheet" href="book.css" >

In the <head> section of the HTML document


The code for the CSS file named book.css body { font-family: Arial, Helvetica, sans-serif; font-size: 82.5%; width: 500px; margin: 0 auto; padding: 1em; border: 1px solid navy; } h1 { margin: 0; padding: .25em; font-size: 250%; color: navy; } img { float: left; margin: 0 1em; } p { margin: 0; padding-bottom: .5em; }

Rule Set

selectorDeclaration block


The web page displayed in a web browser


Notable releases of the HTML standards

1993 HTML 1.0 Never adopted

1995 HTML 2.0 Adopted in November 1995

1997 HTML 4.0 New features

1999 HTML 4.01

2000 XHTML 1.0 Reformulates HTML with XML

2001 XHTML 1.1 Content presentation done with CSS

2008 HTML 5 Replaces both HTML 4 and XHTML 1 Still a working draft

Notable releases of the CSS standards

1996 1.0 Adopted in December 1996

1998 2.0 Adopted in May 1998

2004 2.1 A candidate standard in February 2004 Returned to working draft status in 2005 Became a candidate standard again in 2007

1999 3.0 A modularized version of CSS Earliest drafts in June 1999


Aptana Studio 3 with open HTML and CSS files


Three free text editors Aptana Studio 3

Notepad++

TextWrangler


The components of an HTTP URL http://www.modulemedia.com/ourwork/index.html

protocol domain name path filename

The web page at www.modulemedia.com


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 index.html, default.htm, or some variation.

Two ways to access a web page on the Internet Enter 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.

Two ways to access a web page on your own server or computer Use the FileOpen command with Internet Explorer or the

FileFile Open command with Firefox.

Use the features of your text editor or IDE.


How to view the source code for a web page Use the ViewSource or ViewPage Source command.

Right-click on the page and select the Source, View Source, or View Page Source command.

How to view the CSS code in an external CSS file In Firefox, click on the link in the link element that refers to it.

In Internet Explorer, enter the URL for the CSS file in the address bar of your web browser.


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


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


How the web technologies interact

Web browser

JavaScript

Web page (XHTML and CSS)

DOM


The DOM event cycle

EventOccurs

ScriptExecutes

DOMModified

PageUpdated

PageLoaded


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

Fun In Class Assignment Chapter 1-Copy the sales tax application pages (the .html, the .css and the .js files) into a separate folder called FunInClassChapt1).

-Run the code to make sure it works from this folder.

-Modify the code to do the following: -Have the user input shipping charges as an additional field before the salesTax and total fields. Call it shippingCharges.

-Check to make sure a number is entered for this new field

-Total should now include shipping charges as well.

-Play with the CSS to make the interface look a little better. For example, the fields may need some spacing around them. They seem a little close together. Try changing the background color.

Fun In Class Assignment Chapter 1 with Prompts-Copy the folder created in the earlier assignment and rename the copied folder toSales_tax_prompts

-Run the code to make sure it works from this folder.

-Modify the code to do the following: -Modify the HTML page so it only shows the output fields: Sales Tax and Total-Accept the inputs for subTotal, taxRate and shippingCharges as prompts. -Check to make sure a number is entered for this new field

-Total should now include shipping charges as well.

slide 1 mis3023 professor: akhilesh bajaj the university of tulsa

Documents

mike murach associates

html document slide

university of tulsa

murachs javascript

murachs html5

lang attribute defined

javascript fits

tag of html element