1 of 2 - Rajalakshmi Engineering College

IT1451 – WEB TECHNOLOGY 

8 TH SEMESTER – INFORMATION TECHNOLOGY 

UNIT – 1 NOTES 

P.Kumar, Rajalakshmi Engineering COllege 1

History of the Internet and World Wide 

Outline 

Web 

History of the Internet 

Personal Computing 

History of the World Wide Web 

World Wide Web Consortium (W3C) 


• ARPANET 


– Implemented in late 1960’s by ARPA (Advanced Research 

Projects Agency of DOD) 

– Networked computer systems of a dozen universities and 

institutions with 56KB communications lines 

– Grandparent of today’s Internet 

– Intended to allow computers to be shared 

– Became clear that key benefit was allowing fast 

communication between researchers – electronic-mail 

(email) 


• ARPA’s goals 


– Allow multiple users to send and receive info at same time 

– Network operated packet switching technique 

• Digital data sent in small packages called packets 

• Packets contained data, address info, error-control info and 

sequencing info 

• Greatly reduced transmission costs of dedicated communications 

lines 

– Network designed to be operated without centralized control 

• If portion of network fails, remaining portions still able to route 

packets 



• Transmission Control Protocol (TCP) 

– Name of protocols for communicating over ARPAnet 

– Ensured that messages were properly routed and that they arrived 

intact 

• Organizations implemented own networks 

– Used both for intra-organization and communication 



• Huge variety of networking hardware and software 

appeared 

– ARPA achieved inter-communication between all platforms with 

development of the IP 

• Internetworking Protocol 

• Current architecture of Internet 

– Combined set of protocols called TCP/IP 

• The Internet 

– Limited to universities and research institutions 

– Military became big user 

– Next, government decided to access Internet for commercial 

purposes 


• Internet traffic grew 


– Businesses spent heavily to improve Internet 

• Better service their clients 

– Fierce competition among communications carriers and hardware 

and software suppliers 

– Result 

• Bandwidth (info carrying capacity) of Internet increased 

tremendously 

• Costs plummeted 


• WWW 

History of the World Wide Web 

– Allows computer users to locate and view multimedia-based 

documents 

– Introduced in 1990 by Tim Berners-Lee 

• Internet today 

– Mixes computing and communications technologies 

– Makes information constantly and instantly available to 

anyone with a connection 


• W3C 

World Wide Web Consortium (W3C) 

– Founded in 1994 by Tim Berners-Lee 

• Devoted to developing non-proprietary and interoperable 

technologies for the World Wide Web and making the Web 

universally accessible 

– Standardization 

• W3C Recommendations: technologies standardized by W3C 

– include Extensible HyperText Markup Language (XHTML), 

Cascading Style Sheets (CSS) and the Extensible Markup 

Language (XML) 

• Document must pass through Working Draft, Candidate 

Recommendation and Proposed Recommendation phases before 

considered for W3C Recommendation 


Protocols 

 

 

Protocols are agreed 

formats for transmitting 

data between devices 

The protocol determines: 

 

 

 

 

The error checking 

required 

Data compression 

method used 

The way the end of a 

message is signaled T 

The way the device 

indicates that it has 

received the message 


Internet Protocols 

 

There are many protocols used by the 

Internet and the WWW, including 

 

 

 

 

TCP/IP 

HTTP 

FTP 

Electronic mail protocols 

 

 

IMAP 

POP 


TCP/IP 

 

The Internet uses two main protocols (developed 

by Vicent Cerf and Robert Kahn) 

 

 

Transmission control protocol (TCP) 

 

 

Controls disassembly of message into packets at the origin 

Reassembles at the destination 

Internet protocol (IP) 

 

Specifies the addressing details for each packet 

Each packet is labeled with its origin and destination 


Hypertext Transfer Protocol (HTTP) 

 

 

 

The hypertext transfer protocol (HTTP) was 

developed by Tim Berners-Lee in 1991 

HTTP was designed to transfer pages between 

machines 

The client (or Web browser) makes a request for 

a given page and the Server is responsible for 

finding it and returning it to the client 


Hypertext Transfer Protocol (HTTP) 

 

 

Client 

The browser connects and requests a page from the server 

The server reads the page from the file system, sends it to 

the client and terminates the connection 

Request sent to Web server 

Response sent with files (one for each 

Web page, image, sound clip etc.) 

Web Server 


Electronic Mail Protocols 

 

 

 

Electronic mail uses the client/server model 

The organisation has an email server 

devoted to handling email 

 

Stores and forwards email messages 

Individuals use email client software to 

read and send email (e.g. Microsoft 

Outlook, or Netscape Messenger) 


Electronic Mail Protocols Cont’d 

 

 

Simple Mail Transfer Protocol (SMTP) 

 

Specifies format of mail messages 

Post Office Protocol (POP) 

 

tells the email server to: 

 

 

 

Send mail to the user’s computer and delete it 

from the server 

Send mail to the user’s computer and do not delete 

it from the server 

Ask whether new mail has arrived 



 

Interactive Mail Access Protocol (IMAP) 

 

 

Newer than POP, provides similar functions 

with additional features 

 

 

e.g. can send specific messages to the client rather 

than all the messages 

A user can view email message headers and the 

sender’s name before downloading the entire 

message 

Allows users to delete and search mailboxes 

held on the email server 



 

 

The disadvantage of POP 

 

You can only access messages from one PC 

The disadvantage of IMAP 

 

Since email is stored on the email server, 

there is a need for more and more expensive 

(high speed) storage space 


MIME 

 

 

MIME - Multi-purpose Internet Mail 

Extensions 

The MIME protocol lets SMTP transmit 

multimedia files including voice, audio, 

and binary data across TCP/IP networks. 


Introduction to HyperText Markup 

Language 4 (HTML 4) 

Outline 

Introduction 

Markup Languages 

Editing HTML 

Common Tags 

Headers 

Text Styling 

Linking 

Images 

Formatting Text With 

Special Characters, Horizontal Rules and 

More Line Breaks 


• HTML 

Introduction 

– HyperText Markup Language 

– HTML is a language for describing web pages. 

– Not a procedural programming language like C, 

Fortran, Cobol or Pascal 

– Markup language 

• Identify elements of a page so that a browser can render that 

page on your computer screen 

• Presentation of a document vs. structure 

• Hypertext Transfer Protocol (HTTP) is the 

communication protocol used by the Internet to 

transfer hypertext documents. 


Basic Definitions 

• Web Page: A web page is a document or resource of information that 

is suitable for the World Wide Web and can be accessed through a web 

browser. 

• Website: A collection of pages on the World Wide Web that are 

accessible from the same URL and typically residing on the same 

server 

• Browser: A web browser is a software application for retrieving, 

presenting, and traversing information resources on the World Wide 

Web 

• URL: Uniform Resource Locator, the unique address which identifies 

a resource on the Internet for routing purposes 

• HTTP: A protocol to transfer hypertext requests and information 

between servers and browsers 

• Hypertext: Hypertext is text, displayed on a computer, with references 

(hyperlinks) to other text that the reader can immediately follow, 

usually by a mouse 

• Web server: software that delivers Web pages and other documents to 

browsers using the HTTP protocol 


• Markup language 

Markup Languages 

– Used to format text and information 

• HTML 

– Marked up with elements, delineated by tags 

– Tags: keywords contained in pairs of angle brackets 

• HTML tags 

– Not case sensitive 

– Good practice to keep all the letters in one case 

• Forgetting to close tags is a syntax error 


Editing HTML 

• HTML files or documents 

– Written in source-code form using text editor 

– Notepad: Start-Programs-Accessories 

• HTML files 

– .htm or .html extensions 

– Name your files to describe their functionality 

– File name of your home page should be index.html 

• Errors in HTML 

– Usually not fatal 


Common Tags 

• Always include the … tags 

• Comments placed inside tags 

• HTML documents 

– HEAD section 

• Info about the document 

• Info in header not generally rendered in display window 

• TITLE element names your Web page 

– BODY section 

• Page content 

• Includes text, images, links, forms, etc. 

• Elements include backgrounds, link colors and font faces 

• P element forms a paragraph, blank line before and after 


1 

2 

3 

4 

5 

6 

7 Internet and WWW How to Program - Welcome 

8 

9 

10 

11 

12 Welcome to Our Web Site! 

13 

14 

15 

Outline 

1. HEAD section 

1.1 TITLE element 

2. BODY section 

2.1 P element 


• Headers 

Headers 

– Simple form of text formatting 

– Vary text size based on the header’s “level” 

– Actual size of text of header element is selected by 

browser 

– Can vary significantly between browsers 

• CENTER element 

– Centers material horizontally 

– Most elements are left adjusted by default 


1 

2 

3 

4 

5 

6 

7 Internet and WWW How to Program - Headers 

8 

9 

10 

11 

12 

13 

14 Level 1 Header 

15 Level 2 header 





20 

21 

22 

23 

Outline 

1. Varying header 

sizes 

1.1 Level 1 is the largest, 

level 6 is the smallest 


Header elements H1 through H6 


Text Styling 

• Underline style 

– … 

• Align elements with ALIGN attribute 

– right, left or center 

• Close nested tags in the reverse order from which they 

were opened 

• Emphasis (italics) style 

– … 

• Strong (bold) style 

– … 

• and tags deprecated 

– Overstep boundary between content and presentation 


1 

2 

3 

4 

5 

6 


8 

9 

10 

11 Welcome to Our Web Site! 

12 

13 We have designed this site to teach 

14 about the wonders of HTML. We have been using 

15 HTML since version 2.0, 

16 and we enjoy the features that have been added recently. It 

17 seems only a short time ago that we read our first HTML 

18 book. Soon you will know about many of the great new features 

19 of HTML 4.0. 

20 

21 Have Fun With the Site! 

22 

23 

24 

Outline 

1. EM, STRONG, and U 

tags 

1.1 Close nested tags in 

reverse order from 

which they were 

opened 

2. Page rendered by 

browser 


Stylizing text on Web pages 


Linking 

• Links inserted using the A (anchor) element 

– Requires HREF attribute 

• HREF specifies the URL you would like to link to 

– … 

– Can link to email addresses, using 

… 

– Note quotation mark placement 


1 

2 

3 

4 

5 

6 

7 Internet and WWW How to Program - Links 

8 

9 

10 

11 

12 

13 Here are my favorite Internet Search Engines 

14 Click on the Search Engine address to go to that 

15 page. 

16 

17 

18 Yahoo: 

19 http://www.yahoo.com 

20 

21 AltaVista: 

22 http://www.altavista.com 

23 

24 Ask Jeeves: 

25 http://www.askjeeves.com 

26 

27 WebCrawler: 

28 http://www.webcrawler.com 

29 

30 

31 

32 

Outline 

1. Anchor element 

1.1 HREF attribute 


Linking to other Web pages 


1 

2 

3 

4 

5 

6 

7 Internet and WWW How to Program - Contact Page 

8 

9 

10 

11 

12 

13 

14 My email address is 

15 deitel@deitel.com. Click on the address and your browser 

16 will open an email message and address it to me. 

17 

18 

19 

20 

Outline 

1. Anchor element 

1.1 mailto link 


browser 


• Images as anchors 

Images (II) 

• Background color 

– Preset colors (white, black, blue, red, etc.) 

– Hexadecimal code 

• First two characters for amount of red 

• Second two characters for amount of green 

• Last two characters for amount of blue 

• 00 is the weakest a color can get 

• FF is the strongest a color can get 

• Ex. black = #000000 


Images 

• Image background 

– 

– Image does not need to be large as browser tiles image across and 

down the screen 

• Pixel 

– Stands for “picture element” 

– Each pixel represents one addressable dot of color on the screen 

• Insert image into page 

– Use tag 

• Attributes: 

– SRC = “location” 

– HEIGHT (in pixels) 

– WIDTH (in pixels) 

– BORDER (black by default) 

– ALT (text description for browsers that have images turned off or 

cannot view images) 


1 

2 

3 

4 

5 

6 


8 

9 

10 

11 

12 

13 

14 

16 

17 

18 

19 

Outline 

1.1 Background image 

1.2 IMG element 

1.3 IMG attributes 


browser 


1 

2 

3 

4 

5 

6 

7 Internet and WWW How to Program - Nav Bar 

8 

9 

10 

11 

12 

13 

14 

16 

17 

18 

20 

21 

22 

24 

25 

26 

28 

29 

30

31 BORDER = "0" ALT = "Header Page"> 

32 

33 

34 

36 

37 

38 

40 

41 

42 

43 

Outline 


browser 


Using images as link anchors 


• FONT element 

Formatting Text With 

– Add color and formatting to text 

– FONT attributes: 

• COLOR 

– Preset or hex color code 

– Value in quotation marks 

– Note: you can set font color for whole document using 

TEXT attribute in BODY element 


Formatting Text With (II) 

• SIZE 

– To make text larger, set SIZE = “+x” 

– To make text smaller, set SIZE = “-x” 

– x is the number of font point sizes 

• FACE 

– Font of the text you are formatting 

– Be careful to use common fonts like Times, Arial, Courier 

and Helvetica 

– Browser will display default if unable to display specified 

font 

• Example 

… 


1 

2 

3 

4 

5 

6 

7Internet and WWW How to Program - Welcome 

8 

9 

10 

11 

12Welcome to Our Web Site! 

13 

14 

15We have 

16designed this site to teach about the wonders of 

17HTML. 

18 

19We have been 

20using HTML since version 2.0, 

21and we enjoy the features that have been added recently. 

22 

23It 

24seems only a short time ago that we read our first HTML 

25book. 

26 

27Soon you will 

28know about many of the great new feature of HTML 4.0. 

29 

30Have Fun With the Site! 

31 

32 

33 

1. FONT tag 

Outline 

1.1 FONT attributes 


Using the FONT element to format text 



More Line Breaks 

• Special characters 

– Inserted in code form 

– Format always &code; 

• Ex. & 

– Insert an ampersand 

– Codes often abbreviated forms of the character 

– Codes can be in hex form 

• Ex. & to insert an ampersand 

• Strikethrough with DEL element 

• Superscript: SUP element 

• Subscript: SUB element 


1 

2 

3 

4 

5 

6 

7 Internet and WWW How to Program - Contact Page 

8 

9 

10 

11 

12 

13 My email address is 

14 deitel@deitel.com. Click on the address and your browser 

15 will automatically open an email message and address it to my 

16 address. 

17 

18 All information on this site is © 

19 Deitel & Associates, 1999. 

20 

21 

22 

23 

24 You may copy up to 3.14 x 102 characters 

25 worth of information from this site. Just make sure 

26 you do not copy more information than is allowable. 

27 

28 No permission is needed if you only need to use 

29 < ¼ of the information presented here. 

30 

31 

32 

Outline 

1. Special characters 

2. Strikethrough 

3. Superscript 

4. Subscript 


Inserting special characters into HTML 



More Line Breaks (II) 

• Horizontal rule 

– tag 

– Inserts a line break directly below it 

– HR attributes: 

• WIDTH 

– Adjusts the width of the rule 

– Either a number (in pixels) or a percentage 

• SIZE 

– Determines the height of the horizontal rule 

– In pixels 

• ALIGN 

– Either left, right or center 

• NOSHADE 

– Eliminates default shading effect and displays horizontal 

rule as a solid-color bar 


1 

2 

3 

4 

5 

6 

7Internet and WWW How to Program - Horizontal Rule 

8 

9 

10 

11 

12 

13 

14 

15 

16 

17Size:4 

18Width:75% 

19 

20 

21Size:12 

22Width:25% 

23 

24 

25Size:8 

26Width:50% 

27No shade... 

28 

29 

30 

31 

Outline 

1. Horizontal rules 

1.1 HR attributes 


Using horizontal rules 


Intermediate HTML 4 

Outline 

Introduction 

Unordered Lists 

Nested and Ordered Lists 

Basic HTML Tables 

Intermediate HTML Tables and Formatting 

Basic HTML Forms 

More Complex HTML Forms 

Internal Linking 

Creating and Using Image Maps 

Tags 

Tag 

Nested Tags 


• In this Chapter 

– Lists 

– Tables 

– Internal linking 

– Image maps 

– Frames 

Introduction 


• Unordered list element 

Unordered Lists 

– Creates a list in which every line begins with a bullet 

mark 

– … tags 

– Each item in unordered list inserted with the (list 

item) tag 

• Closing tag optional 


1 

3 

4 

5 

6 

7Internet and WWW How to Program - Links 

8 

9 

10 

11 

12 

13Here are my favorite Internet Search Engines 

14Click on the Search Engine address to go to that 

15page. 

16 

17 

18 

19 

20Yahoo: 

21http://www.yahoo.com 

22 

23Alta Vista: 

24http://www.alta-vista.com 

25 

26Ask Jeeves: 

27http://www.askjeeves.com 

28 

29WebCrawler: 

30http://www.webcrawler.com 

31 

32 

33 

34 

Outline 

1. Unordered list 

1.1 List items 


Unordered lists with HTML 


• Nested list 

Nested and Ordered Lists 

– Contained in another list element 

– Nesting the new list inside the original 

• Browsers 

• Indents list one level and changes the bullet type to reflect the 

nesting 

– Insert a line of whitespace after every closed list 

• Indent each level of a nested list 

– Makes the code easier to edit and debug 


1 

2 

3 

4 

5 

6 

7 Internet and WWW How to Program - List 

8 

9 

10 

11 

12 

13 The Best Features of the Internet 

14 

15 

16 

17 You can meet new people from countries around 

18 the world. 

19 You have access to new media as it becomes public: 

20 

21 

22 

23 

24 New games 

25 New applications 

26 

27 

28 

29 For business 

30 For pleasure 

Outline 

1. Nested lists 

1.1 Three levels of 

nesting 

1.2 Close tags in 

appropriate places 


31 

32 Around the clock news 

33 Search engines 

34 Shopping 

35 Programming 

36 

37 HTML 

38 Java 

39 Dynamic HTML 

40 Scripts 

41 New languages 

42 

43 

44 Links 

45 Keeping in touch with old friends 

46 It is the technology of the future! 

47 

48 

49 My 3 Favorite CEO's 

50 

51 

52 

53 

54 Bill Gates 

55 Steve Jobs 

56 Michael Dell 

57 

58 

59 

60 

Outline 

2. Ordered list 


Nested and ordered lists in HTML 


Nested and Ordered Lists (II) 

• Ordered list element 

– … tags 

– By default, ordered lists use decimal sequence numbers 

• (1, 2, 3, …) 

– To change sequence type, use TYPE attribute in opening tag 

• TYPE = “1” (default) 

– Decimal sequence (1, 2, 3, …) 

• TYPE = “I” 

– Uppercase Roman numerals (I, II, III, …) 

• TYPE = “i” 

– Lowercase Roman numerals (i, ii, iii, …) 

• TYPE = “A” 

– Uppercase alphabetical (A, B, C, …) 

• TYPE = “a” 

– Lowercase alphabetical (a, b, c, …) 


1 

2 

3 

4 

5 

6 

7Internet and WWW How to Program - List 

8 

9 

10 

11 

12 

13Web Site Outline 

14 

15 

16 

17 

18 

19 

20 

21Home page 

22Links page 

23 

24 Links to search engines 

25 Links to information sites 

26 

27 News sites 

28 

29 TV based 

30 

Outline 

1. OL element 

1.1 TYPE attribute 


31 CNN 

32 Headline News 

33 

34 Text based 

35 

36 New York Times 

37 Washington Post 

38 

39 

40 Stock sites 

41 

42 Links to "fun" sites 

43 

44 Feedback page 

45 Contact page 

46 HTML Example Pages 

47 

48 

49 

50 

Outline 


Different types of ordered lists 


• Tables 

Basic HTML Tables 

– Organize data into rows and columns 

– All tags and text that apply to the table go inside 

… tags 

– TABLE element 

• Attributes 

– BORDER lets you set the width of the table’s border in 

pixels 

– ALIGN: left, right or center 

– WIDTH: pixels (absolute) or a percentage 

• CAPTION element is inserted directly above the table in the 

browser window 

– Helps text-based browsers interpret table data 


Basic HTML tables (II) 

– TABLE element (cont.) 

• THEAD element 

– Header info 

– For example, titles of table and column headers 

• TR element 

– Table row element used for formatting the cells of 

individual rows 

• TBODY element 

– Used for formatting and grouping purposes 

• Smallest area of the table we are able to format is data cells 

– Two types of data cells 

» In the header: … suitable for titles and 

column headings 

» In the table body: … 

– Aligned left by default 


1 

2 

3 

4 

5 

6 

7 Internet and WWW How to Program - Tables 

8 

9 

10 

11 

12 Table Example Page 

13 

14 

15 

16 

17 

18 

19 

20 Here is a small sample table. 

21 

22 

23 

24 

25 

26 This is the head. 

27 

28 

29 

30 

31 

Outline 

1. TABLE element 

1.1 BORDER attribute 

1.2 CAPTION element 

1.3 THEAD element 

1.4 TH element 


32 

33 This is the body. 

34 

35 

36 

37 

38 

39 

Outline 

1.5 TBODY element 

1.6 TD element 


browser 



• COLGROUP element 

– Used to group and format columns 

• Each COL element 

– In the … tags 

– Can format any number of columns (specified by the 

SPAN attribute) 

• Background color or image 

– Add to any row or cell 

– Use BGCOLOR and BACKGROUND attributes 



(II) 

• Possible to make some data cells larger than others 

– ROWSPAN attribute inside any data cell 

• Value extends the data cell to span the specified number of 

cells 

– COLSPAN attribute 

• Value extends the data cell to span the specified number of 

cells 

– Modified cells will cover the areas of other cells 

• Reduces number of cells in that row or column 

• VALIGN attribute 

– top, middle, bottom and baseline 

– Default is middle 


1 

2 

3 

4 

5 

6 

7Internet and WWW How to Program - Tables 

8 

9 

10 

11Table Example Page 

12 

13 

14 Here is a small sample table. 

15 

16 

17 

18 This is the Head. 

19 

20 

21 

22 

23 

24 This is the Body. 

25 

26 

27 

28 

29 

30 P.Kumar, Rajalakshmi Engineering COllege 72 

Outline

30 

31 

32 

33 

34 Here is a more complex sample table. 

35 

36 

37 

38 

39 

40 

41 

42 

43 

44 

45 

46 

47 

48 

49 

50 

52 

53 

54 Camelid comparison 

55 Approximate as of 8/99 

56 

57 

58 

59 

60 # of Humps P.Kumar, Rajalakshmi Engineering COllege 73 

Outline 

1.1COLGROUP element 

1.2COL element 

1.3ROWSPAN and 

COLSPAN attributes 

1.4BGCOLOR attribute 

1.5 WIDTH attribute 

1.6VALIGN attribute

61 Indigenous region 

62 Spits? 

63 Produces Wool? 

64 

65 

66 

67 

68 

69 

70 

71 Camels (bactrian) 

72 2 

73 Africa/Asia 

74 Llama 

75 Llama 

76 

77 

78 

79 Llamas 

80 1 

81 Andes Mountains 

82 

83 

84 

85 

86 

87 

88 

Outline 


A complex table with formatting and color 


Basic HTML Forms 

• Forms 

– Collect information from people viewing your site 

• FORM element 

– METHOD attribute indicates the way the Web server will 

organize and send you form output 

• Web server: machine that processes browser requests 

• METHOD = “post” in a form that causes changes to server 

data 

• METHOD = “get” in a form that does not cause any changes 

in server data 

– Form data sent to server as an environment variable 

• Processed by scripts 

– ACTION attribute 

• Path to a script (a CGI script written in Perl, C or other 

languages) 


Basic HTML Forms (II) 

• INPUT element 

– Attributes: 

• TYPE (required) 

– Hidden inputs always have TYPE = “hidden” 

– Defines the usage of the INPUT element 

» TYPE = “text” inserts a one-line text box 

• NAME provides a unique identification for INPUT element 

• VALUE indicates the value that the INPUT element sends to 

the server upon submission 

• SIZE 

– For TYPE = “text”, specifies the width of the text 

input, measured in characters 

• MAXLENGTH 

– For TYPE = “text”, specifies the maximum number of 

characters that the text input will accept 


• INPUT element (cont.) 

Basic HTML Forms (III) 

– Include textual identifier adjacent to INPUT element 

– 2 types of INPUT elements that should be inserted into 

every form: 

• TYPE = “submit” inserts a button that submits data to the 

server 

– VALUE attribute changes the text displayed on the button 

(default is “Submit”) 

• TYPE = “reset” inserts a button that clears all entries the 

user entered into the form 

– VALUE attribute changes the text displayed on the button 

(default is “Reset”) 


1 

2 

3 

4 

5 

6 

7Internet and WWW How to Program - Forms 

8 

9 

10 

11Feedback Form 

12 

13Please fill out this form to help us improve our site. 

14 

15 

16 

17 

18 

19 

20 

22 

24 

26 

27 

Outline 

1. FORM element 

1.1Specify METHOD 

attribute 

1.2Hidden input 

elements 


28Name: 

29 

30 

31 

32 

33 

34 

35 

36 

37 

38 

Outline 

1.3Text box INPUT 

element 

1.4“submit” and 

“reset” INPUT 

TYPEs 


browser 


More Complex HTML Forms 

• TEXTAREA element 

– Inserts a scrollable text box into FORM 

– ROWS and COLS attributes specify the number of 

character rows and columns 

• INPUT element 

– TYPE = “password” 

– Inserts a text box where data displayed as asterisks 

• Actual data submitted to server 


More Complex HTML Forms (II) 

• INPUT element (cont.) 

– TYPE = “checkbox” creates a checkbox 

• Used individually or in groups 

• Each checkbox in a group should have same NAME 

• Make sure that the checkboxes within a group have different 

VALUE attribute values 

– Otherwise, browser will cannot distinguish between them 

• CHECKED attribute checks boxes initially 

– TYPE = “radio” 

• Radio buttons similar in function and usage to checkboxes 

• Only one radio button in a group can be selected 

• CHECKED attribute indicates which radio button is selected 

initially 


• SELECT element 

More Complex Forms (III) 

– Places a selectable list of items inside FORM 

• Include NAME attribute 

– Add an item to list 

• Insert an OPTION element in the … 

tags 

• Closing OPTION tag optional 

– SELECTED attribute applies a default selection to list 

– Change the number of list options visible 

• Including the SIZE = “x” attribute inside the 

tag 

• x number of options visible 


1 

2 

3 

4 

5 

6 


8 

9 

10 


12 


14 

15 

16 

17 

19 

21 

23 

24Name: 

25 

26 

27 

28Comments: 

29 

30 

P.Kumar, Rajalakshmi Engineering COllege 84 

Outline 

1.1TEXTAREA element

31 

32 

33 

34Email Address: 

35 

36 

37 

38Things you liked: 

39 

40Site design 

41 

42Links 

43 

44Ease of use 

45 

46Images 

47 

48Source code 

49 

50 

51 

52 

53 

54 

55 

56 

57 

Outline 

1.2“password” TYPE 

1.3“checkbox” TYPE 

1.4Checkboxes in 

same group must 

have same NAME, 

but different VALUE 

attributes 


Form including textareas, password boxes 

and checkboxes 


1 

2 

3 

4 

5 

6 


8 

9 

10 


12 


14 

15 

16 

17 

19 

21 

23 

24Name: 

25 

26 

27Comments: 

28 

29 

30 

Outline 


31Email Address: 

32 

33 

34Things you liked: 

35 

36Site design 

37 

38Links 

39 

40Ease of use 

41 

42Images 

43 

44Source code 

45 

46 

47 

48 

49 

50 

51How did you get to our site?: 

52 

53Search engine 

54 

56Links from another site 

57 

Outline 

1.1TYPE = “radio” 

creates a radio 

button 

1.2Only one radio 

button in a group 

can be selected 

1.3CHECKED attribute 

specifies which 

radio button is 

selected by default 


59Deitel.com Web site 

60 

62Reference in a book 

63 

65Other 

66 

68 

69 

70 

71 

72Rate our site (1-10): 

73 

74Amazing:-) 

7510 

769 

778 

787 

796 

805 

814 

823 

832 

841 

85The Pits:-( 

86 

87 

88 

89 

90 

92 

93 

Outline 

1.4SELECT element 

1.5Create menu items 

with OPTION 

elements 

1.6SELECTED attribute 

specifies which 

option is displayed 

by default 


HTML form including radio buttons and 

pulldown lists 


• Internal linking 

Internal Linking 

– Assign location name to individual point in an HTML 

file 

– Location name can then be added to the page’s URL 

• Link to specific point on the page 

– Location marked by including a NAME attribute in an A 

(anchor) element 

• Ex. in list.html 

– URL of location 

• Format: page.html#name 

• Ex. list.html#features 


1 

2 

3 

4 

5 

6 

7 Internet and WWW How to Program - List 

8 

9 

10 

11 

12 

13 

14 

15 The Best Features of the Internet 

16 

17 

18 Go to Favorite CEO's 

19 

20 

21 

22 You can meet new people from countries around the world. 

23 You have access to new media as it becomes public: 

24 

25 New games 

26 New applications 

27 

28 For Business 

29 For Pleasure 

Outline 

1.1Create an internal 

link using the NAME 

attribute in an A 

element 

30 P.Kumar, Rajalakshmi Engineering COllege 92

31 Around the Clock news 

32 Search Engines 

33 Shopping 

34 Programming 

35 

36 HTML 

37 Java 

38 Dynamic HTML 

39 Scripts 

40 New languages 

41 

42 

43 Links 

44 Keeping In touch with old friends 

45 It is the technology of the future! 

46 

47 

48 

49 My 3 Favorite CEO's 

50 Go to Favorite Features 

51 

52 

53 

54 Bill Gates 

55 Steve Jobs 

56 Michael Dell 

57 

58 

59 

60 

61 P.Kumar, Rajalakshmi Engineering COllege 93 

Outline 

1.2Access internal link 

using HREF = 

“#features”

Using internal hyperlinks to make your page 

more navigable 


• Image maps 

Creating and Using Image Maps 

– Designate certain sections of an image as hotspots 

– Use hotspots as anchors for linking 

– All elements of image map inside … 

tags 

– tag requires NAME attribute 

• Ex. 

• Hotspots designated with AREA element 

– AREA attributes: 

• HREF sets the target for the link on that spot 

• SHAPE and COORDS set the characteristics of the AREA 

• ALT provides alternate textual description 


Creating and Using Image Maps (II) 

• AREA element (continued) 

– SHAPE = “rect” 

• Causes rectangular hotspot to be drawn around the coordinates 

given in the COORDS attribute 

• COORDS - pairs of numbers corresponding to the x and y axes 

– x axis extends horizontally from upper-left corner 

– y axis extends vertically from upper-left corner 

• Ex. 

– Rectangular hotspot with upper-left corner of rectangle at 

(3, 122) and lower-right corner at (73, 143) 


Creating and Using Image Maps (III) 

• AREA element (continued) 

– SHAPE = “poly” 

• Causes a hotspot to be created around specified coordinates 

• Ex. 

– SHAPE = “circle” 

• Creates a circular hotspot 

• Coordinates of center of circle and radius of circle, in pixels 

• Ex. 


Creating and Using Image Maps (IV) 

• To use the image map with an IMG element 

– Insert the USEMAP = “#name” attribute into the 

IMG element 

– name - value of the NAME attribute in the MAP element 

– Ex. 


1 

2 

3 

4 

5 

6 

7Internet and WWW How to Program - List 

8 

9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

21 

23 

25 

27 

28 

29 

30

31 COORDS = "28, 22, 24, 68, 46, 114, 84, 111, 99, 56, 86, 13" 

32 ALT = "Email the Deitels"> 

33 

34 

35 

36 

38 

39 

40 

41 

42 

44 

45 

46 

47 

Outline 

1.6SHAPE = 

“circle” 

1.7Use image map 

with IMG element 

via USEMAP attribute 


A picture with links anchored to an image 

map 


• Search engines 

Tags 

– Catalog sites by following links from page to page 

– Save identification and classification info 

• 

– Tells browser that HTML conforms to a 

Transitional subset of HTML version 4.0 

• META tag 

– Main HTML element that interacts with search engines 


Tags (II) 

• META tags 

– Contain two attributes that should always be used: 

– NAME identifies type of META tag 

– CONTENT provides info the search engine will catalog 

about your site 

• CONTENT of a META tag with NAME = “keywords” 

– Provides search engines with a list of words that describe 

key aspects of your site 

• CONTENT of a META tag with NAME = “description” 

– Should be 3 to 4 lines 

– Used by search engines to catalog and display your site 

• META elements 

– Not visible to users of the site 

– Should be placed inside header section 


1 

2 

3 

4 

5 

6 

7 

8 

9 

10 

13 

14 

17 

18Internet and WWW How to Program - Welcome 

19 

20 

21 

22 

23Welcome to Our Web Site! 

24 

25We have 

26designed this site to teach about the wonders of 

27HTML. 

28 

29We have been 

30using HTML since version 2.0, 

Outline 

1. META tags 

1.1NAME = 

“keywords” 

1.2NAME = 

“description” 


31and we enjoy the features that have been added recently. 

32 

33It 

34seems only a short time ago that we read our first HTML 

35book. 

36 

37Soon you will 

38know about many of the great new feature of HTML 4.0. 

39 

40Have Fun With the Site! 

41 

42 

43 

Outline 


• Frames 

Tag 

– Display more than one HTML file at a time 

– If used properly, frames make your site more readable and usable 

• tag 

– Uses Frameset instead of Transitional 

– Tell the browser that you are using frames 

• tags 

– Tell the browser the page contains frames 

– Details for frames contained within 

… tags 

– COLS or ROWS attribute gives the width or height of each frame 

• In pixels or a percentage 


• FRAME elements 

Tag (II) 

– Specify what files will make up frameset 

– FRAME attributes: 

• NAME - identifies specific frame, enabling hyperlinks to load in their 

intended frame 

– TARGET attribute of A element 

– SRC 

– Ex. 

– TARGET = “_blank” loads page in a new blank browser 

window 

– TARGET = “_self” loads page in the same window as 

anchor element 

– TARGET = “_parent” loads page in the parent FRAMESET 

– TARGET = _top” loads page in the full browser window 

• Gives the URL of the page that will be displayed in the specified 

frame 


Tag (III) 

• Not all browsers support frames 

– Use the NOFRAMES element inside the FRAMESET 

– Direct users to a non-framed version 

– Provide links for downloading a frames-enabled 

browser 

• Use of frames 

– Do not use frames if you can accomplish same with 

tables or other, simpler HTML formatting 


1 

2 

3 

4 

5 

6 

7 

8 

11 

12 

15 

16Internet and WWW How to Program - Main 

17 

18 

19 

20 

21 

22 

23 

24 

25 

26 

27 

28 This page uses frames, but your browser does not support 

29 them. 

Outline 

1.1 

declares Frameset 

1.2FRAMESET tag gives 

the dimensions of 

your frame using 

COLS or ROWS 

1.3COLS = “110,*” 

indicates that the 

first frame extends 

110 pixels from left 

side and the 

second frame fills 

the remainder of 

the screen 

1.4FRAME elements 

1.5NOFRAMES element 

30 Get Internet Explorer 5 at the P.Kumar, Rajalakshmi Engineering COllege 109

31 

32 Microsoft Web Site 

33 

34 

35 

36 

Outline 


browser 


• FRAME element 

Nested Tags 

– SCROLLING attribute 

• Set to “no” to prevent scroll bars 

– NORESIZE attribute prevents user from resizing the 

frame 

• Nesting frames 

– Include the correct number of FRAME elements inside 

FRAMESET 

– Using nested FRAMESET elements 

• Indent every level of FRAME tag 

• Makes page clearer and easier to debug 


1 

2 

3 

4 

5 

6 

7 

8 

9 

12 

13 

16 

17 

18 

19 

20 

21 

22 

23 

24 

25 

26 

27 

28 This page uses frames, but your browser doesn't 

29 support them. 

Outline 

1. Nested FRAMESET 

elements 

1.1Indent each level of 

FRAMESET and 

FRAME elements 

1.2Provide 

NOFRAMES 

element 


30 Get Internet Explorer 5 at the 

31 Microsoft 

32 Web-Site 

33 

34 

35 

36 

37 

Outline 


browser 


JavaScript: Introduction to Scripting 

Outline 

Introduction 

Simple Program: Printing a Line of Text in a Web Page 

Obtaining User Input with prompt Dialogs 

Dynamic Welcome Page 

Adding Integers 

Memory Concepts 

Arithmetic 

Decision Making: Equality and Relational Operators 

Web Resources 


Objectives 

• In this lesson, you will learn: 

– To be able to write simple JavaScript programs. 

– To be able to use input and output statements. 

– To understand basic memory concepts. 

– To be able to use arithmetic operators. 

– To understand the precedence of arithmetic operators. 

– To be able to write decision-making statements. 

– To be able to use relational and equality operators. 


Introduction 

• JavaScript scripting language 

– Enhances functionality and appearance 

– Client-side scripting 

• Makes pages more dynamic and interactive 

– Foundation for complex server-side scripting 

– Program development 

– Program control 


• Divided into 3 parts 

JavaScript Origin 

1. Core – heart of the language, includes operators, 

expressions, stmts, subprograms 

2. Client-side – Collection of objects that support 

browser and interactions with users( embedded 

with HTML) 

3. Server-side – useful on web server(less frequently 

used) 


Java Vs Javascript 

• Java supports Oops concept whereas the 

JavaScript does not support 

• Java is a strongly typed language, JavaScript does 

not provide ( dynamically typed) 

• Objects in Java are static and are dynamic in 

JavaScript 

• Main similarity is their syntax 


Simple Program: Printing a Line of Text in a 

Web Page 

• Inline scripting 

– Written in the of a document 

– tag 

• Indicate that the text is part of a script 

• type attribute 

– Specifies the type of file and the scripting language use 

• writeln method 

– Write a line in the document 

• Escape character ( \ ) 

– Indicates “special” character is used in the string 

• alert method 

– Dialog box 


Outline 

welcome.html 

(1 of 1) 


Outline 

welcome2.html 



Outline 

welcome3.html 

1 of 1 


Outline 

welcome4.html 




Simple Program: Printing a Line of Text in a 

Web Page 

Escape sequence Description 

\n Newline. Position the screen cursor at the beginning of the next line. 

\t Horizontal tab. Move the screen cursor to the next tab stop. 

\r Carriage return. Position the screen cursor to the beginning of the 

current line; do not advance to the next line. Any characters output 

after the carriage return overwrite the characters previously output on 

that line. 

\\ Backslash. Used to represent a backslash character in a string. 

\" Double quote. Used to represent a double quote character in a string 

contained in double quotes. For example, 

window.alert( "\"in quotes\"" ); 

displays "in quotes" in an alert dialog. 

\' Single quote. Used to represent a single quote character in a string. For 

example, 

window.alert( '\'in quotes\'' ); 

displays 'in quotes' in an alert dialog. 

Fig. 7.5 Some common escape sequences. 



• A script can adapt the content based on input from 

the user or other variables 


Outline 

welcome5.html 



23 

24 

25 

26 

27 Click Refresh (or Reload) to run this script again. 

28 

29 

Outline 

welcome5.html 



This is the prompt 

to the user. 

This is the default value that 

appears when the dialog 

opens. 


This is the text field in which 

the user types the value. 

Fig. 7.7 Prompt dialog displayed by the window object’s prompt method. 

When the user clicks OK, the 

value typed by the user is returned 

to the program as a string. 


Adding Integers 

• Prompt user for two integers and calculate the sum 

• NaN (not a number) 

• parseInt 

– Converts its string argument to an integer 


Outline 

Addition.html 



24 // read in second number from user as a string 

25 secondNumber = 

26 window.prompt( "Enter second integer", "0" ); 

27 

28 // convert numbers from strings to integers 

29 number1 = parseInt( firstNumber ); 

30 number2 = parseInt( secondNumber ); 

31 

32 // add the numbers 

33 sum = number1 + number2; 

34 

35 // display the results 

36 document.writeln( "The sum is " + sum + "" ); 

37 // --> 

38 

39 

40 

41 

42 Click Refresh (or Reload) to run the script again 

43 

44 

Outline 

Addition.html 





• Variable names correspond to locations in the 

computer’s memory 

• Every variable has a name, a type, and a value 

• Read value from a memory location 

– nondestructive 



number1 45 

Fig. 7.9 Memory location showing the name and value of variable number1. 



number1 45 

number2 72 

Fig. 7.10 Memory locations after values for variables number1 and number2 have been input. 



number1 45 

number2 72 

sum 117 

Fig. 7.11 Memory locations after calculating the sum of number1 and number2. 


Arithmetic 

• Many scripts perform arithmetic calculations 

– Expressions in JavaScript must be written in straight-line 

form 


JavaScript 

operation 

Arithmetic 

operator 

Arithmetic 

Algebraic 

expression 

JavaScript 

expression 

Addition + f + 7 f + 7 

Subtraction - p – c p - c 

Multiplication 

Division 

* 

/ 

bm 

x 

x / y or -- or x y 

b * m 

x / y 

Remainder % r mod s r % s 

Fig. 7.12 Arithmetic operators. 

Operator(s) Operation(s) Order of evaluation (precedence) 

*, / or % Multiplication 

Division 

Modulus 

+ or - Addition 

Subtraction 

Fig. 7.13 Precedence of arithmetic operators. 

y 

Evaluated second. If there are several such 

operations, they are evaluated from left to right. 

Evaluated last. If there are several such operations, 

they are evaluated from left to right. 


Step 1. 

Step 2. 

Step 3. 

Step 4. 

Step 5. 

Step 6. 

Arithmetic 

y = 2 * 5 * 5 + 3 * 5 + 7; 

2 * 5 is 10 

y = 10 * 5 + 3 * 5 + 7; 

10 * 5 is 50 

y = 50 + 3 * 5 + 7; 

3 * 5 is 15 

y = 50 + 15 + 7; 

50 + 15 is 65 

y = 65 + 7; 

y = 72; 

65 + 7 is 72 

(Leftmost multiplication) 

(Leftmost multiplication) 

(Multiplication before addition) 

(Leftmost addition) 

(Last addition) 

(Last operation—place72 intoy ) 

Fig. 7.14 Order in which a second-degree polynomial is evaluated. 


Decision Making: Equality and Relational 

Operators 

• Decision based on the truth or falsity of a 

condition 

– Equality operators 

– Relational operators 



Operators 

Standard algebraic 

equality operator or 

relational operator 

Equality operators 

JavaScript equality 

or relational 

operator 

Sample 

JavaScript 

condition 

Meaning of 

JavaScript 

condition 

= == x == y x is equal to y 

? 

Relational operators 

!= x != y x is not equal to y 

> > x > y x is greater than y 

< < x < y x is less than y 

 

>= x >= y x is greater than or 

equal to y 

 

Outline 

welcome6.html 



25 // determine whether the time is PM 

26 if ( hour >= 12 ) 

27 { 

28 // convert to a 12 hour clock 

29 hour = hour - 12; 

30 

31 // determine whether it is before 6 PM 

32 if ( hour < 6 ) 

33 document.write( "Good Afternoon, " ); 

34 

35 // determine whether it is after 6 PM 

36 if ( hour >= 6 ) 

37 document.write( "Good Evening, " ); 

38 } 

39 

40 document.writeln( name + 

41 ", welcome to JavaScript programming!" ); 

42 // --> 

43 

44 

45 

46 

Outline 

welcome6.html 



47 

48 Click Refresh (or Reload) to run this script again. 

49 

50 

Outline 

welcome6.html 




Operators 

Operators Associativity Type 

* / % left to right multiplicative 

+ - left to right additive 

< >= left to right relational 

== != left to right equality 

= right to left assignment 

Fig. 7.17 Precedence and associativity of the 

operators discussed so far. 


Outline 

JavaScript: Control Statements I 

Introduction 

Algorithms 

Control Structures 

if Selection Statement 

if…else Selection Statement 

while Repetition Statement 

Formulating Algorithms: Case Study 1 (Counter-Controlled 

Repetition) 

Formulating Algorithms with Top-Down, Stepwise 

Refinement: Case Study 2 (Sentinel-Controlled Repetition) 

Formulating Algorithms with Top-Down, Stepwise 

Refinement: Case Study 3 (Nested Control Structures) 

Assignment Operators 

Increment and Decrement Operators 


Objectives 


– To understand basic problem-solving techniques. 

– To be able to develop algorithms through the process of top- 

down, stepwise refinement. 

– To be able to use the if and if…else selection statements 

to choose among alternative actions. 

– To be able to use the while repetition statement to execute 

statements in a script repeatedly. 

– To understand counter-controlled repetition and sentinelcontrolled 

repetition. 

– To be able to use the increment, decrement and assignment 

operators. 


• Writing a script 

Introduction 

– Thorough understanding of problem 

– Carefully planned approach 

– Understand the types of building blocks that are available 

– Employ proven program-construction principles 


• Actions to be executed 

Algorithms 

• Order in which the actions are to be executed 



• Sequential execution 

– Statements execute in the order they are written 

• Transfer of control 

– Next statement to execute may not be the next one in sequence 

• Three control structures 

– Sequence structure 

– Selection structure 

• if 

• if…else 

• switch 

– Repetition structure 

• while 

• do…while 

• for 

• for…in 


• Flowchart 


– Graphical representation of algorithm or portion of 

algorithm 

– Flowlines 

• Indicate the order the actions of the algorithm execute 

– Rectangle symbol 

• Indicate any type of action 

– Oval symbol 

• A complete algorithm 

– Small circle symbol 

• A portion of algorithm 

– Diamond symbol 

• Indicates a decision is to be made 



add grade to total total = total + grade; 

add 1 to counter counter = counter + 1; 

Fig. 8.1 Flowcharting JavaScript’s sequence structure. 



JavaScript 

Keywords 

break case catch continue default 

delete do else finally for 

function if in instanceof new 

return switch this throw try 

typeof var void while with 

Keywords that 

are reserved but 

not currently 

used by 

JavaScript 

abstract boolean byte char class 

const debugger double enum export 

extends final float goto implements 

import int interface long native 

package private protected public short 

static super synchronized throws transient 

volatile 

Fig. 8.2 JavaScript keywords. 



• Single-entry/single-exit structure 

• Indicate action only when the condition evaluates 

to true 



grade >= 60 

false 

true 

print “Passed” 

Fig. 8.3 Flowcharting the single-selection if statement. 



• Indicate different actions to be perform when 

condition is true or false 

• Conditional operator (?:) 

– JavaScript’s only ternary operator 

• Three operands 

• Forms a conditional expression 

• Dangling-else problem 



print “Failed” 

false 

grade >= 60 

true 

print “Passed” 

Flowcharting the double-selection if…else statement. 



• Repetition structure (loop) 

– Repeat action while some condition remains true 



true 

product

Formulating Algorithms: 

Case Study 1 (Counter-Controlled 

Repetition) 

• Counter-controlled repetition 

– Counter 

• Control the number of times a set of statements executes 

– Definite repetition 


1 

2 

4 

5 

6 

7 

8 

9 

10 Class Average Program 

11 

12 

13

24 // Processing Phase 

25 while ( gradeCounter 

47 

Outline 

average.html 



48 

49 

50 


52 

53 

Outline 

average.html 



Formulating Algorithms with Top-Down, 

Stepwise Refinement: Case Study 2 

(Sentinel-Controlled Repetition) 

• Indefinite repetition 

– Sentinel value 


1 

2 

4 

5 

6 

7 

8 

9 

10 Class Average Program: 

11 Sentinel-controlled Repetition 

12 

13 

14

25 // Processing phase 

26 // prompt for input and read grade from user 

27 grade = window.prompt( 

28 "Enter Integer Grade, -1 to Quit:", "0" ); 

29 

30 // convert grade from a string to an integer 

31 gradeValue = parseInt( grade ); 

32 

33 while ( gradeValue != -1 ) { 

34 // add gradeValue to total 

35 total = total + gradeValue; 

36 

37 // add 1 to gradeCounter 

38 gradeCounter = gradeCounter + 1; 

39 

40 // prompt for input and read grade from user 

41 grade = window.prompt( 

42 "Enter Integer Grade, -1 to Quit:", "0" ); 

43 

44 // convert grade from a string to an integer 

45 gradeValue = parseInt( grade ); 

46 } 

47 

Outline 

average2.html 



48 // Termination phase 

49 if ( gradeCounter != 0 ) { 

50 average = total / gradeCounter; 

51 

52 // display average of exam grades 

53 document.writeln( 

54 "Class average is " + average + "" ); 

55 } 

56 else 

57 document.writeln( "No grades were entered" ); 

58 // --> 

59 

60 

61 

62 


64 

65 

Outline 

average2.html 




Formulating Algorithms with Top-Down, 

Stepwise Refinement: Case Study 3 (Nested 

Control Structures) 

• Consider problem 

• Make observations 

• Top-down, stepwise refinement 


1 

2 

4 

5 

6 

7 

8 

9 

10 Analysis of Examination Results 

11 

12 

13

25 if ( result == "1" ) 

26 passes = passes + 1; 

27 else 

28 failures = failures + 1; 

29 

30 student = student + 1; 

31 } 

32 

33 // termination phase 

34 document.writeln( "Examination Results" ); 


36 "Passed: " + passes + "Failed: " + failures ); 

37 

38 if ( passes > 8 ) 

39 document.writeln( "Raise Tuition" ); 

40 // --> 

41 

42 

43 

44 


46 

47 

Outline 

analysis.html 






• Compound assignment operators 

– Abbreviate assignment expressions 


Assignment 

operator 


Initial 

value of 

variable 

Sample 

expression 

+= 

-= 

*= 

/= 

%= 

c = 3 

d = 5 

e = 4 

f = 6 

g = 12 

c += 7 c = c + 

7 

d -= 4 d = d - 

4 

e *= 5 e = e * 

5 

f /= 3 f = f / 

3 

g %= 9 g = g % 

9 

Fig. 8.12 Arithmetic assignment operators. 

Explanation Assigns 

10 to c 

1 to d 

20 to e 

2 to f 

3 to g 



• Preincrement or predecrement operator 

– Increment of decrement operator placed before a variable 

• Postincrement or postdecrement operator 

– Increment of decrement operator placed after a variable 



Operator Called Sample 

expression 

Explanation 

++ preincrement ++a Increment a by 1, then use the 

new value of a in the 

expression in which a resides. 

++ postincrement a++ Use the current value of a in 

the expression in which a 

resides, then increment a by 1. 

-- predecrement --b Decrement b by 1, then use the 

new value of b in the 

expression in which b resides. 

-- postdecrement b-- Use the current value of b in 

the expression in which b 

resides, then decrement b by 1. 

Fig. 8.13 increment and decrement operators. 


1 

2 

4 

5 

6 

7 

8 

9 

10 Preincrementing and Postincrementing 

11 

12 

13

26 // increment then print 6 

27 document.writeln( "" + ++c ); 

28 document.writeln( "" + c ); // print 6 

29 // --> 

30 

31 

32 

33 

Outline 

increment.html 




Operator Associativity Type 

++ -- right to left unary 





?: right to left conditional 

= += -= *= /= %= right to left assignment 

Fig. 8.15 Precedence and associativity of the operators 

discussed so far. 


Outline 

JavaScript: Control Statements II 

Essentials of Counter-Controlled Repetition 

for Repetition Statement 

Examples Using the for Statement 

switch Multiple-Selection Statement 

do…while Repetition Statement 

break and continue Statements 

Labeled break and continue Statements 

Logical Operators 

Summary of Structured Programming 


Objectives 


– To be able to use the for and do…while repetition 

statements to execute statements in a program repeatedly. 

– To understand multiple selection using the switch selection 

statement. 

– To be able to use the break and continue program-control 

statements. 

– To be able to use the logical operators. 


Essentials of Counter-Controlled 

Repetition 

• Counter-controlled repetition 

– Name of a control 

– Initial value 

– Increment or decrement 

– Final value 


1 

2 

4 

5 

6 

7 

8 

9 

10 Counter-Controlled Repetition 

11 

12 

13 

23 

24 

Outline 

WhileCounter.html 



25 

26 

Outline 

WhileCounter.html 




• for repetition statement 

– Handles all the details of counter-controlled repetition 

– for structure header 

• The first line 


1 

2 

4 

5 

6 

7 

8 

9 

10 Counter-Controlled Repetition 

11 

12 

13 

22 

23 

24 

25 

Outline 

ForCounter.html 




for keyword 


Control variable name Final value of control variable 

for which the condition is true 

for ( var counter = 1; counter

var counter = 1 

Determine 

if final value 

of control 

variable 

has been 

reached. 

counter

Examples Using the for Statement 

• Summation with for 

• Compound interest calculation with for loop 

– Math object 

• Method pow 

• Method round 


1 

2 

4 

5 

6 

7 

8 

9 

10 Sum the Even Integers from 2 to 100 

11 

12 

13 

22 

23 

24 

25 

Sum.html 


Outline 



1 

2 

4 

5 

6 

7 

8 

9 

10 Calculating Compound Interest 

11 

12 

13

26 for ( var year = 1; year 

35 

36 

37 

38 

Outline 

Interest.html 




• Controlling expression 

• Case labels 

• Default case 


1 

2 

4 

5 

6 

7 

8 

9 

10 Switching between XHTML List Formats 

11 

12 

13

23 switch ( choice ) { 

24 case "1": 

25 startTag = ""; 

26 endTag = ""; 

27 listType = "Bullet List"; 

28 break; 

29 case "2": 


31 endTag = ""; 

32 listType = "Ordered List: Numbered"; 

33 break; 

34 case "3": 


36 endTag = ""; 

37 listType = "Ordered List: Lettered"; 

38 break; 

39 default: 

40 validInput = false; 

41 } 

42 

43 if ( validInput == true ) { 

44 document.writeln( listType + startTag ); 

45 

46 for ( var i = 1; i

48 

49 document.writeln( endTag ); 

50 } 

51 else 

52 document.writeln( "Invalid choice: " + choice ); 

53 // --> 

54 

55 

56 

57 


59 

60 

Outline 

SwitchTest.html 






true 

case a case a action(s) 

case b 

. 

. 

. 

false 

false 

false 

case b action(s) 

break 

break 

true 

case z case z action(s) break 

default action(s) 

true 


do…while Repetition Statement 

• Similar to the while statement 

• Tests the loop continuation condition after the 

loop body executes 

• Loop body always executes at least once 


1 

2 

4 

5 

6 

7 

8 

9 

10 Using the do...while Repetition Statement 

11 

12 

13 

24 

Outline 

DoWhileTest.html 



25 

26 

27 

Outline 

DoWhileTest.html 



do…while Repetition Structure 

action(s) 

condition 

false 

do…while repetition statement flowchart. 

true 


• break 

break and continue Statements 

– Immediate exit from the structure 

– Used to escape early from a loop 

– Skip the remainder of a switch statement 

• continue 

– Skips the remaining statements in the body of the structure 

– Proceeds with the next iteration of the loop 


1 

2 

4 

5 

6 

7 

8 

9 

10 

11 Using the break Statement in a for Structure 

12 

13 

14 

15


24 "Broke out of loop at count = " + count ); 

25 // --> 

26 

27 

28 

29 

Outline 

BreakTest.html 



1 

2 

4 

5 

6 

7 

8 

9 

10 

11 Using the continue Statement in a for Structure 

12 

13 

14 

15

24 document.writeln( "Used continue to skip printing 5" ); 

25 // --> 

26 

27 

28 

29 

Outline 

ContinueTest.html 



Labeled break and continue Statements 

• Labeled break statement 

– Break out of a nested set of structures 

– Immediate exit from that structure and enclosing repetition 

structures 

– Execution resumes with first statement after enclosing 

labeled statement 

• Labeled continue statement 

– Skips the remaining statements in structure’s body and 

enclosing repetition structures 

– Proceeds with next iteration of enclosing labeled repetition 

structure 

– Loop-continuation test evaluates immediately after the 

continue statement executes 


1 

2 

4 

5 

6 

7 

8 

9 

10 Using the break Statement with a Label 

11 

12 

13

26 

27 // the following line is skipped 

28 document.writeln( "This line should not print" ); 

29 } 

30 

31 document.writeln( "End of script" ); 

32 // --> 

33 

34 

35 

36 

Outline 

BreakLabelTest.html 



1 

2 

4 

5 

6 

7 

8 

9 

10 Using the continue Statement with a Label 

11 

12 

13

26 } 

27 // --> 

28 

29 

30 

31 

Outline 

ContinueLabelTest.html 



• More logical operators 

– Logical AND ( && ) 

– Logical OR ( || ) 

– Logical NOT ( ! ) 




expression1 expression2 expression1 && 

expression2 

false false false 

false true false 

true false false 

true true true 

Fig. 9.15 Truth table for the && (logical AND) 

operator. 



expression1 expression2 expression1 || 

expression2 

false false false 

false true true 

true false true 

true true true 

Fig. 9.16 Truth table for the || (logical OR) operator. 

expression !expression 

false true 

true false 

Fig. 9.17 Truth table for operator ! (logical negation). 


1 

2 

4 

5 

6 

7 

8 

9 

10 Demonstrating the Logical Operators 

11 

12 

13

26 "true && true: " + ( true && true ) + 

27 "" ); 

28 


30 "Logical OR (||)" + 

31 "false || false: " + ( false || false ) + 

32 "false || true: " + ( false || true ) + 

33 "true || false: " + ( true || false ) + 

34 "true || true: " + ( true || true ) + 

35 "" ); 

36 


38 "Logical NOT (!)" + 

39 "!false: " + ( !false ) + 

40 "!true: " + ( !true ) + "" ); 

41 

42 document.writeln( "" ); 

43 // --> 

44 

45 

46 

47 

Outline 

LogicalOperators.html 





Operator Associativity Type 

++ -- ! right to left unary 





&& left to right logical AND 

|| left to right logical OR 



Fig. 9.19 Precedence and associativity of the operators discussed 

so far. 



• Flowcharts 

– Reveal the structured nature of programs 

• Single-entry/single-exit control structures 

– Only one way to enter and one way to exit each control 

structure 

• Control structure stacking 

– The exit point of one control structure is connected to the 

entry point of the next control structure 



Rep etition 

while statement 

T 

F 

statement 

do…while 

T 

F 

statement 

for 

Single-entry/single-exit sequence, selection and repetition structures. (1 of 3) 

T 

F 


Se lection 


if statement 

if…else statement 

(single se lec tion) 

(d ouble se lec tion) 

T 

F T 

F 

switch statement 

(m ultiple selection) 

T 

break 

F 

break 

T 

F 

. 


break 

T 

F 


Sequence 


. 




Rules for Forming Structured Programs 

1) Begin with the “simplest flowchart” (Fig. 9.22). 

2) Any rectangle (action) can be replaced by two rectangles (actions) in sequence. 

3) Any rectangle (action) can be replaced by any control structure (sequence, if, if…else, 

switch, while, do…while or for). 

4) Rules 2 and 3 may be applied as often as you like and in any order. 

Fig. 9.21 Rules for forming structured programs. 



Simplest flowchart. 



Rule 2 Rule 2 Rule 2 

Repeatedly applying rule 2 to the simplest flowchart. 


. 

. 

.


Ru l e 3 

Rule 3 

Applying rule 3 to the simplest flowchart. 



Stacked building blocks Nested building blocks 

Stacked, nested and overlapped building blocks. 

Overlapping building blocks 

(Illegal in structured programs) 



Unstructured flowchart. 


Outline 

JavaScript: Functions 

Function Definitions 

Scope Rules 

JavaScript Global Functions 

Recursion 

Recursion vs. Iteration 


• In this, you will learn: 

Objectives 

– To understand how to construct programs modularly from 

small pieces called functions. 

– To be able to create new functions. 

– To understand the mechanisms used to pass information 

between functions. 

– To understand how the visibility of identifiers is limited to 

specific regions of programs. 


Functions 

• A piece of code that performs a specific task 

• Built in Function 

– alert() – Open a box containing the message 

– prompt() – display a prompt window with field for the user 

to enter a text string 

– toLowerCase() 



• Format of a function definition 

function function-name( parameter-list ) 

{ 

declarations and statements 

} 

– Function name any valid identifier 

– Parameter list names of variables that will receive arguments 

• Must have same number as function call 

• May be empty 

– Declarations and statements 

• Function body (“block” of code) 


 

 

function about(name, age) 

{ 

} 

about("abc",95); 

 

 

 

document.write(" All about You"); 

document.write("Your Name is" + name); 

document.write("You are" + age); 

. 

Outline 



• Finding the maximum of 3 numbers 

– Prompt for 3 inputs 

– Convert to numbers 

– Pass to maximum 

– Math.max 


1 

2 

4 

5 

6 

7 

8 

9 

10 Finding the Maximum of Three Values 

11 

12 

13

24 

25 var maxValue = maximum( value1, value2, value3 ); 

26 

27 document.writeln( "First number: " + value1 + 

28 "Second number: " + value2 + 

29 "Third number: " + value3 + 

30 "Maximum is: " + maxValue ); 

31 

32 // maximum method definition (called from line 25) 

33 function maximum( x, y, z ) 

34 { 

35 return Math.max( x, Math.max( y, z ) ); 

36 } 

37 // --> 

38 

39 

40 

41 


43 

44 

. 

Outline 

Call function maximum and pass it the value of 

variables value1, value2 and value3. Maximum.html 


Method max returns the larger of the two 

integers passed to it. 

Variables x, y and z get the value of variables 

value1, value2 and value3, respectively. 


Programmer-defined maximum function (1 of 2). 



Programmer-defined maximum function (2 of 2). 



• Scope 

Scope Rules 

– How a Variable can be accessed 

– Local & Global 

– Inside function is local or function scope 

• Identifiers exist only between opening and closing braces 

• Local variables hide global variables 


 

 

 

 

var a=32; 

var b=a; 

var c=setlocal(17); 

document.write("a is "+a); 

document.write("b is "+b); 

document.write("c is "+c); 

function setlocal(d) 

{ 

a=d; 

alert("bis inside" + b); 

return(a); 

} 

 

 

 

Example 


JavaScript Global Functions 

Global function Description 

parseFloat This function takes a string argument and attempts 

to convert the beginning of the string into a floatingpoint 

value. If the conversion is unsuccessful, the 

function returns NaN; otherwise, it returns the 

converted value (e.g., parseFloat( "abc123.45" ) 

returns NaN, and parseFloat( "123.45abc" ) 

returns the value 123.45). 

parseInt This function takes a string argument and attempts 

to convert the beginning of the string into an integer 

value. If the conversion is unsuccessful, the function 

returns NaN; otherwise, it returns the converted 

value (e.g., parseInt( "abc123" ) returns NaN, and 

parseInt( "123abc" ) returns the integer value 

123). This function takes an optional second 

argument, from 2 to 36, specifying the radix (or 

base) of the number. Base 2 indicates that the first 

argument string is in binary format, base 8 indicates 

that the first argument string is in octal format and 

base 16 indicates that the first argument string is in 

hexadecimal format. See see Appendex E, Number 

Systems, for more information on binary, octal and 

hexadecimal numbers. 

unescape This function takes a string as its argument and 

returns a string in which all characters previously 

encoded with escape are decoded. 

Fig. 10.9 JavaScript global functions. 


• Recursive functions 

– Call themselves 

Recursion 

• Recursion step or recursive call 

• Part of return statement 

– Must have base case 

• Simplest case of problem 

• Returns value rather than calling itself 

– Each recursive call simplifies input 

• When simplified to base case, functions return 


5! 

5 * 4! 

4 * 3! 

3 * 2! 

2 * 1! 

1 

Recursion 

Final value = 120 

5! 

5! = 5 * 24 = 120 is returned 

5 * 4! 

4! = 4 * 6 = 24 is returned 

4 * 3! 

3! = 3 * 2 = 6 is returned 

3 * 2! 

2! = 2 * 1 = 2 is returned 

2 * 1! 

1 returned 

1 

(a) Procession of recursive calls. (b) Values returned from each recursive call. 

Recursive evaluation of 5!. 


1 

2 

4 

5 

6 

7 

8 

9 

10 Recursive Factorial Function 

11 

12 

13 document.writeln( "Factorials of 1 to 10" ); 


15 "" ); 

16 

17 for ( var i = 0; i

23 // Recursive definition of function factorial 

24 function factorial( number ) 

25 { 

26 if ( number

Factorial calculation with a recursive function. 

Recursion 


Example 

 

 

 

Calculating Sphere Volumes 

 

function displayVolume() 

{ var radius = parseFloat( myForm.radiusField.value ); 

window.status = "Volume is " + sphereVolume( radius ); } 

function sphereVolume( r ) 

{ return ( 4.0 / 3.0 ) * Math.PI * Math.pow( r, 3 ); } 

 

 

 

Enter radius of sphere 

 

 


• Iteration 

Recursion vs. Iteration 

– Explicitly uses repetition structures to achieve result 

– Terminates when loop-continuation condition fails 

– Often faster than recursion 

• Recursion 

– Repeats through function calls 

– Terminates when base case reached 

– Slower due to function call overhead 

• Each call generates new copy of local variables 

– Easy to read and debug when modeling problem with 

naturally recursive solution 


Outline 

JavaScript: Arrays 

Arrays 

Declaring and Allocating Arrays 

Examples Using Arrays 

References and Reference Parameters 

Sorting Arrays 

Searching Arrays: Linear Search and Binary Search 

Multidimensional Arrays 


• In this, you will learn: 

Objectives 

– To introduce the array data structure. 

– To understand the use of arrays to store, sort and search lists 

and tables of values. 

– To understand how to declare an array, initialize an array 

and refer to individual elements of an array. 

– To be able to pass arrays to functions. 

– To be able to search and sort an array. 

– To be able to declare and manipulate multi-dimensional 

arrays. 


Arrays 

• Ordered set of data elements which can be accessed thru a 

single variable 

– Each element referenced by a number 

• Start at “zeroth element” 

• Subscript or index 

– Accessing a specific element 

• Name of array 

• Brackets 

• Number of element 

– Arrays hold mixed data types 

• Var data = [“mon”,34, 76.34,”wed”]; 


Name of array 

Position number (index 

or subscript) of the 

element within array c 

Arrays 

c[ 0 ] 

c[ 1 ] 

c[ 2 ] 

c[ 3 ] 

c[ 4 ] 

c[ 5 ] 

c[ 6 ] 

c[ 7 ] 

c[ 8 ] 

c[ 9 ] 

c[ 10 ] 

c[ 11 ] 

A 12-element array. 

-45 

6 

0 

72 

1543 

-89 

0 

62 

-3 

1 

6453 


78

Arrays 

Operators Associativity Type 

() [] . left to right highest 

++ -- ! right to left unary 





&& left to right logical AND 

|| left to right logical OR 



Fig. 11.2 Precedence and associativity of the operators discussed so far. 


Declaring and Allocating Arrays 

• Arrays in memory 

– Objects 

– Operator new 

• Allocates memory for objects 

• Dynamic memory allocation operator 

var c; 

c = new Array( 12 ); 


Examples Using Arrays 

• Possible to declare and initialize in one step 

– Specify list of values 

• Initializer list 

var n = [ 10, 20, 30, 40, 50 ]; 

var n = new Array( 10, 20, 30, 40, 50 ); 

– Also possible to only initialize some values 

• Leave uninitialized elements blank 

• Uninitialized elements default to “undefined” 

var n = [ 10, 20, , 40, 50 ]; 


 

 

 

Accessing Arrays 

 

var data = [“mon, “tue”, 34, 76.34]; 

var len = data.length; 

for(var i=0;i

References and Reference Parameters 

• Two ways to pass parameters 

– Pass-by-value 

• Pass copy of original value 

• Default for numbers and booleans 

• Original variable is unchanged 

– Pass-by-reference 

• How objects are passed, like arrays 

• Pass location in memory of value 

• Allows direct access to original value 

• Improves performance 


• Sorting 

– Important computing task 

Sorting Arrays 


SORTING 

 

 

Sorting an Array with Bubble Sort 

 

function start() 

{ var a = [ 10, 1, 9, 2, 8, 3, 7, 4, 6, 5 ]; 

document.writeln( "Sorting an Array" ); 

outputArray( "Data items in original order: ", a ); 

bubbleSort( a ); // sort the array 

outputArray( "Data items in ascending order: ", a ); 

} 


SORTING 

function outputArray( header, theArray ) 

{ document.writeln( "" + header + theArray.join( " " ) + "" ); 

} // sort the elements of an array with bubble sort 

function bubbleSort( theArray ) 

{ 

for ( var pass = 1; pass < theArray.length; ++pass ) for ( var i = 0; i < 

theArray.length - 1; ++i ) 

if ( theArray[ i ] > theArray[ i + 1 ] ) 

swap( theArray, i, i + 1 ); // swap elements 

} 


SORTING 

• // swap two elements of an array 

• function swap( theArray, first, second ) 

• { var hold; // temporary holding area for swap 

hold = theArray[ first ]; 

• theArray[ first ] = theArray[ second ]; 

• theArray[ second ] = hold; } 

• 

• 

• 

 


Searching Arrays: Linear Search and Binary 

Search 

• Searching 

– Look for matching key value 

• Linear search 

– Iterate through each element until match found 

– Inefficient 

• Worst case scenario, must test entire array 

• Binary search 

– Requires sorted data 

– Cuts search range in half each iteration 

– Efficient 

• Only look at small fraction of elements 


Linear Search 

 

Linear Search of an Array 

 

var a = new Array( 100 ); // create an Array // fill Array with 

even integer values from 0 to 198 

for ( var i = 0; i < a.length; ++i ) a[ i ] = 2 * i; 

// function called when "Search" button is pressed function 

buttonPressed() 

{ 

var searchKey = searchForm.inputVal.value; 


Linear Search 

var element = linearSearch( a, parseInt( searchKey ) ); 

if ( element != -1 ) 

searchForm.result.value = "Found value in element " + 

element; 

else 

searchForm.result.value = "Value not found"; } 

// Search "theArray" for the specified "key" value function 

linearSearch( theArray, key ) 

{ for ( var n = 0; n < theArray.length; ++n ) 

if ( theArray[ n ] == key ) return n; 

return -1; } 

 


SEARCHING 

 

 

Enter integer search key 

 

 

Result 

 


SEARCHING 


zMultidimensional Arrays 

• Two-dimensional arrays analogous to tables 

– Rows and columns 

• Specify row first, then column 

– Two subscripts 


Row 0 

Row 1 

Row 2 


Column 0 Column 1 Column 2 Column 3 

a[ 0 ][ 0 ] a[ 0 ][ 1 ] a[ 0 ][ 2 ] a[ 0 ][ 3 ] 

a[ 1 ][ 0 ] a[ 1 ][ 1 ] a[ 1 ][ 2 ] a[ 1 ][ 3 ] 

a[ 2 ][ 0 ] a[ 2 ][ 1 ] a[ 2 ][ 2 ] a[ 2 ][ 3 ] 

Column subscript (or index) 

Row subscript (or index) 

Array name 

Two-dimensional array with three rows and four columns. 



• Declaring and initializing multidimensional arrays 

– Group by row in square brackets 

– Treated as arrays of arrays 

– Creating array b with one row of two elements and a second 

row of three elements: 

var b = [ [ 1, 2 ], [ 3, 4, 5 ] ]; 



• Also possible to use new operator 

– Create array b with two rows, first with five columns and 

second with three: 

var b; 

b = new Array( 2 ); 

b[ 0 ] = new Array( 5 ); 

b[ 1 ] = new Array( 3 ); 


Outline 

JavaScript: Objects 

Introduction 

Thinking About Objects 

Math Object 

String Object 

Fundamentals of Characters and Strings 

Methods of the String Object 

Character-Processing Methods 

Searching Methods 

HTML Markup Methods 

Date Object 

document Object 

window Object 


Introduction 

• Use JavaScript to manipulate every element of 

HTML document from a script 

• Reference for several of JavaScript’s built-in 

objects 

• Demonstrates the capabilities 


• Objects 

– Attributes 

– Behaviors 

Thinking About Objects 

– Encapsulate date and methods 

– Property of information hiding 

– Details hidden within the objects themselves 


Math Object 

• Allow the programmer to perform many common 

mathematical calculations 

Method Description Example 

abs( x ) absolute value of x abs( 7.2 ) is 7.2 

abs( 0.0 ) is 0.0 

abs( -5.6 ) is 5.6 

ceil( x ) rounds x to the smallest ceil( 9.2 ) is 10.0 

integer not less than x ceil( -9.8 ) is -9.0 

cos( x ) trigonometric cosine of x cos( 0.0 ) is 1.0 

(x in radians) 

exp( x ) exponential method ex exp( 1.0 ) is 2.71828 

exp( 2.0 ) is 7.38906 

floor( x ) rounds x to the largest floor( 9.2 ) is 9.0 

integer not greater than x floor( -9.8 ) is -10.0 

log( x ) natural logarithm of x log( 2.718282 ) is 1.0 

(base e) 

log( 7.389056 ) is 2.0 

max( x, y ) larger value of x and y max( 2.3, 12.7 ) is 12.7 

max( -2.3, -12.7 ) is -2.3 


Math Object 

min( x, y ) smaller value of x min( 2.3, 12.7 ) is 2.3 

and y 

min( -2.3, -12.7 ) is -12.7 

pow( x, y ) x raised to power y pow( 2.0, 7.0 ) is 128.0 

(xy) 

pow( 9.0, .5 ) is 3.0 

round( x ) rounds x to the round( 9.75 ) is 10 

closest integer round( 9.25 ) is 9 

sin( x ) trigonometric sine of 

x (x in radians) 

sin( 0.0 ) is 0.0 

sqrt( x ) square root of x sqrt( 900.0 ) is 30.0 

sqrt( 9.0 ) is 3.0 

tan( x ) trigonometric tangent tan( 0.0 ) is 0.0 

of x 

(x in radians) 

Fig. 12.1 Math object methods. 


String Object 

• JavaScript’s string and character-processing 

capabilities 

• Appropriate for processing names, addresses, 

credit card information, etc. 


Fundamentals of Characters and Strings 

• Characters 

– Fundamental building blocks of JavaScript programs 

• String 

– Series of characters treated as a single unit 



Method Description 

charAt( index ) Returns a string containing the character at the specified index. If there is no 

character at the index, charAt returns an empty string. The first character is 

located at index 0. 

charCodeAt( index ) Returns the Unicode value of the character at the specified index. If there is 

no character at the index, charCodeAt returns NaN (Not a Number). 

concat( string ) Concatenates its argument to the end of the string that invokes the method. 

The string invoking this method is not modified; instead a new String is 

returned. This method is the same as adding two strings with the string 

concatenation operator + (e.g., s1.concat( s2 ) is the same as s1 + 

s2). 

fromCharCode( 

Converts a list of Unicode values into a string containing the corresponding 

value1, value2, ) 

indexOf( 

substring, index ) 

lastIndexOf( 

substring, index ) 

characters. 

String object methods. 

Searches for the first occurrence of substring starting from position index in 

the string that invokes the method. The method returns the starting index of 

substring in the source string or –1 if substring is not found. If the index 

argument is not provided, the method begins searching from index 0 in the 

source string. 

Searches for the last occurrence of substring starting from position index and 

searching toward the beginning of the string that invokes the method. The 

method returns the starting index of substring in the source string or –1 if 

substring is not found. If the index argument is not provided, the method 

begins searching from the end of the source string. 



slice( start, end ) Returns a string containing the portion of the string from index start 

through index end. If the end index is not specified, the method returns a 

string from the start index to the end of the source string. A negative end 

index specifies an offset from the end of the string starting from a 

position one past the end of the last character (so –1 indicates the last 

character position in the string). 

split( string ) Splits the source string into an array of strings (tokens) where its string 

argument specifies the delimiter (i.e., the characters that indicate the end 

substr( 

start, length ) 

of each token in the source string). 

Returns a string containing length characters starting from index start in 

the source string. If length is not specified, a string containing characters 

from start to the end of the source string is returned. 

substring( 

start, end ) 

Returns a string containing the characters from index start up to but not 

including index end in the source string. 

toLowerCase() Returns a string in which all uppercase letters are converted to lowercase 

letters. Non-letter characters are not changed. 

toUpperCase() Returns a string in which all lowercase letters are converted to uppercase 

letters. Non-letter characters are not changed. 

toString() Returns the same string as the source string. 

valueOf() Returns the same string as the source string. 

String object methods. 


• Split(string) – splits the string with delimiter 

var a = “wel come” 

var b = a.split(“ “) 

Solution: wel & come 

• Substring(start, end) 

Example: var a = “welcome” 

Var b = a.substring(0,2); wel 

Var c = a.substring(3,6); come 


• charAt 

Character Processing Methods 

– Returns the character at specific position 

• charCodeAt 

– Returns Unicode value of the character at specific position 

• fromCharCode 

– Returns string created from series of Unicode values 

• toLowerCase 

– Returns lowercase version of string 

• toUpperCase 

– Returns uppercase version of string 


1 

2 

4 

5 

6 

7 

8 

9 

10 Character Processing Methods 

11 

12 

13

26 document.writeln( "'" + s2 + "' in lowercase is '" + 

27 s2.toLowerCase() + "'" ); 

28 document.writeln( "'" + s2 + "' in uppercase is '" 

29 + s2.toUpperCase() + "'" ); 

30 // --> 

31 

32 

33 

34 

Outline 

CharacterProcessing. 

html 



HTML Markup Methods 

• Anchor 

– Anchor 

• Blink 

– blinking text 

• Fixed 

– monospaced text 

• Strike 

– strike out text 

• Subscript 

– subscript 

• Superscript 

– superscript 


1 

2 

4 

5 

6 

7 

8 

9 

10 XHTML Markup Methods of the String Object 

11 

12 

13


27 "This is text with a " + subText.sub() ); 


29 "This is text with a " + supText.sup() ); 


31 "" + linkText.link( "#top" ) ); 

32 // --> 

33 

34 

35 

36 

Outline 

MarkupMethods.html 



Date Object 

• Provides methods for date and time manipulations 


Returns a number from 1 to 31 representing the day of the month in local time or UTC, respectively. 

getDate() 

getUTCDate() 

getDay() 

getUTCDay() 

getFullYear() 

getUTCFullYear() 

getHours() 

getUTCHours() 

getMilliseconds() 

getUTCMilliSeconds() 

getMinutes() 

getUTCMinutes() 

getMonth() 

getUTCMonth() 

getSeconds() 

getUTCSeconds() 

getTime() 

getTimezoneOffset() 

setDate( val ) 

setUTCDate( val ) 

Fig. 12.8 Methods of the Date object. 

Returns a number from 0 (Sunday) to 6 (Saturday) representing the day of the week in local time or UTC, 

respectively. 

Returns the year as a four-digit number in local time or UTC, respectively. 

Returns a number from 0 to 23 representing hours since midnight in local time or UTC, respectively. 

Returns a number from 0 to 999 representing the number of milliseconds in local time or UTC, respectively. 

The time is stored in hours, minutes, seconds and milliseconds. 

Returns a number from 0 to 59 representing the minutes for the time in local time or UTC, respectively. 

Returns a number from 0 (January) to 11 (December) representing the month in local time or UTC, 

respectively. 

Returns a number from 0 to 59 representing the seconds for the time in local time or UTC, respectively. 

Returns the number of milliseconds between January 1, 1970 and the time in the Date object. 

Returns the difference in minutes between the current time on the local computer and UTC—previously 

known as Greenwich Mean Time (GMT). 

Sets the day of the month (1 to 31) in local time or UTC, respectively. 



setFullYear( y, m, d ) 

setUTCFullYear( y, m, d ) 

setHours( h, m, s, ms ) 

setUTCHours( h, m, s, ms ) 

setMilliSeconds( ms ) 

setUTCMilliseconds( ms ) 

setMinutes( m, s, ms ) 

setUTCMinutes( m, s, ms ) 

setMonth( m, d ) 

setUTCMonth( m, d ) 

setSeconds( s, ms ) 

setUTCSeconds( s, ms ) 


Date Object 

Sets the year in local time or UTC, respectively. The second and third 

arguments representing the month and the date are optional. If an optional 

argument is not specified, the current value in the Date object is used. 

Sets the hour in local time or UTC, respectively. The second, third and fourth 

arguments representing the minutes, seconds and milliseconds are optional. If 

an optional argument is not specified, the current value in the Date object is 

used. 

Sets the number of milliseconds in local time or UTC, respectively. 

Sets the minute in local time or UTC, respectively. The second and third 

arguments representing the seconds and milliseconds are optional. If an 

optional argument is not specified, the current value in the Date object is 

used. 

Sets the month in local time or UTC, respectively. The second argument 

representing the date is optional. If the optional argument is not specified, the 

current date value in the Date object is used. 

Sets the second in local time or UTC, respectively. The second argument 

representing the milliseconds is optional. If this argument is not specified, the 

current millisecond value in the Date object is used. 


Date Object 

Method Desc ription 

setTime( ms ) 

Sets the time based on its argument—the number of elapsed milliseconds 

since January 1, 1970. 

toLocaleString() 

toUTCString() 

toString() 

valueOf() 


Returns a string representation of the date and time in a form specific to the 

computer’s locale. For example, September 13, 2001 at 3:42:22 PM is 

represented as 09/13/01 15:47:22 in the United States and 13/09/01 

15:47:22 in Europe. 

Returns a string representation of the date and time in the form: 19 Sep 

2001 15:47:22 UTC 

Returns a string representation of the date and time in a form specific to the 

locale of the computer (Mon Sep 19 15:47:22 EDT 2001 in the United 

States). 

The time in number of milliseconds since midnight, January 1, 1970. 


1 

2 

4 

5 

6 

7 

8 

9 

10 Date and Time Methods 

11 

12 

13

25 document.writeln( "getDate: " + current.getDate() + 

26 "getDay: " + current.getDay() + 

27 "getMonth: " + current.getMonth() + 

28 "getFullYear: " + current.getFullYear() + 

29 "getTime: " + current.getTime() + 

30 "getHours: " + current.getHours() + 

31 "getMinutes: " + current.getMinutes() + 

32 "getSeconds: " + current.getSeconds() + 

33 "getMilliseconds: " + 

34 current.getMilliseconds() + 

35 "getTimezoneOffset: " + 

36 current.getTimezoneOffset() ); 

37 


39 "Specifying arguments for a new Date" ); 

40 var anotherDate = new Date( 2001, 2, 18, 1, 5, 0, 0 ); 

41 document.writeln( "Date: " + anotherDate ); 

42 


44 "Set methods for local time zone" ); 

45 anotherDate.setDate( 31 ); 

46 anotherDate.setMonth( 11 ); 

47 anotherDate.setFullYear( 2001 ); 

48 anotherDate.setHours( 23 ); 

49 anotherDate.setMinutes( 59 ); 

Outline 

DateTime.html 



50 anotherDate.setSeconds( 59 ); 

51 document.writeln( "Modified date: " + anotherDate ); 

52 // --> 

53 

54 

55 

56 

Outline 

DateTime.html 



document Object 

• Manipulate document that is currently visible in 

the browser window 

Method or Property Description 

write( string ) Writes the string to the XHTML document as 

XHTML code. 

writeln( string ) Writes the string to the XHTML document as 

XHTML code and adds a newline character at 

the end. 

document.cookie This property is a string containing the values 

of all the cookies stored on the user’s computer 

for the current document. See Section 12.9, 

Using Cookies. 

document.lastModified This property is the date and time that this 

document was last modified. 

Fig. 12.12 Important document object methods and properties. 


window Object 

• Provides methods for manipulating browser window 

Method or Property Description 

open( url, name, options ) Creates a new window with the URL of the window set to 

url, the name set to name, and the visible features set by 

the string passed in as option. 

prompt( prompt, default ) Displays a dialog box asking the user for input. The text 

of the dialog is prompt, and the default value is set to 

default. 

close() Closes the current window and deletes its object from 

memory. 

window.focus() This method gives focus to the window (i.e., puts the 

window in the foreground, on top of any other open 

browser windows). 

window.document This property contains the document object representing 

the document currently inside the window. 

window.closed This property contains a boolean value that is set to true if 

the window is closed, and false if it is not. 

window.opener This property contains the window object of the window 

that opened the current window, if such a window exists. 

Fig. 12.14 Important window object methods and properties. 






Dynamic HTML: Object Model and 

Outline 

Collections 

Introduction 

Object Referencing 

Collections all and children 

Dynamic Styles 

Dynamic Positioning 

Using the frames Collection 

navigator Object 

Summary of the DHTML Object Model 


Introduction 

• Dynamic HTML Object Model 

– Allows Web authors to control the presentation of their pages 

– Gives them access to all the elements on their pages 

• Web page 

– Elements, forms, frames, tables 

– Represented in an object hierarchy 

• Scripting 

– Retrieve and modify properties and attributes 



• The simplest way to reference an element is by using the 

element’s id attribute. 

• The element is represented as an object 

– HTML attributes become properties that can be manipulated by 

scripting 



 

 

Object Model 

 


{ 

alert(ptext.innerText); 

ptext.innerText = "Thanks for coming"; 

} 

 

 

Welcome to our web page 

 



• Collections 

Collections all and children 

– Arrays of related objects on a page 

– all 

• all the HTML elements in a document 

– children 

• Specific element contains that element’s child elements 


Dynamic Styles 

• Element’s style can be changed dynamically 

• Dynamic HTML Object Model also allows you to change 

the class attribute 


dynamicstyle.html 

 

Object Model 


{ var a = prompt( "Enter a color name for the " + 

"background of this page", "" ); 

document.body.style.backgroundColor = a; 

} 

 

Welcome to our 

Web site! 

 



dynamicstyle2 

Object Model 

 

.bigText { font-size: 3em; font-weight: bold } 

.smallText { font-size: .75em } 

 

 


{ var a = prompt( "Enter a className for the text " + 

"(bigText or smallText)", "" ); 

pText.className = a; } 

 


dynamicstyle2 

 

Welcome to our Web site! 

 



Dynamic Positioning 

• HTML elements can be positioned with scripting 

– Declare an element’s CSS position property to be either absolute 

or relative 

– Move the element by manipulating any of the top, left, right or 

bottom CSS properties 


1 

2 

4 

5 

6 

7 

8 

9 

10 Dynamic Positioning 

11 

12 

13

26 function run() 

27 { 

28 count += speed; 

29 

30 if ( ( count % 200 ) == 0 ) { 

31 speed *= -1; 

32 direction = !direction; 

33 

34 pText.style.color = 

35 ( speed < 0 ) ? "red" : "blue" ; 

36 firstLine = 

37 ( speed < 0 ) ? "Text shrinking" : "Text growing"; 

38 pText.style.fontFamily = 

39 fontStyle[ ++fontStylecount % 3 ]; 

40 } 

41 

42 pText.style.fontSize = count / 3; 

43 pText.style.left = count; 

44 pText.innerHTML = firstLine + " Font size: " + 

45 count + "px"; 

46 } 

47 // --> 

48 

49 

50 

Outline 

dynamicposition 

.html 



51 

52 

54 Welcome! 

55 

56 

Outline 

dynamicposition 

.html 




Using the frames Collection 

• Referencing elements and objects in different frames by 

using the frames collection 

 

 

Frames collection 

 

 

 

 


The frames collection 


{ var text = prompt( "What is your name?", "" ); 

parent.frames( "lower" ).document.write( "Hello, " + 

text + "" ); } 

 

Cross-frame 

scripting! 



navigator Object 

• Netscape, Mozilla, Microsoft’s Internet Explorer 

– Others as well 

• Contains information about the Web browser 

• Allows Web authors to determine what browser the user is 

using 


1 

2 

4 

5 

6 

7 

8 

9 

10 The navigator Object 

11 

12 

13

26 // --> 

27 

28 

29 

30 

31 Redirecting your browser to the appropriate page, 

32 please wait... 

33 

34 

Outline 

navigator.html 




Key 

window 

object 

collection 

document 

frames 

history 

navigator 

location 

event 

screen 

document 

document 

plugins 

Fig. 13.10 DHTML Object Model. 

all 

anchors 

applets 

body 

embeds 

filters 

forms 

images 

links 

plugins 

scripts 

styleSheets 



Object or collection Description 

Objects 

window Represents the browser window and provides access to the document object contained 

in the window. If the window contains frames a separate window object is created 

automatically for each frame, to provide access to the document rendered in the frame. 

Frames are considered to be subwindows in the browser. 

document Represents the XHTML document rendered in a window. The document object 

provides access to every element in the XHTML document and allows dynamic 

modification of the XHTML document. 

body Provides access to the body element of an XHTML document. 

history Keeps track of the sites visited by the browser user. The object provides a script 

programmer with the ability to move forward and backward through the visited sites, but 

for security reasons does not allow the actual site URLs to be manipulated. 

navigator Contains information about the Web browser, such as the name of the browser, the 

version of the browser, the operating system on which the browser is running and other 

information that can help a script writer customize the user’s browsing experience. 

location Contains the URL of the rendered document. When this object is set to a new URL, the 

browser immediately switches (navigates) to the new location. 

event Can be used in an event handler to obtain information about the event that occurred (e.g., 

the mouse x-y coordinates during a mouse event). 

screen Contains information about the computer screen for the computer on which the browser 

is running. Information such as the width and height of the screen in pixels can be used to 

determine the size at which elements should be rendered in a Web page. 

Fig. 13.11 Objects in the Internet Explorer 6 Object Model. 




Collections 

all Many objects have an all collection that provides access to every element contained in 

the object. For example, the body object’s all collection provides access to every 

element in the body element of an XHTML document. 

anchors Collection contains all the anchor elements (a) that have a name or id attribute. The 

elements appear in the collection in the order they were defined in the XHTML 

document. 

applets Contains all the applet elements in the XHTML document. Currently, the most 

common applet elements are Java applets. 

embeds Contains all the embed elements in the XHTML document. 

forms Contains all the form elements in the XHTML document. The elements appear in the 

collection in the order they were defined in the XHTML document. 

frames Contains window objects that represent each frame in the browser window. Each frame 

is treated as its own subwindow. 

images Contains all the img elements in the XHTML document. The elements appear in the 

collection in the order they were defined in the XHTML document. 

links Contains all the anchor elements (a) with an href property. This collection also 

contains all the area elements that represent links in an image map. 





plugins Like the embeds collection, this collection contains all the embed elements in the 

XHTML document. 

scripts Contains all the script elements in the XHTML document. 

styleSheets Contains styleSheet objects that represent each style element in the XHTML 

document and each style sheet included in the XHTML document via link. 



Dynamic HTML: Event Model 

Outline 

Introduction 

Event onclick 

Event onload 

Error Handling with onerror 

Tracking the Mouse with Event onmousemove 

Rollovers with onmouseover and onmouseout 

Form Processing with onfocus and onblur 

More Form Processing with onsubmit and onreset 

Event Bubbling 

More DHTML Events 


• Event model 

– Scripts can respond to user 

Introduction 

– Content becomes more dynamic 

– Interfaces become more intuitive 


• onClick 

Event onclick 

– Invoked when user clicks the mouse on a specific item 


Event onclick 

 

 

DHTML Event Model - ONCLICK 

 

 

 

alert( "Hi there" ); 

 

 

 

 

Click on this text! 

 

 

 

 


Outline 


Event onload 

• onload event 

– Fires when an element finishes loading 

– Used in the body element 

– Initiates a script after the page loads into the client 

 

 

 

function mymessage() 

{ 

alert("This message was triggered from the onload event"); 

} 

 

 

 

 

 


• onerror event 

Error Handling with onerror 

– Execute specialized error-handling code 


1 

2 

4 

5 

6 

7 

8 

9 

10 DHTML Event Model - onerror 

11 

12

26 // Writes to the status bar at the 

27 // bottom of the window. 

28 window.status = "Error: " + errType + " on line " + 

29 errLineNum; 

30 

31 // Returning a value of true cancels the 

32 // browser’s reaction. 

33 return true; 

34 } 

35 // --> 

36 

37 

38 

39 

40 

41 

43 

44 

45 

Outline 

onerror.html 



• onmousemove 

Tracking the Mouse with Event 

onmousemove 

– Fires repeatedly when the user moves the mouse over the 

Web page 

– Gives position of the mouse 


1 

2 

4 

5 

6 

7 

8 

9 

10 DHTML Event Model - onmousemove event 

11 

12 

19 

20 

21 

22 

24 

Outline 

onmousemove.html 



25 (0, 0) 

26 

28 

29 

30 

Outline 

onmousemove.html 



Rollovers with onmouseover and 

onmouseout 

• Events fired by mouse movements 

– onmouseover 

• Mouse cursor moves over element 

– Onmouseout 

• Mouse cursor leaves element 

– Onmousedown 

• Fires when a mouse button is pressed down 

– Onmouseup 

• Fires when a mouse button is released 


Rollovers with onmouseover and 

onmouseout 

 

 

 

Mouse over this text 

 

 


Onmousedown, Onmouseup 

 

 

function lighton() 

{ 

document.getElementById('myimage').src="bulbon.gif"; 

} 

function lightoff() 

{ 

document.getElementById('myimage').src="bulboff.gif"; 

} 

 

 

 

 

Click to turn on the light 

 

 


onmousemove 

 

 

 

var i=1; 

function moveright() 

{ 

document.getElementById('header').style.position="relative"; 

document.getElementById('header').style.left=i; 

i++; 

} 

 

 

 

Move the mouse over this page 

 

 


Form Processing with onfocus and 

onblur 

• onfocus event fires when element gains focus 

• onblur event fires when element loses focus 


Form Processing with onfocus 

 

 

 

function message() 

{ 

alert("This alert box was triggered by the onfocus event handler"); 

} 

 

 

 

 

Enter your name: 

 

 

 


Form Processing with onblur 

 

 

 


{ 

alert("This alert box was triggered by the onblur event handler"); 

} 

 

 

 

The onblur event occurs when an element loses focus. Try to click or write in 

the input field below, then click elsewhere in the document so the input field 

loses focus. 

 


 

 

 


More Form Processing with onsubmit and 

onreset 

• onsubmit and onreset are useful events for processing forms 

 

 

 

function confirmInput() 

{ 

fname=document.forms[0].fname.value; 

alert("Hello " + fname + "! You will now be redirected to www.rajalakshmi.org "); 

} 

 

 

 

 


 

 

 

 


Form Processing with onreset 

 

 

 


{ 

alert("This alert box was triggered by the onreset event handler"); 

} 

 

 

 

 


 

 

 

 

 


Event Bubbling 

• Crucial part of the event model 

• Process whereby events fired in child elements 

“bubble” up to their parent elements 


1 

2 

4 

5 

6 

7 

8 

9 

10 DHTML Event Model - Event Bubbling 

11 

12 

13

26 

27 document.onclick = documentClick; 

28 // --> 

29 

30 

31 

32 

33 

34 Click here! 

35 Click here, too! 

36 

37 

Outline 

bubbling.html 





• Remaining DHTML events and their descriptions 



Event Description 

Clipboard events 

onbeforecut Fires before a selection is cut to the clipboard. 

onbeforecopy Fires before a selection is copied to the clipboard. 

onbeforepaste Fires before a selection is pasted from the clipboard. 

oncopy Fires when a selection is copied to the clipboard. 

oncut Fires when a selection is cut to the clipboard. 

onabort Fires if image transfer has been interrupted by user. 

onpaste Fires when a selection is pasted from the clipboard. 

Data binding events 

onafterupdate Fires immediately after a databound object has been updated. 

onbeforeupdate Fires before a data source is updated. 

oncellchange Fires when a data source has changed. 

ondataavailable Fires when new data from a data source become available. 

ondatasetchanged Fires when content at a data source has changed. 

ondatasetcomplete Fires when transfer of data from the data source has 

completed. 

onerrorupdate Fires if an error occurs while updating a data field. 

onrowenter Fires when a new row of data from the data source is 

available. 

onrowexit Fires when a row of data from the data source has just 

finished. 

onrowsdelete Fires when a row of data from the data source is deleted. 

onrowsinserted Fires when a row of data from the data source is inserted. 

Fig. 14.10 Dynamic HTML events. 



Event 

Keyboard events 

Description 

onhelp Fires when the user initiates help (i.e., by pressing the F1 key). 

onkeydown Fires when the user pushes down a key. 

onkeypress Fires when the user presses a key. 

onkeyup 

Marquee events 

Fires when the user ends a key press. 

onbounce Fires when a scrolling marquee bounces back in the other 

direction. 

onfinish Fires when a marquee finishes its scrolling. 

onstart 

Mouse events 

Fires when a marquee begins a new loop. 

oncontextmenu Fires when the context menu is shown (right-click). 

ondblclick Fires when the mouse is double clicked. 

ondrag Fires during a mouse drag. 

ondragend Fires when a mouse drag ends. 

ondragenter Fires when something is dragged onto an area. 

ondragleave Fires when something is dragged out of an area. 

ondragover Fires when a drag is held over an area. 

ondragstart Fires when a mouse drag begins. 

ondrop Fires when a mouse button is released over a valid target 

during a drag. 

onmousedown Fires when a mouse button is pressed down. 




Event Description 

onmouseup Fires when a mouse button is released. 

Miscellaneous events 

onafterprint Fires immediately after the document prints. 

onbeforeeditfocus Fires before an element gains focus for editing. 

onbeforeprint Fires before a document is printed. 

onbeforeunload Fires before a document is unloaded (i.e., the window was closed or a link was 

clicked). 

onchange Fires when a new choice is made in a select element, or when a text input is 

changed and the element loses focus. 

onfilterchange Fires when a filter changes properties or finishes a transition (see Chapter 15, 

Dynamic HTML: Filters and Transitions). 

onlosecapture Fires when the releaseCapture method is invoked. 

onpropertychange Fires when the property of an object is changed. 

onreadystatechange Fires when the readyState property of an element 

changes. 

onreset Fires when a form resets (i.e., the user clicks a reset button). 

onresize Fires when the size of an object changes (i.e., the user resizes a window or frame). 

onscroll Fires when a window or frame is scrolled. 

onselect Fires when a text selection begins (applies to input or 

textarea). 

onselectstart Fires when the object is selected. 

onstop Fires when the user stops loading the object. 

onunload Fires when a page is about to unload. 



Dynamic HTML: Filters and Transitions 

Outline 

Introduction 

Flip Filters: flipv and fliph 

Transparency with the chroma Filter 

Creating Image masks 

Miscellaneous Image Filters: invert, gray and xray 

Adding shadows to Text 

Creating Gradients with alpha 

Making Text glow 

Creating Motion with blur 

Using the wave Filter 

Advanced Filters: dropShadow and light 

blendTrans Transition 

revealTrans Transition 


• Filters 

Introduction 

– Cause changes that are persistent 

• Transitions 

– Temporary 

– Allow transfer from one page to another with pleasant visual 

effect 

• For example, random dissolve 


Flip Filters: flipv and fliph 

• flipv and fliph filters mirror text or images 

vertically and horizontally, respectively 


 

Example 

The flip filter 

 

 

 

 

Text 

Text 

 

 

 

Text 

Text 

 

 

 

 


fliph filter applied 

Both fliph and flipv 

filters applied 

No filters applied 

flipv filter applied 


Transparency with the chroma Filter 

• chroma filter applies transparency effects 

dynamically 

– Without using a graphics editor to hard-code transparency 

into the image 

• onchange 

– Fires when the value of a form changes 


Creating Image masks 

• Background is a solid color 

• Foreground is transparent to the image or color 

behind it 


 

 

Mask Filter 

 

 

Mask Filter 

Example 

 

 

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTt 

 

 

 

 

 


Outline 


Image Filters: invert, gray and xray 

• invert filter 

– Negative image effect 

• Dark areas become light and light areas become dark 

• gray filter 

– Grayscale image effect 

• All color is stripped from the image, only brightness data 

remains 

• xray filter 

– X-ray effect 

• Inversion of the grayscale effect 


Example 

 

 

Misc. Image filters 

 

 

 

Normal 

Grayscale 

Xray 

Invert 

 

 

 

 

 

 

 

 

 

 



• shadow filter 

– Showing effect 

• Three-dimensional appearance 

 

 

 

h2 

{ 

width:100%; 

} 

 

 

 

Adding shadows to Text 

Glow 

Blur 

Flip H 

Flip V 

Shadow 

Drop Shadow 

Wave 

 

 


lendTrans Transition 

• Example of the blendTrans transition 

– Creates a smooth fade-in/fade-out effect 



• The blendTrans() filter fades an element out or 

in. It can be applied only through scripting. 

• Three steps are required. 

1. First, a duration value is established giving the 

number of seconds for the transition to take 

place. The general format is shown below. 

• object.style.filter="blendTrans(duration=secon 

ds)" 



2. the filter's apply() method is run, followed by the 

setting of the element's visibility ("visible" when 

fading in and "hidden" when fading out). 

• object.filters.blendTrans.apply() 

object.style.visibility="visible|hidden" 

3. Finally, the filter's play() method is run to 

perform the blend. 

• object.filters.blendTrans.play() 


 

 

function Blend() 

{ 

if (document.getElementById("Macaws").style.visibility == "visible") { 

document.getElementById("Macaws").style.filter="blendTrans(duration=3)"; 

document.getElementById("Macaws").filters.blendTrans.apply(); 

document.getElementById("Macaws").style.visibility="hidden"; 

document.getElementById("Macaws").filters.blendTrans.play(); 

document.getElementById("Lion").style.filter="blendTrans(duration=3)"; 

document.getElementById("Lion").filters.blendTrans.apply(); 

document.getElementById("Lion").style.visibility="visible"; 

document.getElementById("Lion").filters.blendTrans.play(); 

} else { 

document.getElementById("Lion").style.filter="blendTrans(duration=3)"; 

document.getElementById("Lion").filters.blendTrans.apply(); 

document.getElementById("Lion").style.visibility="hidden"; 

document.getElementById("Lion").filters.blendTrans.play(); 

document.getElementById("Macaws").style.filter="blendTrans(duration=3)"; 

document.getElementById("Macaws").filters.blendTrans.apply(); 

document.getElementById("Macaws").style.visibility="visible"; 

document.getElementById("Macaws").filters.blendTrans.play(); 

} 

} 

Outline 

 

 

 

 

 


• revealTrans filter 

revealTrans Transition 

– Create professional-style transitions 

– From box out to random dissolve 


Filters: revealTrans() 

• First, duration and transition values are 

established giving the number of seconds for the 

transition to take place and the type of transition to 

apply. 

• object.style.filter="revealTrans(duration=second 

s, transition=n)" 


• 0 - Box in 

1 - Box out 

2 - Circle in 

3 - Circle out 

4 - Wipe up 

5 - Wipe down 

6 - Wipe right 

7 - Wipe left 

8 - Vertical blinds 

9 - Horizontal blinds 

10 - Checkerboard across 

11 - Checkerboard down 

12 - Random dissolve 

13 - Split vertical in 

14 - Split vertical out 

15 - Split horizontal in 

16 - Split horizontal out 

17 - Strips left down 

18 - Strips left up 

19 - Strips right down 

20 - Strips right up 

21 - Random bars horizontal 

22 - Random bars vertical 

23 - Any Random 

Transition types 



• Second, the filter's apply() method is run, 

followed by the setting of the element's visibility 

("visible" when fading in and "hidden" when 

fading out). 

• object.filters.revealTrans.apply() 

object.style.visibility="visible|hidden" 



• Finally, the filter's play() method is run to perform 

the blend. 

• object.filters.revealTrans.play() 



function Blend() 

{ if (document.getElementById("Macaws").style.visibility == "visible") { 

document.getElementById("Macaws").style.filter="revealTrans(duration=2, 

transition=8)"; 

document.getElementById("Macaws").filters.revealTrans.apply(); 

document.getElementById("Macaws").style.visibility="hidden"; 

document.getElementById("Macaws").filters.revealTrans.play(); 

document.getElementById("Lion").style.filter="revealTrans(duration=2, transition=8)"; 

document.getElementById("Lion").filters.revealTrans.apply(); 

document.getElementById("Lion").style.visibility="visible"; 

document.getElementById("Lion").filters.revealTrans.play(); } else { 

document.getElementById("Lion").style.filter="revealTrans(duration=2, transition=8)"; 

document.getElementById("Lion").filters.revealTrans.apply(); 

document.getElementById("Lion").style.visibility="hidden"; 

document.getElementById("Lion").filters.revealTrans.play(); 

document.getElementById("Macaws").style.filter="revealTrans(duration=2, 

transition=8)"; 

document.getElementById("Macaws").filters.revealTrans.apply(); 

document.getElementById("Macaws").style.visibility="visible"; 

document.getElementById("Macaws").filters.revealTrans.play(); } } 

 


Dynamic HTML: Data Binding with 

Outline 

Tabular Data Control 

Introduction 

Simple Data Binding 

Moving within a Recordset 

Binding to an img 

Binding to a table 

Sorting table Data 

Data Binding Elements 


• Data binding 

Introduction 

– Data no longer reside exclusively on the server 

– Data can be maintained on the client 

– Eliminate server activity and network delays 

• Data Source Objects (DSOs) 

– Tabular Data Control (TDC) 


• Data file 

– Header row 

Simple Data Binding 

• Specifies the names of the columns below 

– Text qualifiers ( @ ) 

• Enclose data in each field 

– Field delimiter ( | ) 

• Separate each field 

– Recordset 

– Eg: @ColorName@|@ColorHexRGBValue@ 

@green@|@#008000@ 


Simple data binding and recordset manipulation 

 

 

Intro to Data Binding 

 

 

 

 

 

 

 

 

 


recordSet = Colors.recordset; 

function reNumber() 

{ 

if( !recordSet.EOF ) 

recordNumber.innerText = recordSet.absolutePosition; 

else 

recordNumber.innerText = " "; 

} 

function forward() 

{ 

if( !recordSet.EOF ) 

recordSet.MoveNext(); 

else 

recordSet.MoveFirst(); 

colorSample.style.backgroundColor = colorRGB.innerText; 

reNumber(); 

} 

 


HTML Color Table 

Click to move forward in the recordset. 

Color Name: 

 

Color RGB Value: 

 

 

Currently viewing record number 

 

 

Color Sample 

 

 

 


75 

76 

Outline 

introdatabind.html 



Binding to an img 

• Many different types of HTML elements can be 

bound to data sources 

– Binding to an img element 

• Changing the recordset updates the src attribute of the image 


1 image 

2 numbers/0.gif 










images.txt 


Outline 


Binding data to an image 

 

Binding to a IMG 

 

 

 

 


function move( whereTo ) 

{ 

switch( whereTo ) { 

• 

case "first": 


break; 

case "previous": 

if( recordSet.BOF ) 

recordSet.MoveLast(); 

else 

recordSet.MovePrevious(); 

break; 

case "next": 

} 

} 

if( recordSet.EOF ) 


else 

recordSet.MoveNext(); 

break; 

case "last": 

recordSet.MoveLast(); 

break; 

 

 



Binding to a table 

• Binding data to a table is perhaps the most 

important of data binding 

– Different from the data binding we’ve seen 


Using Data Binding with tables 

 

Data Binding and Tables 

 

 

 

 

 

 

 


Binding Data to a TABLE 

 

 

 

Color Name 

Color RGB Value 

 

 

 

 

 

 

 

 

 

 

 



Sorting table Data 

• Manipulate a large data source 

– Need to sort data 

• Can be accomplished by the Sort property of the TDC 


Sorting TABLE data 

 

Data Binding and Tables 

 

 

 

 

 

 

 


Sorting Data 

 

 

Sort by: 

 

Color Name (Ascending) 

Color Name (Descending) 

 

 

 

 

Color Name 


 

 

 

 

 

 

 

 

 

 

 


Sorting Data 

 

 

Sort by: 

 

Color Name 

(Ascending) 

Color Name 

(Descending) 

 

 

 

 

Color Name 


 

 

 

 

 

 

 

 

 

 

 




• Exactly how a data source is displayed by the 

browser depends on the HTML element to which 

the data is bound 

– Different elements may use the data for different purposes. 



Element Bindable Property/Attribute 

a href 

div Contained text 

frame href 

iframe href 

img src 

input type = "button" value (button text) 

input type = "checkbox" checked (use a boolean value in the data) 

input type = "hidden" value 

input type = "password" value 

input type = "radio" checked (use a boolean value in the data) 

input type = "text" value 

marquee Contained text 

param value 

select Selected option 

span Contained text 

table Cell elements (see Section 16.6) 

textarea Contained text (value) 

Fig. 16.10 XHTML elements that allow data binding. 






Multimedia: Audio, Video, Speech 

Outline 

Synthesis and Recognition 

Introduction 

Audio and Video 

Adding Background Sounds with the bgsound Element 

Adding Video with the img Element’s dynsrc Property 

Adding Audio or Video with the embed Element 

Using the Windows Media Player ActiveX Control 

RealOne Player Plug-in 

Synchronized Multimedia Integration Language (SMIL) 


• Multimedia 

Introduction 

– Use of sound, images, graphics and video 

– Add sound, video, and animated characters to Web-based 

applications 

– Streaming technologies 


Audio and Video 

• Can be embedded in Web page 

• Can be downloaded “on-demand” 

• Encoding algorithm or codec 

– Transforms raw audio or video into a format that Web 

browsers can display 


Adding Background Sounds with the 

bgsound Element 

• bgsound element 

– src property 

• Specifies the URL of audio clip to be played 

– loop property 

• Specifies number of times audio clip will play 

– balance property 

• Specifies balance between left and right speakers 

– volume property 

• Determines volume of audio clip 


Back ground Audio 

 

The BGSOUND Element 

Background Music via the BGSOUND Element 

Jazz Gospel 

This sound is from the free sound downloads at the 

 

Microsoft Developer Network downloads site. 

 

Use the fields below to change the number of iterations 

and the volume for the audio clip 

Press Stop to stop playing the sound. 

Press Refresh to begin playing the sound again. 

 

Loop [-1 = loop forever] 

 

Volume [-10000 (low) to 0 (high)] 

 

 

 

 

 


. 

Outline 


Adding Video with the img Element’s 

dynsrc Property 

• img element 

– Incorporates both images and videos 

– src property 

• Indicates source is image 

– dynsrc property 

• Indicates source is video clip 

– start property 

• Specifies when video should start playing 

• Event fileopen 

– Video should play as soon as it loads 

• Event mouseover 

– Video should play when user position mouse over video 


DynamicIMG 

 

 

An Embedded Image Using the DYNSRC Property 

 

 

 

An Embedded Video Using the IMG Element's DYNSRC 

Property 

Spinning Globe and New Age Music 

This video is from the 

 

NASA Multimedia Gallery 

This sound is from the free sound downloads at the 

 

Microsoft Developer Network downloads site. 

 


 

 

This page will play the audio clip and video in a 

loop.The video will not begin playing until you move 

the mouse over the video.Press Stop to stop 

playing the sound and the video. 

 

 


Adding Audio or Video with the embed 

Element 

• Element embed 

– Embeds media clip into Web page 

– Displays a graphical user interface (GUI) 

– Supported by both Microsoft Internet Explorer and Netscape 

 


• Element embed 

RealOne Player Plug-in 

– Embed RealOne Player plug-ins for video and audio 

– Attribute type 

• Specifies MIME type of embedded file 

– Attributes width and height 

• Specify dimensions of space the control occupies 

– Attribute autostart 

• Determines whether media start playing when page loads 

– Attribute controls 

• Specifies which controls users can access 

– Attribute src 

• Set to location of streaming media 


Synchronized Multimedia Integration 

Language (SMIL) 

• Coordinate wide range of multimedia elements 

• XML-based description language 

• Organize text, audio, video to occur 

simultaneously or sequentially 

• Provide time reference for all instances of text and 

media 

• Specifies source and presentation of multimedia 



e-Business & e-Commerce 

Outline 

Introduction 

e-Business Models 

Storefront Model 

Shopping-Cart Technology 

Auction Model 

Portal Model 

Name-Your-Price Model 

Comparison-Pricing Model 

Bartering Model 

Building an e-Business 

e-Marketing 

Branding 

Marketing Research 

e-Mail Marketing 



Promotions 

Consumer Tracking 

Electronic Advertising 

Search Engines 

Affiliate Programs 

Public Relations 

Customer Relationship Management (CRM) 

Online Payments 

Credit-Card Payment 

Digital Cash and e-Wallets 

Micropayments 

Smart Cards 



Security 

Public-Key Cryptography 

Cryptanalysis 

Key Agreement Protocols 

Key Management 

Secure Sockets Layer (SSL) 

WTLS 

IPSec and Virtual Private Networks (VPN) 

Security Attacks 

Network Security 

Legal Issues 

Privacy 

Defamation 

Sexually Explicit Speech 

SPAM 

Copyright and Patents 



XML and e-Commerce 

Introduction to Wireless Technology and m-Business 

m-Business 

Identifying User Location 

E911 Act 

Location-Identification Technologies 

Wireless Marketing, Advertising and Promotions 

Wireless Payment Options 

Privacy and the Wireless Internet 

Web Resources 


Introduction 

• Successful online businesses 

– Recognize need or demand 

– Meet that need 

– Must constantly readjust to shifting trends and technologies 

– Personalization 

• Tradeoff between convenience and privacy concerns 

• E-commerce vs. e-business 

– E-commerce 

• Aspects of doing business online that relate to exchanges with 

customers, partners and vendors. 

• Forexample, suppliers interact with manufacturers, customers interact 

with sales representatives 

– E-business 

• All aspects of e-commerce, plus internal operations of doing business 

e-business not included under the category of e-commerce 

• For example, production, development, corporate infrastructure and 

product management are aspects of e-business not included under the 

category of e-commerce 


• e-business 

e-Business Models 

– Expansion of old technologies and techniques 

• Electronic Funds Transfers 

– Requires new business models and categories 

– Pioneered by early e-businesses 

• Amazon.com, eBay, Yahoo among others 


Storefront Model 

• Simulates the experience of shopping in a store 

– Very common 

– Provides services similar to real “brick and mortar” store 

• Transaction processing 

• Security 

• On-line Payment 

• Information storage 

– Products organized into catalogs that users can browse and 

search 


Shopping-Cart Technology 

• Shopping-cart metaphor 

– Holds items a user has selected to buy 

– Merchant server contains database of available items 

– User puts all desired items in the cart 

– When finished, user “checks out” 

• Prices totaled 

• Shipping, tax and other charges applied 

• Shipping and payment details gathered 

• Order confirmed 

• Ex: www.amazon.com 


• Online auctions 

Auction Model 

– Buyers bid on items made available by various sellers 

• No fixed price 

– Very attractive to customers 

• Often able to get lower prices on goods than traditional stores 

– Site is searchable to allow easy location of desired items 

– Site receives a commission on each sale 

– Model also employed in business-to-business transactions 

– www.eBay.com is the leading auction site 


Auction Model 

eBay home page. 


Auction Model 


Portal Model 

• Portal sites - offer visitors the chance to find almost 

anything they are looking for in one place. 

• Combine many services into one page 

• News 

• Sports 

• Weather 

• Web searches 

– Horizontal portals 


• Aggregate information on broad range of topics 

– Vertical portals 

• Information on narrow range of topics 

– Convenient, centralized access to information 


Name-Your-Price Model 

• Empowers customers by allowing them to state the 

price they are willing to pay for products and services. 

• User submits price they are willing to pay 

– Site then passes it along to partner sites, who evaluate the offer 

– If accepted, user must pay that price 

– If rejected, user may submit a new price 

– Many such sites employ intelligent agents 

• Search, arrange, analyze large amounts of data 


Comparison-Pricing Model 

• Poll merchants for lowest price on an item 

– Often generate revenue through partnerships with other sites 

– Convenient way to search multiple merchants 

– Not always the true best price 

• Non-partner merchants might have better offers, but be 

unlisted 

– Can employ search-engine technology to automatically seek 

out best prices or related products 


Bartering Model 

• The offering of one item in exchange for another 

• Trade items rather than currency 

– Similar to auction sites 

– Merchant and customer haggle to a fair price 

– In practice, transaction is usually a combination of currency 

and items 


• Multiple approaches 

Building an e-Business 

– Turnkey solutions (a prepackaged e-business) 

• Ready-made e-Business sites [store.yahoo.com] 

– e-Business templates 

• Outline business’ structure 

• Design details left open to owner 

– Outsource control entirely to a specialized firm 

• Expensive 

• Little hassle, lets experts control it while you control your 

business 

– Build original, custom solution 

• Allows maximum control, makes your site unique 

• Most expensive, involves “reinventing the wheel” 


• Marketing campaign 

e-Marketing 

– Marketing your site through multiple means 

• Market research 

• Advertising 

• Promotions 

• Branding 

• Public Relations (PR) 



• Brand 

Branding 

– Name, logo or symbol that defines company’s products or 

services 

• Unique 

• Recognizable 

• Easy to remember 

– Brand equity 

• “Value” of the brand 

• Customer perception and loyalty 

– Companies with existing brand may more easily establish 

their brand on the Internet 

• New companies must work to establish trust in their brand 


• Marketing research 

– Marketing mix 

Marketing Research 

• Product or service details 

• Pricing 

• Promotion 

• Distribution 

– Focus groups 

– Interviews 

– Surveys and questionnaires 

– Secondary research 

• Reviewing pre-existing data 


• e-Mail marketing 


– Part of the reach of the campaign 

• Span of people who marketing should target 

– Direct mail vs. indirect mail 

• Direct mail is personalized to the individual recipient 

• Direct is often more effective 

• Offers right product at right time 

• Tailor mailing to customer’s interests 

– Opt-in e-Mail lists 

• Customer chooses to subscribe 

• Send newsletters with information on offers and promotions 


• e-Mail marketing, cont. 


– Dangers of e-Mail marketing 

• Do not flood customers with too much e-Mail in too short a 

time 

• Do not send unsolicited e-Mail 

– Spam 

– Gives company a poor reputation, illegal in some areas 



– Attract visitors 

– Encourage purchasing 

– Increase brand loyalty 

Promotions 

– Should not be only reason people purchase from your 

company 

• Sign of weak product or brand 

– Be sure cost of promotion is not so great that no profit is 

ever seen 


• Consumer tracking 

– Keep user profiles 

– Record visits 


– Analyze results of advertising and promotion 

– Helps define target market 

• Group toward whom it is most profitable to target marketing 

resources 

– Log files contain many useful details 

• IP address 

• Time and frequency of visits 



• Consumer tracking, cont. 

– Cookies 

• Text file stored on customer’s computer 

• Can contain record of user’s actions, preferences, buying 

habits 


• Advertising 


– Establish and strengthen branding 

– Publish URL in all advertising 

• Internet advertising becoming important 

– Links and banners on sites viewed often by target market 

• Can be interactive or animated 

– Allow advertising on your site in return for payment 

– Pop-up ads 

• Appear in a separate window when page loads 

• Often extremely irritating to customers 

• Actually decrease interest in advertised product due to negative 

association with pop-up ad 



• Search engine advertising 

– Pay for better placement of your site in search results 

– Sites that receive more clicks on their advertisements move 

higher in rankings 




– Scan websites for desired content 

– Being highly ranked in search results important 

• People tend not to browse results too deeply 

– Some sites base your ranking on meta tags 

• Hidden XHTML tags that contain information about site 

• Keywords, title, summary 

– Others simply “spider” the site 

• Program reads content and decides what is important 


• Search engines, cont. 


– Google a leading search engine 

• Uses complex formulas to rank pages 

• Number of sites linked to you, and their ranking 

• Number of clicks on your site 

• Relevance to keyword user is searching for 


• Affiliate programs 

Affiliate Programs 

– Company pays other sites to be affiliates 

• Advertise the company’s products 

• When their ad leads to purchases from the company, affiliate 

site receives a commission 

– Increases exposure and number of site visits 

– Amazon.com has large, successful affiliate program 


• Public relations 

Public Relations 

– Provide customers with latest information 

• Products and services 

• Sales 


– Press releases 

– Presentations and speeches 

– e-Mail 

– Crisis management 

• Issue statements regarding company problems 

• Minimize damage to company, brand and reputation 


Customer Relationship Management 

• Customer Relationship Management (CRM) 

– Provision and maintenance of quality service 

– Communicate with customers 

– Deliver responses to customers’ wants and needs 

– Customer satisfaction key to successful business 

• Much easier, less expensive to retain customers than attract 

new customers 

– Challenging for online businesses 

• Transactions not conducted in person 

• Requires innovative new techniques 

– eCRM, iCRM 

• Refer to CRM conduced via Internet, interchangeable terms 


Customer Relationship Management 

• Aspects of CRM 

– Call handling 

• Management of calls between customers and service 

representatives 

– Sales tracking 

– Transaction support 

• Support for people and technology involved in keeping 

transactions running smoothly 

– Personalization of customer experience 


Online Payments 

• Electronic Funds Transfer 

– Basis for online payments 

– Multiple ways of conducting EFT’s and presenting them to 

the customer 

– Many companies offer EFT solutions 


Credit-Card Payment 

• Online credit-card payment 

– Popular and common 

• Many people have and are familiar with credit cards 

– Some customers have security and privacy concerns 

– Require merchant account at bank 

• Special card-not-present (CNP) account for online transactions 


• Digital cash 

Digital Cash and e-Wallets 

– Stored electronically 

– Analogous to traditional bank account 

• Customers deposit money 

– Overcomes drawbacks of credit cards 

• e-Wallets 

• Digital cash accounts often allow deposits in form of checks or 

bank transfers 

• Allows merchants to accept customers without credit cards 

– Store billing and shipping information 

– Fill out forms at compatible sites in one click 


• Micropayments 

Micropayments 

– Merchants often charged fee for credit card transactions 

• For small items, fee can exceed cost of item 

– Micropayments allow merchants to avoid this problem 

• Add together all small transactions and pay percentage of that 

– Similar to concept of phone bill 

• Pay one large sum monthly rather than tiny sum per each use 


• Smart cards 

– Memory cards 

Smart Cards 

• Only allow for storage of information 

– Microprocessor cards 

• Like tiny computers 

• Can do processing in addition to storing data 

– Contact interface 

• Card inserted into reading device for use 

– Contactless interface 

• Data transmitted via wireless device inside card 

– Data and money protected by personal identification number 

(PIN) 


Security 

• Security is an increasingly important concern 

– Highly confidential data being transmitted all the time 

• Credit cards, social security numbers, business data 

– Attackers attempt to steal, corrupt or otherwise compromise 

this data 

– Requirements for successful secure transaction: 

• Privacy 

• Integrity 

• Authentication 

• Authorization 

• Non-repudiation 

– Also concerned with availability of site 


• Cryptography 


– Transforms data using cipher or cryptostream 

– Key acts as password that combined with cipher will decrypt 

encoded message into original message 

– Early cryptography relied on symmetric cryptography 

• Same key used to encrypt and decrypt 

• Problem of how to securely transmit key itself arose 

– Solution was public-key cryptography 

• Two related but different keys used 

• Sender uses receiver’s public key to encode 

• Receiver decodes with private key 

• Keys long enough that guessing or cracking them takes so 

much time it is not worth the effort 



Encrypting and decrypting a message using public-key cryptography. 


• Digital signatures 


– Same concept as physical written signatures 

• Authenticate signer 

• Difficult to forge 

– Part of public-key cryptography 

– Generated by running phrase through hash function 

• Returns hash value 

– Hash value for a phrase is over 99% guaranteed unique 

• ie., two different phrases very unlikely to generate same value 



Authentication with a public-key algorithm. 



• Public Key Infrastructure 

– Digital certificates 

• Digital documents issued by certification authority 

• Name of individual/group 

• Public key 

• Serial number 

• Expiration date 

• Signature of trusted authority 

– Certificate repositories 

• Hold database of public digital certificates 



• PKI implementations 

– More secure than standard point-of-sale (POS) transactions 

• Strong encryption can take decades to crack using current 

technology 

– RSA encryption popular choice for PKI 

• Developed at MIT in 1977 

– Pretty Good Privacy (PGP) 

• Implementation of PKI 

• Very popular way to encrypt e-mail 

• Operates using web of trust 


Cryptanalysis 

• Searching for weaknesses in encryption 

– Try to find ways to decrypt ciphertext without having key 

– Not just done by malicious attackers 

• Researchers want to find and fix flaws before attackers find 

and exploit them 

• Cryptanalytic attacks 

– Common attack searches for relationship between ciphertext 

and key 

– Easier when all or part of decoded message known in 

advance 

• Goal not to determine original message, but to discover key 

• Allows attacker to forge messages from that sender 


• Preventative measures 

– Key expiration dates 

Cryptanalysis 

• If attacker breaks or steals key, only useful for limited time 

– Exchange secret keys securely with public-key cryptography 


Key-Agreement Protocols 

• Public-key encryption not perfect solution 

– Requires significant computing power 

– Best used to exchange secret keys once, then use those keys 

for rest of transaction 

• Key-agreement protocol 

– Protocol is set of rules for communication 

– Digital envelope most common 

• Encrypt message using secret key 

• Encrypt secret key with public-key encryption 

• Both encrypted portions sent to receiver 

• Receiver decrypts secret key using private key 

• Receiver then uses decrypted secret key to decrypt message 


Key-Agreement Protocols 

Creating a digital envelope. 


Key Management 

• Protecting private keys vital to security 

– Key generates possible source of vulnerability 

• Susceptible to brute-force cracking 

• If keys always chosen from small subset of all possible keys, 

much easier to crack 

• Algorithm must generate random keys from large set of 

possible keys 

– Key should be very long 

– Common standard is 128 bits 

• 2 to the 128 power 



• SSL facilitates secure online communications 

– Developed by Netscape 

– Built into most browsers and servers 

• Standard Internet communication process 

– Data sent and received through sockets 

• Software mechanism that sends, receives and interprets 

network data 

– Transmission Control Protocol/Internet Protocol (TCP/IP) 

• Standard protocol for Internet communication 

• Controls how data is transferred and interpreted over networks 

– Messages broken down into packets 

• Add ordering, routing and error-correction information 



• Standard Internet communication process, cont. 

– Packet’s destination is an IP address 

• Unique number that identifies computer on network 

– TCP puts received packets in order and checks for errors 

• Can request retransmission if errors discovered 

– Only basic error checking exists 

• Attackers can forge data with relative ease 

• More secure methods necessary to increase integrity 


• SSL 


– Layer on top of TCP/IP 

– Implements public-key encryption using RSA algorithm 

– Generates secret key referred to as session key 

• Rest of transaction encrypted using this key 

– Messages still sent through TCP/IP after encryption step 

– Generally used for point-to-point connections 

• One computer communicating with another directly 

– Transport Layer Security (TLS) another similar technology 


• SSL, cont. 


– SSL does not protect data stored on server 

• Only data that is currently traveling across network 

– Stored data should be encrypted by another means 

– Always take standard precautions against cracker attacks 

• Making SSL more efficient 

– Encryption taxing on server resources 

– Dedicated SSL encoding/decoding hardware exists 

• Peripheral component interface (PCI) cards 

• Offload these tasks from CPU 


WTLS 

• Wireless Transport Layer Security 

– Security layer for Wireless Application Protocol (WAP) 

• WAP used for wireless communication on cell phones and 

other devices 

– Provides authentication, integrity, privacy and denial-of- 

service protection 

– Encrypts data sent between WAP device and WAP gateway 

• Where wireless network connects to wired network 

– Data translated from WTLS to SSL at gateway 

• For an instant, data is unencrypted 

• WAP gap 

• No successful WAP gap attack ever reported 



• Types of networks 

– Local Area Network (LAN) 

• Connects physically close computers 

– Wide Area Network (WAN) 

• Connect computers in multiple locations 

• Employ private phone lines, radio waves or other techniques 

– Virtual Private Network (VPN) 

• Leverage Internet to simulate LAN for multiple remote 

networks and wireless users 

• Secure tunnel over Internet 

• Data protected by encryption 



• Internet Protocol Security (IPSec) 

– Developed by Internet Engineering Task Force (IETF) 

– Uses public-key and symmetric-key cryptography 

– Protects against data manipulation and IP-spoofing 

– Conceptually similar to SSL 

• Secures entire network rather than point-to-point transaction 

– Often employs RSA or Diffie-Hellman encryption for key 

exchange 

– DES or 3DES used for secret key 

• IPSec packets 

– Three components 



• IPSec packets, cont. 

– Authentication header (AH) 

• Verifies identity of sender and integrity of data 

– Encapsulating security payload (ESP) 

• Encrypts packet to prevent reading while in transit 

– Internet Key Exchange (IKE) 

• Authenticates encryption keys 

• VPN shortcomings 

– Time consuming and complicated to initially set up 

– Must be careful who is given access 

• VPN users essentially the same as LAN users 

• Potentially have access to sensitive data 



• Security of greater concern than ever before 

– Great variety of attacks to defend against 

– Denial of Service (DoS) and Distributed DOS (DDoS) 

• Flood server or network with data packets 

• Prevents any legitimate traffic from passing through 

• DDoS occurs when attacker gains control of multiple machines 

• Uses them all to coordinate massive attack 

– Viruses 

• Malicious programs 

• Attach to or overwrite legitimate programs 

• Vary in severity from minor irritations to complete destruction 

of hard drive data 



• Security of greater concern than ever before, cont. 

– Worms 

• Similar to viruses 

• Able to reproduce and spread over networks 

• Generate extreme amount of traffic, slowing networks 

• CodeRed and ILOVEYOU two infamous worms 

• Attackers commonly called hackers or crackers 

– Traditionally, terms not interchangeable 

• Hacker is a skilled programmer and computer user 

• Cracker maliciously attacks computers for personal gain 

• In practice, hacker has become blanket term for computer 

criminals 



• Protecting against attacks 

– Software exists to mitigate effects of these attacks 

– Anti-Virus software 

• Detects and deletes viruses and worms before they execute 


• Network security 


– Allow authorized users access they need 

– Prevent unauthorized users from accessing and damaging 

network 

– Firewall a vital tool for network security 

• Protects LANs from unauthorized traffic 

• Placed between external Internet connection and computers on 

local network 

• Blocks or allows traffic based on rules set by administrator 

• Administrator must balance users’ needs for functionality 

against need for network security 


• Network security, cont. 


– Intrusion detection systems (IDS) 

• Detect that an attacker has penetrated the firewall 

• Monitor network traffic and log files 

• If intrusion detected, immediately closes that connection and 

alerts administrator through various means 


Legal Issues 

• Internet poses new challenges to lawmakers 

– File-sharing could redefine copyright laws 

– Marketing techniques clash with users’ desire for privacy 

– Cyberspace requires rethinking many traditional legal ideas 


Privacy 

• U.S. Constitution has no explicit right to privacy 

– Regardless, privacy is vital concern to many people 

– Many sites track activity and personal information 

• Provides personalization and sometimes better service 

• Balanced against desire for marketers to not follow one’s every 

move or steal valuable information 

– Affects company employees as well as customers 

• Companies install key loggers or keystroke cops 

• Monitor what employees do on their system 

• Right of company to ensure employees doing their jobs versus 

employee desire for privacy and free-speech 

– Idea of right to privacy still being created in courts 


• Defamation 

Defamation 

– Consists of slander and libel 

• Slander is spoken 

• Libel is written or spoken in a broader context than slander 

• Proving defamation 

– Plaintiff must: 

• Show that statement was written, spoken or broadcast 

• Reasonably identify individual responsible 

• Show that the statement is indeed defamatory 

• Show that the statement was intended to cause harm and 

known to be false 

• Show evidence of injury or actual loss 


Sexually Explicit Speech 

• Pornography is protected by First Amendment 

– Obscenity is not 

– Miller test has been deciding factor between the two 

• Obscenity “appeals to the prurient interest” 

• Lacks serious literary, artistic, political or scientific value 

– In cyberspace, community standards are different 

• “Communities” not defined by physical location 

• Issues of jurisdiction are unclear 

– Problem of what standard to hold Internet to 

• Broadcast laws restrict content rather than audience 

• Print laws use non-content-related means 

• Restrict audience rather than content 

• Either is possible on the Internet 


• E-mail marketing 

– Can be useful or harmful 

Spam 

– Unsolicited mass-mailings, or Spam, strongly frowned on 

• Many Internet users received hundreds per day 

• Content often at best irrelevant and at worst highly offensive 

• Possible for children to receive pornography, for example 

– Legislation being created to deal with Spam epidemic 

– Software to combat spam also exists 

– Spammers constantly evolve to circumvent new measures 

– One of the toughest usability and privacy issues with 

Internet today 


• Copyright 

Copyrights and Patents 

– Protection given to author of original piece 

• Protects an expression of idea, not idea itself 

– Incentive to create by guaranteeing credit for work 

• Life of author plus 70 years 

– Digital technology has made copyright gray area 

• Fair use vs. piracy 

• Copies can be perfect, not cheap imitations 

– Movies and MP3-encoded music files hottest area of debate 

• File-sharing programs lets users download copyrighted works 

freely 

• Costs distributors and artists money 

• Users want to sample music, enjoy lower prices 


• Patents 

Copyrights and Patents 

– Grant creator sole rights to a discovery 

– Designed to foster invention and innovation 

• Guarantees new idea cannot be stolen from inventor 

– Possible to patent method of doing business 

• Must be non-obvious to person skilled in relevant field 

– Also contentious area 

• Some feel patents stifle rather than foster innovation 

• 20-year duration may be too long in fast-paced software world 

• Some companies file patents solely to profit from infringement 

lawsuits later on 


XML and e-Commerce 

• Extensible Markup Language (XML) 

– One parent of HTML 

– Allows users to create customized tags to mark up data 

• Share data in standard, easily-used format worldwide 

• Portable between multiple applications and platforms 

– Some industries have standard XML formats already 

• MathML 

• CML 

• XMI 

• OSD 

– Facilitates Electronic Data Interchange (EDI) 


Introduction to Wireless Technology and m- 

Business 

• Wireless technology 

– One of technology’s fastest growing sectors 

– Brings communications and Internet everywhere 

– Wireless devices support increasing number of features 

– Convergence beginning to occur 

• Features of several distinct products combined into one 

• PDAs merging with cell phones 


• Mobile business 

m-Business 

– E-business enabled by wireless technology 

– Relatively new, but rapidly growing 

– Access critical business information anytime, anywhere 

• Employees can conduct their duties more easily 

• Customers can interact with online businesses in new ways and 

locations 


Identifying User Location 

• Location-identification technologies 

– Determine users’ physical location to within yards 

– Useful in wireless marketing 

• Send promotion data when user is near relevant location 

– Great benefits to emergency services 

• Quickly and accurately locate victims 

– Made possible by relationships between wireless providers, 

networks and users 

– Multipath errors can cause problems 

• Signals reflecting off nearby objects 


• Enhanced 911 Act 

E911 Act 

– Standardize 911 service across mobile devices 

– Improve response time to calls made from cell phones 

– First phase requires cellular providers to disclose phone 

number of caller as well as location of nearest cell site 

– Second phase requires disclosure of location of caller to 

within 125 meters 

– Several benefits 

• Callers often do not know their exact location 

• If call breaks up, emergency responders can still send help 



• Methods of locating the user 

– Triangulation 

• Analyze angle of signals from at least two fixed points 

– Information presented as geocode 

• Latitude and longitude 

– Different methods have varying degrees of accuracy 



Technology Degree of Accuracy 

Cell of Origin (COO) Least accurate. User could be anywhere in tower’s range. 

Meets only Phase I of E911 Act. 

Angle of Arrival (AOA) Fairly accurate. User is within the overlap of two towers’ 

cell sites. Used primarily in rural areas where there are 

Time Difference of Arrival 

(TDOA) 

Enhanced Observed Time 

Difference (E-OTD) 

fewer towers. Complies with Phase II of E911. 

Accurate. User’s location is determined by triangulating 

from three locations. Complies with Phase II of E911. Most 

effective when towers are close together. 

Accurate. User’s location is determined by triangulating 

from three locations. Complies with Phase II of E911. 

Location Pattern Matching Accurate. User’s location is determined by analyzing 

multipath interference in a given area, making the method 

Global Positioning Systems 

(GPS) 

Fig. 38.6 Location-identification technologies. 

more effective for locating a device in an urban area. 

Highly accurate. Satellites determine a user’s location 

anywhere on earth. However, GPS is not as effective when 

the user is indoors. 


Wireless Marketing, Advertising and 

Promotions 

• Wireless Marketing 

– Wireless technology provides unique opportunities 

– Augments, rather than replaces, traditional marketing 

• Push and pull strategies 

– Pull 

– Push 

• Users request data to be sent in real-time 

• Company delivers messages at time it deems appropriate 

– Using either one, advertising should be opt-in 

• User must have explicitly requested the service 

• Otherwise it is essentially spam, creates ill-will toward the 

company 



Promotions 

• Effective wireless marketing 

– Must deliver right content at right time 

– Perfect match for location-identification technology 

– Advertisers much more likely to place and pay more for ads 

that are well-targeted and likely to generate response 

– Several challenges and obstacles 

• Security 

• Ensuring ads display properly on diverse devices 

• Additional middle-men 

• Selecting suitable publisher and transmission technology 



Promotions 

• Short Message Service 

– Deliver simple text-only messages 

– Interactivity is limited 

– Nearly no load time 

– Work well for quick, simple alerts 


Wireless Payment Options 

• Wireless payments (m-payments) 

– Must be secure and reliable, like standard online payments 

– Mobile Virtual Network Operators (MVNOs) 

• Purchase bandwidth and re-brand with added services 

• Option for banks to make micropayments profitable 

– M-wallets 

• Users store billing and shipping information 

• Recall with one click 

• Promote convenience 



• Privacy problems magnified on wireless devices 

– Transmissions can be intercepted 

– Users located accurately 

– Accepted standard is opt-in policy 

• Users request to be sent information 

• Consumer should always expect the information they receive 

• No unauthorized information sharing with partners 

– Sometimes double opt-in 

• User requests information, then has to confirm decision 

– Opt-out frowned upon 

• Send users information unless they say to stop 


• CITA 


– Cellular Telecommunications and Internet Association 

– Group that has created guidelines for consumer privacy 

– Outlined four guidelines 

• Alert consumers when location being identified 

• Always use opt-in marketing 

• Consumers able to access their own information 

• Same protections offered by all devices and carriers 


Outline 

Web Servers 

Introduction 

HTTP Request Types 

System Architecture 

Client-Side Scripting versus Server-Side Scripting 

Accessing Web Servers 

Microsoft Internet Information Services (IIS) 

Microsoft Internet Information Services (IIS) 5.0 

Microsoft Internet Information Services (IIS) 6.0 

Apache Web Server 


• Web server 

Introduction 

– Responds to client requests by providing resources 

• URI (Uniform Resource Identifier) 

• Web server and client communicate with 

platform-independent Hypertext Transfer Protocol 

(HTTP) 


Introduction 

IIS 5.0 IIS 6.0 Apache Web server 

Company Microsoft Microsoft 

Apache Software 

Corporation Corporation Foundation 

Version 5.0 6.0 2.0.47 

Released 2/17/00 3/28/03 7/10/03 

Platforms Windows 2000, Windows Server 2003 Windows NT/2000/XP, 

Windows XP 

Mac OS X, Linux and 

other UNIX-based 

platforms, 

experimentally supports 

Windows 95/98 

Brief The most popular The newest release of Currently the most 

description Web server for 

Windows 2000. 

IIS from Microsoft. popular Web server. 

Price Included with Included with Freeware. 

Windows 2000 

and Windows 

XP. 

Windows Server 2003 

Fig. 21.1 Web servers discussed in this chapter. 


• Request methods 

– get 

– post 


– Retrieve and send client form data to Web server 

– Post data to a server-side form handler 



• Multi-tier application (n-tier application) 

– Information tier (data or bottom tier) 

• Maintains data for the application 

• Stores data in a relational database management system 

(RDBMS) 

– Middle tier 

• Implements business logic and presentation logic 

• Control interactions between application clients and 

application data 

– Client tier (top tier) 

• Application’s user interface 

• Users interact directly with the application through the client 

tier 


Client-Side Scripting Vs Server-Side Scripting 

• Client-side scripts 

– Validate user input 

• Reduce requests needed to be passed to server 

• Access browser 

• Enhance Web pages with DHTML, ActiveX controls, and 

applets 

• Server-side scripts 

– Executed on server 

– Generate custom response for clients 

– Wide range of programmatic capabilities 

– Access to server-side software that extends server 

functionality 


Accessing Web Servers 

• Request documents from Web servers 

– Host names 

– Local Web servers 

• Access through machine name or localhost 

– Remote Web servers 

• Access through machine name 

– Domain name or Internet Protocol (IP) address 

• Domain name server (DNS) 

– Computer that maintains a database of host names and 

their corresponding IP address 


Microsoft Internet Information Services 

(IIS) 

• An enterprise-level Web server that is included 

with Windows 



5.0 

• FTP Site 

– Used for transferring large files across the Internet 

• HTTP Site 

– Used most frequently to request documents from Web 

servers 

• SMTP Virtual Server 

– Sends and receives electronic mail 

• Web Site Content Directory 

– Directory containing the documents that clients will view 



5.0 

Internet Information Services window of Internet Services Manager. 



5.0 

Virtual Directory Creation Wizard welcome dialog. 



5.0 

Virtual Directory Alias dialog of the Virtual Directory Creation Wizard. 



5.0 

Web Site Content Directory dialog of the Virtual Directory Creation Wizard. 



5.0 

Access Permissions dialog of the Virtual Directory Creation Wizard. 



6.0 

Internet Information (IIS) Services Manager window. 



6.0 

Virtual Directory Creation Wizard welcome dialog. 



6.0 

Virtual Directory Alias dialog of the Virtual Directory Creation Wizard. 



6.0 

Web Site Content Directory dialog of the Virtual Directory Creation Wizard. 



6.0 

Access Permissions dialog of the Virtual Directory Creation Wizard. 



• Currently the most popular Web server 

• Stability 

• Efficiency 

• Portability 

• Open-source 



Apache Web server starting. (Courtesy of The Apache Software Foundation.) 


Requesting Documents 

• Request HTML documents from IIS 6.0 or 

Apache 

– Launch Internet Explorer 

– Enter HTML document’s location in Address field 


HTML 

Requesting test.html from IIS 5. 

Requesting test.html from IIS 6 or Apache. 


Web Resources 

• www.microsoft.com/msdownload/ntoptionpack/askwiz.asp 

• www.w3.org/Protocols 

• www.apache.org 

• httpd.apache.org 

• httpd.apache.org/docs-2.0 

• www.apacheweek.com 

• linuxtoday.com/stories/18780.html 

• www.iisanswers.com 

• www.iisadministrator.com 


Outline 

CSS Vs SSS 

Introduction 



Client-Side Scripting versus Server-Side Scripting 



Introduction 

– Responds to client requests by providing resources 

• URI (Uniform Resource Identifier) 

• Web server and client communicate with 

platform-independent Hypertext Transfer Protocol 

(HTTP) 


• Request methods 

– get 

– post 


– Retrieve and send client form data to Web server 

– Post data to a server-side form handler 


URI, URL, URN 

• URL - Uniform Resource Locator 

used to identify an Internet resource, and can be 

specified in a single line of text. 

• URN - Uniform Resource Name 

used to identify an Internet resource, without the 

use of a scheme, and can be specified in a single 

line of text. 

• URI - Uniform Resource Identifier (URI) 

used by a browser to identify a single document, 

and it too can be specified in a single line of text. 


Examples 

• URL http://www.abc.org/iis/review1.htm 

• URN www.abc.org/iis/review1.htm#one 

• URI http://www.abc.org/iis/review1.htm.html#one 



• Multi-tier application (n-tier application) 

– Information tier (data or bottom tier) 

• Maintains data for the application 

• Stores data in a relational database management system 

(RDBMS) 

– Middle tier 

• Implements business logic and presentation logic 

• Control interactions between application clients and 

application data 

– Client tier (top tier) 

• Application’s user interface 

• Users interact directly with the application through the client 

tier 


Client-Side Scripting versus Server-Side 

Scripting 

• Client-side scripts 

– Validate user input 

• Reduce requests needed to be passed to server 

• Access browser 

• Enhance Web pages with DHTML, ActiveX controls, and 

applets 

• Server-side scripts 

– Executed on server 

– Generate custom response for clients 

– Wide range of programmatic capabilities 

– Access to server-side software that extends server 

functionality 


Client-side scripts 

Types 

• VBScript , JavaScript and Ajax 

(Asynchronous JavaScript and XML ) 

Server-side scripts 

• ASP, JSP, PHP (Hypertext Preprocessor- 

OSS), Cold fusion etc 


Comparison 

JavaScript VBScript 

• Scripting language Scripting language 

• Object-based Not object-based 

• Supports functions Supports functions 

• Secure Secure 

• C/C++ based Subset of Visual Basic 

• Supported by all browsers Presently supported by 

only Internet Explorer 

• Easy to learn Based on BASIC 



• FTP Site 

– Used for transferring large files across the Internet 

• HTTP Site 

– Used most frequently to request documents from Web 

servers 

• SMTP Virtual Server 

– Sends and receives electronic mail 

• Web Site Content Directory 

– Directory containing the documents that clients will view 






Outline 

Database: SQL 

Introduction 

Relational Database Model 

Relational Database Overview: Books.mdb Database 

SQL (Structured Query Language) 

Basic SELECT Query 

WHERE Clause 

ORDER BY Clause 

Merging Data from Multiple Tables: INNER JOIN 

Joining Data from Tables Authors, AuthorISBN, 

Titles and Publishers 

INSERT Statement 

UPDATE Statement 

DELETE Statement 


• Database 

– Integrated collection of data 

Introduction 

– Database management system (DBMS) 

• Store and organize data consistent with database’s format 

• Relational database 

– SQL (Structured Query Language) 

• Queries 

• Manipulate data 


• Composed of tables 

• Row 

– Number column 

– Primary key 


• Reference data in the table 

• A column or set of columns in table contains unique data 


Row 


number name department salary location 

23603 Jones 413 1100 New Jersey 

24568 Kerwin 413 2000 New Jersey 

34589 Larson 642 1800 Los Angeles 

35761 Myers 611 1400 Orlando 

47132 Neumann 413 9000 New Jersey 

78321 Stephens 611 8500 Orlando 

Primary key 

Column 

Fig. 22.1 Relational database structure of an Employee table. 



department location 

413 New Jersey 

611 Orlando 

642 Los Angeles 

Fig. 22.2 Table formed by selecting department and location data from the Employee table. 


Relational Database Overview: Books.mdb 

Database 

• Primary key uniquely identifies each row 

– Rule of Entity Integrity 

• Composite primary key 

• Lines connecting tables 

– Relationships 

• One-to-many relationship 

• Foreign key 

– Join multiple tables 

– Rule of Referential Integrity 



Database 

Field Description 

authorID Author’s ID number in the database. In the Books.mdb 

database, this Integer column is defined as autoincrement. 

For each new row inserted in this table, the 

database increments the authorID value, ensuring that 

each row has a unique authorID. This column represents 

the table’s primary key. 

firstName Author’s first name (a String). 

lastName Author’s last name (a String). 

Fig. 22.3 Authors table from Books.mdb. 



Database 

authorID firstName lastName 

1 Harvey Deitel 

2 Paul Deitel 

3 Tem Nieto 

4 Kate Steinbuhler 

5 Sean Santry 

6 Ted Lin 

7 Praveen Sadhu 

8 David McPhie 

9 Cheryl Yaeger 

10 Marina Zlatkina 

11 Ben Wiedermann 

12 Jonathan Liperi 

Fig. 22.4 Data from the Authors table of 

Books.mdb. 



Database 


publisherID The publisher’s ID number in the database. This 

auto-incremented Integer is the table’s primary 

key. 

publisherName The name of the publisher (a String). 

Fig. 22.5 Publishers table from Books.mdb. 

publisherID publisherName 

1 Prentice Hall 

2 Prentice Hall PTG 

Fig. 22.6 Data from the Publishers table of Books.mdb. 


authorID The author’s ID number, which allows the database 

to associate each book with a specific author. The 

integer ID number in this column must also appear 

in the Authors table. 

isbn The ISBN number for a book (a String). 

Fig. 22.7 AuthorISBN table from Books.mdb. 



Database 

authorID isbn authorID isbn 

1 0130895725 2 0139163050 

1 0132261197 2 013028419x 

1 0130895717 2 0130161438 

1 0135289106 2 0130856118 

1 0139163050 2 0130125075 

1 013028419x 2 0138993947 

1 0130161438 2 0130852473 

1 0130856118 2 0130829277 

1 0130125075 2 0134569555 

1 0138993947 2 0130829293 

1 0130852473 2 0130284173 

1 0130829277 2 0130284181 

1 0134569555 2 0130895601 

1 0130829293 3 013028419x 

1 0130284173 3 0130161438 

1 0130284181 3 0130856118 

1 0130895601 3 0134569555 

2 0130895725 3 0130829293 

2 0132261197 3 0130284173 

2 0130895717 3 0130284181 

2 0135289106 4 0130895601 

Fig. 22.8 Data from AuthorISBN table in Books.mdb. 



Database 


isbn ISBN number of the book (a String). 

title Title of the book (a String). 

editionNumber Edition number of the book (a String). 

copyright Copyright year of the book (an Integer). 

description Description of the book (a String). 

publisherID Publisher’s ID number (an Integer). This value 

must correspond to an ID number in the 

Publishers table. 

imageFile Name of the file containing the book’s cover image 

(a String). 

price Suggested retail price of the book (a real number). 

[Note: The prices shown in this database are for 

example purposes only.] 

Fig. 22.9 Titles table from Books.mdb. 



Database 

isbn title edition- 

Number 

publisherID copyright 

price 

0130923613 Python How to Program 1 1 2002 $69.95 

0130622214 C# How to Program 1 1 2002 $69.95 

0130341517 Java How to Program 4 1 2002 $69.95 

0130649341 The Complete Java Training 4 

Course 

2 2002 $109.95 

0130895601 Advanced Java 2 Platform 

How to Program 

1 1 2002 $69.95 

0130308978 Internet and World Wide 

Web How to Program 

2 1 2002 $69.95 

0130293636 Visual Basic .NET How to 

Program 

2 1 2002 $69.95 

0130895636 The Complete C++ Training 3 

Course 

2 2001 $109.95 

0130895512 The Complete e-Business & 1 

e-Commerce Programming 

Training Course 

2 2001 $109.95 

Fig. 22.10 Portion of the data from the Titles table of Books.mdb. 



Database 

Fig. 22.11 Table relationships in Books.mdb. 


SQL (Structured Query Language) 

SQL keyword Description 

SELECT Selects (retrieves) columns from one or more tables. 

FROM Specifies tables from which to get columns or delete 

rows. Required in every SELECT and DELETE 

statement. 

WHERE Specifies criteria that determine the rows to be 

retrieved. 

INNER JOIN Joins rows from multiple tables to produce a single 

set of rows. 

GROUP BY Specifies criteria for grouping rows. 

ORDER BY Specifies criteria for ordering rows. 

INSERT Inserts data into a specified table. 

UPDATE Updates data in a specified table. 

DELETE Deletes data from a specified table. 

CREATE Creates a new table. 

DROP Deletes an existing table. 

COUNT Returns the number of records that satisfy given 

search criteria. 

Fig. 22.12 SQL keywords. 



• SELECT * FROM tableName 

– SELECT * FROM Authors 

– SELECT authorID, lastName FROM Authors 



authorID lastName authorID lastName 

1 Deitel 7 Sadhu 

2 Deitel 8 McPhie 

3 Nieto 9 Yaeger 

4 Steinbuhler 10 Zlatkina 

5 Santry 11 Wiedermann 

6 Lin 12 Liperi 

Fig. 22.13 authorID and lastName from the Authors table. 


WHERE Clause 

• Specify selection criteria for query 

– SELECT columnName1, columnName2, … FROM tableName 

WHERE criteria 

• SELECT title, editionNumber, copyright FROM 

Titles WHERE copyright > 1999 

– LIKE 

• Pattern matching 

– Asterisk ( * ) 

• SELECT authorID, firstName, lastName 

FROM Authors WHERE lastName LIKE ‘D*’ 

– Question mark ( ? ) 

• SELECT authorID, firstName, lastName 

FROM Authors WHERE lastName LIKE ‘?I*’ 


WHERE Clause 

Title editionNumber copyright 

Internet and World Wide Web How to 

Program 

2 2002 

Java How to Program 4 2002 

The Complete Java Training Course 4 2002 

The Complete e-Business & e-Commerce 

Programming Training Course 

1 2001 

The Complete Internet & World Wide Web 


2 2001 

The Complete Perl Training Course 1 2001 

The Complete XML Programming Training 

Course 

1 2001 

C How to Program 3 2001 

C++ How to Program 3 2001 

The Complete C++ Training Course 3 2001 

e-Business and e-Commerce How to Program 1 2001 

Internet and World Wide Web How to 

Program 

1 2000 

The Complete Internet and World Wide Web 


1 2000 


WHERE Clause 

Java How to Program (Java 2) 3 2000 

The Complete Java 2 Training Course 3 2000 

XML How to Program 1 2001 

Perl How to Program 1 2001 

Advanced Java 2 Platform How to 

Program 

1 2002 

e-Business and e-Commerce for Managers 1 2000 

Wireless Internet and Mobile Business 1 2001 


C# How To Program 1 2002 

Python How to Program 1 2002 

Visual Basic .NET How to Program 2 2002 

Fig. 22.14 Titles with copyrights after 1999 from table Titles. 


WHERE Clause 



2 Paul Deitel 

Fig. 22.15 Authors from the Authors table whose last names start with D. 


3 Tem Nieto 

6 Ted Lin 



Fig. 22.16 Authors from table Authors whose last names contain i as their 

second letter. 



• Arranged in ascending or descending order 

– SELECT columnName1, columnName2, … FROM 

tableName ORDER BY column ASC 

• SELECT authorID, firstName, lastName FROM 

Authors ORDER BY lastName ASC 

– SELECT columnName1, columnName2, … FROM 

tableName ORDER BY column DESC 

• SELECT authorID, firstName, lastName FROM 

Authors ORDER BY lastName DESC 




2 Paul Deitel 


6 Ted Lin 



3 Tem Nieto 


5 Sean Santry 





Fig. 22.17 Authors from table Authors in ascending order by 

lastName. 








5 Sean Santry 


3 Tem Nieto 



6 Ted Lin 

2 Paul Deitel 


Fig. 22.18 Authors from table Authors in descending order by 

lastName. 





2 Paul Deitel 

6 Ted Lin 



3 Tem Nieto 


5 Sean Santry 





Fig. 22.19 Authors from table Authors in ascending order by 

lastName and by firstName. 



isbn title edition- copy- price 

Number right 

0130895601 Advanced Java 2 Platform 1 


2002 $69.95 

0131180436 C How to Program 1 1992 $69.95 



0130622214 C# How To Program 1 2002 $69.95 

0135289106 C++ How to Program 2 1998 $49.95 



013028419X e-Business and e- 

Commerce How to 

Program 

1 2001 $69.95 



2 2002 $69.95 



1 2000 $69.95 



0130341517 Java How to Program 4 2002 $69.95 

0136325890 Java How to Program 1 1998 $69.95 

0130284181 Perl How to Program 1 2001 $69.95 

0130923613 Python How to 

Program 

1 2002 $69.95 

0130293636 Visual Basic .NET 


2 2002 $69.95 

0134569555 Visual Basic 6 How to 1 1999 $69.95 

Program 

0130622265 Wireless Internet and 

Mobile Business How 

to Program 

1 2001 $69.95 

0130284173 XML How to Program 1 2001 $69.95 

Fig. 22.20 Books from table Titles whose titles end with How 

to Program in ascending order by title. 


Merging Data from Multiple Tables: INNER 

JOIN 

• Normalize databases 

– Ensure database does not store data redundantly 

– SELECT columnName1, columnName2, … FROM table1 

INNER JOIN table2 ON table1, columnName = 

table2.columnName 


Merging Data from Multiple Tables: INNER 

JOIN 

firstName lastName isbn firstName lastName isbn 

Harvey Deitel 0130895601 Harvey Deitel 0130856118 


Harvey Deitel 0130284173 Harvey Deitel 013028419x 






Harvey Deitel 0130125075 Paul Deitel 0130895601 

Paul Deitel 0130284181 Paul Deitel 0135289106 




Paul Deitel 0130829277 Tem Nieto 0130284181 






Paul Deitel 013028419x Tem Nieto 013028419x 

Paul Deitel 0139163050 Sean Santry 0130895601 

Fig. 22.21 Authors from table Authors and ISBN numbers of the authors’ 

books, sorted in ascending order by lastName and firstName. 


1 SELECT Titles.title, Titles.isbn, Authors.firstName, 

2 Authors.lastName, Titles.copyright, 

3 Publishers.publisherName 

4 FROM 

5 ( Publishers INNER JOIN Titles 

6 ON Publishers.publisherID = Titles.publisherID ) 

7 INNER JOIN 

8 ( Authors INNER JOIN AuthorISBN 

9 ON Authors.authorID = AuthorISBN.authorID ) 

10 ON Titles.isbn = AuthorISBN.isbn 

11 ORDER BY Titles.title 

Fig. 22.22 


Outline 


Joining Data from Tables Authors, 

AuthorISBN, Titles and Publishers 

Title isbn first- last- copy- publisher- 

Name Name right Name 

Advanced Java 2 Platform 


0130895601 Paul Deitel 2002 Prentice Hall 



0130895601 Harvey Deitel 2002 Prentice Hall 



0130895601 Sean Santry 2002 Prentice Hall 

C How to Program 0131180436 Harvey Deitel 1992 Prentice Hall 

C How to Program 0131180436 Paul Deitel 1992 Prentice Hall 





C# How To Program 0130622214 Tem Nieto 2002 Prentice Hall 

C# How To Program 0130622214 Paul Deitel 2002 Prentice Hall 

C# How To Program 0130622214 Cheryl Yaeger 2002 Prentice Hall 

C# How To Program 0130622214 Marina Zlatkina 2002 Prentice Hall 

C# How To Program 0130622214 Harvey Deitel 2002 Prentice Hall 

C++ How to Program 0130895717 Paul Deitel 2001 Prentice Hall 

C++ How to Program 0130895717 Harvey Deitel 2001 Prentice Hall 


Joining Data from Tables Authors, 

AuthorISBN, Titles and Publishers 





e-Business and e-Commerce 0130323640 

for Managers 

Harvey Deitel 2000 Prentice Hall 


for Managers 

Kate Steinbuhler 2000 Prentice Hall 


for Managers 

Paul Deitel 2000 Prentice Hall 

e-Business and e-Commerce 013028419X 


Harvey Deitel 2001 Prentice Hall 



Paul Deitel 2001 Prentice Hall 



Tem Nieto 2001 Prentice Hall 

Fig. 22.23 Portion of the result set produced by the query in Fig. 22.22. 


• Inserts new row in table 


– INSERT INTO tableName ( columnName1, columnName2, 

…, columnNameN ) VALUES ( value1 , value2, …, valueN ) 





2 Paul Deitel 

3 Tem Nieto 


5 Sean Santry 

6 Ted Lin 







13 Sue Smith 

Fig. 22.24 Table Authors after an INSERT operation to add a 

row. 


• Modifies data in a table 


– UPDATE tableName SET columnName1 = value1, 

columnName2 = value2, …, columnNameN = valueN 






2 Paul Deitel 

3 Tem Nieto 


5 Sean Santry 

6 Ted Lin 







13 Sue Jones 

Fig. 22.25 Table Authors after an UPDATE operation to 

change a row. 


• Removes data from a table 

– DELETE FROM tableName 


DELETE Statement 



2 Paul Deitel 

3 Tem Nieto 


5 Sean Santry 

6 Ted Lin 







Fig. 22.26 Table Authors after a DELETE operation to remove 

a row. 


Active Server Pages (ASP) 

 

Server-side technologies 

 

 

Dynamically creates Web pages 

 

Use client information, server information 

and information from the Internet 

Active Server Pages (ASP) 

 

 

Microsoft Server-side technology 

Dynamically build documents in response to 

client requests 

 

Deliver dynamic Web content 

HTML, DHTML, ActiveX controls, client-side 

scripts and Java applets 


ASP – Cont. 

 

 

 

 

 

 

Dynamically edit, change or add any content of a Web 

page 

Respond to user queries or data submitted from HTML 

forms 

Access any data or databases and return the results 

to a browser 

Customize a Web page to make it more useful for 

individual users 

The advantages of using ASP instead of CGI and Perl, 

are those of simplicity and speed 

Provide security since your ASP code can not be 

viewed from the browser 


How Active Server Pages Work 

 

Active Server Pages 

 

 

 

 

 

Processed by scripting engine 

Server-side ActiveX control 

.asp file extension 

Can contain HTML tags 

Scripting written with VBScript 

JavaScript also used 

Others (Independent Software Vendors) 

Communication with Server 

Client HTTP request to server 

Active server page processes request and 

returns results 


Write text with ASP 

 

 

 

 

 

An ASP file can also contain server 

scripts, surrounded by the delimiters . 

Server scripts are executed on the 

server, and can contain any expressions, 

statements, procedures, or operators valid 

for the scripting language you prefer to 

use. 


ASP Variables 

 

 

 

Loop 

 

 

 

 

 

 


ASP Procedures 

 

 

 

 

 

 

 

Result: 

 

 

 


Forms – a.html 

 

First 

Name: Last 

Name: 

 


simpleform.asp 

Welcome 

 

 


ASP Cookies 

 

 

 

 

A cookie is often used to identify a 

user. 

A cookie is a small file that the server 

embeds on the user's computer. 

Each time the same computer 

requests a page with a browser, it will 

send the cookie too. 

With ASP, you can both create and 

retrieve cookie values. 


Example 

 

 

 

 

 

 


ASP Session Object 

 

 

 

The Session object is used to store 

information about, or change settings 

for a user session. 

Variables stored in the Session object 

hold information about one single user, 

and are available to all pages in one 

application. 

 


ASP Objects 

 

ASP Response 

ASP Request 

ASP Application 

ASP Session 

ASP Server 

ASP Error 

ASP FileSystem 

ASP TextStream 

ASP Drive 

ASP File 

ASP Folder 

ASP Dictionary 

ASP ADO 


Response Object 

 

 

used to send output to the user from the 

server 

 

 

 

 

 


Request Object 

 

 

used to get information from the user 

 

 

 

First name: 

 

 

Last name: 

 

 

 

 

 

 

 


Session Object 

 

 

The Session object is used to store 

information about, or change settings 

for a user session. 

Variables stored in the Session object 

hold information about one single 

user, and are available to all pages in 

one application. 


Ex: A session's timeout 

 

 

 

 

 

This example sets and returns the timeout (in minutes) for the session. 

 

 

 

 

 

Output: 

Default Timeout is: 20 minutes. (Server time out) 

Timeout is now: 30 minutes. (Now client can change to 30 min as session 

out) 


FileSystemObject 

 

 

The FileSystemObject is used to 

access the file system on the server. 

This object can manipulate files, 

folders, and directory paths. 


Does a specified file exist? 

 

 

 

 

 

 


FileSystemObject - methods 

 

 

 

 

 

 

 

DriveExists- Checks if a specified drive exists 

File Exists -Checks if a specified file exists 

Folder Exists -Checks if a specified folder exists 

Copy File - Copies one or more files from one 

location to another 

Copy Folder- Copies one or more folders from 

one location to another 

Delete File - Deletes one or more specified files 

Delete Folder - Deletes one or more specified 

folders 


ADO - ActiveX Data Objects 

ADO can be used to access databases from 

your web pages. 

The common way to access a database from 

inside an ASP page is to: 

 

 

 

 

 

 

 

Create an ADO connection to a database 

Open the database connection 

Create an ADO recordset 

Open the recordset 

Extract the data you need from the recordset 

Close the recordset 

Close the connection 


Create a DSN-less Database 

Connection 

If you have a database called “test.mdb" 

located in a web directory like 

"c:/webdata/", you can connect to the 

database with the following ASP code: 

 


Display records 

 

 

 

 

First create a database connection, 

Then a recordset, 

and then display the data in HTML. 

 

 

Example 

 

set rs = Server.CreateObject("ADODB.recordset") 

rs.Open "Select * from Customers", conn 

do until rs.EOF 

for each x in rs.Fields 

Response.Write(x.name) 

Response.Write(" = ") 

Response.Write(x.value & "") 

next 

Response.Write("") 

rs.MoveNext 

loop 

rs.close 

conn.close 

%> 


CASE STUDY 

 

 

 

Add a Record to a Table in a 

Database 

Update a Record in a Table 

Delete a Record in a Table 


Add a Record to a Table in a 

Database 

 

To add a new record to the 

Customers table in the Test database 

 

First create a form that contains the 

fields we want to collect data from 


Main.html 

 

 

CustomerID: 

 

Company Name: 

 

Contact Name: 

 

Address: 

 

City: 

Postal Code: 

 

Country: 

 

 

 


adds.asp 

When the user presses the submit button the form is sent to a 

file called "adds.asp" 

 

Contd. 

on error resume next 

conn.Execute sql,recaffected 

if err0 then 

Response.Write("No update permissions!") 

else Response.Write("" & recaffected & " 

record added") 

end if 

conn.close %> 

 


Quiz 

1. What does ASP stand for? 

 

 

 

 

Active Server Pages 

A Server Page 

All Standard Pages 

Active Standard Pages 


2. ASP server scripts are 

surrounded by delimiters, which? 

 

 

 

 

... 

... 

... 

 


3. How do you write "Hello World" in 

ASP ? 

Response.Write("Hello World") 

Document.Write("Hello World") 

"Hello World" 


4. "

5. What is the default scripting 

language in ASP? 

 

 

 

 

VBScript 

EcmaScript 

PERL 

JavaScript 


6. How can you script your ASP code in 

JavaScript? 

 

 

 

 

JavaScript is the default scripting language 

End the document with: 

Start the document with: 

Start the document with: 


7. How do you get information from 

a form that is submitted using 

the "get" method? 

 

 

Request.Form 

Request.QueryString 


8. How do you get information from 

a form that is submitted using the 

"post" method? 

 

 

Request.QueryString 

Request.Form 


9. Which ASP property is used to 

identify a user? 

 

 

 

The Server object 

The Application object 

An ASP Cookie 


10. All users of the same application 

share ONE Session object. 

 

 

True 

False 


11. If a user has Cookies enabled, a 

session variable is available to all 

pages in one application. 

 

 

True 

False 


Answers 

 

 

 

 

 

 

 

 

 

 

 

1- Active Server Pages 

2 - 

3 - Response.Write("Hello World") 

4 -

8.1 Introduction 

- SGML is a meta-markup language 

- Developed in the early 1980s; ISO std. In 1986 

- HTML was developed using SGML in the early 

1990s - specifically for Web documents 

- Two problems with HTML: 

1. Fixed set of tags and attributes 

- User cannot define new tags or attributes 

- So, the given tags must fit every kind of 

document, and the tags cannot connote 

any particular meaning 

2. There are no restrictions on arrangement or 

order of tag appearance in a document 

- One solution to the first of these problems: 

Let each group of users define their own tags 

(with implied meanings) 

(i.e., design their own “HTML”s using SGML) 

Chapter 8 © 2005 by Addison Wesley Longman, Inc. 


1

8.1 Introduction (continued) 

- Problem with using SGML: 

- It’s too large and complex to use, and it is very 

difficult to build a parser for it 

- A better solution: Define a lite version of SGML 

- XML is not a replacement for HTML 

- HTML is a markup language used to describe the 

layout of any kind of information 

- XML is a meta-markup language that can be used 

to define markup languages that can define the 

meaning of specific kinds of information 

- XML is a very simple and universal way of storing 

and transferring data of any kind 

- XML does not predefine any tags 

- XML has no hidden specifications 

- All documents described with an XML-derived 

markup language can be parsed with a single 

parser 



2

8.1 Introduction (continued) 

- We will refer to an XML-based markup language as 

a tag set 

- Strictly speaking, a tag set is an XML application, 

but that terminology can be confusing 

-An XML processor is a program that parses XML 

documents and provides the parts to an application 

- Documents that use an XML-based markup 

language is an XML document 

- Both IE6 and NS7 support basic XML 

8.2 The Syntax of XML 

- The syntax of XML is in two distinct levels: 

1. The general low-level rules that apply to all 

XML documents 

2. For a particular XML tag set, either a document 

type definition (DTD) or an XML schema 



3

8.2 The Syntax of XML (continued) 

- General XML Syntax 

- XML documents consist of: 

1. data elements 

2. markup declarations (instructions for the XML 

parser) 

3. processing instructions (for the application 

program that is processing the data in the 

document) 

- All XML documents begin with an XML declaration: 

 

- XML comments are just like HTML comments 

- XML names: 

- Must begin with a letter or an underscore 

- They can include digits, hyphens, and periods 

- There is no length limitation 

- They are case sensitive (unlike HTML names) 



4


- Syntax rules for XML: same as those of XHTML 

- Every XML document defines a single root 

element, whose opening tag must appear as 

the first line of the document 

- An XML document that follows all of these rules 

is well formed 

 

 

1960 

Cessna 

Centurian 

Yellow with white trim 

 

Gulfport 

Mississippi 

 

 



5


- Attributes are not used in XML the way they are in 

HTML 

- In XML, you often define a new nested tag to 

provide more info about the content of a tag 

- Nested tags are better than attributes, because 

attributes cannot describe structure and the 

structural complexity may grow 

- Attributes should always be used to identify 

numbers or names of elements (like HTML id and 

name attributes) 



6


 

 

... 

 

 

 

Maggie Dee Magpie 

... 

 

 

 

 

Maggie 

Dee 

Magpie 

 

... 

 



7

8.3 XML Document Structure 

- An XML document often uses two auxiliary files: 

- One to specify the structural syntactic rules 

- One to provide a style specification 

- An XML document has a single root element, but 

often consists of one or more entities 

- Entities range from a single special character to 

a book chapter 

- An XML document has one document entity 

- All other entities are referenced in the 

document entity 

- Reasons for entity structure: 

1. Large documents are easier to manage 

2. Repeated entities need not be literally repeated 

3. Binary entities can only be referenced in the 

document entities (XML is all text!) 



8

8.3 XML Document Structure (continued) 

- When the XML parser encounters a reference to 

a non-binary entity, the entity is merged in 

- Entity names: 

- No length limitation 

- Must begin with a letter, a dash, or a colon 

- Can include letters, digits, periods, dashes, 

underscores, or colons 

- A reference to an entity has the form: 

&entity_name; 

- One common use of entities is for special 

characters that may be used for markup delimiters 

- These are predefined (as in XHTML): 

< < 

> > 

& & 

" " 

' ' 

- The user can only define entities in a DTD 



9

8.3 XML Document Structure (continued) 

- If several predefined entities must appear near 

each other in a document, it is better to avoid 

using entity references 

- Character data section 

 

e.g., instead of 

use 

Start > > > > HERE 

< < < < 

>>> HERE

8.4 Document Type Definitions 

- A DTD is a set of structural rules called 

declarations 

- These rules specify a set of elements, along 

with how and where they can appear in a 

document 

- Purpose: provide a standard form for a collection 

of XML documents and define a markup 

language for them 

- Not all XML documents have or need a DTD 

- The DTD for a document can be internal or 

external 

- All of the declarations of a DTD are enclosed in 

the block of a DOCTYPE markup declaration 

- DTD declarations have the form: 

 

- There are four possible declaration keywords: 

ELEMENT, ATTLIST, ENTITY, and NOTATION 


11 


8.4 Document Type Definitions (continued) 

- Declaring Elements 

- Element declarations are similar to BNF 

- An element declaration specifies the name of an 

an element, and the element’s structure 

- If the element is a leaf node of the document tree, 

its structure is in terms of characters 

- If it is an internal node, its structure is a list of 

children elements (either leaf or internal nodes) 

- General form: 

 

e.g., 

 

memo 

from to date re body 


12 



- Declaring Elements (continued) 

- Child elements can have modifiers, +, *, ? 

e.g., 

 

- Leaf nodes specify data types, most often 

PCDATA, which is an acronym for parsable 

character data 

- Data type could also be EMPTY (no content) 

and ANY (can have any content) 

- Example of a leaf declaration: 

 

- Declaring Attributes 

- General form: 

 


13 



- Declaring Attributes (continued) 

- Attribute types: there are ten different types, but 

we will consider only CDATA 

- Default values: 

a value 

#FIXED value (every element will have 

this value), 

#REQUIRED (every instance of the element must 

have a value specified), or 

#IMPLIED (no default value and need not specify 

a value) 

 

 

 

 

 

... 

 


14 



- Declaring Entities 

- Two kinds: 

-A general entity can be referenced anywhere in 

the content of an XML document 

-A parameter entity can be referenced only in 

a markup declaration 

- General form of declaration: 

 

e.g., 

- A reference: &jfk; 

- If the entity value is longer than a line, define it 

in a separate file (an external text entity) 

 

SHOW planes.dtd 


15 



- XML Parsers 

- Always check for well formedness 

- Some check for validity, relative to a given DTD 

- Called validating XML parsers 

- You can download a validating XML parser from: 

http://xml.apache.org/xerces-j/index.html 

- Internal DTDs 

 

- External DTDs 

 


16 


8.5 Namespaces 

-A markup vocabulary is the collection of all of the 

element types and attribute names of a markup 

language (a tag set) 

- An XML document may define its own tag set and 

also use those of another tag set - CONFLICTS! 

-An XML namespace is a collection of names used 

in XML documents as element types and attribute 

names 

- The name of an XML namespace has the form of 

a URI 

- A namespace declaration has the form: 

 

- The prefix is a short name for the namespace, 

which is attached to names from the 

namespace in the XML document 

 

- In the document, you can use 

- Purposes of the prefix: 

1. Shorthand 

2. URI includes characters that are illegal in XML 


17 


8.5 Namespaces (continued) 

- Can declare two namespaces on one element 

 

-The gmcars element can now use gm names and 

html names 

- One namespace can be made the default by 

leaving the prefix out of the declaration 

8.6 XML Schemas 

- Problems with DTDs: 

1. Syntax is different from XML - cannot be parsed 

with an XML parser 

2. It is confusing to deal with two different syntactic 

forms 

3. DTDs do not allow specification of particular 

kinds of data 


18 


8.6 XML Schemas (continued) 

- XML Schemas is one of the alternatives to DTD 

- Two purposes: 

1. Specify the structure of its instance XML 

documents 

2. Specify the data type of every element and 

attribute of its instance XML documents 

- Schemas are written using a namespace: 

http://www.w3.org/2001/XMLSchema 

- Every XML schema has a single root, schema 

The schema element must specify the namespace 

for schemas as its xmlns:xsd attribute 

- Every XML schema itself defines a tag set, which 

must be named 

targetNamespace = 

"http://cs.uccs.edu/planeSchema" 


19 



- If we want to include nested elements, we must 

set the elementFormDefault attribute to 

qualified 

- The default namespace must also be specified 

xmlns = "http://cs.uccs.edu/planeSchema" 

- A complete example of a schema element: 

 

targetNamespace = 

"http://cs.uccs.edu/planeSchema" 

 

xmlns = "http://cs.uccs.edu/planeSchema" 

 

elementFormDefault = "qualified"> 


20 



- Defining an instance document 

- The root element must specify the namespaces 

it uses 

1. The default namespace 

2. The standard namespace for instances 

(XMLSchema-instance) 

3. The location where the default namespace is 

defined, using the schemaLocation attribute, 

which is assigned two values 


- XMLS defines 44 data types 

- Primitive: string, Boolean, float, … 

- Derived: byte, decimal, positiveInteger, … 

- User-defined (derived) data types – specify 

constraints on an existing type (the base type) 

- Constraints are given in terms of facets 

(totalDigits, maxInclusive, etc.) 

- Both simple and complex types can be either 

named or anonymous 

- DTDs define global elements (context is irrelevant) 

- With XMLS, context is essential, and elements 

can be either: 

1. Local, which appears inside an element 

that is a child of schema, or 

2. Global, which appears as a child of schema 


22 



- Defining a simple type: 

- Use the element tag and set the name and type 

attributes 

 

- An instance could have: 

Yellow-bellied sap sucker 

- Element values can be constant, specified with 

the fixed attribute 

fixed = "three-toed" 

- User-Defined Types 

- Defined in a simpleType element, using facets 

specified in the content of a restriction 

element 

- Facet values are specified with the value 

attribute 


23 



 

 

 

 

 

- There are several categories of complex types, 

but we discuss just one, element-only elements 

- Element-only elements are defined with the 

complexType element 

- Use the sequence tag for nested elements that 

must be in a particular order 

- Use the all tag if the order is not important 


24 



 

 

 

 

 

 

 

 

- Nested elements can include attributes that give 

the allowed number of occurrences 

(minOccurs, maxOccurs, unbounded) 

SHOW planes.xsd and planes1.xml 

- We can define nested elements elsewhere 

 

 

 

 

 

 

 

 


25 



- The global element can be referenced in the 

complex type with the ref attribute 

 

- Validating Instances of XML Schemas 

- Can be done with several different tools 

- One of them is xsv, which is available from: 

http://www.ltg.ed.ac.uk/~ht/xsv-status.html 

- Note: If the schema is incorrect (bad format), xsv 

reports that it cannot find the schema 

8.7 Displaying Raw XML Documents 

- There is no presentation information in an XML 

document 

- An XML browser should have a default style sheet 

for an XML document that does not specify one 

- You get a stylized listing of the XML 

SHOW planes.xml 


26 


8.8 Displaying XML Documents with 

CSS 

- A CSS style sheet for an XML document is just a 

list of its tags and associated styles 

- The connection of an XML document and its style 

sheet is made through an xml-stylesheet 

processing instruction 

 

--> SHOW planes.css and run planes.xml 

8.9 XSLT Style Sheets 

- XSL began as a standard for presentations of XML 

documents 

- Split into three parts: 

- XSLT – Transformations 

- XPATH - XML Path Language 

- XSL-FO - Formatting objects 

- XSLT uses style sheets to specify 

transformations 


27 


8.9 XSLT Style Sheets (continued) 

- An XSLT processor merges an XML document into 

an XSLT style sheet 

- This merging is a template-driven process 

- An XSLT style sheet can specify page layout, 

page orientation, writing direction, margins, page 

numbering, etc. 

- The processing instruction we used for connecting 

a XSLT style sheet to an XML document is used to 

connect an XSLT style sheet to an XML document 

 

- An example: 

 

 

 

 

1977 

Cessna 

Skyhawk 

Light blue and white 

 


28 


8.9 XSLT Style Sheets (continued) 

- An XSLT style sheet is an XML document with a 

single element, stylesheet, which defines 

namespaces 

 

- If a style sheet matches the root element of the 

XML document, it is matched with the template: 

 

- A template can match any element, just by naming 

it (in place of /) 

- XSLT elements include two different kinds of 

elements, those with content and those for which 

the content will be merged from the XML doc 

- Elements with content often represent HTML 

elements 

 

Happy Easter! 

 


29 


8.9 XML Transformations and Style 

Sheets (continued) 

- XSLT elements that represent HTML elements are 

simply copied to the merged document 

- The XSLT value-of element 

- Has no content 

- Uses a select attribute to specify part of the XML 

data to be merged into the new document 

8.10 XML Processors 

- Purposes: 

1. Check the syntax of a document for wellformedness 

2. Replace all references to entities by their 

definitions 

3. Copy default values (from DTDs or schemas) 

into the document 

4. If a DTD or schema is specified and the 

processor includes a validating parser, the 

structure of the document is validated 

- Two ways to check well-formedness: 

1. A browser with an XML parser 

2. A stand-alone XML parser 

- There are two different approaches to designing 

XML processors: 

- SAX and the DOM approach 


31 


8.10 XML Processors (continued) 

- The SAX (Simple API for XML) Approach: 

- Widely accepted and supported 

- Based on the concept of event processing: 

- Every time a syntactic structure (e.g., a tag, an 

attribute, etc.) is recognized, the processor 

raises an event 

- The application defines event handlers to 

respond to the syntactic structures 

- The DOM Approach 

- The DOM processor builds a DOM tree structure 

of the document 

(Similar to the processing by a browser of an 

XHTML document) 

- When the tree is complete, it can be traversed 

and processed 


32 


8.10 XML Processors (continued) 

- Advantages of the DOM approach: 

1. Good if any part of the document must be 

accessed more than once 

2. If any rearrangement of the document must be 

done, it is facilitated by having a 

representation of the whole document in 

memory 

3. Random access to any part of the document is 

possible 

4. Because the whole document is parsed before 

any processing takes place, processing of an 

invalid document is avoided 

- Disadvantages of the DOM approach: 

1. Large documents require a large memory 

2. The DOM approach is slower 

- Note: Most DOM processors use a SAX front 

end 


33 


8.10 Web Services 

- The ultimate goal of Web services: 

- Allow different software in different places, 

written in different languages and resident on 

different platforms, to connect and interoperate 

- The Web began as provider of markup documents, 

served through the HTTP methods, GET and 

POST 

- An information service system 

- A Web service is closely related to an information 

service 

- Rather than having a server provide documents, 

the server provides services, through serverresident 

software 

- The same Web server can provide both 

documents and services 

- The original Web services were provided via 

Remote Procedure Call (RPC), through two 

technologies, DCOM and CORBA 

- DCOM and CORBA use different protocols, 

which defeats the goal of universal component 

interoperability 


34 


8.10 Web Services (continued) 

- There are three roles required to provide and use 

Web services: 

1. Service providers 

2. Service requestors 

3. A service registry 

- Web Serviced Definition Language (WSDL) 

- Used to describe available services, as well as 

of message protocols for their use 

- Such descriptions reside on the Web server 

- Universal Description, Discovery, and 

Integration Service (UDDI) 

- Used to create Web services registry, and also 

methods that allow a remote system to 

determine which services are available 

- Standard Object Access Protocol (SOAP) 

- An XML-based specification that defines the 

forms of messages and RPCs 

- Supports the exchange of information among 

distributed systems 


35 






Servlets 

Introduction 

Servlet Overview and Architecture 

Interface Servlet and the Servlet Life Cycle 

HttpServlet Class 

HttpServletRequest Interface 

HttpServletResponse Interface 

Handling HTTP get Requests 

Setting Up the Apache Tomcat Server 

Deploying a Web Application 

Handling HTTP get Requests Containing Data 

Handling HTTP post Requests 

Redirecting Requests to Other Resources 

Multi-Tier Applications: Using JDBC from a Servlet 


Objectives 

1. To execute servlets with the Apache Tomcat server. 

2. To be able to respond to HTTP requests from an 

HttpServlet. 

3. To be able to redirect requests to static and dynamic Web 

resources. 


Servlets 

• A Servlet is a program that runs on a server and 

generates a response upon a HTTP request 

• Building Web pages on the fly is useful (and commonly 

done) for a number of reasons: 

• The Web page is based on data submitted by the user. 

For example the results pages from search engines are 

generated this way, and programs that process orders for e- 

commerce sites do this as well. 

• The data changes frequently. For example, a weather- 

report or news headlines page might build the page 

dynamically, perhaps returning a previously built page if it 

is still up to date. 

• The Web page uses information from corporate 

databases or other such sources. For example, you 

would use this for making a Web page at an on-line store 

that lists current prices and number of items in stock. 


Servlets 

• A client sends an HTTP request to the server or 

servlet container. 

• The server or servlet container receives the request 

and directs it to be processed by the appropriate 

servlet. 

• The servlet does its processing, which may include 

interacting with a database or other server-side 

components such as other servlets, JSPs 

• The servlet returns its results to the client— 

normally in the form of an HTML 


Servlet Overview and Architecture 

• Servlet container (servlet engine) 

– Server that executes a servlet 

• Web servers and application servers 

– Sun ONE Application Server 

– Microsoft’s Internet Information Server (IIS) 

– Apache HTTP Server 

– BEA’s WebLogic Application Server 

– IBM’s WebSphere Application Server 

– World Wide Web Consortium’s Jigsaw Web Server 



• Interface Servlet 

– All servlets must implement this interface 

– All methods of interface Servlet are invoked by servlet 

container 

• Servlet life cycle 

– Servlet container invokes the servlet’s init method 

– Servlet’s service method handles requests 

– Servlet’s destroy method releases servlet resources when 

the servlet container terminates the servlet 

• Servlet implementation 

– GenericServlet 

– HttpServlet 



(Cont.) 

• Init - This method is automatically called once 

during a servlet’s execution cycle to initialize the 

servlet. 

• service method - which receives the request, 

processes the request and sends a response to the 

client. 

• Destroy - This “cleanup” method is called when a 

servlet is terminated by its servlet container. 

Resources used by the servlet, such as an open file 

or an open database connection, should be 

deallocated here. 


HttpServlet Class 

• which defines enhanced processing capabilities for 

servlets that extend the functionality of a Web 

server. 

• Two most common HTTP request types 

– get requests - gets (or retrieves) information from a server. 

– post requests – posts (or sends) data to a server. 

• Method doGet responds to get requests 

• Method doPost responds to post requests 

• HttpServletRequest and 

HttpServletResponse objects 



HttpServletRequest Interface 

– creates an HttpServletRequest object 

– passes it to the servlet’s service method 

• HttpServletRequest object contains the request from the 

client 

• Methods: getParameter, Enumeration, getCookies, getSession 

HttpServletResponse Interface 


– creates an HttpServletResponse object 

– passes it to the servlet’s service method 

• Methods: addCookie, PrintWriter, setContentType 


Example 1: HTTPGetServlet.java 

// Creating and sending a page to the client 

import javax.servlet.*; 

import javax.servlet.http.*; 

import java.io.*; 

public class HTTPGetServlet extends HttpServlet { 

public void doGet( HttpServletRequest request, 

HttpServletResponse response ) 

throws ServletException, IOException 

{ 

PrintWriter output; 

response.setContentType( "text/html" ); // content type 

output = response.getWriter(); // get writer 

// create and send HTML page to client 

StringBuffer buf = new StringBuffer(); 

buf.append( "\n" ); 

buf.append( "A Simple Servlet Example\n" ); 

buf.append( "\n" ); 

buf.append( "Welcome to Servlets!\n" ); 

buf.append( "" ); 

output.println( buf.toString() ); 

output.close(); // close PrintWriter stream 

} 

} 


HTTPGetServlet.html 

 

 

Servlet HTTP GET Example 

 

 

 

Click the button to have the servlet send an HTML document 

 

 

 

 



• Download Tomcat (version 4.1.27) 

– jakarta.apache.org/site/binindex.cgi 

• Define environment variables 

– JAVA_HOME 

– CATALINA_HOME 

• Start the Tomcat server 

– startup 

• Launch the Tomcat server 

– http://localhost:8080/ 



(Cont.). 

Tomcat documentation home page. (Courtesy of The Apache Software Foundation.) 


Deploying a Web Application 

• Web applications 

– JSPs, servlets and their supporting files 

• Deploying a Web application 

– Directory structure 

• Context root 

– Web application archive file (WAR file) 

– Deployment descriptor 

• web.xml 


Deploying a Web Application (Cont.) 

Directory Description 

context root This is the root directory for the Web application. All the 

JSPs, HTML documents, servlets and supporting files such 

as images and class files reside in this directory or its 

subdirectories. The name of this directory is specified by the 

Web application creator. To provide structure in a Web 

application, subdirectories can be placed in the context root. 

For example, if your application uses many images, you 

might place an images subdirectory in this directory. The 

examples of this chapter use jhtp5 as the context root. 

WEB-INF This directory contains the Web application deployment 

descriptor (web.xml). 

WEB-INF/classes This directory contains the servlet class files and other 

supporting class files used in a Web application. If the 

classes are part of a package, the complete package directory 

structure would begin here. 

WEB-INF/lib This directory contains Java archive (JAR) files. The JAR 

files can contain servlet class files and other supporting class 

files used in a Web application. 

Fig. 36.8 Web application standard directories. 


Deployment 

 

 

Advanced Java How to Program JSP and Servlet 

 

This is the Web application in which we demonstrate our JSP and Servlet examples. 

 

 

 

welcome1 

A simple servlet that handles an HTTP get request. 

com.deitel.advjhtp1.servlets.WelcomeServlet 

 

 

 

welcome1 

/welcome1 

 

 



• Invoke WelcomeServlet example 

– /iw3htp3/welcome1 

• /iw3htp3 specifies the context root 

• /welcome1 specifies the URL pattern 

• URL pattern formats 

– Exact match 

• /iw3htp3/welcome1 

– Path mappings 

• /iw3htp3/example/* 

– Extension mappings 

• *.jsp 

– Default servlet 

• / 



WelcomeServlet Web application directory and file structure 

iw3htp3 

servlets 

WelcomeServlet.html 

WEB-INF 

web.xml 

classes 

WelcomeServlet.class 

Fig. 36.10 Web application directory and file structure for 

WelcomeServlet. 


Handling HTTP post Requests 

• HTTP post request 

– Post data from an HTML form to a server-side form handler 

– Browsers cache Web pages 


Using cookies. 




CookieExample.java 

public class CookieExample extends HttpServlet { 

private final static String names[] = { "C", "C++", "Java", "Visual Basic 6" }; 

private final static String isbn[] = { “11", “12", “13", “14" }; 

public void doPost( HttpServletRequest request, HttpServletResponse response ) 


{ 


String language = request.getParameter( "lang" ); 

Cookie c = new Cookie( language, getISBN( language ) ); 

c.setMaxAge( 120 ); // seconds until cookie removed 

response.addCookie( c ); // must precede getWriter 

response.setContentType( "text/html" ); 

output = response.getWriter(); 


send HTML page to client 

output.println( "" ); 

output.println( "Cookies" ); 


output.println( "Welcome to Cookies!" ); 


output.println( language ); 

output.println( " is a great language." ); 


output.close(); // close stream 

} 

public void doGet( HttpServletRequest request, HttpServletResponse response ) 


{ 


Cookie cookies[]; 

cookies = request.getCookies(); // get client's cookies 




output.println( "Cookies II" ); 



if ( cookies != null && cookies.length != 0 ) { 

output.println( "Recommendations" ); 

// get the name of each cookie 

for ( int i = 0; i < cookies.length; i++ ) 

output.println( 

cookies[ i ].getName() + " How to Program. " + 

"ISBN#: " + cookies[ i ].getValue() + "" ); 

} 

else { 

output.println( "No Recommendations" ); 

output.println( "You did not select a language or" ); 

output.println( "the cookies have expired." ); 

} 



} 

private String getISBN( String lang ) 

{ 

for ( int i = 0; i < names.length; ++i ) 

if ( lang.equals( names[ i ] ) ) 

return isbn[ i ]; 

return ""; // no matching string found 

} 

} 


 

Cookies 

 

SelectLanguage.html 

 

 

Select a programming language: 

C 

C++ 

 

Java 

 

Visual Basic 6 

 

 

 

 

 


Cookies 





SessionExample.java 

public class SessionExample extends HttpServlet { 

private final static String names[] = { "C", "C++", "Java", "Visual Basic 6" }; 

private final static String isbn[] = { “11", “12", “13", “14" }; 

public void doPost( HttpServletRequest request, HttpServletResponse response ) 


{ 


String language = request.getParameter( "lang" ); 

// Get the user's session object. 

// Create a session (true) if one does not exist. 

HttpSession session = request.getSession( true ); 

// add a value for user's choice to session 

session.putValue( language, getISBN( language ) ); 





// send HTML page to client 


output.println( "Sessions" ); 


output.println( "Welcome to Sessions!" ); 


output.println( language ); 

output.println( " is a great language." ); 



} 

public void doGet( HttpServletRequest request, HttpServletResponse response ) 


{ 


// Get the user's session object. 

// Don't create a session (false) if one does not exist. 

HttpSession session = request.getSession( false ); 


get names of session object's values 

String valueNames[]; 


if ( session != null ) 

valueNames = session.getValueNames(); 

else 

valueNames = null; 




output.println( "Sessions II" ); 


if ( valueNames != null && valueNames.length != 0 ) { 

output.println( "Recommendations" ); 

// get value for each name in valueNames 

for ( int i = 0; i < valueNames.length; i++ ) { 

String value = (String) session.getValue( valueNames[ i ] ); 



output.println( 

valueNames[ i ] + " How to Program. " + "ISBN#: " + value + "" ); 

} 

} 

else { 

output.println( "No Recommendations" ); 

output.println( "You did not select a language" ); 

} 



} 

private String getISBN( String lang ) 

{ 

for ( int i = 0; i < names.length; ++i ) 

if ( lang.equals( names[ i ] ) ) 

return isbn[ i ]; 

return ""; // no matching string found 

} 

} 


 

Sessions 

 

SelectLanguage.html 

 

 

Select a programming language: 

C 

C++ 

Java 

Visual Basic 6 

 

 

 

 

 



Multi-Tier Applications: Using JDBC from a 

Servlet 

• Three-tier distributed applications 

– User interface 

– Business logic 

– Database access 

• Web servers often represent the middle tier 

• Three-tier distributed application example 

– Student 

– Student.html 

– MS Access database – student.mdb 


Multi-Tier Applications: Using JDBC from a 

Servlet (Cont.) 

Descriptor element Value 

servlet element 

servlet-name animalsurvey 

description Connecting to a database from a servlet. 

servlet-class com.deitel.iw3htp3.servlets.SurveyServlet 

init-param 

param-name databaseDriver 

param-value sun.jdbc.odbc.JdbcOdbcDriver 

init-param 

param-name databaseName 

param-value jdbc:odbc:animalsurvey 

servlet-mapping element 

servlet-name animalsurvey 

url-pattern /animalsurvey 

Fig. 36.22 Deployment descriptor information for servlet SurveyServlet. 


Displaying Student Details 

Student.html 

 

 

 

 

 

 

 

 

 

 

 





import java.sql.*; 

Displaying Student Details 

public class Student extends HttpServlet { 

Connection dbConn ; 

public void doPost(HttpServletRequest req, HttpServletResponse res) 

throws IOException, ServletException 

{ 

try { 

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver") ; 

dbConn = DriverManager.getConnection("jdbc:odbc:Student“ ,"","") ; 

} 

catch(ClassNotFoundException e) 

{ System.out.println(e); } 

catch(Exception e) 

{ System.out.println(e);} 


es.setContentType("text/html"); 

PrintWriter out = res.getWriter(); 

String mrollno = req.getParameter("rollno") ; 

try { 

PreparedStatement ps = dbConn.prepareStatement("select * from stud 

where rollno = ?") ; 

ps.setString(1, mrollno) ; 

ResultSet rs = ps.executeQuery() ; 

out.println(""); 



out.println("Hello World!"); 





while(rs.next()) 

{ 

out.println("Roll No. : "); 

out.println("" + rs.getString(1) + ""); 

out.println("Name : "); 

out.println("" + rs.getString(2) +""); 

out.println("Branch : "); 


out.println("10th Mark : "); 


out.println("12th Mark : "); 


} 




} 

catch (Exception e) 

{ System.out.println(e); } 

} 

} P.Kumar, Rajalakshmi Engineering COllege 684

• Database Structure – Student.mdb 


web.xml 

 

Step 1: Create ODBC connection for the database 

Step 2: Open Web Browser and type 

Step 3: http://localhost:8080 

Step 4: Select Tomcat Manager 

Step 5: Deploy the war file and Run 


Outline 

JavaServer Pages (JSP) 

Introduction 

JavaServer Pages Overview 

First JavaServer Page Example 

Implicit Objects 

Scripting 

Scripting Components 

Scripting Example 

Standard Actions 

Action 

Action 

Action 

Directives 

page Directive 

include Directive 

Case Study: Guest Book 


• JavaServer Pages 

Introduction 

– Extension of Servlet technology 

• Web content delivery 

• Reuse existing Java components 

– Without programming Java 

• Create custom tags 

– Encapsulate complex functionality 

• Classes and interfaces specific to JSP 

– Package javax.servlet.jsp 

– Package javax.servlet.jsp.tagext 


• Key components 

– Directives 

– Actions 

– Scriptlets 

– Tag libraries 

JavaServer Pages Overview 

– JavaServer Pages (JSP) technology is the Java platform 

technology for delivering dynamic content to web clients in 

a portable, secure and well-defined way. 


JavaServer Pages Overview (cont.) 

• Directive 

– Message to JSP container 

• i.e., program that compiles/executes JSPs 

• They are used to set global values such as class declaration, 

methods to be implemented, output content type, etc. 

• They do not produce any output to the client. 

• The three directives 

– are page - specify page settings, 

– to include content from other resources and 

– to specify custom tag libraries for use in a JSP. 


• Actions 


– Predefined JSP tags that encapsulate functionality 

– Often performed based on information from client request 

– Can be used to create Java objects for use in scriptlets 


• Scriptlet 


– Also called “Scripting Elements” 

• A scriptlet consists of one or more valid Java statements. 

• A scriptlet is a block of Java code that is executed at request- 

processing time. 

• A scriptlet is enclosed between "". 



• Custom Tag Library 

– JSP’s tag extension mechanism 

– Enables programmers to define new tags 

• Tags encapsulate complex functionality 

– Tags can manipulate JSP content 


Advantages of JSP? 

• vs. Active Server Pages (ASP). ASP is a similar technology from Microsoft. The 

advantages of JSP are twofold. First, the dynamic part is written in Java, not Visual 

Basic or other MS-specific language, so it is more powerful and easier to use. Second, it 

is portable to other operating systems and non-Microsoft Web servers. 

• vs. Pure Servlets. JSP doesn't give you anything that you couldn't in principle do with a 

servlet. But it is more convenient to write (and to modify!) regular HTML than to have a 

zillion println statements that generate the HTML. Plus, by separating the look from the 

content you can put different people on different tasks: your Web page design experts 

can build the HTML, leaving places for your servlet programmers to insert the dynamic 

content. 

• vs. Server-Side Includes (SSI). SSI is a widely-supported technology for including 

externally-defined pieces into a static Web page. JSP is better because it lets you use 

servlets instead of a separate program to generate that dynamic part. Besides, SSI is 

really only intended for simple inclusions, not for "real" programs that use form data, 

make database connections, and the like. 

• vs. JavaScript. JavaScript can generate HTML dynamically on the client. This is a 

useful capability, but only handles situations where the dynamic information is based on 

the client's environment. With the exception of cookies, HTTP and form submission 

data is not available to JavaScript. And, since it runs on the client, JavaScript can't 

access server-side resources like databases, catalogs, pricing information, and the like. 


A First JavaServer Page Example 

• Simple JSP example 

– Demonstrates 

• Fixed-template data (HTML markup) 

• Creating a Java object (java.util.Date) 

• Automatic conversion of JSP expression to a String 

• meta element to refresh Web page at specified interval 

– First invocation of clock.jsp 

• Notice the delay while: 

– JSP container translates the JSP into a servlet 

– JSP container compiles the servlet 

– JSP container executes the servlet 

• Subsequent invocations should not experience the same delay 


clock.jsp 

 

 

A Simple JSP Example 

 

 

 

 

 

 


Clock.jsp 

Outline 


Implicit Objects 

• Implicit Objects 

– Provide access to many servlet capabilities within a JSP 

– Four scopes 

• Application scope 

– Objects owned by the container application 

– Any servlet or JSP can manipulate these objects 

• Page scope 

– Objects that exist only in page in which they are defined 

– Each page has its own instance of these objects 

• Request scope 

– Objects exist for duration of client request 

– Objects go out of scope when response sent to client 

• Session scope 

– Objects exist for duration of client’s browsing session 

– Objects go out of scope when client terminates session or when 

session timeout occurs 


Implicit object Description 

Application Scope 

application This javax.servlet.ServletContext object represents the container in which the JSP 

executes. 

Page Scope 

config This javax.servlet.ServletConfig object represents the JSP configuration options. As 

with servlets, configuration options can be specified in a Web application descriptor. 

exception This java.lang.Throwable object represents the exception that is passed to the JSP error 

page. This object is available only in a JSP error page. 

out This javax.servlet.jsp.JspWriter object writes text as part of the response to a 

request. This object is used implicitly with JSP expressions and actions that insert string content 

in a response. 

page This java.lang.Object object represents the this reference for the current JSP instance. 

pageContext This javax.servlet.jsp.PageContext object hides the implementation details of the 

underlying servlet and JSP container and provides JSP programmers with access to the implicit 

objects discussed in this table. 

response This object represents the response to the client and is normally an instance of a class that 

implements HttpServletResponse (package javax.servlet.http). If a protocol 

other than HTTP is used, this object is an instance of a class that implements 

javax.servlet.ServletResponse. 

Request Scope 

request This object represents the client request. The object normally is an instance of a class that 

implements HttpServletRequest (package javax.servlet.http). If a protocol other 

than HTTP is used, this object is an instance of a subclass of javax.servlet.Servlet- 

Request. 

Session Scope 

session This javax.servlet.http.HttpSession object represents the client session 

information if such a session has been created. This object is available only in pages that 

participate in a session. 

Fig. 37.2 JSP implicit objects. 


• Scripting 

Scripting 

– Dynamically generated content 

– Insert Java code and logic in JSP using scripting 


Scripting Components 

• JSP scripting components 

– Scriptlets (delimited by ) 

– Comments 

• JSP comments (delimited by ) 

• HTML comments (delimited by ) 

• Java’s comments (delimited by // and /* and */) 

– Expressions (delimited by ) 

– Declarations (delimited by ) 

Ex: 

– Escape sequences 


Scripting Components (cont.) 

Literal Escape 

sequence 

Description 

in the response to the client. 

' 

" 

\ 

\' 

\" 

\\ 

As with string literals in a Java program, the escape 

sequences for characters ', " and \ allow these 

characters to appear in attribute values. Remember that 

the literal text in a JSP becomes string literals in the 

servlet that represents the translated JSP. 

Fig. 37.3 JSP escape sequences. 


Scripting Example 

• Demonstrate basic scripting capabilities 

– Responding to get requests 


welcome.jsp 

 

 

Processing "get" requests with data 

 

 

 

 

Hello , 

Welcome to JavaServer Pages! 

 

 

 

Type your first name and press Submit 

 

 

 

 

 

 


Outline 

welcome.jsp 



• JSP standard actions 

– Provide access to common tasks performed in a JSP 

• Including content from other resources 

– Dynamically includes another resource in a JSP. As the JSP executes, 

the referenced resource is included and processed. 

• Forwarding requests to other resources 

– Forwards request processing to another JSP, servlet or static page. 

– This action terminates the current JSP’s execution 

– Allows a plug-in component to be added to a page in the form of a 

– browser-specific object or embed HTML element. 

• Interacting with JavaBeans 

Specifies that the JSP uses a JavaBean instance. This action specifies 

the scope of the bean and assigns it an ID that scripting components can use to manipulate 

the bean. 

– Sets a property in the specified JavaBean instance. 

Gets a property in the specified JavaBean instance and converts 

the result to a string for output in the response. 

– Delimited by and 



Action Description 

Dynamically includes another resource in a JSP. As the JSP executes, the 

referenced resource is included and processed. 

Forwards request processing to another JSP, servlet or static page. This 

action terminates the current JSP’s execution. 

Allows a plug-in component to be added to a page in the form of a 

browser-specific object or embed HTML element. In the case of a 

Java applet, this action enables the downloading and installation of the 

Java Plug-in, if it is not already installed on the client computer. 

Used with the include, forward and plugin actions to specify 

additional name/value pairs of information for use by these actions. 

JavaBean Manipulation 

Specifies that the JSP uses a JavaBean instance. This action specifies the 

scope of the bean and assigns it an ID that scripting components can use 

to manipulate the bean. 

Sets a property in the specified JavaBean instance. A special feature of 

this action is automatic matching of request parameters to bean properties 

of the same name. 

Gets a property in the specified JavaBean instance and converts the result 

to a string for output in the response. 

Fig. 37.5 JSP standard actions. 


Action 

• action 

– Enables dynamic content to be included in a JSP 

– More flexible than include directive 

• Requires more overhead when page contents change frequently 

• banner.html, toc.html, clock.jsp, include.jsp and the images 

directory into the jsp directory 

• Open your Web browser and enter the following URL to test 

• http://localhost:8080/jsp/include.jsp 


Banner.html 

 

Internet and World Wide Web Programming 

 


Toc.html 

 

 

Publications 

 

What's New 

 

Downloads/Resources 

 

FAQ (Frequently Asked Questions) 


clock.jsp 

 

 

 

A Simple JSP Example 

 

 

 

 

 

 


Include.jsp (Action) 

 

Using jsp:include 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


Outline 


Action 

• action 

– Enables JSP to forward request to different resources 

• Can forwarded requests only resources in same context 

• action 

– Specifies name/value pairs of information 

• Name/Value pairs are passed to other actions 

Example: forward1.jsp forwards the request to 

forward2.jsp 


forward1.jsp 

 

Forward request to another JSP 

 

 

 

 

 

else { 

forward1.jsp 

%> 

 

Type your first name and press Submit 

 

 

 

 

 

 


Forward2.jsp 

Processing a forwarded request 

 

 

Hello 

 

Your request was received and forwarded at 

 

 

 

 

 

 


Outline 


Action 

• action 

– Enables JSP to manipulate Java object 

• Creates Java object or locates an existing object for use in JSP 


Action (cont.) 

Attribute Description 

id The name used to manipulate the Java object with actions 

and . A variable of 

this name is also declared for use in JSP scripting elements. The name 

specified here is case sensitive. 

scope The scope in which the Java object is accessible—page, request, 

session or application. The default scope is page. 

class The fully qualified class name of the Java object. 

beanName The name of a bean that can be used with method instantiate of 

class java.beans.Beans to load a JavaBean into memory. 

type The type of the JavaBean. This can be the same type as the class 

attribute, a superclass of that type or an interface implemented by that 

type. The default value is the same as for attribute class. A 

ClassCastException occurs if the Java object is not of the type 

specified with attribute type. 

Fig. 37.13 Attributes of the action. 


A JavaBean that rotates advertisements. 

package com.jsp; 

public class Rotator { 

private String images[] = { "images/a.jpg", "images/b.jpg" }; 

Rotator.java 

private String links[] = {"http://www.rec.com/a.html","http://www.rec.com/b.html“ }; 

private int selectedIndex = 0; 

// returns image file name for current ad 

public String getImage() 

{ 

return images[ selectedIndex ]; 

} 

// returns the URL for ad's corresponding Web site 

public String getLink() 

{ 

return links[ selectedIndex ]; 

} 

// update selectedIndex so next calls to getImage and 

// getLink return a different advertisement 

public void nextAd() 

{ 

selectedIndex = ( selectedIndex + 1 ) % images.length; 

} 

} 


adrotator.jsp 

 

 

 

AdRotator Example 

 

 

 

 

AdRotator Example 

 

 

 

 

 

 


Outline 


Action (cont.) 


name The ID of the JavaBean for which a property (or properties) will be 

set. 

property The name of the property to set. Specifying "*" for this attribute 

causes the JSP to match the request parameters to the properties of the 

bean. For each request parameter that matches (i.e., the name of the 

request parameter is identical to the bean’s property name), the 

corresponding property in the bean is set to the value of the parameter. 

If the value of the request parameter is "", the property value in the 

bean remains unchanged. 

param If request parameter names do not match bean property names, this 

attribute can be used to specify which request parameter should be 

used to obtain the value for a specific bean property. This attribute is 

optional. If this attribute is omitted, the request parameter names must 

match bean property names. 

value The value to assign to a bean property. The value typically is the result 

of a JSP expression. This attribute is particularly useful for setting 

bean properties that cannot be set using request parameters. This 

attribute is optional. If this attribute is omitted, the JavaBean property 

must be of a type that can be set using request parameters. 

Fig. 37.16 Attributes of the action. 


• JSP directives 

– Messages to JSP container 

– Enable programmer to: 

• Specify page settings 

Directives 

• Include content from other resources 

• Specify custom-tag libraries 

– Delimited by 


Directives (cont.) 

Directive Description 

page Defines page settings for the JSP container to 

process. 

include Causes the JSP container to perform a translationtime 

insertion of another resource’s content. As the 

JSP is translated into a servlet and compiled, the 

referenced file replaces the include directive and 

is translated as if it were originally part of the JSP. 

taglib Allows programmers to define new tags in the form 

of tag libraries, which can be used to encapsulate 

functionality and simplify the coding of a JSP. 

Fig. 37.17 JSP directives. 


• JSP page directive 

page Directive 

– Specifies JSP’s global settings in JSP container 


language The scripting language used in the JSP. Currently, the only valid value 

for this attribute is java. 

extends Specifies the class from which the translated JSP will be inherited. This 

attribute must be a fully qualified class name. 

import Specifies a comma-separated list of fully qualified type names and/or 

packages that will be used in the current JSP. When the scripting 

language is java, the default import list is java.lang.*, 

javax.servlet.*, javax.servlet.jsp.* and 

javax.servlet.http.*. If multiple import properties are 

specified, the package names are placed in a list by the container. 

session Specifies whether the page participates in a session. The values for this 

attribute are true (participates in a session—the default) or false 

(does not participate in a session). When the page is part of a session, 

implicit object session is available for use in the page. Otherwise, 

session is not available, and using session in the scripting code 

results in a translation-time error. 

Fig. 37.18 Attributes of the page directive. 


page Directive (cont.) 


buffer Specifies the size of the output buffer used with the implicit object out. The 

value of this attribute can be none for no buffering, or a value such as 8kb 

(the default buffer size). The JSP specification indicates that the buffer used 

must be at least the size specified. 

autoFlush When set to true (the default), this attribute indicates that the output buffer 

used with implicit object out should be flushed automatically when the 

buffer fills. If set to false, an exception occurs if the buffer overflows. 

This attribute’s value must be true if the buffer attribute is set to none. 

isThreadSafe Specifies if the page is thread safe. If true (the default), the page is 

considered to be thread safe, and it can process multiple requests at the same 

time. If false, the servlet that represents the page implements interface 

java.lang.SingleThreadModel and only one request can be 

processed by that JSP at a time. The JSP standard allows multiple instances 

of a JSP to exists for JSPs that are not thread safe. This enables the container 

to handle requests more efficiently. However, this does not guarantee that 

resources shared across JSP instances are accessed in a thread-safe manner. 

info Specifies an information string that describes the page. This string is returned 

by the getServletInfo method of the servlet that represents the 

translated JSP. This method can be invoked through the JSP’s implicit page 

object. 



page Directive (cont.) 


errorPage Any exceptions in the current page that are not caught 

are sent to the error page for processing. The error page 

implicit object exception references the original 

exception. 

isErrorPage Specifies if the current page is an error page that will be 

invoked in response to an error on another page. If the 

attribute value is true, the implicit object exception 

is created and references the original exception that 

occurred. If false (the default), any use of the 

exception object in the page results in a translationtime 

error. 

contentType Specifies the MIME type of the data in the response to 

the client. The default type is text/html. 



include Directive 

• JSP include directive 

– Includes content of another resource at JSP translation time 

• Not as flexible as action 

– The include directive has only one attribute—file—that specifies 

the URL of the page to include. 

– The difference between directive include and action 

only if the included content changes. 

– For example, if the definition of an HTML document changes 

after it is included with directive include, future invocations of 

the JSP will show the original content of the HTML document, 

not the new content. 

– In contrast, action is processed in each request to 

the JSP. Therefore, changes to included content would be 

apparent in the next request to the JSP that uses action 

. 


includeDirective.jsp 

 

Using the include directive 

 

 

Tag Libraries 

• Custom tag libraries define one or more custom 

tags that JSP implementors can use to create 

dynamic content. 


customTagWelcome.jsp 

 

 

 

Simple Custom Tag 

Example 

 

The following text demonstrates a custom tag: 

 

 

 


WelcomeTagHandler.java 

Custom tag handler that handles a simple tag. 

package com.deitel.adv.jsp.taglibrary; 


import javax.servlet.jsp.*; 

import javax.servlet.jsp.tagext.*; 

public class WelcomeTagHandler extends TagSupport { 

// Method called to begin tag processing 

public int doStartTag() throws JspException 

{ 

// attempt tag processing 

try { 

// obtain JspWriter to output content 

JspWriter out = pageContext.getOut(); 

// output content 

out.print( "Welcome to JSP Tag Libraries!" ); 

} 

// rethrow IOException to JSP container as JspException 

catch( IOException ioException ) { 

throw new JspException( ioException.getMessage() ); 

} 

return SKIP_BODY; // ignore the tag's body 

} 

} 


Case Study: Guest Book 

Demonstrate 

• Enables users to place their first name, last name 

and e-mail address into a guest book database. 

• After submitting their information, users see a 

Web page containing all the users in the guest 

book. Each person’s e-mail address is displayed 

as a hyperlink that allows the user to send an e- 

mail message to the person. 


• GuestBean.java - JavaBean to store data for a guest in 

the guest book. 

• GuestDataBean.java - Class GuestDataBean makes a 

database connection and supports - inserting and 

retrieving data from the database. 

• JSPs guestBookLogin.jsp 

• guestBookView.jsp 

• The example demonstrates action . In 

addition, the example introduces the JSP page directive. 

– Action 

– JSP page directive 

– Use of JDBC 


.package com.jsp.beans; 

GuestBean.java 

JavaBean to store data for a guest in the 

guestbook 

public class GuestBean { 

private String firstName, lastName, email; 

public void setFirstName( String name ) // set the guest's first name 

{ 

firstName = name; 

} 

public String getFirstName() // get the guest's first name 

{ 

return firstName; 

} 

public void setLastName( String name ) // set the guest's last name 

{ 

lastName = name; 

} 

public String getLastName() // get the guest's last name 

{ 

return lastName; 

} 

public void setEmail( String address ) // set the guest's email address 

{ 

email = address; 

} 

public String getEmail() // get the guest's email address 

{ 

return email; 

} 


GuestDataBean.java 

Class GuestDataBean makes a database connection and 

supports 

inserting and retrieving data from the database. 

// package com.jsp.beans; 


import java.sql.*; 

import java.util.*; 

public class GuestDataBean { 

private Connection conn; 

private Statement st; 

// construct TitlesBean object 

public GuestDataBean() throws Exception 

{ 

// load the Cloudscape driver 

Class.forName( "sun.jdbc.odbc.JdbcOdbcDriver" ); 

// connect to the database 

conn = DriverManager.getConnection("jdbc:odbc:guestbook" ); 

st= connection.createStatement(); 

} // return an ArrayList of GuestBeans 



public List getGuestList() throws SQLException 

{ 

List guestList = new ArrayList(); 

// obtain list of titles 

ResultSet results = statement.executeQuery( 

"SELECT firstName, lastName, email FROM guests" ); 

// get row data 

while ( results.next() ) { 

GuestBean guest = new GuestBean(); 

guest.setFirstName( results.getString( 1 ) ); 

guest.setLastName( results.getString( 2 ) ); 

guest.setEmail( results.getString( 3 ) ); 

guestList.add( guest ); 

} 

return guestList; 

} 


insert a guest in guestbook database 


public void addGuest( GuestBean guest ) throws SQLException 

{ 

statement.executeUpdate( "INSERT INTO guests ( firstName, " + 

"lastName, email ) VALUES ( '" + guest.getFirstName() + "', '" + 

guest.getLastName() + "', '" + guest.getEmail() + "' )" ); 

} 

// close statements and terminate database connection 

protected void finalize() 

{ 

// attempt to close database connection 

try { 

st.close(); 

conn.close(); 

} 

// process SQLException on close operation 

catch ( SQLException sqlException ) { 

sqlException.printStackTrace(); 

} 

} 

} 


guestBookLogin.jsp 

 

 

 

 

 

Guest Book Login 

 


 

 

 

Enter your first name, last name and email address to register in our guest book. 

 

 

First name 

 

 

 

 


Last name 

guestBookLogin.jsp 

 

Email 

 

 

/td> 

 

 

 

 

 

 

 

 


guestBookView.jsp 

 

 

 

 

 

 

 

Guest List 

 


Guest List 

 

 

Last name 

First name 

Email 

 

 


guestBookView.jsp 

 

 

 

 

 

 

 

 

 

 


Case Study: Guest Book (Cont.) 


Case Study: Guest Book (Cont.) 



Steps to Install 

& 

Deploy in Tomcat Server 


1. Select the Install file and double click. 

2. Click Next to Continue. 

Steps to Install and Deploy in Tomcat Server 


3. Click I Agree. 

4. Check all the option and click Next. 


5. Delete the default path and type D:\tomcat. 


6. Type the admin password. 

7. Select the path of the JVM. 


8. The system displays the installation progress. 

9. Make check for Run Apache Tomcat and Show and uncheck Show Readme. 


10. The system display the following screen. 

11. Open the Internet Explorer and type http://localhost:8080/ 


12. Create the necessary Java for Servlet, HTML and MDB files and store in a directory. 

13. Compile the Java file. 

14. Create a folder WEB-INF under your folder. 

15. Create a folder named CLASSES under Web-INF folder and copy all your .class files. 

16. Copy the WEB.XML file from d:\tomcat\webapps\ROOT\WEB-INF folder to your WEB- 

INF folder. Edit the servlet-name, servlet-class in servlet tag and also servlet-name, urlpattern 

in servlet-mapping. 

 

 

 

Welcome to Tomcat 

 

Welcome to Tomcat 

 

 

 

Banking 

Banking 

 

 

Banking 

/Banking 

 

 

 

17. Create a war file by using the following syntax: 

D:\Student:>jar –cvf Banking.war . 


18. Open the tomcat home and select Tomcat Manager. Type the password and click Ok. 

19. The system opens the following screen. 


20. Go to the WAR file to deploy option and select Browse. 

21. Select your war file and click Open. 


22. Click the Deploy button. 

23. After successful deployment you will get a screen like as below: 


24. Open the browser by typing the URL as http://localhost:8080/Banking.

1 of 2 - Rajalakshmi Engineering College

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?