Professional Documents
Culture Documents
Web PDF
Web PDF
06CS73
INTRODUCTION AND OVERVIEW
Dr. Kavi Mahesh,
PESIT, Bangalore
Introduction:
Internet History:
The Internet originated in the form of ARPAnet in the late 1960s and early 1970s
primarily for ARPA-funded research organizations. Later, BITnet and CSnet came up in
the late 1970s and early 1980s. Email and file transfer for other institutions started with
NSFnet in 1986 which initially connected five supercomputer centers. By 1990, it had
replaced ARPAnet for non-military uses and became the network for all (by the early
1990s). NSFnet eventually became known as the Internet.
What is the Internet
A world-wide network of computer networks
At the lowest level, since 1982, all connections use TCP/IP
TCP/IP hides the differences among devices connected to the Internet
Internet Protocols:
Internet Protocol (IP) Addresses
Every node has a unique numeric address
Form: 32-bit binary number
New standard, IPv6, has 128 bits (1998)
Problem: By the mid-1980s, several different protocols had been invented (Telnet,
FTP, Usenet, mailto, )
IP Addresses:
Web or Internet:
The Web uses one of the protocols, http, that runs on the Internet--there are several others
(telnet, mailto, etc.).
Client-Server:
Clients and Servers are programs that communicate with each other over the
Internet
A Server runs continuously, waiting to be contacted by a Client
Each Server provides certain services
Services include providing web pages
A Client will send a message to a Server requesting the service provided by that
server
The client will usually provide some information, parameters, with the
request
Web-based systems:
Server
Client
Web server
E.g., Apache or IIS
Web browser
E.g., IE, FireFox,
Web Browser:
Browsers are clients - always initiate, servers react (although sometimes servers
require responses)
Mosaic - NCSA (Univ. of Illinois), in early 1993
First to use a GUI, led to explosion of Web use
Initially for X-Windows, under UNIX, but was ported to other platforms
by late 1993
Most requests are for existing documents, using HyperText Transfer Protocol
(HTTP)
But some requests are for program execution, with the output being
returned as a document
Web Server:
Operation:
IIS
-
URL
General form:
scheme:object-address
The scheme is often a communications protocol, such as telnet or ftp
For the http protocol, the object-address is:
Host name may include a port number, as in zeppo:80 (80 is the default)
URLs cannot include spaces or any of a collection of other special characters
(semicolons, colons, ...)
The doc path may be abbreviated as a partial path
The rest is furnished by the server configuration
If the doc path ends with a slash, it means it is a directory
HTTP Methods:
GET - Fetch a document
POST - Execute the document, using the data in body
HEAD - Fetch just the header of the document
PUT - Store a new document on the server
DELETE - Remove a document from the server
HTTP Headers:
There are four categories of header fields: General, request, response and entity.
Common request fields: Accept: text/plain, Accept: text/*,
If-Modified_since: date
Common response fields: Content-length: 488, Content-type: text/html
- Can communicate with HTTP without a browser
- > telnet blanca.uccs.edu http
GET /respond.html HTTP/1.1
Host: blanca.uccs.edu
HTTP Response
Form:
Status line
Response header fields
blank line
Response body
XHTML
Plug ins
Integrated into tools like word processors, effectively converting them to
WYSIWYG XHTML editors
Filters
Convert documents in other formats to XHTML
Advantages of both filters and plug-ins:
Existing documents produced with other tools can be converted to
XHTML documents
Use a tool you already know to produce XHTML
Disadvantages of both filters and plug-ins:
XHTML output of both is not perfect - must be fine tuned
XHTML may be non-standard
You have 2 versions of the doc: difficult to synchronize
Server gets type from the requested file names suffix (.html implies text/html)
Browser gets the type explicitly from the server.
Type/subtype. A list of MIME specifications is stored in the configuration files of
every web server.
Overview of Toolkit
XHTML
XML
Javascript
Perl
Java
PHP
TCL, JSP, ASP.Net, etc.
XML
A meta-markup language
Used to create a new markup language for a particular purpose or area
Because the tags are designed for a specific area, they can be meaningful
No presentation details
A simple and universal way of representing data of any textual kind
JavaScript
Java
Perl
PHP
Web Programming
Client-Server Systems
Server
Client
Implications
Program context in two possible parts
Client-side and server-side
Link may be broken
Response may be delayed
world wide wait
Different platforms, etc.
Browser as GUI
Implications
Limited graphic abilities
Easy to build GUI
Many browsers
Many versions
Many idiosyncratic extensions
Implications
Cost of server loop
E.g., validation of user input
Client-side validation
Populating lists, menus, etc. in browser
E.g., auto-completion
Pre-fetching of data: AJAX
Implications
Server does not maintain status
Server cannot contact client!
Session maintenance
Session expired
Client-side session data: unsafe!
Implications
Server cannot wait in a loop
User may not respond as expected
User may navigate out at any point!
No well-defined control structure
User events trigger requests to servers
Button click, menu selection, on-load, on-unload, etc.
3-tier/4-tier architecture
Web server
Browser client
Database server
10
Applications server
Provides scalability by performing computations, data validations,
session maintenance, etc.
Encryption
HTTPS://
Cookies, history, etc.
Phishing
Virtual keyboards
Data security
Security issues in B2B
Server-Side Programming
Client-Side Programming
XHTML
Plug-ins
Filters
XML
Javascript
Flash, etc.
11
Database Access
ODBC / JDBC
Embed SQL statements in server-side code
DB login / connect string: security issue
Safer option: exec stored procedures
12
All properties are visible to all scripts ( no information hiding). Global variables are
properties of the Window object. There can be more than one Window object.
Global variables depend on which Window is the context. The Document object
represents the document displayed.
Why DOM?
Portability is the major issue while using the JavaScript. The standard DOM has to
provide a specification that would make Java programs and JavaScript scripts that deal
with XHTML documents portable among various browsers.
DOM Levels
DOM 0: informal, early browsers
DOM 1: XHTML/XML structure
DOM 2: event model, style interface, traversal
DOM 3: content model, validation
DOM specifications describe an abstract model of a document.
Interfaces describe methods and properties
The interfaces describe a tree structure
Different languages will bind the interfaces to specific implementations
The internal representation may not be tree-like. In JavaScript, data are represented as
properties and operations as methods. Nodes of the tree will be JavaScript objects.
Attributes of elements become named properties of element node objects.
<input type=text name=address>
The object representing this node will have two properties. Type property will have
value text and name property will have value address.
14
The following XHTML document and its corresponding DOM tree illustrate the
relationship between them.
<html xmlns = http://www.w3.org/1999/xhtml>
<head> <title> A simple document</title>
</head>
<body>
<table>
<tr>
<th> Breakfast</th>
<td>0 </td>
<td>1 </td>
</tr>
<tr>
<th> Lunch</th>
<td>1 </td >
<td> 0 </td>
</tr>
</table>
</body>
</html>
Elements in XHTML document correspond to objects in JavaScript. Objects can be
addressed in several ways:
1. forms and elements array defined in DOM 0.
Individual elements are specified by index.
The index may change when the form changes.
2. Using the name attributes for form and form elements
A name on the form element causes validation problems.
Names are required on form elements providing data to the server.
3. Using getElementById with id attributes.
id attribute value must be unique for an element.
Consider this simple form:
<form action = "">
<input type ="button name = pushMe">
</form>
The input element can be referenced as document.forms[0].element[0].
All elements from the reference element up to, but not including, the body must
have a name attribute.
This violates XHTML standards in some cases.
Example:
<form name = "myForm" action = "">
<input type ="button name="pushMe">
</form>
15
Tag Attribute
16
blur
onblur
change
onchange
click
onclick
focus
onfocus
load
onload
mousedown
onmousedown
mousemove
onmousemove
mouseout
onmouseout
mouseover
onmouseover
mouseup
onmouseup
select
onselect
submit
onsubmit
unload
onunload
Particular events are associated to certain attributes. The attribute for one kind of
event may appear on different tags allowing the program to react to events affecting
different components. A text element gets focus in three ways:
When the user puts the mouse cursor over it and presses the left button
When the user tabs to the element
By executing the focus method
Losing the focus is blurring.
Using an attribute, a JavaScript command can be specified:
<input type=button name=myButton
onclick= alert(You clicked the button!)/>
A function call can be used if the handler is longer than a single statement.
<input type=button name=myButton
onclick=myHandler()/>
An event can be registered for this tag in two ways:
<input type=button name=freeOffer
id=freeButton/>
Using an event attribute
<input type=button name=freeOffer
id=freeButton
onclick=freeButtonHandler()/>
Assigning to a property of the element node
document.getElementById(freeButton).onclick = freeButtonHandler
Note that the function name, a reference to the function, is assigned.
Writing freeButtonHandler() would assign the return value of the function
call as the handler (possible, but unlikely).
Note that the no parameters are passed to the function when called by the JavaScript
System. The handler code must identify the element that caused the call.
17
By manipulating the focus event the user can be prevented from changing the amount
in a text input field.
This is possible to work around:
Copy the page but leave out the validation code.
Simulate an HTTP request directly with socket-level programming.
If the validity of data is important, the server needs to check it.
Validating data using JavaScript provides quicker interaction for the user. Validity
checking on the server requires a round-trip for the server to check the data and then
to respond with an appropriate error page.
Handling a data validity error:
Put the focus in the field in question
Highlight the text for easier editing
If an event handler returns false, default actions are not taken by the browser. This
can be used in a Submit button event handler to check validity and not submit if there
are problems.
The name is First, Last, Middle-Initial, each part capitalized.
/^[A-Z][a-z]+, ?[A-Z][a-z]+, ?[A-Z]\.?$/
The phone is ddd-ddd-dddd where d is a digit.
/^\d{3}-\d{3}-\d{4}$/
Each pattern uses the ^ and $ anchors to make sure the entire string matches.
DOM 2 is defined in modules.
The Events module defines several sub modules.
HTML Events and Mouse Events are common.
An event object is passed as a parameter to an event handler.
Properties of this object provide information about the event.
Some event types will extend the interface to include information relevant
to the subtype. For example, a mouse event will include the location of
the mouse at the time of the event.
DOM 2 defines a process for determining which handlers to execute for a particular
event.
The process has three phases:
The event object representing the event is created at a particular node called the target
node.
In the capturing phase each node from the document root to the target node, in order,
is examined.
18
If the node is not the target node and there is a handler for that event at the
node and the handler is enabled for capture for the node, the handler is
executed.
Then all handlers registered for the target node, if any, are executed.
In the bubbling phase each node from the parent of the target node to the root node, in
order, is examined.
If there is a handler for that event at the node and the handler is not
enabled for capture for the node, the handler is executed.
Some event types are not allowed to bubble: load, unload, blur and focus
among the HTML event types.
As each handler is executed, properties of the event provide context.
The currentTarget property is the node to which the handler is registered.
The target property is the node to which the event was originally directed.
One major advantage of this scheme over DOM 0 is that event handling can be
centralized in an ancestor node.
For example, a calculator keyboard will have a number of digit buttons.
In some GUI frameworks, a handler must be added to each button
separately.
In DOM 2, the buttons could be organized under a single node and the
handler placed on the node.
As each handler is executed, properties of the event provide context.
The currentTarget property is the node to which the handler is registered
The target property is the node to which the event was originally directed
Handlers are called listeners in DOM 2.
addEventListener is used to register a handler, it takes three parameters.
A string naming the event type,
The handler,
A Boolean specifying whether the handler is enabled for the capture phase
or not.
The navigator object indicates which browser is being used to view the XHTML
document. The appName property of the navigator object gives the name of the
browser. The appVersion property of the navigator object gives the browser version.
Each element in an XHTML document has a corresponding ELEMENT object in the
DOM representation. The ELEMENT object has methods to support.
Traversing the document, that is, visiting each of the document nodes.
Modifying the document.
For example, removing and inserting child nodes. Various properties of Element
objects are related nodes. parentNode references the parent node of the Element.
previousSibling and nextSibling connect the children of a node into a list.
firstChild and lastChild reference children of an Element. These would be text nodes
or element nodes contained in the Element.
19
The insertBefore(newChild, refChild) method places the newChild node before the
refChild node.
The replaceChild(newChild, oldChild)method places the oldChild node with the
newChild node.
The removeChild(oldChild) method removes oldChild node from the DOM structure.
The appendChild(newChild) method adds the given node to the end of the list of the
siblings of the node through which it is called.
The highest levels of the execution environment of client-side JavaScript are
represented with the Window and Document objects.
The Document object includes a forms array property, which includes references to
all forms in the document. Each element of the forms array has an elements array,
which includes references to all elements in the form.
The DOM is an abstract interface whose purpose is to provide language independent
way to access the elements of an XHTML document.
XHTML tags are represented in JavaScript as objects, tag attributes are represented as
properties.
20
Introdcution
Dynamic XHTML is not a technology in and of itself, but rather is a combination
of three technologies: XHTML, Cascading Style Sheets (CSS) and Scripting. It usually
involves using scripting like JavaScript to change tag attribute, tag contents or CSS
property of an XHTML element . In modern browsers, most CSS properties can be
modified dynamically ie changes can be made after the document has been and is still
being displayed . This can be done by changing an individual style of element (using the
style property of the element) or by changing the class name assigned to the element
(using the className property).
Advantages of Dynamic XHTML
(1) Dynamic XHTML makes documents dynamic. Dynamic documents :
o Allow the designer to control how the HTML displays Web pages content.
o React and change with the actions of the visitor.
o Can exactly position any element in the window, and change that position after
the document has loaded.
o Can hide and show content as needed.
(2) Dynamic XHTML allows any HTML element (any object on the screen that can
be controlled independently using JavaScript) to be manipulated at any time,
turning plain HTML into dynamic HTML
(3) With DHTML, changes occur entirely on the client-side
(4) Using DHTML gives the author more control over how the page is formatted and
how content is positioned on the page..
Positioning Elements
Cascading Style Sheets (CSS) Positioning defines the placement of elements on a
page and is an extension of cascading style sheets as specified in the W3C on Positioning
HTML with CSS. By default, elements flow one after another in the same order as they
appear in the HTML source, with each element having a size and position that depends
on the type of element, the contents of the element, and the display context for the
element as it will render on the page. This default flow model for HTML layout doesn't
allow a high level of control over the placement of elements on the page. By applying a
small set of CSS attributes to the elements that are defined for the page, CSS can control
the precise position of elements by giving exact coordinates. It is also possible to specify
placement relative to the position of other objects on the page.
Just like any other HTML or CSS attribute, the CSS attributes used to control an
element's position are available for scripting. The position of these elements on the page
can thus be dynamically changed with script. As a result, the position of these elements
21
can be recalculated and redrawn after the document is loaded without reloading the page
from the server.
It usually involves using JavaScript to change a positioning style properties of an
HTML elements. position, top, left are the three properties that dictate the position of
the elements. position specifies the reference point for the placement of the elements.
top and left specify the distance from top and left of reference point where element is
to appear. absolute, relative and static are the three possible values for the position
property.
Absolute Positioning
A element can be placed at specific position in the document using absolute
value for the position styling property. Absolute positioning defines the x and y
coordinates of an element with reference to the top left corner of the browser page or the
containing block and the position attribute is set to absolute. With absolute positioning
elements are placed without regard to the positions of other elements. For example, if you
want place an image 100 pixels from the top and 100 pixels from the left of the document
display window, it can be placed as following statements:
<img src="earth.jpg" style="position:absolute; left:100px; top:100px" />
Use of Absolute positioning
Places elements at specific position in the document display.
Can be used superimpose text over the ordinary text to create effect similar that
watermark on page.
The following example illustrates the usage of absolute positioning to position five
elements at specific different positions in the document display.
22
23
Relative Positioning
Relative positioning means an element is placed relative to its natural position in the
document's flow. When you use relative positioning, an element is positioned relative to
where it would regularly be. If the top and left properties are given, then relative
positioning displace the element by the specified amount from the natural position.
The top property defines how far from the
top of its usual position we want the top of
element to appear. If we use a positive value,
then our element is moved down from the usual
position, whereas a negative value would move
our element up from the usual position.
If the top and left properties are not specified then element is positioned as if like
the it is statically positioned. However, such an element can be moved later.
Relative positioning is used for creating different effects in the document. It can be
used to highlight the special words in the text. The following example highlight the word
red in line of text.
24
red in color.
Relative positioning can be used to create superscripts. For example the following can be
used to place xyz 10 pixels above the natural baseline of the text.
<p> The superscript in this name<span style=position: relative;
top:-3px > xyz </span> is xyz.</p>
Static Positioning
'Static' positioning is identical to normally rendered HTML. These elements
cannot be positioned or repositioned, nor do they define a coordinate system for child
elements. This is the default value for 'position', except for the <BODY> element, which,
while it cannot be positioned, does define a coordinate system for child elements.
Moving Elements
Dynamic movement of 'relative'ly /absolutely positioned elements can provide
animation effects in scripting environments. Element position is going to be changed by
modifying the left and top properties of the element's style property. If position is set to
absolute, the element moves to the new values of top and left, if its position is set to
relative, it moves from its original position by distances given by the new values of top
and left. The following example demonstrates this
25
26
Output
In the output user can move the square in the 4 different directions by clicking the
appropriate button.
The init() function set the top and left properties of the divBlock div, thus making
the properties accessible to JavaScript.
The moveH() function uses parseInt() to cut off the units (e.g, px) from the value of
the left property of the div and assign the resulting integer to the curLeft variable. It then
modifies the left property of the element by adding the value passed in for distance.
The moveV() function does the same thing, but it modifies the top property rather
than the left property.The functions are triggered with onclick event handlers.
Element Visibility
Document elements can be specified to be visible or hidden with the values if their
visibility property. The two possible values for the visibility are visible and hidden.
The following example displays the 4 table elements and allows the user to toggle
each table element causing the element to appear and disappear in the document display.
27
Output
28
29
30
<b>Background Color:</b><br/>
<input type="radio" name="BG" onclick="ChangeBackground('red')"/>Red
<input type="radio" name="BG" onclick="ChangeBackground('green')"/>Green
<input type="radio" name="BG" onclick="ChangeBackground('blue')"/>Blue
<input type="radio" name="BG" onclick="ChangeBackground('black')"/>Black
<input type="radio" name="BG" onclick="ChangeBackground('white')"/>White
<br/><br/>
<b>Foreground Color:</b><br/>
<input type="radio" name="FG" onclick="ChangeForeground('red')"/>Red
<input type="radio" name="FG" onclick="ChangeForeground('green')"/>Green
<input type="radio" name="FG" onclick="ChangeForeground('blue')"/>Blue
<input type="radio" name="FG" onclick="ChangeForeground('black')"/>Black
<input type="radio" name="FG" onclick="ChangeForeground('white')"/>White
</body>
</html>
In the above example functions ChangeBackground( ) and ChangeForeground( ) are
called whenever user clicks the radio buttons of different colors to change the
background and foreground color of the document respectively.
Changing font
Web users are accustomed to having links in documents change color when the cursor
is placed over them. Any property of a link can be changed by using the mouse event,
mouseover to trigger JavaScript event handlers. Thus the font style and font size, as
well as the color, can be changed when the cursor is placed over a link. The link can be
changed back to its original form when an event handler is triggered with the mouseout
event. In the following example, the only element is a sentence with an embedded link.
The foreground color for the document is the default black. The link is presented in blue.
When the mouse cursor is placed over the link, its color changes to red and its font style
changes to italic.
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!-- link.html -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Dynamic fonts for links </title>
<style type = "text/css"> .regText {font: Times; font-size: 16pt;} </style>
</head>
<body>
<p class = "regText">The subject <a style = "color: blue;"
onmouseover = "this.style.color = 'red'; this.style.font = 'italic 16pt Times';"
onmouseout = "this.style.color = 'blue'; this.style.font = 'normal 16pt
Times';"> Web Programming </a> is very interesting
</p>
</body>
31
</html>
Output
Display of link,html with the cursor not over the link
32
33
Stacking Elements
The multiple elements can occupy the same space in the document, one is
considered to be on top and is displayed. The top element hides the parts of the lower
elements on which it is imposed. When multiple elements occupy the same space on the
document, then comes the question of which element is to be placed on the top of other
elements. So for this we have to consider the third dimension of the document. Although
the display is restricted to two dimensions, the effect of the third dimension is possible
through the concept of stacked element. The placement of element in this third dimension
is controlled by the z-index attribute of element. An element whose z-index is greater
than that of element in the same space will be displayed over the other element,
effectively hiding the element with smaller z-index value. The JavaScript property
associated with the z-index attribute is zIndex.
In the following example, three images are placed on the display so that they
overlap. In XHTML description of this, each image tag includes an onclick attribute,
which is used to trigger the execution of JavaScript handler function. First the function
defines DOM addresses the last top element and the new top element. Then the function
sets the zIndex value of the two elements so that the old top element has the value of 0
and the new top element has the value 10, effectively putting it at the top. The script
keeps track of which image is currently on top with the global variable top, which is
changed every time a new element is moved to the top with the toTop function.
This example displays all 3 overlapping images. Whenever user clicks on the
particular image,that image will be displayed on top of other two images.
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<! satck.html -->
<head>
<title> Dynamic stacking of images </title>
<script type = "text/javascript">
var top = "i1";
function toTop(newTop) {
domTop = document.getElementById(top).style;
domNew = document.getElementById(newTop).style;
domTop.zIndex = "0";
domNew.zIndex = "10";
top = newTop;
}
</script>
35
36
38
move function every msecond until the final position is reached. Example includes
separate html file and JavaScript file.
Initial position of the element is set with initImage( ) function. The onload attribute of
the body element is used to call this function.
The moveImage( ) function is used to move the image. It moves the image 1 pixel
towards the final position and then calls itself with the new coordinates using the
setTimeout.
/* moveImage.js JavaScript to move image*/
var dom, x, y, finalx = 700;
function initImage() {
dom = document.getElementById('image').style;
/* Get the current position of the image */
var x = parseInt(dom.left);
var y = parseInt(dom.top);
/* Call the function that moves it */
moveImage(x, y);
}
// A function to move the text from its original
// position to (x, finaly)
function moveImage(x, y) {
/* If the x coordinates are not equal, move
x toward finalx */
if (x != finalx)
x++;
if ((x != finalx) ) {
dom.left = x + "px";
dom.top = y + "px";
/* Recursive call, after a 1-millisecond delay */
setTimeout("moveImage(" + x + "," + y + ")", 1);
}
}
39
40
41
function mouseD(ob,e) {
dragObject = ob;
if (window.event) e=window.event;
var dragX = parseInt(dragObject.style.left);
var dragY = parseInt(dragObject.style.top);
var mouseX = e.clientX;
var mouseY = e.clientY;
offsetX = mouseX - dragX;
offsetY = mouseY - dragY;
isDragging = true;
return false;
}
function mouseU() {
if (!isDragging) return;
isDragging = false;
return false;
}
function mouseM(e) {
if (!isDragging) return;
if (window.event) e=window.event;
var newX = e.clientX - offsetX;
var newY = e.clientY - offsetY;
dragObject.style.left = newX + "px";
dragObject.style.top = newY + "px";
return false;
}
</script>
</head>
<body>
<p style="position:absolute;left:300px"> Drag and Drop the Box </p>
<div id="dObject" onmousedown="mouseD(this,event)"></div>
</body>
</html>
42
PERL
PERL is acronym for Practical Extraction and Report Language. It is
developed by Larry Wall in 1987. It is similar to Shell script but lot easier and more
akin to the high end programming. It is originally intended to combine and extend the
processing functions of several UNIX utilities including awk, sed, grep and sh.
Applications of PERL: PERL can be used anywhere you parse or manipulate text
like web servers (CGI scripts), database access and processing. It can also be used
anywhere you want to automate file handling and organization. It is generally not the
first choice for numeric calculations.
PERL is a semi-interpreted scripting language. Because it uses byte-code
representation like Java. But it doesn't store byte code for later re-use.
Advantages: No need to compile and make files.
Disadvantages: It can be slower running, not type-safe.
Features of PERL: PERL enables quick development of programs.
no need to define variable types
portable
extensible (module import/export mechanism)
powerful "regular expression" capabilities
simple I/O model
many modules
support for static scoping
built-in debugger
Basics of PERL: PERL files use extension .pl. It can create self executing scripts. It
uses system commands. Every statement must end with a semicolon ;.
Comments are prefixed at the start of the line with hash # symbol. The PERL
variables are assigned a value using the operator =. PERL variables are not statically
typed, i.e., you do not have to declare what type of data you want to hold in them.
PERL variables are declared the first time you initialized them and they can be
anywhere in the program. They are interpreted at the point of execution. They do not
necessarily have a particular file extension although the .pl extension is used
commonly. PERL script starts with the line !/usr/bin/perl .
Perl Types: It has three categories of variables/values: scalars, arrays and hashes.
Variables for each category are distinguished by the first symbol in the variable name
$ for scalar
@ for array
% for hash
Scalar variables are of three types: numbers, character strings and references.
Numbers are stored internally as double-precision floating point numbers.
43
44
Precedence Table:
PERL treats all input and output as file input and output. Physical files have external
names, but all files are referred to by internal names called filehandles.
Certain filehandles are predefined
STDIN is console input, usually the keyboard
STDOUT is console output, usually the screen
STDERR is console error output, usually the screen
The execution environment of the PERL script may redirect these predefined handles
to take input from other sources (such as a physical file) or put output to other targets.
The line input operator, <> reads a line of input (including a new line character)
from the filehandle. For example, $line = <STDIN> will read one line from standard
input and assign it to $line.
Since in most cases the terminating new line character is not desired, the chomp
operator is used to remove it:
$x = <STDIN>;
chomp($x);
This is often abbreviated as chomp($x = <STDIN>);
The assignment operator returns a reference to $x which is passed to chomp.
Using <> without a filehandle has a special meaning in PERL.
45
The first six operators produce +1 if true or if false. The last operator produces -1
if the first operand is less than the second, +1 if the first operand is greater than the
second and 0 if the two operands are the same.
46
Relational operators are non associative. That is, $a < $b < $c is not syntactically valid in
PERL. PERL provides two forms of boolean operators
! (not), && (and) and || (or) have precendence above the assignment operators but
below other operators
and, or and not have precedence below any other operators
$a = <> or die no input parses as ($a = <>) or (die no input).
This causes the program to terminate if no input is read from <>
If there is input, the next line is assigned to $a
$a = <> || die not input; parses as $a = (<> || (die no input));
This causes the program to terminate if no input is read from <>
This causes $a to be assigned +1 if there is input.
A block of statements in PERL is a sequence of statements enclosed in a pair of curly
braces: { }. Control statements in PERL require blocks of statements as components
rather than allowing single statements without the braces.
The if statement syntax
if (control-expression)
block
[ elsif( control-expression )
block
... Repeated elsif clauses ]
[ else
block ]
[ ] indicates optional parts. The elsif part may appear 0 or more times. The until statement
reverses the sense of the if. An until has neither elsif nor else parts.
The basic repetition uses while:
while ( control-expression )
block
The while executes the block as long as the control-expression is true
The until reverses the sense of the while
until ( control-expression )
block
The until executes as long as the control-expression is false
Syntax of the for statement:
for (initial-expression; control-expression; increment-expression )
block
The initial and increment expressions can be multiple expressions separated by commas.
The last operator causes the loop to exit immediately. A loop may be provided a label by
prefixing a name and a colon to the beginning of the loop.
A last operator can have a loop label as an operand.
47
In this case, the operator will cause exit from the loop with the given label
even if it is not the smallest loop containing the statement executing last
The variable $_ is often an implicit operand for operators in PERL. The statement print;
will print the value of $_. The statement chomp; will chomp the value of $_. Using the
<STDIN> input without assigning explicitly to a variable causes the value to be assigned
to $_. Be aware that overuse of $_ can make programs difficult to follow.
An array holds a list of scalar values. Note that an array holds scalars, not other arrays or
hashes. Different types of scalar data can be in the same array. Arrays have dynamic size,
that is, they can increase and decrease in size as a program executes.
A list literal is given as a pair of parentheses enclosing a list of values separated by
commas. Note that if a sub-list is include as in (a, (b, c), d), then the list is
flattened to (a, b, c, d). References are used to include arrays as elements in arrays.
An array is a variable that stores a list. The name of an array variable begins with the
character @. An array variable may be assigned a literal list value. @a = (1, 2, three,
iv);
An array assignment creates a new array as a copy of the original. @b = @a;
An expression in Perl is evaluated in a context. For example in the assignment
$a = expression; The expression on the right is evaluated in a scalar context, On the
other hand, in @a = expression; The expression on the right is evaluated in a list
context. An array or list evaluated in a scalar context evaluates to the length of the list.
A list of values can be assigned to a list of variables.
($a, $b, $c) = (1, 2, iii); causes $a to get the value 1, $b to get the value of 2 and
$c to get the value iii.
Note that the right side expression is evaluated before the assignment, so that
($x, $y) = ($y, $x) actually swaps the values of the two variables.
If the target includes an array variable, all remaining values in the expression list are
assigned to the list variable.
The elements in an array are indexed by integers, beginning with 0. Element with index
1 of list @alist is accessed as $alist[1]. Note that $ is used since the element is a scalar.
Note also that there is not relationship between the scalar variable $alist and the list
element $alist[1]. Assigning to an array element may cause the array to expand to
accommodate the element.
@a = (a, b, c);
$a[20] = outfield; Causes the array @a to expand to size 21.
The last subscript in the array @a is $#a. The foreach allows convenient iterating
through the elements of an array or list. The loop foreach executes the body of the loop
for each element of the array @a. In each iteration, $x is an alias for the element. That is,
if $x is changed, the corresponding element of the array is changed.
48
Four functions are provided by PERL to support stack and queue operations on arrays
are: push @a, $x; inserts the value $x at the end of the array @a.
pop @a; removes the last value of @a and returns it.
shift @a; removes the first value of @a and returns it. All the remaining elements of
@a are shifted down one index, hence the name.
unshift @a, $x; inserts the value $x at the beginning of the array @a. All the
remaining elements of @a are shifted up one index.
The split function breaks strings into parts using a character to separate the parts. The
sort function sorts a list using string comparison. A more general usage is presented later.
sort does not alter the parameter but returns a new list.
The qw (quote words) function creates a list of words from a string. The die operator
displays its list operand and then terminates the program execution.
49
50
Perl has powerful pattern matching facilities built in. These have been imitated in a
number of other systems. The m operator indicates a pattern matching.
This is used with delimiters like q and qq but the enclosed characters form
a pattern
If the delimiter is / then the m is not required
A match is indicated by the =~ operator with a string on the left and a pattern on the
right. A pattern alone is matched by default to $_.
The split function can take a pattern as the first argument rather than a character.
The pattern specifies the pattern of characters used to split the string apart.
The s operator specifies a substitution.
s/pattern/new-string/
The new-string will replace the part of a string matched by the pattern. The =~
operator is used to apply the substitution to a string. If the operator is not used, $_ is
operated on by default. A g modifier on the substitution causes all substrings
matching the pattern to be replaced, otherwise only the first match is changed.
The modifier i cause the pattern match to be case insensitive.
51
52
There are several common ways a web server can use to determine if a web request
should cause a CGI program to execute. Usually, the determination is based on the
target of the request. Certain directories can be designated as containing CGI
programs. Often cgi-bin is used. Certain file extensions can be designated as
signifying a CGI program. .pl usually identifies a Perl script. A request for a CGI
program to executed can be made with a simple link (<a> tag in HTML).
The usual way for invoking CGI programs is through the action attribute of a form.
Data from the form is then encoded and sent with the request. A request for a CGI
program to be executed can be made with a simple link (<a> tag in HTML)
This method is limited
Any data sent must be hard-coded into the link
The CGI program generally creates the response by sending output to the standard
output stream, Using print in Perl.
The CGI program will usually have to provide the content-type header.
Content-type: text/html
This will be the last line of the response headers and must be followed by a blank
line.
The rest of the response is created by printing the HTML code desired to standard
output.
Both GET and POST requests under HTTP can be used to carry form data from the
browser to the server. The data is formatted into a query string. Each form of request
includes the information in a different way. In a GET request, the query string is
appended to the URL of the request, with a question mark used to separate it from the
first part of the URL.
In a POST request, the query string is sent as the data part of the request. Each unit of
data sent is encoded as name = value. The name is usually the value of a name
attribute of a form widget. The value is the string representation of the widget value.
Several units are combined by separating them with ampersands, &. Special
characters in name and value are encoded. The code is a percent sign, %, followed by
the hexadecimal code for the character. A space is encoded as %20. Some browsers
will encode spaces as +.
When the POST method is used, the query string can be read from standard input
The CONTENT_LENGTH environment variable tells how many characters can be
read. When The GET method is used, the query string is given by the value of the
environment variable QUERY_STRING.
Writing a CGI program from scratch is very tedious. Creating HTML requires
numerous print statements. Retrieving data from the query strings is tricky. One of
the reasons for PERLs popularity for CGI programming is the powerful pattern
matching facilities which greatly ease the task of parsing a query string.
53
The Perl module CGI.pm provides numerous functions to help with both of these
problems. Shortcut functions return string values containing HTML code. Note, the
string must be printed out to actually become part of the response. Some functions
take no arguments. print br; puts the tag <br/> into the response.
Some functions can be given a single argument which becomes the content of the tag
print h1(A Header)
puts <h1>A Header</h1> into the response.
Attributes for tags are provided as attribute/value pairs in the argument list of the
shortcut function. The arguments are provided in the form of a literal hash. Attribute
names are preceded by a hyphen.
print textarea(-name => "Description", -rows => "2", -cols => "35");
produces this in the response:
<textarea name="Description" rows="2" cols="35">
</textarea>
Attributes and content can both be provided to a shortcut by giving the attributes
explicitly as a hash reference
print a({-href => "fruit.html"}, Press here for fruit descriptions");
produces this in the response:
<a href="fruit.html"> Press here for fruit descriptions </a>
If an array reference is provided for the content, a tag is created for each item, giving
the tag all the specified attributes. The head shortcut function provides a standard
header. The start_html function provides the beginning part of an HTML document,
through the <body> start tag. The function takes one argument, the document title.
The param function takes a name as an argument. The function returns the value
associated to the name, if any, in the request.
HTTP is a stateless protocol, that is, the server treats each request as completely
separate from any other. This, however, makes some applications difficult. A
shopping cart is an object that must be maintained across numerous requests and
responses. The mechanism of cookies can be used to help maintain state by storing
some information on the browser system.
A cookie is a key/value pair that is keyed to the domain of the server. This key/value
pair is sent along with any request made by the browser of the same server. A cookie
has a lifetime which specifies a time at which the cookie is deleted from the browser.
Cookies are only returned to the server that created them. Cookies can be used to
determine usage patterns that might not otherwise be ascertained by a server.
Browsers generally allow users to limit how cookies are used. Browsers usually allow
users to remove all cookies currently stored by the browser. Systems that depend on
cookies will fail if the browser refuses to store them.
The cookie function takes a hash with three keys for the name, value and expiration
54
time of a cookie. The cookie value produced by this function must be passed to the
header function using the cookie key.
header(-cookie => $a_cookie)
Calling the cookie function with no arguments produces a hash of all cookies from
the current request.
55
5
5
Q2. What is hypertext protocol? Explain the request phase and response phase in
detail?
10
Q4. Create and validate a XHTML document that defines a table with columns for
state, state bird, state flower and state tree. There must be at least five states as
rows in the table. You must also include alt attribute specifications. Also apply
background color and border width for the table.
10
Q5. Explain the usage of character entities in XHTML. List out at least 8
character entities with their meaning.
10
Q6a. Explain HTML Frameset. Create a HTML Program with horizontal and
vertical frameset.
5
Q6b.Write notes on:
5
56
Name servers
Proxy Servers
10
8a. what is the difference in the effect of a paragraph tag and a break tag? Explain
5
8b. State and explain general Server
characteristics
Q9a. What are CSS Style sheets? What is the advantage of document-level style
sheets over inline style sheets?
5
Q9b. Describe the two ways to embed a JavaScript script in an XHTML
document.
5
Q10. What are the various MYSQL data types available? Explain.
10
Q11a. What is the purpose of a style class selector and generic class?
5
57
Q14a.What are pseudo-classes? Write a CSS file that adds different colors to a
hyperlink..
5
Q14b. Write notes on Object creation and Modification with suitable
examples
5
15. Given the following table of data about several planets of our solar system,
create a Web page that enables users to enter a planet name and, at the click of
a button, have the distance and diameter appear either in an alert box or (as extra
credit) in separate fields of the page.
10
16. Write a Perl program to change the password of user and grant him required
permission.
10
Q17a. What is a query string? How is a query string transmitted to the server
with the get and post method.
5
Q17b. Explain the three phases of event processing in the DOM 2 event
model
5
58
Q19a. What is CGI.pm module? Give 5 different methods which are used to
create html
output and their functions.
5
59
1b. Provide responses to browser requests, either existing documents or dynamically built
documents.
Web servers run as background processes in the operating system.
WAMP Server
Apache Server
IIS Server.
60
3a. Frames are rectangular sections of the display window, each of which can display a
different document
Because frames are no longer part of XHTML, you cannot validate a document that
includes frames
The <frameset> tag specifies the number of frames and their layout in the window.
3b.
Some servers can serve documents that are in the document root of other machines
called as PROXY SERVER.
DNS servers or name servers - convert fully qualified domain names to IPs.
4. Program OUTPUT and creation of table using <table> </table> tags. Background and
fore ground color and border width using bgcolor , border-width property tags.
5. A Collection of special characters that are needed in document, but cannot be typed.
¼
One quarter
½
One half
¾
Three quarters
°
Degree
(space)
Non-breaking space.
6a. The <frameset> tag specifies the number of frames and their layout in the window
61
7. The align attribute controls the horizontal placement of the contents in a table cell
Values are left, right, and center (default)
align is an attribute of <tr>, <th>, and <td> elements
The valign attribute controls the vertical placement of the contents of a table cell
Values are top, bottom, and center (default)
valign is an attribute of <th> and <td> elements
SHOW cell_align.html and display it
The cellspacing attribute of <table> is used to specify the distance between cells
in a table
The cellpadding attribute of <table> is used to specify the spacing between the
content of a cell and the inner walls of the cell
8. Paragraph in HTML doesnot insert a new blank line, whereas in XHTML a new
line is considered.
It displays the contents, whereas <br> is an empty tag.
62
63
64
url(bird.jpg)">
On ordered lists - list-style-type can be used to change the sequence
values
13a. The CSS box model is essentially a box that wraps around HTML elements, and
consists of: margins, borders, padding, and the actual content.
The box model allows us to place a border around elements and space elements in
relation to other elements.
it
13b.
One property: length
Note to Java programmers, this is not a method!
Character positions in strings begin at index 0
CharAt(), indexOf(), substring,toLowercase,toUppercase are the various string
methods avaialble
14a. Pseudo classes are styles that apply when something happens, rather than because
the target element simply exists
Names begin with colons
<html>
<head>
<style type="text/css">
a:link {color:#FF0000} /* unvisited link */
a:visited {color:#00FF00} /* visited link */
a:hover {color:#FF00FF} /* mouse over link */
a:active {color:#0000FF} /* selected link */
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order
to be effective.</p>
</body>
</html>
14b. The new expression is used to create an object
This includes a call to a constructor
The new operator creates a blank object, the constructor creates and
initializes all properties of the object
Properties of an object are accessed using a dot notation: object.property
Properties are not variables, so they are not declared
65
66
The output from the program will be the response returned to the client
making the request
There are several common ways a web server can use to determine if a web
request should cause a CGI program to execute
Usually, the determination is based on the target of the request
Certain directories can be designated as containing CGI programs
Often cgi-bin is used
Certain file extensions can be designated as signifying a CGI program
.pl usually identifies a Perl script.
20. Event
Tag Attribute
blur
onblur
change
onchange
click
onclick
focus
onfocus
load
onload
mousedown
onmousedown
mousemove
onmousemove
mouseout
onmouseout
mouseover
onmouseover
mouseup
onmouseup
select
onselect
submit
onsubmit
unload
onunload
Write a note on each of these events.
67
21a. Properties of the navigator object allow the script to determine characteristics
of the browser in which the script is executing
The appName property gives the name of the browser
The appVersion gives the browser version.
21b. The position property specifies the position mode
Value is absolute or relative or static
Absolute position specifies where an element appears relative to the containing
element
In static position mode, the default, elements are placed left to right, top to bottom
The top and left properties are ignored for static positioning
Relative position mode allows changing position relative to where the element
would be with static positioning
This could be used to create superscripts or subscripts by moving text up or down
relative to its normal position.
22. Writing a CGI program from scratch is very tedious
Creating HTML requires numerous print statements
Retrieving data from the query strings is tricky
One of the reasons for Perls popularity for CGI programming is
the powerful pattern matching facilities which greatly ease the task
of parsing a query string
Shortcut functions return string values containing HTML code
Note, the string must be printed out to actually become part of the
response
Some functions take no arguments
print br;
puts the tag <br/> into the response
Some functions can be given a single argument which becomes the content of the
tag
print h1(A Header)
puts
<h1>A Header</h1>
into the response
23. <html>
<head>
<title> Dynamic colors </title>
<script type = "text/javascript">
<!-// ******************************************************** //
// The event handler function to dynamically set the
68
69
70
</head>
<body>
<form action = "">
<div id = "airplane" style = "position: relative;
visibility: hidden;">
<img src = "../images/c172.gif"
alt = "(Picture of airplane)" />
</div>
<p>
<br />
<input type = "button" value = "Toggle airplane"
onclick = "flipImag()" />
</p>
</form>
</body>
</html>
71