ASSIGNMENT OF
ADVANCED WEB PROGRAMMING
Question
No. 1 What is difference between ordered list and definition list?
Ordered list:
Ordered list begins with<ol> and ends with
</ol> and like unordered lists uses <li> tag to mark the beginning
of each list item. Ordered lists are suitable for creating simple outlines or
step-by-step instructions because the list items are automatically numbered by
the browser.
<ol>
<li>ordered list 1</li>
<li> ordered list 2</li>
. . .
<li> ordered list n</li>
</ol>
In case of ordered list type attribute is
used to set ‘a’ for lowercase letters, ‘A’ for uppercase letters, ‘i’ for
lowercase roman numerals and ‘I’ for uppercase roman numerals. To start
ordering from the letter d, you would use <ol type="a"
start="4"> because d is the fourth letter. Like unordered list
ordered lists can be nested.
Definition Lists:
A definition list is a structure which is used in
such case where the author wishes to present a single term or phrases followed
by content related to the term. Definition lists are enclosed within <dl>
and </dl>. Each term being defined within dl element is indicated by a
<dt> element, which is derived from "definition term." Each
definition itself is defined by <dd>. Neither the dt nor the dd elements
require a close tag under traditional HTML. A generic definition list looks
like this:
<dl>
<dt>BCA</dt>
<dd> Bachelor of Computer
Application</dd>
<dt>MCA</dt>
<dd> Master of Computer
Application</dd>
</dl>
Sample program to demonstrate the use
of different type of lists:
<html><head><title>Lists</title></head>
<body bgcolor=“#FFFFFF”>
<p><font size=
“14”><b><u>Unordered Lists
</font></p></b></u>
<ul>
<li>unordered list 1
<ul>
<li type=“circle”>nested unordered list
1a</li>
<li type=“square”>nested unordered list
1z</li>
</ul>
</li>
<li> unordered list 2</li>
<li> unordered list 3</li>
</ul>
<p><font size= “14”><b><u>
Ordered Lists </font></p></b></u>
<ol>
<li> ordered list 1</li>
<li> ordered
list 2</li>
<li> ordered list 3</li>
</ol>
<p><font size=
“14”><b><u>Definition Lists
</font></p></b></u>
<dl>
<dt>BCA:</dt><dd><i>
Bachelor of Computer Application</dd>
<dt>MCA:</dt><dd> Master of
Computer Application</dd> </i>
</dl>
Question
No. 2 What is XSL-FO? List the steps to create a XSL-FO document.
XSL-FO:-
XSL is a language for expressing style sheets. An
XSL style sheet is, like with CSS, a file that describes how to display an XML
document of a given type. XSL shares the functionality and is compatible with
CSS2 (although it uses a different syntax). It also adds A transformation
language for XML documents: XSLT. Originally intended to perform complex
styling operations, like the generation of tables of contents and indexes, it is
now used as a general purpose XML processing language. XSLT is thus widely used
for purposes other than XSL, like generating
HTML web pages from XML data. Advanced styling features, expressed by an XML
document type which defines a set of elements called Formatting Objects, and
attributes (in part borrowed from CSS2 properties and adding more complex ones.
- XSL-FO
is a language for formatting XML data
- XSL-FO
stands for Extensible Stylesheet Language Formatting Objects
- XSL-FO
is a W3C Recommendation
- XSL-FO
is now formally named XSL
Creating an XSL-FO document
Let us summarized steps to create a XSL-FO document:
1.
Type <?xml
version="1.0"?>.
2.
Type <fo:root to define the root
element of the XSL-FO document. Notice the fo: namespace prefix; it is defined
next.
3.
Then, type
xmlns:fo="http://www.w3.org/ 1999/XSL/Format" to declare the XSL-FO
namespace with the fo: prefix.
4.
Finally, type > to close the tag.
5.
Type <fo:layout-master-set> to
start the overall structure part of the document.
6.
Type <fo:simple-page-master
master-name="master">, where master is the page template name used
in Step 10.
7.
Type <fo:region-body/> to declare
that this page master will contain content in the body region.
8.
Type </fo:simple-page-master>.
9.
Type </fo:layout-master-set>.
10. Then, type <fo:page-sequence
master-reference="master">, where master is the same name defined
in Step 6. This begins the page content part of the document.
11.
Type <fo:flow
flow-name="xsl-region-body">. Here, xsl-region-body refers to the
body region declared in Step 7.
12. Enter the page content for your final out-put using fo:block
elements.
13. Type </fo:flow>.
14. Type </fo:page-sequence>.
15. Finally, type </fo:root> to complete the XSL-FO
document.
Question
No. 3 Explain comparison between XML and
Relational database.
According to latest SQL
(Structured Query Language), it includes a new part known as SQL/XML. This part
introduces an XMLdatatype and facilities that provide for the composition of
XML using data extracted from a relational database and, conversely, for the
storage of data extracted from an XML document in a relational database. The
XML datatype can be used in the same way as any other datatype, i.e. as a
datatype for a column, as a variable or as a parameter for a function.
XML:
XML is the abbreviation for
Extensible Markup Language. This is an open and popular standard for marking up
text in a way that is both machine and human readable. By “marking up text” we
mean that the data in the text files is formatted to include meaningful symbols
that communicate to a reader what that data is for. The syntax of XML is
similar in style to HTML, the markup language of the World Wide Web (WWW). As XML's use increases, it is becoming a common requirement
to view traditional relational data as XML. One way of doing this is to provide
a virtual XML view over the relational database. This view is provided through
the mechanism of annotating an XSD schema that describes the desired XML shape.
These annotations contain relational metadata used to translate queries of the
XML view into SQL queries, and to transform the SQL query results into the
desired XML shape. In this article, we discuss the merits of choosing an XML
data model over the more traditional relational data model. We also examine the
mapping process and discuss the task of translating between the XML and
relational query domains. Finally, we provide an example of mapping an XSD
schema to a sample database and querying the virtual XML View.
Relational
database
A relational database is a powerful data storage and retrieval
technology where data is stored as rows in tables and the database has one or
more tables. Each row of a table has the same columns as every other row in
that table. Data is related between tables using the concept of “foreign keys”
so that data in a row of one table can be associated with one or more rows of
another table
Traditional relational database systems are excellent mechanisms
for storing normalized, highly structured data. However, it is not always easy
to query or manipulate this data model. Database developers have traditionally
used the mechanism of relational views and stored procedures to abstract away
the complexities of accessing the underlying data—in other words, providing a
logical relational view. However, as the logical data model becomes
increasingly semistructured (data with some variance), providing a relational
view to program against becomes increasingly difficult.
In general, relational databases are excellent persistent storage
mechanisms for storing highly structured, normalized data—"square
data." But as anyone who has modeled real-world business objects knows,
the real world is not square. For instance, consider a typical customer list
where there is some variability between customers. One customer has a cell
phone, work phone, and home phone; while another has a cell phone and pager
number. A typical first attempt at a representation with relational tables uses
a column for each property
Data
Representation Comparisons
|
|
Relational database
|
XML
|
|
Data
model
|
Relational
data model, consisting of tabular data entities (tables), with rows and
columns.
|
Hierarchical
data model, composed of document structures with element and attribute nodes.
|
|
Data
types
|
A wide
variety of data types typically are provided, including support for binary
data.
|
XSD
schemas are equipped with a comparable set of data types.
|
|
Data
element relationships
|
Column
definitions can interrelate within and between tables, according to DDL
rules.
|
References
can be explicitly or intrinsically defined between elements.
|
Consider using a relational database within a system to manage and
maintain a large data store, or to manage a data store that is regularly
updated by various users. Use XML as the format of data that is delivered to
client programs and between components of a distributed system. Creating XML
documents from relational database queries is a natural way to combine both
technologies.
Question
No. 4 Differentiate between Synchronous vs. Asynchronous Data Retrieval with
example.
Differences
Between Synchronous and Asynchronous Transmission
1.
In
Synchronous Transmission data is transferred in the form of frames on the other
hand in Asynchronous Transmission data is transmitted 1 byte at a time.
2.
Synchronous
Transmission requires a clock signal between the sender and receiver so as to
inform the receiver about the new byte. Whereas, in Asynchronous Transmission
sender and receiver does not require a clock signal as the data sent here has a
parity bit attached to it which indicates the start of the new byte.
3.
Data
transfer rate of Asynchronous Transmission is slower than that of Synchronous
Transmission.
4.
Asynchronous
Transmission is simple and economic whereas, Synchronous Transmission is
complex and expensive.
5.
Synchronous
Transmission is efficient and has lower overhead as compared to the
Asynchronous Transmission.
Now you have
learnt how to create the XMLHttpRequest object as well as to handle request and
response. Now you will learn synchronous vs. asynchronous data retrieval using
XMLHttpRequest object. Let’s start with synchronous data retrieval.
Synchronous data retrieval
Now to
create an instance of the XMLHttpRequest object, we will use
getXmlHttpRequestObject() method. Now this instance is set to the
xmlHttpvariable, as shown in the following JavaScript:
<script
language= “javascript” type=”text/javascript” src=xmlhttp.js></script>
<script
language= “javascript”>
function
getXMLDocument(url) {
getXmlHttpRequestObject();
if(xmlHttp)
{
xmlHttp.open(“GET”,
url, false);
xmlHttp.send(null);
alert(“Request
/ Response handled synchronously”);
}
}
//here is
the method call for getXMLDocument
getXMLDocument
(“http://” + location.host + “AJAX/Items.xml”);
</script>
As you can
see in the above code that all the processing is bundled in the method called
getXMLDocument. This method expects an URL of web server as a parameter. After
this method is invoked, the getXmlHttpRequestObject() method is called and an
instance of XMLHttpRequest is set to the variable xmlHttp. Next, this variable
is validated to check if it is null or an instance is associated with it. If
this variable holds the instance, the open()method is invoked with three
parameters. The purposes of these three parameter is already discussed in above
section. In the above JavaScript GET is used as first parameter since we are
retrieving an XML file from the server. Second parameter is the URL where
location.host property is used. Location is the address of the web server, and
host is the port number. Since the third parameter is false, so it signifies a
synchronous request. send() method performs the actual request. Note that we’ve
specified an alert statement to display a message box that is displayed only
after the request is processed and returned from the server. So finally we can
say, a synchronous operation that is similar to the normal request/response
process in any web application.
Asynchronous data retrieval
The main
difference with synchronous data retrieval is in third parameter of open()
method. As discussed earlier if the value if set to true, it indicates it as
asynchronous mode of retrieval. See the following JavaScript:
function
getXMLDocument(url) {
getXmlHttpRequestObject();
if(xmlHttp)
{
xmlHttp.open(“GET”,
url, true);
xmlHttp.onreadystatechange
= processRequest
xmlHttp.send(null);
}
}
function
processRequest(url) {
if(xmlHttp.readyState
== 4) {
//Processing…to
be done here........
alert(“Request
/ Response handled Asynchronously”);
}
}
When it is
asynchronous mode of data retrieval it implies that the user need not wait
until the script has completed execution on the server. After the state has
been changed, it triggers the callback method associated with the on ready
statechange event. In the above example, the request to url on the server is
done asynchronously, and a callback method called processRequest is set to the
onreadystatechange event. The processRequestmethod on the client is executed
accordingly. Process request method part is highlighted in the above code. In
the above example process state is set to 4, which is readyState property;
signifies the state as ‘complete’.
Question
No. 5 Explain any five new features of HTML5.
1.
Semantic
tags
HTML5 introduces a set of new tags that help to define the
semantics, or meaning, of your web page content. Some of such tags are
<nav>, <heading>, <footer>. <nav> is used for defining
sections that include site navigation, and <heading> is used to define
the titles and tag lines at the beginning of web pages. Like Microsoft word
document <footer> is used to include the copyright information and
boilerplate text at the end. These tags make web pages easier to understand by
search engines, enabling them to generate more useful search results. The tags
also help web browsers to determine the most important parts of web pages; if
there is limited room on the screen, web browsers will know what content to
feature more prominently.
2. Richer multimedia
Another very interesting feature of HTML5 is a new <video>
tag. It helps to embed video clips into web pages and an <audio> tag to
mix sound. In the past, developers used the nonstandard <embed> tag and
the generic <object> tag for adding multimedia. The <embed> and
<object> tags used to pass the duties to third-party plugins for playing
the video or sound. Web browsers that support the new <video> and
<audio> tags include native support for certain video and audio files,
which means the browsers play the content directly. In that case third party
plugins is not required. As an added advantage using these tags, web developers
can create custom player controls, style the media with CSS, and more. Exact
use of these tags will be discussed in detail later.
3.
Drawing on
canvases
Suppose you want to create an drawing area on your web page. This
new <canvas> tag enables you to define a rectangular (or any shape) area
on your web page. You can use scripting commands to create shapes, draw
straight and curved lines, apply color gradients, and even add images or parts
of images within the area. In the past, designers needed to create such visual
content in a separate image editor or drawing program and then embed the result
as an image. With HTML5, you can create drawings using the <canvas> tag
and JavaScript. The drawings can change depending on the data that a user
submits or actions performed on the page.
4.
Attractive
forms
HTML5 adds a number of new input elements for web forms. For
example, you can create text fields that accept only e-mail addresses or web
URLs. If a user submits a form with invalid data entered into such fields, you
can highlight the form field using CSS styles. Some web browsers also pop up
alert text when you submit wrong data. New time elements in HTML5 display menus
for setting a date, month, week, or time in a form. There is also a new slider
element that allows users to select a value from within a range of numbers by
clicking and dragging a control. These new features mean that developers can
provide rich functionality in their web forms with simple HTML5 tags.
Previously, developers have had to resort to using complicated, custom scripts
to provide such features.
5.
GeoLocation
By using the GeoLocaton feature web page can retrieve the latitude
and longitude of the user's computer. Earlier this feature was not so useful
when everyone was using the Internet with their desktop PC. There are not many
things that we need the road level location accuracy of the user. We can get
the rough location by analysing the IP address. These days, more and more users
are going on the Internet with their powerful smartphones. Webkit and other
modern mobile browsers are in everyone's pocket. GeoLocaton lets us design
mobile applications and games to play with the location.
Question
No. 6 Explain the following:
a) Window
event attributes.
b) Form
event attributes.
Window Event
Attributes
HTML5 added several attributes
to the body element that are used to perform an action on the browser window.
Lists all the window event attributes along with brief explanation of each
event.
Events triggered for the window object (applies to the
<body> tag):
|
Attribute
|
Value
|
Description
|
|
Onafterprint
|
Script
|
Script to be run after the document is printed
|
|
onbeforeprint
|
Script
|
Script to be run before the document is printed
|
|
onbeforeunload
|
Script
|
Script to be run when the document is about to be unloaded
|
|
Onerror
|
Script
|
Script to be run when an error occurs
|
|
onhashchange
|
Script
|
Script to be run when there has been changes to the anchor part
of the a URL
|
|
Onload
|
Script
|
Fires after the page is finished loading
|
|
Onmessage
|
Script
|
Script to be run when the message is triggered
|
|
Onoffline
|
Script
|
Script to be run when the browser starts to work offline
|
|
Ononline
|
Script
|
Script to be run when the browser starts to work online
|
|
Onpagehide
|
Script
|
Script to be run when a user navigates away from a page
|
|
Onpageshow
|
Script
|
Script to be run when a user navigates to a page
|
|
Onpopstate
|
Script
|
Script to be run when the window's history changes
|
|
Onresize
|
Script
|
Fires when the browser window is resized
|
|
Onstorage
|
Script
|
Script to be run when a Web Storage area is updated
|
|
Onunload
|
Script
|
Fires once a page has unloaded (or the browser window has been
closed)
|
Form Events
Attributes
As we have already studied forms using HTML5 in the
previous units, so we are aware that forms is a very important feature of web
page design. Several actions are associated with HTML forms. Users might add
incorrect data, miss required rows, and so on. Few of form attributes we have
used already like, onchange, onfocus, oncontextmenu, etc,. Let us see few event
handlers used on HTML5
Events triggered by actions inside a HTML5 form
(applies to almost all HTML5 elements, but is most used in form elements):
|
Attribute
|
Value
|
Description
|
|
onblur
|
script
|
Fires
the moment that the element loses focus
|
|
onchange
|
script
|
Fires
the moment when the value of the element is changed
|
|
oncontextmenu
|
script
|
Script
to be run when a context menu is triggered
|
|
onfocus
|
script
|
Fires
the moment when the element gets focus
|
|
oninput
|
script
|
Script
to be run when an element gets user input
|
|
oninvalid
|
script
|
Script
to be run when an element is invalid
|
|
onreset
|
script
|
Fires
when the Reset button in a form is clicked
|
|
onsearch
|
script
|
Fires
when the user writes something in a search field (for
<input="search">)
|
|
onselect
|
script
|
Fires
after some text has been selected in an element
|
|
onsubmit
|
script
|
Fires
when a form is submitted
|
