BSIT 52 Main PG 1 92

BSIT 52 Web Programming
Chapter 1
Introduction to Web Programming
1.1 INTRODUCTION TO WEB

he web was initially conceived and created by Tim Berners-Lee, a computer specialist from the European Particle Physics Laboratory (CERN) in 1989. The main reason behind this creation was a need for a collaborative knowledge- sharing tool to support scientific work in an international context. The web is not synonymous with the Internet, though some people may think so. Actually, the web is one way to utilize the infrastructure of the Internet. In other words, the web is an application of the Internet. Since then it has grown into the web we know today under the guidance of the World Wide Web Consortium (W3C) that is a volunteer organization based at the Massachusetts Institute of Technology (MIT) with the responsibility for developing and maintaining common standards. Perhaps the single most important technological development in the history of the web, besides the creation of the web itself, was the development of graphical browsers in the early 90s. Beginning with NCSAs Mosaic and its evolution into Netscapes Navigator and Microsofts Internet Explorer, these programs allowed users to browse the resources on the web in an extremely user friendly environment. This made the web a fun place and marked the beginning of the true web revolution.
So what exactly is the web?

The web is a complex, international, cross platform, cross language, cross cultural mesh of servers, clients, users, databases, and quite a few artificial intelligences all talking, working, searching, viewing, accessing, downloading, and who knows what else.
Chapter 1 - Introduction to Web Programming
Fig 1.1 Understanding Web
As such, no one owns or controls the web. In fact, it is impossible to own or control by its very nature and design. In fact, it is not even an it. You cant hold the web or make it tangible. Instead, you can think of the web not as a thing, but as a process, an action, a medium of communication. The Internet is quite a different thing from an Intranet. An Intranet is a mini web that is limited to the users, machines, and software programs of a specific organization, usually a company. Since organizations are typically small and have more control over policies and information systems, intranets are often more controllable.
1.2 BUILDING ELEMENTS OF WEB

There are certain standards of communication upon which the web is built. These standards sit at a layer above operating systems, computer languages, or Internet transmission protocols and provide a basic medium for communication. The two most important standards (protocols) used on the web today are HTTP and HTML.
HTML the Language of the Web

So what does a web browser (client software) do with a file it receives from a web server (server software)? Does it just display it to the human user as is? The answer is yes and no. Actually, in some
cases, the web browser will display a document exactly the way it receives it from the web server. For example, if the document requested is an image, the web browser will display it directly. Similarly, plain text files will be displayed just as they are sent. However, if the document is an HTML document, the web browser will interpret the HTML and display it according to the instructions contained within the HTML code. HTML (Hyper Text Markup Language) is a very simple language used to describe the logical structure of a document. Actually, though HTML is often called a programming language it is really not. Programming languages are Turing-complete, or computable. That is, programming languages can be used to compute something such as the square root of pi or some other such task. Typically programming languages use conditional branches and loops and operate on data contained in abstract data structures. HTML is much easier than all of that. HTML is simply a markup language used to define a logical structure rather than compute anything. For example, it can describe which text the browser should emphasize, which text should be considered body text versus header text, and so forth. The beauty of HTML of course is that it is generic enough that it can be read and interpreted by a web browser running on any machine or operating system. This is because it only focuses on describing the logical nature of the document, not on the specific style. The web browser is responsible for adding style. For instance emphasized text might be bolded in one browser and italicized in another. it is up to the browser to decide. The language itself is fairly simple and follows a few important standards. Firstly, HTML tags define document description that is instructions embedded within a less-than (<) and a greater-than (>) sign. To begin formatting, you specify a format type within the < and the >. Most tags in HTML are ended with a similar tag with a slash in it to specify an end to the formatting. It is important to note that the formatting codes within an HTML tag are case-insensitive. You can also compound formatting styles together in HTML. However, you should be very careful to nest your code correctly. For example, the following HTML code shows correct and incorrect nesting: <CENTER><EM>this text is bolded and centered correctly</EM></CENTER> <EM><CENTER>this text is bolded and centered incorrectly</EM></CENTER> In the incorrect version, notice that the bold tag was closed before the center tag, even though the bold tag was opened first. The general rule is that tags on the inside should be closed before tags on the outside. Finally, HTML tags can not only define a formatting option, they can also define attributes to those
options as well. To do so, you specify an attribute and an attribute value within the HTML tag. For example, the following tag creates a heading style aligned to the left <H2 ALIGN = LEFT>this text has a heading level two style and is aligned to the left </H2> There are a few things to note about attributes however. First, it is not necessary to enclose attribute values within quotes unless white space is included in the value. Secondly, it is not necessary to have a space before or after the equal sign that matches an attribute to its value. When you close an HTML tag with an attribute, you should not include attribute information in the closing. Finally, you should know that web browsers do not care about white space that you use in your HTML document.
HTTP
HTTP is a protocol that is defined in several RFCs (Request for Comments) located at the Internic and has had several generations worth of revisions (HTTP/09, HTTP/1.0 and HTTP/1.1). HTTP is a request-response type protocol that specifies that a client will open a connection to a server then send a request using a very specific format. The server will then respond and close the connection. The main thing you need to know is that HTTP is a language spoken between your web browser (client software) and a web server (server software) so that they can communicate with each other and exchange files. Now let us understand how client/server system works using HTTP protocol. Client/server system is a very keen way of distributing information across information systems like a local area network (LAN), a wide area network (WAN), or the Internet. A client/server system works something like this: A big hunk of computer (called a server) sits in some office somewhere with a bunch of files that people might want access to. This computer runs a software package that listens all day long to requests over the wires. Typically, these requests will be in some language and some format that the computer understands, but in English sound something like, hello software package running on a big hunk of computer, please give me the file called mydocument.txt that is located in the directory /usr/people/myname. The server software will then access the server hardware, find the requested file, send it back over the wires to the client who requested it, and then wait for another request from the same or another client. Usually, the client is actually a software program, like Netscape Navigator, that is being operated by a person who is the one who really wants to see the file. The client software however, deals with all the underlying client/server protocol stuff and then displays the document (that usually means interpreting HTML) The whole process looks something like the figure below:
Fig 1.2 HTTP communication between client and server.
So web is a huge client/server system, which uses HTTP (HyperText Transport Protocol). Web programming is a game of getting user input, processing that input, and returning a dynamic response. Thus, the first thing that you must learn how to do is get user input from a web browser to a web server. Fortunately the HTTP protocol provides two main ways to send information to a web server above and beyond the URL of a requested file. These two ways are the POST and GET methods.
The GET Method

The foundation of HTTP/0.9 (the first implementation of the HTTP protocol) was the definition of the GET method that was used by a web browser to request a specific document. For example, the following HTTP request would return the document index.html that was located in the web servers root directory called webdocs. GET /webdocs/index.html CRLF Notice that the GET request began with the GET keyword, included a document to retrieve, and ended with a carriage return and line feed combination. If you would like, you can try making a GET request by connecting to your favorite web server and sending the GET request yourself (as if you were a web browser).
The Post Method

The POST method allows web browsers to send an unlimited amount of data to a web server by allowing them to tag it on to an HTTP request after the request headers as the message body. Typically, the message body would be our old familiar encoded URL string after the question mark (?).
Thus, it would not be strange for a web server to get a POST request that looked something like the following: POST /cgi-bin/phone_book.cgi HTTP/1.0 Referer: http://www.somedomain.com/Direcory/file.html User-Agent: Mozilla/1.22 (Windows: I: 32bit) Accept */* Content-type: application/x-www-form-urlencoded Content-length: 29 name=Selena+Sol&phone=7700404 Notice that the Content-length request header is equal to the number of characters in the body of the request. This is important because a CGI script could easily parse through the variables in the body using the length. Of course, as with the GET method, the user never needs to deal with the protocol itself. Instead, the browser does all the work of preparing the POST request headers and body.
1.3 WHY JAVASCRPTS AND DHTML

Every time when user requests querying Server and getting information from server is a very slow process. Also, Some actions like verifying whether user has entered all the fields or user has entered only digits, not characters can be verified at the Client Side only. For this some programming support should be provided. For doing this we use Java Script. Though JavaScript contains the name java, they are not same. While Java can be used to make standalone applets (like a regular programming language), JavaScript is generally only used inside of HTML documents. DHTML stands for Dynamic Hyper Text Markup Language. DHTML is combination of Web Technologies which can be basically used to set the properties of Web Pages and its look and feel.
1.4 INTRODUCTION TO CGI

CGI stands for Common Gateway Interface. As its name implies, CGI provides a gateway between a human user with unexpected and complex needs, and a powerful, command/logic oriented server. As a gateway, CGI must perform one task very well. It must translate. All CGI applications must translate the needs of clients into server requests, and translate server replies into meaningful and well-presented answers. This can be quite a chore, since computers and humans typically speak very different languages. As such, CGI must be adept at manipulating text (be it the text inputted by the client or the text received
from the server). A CGI application must be able to take strings of data and translate them from one language to another constantly and quickly. The CGI script will be responsible for processing the form data, which is filled by user and responding to the client in the form of dynamically generated HTML. CGI is the part of the Web server that can communicate with other programs running on the server. With CGI, the Web server can call up a program, while passing user-specific data to the program (such as what host the user is connecting from, or input the user has supplied using HTML form syntax). The program then processes that data and the server passes the programs response back to the Web browser.
1.5 STATIC Vs DYNAMIC WEB PAGES

The majority of the web pages on the Internet today are static HTML pages. HTML pages are simple text files that are displayed by your browser upon request. Static pages are easily read by search engine spiders. Dynamic Web pages, on the other hand, contain little actual text. They are created each time they are requested, retrieving information from a database. The information retrieved depends upon the input query. Cookie data, query strings, session id, or specific values are examples of the types of information required for a dynamic page to be created. Spiders are not capable of providing this type of information and therefore unable to provide appropriate information they simply stop indexing dynamic sites. Dynamic pages produce HTML code, and send that code to your browser. Visitors find dynamically generated web pages to be useful because they are provided instant access to highly relevant information. Dynamic sites are also easy to update. New products can be added by simply editing the database. This saves countless hours (and dollars) to update multiple static pages. Dynamic web pages are created using technologies like CGI, JSP/ASP, Cold Fusion etc. URLs of dynamically generated pages often contain question marks (?), percentage signs (%) and other symbols (&, + and $) or text (cgi-bin) making up the query string. Most spiders (Used in search engines) can not read to the right of the question mark (?) and therefore these pages are not indexed.
1.6 SERVLETS AND JSP

Servlet are the Web Server side programs, which process the Client Request and send the result. Servlet syntax is similar to Java Language. So learning Servlet is ver easy and it can be widely used. JSP stands for Java Server Pages. JavaServer Pages is a technology for developing web pages that
include dynamic content. Unlike a plain HTML page, which contains static content that always remains the same, a JSP page can change its content based on any number of variable items, including the identity of the user, the users browser type, information provided by the user, and selections made by the user.
QUESTIONS
1. 2. 3. 4. 5. 6. 7. What is web? What is the difference between intranet and internet? Explain GET and POST method briefly. Explain how HTTP is used in client/server system. Discuss the difference between static and dynamic web pages. HTML is the Language of the Web Explain? Why do we require JavaScripts and DHTML? Brief about role played by CGI programming in web programming?
Chapter 2
HTML
2.1 WHAT IS HTML?
-T-M-L are initials that stand for HyperText Markup Language (computer people love initials and acronyms youll be talking acronyms ASAP). Let me break it down for you:
Hyper is the opposite of linear. It used to be that computer programs had to move in a linear fashion. HTML does not hold to that pattern and allows the person viewing the World Wide Web page to go anywhere, any time they want. Text is what you will use. Real, honest to goodness English letters. Mark up is what you will do. You will write in plain English and then mark up what you wrote. Language because they needed something that started with L to finish HTML and Hypertext Markup Louie didnt flow correctly. Because its a language, really but the language is plain English.
HTML allows you to:

l l l l
Publish documents to the Internet in a platform independent format Create links to related works from your document Include graphics and multimedia data with your document Link to non-World Wide Web information resources on the Internet
10
Chapter 2 - HTML
HTML was originally intended to be used for encoding document structures. While there are now many formatting and formatting-like tags, there are also numerous tags that apply to text structures like headings, paragraphs and tables.
2.2 YOUR FIRST HTML PAGE

<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html>
Save the file as mypage.htm. Start your Internet browser. Select Open (or Open Page) in the File menu of your browser. A dialog box will appear. Select Browse (or Choose File) and locate the HTML file you just created mypage.htm - select it and click Open. Now you should see an address in the dialog box, for example C:\MyDocuments\mypage.htm. Click OK, and the browser will display the page.
Example Explained
The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document. The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window. The text between the <title> tags is the title of your document. The title is displayed in your browsers caption. The text between the <body> tags is the text that will be displayed in your browser. The text between the <b> and </b> tags will be displayed in a bold font.
HTM OR HTML EXTENSION?

When you save an HTML file, you can use either the .htm or the .html extension. We have used .htm in our examples. It might be a bad habit inherited from the past when some of the commonly used software only allowed three letter extensions. With newer software we think it will be perfectly safe to use .html.
11
HTML Tags

HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters < and > The surrounding characters are called angle brackets HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag The text between the start and end tags is the element content HTML tags are not case sensitive, <b> means the same as <B>
HTML Elements
Remember the HTML example from the previous page:
<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html>
This is an HTML element:
<b>This text is bold</b>

The HTML element starts with a start tag:<b> The content of the HTML element is: This text is bold The HTML element ends with an end tag: </b> The purpose of the <b> tag is to define an HTML element that should be displayed as bold. This is also an HTML element:
<body> This is my first homepage. <b>This text is bold</b> </body>

This HTML element starts with the start tag <body>, and ends with the end tag </body>. The purpose of the <body> tag is to define the HTML element that contains the body of the HTML document.
12
Why do We Use Lowercase Tags?
Chapter 2 - HTML
We have just said that HTML tags are not case sensitive: <B> means the same as <b>. When you surf the Web, you will notice that most tutorials use uppercase HTML tags in their examples. We always use lowercase tags. Why? If you want to prepare yourself for the next generations of HTML, you should start using lowercase tags. The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation, and XHTML (the next generation HTML) demands lowercase tags.
Tag Attributes
Tags can have attributes. Attributes can provide additional information about the HTML elements on your page. This tag defines the body element of your HTML page: <body>. With an added bgcolor attribute, you can tell the browser that the background color of your page should be red, like this: <body bgcolor=red>. This tag defines an HTML table: <table>. With an added border attribute, you can tell the browser that the table should have no borders: <table border=0"> Attributes always come in name/value pairs like this: name=value. Attributes are always added to the start tag of an HTML element.
2.3 LIST OF HTML TAGS

Tags for Document Structure HTML HEAD BODY Heading Tags TITLE BASE META STYLE LINK Block-Level Text Elements ADDRESS BLOCKQUOTE DIV H1 through H6
13
P PRE XMP
Lists

DD DIR DL DT LI MENU OL UL
Text Characteristics B BASEFONT BIG BLINK CITE CODE EM FONT I KBD PLAINTEXT S SMALL
2.4 TAGS IN DETAIL

Tags for Document Structure
This section describes the tags that indicate the basic structure of a web page.
l l l l
HTML HEAD TITLE BODY
14
HTML (outermost tag)
Chapter 2 - HTML
The HTML tag identifies a document as an HTML document. All HTML documents should start with the <HTML> tag and end with the </HTML> tag.
Example
The following example begins and ends a short document with the HTML tag.
<HTML> <BODY> This is a small HTML file. </BODY> </HTML>
HEAD (document header)

The HEAD tag defines an HTML document header. The header contains information about the document rather than information to be displayed in the document. The web browser displays none of the information in the header, except for text contained by the TITLE tag. You should put all header information between the <HEAD> and </HEAD> tags, which should precede the BODY tag. The HEAD tag can contain TITLE, BASE, ISINDEX, META, SCRIPT, STYLE, and LINK tags.
Syntax
<HEAD>...</HEAD>
Example
<HEAD> <TITLE> Mozilla speaks out</TITLE> <BASE HREF="http://www.mozilla.com"> </HEAD>
BODY (main content of document)

The BODY tag specifies the main content of a document. You should put all content that is to appear in the web page between the <BODY> and </BODY> tags. The BODY tag has attributes that let you specify characteristics for the document. You can specify the background color or an image to use as a tiled background for the window in which the document is displayed. You can specify the default text color, active link color, unvisited link color, and visited link color.
15
You can specify actions to occur when the document finishes loading or is unloaded, and when the window in which the document is displayed receives or loses focus.
Syntax
<BODY BACKGROUND="bgURL" BGCOLOR="color" TEXT="color" LINK="color" ALINK="color" VLINK="color" ONLOAD="loadJScode" ONUNLOAD="unloadJScode" ONBLUR="blurJScode" ONFOCUS="focusJScode" CLASS="styleClass" ID="namedPlaceOrStyle" LANG="ISO" STYLE="style" > ... </BODY>
BACKGROUND=bgURL specifies an image to display in the background of the document. The URL value can be an absolute URL (for example, http://www.yourcompany.com/images/image1.htm) or a relative URL (for example, images/image1.gif). The image is tiled, which means it is repeated in a grid to fill the entire window or frame where the document is displayed. . BGCOLOR=color sets the color of the background. TEXT=color sets the color of normal text (that is, text that is not in a link) in the document. LINK=color sets the default text color of unvisited links in the document. An unvisited link is a link that has not been clicked on (or followed). ALINK=color specifies the color to which links briefly change when clicked. After flashing the ALINK color,
16
Chapter 2 - HTML
visited links change to the VLINK color if it has been specified; otherwise they change to the browsers default visited link color. VLINK=color specifies the text color of visited (followed) links in a document. ONLOAD=loadJScode specifies JavaScript code to execute when the document finishes loading. ONUNLOAD=unloadJScode specifies JavaScript code to execute when the document is unloaded. ONFOCUS=focusJScode specifies JavaScript code to execute when the window in which the document is displayed receives an onFocus event, indicating that the window has acquired focus. ONBLUR=blurJScode specifies JavaScript code to execute when the window in which the document is displayed receives an onBlur event, indicating that the window has lost focus.
Example
The following example sets the background color to light yellow, ordinary text to black, unvisited links to blue, visited links to green, and active links to red:
Block-Level Text Elements

This section discusses the tags that display block-level elements in text, such as headings, paragraphs, block quotes, and so on.
l l l l l
ADDRESS BLOCKQUOTE DIV H1 through H6 P
ADDRESS (address format)

The ADDRESS tag displays address information in a format determined by each browser. Netscape Navigator displays addresses in italic. The intent of the ADDRESS tag is that it shows address information and is usually placed at the top or bottom of a document.
17
ADDRESS elements start on a new line. Most browsers do not add extra space before an ADDRESS element.
Syntax
<ADDRESS CLASS="styleClass" ID="namedPlaceOrStyle" LANG="ISO" STYLE="style" >... </ADDRESS>
Example
<ADDRESS> Netscape Communications Corporation<BR> 501 East Middlefield Road<BR> Mountain View, CA 94043<BR> </ADDRESS>
BLOCKQUOTE (indented block of text)

The BLOCKQUOTE tag indents a block of text. The intent of the BLOCKQUOTE tag is for quoting paragraphs, although you can use it anywhere that you want paragraphs to be indented. BLOCKQUOTE elements start on a new line. Netscape Navigator adds extra space before a BLOCKQUOTE element, but not all browsers do.
Syntax
<BLOCKQUOTE>... CLASS="styleClass" ID="namedPlaceOrStyle" LANG="ISO" STYLE="style" > </BLOCKQUOTE>
18
Example
Chapter 2 - HTML
<BLOCKQUOTE> Bob Lisbonne, vice president of client product marketing at Netscape said: <BLOCKQUOTE> "Networked enterprises can begin to deploy Webtops as consistent corporate computing interfaces that span all platforms and can be updated dynamically." </BLOCKQUOTE> </BLOCKQUOTE>
DIV (section of a document)

The DIV tag encloses a block of content. The DIV tag is useful for applying alignment and style characteristics to a section of a document that contains multiple elements rather than having to apply the alignment and styles to each element in the block. Each DIV element starts on a new line.
Syntax
<DIV ALIGN="LEFT"|"CENTER"|"RIGHT" CLASS="styleClass" ID="namedPlaceOrStyle" LANG="ISO" STYLE="style" >
ALIGN
specifies the horizontal alignment of the block of content. The value can be one of the following:
l l l
LEFT aligns the contents of the DIV block to the left (the default). CENTER centers the contents of the DIV block. RIGHT aligns the contents of the DIV block to the right.
Example
The following example uses a DIV tag to apply a style to a right-aligned block of content. The STYLE attribute is a universal attribute available to all tags inside the body of a document.
19
H1 through H6 (standard headings)

The tags H1, H2, H3, H4, H5, and H6 display headings. Level 1 headings (H1) are the most prominent headings, and level 6 headings (H6) are the least prominent. Headings are usually displayed in a bolder, larger font than normal body text. Heading elements start on a new line. All browsers add extra space before heading elements.
Syntax
<H1 <H2 <H3 <H4 <H5 <H6 ALIGN="LEFT"|"CENTER"|"RIGHT">...</H1> ALIGN="LEFT"|"CENTER"|"RIGHT">...</H2> ALIGN="LEFT"|"CENTER"|"RIGHT">...</H3> ALIGN="LEFT"|"CENTER"|"RIGHT">...</H4> ALIGN="LEFT"|"CENTER"|"RIGHT">...</H5> ALIGN="LEFT"|"CENTER"|"RIGHT">...</H6>
All the headings from H1 through H6 can also take the following universal attributtes:
CLASS="styleClass" ID="namedPlaceOrStyle" LANG="ISO" STYLE="style"
ALIGN
specifies the horizontal alignment of the heading. The value can be one of these:
l l l
LEFT aligns the heading flush left (the default). CENTER centers the heading text. RIGHT aligns the heading flush right.
Example
<H1>Level <H2>Level <H3>Level <H4>Level <H5>Level <H6>Level 1 2 3 4 5 6 Heading</H1> Heading</H2> Heading</H3> Heading</H4> Heading</H5> Heading</H6>
P (paragraph)
The P tag displays a paragraph. All P elements start on a new line and are usually preceded by extra space.
20
Chapter 2 - HTML
You can also use the P tag to insert a line break with extra space. To insert a line break without adding extra space, use the BR tag. The closing </P> tag guarantees that the paragraph is followed by extra space. Omitting the closing </ P> tag often has no effect, especially if the P tag is being used as a line break (that is, the paragraph has no content), or the paragraph is followed by an element that starts on a new line and is preceded by extra space.
Syntax
<P ALIGN="LEFT"|"CENTER"|"RIGHT" CLASS="styleClass" ID="namedPlaceOrStyle" LANG="ISO" STYLE="style" > ... </P>
ALIGN
The value can be one of these:
l l l
LEFT aligns the paragraph flush left (the default). CENTER centers the paragraph. RIGHT aligns the paragraph flush right.
Example The following example displays two paragraphs.
<P>Use the P tag to display paragraphs. The P element starts on a new line, and is preceded by extra space. <P> You can also use the P tag to insert a line break with extra space.In most, but not all, cases, it is OK to omit the closing tag. </P>
LISTS
This section describes the tags for displaying lists:
21
l l l
OL UL LI
OL (ordered list)
The OL tag displays an ordered, or numbered, list. The default numbering style is determined by the browser, but you can use the tags TYPE attributes to change the numbering sequence and numbering style. Use the LI tag to designate the individual list items.
Syntax
<OL START="value" TYPE="A"|"a"|"I"|"i"|"1" CLASS="styleClass" ID="namedPlaceOrStyle" LANG="ISO" STYLE="style" > ... </OL>
START=value indicates the starting number for the list. The number must be a positive integer
TYPE
The value can be one of the following:
l l l l l
A specifies a sequence of uppercase letters a specifies a sequence of lowercase letters I specifies a sequence of uppercase Roman numerals i specifies a sequence of lowercase Roman numeral 1 specifies a sequence of numbers.
Example
The following example uses the LI tag to define three list elements in an ordered list. The numbers are shown as roman numerals and the first item has the number three.
22
<P>The following steps outline how to create HTML files:</P>
Chapter 2 - HTML
<OL START="3" TYPE="I"> <LI> Use a text editor or Netscape Composer to create your HTML file. <LI> Put the HTML files on a web server. <LI> Test the files by viewing them in a web browser. </OL>
UL (unordered list)
The UL tag displays a bulleted list. You can use the tags TYPE attribute to change the bullet style. Use the LI tag to designate the individual list items in the list.
Syntax
<UL CLASS="styleClass" ID="namedPlaceOrStyle" LANG="ISO" STYLE="style" > TYPE="CIRCLE"|"DISC"|"SQUARE"
TYPE
defines the type of bullet used for each list item. The value can be one of the following:
l l l
CIRCLE specifies a hollow bullet. DISC specifies a solid round bullet (Netscape Navigators default). SQUARE specifies a square bullet.
Example
<P>Netscape Composer offers the following benefits</P> <UL TYPE=SQUARE>
Edit web pages directly in Navigator Easy options for setting background and link colors As easy to use as any text editor No need to learn HTML </UL>
23
LI (list item)
The LI tag indicates an itemized element, which is usually preceded by a bullet, a number, or a letter. The LI tag is used inside list elements such as OL (ordered list) and UL (unordered list). A single itemized element can contain other tags such as the P tag. The LI tag does not require a closing tag.
Syntax
<LI TYPE="DISC"|"CIRCLE"|"SQUARE"|"A"|"a"|"I"|"i"|"1" VALUE="number" CLASS="styleClass" ID="namedPlaceOrStyle" LANG="ISO" STYLE="style" >
TYPE
specifies the type of symbol or numbering sequence to use before each item.
l l l l l l l l
DISC specifies a solid bullet. CIRCLE specifies a hollow bullet. SQUARE specifies a square bullet. A specifies a sequence of uppercase letters. a specifies a sequence of lowercase letters. I specifies a sequence of uppercase Roman numerals. i specifies a sequence of lowercase Roman numeral. 1 specifies a sequence of numbers.
The values DISC, CIRCLE, and SQUARE can be used in unordered lists, while the values A, a, I, i, and 1 can be used in ordered lists that have a numerical sequence. VALUE=number indicates the starting number for an item in an ordered list. This attribute is valid only in an ordered list See. OL for information on the types of numbering available.
24
Used Within
DIR, DL, OL, UL, MENU
Chapter 2 - HTML
Example
The LI tag allows you to:<P> <UL> <LI>Identify items in a numbered list <LI>Identify items in an unordered list <LI>Identify items in a directory list <LI>Identify items in a menu </UL>
TABLES (table)
The TABLE tag defines a table. Inside the TABLE tag, use the TR tag to define rows in the table, use the TH tag to define row or column headings, and use the TD tag to define table cells. The TABLE tag can also contain a CAPTION tag, which specifies the caption for the table. You can specify the width of the border surrounding the table and the default background color of the table. (Individual rows and cells in the table can have their own background color.) You can use the CELLSPACING attribute to specify the distance between cells in the table and the CELLPADDING attribute to specify the distance between the border and content of every cell. If you specify the width and height of the table, the browser will do its best to make the table fit the specified dimensions, but in some cases this may not be possible. For example, if the table contains cells that contain non-wrapping long lines, the table may not fit in a specified width.
Syntax
<TABLE ALIGN="LEFT|RIGHT" BGCOLOR="color" BORDER="value" CELLPADDING="value" CELLSPACING="value" HEIGHT="height" WIDTH="width" COLS="numOfCols" HSPACE="horizMargin" VSPACE="vertMargin" > ... </TABLE>
25
ALIGN
specifies the horizontal placement of the table.
l
LEFT aligns the table on the left (the default). The content following the table flows to the right of the table. RIGHT aligns the table on the right. The content following the table flows to the left of the table. CENTER aligns the table in the center. Content does not flow on either side.
l l
BGCOLOR=color sets the color of the background for the table. This color can be overridden by a BGCOLOR tag in the TH, TR, or TD tags. See Color Units for information about color values. BORDER=value indicates the thickness, in pixels, of the border to draw around the table. Give the value as an integer. A value of 0 means the table has no border. You can also supply the BORDER attribute without specifying a value for it to indicate that the table has a border of the default thickness. CELLPADDING=value determines the amount of space, in pixels, between the border of a cell and the contents of the cell. The default is 1. CELLSPACING=value determines the amount of space, in pixels, between individual cells in a table. The default is 2. HEIGHT=height specifies the height of the table. The default is the optimal height determined by the contents of each cell. The height value can be a number of pixels, given as an integer, or a percentage of the height of the page or parent element, given as an integer followed by the percent sign. The table is scaled to fit the specified height and width. WIDTH=width defines the width of the table. The default is the optimal width determined by the contents of each cell. The width value can be a number of pixels, given as an integer, or a percentage of the width of the page or parent element, given as an integer followed by the percent sign. The table is scaled to fit the specified height and width. COLS=numOfCols indicates how many virtual columns of equal width fit in the width of the window. Each actual
26
Chapter 2 - HTML
column in the table occupies a virtual column. You would typically set the COLS attribute to be equal to the number of columns in the table to indicate that all the columns in the table have the same width. If the WIDTH attribute is supplied, the COLS attribute indicates how many virtual columns fit in the specified width. If the WIDTH attribute is not supplied, the COLS attribute indicates how many virtual columns fit in the current window or frame. Each column in the table occupies one of the virtual columns. Suppose that the WIDTH attribute is 80% and the COLS attribute is 4. In this case, each virtual column takes up 20% of the width of the window. Each actual column in the table occupies a virtual column, so it occupies 20% of the width of the window, so long as the table has from 1 to 4 columns inclusive. Note, however, that if the minimum width needed to display the contents of an actual column is greater than the width of a virtual column, then the width of the column is expanded to fit its contents. If the table has more actual columns than the COLS value, then the columns in excess of the COLS value are displayed in the minimum width required to fit their contents, and the other columns divide the remaining space equally between them. For example, suppose the table has 4 columns, the WIDTH attribute is 80%, and the COLS value is 3. What happens here is that the table takes up 80% of the width of the window. The fourth column uses the minimum width necessary to display the contents of the column. The other 3 columns divide the remaining width of the table equally between them. HSPACE=horizMargin specifies the distance between the left and right edges of the table and any surrounding content. VSPACE=vertMargin specifies the distance between the top and bottom edges of the table and any surrounding content.
Example 1. A Simple Table.

The following example creates a three-column, four-row table, with a yellow background. The caption Tables are as easy as one, two, three is displayed at the bottom of the table.
27
<TABLE BORDER CELLPADDING="8" CELLSPACING="4" BGCOLOR=yellow> <TR><TH> English </TH><TH> Spanish </TH><TH> German </TH></TR> <TR><TD> one </TD><TD> uno </TD><TD> ein </TD></TR> <TR><TD> two </TD><TD> dos </TD><TD> zwei </TD></TR> <TR><TD> three </TD><TD> tres </TD><TD> drei </TD></TR> <CAPTION ALIGN="BOTTOM"> <B>Table 1</B>: Tables are as easy as one, two, three </CAPTION> </TABLE>
FORMATTING TAGS
l l l
BR CENTER HR
BR (line break)
The BR tag inserts a line break. The BR tag does not add extra space before the new line. If text is wrapping around an element such as an image, you can use the CLEAR attribute of the BR tag to force the text to continue its flow at the next clear line (that is, it stops wrapping around the element). The BR tag does not require a closing tag.
Syntax
<BR CLEAR="ALL"|"LEFT"|"RIGHT" >
CLEAR
prevents text from wrapping around one or both sides of an element such as an image.
l
ALL prevents text from wrapping to the left or the right of any element. The result is that the text appears at the next completely clear line. LEFT causes text to appear at the next clear left margin. That is, text is not allowed to wrap to the left of any element. RIGHT causes text to appear at the next line that has a clear right margin. That is, text is not allowed to wrap to the right of any element.
28
Example
The following example inserts a line break in a speech from Hamlet:
Chapter 2 - HTML
<P>Hamlet's famous speech begins: <BLOCKQUOTE><I>To be, or not to be?<BR> That is the question</I></BLOCKQUOTE>
CENTER (Centered content)

The CENTER tag centers content. All content between the <CENTER> and </CENTER> tags is centered. Some tags take an optional ALIGN attribute that specifies the alignment of an element. However, the <CENTER> tag lets you easily center a block of content without having to specify the alignment of each element in the content. It also lets you center elements, such as images, and arbitrary content that could not otherwise be centered. You can put a CENTER tag anywhere, such as in the middle of a paragraph. The value of an ALIGN attribute overrides the <CENTER> tag.
Syntax
<CENTER>...</CENTER>
Example
<CENTER> <H1>Netscape's Mascot Mozilla</H1> <IMG SRC="/images/mozilla.gif> </CENTER>
HR (horizontal rule)
The HR tag draws a horizontal line across the document frame or window. You can use a horizontal line to visually divide information or sections. The HR tag does not have a closing tag.
ALIGN
specifies the horizontal alignment of lines that do not span the width of the page.
l l l
CENTER displays the line centered (the default). LEFT aligns the line flush left. RIGHT aligns the line flush right.
29
NOSHADE rproduces a solid black line that has no shading. SIZE=thickness indicates the thickness of the line, in pixels. The default is 2 pixels. WIDTH=width defines the horizontal width of the line. The default is the width of the page. The measurement value can be a number of pixels, for example 5, or a percentage of the page width or frame width, for example 75%.
Example
The following example draws a horizontal rule between two sentences.
<P>This text appears above a thick, unshaded, centered horizontal rule. <HR NOSHADE ALIGN="CENTER" WIDTH="50%" SIZE="8"> <P>This text appears below the horizontal rule.
ANCHORS AND LINKS A (anchor or link)

The A tag lets you define anchors and links. An anchor defines a place in a document. A link displays a hypertext link that the user can click to display an anchor or a document.
A as anchor
An anchor identifies a place in an HTML document. To indicate that an <A> tag is being used as an anchor, specify the NAME attribute. Do not nest an anchor within another A tag.
Syntax
<A NAME="anchorName"
> ...
</A>
30
Example
Chapter 2 - HTML
<A NAME=section2> <H2>A Cold Autumn Day</H2></A> If this anchor is in a file called "nowhere.htm," you could define a link that jumps to the anchor as follows: <P>Jump to the second section <A HREF="nowhere.htm#section2"> A Cold Autumn Day</A> in the mystery "A man from Nowhere." Syntax
<A HREF="location" ONCLICK="clickJScode" ONMOUSEOUT="outJScode" ONMOUSEOVER="overJScode" TARGET="windowName" > ... </A>
IMAGES IMG (image)

The IMG tag specifies an image to be displayed in an HTML document. An image can be a plain image that simply appears on the page. An image can be embedded in an <A HREF> tag so that the user can click it to open a URL. An image can also be an image map, which has multiple clickable areas that each link to different URLS. The SRC attribute of the IMG tag indicates the image to display. You can also specify a lower resolution image as the value of the LOWSRC attribute. When the page opens, it displays the lower resolution image first, so that the user has something to look at while the real image is loading. If you supply an image for the LOWSRC attribute, make sure it has a smaller file size than the image used for the SRC attribute, since the whole point of the LOWSRC attribute is to provide an image that loads more quickly than the source image. The HEIGHT and WIDTH attributes indicate the dimensions of the image. If you specify these attributes, Navigator uses them to reserve a place for the image on the page and continues loading any text and other page elements instead of waiting for the image to load. Navigator can display images that use the following types of formats:
l
GIF (Graphics Interchange Format)
31
l l l
JPEG (Joint Photographic Experts Group) XPM (X PixMap) XBM (X BitMap)
Syntax <IMG SRC="location" LOWSRC="location" ALT="alterntiveText" ALIGN="alignment" BORDER="borderWidth" HEIGHT="height" WIDTH="width" HSPACE="horizMargin" VSPACE="verticalMargin" ISMAP USEMAP="#mapName" NAME="imageName" ONABORT="imgLoadJScode" ONERROR="errorJScode" ONLOAD="imgLoadJScode" SUPPRESS="suppressOrNot" >
Example 1. An Image With a Low Resolution Placeholder

<IMG SRC="images/violets.jpg" LOWSRC="images/smviol.gif" HEIGHT=180 WIDTH=120 ALT="violets">
This example uses the following attributes to improve performance:

l
The LOWSRC attribute specifies a low-resolution version of the final image. This small file loads quickly when a user accesses the page. The HEIGHT and WIDTH attributes specify the dimensions of the image. Navigator uses these dimensions to reserve a place for the image on the page, and continues loading any text and other page elements instead of waiting for the image to load.
32
FORM (form for user input)
Chapter 2 - HTML
The FORM tag creates an HTML form. The form can contain interface elements such as text fields, buttons, checkboxes, radio buttons, and selection lists that let users enter text and make choices. Each interface element in the form must be defined with an appropriate tag, such as <INPUT> or <SELECTION>. All elements in the form must be defined between the <FORM> and </FORM> tags. As well as user input elements, the form can contain other elements such as headings, paragraphs, tables, and so on. When the form is displayed in a web browser, the user can fill it out by making choices and entering text using the interface elements, and then submit the form by clicking a Submit button.
Kinds of Interface Elements

Several kinds of form elements can be defined using the INPUT tag, which uses the TYPE attribute to indicate the type of element, such as button, checkbox, and so on. Two other kinds of interface elements you can put in a form are selection lists and text areas. Selection lists act as menus and are defined with the SELECT tag. Multi-line text-entry fields are defined with the TEXTAREA tag.
Syntax
<FORM ACTION="serverURL" ENCTYPE="encodingType" METHOD="GET"|"POST" NAME="formName" ONRESET="JScode" ONSUBMIT="JScode" TARGET="windowName" > ... </FORM>
Example
The following example creates a form called LoginForm that contains text fields for user name and password, a submit button, and a cancel button.
< F O R M N A M E = " L o g i n F o r m " M E T H O D = P O S T A C T I ON = " ur l to I n v ok e " > <P>User name: < I N P U T TY P E = " t e x t " N A M E = " u s e r Na m e " S I Z E =" 1 0 " > < P > P a s s wo r d : < I N P U T TY P E = " p a s s w o r d " N A M E = " pa s s w or d " SI Z E = "1 2 " > < P > < I N P UT T Y P E = " s u b m i t " V A L U E = " L o g i n " > < I N P U T TY P E = " b u t t o n " V A L U E = " C an c e l " o n C li c k = "w i n d o w. c l o se ( ) " > </FORM>
33
INPUT (input element in a form)

The INPUT tag defines a form element that can receive user input. The TYPE attribute determines the specific sort of form element to be created. TYPE can be one of the following:
INPUT TYPE=BUTTON
A button apears in the form. You must specify JavaScript code as the value of the ONCLICK attribute to determine what happens when the user clicks the button.
Syntax
<INPUT TYPE="BUTTON" NAME="buttonName" VALUE="buttonText" ONCLICK="JScode">
INPUT TYPE=CHECKBOX
A checkbox is a toggle that the user can select (switch on) or deselect (switch off.)
Syntax
<INPUT TYPE=CHECKBOX CHECKED NAME=name ONCLICK=JScode VALUE=checkboxValue>
INPUT TYPE=FILE
This places an element on an HTML form that lets the user supply a file as input. When the form is submitted, the content of the specified file is sent to the server as the value portion of the name/value pair for this input element. Netscape Navigator displays a Browse button next to the file input element that lets users select a file from their system to use as the value of the file input element. If a form contains a file input element, the value of the ENCTYPE attribute of the FORM tag should be multipart/form-data.
Syntax
<INPUT TYPE="FILE" NAME="name" VALUE="filename" >
34
INPUT TYPE=HIDDEN
Chapter 2 - HTML
A hidden input element is an invisible element whose main purpose is to contain data that the user does not enter. This data gets sent to the invoked CGI program when the form is submitted. This tag provides a mechanism for delivering a value to the CGI program without the user having entered it, but note that it is not very hidden because the user can discover it by viewing the document source.
Syntax
<INPUT TYPE="HIDDEN" NAME="name" VALUE="value" >
INPUT TYPE=IMAGE
This places an image, serving as a custom button, on an HTML form. When a user clicks the image, the form is submitted to the server.
Syntax
<INPUT TYPE="IMAGE" ALIGN="LEFT"|"RIGHT"|"TOP"|"ABSMIDDLE"|"ABSBOTTOM"| "TEXTTOP"|"MIDDLE"|"BASELINE"|"BOTTOM" NAME="name" SRC="location" >
INPUT TYPE=PASSWORD
A password element is a text input field in which each character typed is displayed as a character such as * or a black dot to conceal the actual value.
Syntax
<INPUT TYPE="PASSWORD" MAXLENGTH="maxChar" NAME="name" ONSELECT="JScode" SIZE="charLength" VALUE="textValue" >
35
INPUT TYPE=RADIO
A radio element is a radio button. A set of radio buttons consists of multiple radio buttons that all have the same NAME attribute. Only one radio button in the set can be selected at one time. When the user selects a button in the set, all other buttons in the set are deselected. If one radio button in a set has the CHECKED attribute, that one is selected when the set is first laid out on the window.
Syntax
<INPUT TYPE="RADIO" CHECKED NAME="name" ONCLICK="JScode" VALUE="buttonValue" >
INPUT TYPE=RESET
When a user presses a reset button, all elements in the form are reset to their default values
Syntax
<INPUT TYPE="RESET" NAME="name" ONCLICK="JScode" VALUE="label" >
INPUT TYPE=SUBMIT
When a user clicks a submit button, the form is submitted, which means that the ACTION specified for the form is invoked.
Syntax
<INPUT TYPE="SUBMIT" NAME="name" VALUE="label" >
INPUT TYPE=TEXT
A text element is a single line text input field in which the user can enter text.
Syntax
<INPUT TYPE="TEXT" MAXLENGTH="maxChars"
36
NAME="name" ONBLUR="Scode" ONCHANGE="JScode" ONFOCUS="Scode" ONSELECT="JScode" SIZE="lengthChars" VALUE="text" >
Chapter 2 - HTML
SELECT (selection list in a form)

The SELECT tag defines a selection list on an HTML form. A selection list displays a list of options from which the user can select an item. If the MUTLIPLE attribute is supplied, users can select multiple options from the list at a time. If the MULTIPLE attribute is not supplied users can select only one option in the list at a time. The SELECT tag should be used between <FORM> and </FORM> tags. Use the OPTION tag to define options in the list. When the form containing the selection list is submitted to the server, a name/value pair is sent for each selected option in the list.
Syntax
<SELECT NAME="selectName" MULTIPLE ONBLUR="JScode" ONCHANGE="JScode" ONCLICK="JScode" ONFOCUS="fScode" SIZE="listLength" > <OPTION...> ... <OPTION ...> </SELECT>
Example: Single Item Selection

<FORM> <B>Shipping method:</B><BR> <SELECT> <OPTION> Standard <OPTION SELECTED> 2-day <OPTION> Overnight </SELECT> </FORM>
37
SCRIPT (client-side JavaScript code)

The SCRIPT tag specifies client-side JavaScript code, which means JavaScript code that runs directly in the browser. The browser treats everything between the <SCRIPT> and </SCRIPT> tags as script elements. For example, the browser interprets text within angle brackets as a script element, not as an HTML element. You can include <SCRIPT> tags anywhere in your HTML document. It is a good idea to define functions in a SCRIPT tag in the header portion of your document, since then the functions will be available to the document as it is displayed. You can also use SCRIPT tags in the body of your document to define JavaScript code to be executed in that part of the document. You can use a NOSCRIPT tag to provide content that is displayed by browsers for which JavaScript is not available, while being ignored by browsers that can understand JavaScript. For example, you could use the NOSCRIPT tag to provide a warning that the page requires JavaScript.
Syntax
<SCRIPT LANGUAGE="languageName" SRC="location" > ... </SCRIPT>
NOSCRIPT (alternative text for JavaScript)

The NOSCRIPT tag specifies the content for a browser to display when JavaScript is not available or enabled.
Syntax
<NOSCRIPT>...</NOSCRIPT>
Example: Using the SCRIPT Tag

The following example uses the SCRIPT tag to define a JavaScript script in the HEAD tag. The script is loaded before anything else in the document is loaded. The JavaScript code in this example defines a function, changeBGColor(), that changes the documents background color. The body of the document contains a form with two buttons. Each button invokes the changeBGColor() function to change the background of the document to a different color.
38
Chapter 2 - HTML
<HTML> <HEAD><TITLE>Script Example</TITLE> </HEAD> <SCRIPT language="JavaScript"> function changeBGColor (newcolor) { document.bgColor=newcolor; return false; } </SCRIPT> <BODY > <P>Select a background color:</P> <FORM> <INPUT TYPE="button" VALUE=blue onClick="changeBGColor('blue');"> <INPUT TYPE="button" VALUE=green onClick="changeBGColor('green');"> </FORM> <NOSCRIPT><I>Your browser is not JavaScript-enabled. These buttons will not work.</I> </NOSCRIPT>
APPLET (Java applet)

The APPLET tag specifies a Java applet that will run in a web page. Applets can only be displayed by Java-enabled browsers. You build an applet using the Java language and compile it with a Java compiler. It is beyond the scope of this document to discuss how to write Java applets After writing and compiling a Java applet, you can display it in a web page by using the APPLET tag. The CODE attribute specifies the name of the Java applet to run. The CODEBASE attribute specifies the subdirectory or folder containing the Java applet. You can use PARAM tags between the <APPLET> and </APPLET> tags to provide information about parameters, or arguments, to be used by the Java applet.
Syntax
<APPLET CODE="classFileName" CODEBASE="classFileDirectory" ARCHIVE="archiveFile" ALT="altText" ALIGN="LEFT"|"RIGHT"|"TOP"|"ABSMIDDLE"|"ABSBOTTOM"| "TEXTTOP"|"MIDDLE"|"BASELINE"|"BOTTOM" HEIGHT="height"
39
WIDTH="width" HSPACE="horizMargin" VSPACE="vertMargin" MAYSCRIPT NAME="value" > <PARAM </APPLET> ...>
The CODE attribute is required (otherwise there is no applet to run). Netscape Navigator 3 and Navigator 4 can display applets if the WIDTH and HEIGHT attributes are omitted, but some other browsers cannot, so for best results you should always include the WIDTH and HEIGHT attributes.
Applet Example
The following example runs the applet jumping.class. It has two input parameters, message and speed, that affect the results of the applet. When this applet runs, it displays the words in the message, a few words at a time. The words come and go, so they seem to jump around at the specified speed.
<P>Here is an applet. It has two parameters -- speed and message. <APPLET CODE="jumping.class" CODEBASE=jclasses WIDTH=240 HEIGHT=400 ALIGN=ABSMIDDLE HSPACE=10 VSPACE=20> <PARAM NAME=message VALUE="Use Netscape Navigator to browse the world wide web."> <PARAM NAME=speed VALUE="4"> </APPLET> Its alignment is ABSMIDDLE. </P>
QUESTIONS
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. What is HTML? Brief about HTML Tags and Elements. List down different classification of tags with 2 examples tags for each category. Explain any 4 HTML Tags with at least 4 attributes with example Write an Example HTML Page containing a table 4 X 3 and each row coloured differently. Write an HTML program to demonstrate text characteristics tags. Write an HTML program to demonstrate applet embedding. Explain how you can embed an image in a HTML page. Create an simple HTML page to demonstrate usage of anchor tags. Explain ordered list and unordered lists.
40
Chapter 3
Chapter 3 - Creating Dynamic Web Pages
Creating Dynamic Web Pages
3.1 INTRODUCTION TO JAVASCRIPT
avaScript is an easy-to-learn way to script your web pagesthat is, have them to do actions that cannot be handled with HTML alone. With JavaScript, you can make text scroll across the screen like ticker tape; you can make pictures change when you move your mouse over them (called a rollover effect), or any other number of dynamic enhancements. Though JavaScript contains the name java, they are not same. While Java can be used to make standalone applets (like a regular programming language), JavaScript is generally only used inside of HTML documents.
What JavaScript can do?

l l l l l l l
Control Document Appearance and Content Control the Browser Interact with Document Content Interact with the User Read and Write Client State with Cookies Interact with Applets Manipulate Embedded Images
40
41
What JavaScript cant do?

l
JavaScript does not have any graphics capabilities, except for the ability to format and display HTML (which, however, does include images, tables, frames, forms, fonts, and other userinterface elements). For security reasons, client-side JavaScript does not allow the reading or writing of files. Obviously, you wouldnt want to allow an untrusted program from any random web site to run on your computer and rearrange your files! JavaScript does not support networking of any kind, exceptan important exception, that it can cause a web browser to download the contents of arbitrary URLs. Finally, JavaScript doesnt have any multithreading capabilities, except whatever comes implicitly from the web browsers internal use of threads.
3.2 USING JAVASCRIPT IN HTML

Small Introduction about writing JavaScript
Most JavaScript must be written in the HTML document between <SCRIPT > tags. You open with a <SCRIPT Language=JavaScript > tag, write your JavaScript, and write a closing </SCRIPT> tag.
<SCRIPT Language=JavaScript > JavaScript code goes here.. < SCRIPT>

To understand the workings of JavaScript, it is essential to understand a few basic programming concepts. JavaScript is object-oriented. An Object in JavaScript is a resource that has specific characteristics known as properties and provides several services known as methods and events. An example of an object is document, which represents the current web page and has properties such as location (which stores the URL location of the document) and methods such as writeln, which writes dynamically created html text to the document. A variable stores a value. It can be thought of as a labeled box, with the name of the variable as the label and the value as the contents.
The JavaScript statement: var x= hello;Assigns to the variable named x the String value hello. var x=1;This line of JavaScript assigns to the variable x the integer value 1.
42
As you can see, a JavaScript variable can refer to a value of any type; this can be integer, string, or even any type of object. You dont have to specify the type of variable before creating it. Note that object properties can be thought of as variables that belong to the object. A method is basically a collection of statements that does something. For example, a method writeln() exists in the document object that can be used to write html to your document. Methods are predefined in JavaScript. It is possible for you to define functions, which can be thought of as methods you define outside of any object. When you have the syntax object.method as you do with document.writeln, the method operates on the object given. In this case, the writeln method operates (the operation is writing) to the document (the browser window that you see). This syntactic structure is often used in JavaScript.
Now Writing the Sample JavaScript Code

<script language=JavaScript> document.writeln(Hello, welcome to my page. ); </script>
Insert the above into your html document between the <body> and </body> tags. The piece of text (known as a string) between the parentheses is the parameter given to the writeln() method. The browser will display the HTML between the parentheses when it runs the script. Note that writeln() writes actual HTML to the page, complete with tags, attributes and text. The parameter of the writeln() method can include tags to format the text. Change the above code to the following:
<script language= JavaScript> document.writeln(<p><h1><center>Hello, page.</center></h1> ); </script>
welcome
to
my
Note how the welcome message displayed by the browser is now a heading, and is centered. The above example may seem kind of pointless, because we could have just inserted the HTML between the parentheses directly without using a script. This, however, makes it possible to create HTML that would vary depending on certain conditions. Insert the following code into your page:
<script language= JavaScript> document.writeln(<p><br> This page is located at +document.location+ <br>This page was last modified on +document.lastModified); </script>
43
The HTML processed by the browser in this case would vary depending on the values of document.lastModified and document.location. Because we wanted this text to be printed in the same position in our page body every time the page is loaded, we placed the JavaScript code between the <body> and </body> tags wherever we want the text to occur. Sometimes, we place JavaScript code in the head portion of the page if we want it to run before any of HTML in the body is displayed. We can also define JavaScript functions in the head of a page, which we will talk about later. JavaScript has several predefined methods that allow you to create several types of pop-up boxes. Lets look first at alert boxes.
Alert boxes
An alert box is a small window that pops up with a yellow warning sign and a (usually) important message. With JavaScript we can either show a message to the user either before a page loads or in response to a user action. Here we will make an alert box that appears before the page loads. It will look like this:
Exercise In Notepad, open base.html, your starter HTML page template. Which is <html><head></head><body></body></html> Now, within the <head> tags, insert the following code: <script language= JavaScript> alert(This is a class on JavaScript); </script>
This makes a pop-up box, which says, This is a class on JavaScript with an OK button that allows the user to close it and continue. The message can be changed to whatever you like. This type of popup box is called an alert box because it can only be used to alert a viewer. It cannot be used to control where the user may go. Alert() is a method that takes care of displaying the box. The line This is a class on JavaScript is the parameter for the alert() method. Some more examples of methods are: confirm(put message here) ; This is the next type of box well be looking at. Prompt(put request here) ; This asks the user to enter some text. You probably noticed at the end of a method, after the right parenthesis, there is a semi-colon. In JavaScript, a semi-colon is used to end a statement. Now we will make another type of pop-up box.
Confirm Boxes
Place the following code in the body of your HTML document. (Remove the alert box if you like.):
44
<form> <input type = ''button" value = "Click here to check the weather" onClick = "confirm(Its sunny today ' ) ; " > </form>
We have created an input button inside a form. Input elements such as buttons must always be placed inside a form, between <form> and </form> tags. Take a look in a browser window at the results of this code. The onClick event handler means that when you click on the button, a confirm box pops up. An event handler allows you to specify what code to execute when an event takes place. You can change the message on the button or in the confirm box by changing the appropriate text in the code. Be sure youre also using all semicolons, quotation marks, and other punctuation correctly. Syntax is very important in JavaScript, unlike in HTML, where typos are often overlooked by browsers. Now well take a look at one more type of pop-up box, the message input box.
Message input boxes 1. Put the following code in the head of your HTML document. <script language= JavaScript> var yourname = prompt('Type your name here'); document.writeln("<center>Welcome, "+ yourname+"</center>"); </script> 2. Reload the page in your browser window. 3. Type your name.
The browser will type your name in the window, along with the welcome message. These input strings can be used to personalize your web page. Lets take a closer look at the first line of code. var yourname = prompt(Type your name here); This is an example of a variable declaration. As we mentioned, a variable in JavaScript can take on any form, such as integer, character, or string. Just like a person has a name, in order to refer to a variable, you must give it a name. You make a variable with the word var as shown above, and the name is the word immediately following var. So in this case the name of the variable is yourname. The equal sign assigns the variable the value to its right (i.e. 4, 8+5, c, chocolate devil). The prompt method will get a value for yourname as you saw when you ran the program. We say that the prompt method returns a value, which is stored in the variable yourname. Some methods return values, some dont.
The line: document.writeln("<center>Welcome, "+ yourname +"</center>");

looks a lot more complicated than it is. It uses whatever value you have for yourname, which you get
45
from the text prompt window. As you saw, it types on the screen Welcome, and then your text. The <center>, </center> tags are familiar looking HTML tags, and indeed, all they do is center your message.
The MouseOver
A mouseover can be used to make an image change when the user rolls their mouse over it. What actually happens is that the browser displays a different image when the mouse is over the text or image. Look at demo.html again to see how a rollover works. To specify a mouse rollover you insert the onMouseOver and//or the onMouseOut attributes into the appropriate tag. These should be followed by the JavaScript code to be executed between quotes. Making a simple MouseOver Now that weve looked at what a mouseover can do, lets make one. This mouseover will display picture A until the mouse is moved over it; then it will display picture B. 1. Place the following code in the body of your HTML document:
<a href="http://www.yahoo.com" onMouseOver="document.logo.src='B.gif ' ; " onMouseOut ="document.logo.src='A.gif ' ; " ><img name="logo" src="A.gif " border=0></a>
2. View your page with the browser. If the mouseover doesnt work, be sure to check all semicolons, apostrophes, and quotation marks. Heres how the code works. As you can see, all the code that creates the mouseover effect is contained in an anchor tag and is therefore a hyperlink. The name attribute of the image tag assigns a name to the image object. The result is that an object is created representing the image, this object is referred to by the variable named logo which is located inside the document object (it is a property of the document object). The onMouseOver and onMouseOut attributes are Event Handlers that tell the browser what code to execute when the events occur. You can make it so that the mouseover affects another image on the page by changing the name of the image accordingly in the event handler code.
Menu
We will now look into creating a menu using Javascript. We will create a simple menu, which has a number of clickable options. There will be a single image which changes when options is selected. We will also create a function which takes care of changing the menu image. You will be using the images dog.gif, cat.gif and hamster.gif as example iamges. 1. Place the following code in the body of your HTML document:
<center><h1>My Favourite Pets</h1><img src="dog.gif" name="pet" height=18% width=8%><br><font size=5><p><a
46
href="javascript:changePet('dog.gif');">.Dog.</a><p><a href="javascript:changePet('cat.gif');">.Cat.</a><p><a href="javascript:changePet('hamster.gif');">.Hamster.</a></font></center>

Notice how we used anchor tags to enclose the menu entries. We made the entries into links by defining the href attribute. This, however, is not your regular sort of link. Instead of defining the href attribute to be a URL, we defined JavaScript code to be executed when the link is clicked. When you click any of these links, the corresponding JavaScript is executed. We used the javascript: prefix to denote that the target of the link is the following JavaScript code, and not a regular URL. The JavaScript executed when the cat button is clicked, for example, is changePet(cat.gif); . Where did the changePet function come from??? Well, nowhere really; It doesnt exist, we will create it. So now we want to create a function that takes in a single parameter, which is the name of a file. This function should then set the source (which is the src property) of the image object pet to equal that filename. 2. Insert the code for the function changePet into the head portion of your page:
<script language= JavaScript> function changePet(file){ document.pet.src=file; } </script>

Functions like the above are usually defined in the head of an HTML document. As shown above, function definitions must me enclosed by opening and closing script tags. The syntax for function definition is, as shown above, the keyword function followed by the name of the function and a list of parameters between parentheses(if there is more than one parameter the list is seperated by commas). Then, the statements composing the function are placed between curly brackets { } . The above function takes in one parameter, and calls it file. There is a single statement in this function; This sets the value of document.pet.src to equal the value of file. Now that we have defined the changePet function, calls to that function from the links in our menu can be made. 3. View your page with the browser. If the menu doesnt work, be sure to check all semicolons, apostrophes, and quotation marks. When a menu option is clicked, the corresponding JavaScript code is executed. That code calls the changePet function and gives that function a single parameter representing the name of the file. The changePet function then receives that parameter, calls it file, and uses it to change the source of the pet image.
47
Change the status bar text

JavaScript allows us to change the text in the status bar of the window through the window.status property. We will now show you how to place a welcome message on the status bar as soon as your page finishes loading. The event handler goes in the opening <body> tag 1. Put this code in the body of your HTML document:
<body onload=window.status= Welcome to my Page!!! >

Notice that the text in the bottom of the browser window now displays Welcome to my Page!!! whenever the mouse pointer is not on a link. The onload event handler is an attribute of the body tag, and it tells the browser what to do after the body of the page is done loading.You could also use this effect in conjunction with a mouse event handler to change the status bar text when the mouse rolls over certain links or images, feel free to explore effects like that on your own.
3.3 AN INTRODUCTION TO DHTML

Dynamic HTML is really just CSS (cascading style sheets), DOM (document object model), Scripting (Javascript and VBscript) and HTML. DHTML isnt really a language or a thing in itself its just a mix of those technologies. That means that to master DHTML you have to know as much as possible about each technology. So we will go through each of them in breif.
Cascading Style Sheets (CSS)

CSS stands for Cascading style sheets and is the part of DHTML that controls the look and placment of the elements on a page. With CSS you can basically set any style property of any element on a HTML page. One of the biggest advantages with CSS instead of the regular way of changing the look of elements (the font tag and similar) is that you split content from design. You can for instance link a CSS file to all the pages in your site that sets the look of the pages, so if you want to change like the font size of your main text you just change it in the CSS file and all pages are updated. The syntax for CSS code is basically like this: <style type=text/css> ELEMENT{property1:value1; property:value2} </style> Let us see couple of examples: We always place the style tag inside the head of the document. So a document could look like this:
48
All H5 heading on that page would then look like this:
<html><head> <style type="text/css"> H5{background-color:blue; color:white; font-size:20px} </style> <body> <h5>Cascading style sheets</h5> </body> </html>
Cascading style sheets

If you wanted only that single H5 heading to look like that you could have used a id on the tag and done it like this:
<html><head> <style type="text/css"> #heading{background-color:blue; color:white; </style> <body> <h5 id="heading">Cascading style sheets</h5> </body> </html>
font-size:20px}
Or you could have used something called inline styles which means placing the style directly in the tag. This can be useful in some cases, but as you can see it sort of takes away some of the point with CSS: <h5 style=background-color:blue; color:white; font-size:20px> Cascading style sheets</h5> If you use inline styles you still have to go into the actual content to change the style for the element. Now, theres a third way of doing this. If you for instance have 10 P tags on your page and you want 5 of them to be bold, but not the rest of them, then you use a class. You can name a class whatever you want, just remember to have a . in front of the name. <style type=text/css> .whatever{font-weight:bold}</style> And to assign that to a P tag we go like this:
49
<p class=whatever>This is bold text!</p> This is the absolute basic of CSS. Unfortunately CSS is supported a little differently on the different browsers and is only supported at all on 4.x+ browsers.
Document Object Model (DOM)

The Document Object Model, or DOM, is the interface that allows you to programmatically access and manipulate the contents of a web page (or document). It provides a structured, object-oriented representation of the individual elements and content in a page with methods for retrieving and setting the properties of those objects. It also provides methods for adding and removing such objects, allowing you to create dynamic content. The DOM also provides an interface for dealing with events, allowing you to capture and respond to user or browser actions. Here we will discuss on the DOM representation of a document and the methods it provides to access those objects.
DOM Levels and Support

When JavaScript was first introduced in browsers, some sort of interface was required to allow elements on the page to be accessed via scripting. Each vendor had their own implementation but de facto standards emerged to produce a fairly simple model common to most. For example, most browsers used an array of Image objects to represent all IMG tags on a page. These could then be accessed and manipulated via JavaScript. A simple image rollover might use code like this:
document.images[3].src = "graphics/button2.gif"
These early models were limited. They only provided access to a few types of element and attributes, like images, links or form elements. As vendors released new versions of browsers, they expanded on the model. But they also were often at odds with one another, leading to compatibility problems among different browsers as vendors tried to outdo each other by adding their own new features. Fortunately, most vendors started adopting the DOM standard set by the World Wide Web Consortium, notably Internet Explorer, Netscape and Opera.
The Document Tree

When a browser loads a page, it creates a hierarchical representation of its contents, which closely resembles its HTML structure. This results in a tree-like organization of nodes, each representing an element, an attribute, content or some other object.
Nodes
Each of these different object types will have their own unique methods and properties. But each also
50
implements the Node interface. This is a common set of methods and properties related to the document tree structure. To understand this interface better, take a look at the diagram below which represents a simple node tree.
Fig 3.1 Simple node tree
The Node object provides several properties to reflect this structure and allow you to traverse the tree. Here are some relationships using the example above: NodeA.firstChild = NodeA1 NodeA.lastChild = NodeA3 NodeA.childNodes.length = 3 NodeA.childNodes[0] = NodeA1 NodeA.childNodes[1] = NodeA2 NodeA.childNodes[2] = NodeA3 NodeA1.parentNode = NodeA NodeA1.nextSibling = NodeA2 NodeA3.prevSibling = NodeA2 NodeA3.nextSibling = null NodeA.lastChild.firstChild = NodeA3a NodeA3b.parentNode.parentNode = NodeA The Node interface also provides methods for dynamically adding, updating and removing nodes such as: insertBefore() replaceChild() removeChild() appendChild() cloneNode() These will be covered later. But for now lets look how the document tree reflects the contents of a web page
51
The Document Root

The document object serves as the root of this node tree. It too implements the Node interface. It will have child nodes but no parent node or sibling nodes, as it is the starting node. In addition to being a Node, it also implements the Document interface. This interface provides methods for accessing and creating other nodes in the document tree. Some methods are: getElementById() getElementsByTagName() createElement() createAttribute() createTextNode() Note that unlike other nodes, there is only one document object in a page. All of the above methods (except getElementsByTagName()) can only be used against the document object, i.e., using the syntax document.methodName(). The document object can also have several other properties related to older DOM level support. For example, youll find that many browsers still have document.images and document.links arrays or document.bgColor and document.fgColor properties relating to the BGCOLOR and TEXT attributes of the BODY tag. These properties are intended to provide some backward compatibility so that pages designed for older browsers will still work properly with newer versions. They can still be used in scripts but they may not be supported in future versions.
Traversing the Document Tree

As mentioned, the document tree reflects the structure of a pages HTML code. Every tag or tag pair is represented by a element node with other nodes representing attributes or character data (i.e., text). Technically speaking, the document object has only one child element, given by document.documentElement. For web pages, this represents the outer HTML tag and it acts as the root element of the document tree. It will have child elements for HEAD and BODY tags which in turn will have other child elements. Using this, and the methods of the Node interface, you can traverse the document tree to access individual node within the tree. Consider the following:
<html> <head> <title></title> </head>
52
<body><p>This is a sample paragraph.</p></body> </html>

and this code: alert(document.documentElement.lastChild.firstChild.tagName); which would display P, the name of the tag represented by that node. The code breaks down as follows: document.documentElement - gives the pages HTML tag. .lastChild - gives the BODY tag. .firstChild - gives the first element in the BODY. .tagName - gives that elements tag name, P in this case. There are some obvious problems with accessing nodes like this. For one, a simple change to the page source, like adding text or formatting elements or images, will change the tree structure. The path used before may no longer point to the intended node. Less obvious are some browser compatibility issues. Note that in the sample HTML above, there is no spacing between the BODY tag and the P tag. If some simple line breaks are added,
<html> <head> <title></title> </head> <body> <p>This is a sample paragraph.</p> </body> </html>
Netscape will add a node for this data, while IE will not. So in Netscape, the JavaScript code shown above would display undefined as it now points to the text node for this white space. Since its not an element node, it has no tag name. IE, on the other hand, does not add nodes for white space like this, so it would still point to the P tag.
Accessing Elements Directly

This is where the document.getElementById() method comes in handy. By adding an ID attribute to the paragraph tag (or any tag for that matter), you can reference it directly.
53
<p id=myParagraph>This is a sample paragraph.</p> ... alert(document.getElementById(myParagraph).tagName); This way, you can avoid compatibility issues and update the page contents at will without worrying about where the node for the paragraph tag is in the document tree. Just remember that each ID needs to be unique to the page. A less direct method to access element nodes is provided by document.getElementsByTagName(). This returns an array of nodes representing all of the elements on a page with the specified HTML tag. For example, you could change color of every link on a page with the following. var nodeList = document.getElementsByTagName(A); for (var i = 0; i < nodeList.length; i++) nodeList[i].style.color = #ff0000; Which simply updates each links inline style to set the color parameter to red.
Node Types
As mentioned, there are several types of nodes defined in the document object model, but the ones youll mostly deal with for web pages are element, text and attribute. Element nodes, as weve seen, correspond to individual tags or tag pairs in the HTML code. They can have child nodes, which may be other elements or text nodes. Text nodes represent content, or character data. They will have a parent node and possibly sibling nodes, but they cannot have child nodes. Attribute nodes are a special case. They are not considered a part of the document tree - they do not have a parent, children or siblings. Instead, they are used to allow access to an element nodes attributes. That is, they represent the attributes defined in an elements HTML tag, such as the HREF attribute of the A tag or the SRC attribute on the IMG tag. Note that attribute values are always text strings.
Attributes vs. Attribute Nodes

There are several ways to reference the attributes of an element. The reason for this is that the DOM2 standard was designed for many types of structured documents (i.e., XML documents), not just HTML. So it defines a formal node type for attributes. But for all documents it also provides some more convenient methods for accessing, adding and modifying attributes, as described next.
54
The document.createAttribute() allows you to create a new attribute node, which you can then set a value for and assign to an element node. var attr = document.createAttribute(myAttribute); attr.value = myValue; var el = document.getElementById(myParagraph); el.setAttributeNode(attr); However, its usually easier to access an elements attributes directly using the element getAttribute() and setAttribute() methods instead. var el = document.getElementById(myParagraph); el.setAttribute(myAttribute, myValue); An elements attributes are also represented as properties of the element node. In other words, you can simply use var el = document.getElementById(myParagraph); el.myAttribute = myValue; Its also interesting to note that you can define your own attributes in the HTML tag itself. For example, <p id=myParagraph myAttribute=myValue>This is a sample paragraph.</p> ... alert(document.getElementById(myParagraph).getAttribute(myAttribute)); will display myAttribute. But note that you should use element.getAttribute(attributeName) instead of element.attributeName to get the value as some browsers may not register user-defined attributes as a properties of the element. Attributes can also be removed from an element node, using either the removeAttribute() or removeAttributeNode() methods or setting by setting element.attributeName to a null string (). Altering attributes is one way to create dynamic effects. Try the following sample paragraph, where using the links we can alter its ALIGN attribute. The code is fairly simple: <p id=sample1" align=left>Text in a paragraph element.</p> ... code for the links ... document.getElementById(sample1).setAttribute(align, left); document.getElementById(sample1).setAttribute(align, right);
55
Style Attributes
Most attributes for HTML tags are fairly simple; they define a single value for a property specific to that tag. Styles are a little more involved. As you know, CSS can be used to apply style parameters to an individual tag, all tags of a given type or assigned using classes. Likewise, styles for a particular element can be inherited from any of these sources. You can also alter these styles at various levels. For example, you can change the STYLE attribute of an HTML tag, or its CLASS attribute. But these methods will alter all of the elements style parameters. Often, you may want to change just a single style parameter, or a select few, while retaining the others. Fortunately, the style attribute and element node is defined as an object with properties for every possible style parameter. You can access and update these individual parameters as you wish. Heres an example similar to the previous one. But in this case, the text alignment is defined and altered using a style parameter instead of the ALIGN attribute. Heres the code behind it: <p id=sample2" style=text-align:left;>Text in a paragraph element.</p> ... code for the links ... document.getElementById(sample2).style.textAlign = left; document.getElementById(sample2).style.textAlign = right; Note that when a CSS parameter name contains a hyphen (-) as text-align does, its corresponding style property name is constructed by removing the hyphen character and capitalizing the first letter following it, in this case it becomes textAlign. Also note that even if a particular style parameter is not initially defined for an element, you can still set its value using the DOM. For example, in the code above the inline style= on the P tag is really not necessary.
Dynamic Content
Changing textual content is relatively simple. A text node represents every continuous string of character data in the body of an HTML page. The nodeValue property of these nodes is the text itself. Changing that value will change the text on the page.
Text Nodes
Heres another example using a simple paragraph tag. Use the links to change the text: <p id=sample1">This is the initial text.</p>
56
... code for the links ...
document.getElementById(sample1).firstChild.nodeValue = Once upon a time...; document.getElementById(sample1).firstChild.nodeValue = ...in a galaxy far, far away; There are a couple of important things to note here. First, text nodes do not have an ID attribute like element nodes can. So they cannot be accessed directly using methods like document.getElementById() or document.getElementsByTagName(). Instead, the code references the text using the parent node, in this case its the paragraph element with the ID sample1. This element node has one child node, the text node we want to update. You can see this in the diagram below.
Fig 3.2 Parent & Childnode
So document.getElementById(sample1).firstChild.nodeValue is used to access this text node and read or set its string value. Its important to remember that text nodes contain just that, text. Even simple markup tags like B or I within a string of text will create a sub tree of element and text nodes. For example, using the example above and adding tags make the word initial bold: <p id=sample2">This is the <b>initial</b> text.</p> Now gives the sample2 paragraph element three children instead of one. There is a text node for This is the , an element node for the B tag pair and a text node for text.. The node for the B element has one child node, a text node for initial. You can see the structure in the diagram below.
Fig 3.3 Text node
57
To see how this affects scripting code, heres the same example used above but with the additional bold markup: Changing firstChild of the P element now only affects the text This is the . Conversely, if you attempt to add markup to the value of a text node, the browser will treat it as plain text, as demonstrated below: Here the link code has been changed to this: document.getElementById(sample3).firstChild.nodeValue = <b>Once</b> upon a time...; document.getElementById(sample3).firstChild.nodeValue = ...in a galaxy <i>far, far</i> away; You can avoid problems like this by thinking of text nodes as individual strings of character data located between any two HTML tags, not necessarily matching pairs of tags. Nodes can also be added to the DOM. Youve already seen how attribute nodes can be created and applied to an element so lets look at adding element and text nodes within the document tree (without using the innerHTML property). The first step is to create a node object of the type you want using one of document.createElement(), document.createAttribute() or document.createTextNode(). For attributes, however, youll probably just want to create an element node and assign it attributes directly.
Working with Text Nodes

Lets start with a text node. Below is some sample code showing how to create a text node and assign it a value. var myTextNode = document.createTextNode(my text); Now you have a text node. But its not part of the document tree. To make it appear on the page, you need to add it as a child to an existing node within the tree. Since text nodes cannot have children, you cant attach it to another text node. Attributes nodes are not part of the document tree, so you dont want to attach it to one of them. That leaves element nodes. Since element nodes can several children, there are a few different methods provided that allows you to specify where to add the new node among its existing children. These are best illustrated by example. Here, the appendChild() method is used to add new text to a paragraph element. It also allows you to remove the last node added using the removeChild() method: <p id=sample1">Initial text within a paragraph element.</p> ... code to add a text node ...
58
var text = document.createTextNode( new text + (++counter1)); var el = document.getElementById(sample1); el.appendChild(text); ... code to remove the last child node ... var el = document.getElementById(sample1); if (el.hasChildNodes()) el.removeChild(el.lastChild); Adding text is easy, the code creates a new text node, locates the paragraph element node and calls appendChild() to insert it at the end of its childNodes array. A global counter variable is used on the text itself so you can distinguish each new node in the browser display. Removing text is almost as easy, using a call to removeChildNode(). The only difference in the addition of a reference node, to indicate which of the elements children is to be removed. Here we use the elements lastChild property which always points to the last node of the elements childNodes array. Note that it will even remove the initial text hard coded in the P tag if that is the only child. Also note the use of the hasChildNodes() method which simply returns true or false to indicate if the given node currently has any children. Here its used to prevent an error by calling removeChild when there are no children left.
Normalizing and Splitting Text Nodes

In the above example, the new text nodes are added as independent children. But if you had hard coded additional text in the HTML, <p id=sample1">Initial text within a paragraph element. new text 1 new text 2 new text 3</p> it would appear in the DOM as a single child text node of the paragraph element. In other words, the node tree produced by dynamically adding content may appear different from the node tree that would result if that content had been included in the static HTML code. This may or may not be desirable depending on what youre trying to do. In some cases you may want combine text nodes to make the tree reflect what it would if the new, dynamically added content had been part of the original, static HTML code. The normalize() method provides this functionality. Calling it on an element will clean up the node tree, combining any adjacent text nodes and removing any empty ones.
59
Browser Compatibility
Internet Explorer 5.5 does not support the normalize method. The example below will not work properly on this browser. IE 6.0, however, does appear to support it although the current beta version is buggy. To demonstrate, heres the same example used above but with additional links provided to normalize the paragraph element and show its current number of children. You can see that as you add text, the number of child nodes increases but any time you normalize the paragraph, they are combined into a single text node. Heres the code for the additional links: ... normalize element ... el = document.getElementById(sample2); el.normalize(); ... show number of child nodes ... el = document.getElementById(sample2); alert(el.childNodes.length); Conversely, you can split a single text node into two separate ones using the splitText() method This can be useful if you want to dynamically alter a single word or phrase or insert an element in a line of text. Lets set up another example. This time, the remove link will delete the first child of the paragraph. Initially, this will be the entire sentence. But if you use the separate link first, it will split off the first word in the text and a subsequent remove will delete only that word. The reset link allows you to start over. And heres the code for each function:
... split at first word ... el = document.getElementById("sample3"); if (el.hasChildNodes()) { text = el.firstChild; i = text.nodeValue.indexOf(" "); if (i >= 0) text.splitText(i + 1); } ... remove first text node ... el = document.getElementById("sample3"); if (el.hasChildNodes()) el.removeChild(el.firstChild);
60
... reset the example ... el = document.getElementById("sample3"); while (el.hasChildNodes()) el.removeChild(el.firstChild); text = document.createTextNode( "Initial text within a paragraph element."); el.appendChild(text);
A couple of notes here. The nodeValue of a text node is simply a string. The splitText() method expects an offset value to tell it where to split the text. The string indexOf() method is used to find the offset of the first space in the text and pass it on to splitText(). Second, the reset code simply deletes all child nodes of the paragraph and then adds the original text back as a single node.
Working with Element Nodes

Adding and removing elements nodes works much the same way as with text nodes. The main difference being in creating the node and placing content within it. First, you create a node using document.createElement() giving it the name of the tag youd like to build such as P, DIV, TABLE, etc. The parameter is case-insensitive so div, Div and DIV all create a DIV tag. Just note that the browser will return the tag name in uppercase if you inquire on it, for example: var el = document.createElement(div); alert(el.tagName); would display DIV. Like text nodes, after you create an element you need to add it to some existing element node in the document tree in order to actually see it on the page.But a newly created element is simply an empty tag. Youll probably first want to set some of its attributes and add content. Again a working example will help illustrate. Here, clicking on the link will create a new P element - with some child nodes of its own - and append it to an existing DIV. Take a look at the code: First it creates two new elements, a P tag and a B tag. Then it adds a new text node with the string This is a new paragraph with to the paragraph tag. It does the same to the B tag, adding the text bold. Then it appends that B tag (and its child text node) to the paragraph. Another new text node with the string text added to the DIV is then appended to the paragraph.
61
At this point the paragraph element has three children, a text node, an element node for the B tag and another text node. The B element has one child, a text node. The final step is to insert the new paragraph element into the existing DIV tag on the page. We could also have set any attribute of either new element. It makes no difference if you set an elements attribute before or after adding it to the node tree. For example, both boldEl.style.color = #ffff00; paraEl.appendChild(boldEl); and paraEl.appendChild(boldEl); boldEl.style.color = #ffff00; will make the bold text red. In other words, appendChild() actually moves the node into the tree, not just a copy, and the variable boldEl will still point to it.
Scripting
DHTML can be used with Javascript. As we have already discussed about Javascript, we will not go in details again. Javascript is a scripting language (like a simple programming language (Perl, C++ et. cetera)). Javascript is the part of DHTML that actually does something. Its Javascript that makes the document fly around; its Javascript that changes the font size or any other CSS property on an element. So JavaScript plays a really big role in DHTML and its really important to know JavaScript very well!
Summing it up
Dynamic HTML is simply HTML that can change even after a page has been loaded into a browser. A paragraph could turn blue when the mouse moves over it, or a header could slide across the screen. Anything that can be done in HTML can be redone after the page loads. So, how can HTML be changed after its been downloaded? There needs to be some way to tell the browser to change it, which brings us to the technologies that make up DHTML:
Dynamic HTML is client-side scripting

Using client-side scripting languages like JavaScript we can change HTML. If an image changes when you roll your mouse over it, youre looking at an example of dynamic HTML. The 4.0 browsers from both Microsoft and Netscape allow more of a pages HTML elements to be accessible from within scripting languages. The mechanism whereby page elements (or document objects) are opened to scripting languages is called the Document Object Model.
62
Dynamic HTML is the DOM
In a sense, the Document Object Model is the real core of dynamic HTML. It makes HTML changeable. The DOM is the hierarchy of elements that are present in the browser at any given time. This includes environmental information such as the current date and time, browser properties such as the browsers version number, window properties such as window.location (the pages URL), and HTML elements such as <p> tags, divs, or tables. By exposing the DOM to scripting languages, browsers enable you to access these elements. While some elements such as the time of day cant be changed themselves, they can be used by scripts to modify other elements. The part of the DOM that specifies which elements can trigger changes is the event model. Events are things like moving the mouse over an element (onmouseover), loading a page (onload), submitting a form (onsubmit), clicking on a form input field (onfocus), and so on.
Dynamic HTML is CSS

Because they are part of the DOM, CSS properties are accessible to scripting languages, and it is therefore possible to change almost anything about the way a page looks. By changing the CSS properties of a page element (such as its color, position, or size), you can do almost anything bandwidth and processor speed permit. To sum all this up: CSS (and plain old HTML) is what you change, the DOM is what makes it changeable, and client-side scripting is what actually changes it. And thats dynamic HTML.
QUESTIONS
1. 2. 3. 4. 5. 6. 7. 8. 9. What is JavaScript ? List out uses of Java Script. Create an HTML page which pops up an alert message. Explain briefly about Cascading Style Sheets(CSS). Explain the usage of script tags. Explain Document object model. Write a program to display text in status bar on click of a button. What are the difference between HTML and DHTML Explain the methods to access nodes in a Document tree. What are text nodes?
63
Chapter 4
Introduction to CGI
4.1 WHAT IS CGI?
GI, or Common Gateway Interface, is a specification which allows web users to run programs from their computer. CGI isnt a programming language in itself; rather, it is standard that allows programs or scripts written in other languages to be run over the Internet.
CGI is the part of the Web server that can communicate with other programs running on the server. With CGI, the Web server can call up a program, while passing user-specific data to the program (such as what host the user is connecting from, or input the user has supplied using HTML form syntax). The program then processes that data and the server passes the programs response back to the Web browser.
Fig 4.1 Simple diagram of CGI
63
64
Chapter 4 - Introduction to CGI
CGI programs usually take input passed to it from a form on a web page, process the information, and then format the results as a HTML document. The result is a web page that is generated dynamically. The common choice for writing and processing CGI is PERL, or Practical extraction and reporting language.
4.2 CGI APPLICATIONS

CGI turns the Web from a simple collection of static hypermedia documents into a whole new interactive medium, in which users can ask questions and run applications. Lets take a look at some of the possible applications that can be designed using CGI.
Forms
One of the most prominent uses of CGI is in processing forms. Forms are a subset of HTML that allow the user to supply information. The forms interface makes Web browsing an interactive process for the user and the provider. Figure 4.2 shows a simple form.
Fig 4.2 Simple form illustrating different widgets
65
As can be seen from the figure, a number of graphical widgets are available for form creation, such as radio buttons, text fields, checkboxes, and selection lists. When the form is completed by the user, the Submit Order! button is used to send the information to the server, which executes the program associated with the particular form to decode the data. Generally, forms are used for two main purposes. At their simplest, forms can be used to collect information from the user. But they can also be used in a more complex manner to provide back-and-forth interaction. For example, the user can be presented with a form listing the various documents available on the server, as well as an option to search for particular information within these documents. A CGI program can process this information and return document(s) that match the users selection criteria.
Gateways
Web gateways are programs or scripts used to access information that is not directly readable by the client. For example, say you have an Oracle database that contains baseball statistics for all the players on your company team and you would like to provide this information on the Web. How would you do it? You certainly cannot point your client to the database file (i.e., open the URL associated with the file) and expect to see any meaningful data.
CGI provides a solution to the problem in the form of a gateway. You can use a language such as oraperl or a DBI extension to Perl to form SQL queries to read the information contained within the database. Once you have the information, you can format and send it to the client. In this case, the CGI program serves as a gateway to the Oracle database, as shown in figure 4.3.
Fig 4.3 A gateway to a database
66
Virtual Documents
Virtual, or dynamic, document creation is at the heart of CGI. Virtual documents are created on the fly in response to a users information request. You can create virtual HTML, plain text, image, and even audio documents. A simple example of a virtual document could be something as trivial as this:
Welcome to Shishirs WWW Server! You are visiting from diamond.com. The load average on this machine is 1.25.
In this example, there are two pieces of dynamic information: the alphanumeric address (IP name) of the remote user and the load average on the serving machine. This is a very simple example, indeed!
4.3 CONFIGURING THE SERVER

Two things you need for CGI programming with Perl are Web Server and the Perl Interpreter. Youll then be able to write CGI programs and test them locally on your computer. Once Apache is installed and running, youll be able to view your pages by pointing your web browser at the http://localhost/ address. You dont even need to be connected to the internet to view local pages and CGI programs. Installing Apache and Perl is simple. You just have to download the software and install like any other windows software. After installing Apache you have to configure it.
Configuring The Server (Apache)

First go to the Start menu and go to My Documents. Make a new folder there called My Website. This is where youre going to store your web pages and CGI programs. Next you need to modify the Apache configuration file to tell it where your pages are, and enable CGI programs. Go back to the Start menu and navigate to All Programs > Apache HTTP Server > Configure Apache Server > Edit the Apache httpd.conf Configuration file. The config file will be opened for you in Notepad. Scroll down (or use Find) until you get to the UserDir section of the file. It should have a line like this: UserDir My Documents/My Website Scroll down just past that and youll come to a commented section for Directory: #<Directory C:/Documents and Settings/*/My Documents/My Website> # AllowOverride FileInfo AuthConfig Limit # Options MultiViews Indexes SymLinksIfOwnerMatch IncludesNoExec # <Limit GET POST OPTIONS PROPFIND>
67
# Order allow,deny # Allow from all # </Limit> # <LimitExcept GET POST OPTIONS PROPFIND> # Order deny,allow # Deny from all # </LimitExcept> #</Directory> Uncomment this entire section (by removing the pound signs at the beginning of each line), and change the Options line to this: Options MultiViews Indexes SymLinksIfOwnerMatch Includes ExecCGI Options specifies what options are available in this directory. The important ones here are Indexes, which enables server-side includes, and ExecCGI, which enables CGI programs in this directory. Scroll down a bit further to the DirectoryIndex line, and add index.cgi to the end of that line: DirectoryIndex index.html index.html.var index.cgi Now scroll down several pages (or use Find) to the AddHandler section. Uncomment the CGI line: AddHandler cgi-script .cgi This causes any file with a .cgi extension to be processed as a CGI program. If you want to also have files with a .pl extension be processed as CGI programs, add the .pl extension on that same line: AddHandler cgi-script .cgi .pl Next add this line immediately after: AddHandler server-parsed .html This causes all .html files to be searched for server-side include tags. Now save the configuration file, and restart Apache. Check http://localhost/ in your browser to ensure that the server restarted successfully. To view the pages in your My Website folder, the actual URL is http://localhost/~my username/. For example, on my computer, my username is Sridhar, so the URL to my pages is http://localhost/~Sridhar/ . (If you dont know your username, open the Start menu; your username is at the top of the Start box.)
Writing Your CGI Programs

Now youre ready to write some CGI programs! Heres a simple one you can use to get started. You can write this in Notepad:
68
#!/perl/bin/perl -wT print Content-type: text/html\n\n; print <h2>Hello, World!</h2>\n;
Unfortunately Notepad has a nasty habit of appending .txt to the end of all text files, so when you go to save this file, change the Save as Type from Text Documents to All Files. Then put first.cgi as the file name. Save it in your My Website folder, then reload your web page in your browser. You should see first.cgi listed there; click on it to view your first CGI program!
4.4 PROGRAMMING IN CGI

A CGI is simply a program that is called by the webserver, in response to some action by a web visitor. Now lets try writing a simple CGI program. First CGI Program Program 4.1: first.cgi Hello World Program #!/perl/bin/perl -wT print Content-type: text/html\n\n; print Hello, world!\n; The first line of your program should look like this: #!/perl/bin/perl wT The first part of this line, #!, indicates that this is a script. The next part, /perl/bin/perl, is the location (or path) of the Perl interpreter. The final part contains optional flags for the Perl interpreter. Warnings are enabled by the -w flag. The first line #!/perl/bin/perl should start in column 1. The subsequent lines can start in any column. if youre writing a CGI thats going to generate an HTML page, you must include this statement somewhere in the program before you print out anything else: print Content-type: text/html\n\n; This is a content-type header that tells the receiving web browser what sort of data it is about to receive in this case, an HTML document. If you forget to include it, or if you print something else before printing this header, youll get an Internal Server Error when you try to access the CGI program. Save (or upload) the file into your web directory, then chmod 755 first.cgi to change the file permissions (This is in case of UNIX. If you are using windows no change is required). Now go to your web browser and type the direct URL of your new CGI program. You should see a web page with Hello, world! on it. Lets try another example. Start a new file (or if you prefer, edit your existing first.cgi) and add some
69
additional print statements. Its up to your program to print out all of the HTML you want to display in the visitors browser, so youll have to include print Statements for every HTML tag:
Program 4.2: second.cgi Hello World Program 2

#!/perl/bin/perl -wT print Content-type: text/html\n\n; print <html><head><title>Hello World</title></head>\n; print <body>\n; print <h2>Hello, world!</h2>\n; print </body></html>\n; Save this file, adjust the file permissions if necessary, and view it in your web browser. This time you should see Hello, world! displayed in a H2-size HTML header. Now not only have you learned to write your first CGI program, youve also learned your first Perl statement, the print function: print somestring; This function will write out any string, variable, or combinations thereof to the current output channel. In the case of your CGI program, the current output is being printed to the visitors browser. You can write multiple lines of text without using multiple print statements by using the here-document syntax as shown: print <<EndMarker; line1 line2 line3 etc. EndMarker You can use any word or phrase for the end marker Program 4.3: third.cgi Hello World Program, with here-doc #!/perl/bin/perl -wT print Content-type: text/html\n\n; print <<EndOfHTML; <html><head><title>Test Page</title></head> <body> <h2>Hello, world!</h2> </body></html> EndOfHTML When a closing here-document marker is on the last line of the file, be sure you have a line break after
70
the marker. If the end-of-file mark is on the same line as the here-doc marker, youll get an error when you run your program.
The CGI.pm Module

Perl offers a powerful feature to programmers: add-on modules. These are collections of pre-written code that can you can use to do all kinds of tasks. You can save yourself the time and trouble of reinventing the wheel by using these modules. Some modules are included as part of the Perl distribution; these are called standard library modules and dont have to be installed. If you have Perl, you already have the standard library modules. Lets see how to use a module in your CGI program. First you have to actually include the module via the use command. This goes after the #!/perl/bin/perl line and before any other code: use CGI qw(:standard); Note were not doing use CGI.pm but rather use CGI. The .pm is implied in the use statement. The qw(:standard) part of this line indicates that were importing the standard set of functions from CGI.pm. Now you can call the various module functions by typing the function name followed by any arguments: functionname(arguments) If you arent passing any arguments to the function, you can omit the parentheses. A function is a piece of code that performs a specific task; it may also be called a subroutine or a method. Functions may accept optional arguments (also called parameters), which are values (strings, numbers, and other variables) passed into the function for it to use. The CGI.pm module has many functions; for now well start by using these three: header; start_html; end_html; The header function prints out the Content-type header. With no arguments, the type is assumed to be text/html. start_html prints out the <html>, <head>, <title> and <body> tags. It also accepts optional arguments. If you call start_html with only a single string argument, its assumed to be the page title. For example: print start_html(Hello World); will print out the following: <html> <head> <title>Hello World</title> <head> <body>
71
Lets try using CGI.pm in an actual program now.
Program 4.4: fourth.cgi Hello World Program, using CGI.pm

#!/usr/bin/perl -wT use CGI qw(:standard); print header; print start_html(Hello World); print <h2>Hello, world!</h2>\n; print end_html; CGI.pm also has a number of functions that serve as HTML shortcuts. For instance: print h2(Hello, world!) Will print an H2-sized header tag. Documentation can be embedded in a program using comments. A comment in Perl is preceded by the # sign; anything appearing after the # is a comment. Youll notice the first line (#!/usr/bin/perl) is a comment, but its a special kind of comment. It indicates what program to use to run the rest of the script. Before you can proceed much further with CGI programming, youll need some understanding of Perl variables, and control structures.
Basics of Pearl
A variable is a place to store a value, so you can refer to it or manipulate it throughout your program.
Pearl Variables
Perl has three types of variables: scalars, arrays, and hashes.
Scalars
A scalar variable stores a single (scalar) value. Perl scalar names are prefixed with a dollar sign ($), so for example, $x, $y, $z, $username, and $url are all examples of scalar variable names. Heres how variables are set: $foo = 1; $name = Fred; $pi = 3.141592; In this example $foo, $name, and $pi are scalars. You do not have to declare a variable before using it, but its considered good programming style to do so. There are several different ways to declare variables, but the most common way is with the my function:
72
my $foo = 1; my ($name) = Fred; my ($pi) = 3.141592;
my simultaneously declares the variables and limits their scope (the area of code that can see these variables) to the enclosing code block. You can declare a variable without giving it a value: my $foo; You can also declare several variables with the same my statement: my ($foo, $bar, $blee); A scalar can hold data of any type, be it a string, a number, or whatnot. You can also use scalars in double-quoted strings: my $fnord = 23; my $blee = The magic number is $fnord.; Now if you print $blee, you will get The magic number is 23. Perl interpolates the variables in the string, replacing the variable name with the value of that variable. Lets try it out in a CGI program.
Program 4.5: scalar.cgi Print Scalar Variables Program

#!/usr/bin/perl -wT use CGI qw(:standard); use CGI::Carp qw(warningsToBrowser fatalsToBrowser); use strict; my $email = fnord\@cgi101.com; my $url = http://www.cgi101.com; print header; print start_html(Scalars); print <<EndHTML; <h2>Hello</h2> <p> My e-mail address is $email, and my web url is <a href=$url>$url</a>. </p> EndHTML print end_html;
73
You may change the $email and $url variables to show your own e-mail address and website URL. Save the program and test it in your browser. Youll notice a few new things in this program. First, theres use strict. This is a standard Perl module that requires you to declare all variables. You dont have to use the strict module, but its considered good programming style, so its good to get in the habit of using it. Youll also notice the variable declarations: my $email = fnord\@cgi101.com; my $url = http://www.cgi101.com; Notice that the @-sign in the e-mail address is escaped with (preceded by) a backslash. This is because the @-sign means something special to .A better way to do this would be to use a single-quoted string for the e-mail address: my $email = fnord@cgi101.com; Single-quoted strings are not interpolated the way double-quoted strings are, so you can freely use the special characters $, @ and % in them. However this also means you cant use a single-quoted string to print out a variable, because print $fnord; will print the actual string $fnord not the value stored in the variable named $fnord.
Arrays
An array stores an ordered list of values. While a scalar variable can only store one value, an array can store many. Perl array names are prefixed with an @-sign. Here is an example: my @colors = (red,green,blue); Each individual item (or element) of an array may be referred to by its index number. Array indices start with 0, so to access the first element of the array @colors, you use $colors[0]. Notice that when youre referring to a single element of an array, you prefix the name with $ instead of @. The $-sign again indicates that its a single (scalar) value; the @-sign means youre talking about the entire array. If you want to loop through an array, printing out all of the values, you could print each element one at a time: my @colors = (red,green,blue); print $colors[0]\n; print $colors[1]\n; print $colors[2]\n; # prints red # prints green # prints blue
A much easier way to do this is to use a foreach loop:
74
my @colors = (red,green,blue); foreach my $i (@colors) { print $i\n; }
Getting Data Into And Out Of Arrays

An array is an ordered list of elements. You can think of it like a group of people standing in line waiting to buy tickets. Before the line forms, the array is empty: my @people = (); Then Howard walks up. Hes the first person in line. To add him to the @people array, use the push function: push(@people, Howard); Now Sara, Ken, and Josh get in line. Again they are added to the array using the push function. You can push a list of values onto the array: push(@people, (Sara, Ken, Josh)); This pushes the list containing Sara, Ken and Josh onto the end of the @people array, so that @people now looks like this: (Howard, Sara, Ken, Josh) Now the ticket office opens, and Howard buys his ticket and leaves the line. To remove the first item from the array, use the shift function: my $who = shift(@people); This sets $who to Howard, and also removes Howard from the @people array, so @people now looks like this: (Sara, Ken, Josh) Suppose Josh gets paged, and has to leave. To remove the last item from the array, use the pop function: my $who = pop(@people); This sets $who to Josh, and @people is now (Sara, Ken) Both shift and pop change the array itself, by removing an element from the array.
Finding the Length of Arrays

If you want to find out how many elements are in a given array, you can use the scalar function: my @people = (Howard, Sara, Ken, Josh);
75
my $linelen = scalar(@people); print There are $linelen people in line.\n; This prints There are 4 people in line.
Array Slices
You can retrieve part of an array by specifying the range of indices to retrieve: my @colors = (cyan, magenta, yellow, black); my @slice = @colors[1..2]; This example sets @slice to (magenta, yellow).
Finding An Item In An Array

If you want to find out of a particular element exists in an array, you can use the grep function: my @results = grep(/pattern/,@listname); /pattern/ is a regular expression for the pattern youre looking for. It can be a plain string, such as /Box kite/, or a complex regular expression pattern. /pattern/ will match partial strings inside each array element. To match the entire array element, use /^pattern$/, which anchors the pattern match to the beginning (^) and end ($) of the string. grep returns a list of the elements that matched the pattern.
Splitting an Array
A very useful function in Perl is split, which splits up a string and places it into an array. The function uses a regular expression to specify the character on which the string has to be splitted. The split function is used like this:
$info = Caine:Michael:Actor:14, Leafy Drive; @personal = split(/:/, $info); which has the same overall effect as @personal = (Caine, Michael, Actor, 14, Leafy Drive);
Hashes
A hash is a special kind of array an associative array, or paired list of elements. Each pair consists of a string key and a data value. Perl hash names are prefixed with a percent sign (%). Heres how theyre defined:
my %colors = ( red, #ff0000, green, #00ff00, blue, #0000ff, black, #000000, white, #ffffff );
76
This particular example creates a hash named %colors which stores the RGB HEX values for the named colors. The color names are the hash keys; the hex codes are the hash values. Remember that theres more than one way to do things in Perl, and heres the other way to define the same hash:
my %colors = ( red => #ff0000, green => #00ff00, blue => #0000ff, black => #000000, white => #ffffff );
The => operator automatically quotes the left side of the argument, so enclosing quotes around the key names are not needed. To refer to the individual elements of the hash, youll do: $colors{red} Here, red is the key, and $colors{red} is the value associated with that key. In this case, the value is #ff0000. To print out all the values in a hash, you can use a foreach loop: foreach my $color (keys %colors) { print $colors{$color}=$color\n; } Pearl provides the keys function, which returns a list of the keys of the named hash. One drawback is that keys %hashname will return the keys in unpredictable order . in this example, keys %colors could return (red, blue, green, black, white) or (red, white, green, black, blue) or any combination thereof. If you want to print out the hash in exact order, you have to specify the keys in the foreach loop: foreach my $color (red,green,blue,black,white) { print $colors{$color}=$color\n; } Lets write a CGI program using the colors hash.
77
Program 4.6: colors.cgi - Print Hash Variables Program

#!/usr/bin/perl -wT use CGI qw(:standard); use CGI::Carp qw(warningsToBrowser fatalsToBrowser); use strict; # declare the colors hash: my %colors = ( red => #ff0000, green=> #00ff00, blue => #0000ff, black => #000000, white => #ffffff ); # print the html headers print header; print start_html(Colors); foreach my $color (keys %colors) { print <font color=\$colors{$color}\>$color</font>\n; } print end_html;
Notice weve had to add backslashes to escape the quotes in this double-quoted string: print <font color=\$colors{$color}\>$color</font>\n; A better way to do this is to use Perls qq operator: print qq(<font color=$colors{$colors}>$color</font>\n); qq creates a double-quoted string for you. And its much easier to read without all those backslashes in there.
Adding Items to a Hash

To add a new value to a hash, you simply do: $hashname{newkey} = newvalue; Using our colors example again, heres how to add a new value with the key purple: $colors{purple} = #ff00ff; If the named key already exists in the hash, then an assignment like this overwrites the previous value associated with that key.
78
Deleting Items From a Hash
You can delete an individual key/value pair from a hash with the delete function: delete $hashname{key}; If you want to empty out the entire hash, do: %hashname = ();
Values
Weve already seen that the keys function returns a list of the keys of a given hash. Similarly, the values function returns a list of the hash values:
my %colors = (red => "#ff0000", green=> "#00ff00", blue => "#0000ff", black => "#000000", white => "#ffffff" ); my @keyslice = keys %colors; # @keyslice now equals a randomly ordered list of # the hash keys: # ("red", "green", "blue", "black", "white") my @valueslice = values %colors; # @valueslice now equals a randomly ordered list of # the hash values: # ("ff0000", "#00ff00", "#0000ff", "#000000", "#ffffff") As with keys, values returns the values in unpredictable order.
Determining Whether a Hash is Empty

You can use the scalar function on hashes as well: scalar($hashname); This returns true or false value true if the hash contains any key/value pairs. The value returned does not indicate how many pairs are in the hash, however. If you want to find that number, use:
Heres an example: my %colors = (red => #ff0000, green=> #00ff00, blue => #0000ff, black => #000000, white => #ffffff );
79
my $numcolors = scalar(keys(%colors)); print There are $numcolors in this hash.\n; This will print out There are 5 colors in this hash.
Perl Control Structures

Control structures include conditional statements, such as if/elseif/else blocks, as well as loops like foreach, for and while.
Conditional Statements
If Condition Youve already seen if/elsif in action. The structure is always started by the word if, followed by a condition to be evaluated, then a pair of braces indicating the beginning and end of the code to be executed if the condition is true. The condition is enclosed in parentheses: if (condition) { code to be executed } The condition statement can be anything that evaluates to true or false. In Perl, any string is true except the empty string and 0. Any number is true except 0. An undefined value (or undef) is false.You can also test whether a certain value equals something, or doesnt equal something, or is greater than or less than something. There are different conditional test operators, depending on whether the variable you want to test is a string or a number:
Test $x is equal to $y $x is not equal to $y $x is greater than $y $x is greater than or equal to $y $x is less than $y $x is less than or equal to $y
Numbers $x == $y $x != $y $x > $y $x >= $y $x < $y $x <= $y
Strings $x eq $y $x ne $y $x gt $y $x ge $y $x lt $y $x le $y
Table 4.1 Relational and Equality Operators
If its a string test, you use the letter operators (eq, ne, lt, etc.), and if its a numeric test, you use the symbols (==, !=, etc.). Here is an example of a numeric test. If $varname is greater than 23, the code inside the curly braces is executed:
80
if ($varname > 23) { # do stuff here if the condition is true }
If you need to have more than one condition, you can add elsif and else blocks: if ($varname eq somestring) { # do stuff here if the condition is true } elsif ($varname eq someotherstring) { # do other stuff } else { # do this if none of the other conditions are met } You can join conditions together by using logical operators: Operator && || and or Example condition1 condition2 Explanation && True if condition1 and condition2 are both true True if either condition1 or condition2 is true Same as || but lower precedence
condition1 || condition2
condition1 and condition2 Same as && but lower precedence condition1 or condition2
Table 4.2 Logical Operators
Logical operators are evaluated from left to right. Precedence indicates which operator is evaluated first, in the event that more than one operator appears on one line. In a case like this: condition1 || condition2 && condition3 condition2 && condition3 is evaluated first, then the result of that evaluation is used in the || evaluation. and and or work the same way as && and ||, although they have lower precedence than their symbolic counterparts.
Unless:
unless is similar to if. Lets say you wanted to execute code only if a certain condition were false. You could do something like this:
81
if ($varname != 23) { # code to execute if $varname is not 23 } The same test can be done using unless : unless ($varname == 23) { # code to execute if $varname is not 23 } There is no elseunless, but you can use an else clause: unless ($varname == 23) { # code to execute if $varname is not 23 } else { # code to execute if $varname is 23 }
Looping
Loops allow you to repeat code for as long as a condition is met. Perl has several loop control structures: foreach, for, while and until.
Foreach Loops
foreach iterates through a list of values: foreach my $i (@arrayname) { # code here } This loops through each element of @arrayname, setting $i to the current array element for each pass through the loop. You may omit the loop variable $i: foreach (@arrayname) { # $_ is the current array element } This sets the special Perl variable $_ to each array element. $_ does not need to be declared (its part of the Perl language) and its scope localized to the loop itself.
For Loops
Perl also supports C-style for loops: for ($i = 1; $i < 23; $i++) {
82
# code here }
The for statement uses a 3-part conditional: the loop initializer; the loop condition (how long to run the loop); and the loop re-initializer (what to do at the end of each iteration of the loop). In the above example, the loop initializes with $i being set to 1. The loop will run for as long as $i is less than 23, and at the end of each iteration $i is incremented by 1 using the auto-increment operator (++). The conditional expressions are optional. You can do infinite loops by omitting all three conditions: for (;;) { # code here } You can also write infinite loops with while.
While Loops
A while loop executes as long as particular condition is true: while (condition) { # code to run as long as condition is true }
Until Loop
until is the reverse of while. It executes as long as a particular condition is NOT true: until (condition) { # code to run as long as condition is not true }
Working with CGI CGI Environment Variables

When a CGI program is called, the information that is made available to it can be roughly broken into three groups:
l l l
Information about the client, server, and user Form data that the user supplied Additional pathname information
Most information about the client, server, or user is placed in CGI environment variables. Form data is either incorporated into an environment variable, or is included in the body of the request. And extra path information is placed in environment variables.
83
Much of the most crucial information needed by CGI applications is made available via environment variables. Programs can access this information as they would any environment variable (via the %ENV array in Perl). This section concentrates on showing examples of some of the more typical uses of environment variables in CGI programs. The following table shows a full list of environment variables available for CGI.
Environment Variable GATEWAY_INTERFACE SERVER_NAME SERVER_SOFTWARE SERVER_PROTOCOL SERVER_PORT REQUEST_METHOD PATH_INFO PATH_TRANSLATED SCRIPT_NAME DOCUMENT_ROOT QUERY_STRING REMOTE_HOST REMOTE_ADDR AUTH_TYPE REMOTE_USER REMOTE_IDENT CONTENT_TYPE CONTENT_LENGTH HTTP_FROM HTTP_ACCEPT HTTP_USER_AGENT HTTP_REFERER Description The revision of the Common Gateway Interface that the server uses. The server's hostname or IP address. The name and version of the server software that is answering the client request. The name and revision of the information protocol the request came in with. The port number of the host on which the server is running. The method with which the information request was issued. Extra path information passed to a CGI program. The translated version of the path given by the variable PATH_INFO. The virtual path (e.g., /cgi-bin/program.pl) of the script being executed. The directory from which Web documents are served. The query information passed to the program. It is appended to the URL with a "?". The remote hostname of the user making the request. The remote IP address of the user making the request. The authentication method used to validate a user. The authenticated name of the user. The user making the request. This variable will only be set if NCSA IdentityCheck flag is enabled, and the client machine supports the RFC 931 identification scheme (ident daemon). The MIME type of the query data, such as "text/html". The length of the data (in bytes or the number of characters) passed to the CGI program through standard input. The email address of the user making the request. Most browsers do not support this variable. A list of the MIME types that the client can accept. The browser the client is using to issue the request. The URL of the document that the client points to before accessing the CGI program.
Table 4.3 List of CGI Environment variables
84
Lets start with a simple program that displays various information about the server, such as the CGI and HTTP revisions used and the name of the server software.
Program 4.7: envvar.cgi - Print environment variables

#!/usr/local/bin/perl print "Content-type: text/html", "\n\n"; print "<HTML>", "\n"; print "<HEAD><TITLE>About this Server</TITLE></HEAD>", "\n"; print "<BODY><H1>About this Server</H1>", "\n"; print "<HR><PRE>"; print "Server Name: ", $ENV{'SERVER_NAME'}, "<BR>", "\n"; print "Running on Port: ", $ENV{'SERVER_PORT'}, "<BR>", "\n"; print "Server Software: ", $ENV{'SERVER_SOFTWARE'}, "<BR>", "\n"; print "Server Protocol: ", $ENV{'SERVER_PROTOCOL'}, "<BR>", "\n"; print "CGI Revision: ", $ENV{'GATEWAY_INTERFACE'}, "<BR>", "\n"; print "<HR></PRE>", "\n"; print "</BODY></HTML>", "\n"; exit (0);
Accessing Form Input

Forms provide a way to get input from users and supply it to a CGI program, as shown in Figure 4.4. The Web browser allows the user to select or type in information, and then sends it to the server when the Submit button is pressed. In this chapter, well talk about how the CGI program accesses the form input.
Fig 4.4: Form interaction with CGI
85
Query Strings
One way to send form data to a CGI program is by appending the form information to the URL, after a question mark. You may have seen URLs like the following:
http://some.machine/cgi-bin/name.pl?fortune
Up to the question mark (?), the URL should look familiar. It is merely a CGI script being called, by the name name.pl. Whats new here is the part after the ?. The information after the ? character is known as a query string. When the server is passed a URL with a query string, it calls the CGI program identified in the first part of the URL (before the ?) and then stores the part after the ? in the environment variable QUERY_STRING. The following is a CGI program called name.pl that uses QUERY_STRING to print the information passed.
#!/usr/local/bin/perl print Content-type: text/plain, \n\n; $query_string = $ENV{QUERY_STRING}; if ($query_string eq fortune) { print query string is fortune; } elsif ($query_string eq finger) { print query string is finger; } else { print invalid query string; } exit (0); You can execute this script as either: http://some.machine/cgi-bin/name.pl?fortune http://some.machine/cgi-bin/name.pl?finger or http://some.machine/cgi-bin/name.pl and you will get different output.
A Simple Form
Although the previous example will work, the following example is a more realistic illustration of how forms work with CGI. Instead of supplying the information directly as part of the URL, well use a form to solicit it from the user.
86
<HTML> <HEAD><TITLE>Simple Form!</TITLE></HEAD> <BODY> <H1>Simple Form!</H1> <HR> <FORM ACTION=/cgi-bin/process.pl METHOD=GET> Command: <INPUT TYPE=text NAME=command SIZE=40> <P> <INPUT TYPE=submit VALUE=Submit Form!> <INPUT TYPE=reset VALUE=Clear Form> </FORM> <HR> </BODY> </HTML>
Since this is HTML, the appearance of the form depends on what browser is being used. Figure 4.5 shows what the form looks like in Netscape.
Fig 4.5 Simple form in Netscape
This form consists of one text field titled Command: and two buttons. The Submit Form! button is used to send the information in the form to the CGI program specified by the ACTION attribute. The Clear Form button clears the information in the field. The two attributes within the <FORM> tag (ACTION and METHOD) are very important. The ACTION attribute specifies the URL of the CGI program that will process the form information. You are not limited to using a CGI program on your server to decode form information; you can specify a URL of a remote host if a program that does what you want is available elsewhere.
87
The METHOD attribute specifies how the server will send the form information to the program. POST sends the data through standard input, while GET passes the information through environment variables. If no method is specified, the server defaults to GET. Both methods have their own advantages and disadvantages. Now, assuming that the user enters fortune into the text field, when the Submit Form! button is pressed the browser sends the following request to the server: GET /cgi-bin/unix.pl?command=fortune HTTP/1.0 . . (header information) . The server executes the script called process.pl in the cgi-bin directory, and places the string command=fortune into the QUERY_STRING environment variable. Lets go through the simple process.pl CGI program that handles this form: #!/usr/local/bin/perl print Content-type: text/plain, \n\n; $query_string = $ENV{QUERY_STRING}; ($field_name, $command) = split (/=/, $query_string); After printing the content type and getting the query string from the %ENV array, we use the split function to separate the query string on the = character into two parts, with the first part before the equal sign in $field_name, and the second part in $command. In this case, $field_name will contain command and $command will contain fortune.
if ($command eq fortune) { print query string is fortune; } elsif ($command eq finger) { print query string is finger; } else { print invalid query string; } exit (0);
Since we used the GET method, all the form data is included in the URL. So we can directly access this program without the form, by using the following URL: http://some.machine/cgi-bin/unix.pl?command=fortune It will work exactly as if you had filled out the form and submitted it.
88
The GET and POST Methods
In the previous example, we used the GET method to process the form. However, there is another method we can use, called POST. Using the POST method, the server sends the data as an input stream to the program. That is, if in the previous example the <FORM> tag had read: <FORM ACTION=process.pl METHOD=POST> the following request would be sent to the server: POST /cgi-bin/unix.pl HTTP/1.0 . . (header information) . Content-length: 15 command=fortune The version of process.pl that handles the form with POST data follows. First, since the server passes information to this program as an input stream, it sets the environment variable CONTENT_LENGTH to the size of the data in number of bytes (or characters). We can use this to read exactly that much data from standard input. #!/usr/local/bin/perl $size_of_form_information = $ENV{CONTENT_LENGTH}; Second, we read the number of bytes, specified by $size_of_form_information, from standard input into the variable $form_info. read (STDIN, $form_info, $size_of_form_information); Now we can split the $form_info variable into a $field_name and $command, as we did in the GET version of this example. As with the GET version, $field_name will contain command, and $command will contain fortune (or whatever the user typed in the text field). The rest of the example remains unchanged: ($field_name, $command) = split (/=/, $form_info); print Content-type: text/plain, \n\n; if ($command eq fortune) { print query string is fortune; } elsif ($command eq finger) { print query string is finger; } else { print invalid query string; } exit (0);
89
Since its the form that determines whether the GET or POST method is used, the CGI programmer cant control which method the program will be called by. So scripts are often written to support both methods. The following example will work with both methods:
#!/usr/local/bin/perl $request_method = $ENV{REQUEST_METHOD}; if ($request_method eq GET) { $form_info = $ENV{QUERY_STRING}; } else { $size_of_form_information = $ENV{CONTENT_LENGTH}; read (STDIN, $form_info, $size_of_form_information); } ($field_name, $command) = split (/=/, $form_info); print Content-type: text/plain, \n\n; if ($command eq fortune) { print query string is fortune; } elsif ($command eq finger) { print query string is finger; } else { print invalid query string; } exit (0);
The environment variable REQUEST_METHOD contains the request method used by the form. In this example, the only new thing we did was check the request method and then assign the $form_info variable as needed.
Encoded Data
So far, weve shown an example for retrieving very simple form information. However, form information can get complicated. Since under the GET method the form information is sent as part of the URL, there cant be any spaces or other special characters that are not allowed in URLs. Therefore, some special encoding is used. Consider the following form: <HTML> <HEAD><TITLE>Whens your birthday?</TITLE></HEAD> <BODY> <H1>Whens your birthday?</H1> <HR> <FORM ACTION=/cgi-bin/birthday.pl METHOD=POST> Birthday (in the form of mm/dd/yy): <INPUT TYPE=text NAME=birthday SIZE=40>
90
<P> <INPUT TYPE=submit VALUE=Submit Form!> <INPUT TYPE=reset VALUE=Clear Form> </FORM> <HR> </BODY> </HTML>
When the user submits the form, the client issues the following request to the server (assuming the user entered 11/05/73): POST /cgi-bin/birthday.pl HTTP/1.0 . . (information) . Content-length: 21 birthday=11%2F05%2F73 In the encoded form, certain characters, such as spaces and other character symbols, are replaced by their hexadecimal equivalents. In this example, our program needs to decode this data, by converting the %2F to /. Here is the CGI program-birthday.pl-that handles this form: #!/usr/local/bin/perl $size_of_form_information = $ENV{CONTENT_LENGTH}; read (STDIN, $form_info, $size_of_form_information); The following complicated-looking regular expression is used to decode the data. $form_info =~ s/%([\dA-Fa-f][\dA-Fa-f])/pack (C, hex ($1))/eg; In the case of this example, it will turn %2F into /. The rest of the program should be easy to follow: ($field_name, $birthday) = split (/=/, $form_info); print Content-type: text/plain, \n\n; print Your birthday is on: $birthday \n; exit (0);
Extra Path Information

Besides passing query information to a CGI script, you can also pass additional data, known as extra path information, as part of the URL. The server gauges where the CGI program name ends; anything
91
following is deemed extra and is stored in the environment variable PATH_INFO. The following line calls a script with extra path information: http://some.machine/cgi-bin/display.pl/cgi/cgi_doc.txt Since the server knows that display.pl is the name of the program, the string /cgi/cgi_doc.txt is stored in the environment variable PATH_INFO. Meanwhile, the variable PATH_TRANSLATED is also set, which maps the information stored in PATH_INFO to the document root directory (e.g., /usr/local/ etc/httpd/ public/cgi/cgi-doc.txt in case of UNIX OS). Here is a CGI script display.pl that can be used to display text files located in the document root hierarchy:
#!/usr/local/bin/perl $plaintext_file = $ENV{PATH_TRANSLATED}; print Content-type: text/plain, \n\n; if (open (FILE, < . $plaintext_file)) { while (<FILE>) { print; } close (FILE); } else { print Sorry! The file you specified cannot be read!, \n; } exit (0);
Instead of using the PATH_TRANSLATED environment variable, you can use a combination of PATH_INFO and DOCUMENT_ROOT, which contains the physical path to the document root directory. The variable PATH_TRANSLATED is equal to the following statement: $path_translated = join (/, $ENV{DOCUMENT_ROOT}, $ENV{PATH_INFO}; However, the DOCUMENT_ROOT variable is not set by all servers, and so it is much safer and easier to use PATH_TRANSLATED.
4.5 CGI CONSIDERATIONS

Now we have learnt some basics of CGI programming, lets look at some considerations that need to be taken to create effective virtual documents. First and most importantly, you need to understand what kind of information is to be presented. If it is
92
plain text or HTML, there is no problem. However, if the data is unreadable by the client, a gateway has to be written to effectively translate that data. This leads to another important matter: The original (or unreadable) data has to be organized in such a way that it will be easy for the gateway to read from and write to the data source. Once you have the gateway and you can retrieve data, you can present it in numerous ways. For example, if the data is numerical in nature, you can create virtual graphs and plots using various utility software. On the other hand, if the data consists of graphical objects, you can modify the information using numerous graphic manipulation tools. In summary, you need to think about what you want to present and how to prevent it long before the actual process of implementing CGI programs. This will ensure the creation of effective virtual documents.
QUESTIONS
1. 2. 3. 4. 5. 6. 7. 8. 9. What is CGI? Give examples of CGI application and explain any one of them. What are CGI environment variables? Explain any Five. Give differences between Java Script and CGI programming. Explain CGI.pm module with an example. Explain different types of PEARL Variables. Explain PEARL control structures with appropriate examples. What is Query String? Explain with an example. What are GET and POST methods? What is the difference between GET and POST Methods? Write a simple CGI application which accepts the user information and displays the Information entered to the user. Write a CGI application which accepts 3 numbers from the user and displays the LCM of three numbers using GET and POST methods. What is Extra Path information? Explain with an example.
10.
11.

BSIT 52 Main PG 1 92

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

BSIT 52 Main PG 1 92

Hochgeladen von

Copyright:

Verfügbare Formate

BSIT 52 Web Programming

Introduction to Web Programming

1.1 INTRODUCTION TO WEB

So what exactly is the web?

BSIT 52 Web Programming

Chapter 1 - Introduction to Web Programming

Fig 1.1 Understanding Web

1.2 BUILDING ELEMENTS OF WEB

HTML the Language of the Web

BSIT 52 Web Programming

Chapter 1 - Introduction to Web Programming

BSIT 52 Web Programming

Fig 1.2 HTTP communication between client and server.

The GET Method

The Post Method

Chapter 1 - Introduction to Web Programming

1.3 WHY JAVASCRPTS AND DHTML

1.4 INTRODUCTION TO CGI

BSIT 52 Web Programming

1.5 STATIC Vs DYNAMIC WEB PAGES

1.6 SERVLETS AND JSP

Chapter 1 - Introduction to Web Programming

BSIT 52 Web Programming

2.1 WHAT IS HTML?

HTML allows you to:

BSIT 52 Web Programming

2.2 YOUR FIRST HTML PAGE

HTM OR HTML EXTENSION?

BSIT 52 Web Programming

<b>This text is bold</b>

<body> This is my first homepage. <b>This text is bold</b> </body>

2.3 LIST OF HTML TAGS

BSIT 52 Web Programming

2.4 TAGS IN DETAIL

HTML HEAD TITLE BODY

HEAD (document header)

BODY (main content of document)

BSIT 52 Web Programming

Block-Level Text Elements

ADDRESS BLOCKQUOTE DIV H1 through H6 P

ADDRESS (address format)

BSIT 52 Web Programming

BLOCKQUOTE (indented block of text)

DIV (section of a document)

BSIT 52 Web Programming

H1 through H6 (standard headings)

Example The following example displays two paragraphs.

BSIT 52 Web Programming

BSIT 52 Web Programming

BSIT 52 Web Programming

Example 1. A Simple Table.

BSIT 52 Web Programming

CENTER (Centered content)

BSIT 52 Web Programming

ANCHORS AND LINKS A (anchor or link)

IMAGES IMG (image)

GIF (Graphics Interchange Format)

BSIT 52 Web Programming

JPEG (Joint Photographic Experts Group) XPM (X PixMap) XBM (X BitMap)

Example 1. An Image With a Low Resolution Placeholder

This example uses the following attributes to improve performance:

Kinds of Interface Elements

BSIT 52 Web Programming