slide 1 mis3023 professor: akhilesh bajaj the university of tulsa
TRANSCRIPT
Slide 1
Chapter 1
Introduction to web development
MIS3023
Professor: Akhilesh Bajaj
The University of Tulsa
Slide 2
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
© 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
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 4
The architecture of the Internet
`
`
`LAN
`
` `
LAN
` ``LAN
`LAN
WAN
`
`LAN
`
`LAN
`
`
LAN
` ``
LAN
WAN
` `LAN
WAN
``
LAN
WAN
`
`
`LAN
``
`LAN
IXP
IXPIXP
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 5
Terms server
network
local area network (LAN)
wide area network (WAN)
Internet
Internet exchange points (IXP)
Internet service provider (ISP)
Slide 6
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)
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 7
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
Slide 8
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)
© 2012, Mike Murach & Associates, Inc. Slide 10
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
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc. Slide 12
A web page with image swaps and rollovers
Imagerollover
Imageswap
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 13
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 HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc. Slide 14
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
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc. Slide 15
The HTML displayed in a web browser
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc. Slide 16
The link element for a style sheet <link rel="stylesheet" href="book.css" >
In the <head> section of the HTML document
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc. Slide 17
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
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc. Slide 18
The web page displayed in a web browser
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc. Slide 19
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
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc. Slide 20
Aptana Studio 3 with open HTML and CSS files
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc. Slide 21
Three free text editors Aptana Studio 3
Notepad++
TextWrangler
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc. Slide 22
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
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc. Slide 23
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.
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc. Slide 24
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.
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 25
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>
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 26
The web page in a web browser
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 27
Terms Extensible hypertext markup language (XHTML)
XHTML elements
opening tag
closing tag
attribute
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 28
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 -->
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 29
The web page in a web browser
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 30
Terms Cascading style sheets (CSS)
external style sheet
embedded style sheet
CSS rule set
selector
declaration block
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 31
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>
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 32
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
© 2009, Mike Murach & Associates, Inc. Slide 33
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>
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 34
The JavaScript application in a web browser
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 35
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.
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 36
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
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 37
How the web technologies interact
Web browser
JavaScript
Web page (XHTML and CSS)
DOM
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 38
The DOM event cycle
EventOccurs
ScriptExecutes
DOMModified
PageUpdated
PageLoaded
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 39
The Sales Tax application in a web browser
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 40
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 />
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 41
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>
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 42
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; }
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 43
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; }
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 44
The JavaScript file for the Sales Tax application var $ = function (id) { return document.getElementById(id); } window.onload = function () { $("calculate").onclick = calculate_click; $("subtotal").focus; }
© 2009, Mike Murach & Associates, Inc.Murach’s JavaScript, C1 Slide 45
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); } }
Slide 46
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.
Slide 47
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.