WT PDF

III Bcom WEBTECHNOLOGY SEMESTER-VI
RAO’S DEGREE COLLEGE

(CO-EDUCATION)
(AFFILIATED TO RAYALASEEMA UNIVERSITY)
Recognized By The Govt. of A.P.S.M.T. Colony AdoniBy Pass Road,
Yemmiganur – 518 360, Kurnool Dist, A.P.
RAYALASEEMA UNIVERSITY, KURNOOL

Common Framework of CBCS for Colleges in Andhra Pradesh w.e.f. 2017-2018 (Revised in April, 2016)
DSC F 6.4 - Web Technology
Unit-I:
Introduction: HTML, XML, and WWW, Topologies, Bus, Star, Ring, Hybrid, Tree, LAN, WAN, MAN.
HTML: Basic HTML, Document body, Text, Hyper links, Adding more formatting, Lists, Tables using colors and
images.
More HTML: Multimedia objects, Frames, Forms towards interactive, HTML document heading.
Unit-II:
Cascading Style Sheets: Introduction, using Styles, simple examples, your own styles, properties and values
in styles, style sheet, formatting blocks of information, layers.
Unit-III:
Introduction to JavaScript: What is DHTML, JavaScript, basics, variables, string manipulations, mathematical
functions, statements, operators, arrays, functions.
Unit-IV:
Objects in JavaScript: Data and objects in JavaScript, regular expressions, exception handling, built-in
objects, events.
Unit-V:
DHTML with JavaScript: Data validation, opening a new window, messages and confirmations, the status
bar, different frames, rollover buttons, moving images, multiple pages in single download, text only menu
system.
Reference Books
1. Uttam Kumar Roy, Web Technologies, Oxford University Press.
2. Black Book HTML 5.0
3. Complete reference HTML 5.0
4. Web Technology, PHI Publications.
Study material by D.Swetha 1 Rao's Degree college, Yemmignoor

UNIT-1
1. What is HTML? Explain the History of HTML?
HTML
 HTML means HyperText Markup Languate. HTML is a method of describing the format of documents
which allows them to be viewed on computer screens. HTML documents are displayed by web
browsers.
 HTML pages can be developed to be simple text or to be complex multimedia containing, sound,
moving images, and virtual reality and java applets.
 The Internet is a global phenomenon which can provide documents from servers across the world to
browser clients which can be in any location. If documents are to be readily exchanged across such a
vast and complex network, some sort of global protocol is required.
 The global publishing format of the Internet is HTML. It allows authors to use not only text but also to
format that text with headings, lists, tables, and to include still images, video and sound within the
text.
 Using HTML information can be downloaded, printed out or e-mailed to others; HTML pages can also
be used for entering data and as the front-end for commercial transactions.
HTML HISTORY
 HTML was developed by Tim Berners – Lee when he works at CERN, the European centre for practical
physics. HTML is an application of something called SGML, the Standardized General Markup
Lnaguage.
 SGML grew from a number of pieces of work, notably Charles Goldfrab, Edward Mosher and
Raymond Lorie at IBM who created a general markup language in 1960.
 In 1978 the American National Standards Institute (ANSI) setup a committee to investigate text
processing languages. Charles Goldfrab joined that committee and lead a project to extend GML. In
1980 the first draft of SGML was released and after a series of reviews and revisions because a
standard in 1985. The 1990 has seen explosive growth in the use of networked computing and
Internet, based in large part upon the growth of homepages on the web. These home pages are
attractive to authors and readers, because they are written in HTML and can be formatted in a wide
variety of appealing ways.
 To be successful the web depends on web page authors and browser vendors sharing same
conventions for HTML. Commercial vendors such as Netscape (e.g. frames) and Microsoft (e.g.
banners) have attempted to develop proprietary tags so that certain text formatting can only be seen
on their browsers. Where a development is seen to be both popular and widely useful, it will be
accepted into a version of the HTML standard.
 HTML standards are created by a group of interested organizations and individuals called W3C
(World Wide Web Consortium). There have now been three official HTML standards: version 2.0 was
released in 1994, version 3.2 was released in 1996 with many useful additions and version 4.0 in
1997
2.What is Hypertext?Explain?
Hypertext
As the name suggests hypertext is more than simply text. Text is two dimensional and linear; it flows from
one place to another place. Factual material is non-linear and seeks to break out of its two constraining
dimensions. Factual material can break boundaries and make a new connection for readers. Hypertext lets
the author add diversions and dead-ends into a piece of work. Conventional academic or technical writing
includes a bibliography so that keener readers know where to look for more information. A hypertext

document can include a link directly to those sources. In effect such links can be used to include many
documents with in one framework. The benefit of hypertext is that it lets the author create links with in a
document. Hypertext is a powerful aid to presenting finding and using information
3.Explain about XML in detail?
XML
XML stands for eXtensible Markup Language. It is a markup language is used to provide information about a
document. XML is a meta markup language for text documents / textual data. Tags are added to the
document to provide the extra information.
The basic difference between HTML and XML is, HTML tags tell a browser how to display the document
whereas XML tags give a reader some idea what some of the data means.
What is XML Used For?
XML documents are used to transfer data from one place to another often over the Internet.
XML is text (Unicode) based. It takes up less space and can be transmitted efficiently.
One XML document can be displayed differently in different media such as HTML, video, CD or DVD. We only
have to change the XML document in order to change all the rest. Moreover, XML documents can be
modularized so that the parts can be reused.
An example of an XML Document is given here,
<?xml version=“1.0”/>
<address>
<name>ABCD</name>
<email>abcd@annauniv.edu</email>
<phone>044-2235-1234</phone>
<birthday>1985-03-22</birthday>
</address>
All information in an XML file has markup for the data which aids in understanding its purpose. The XML
language is very expressive that means semantics comes along with the data. It is well structured, easy to
read and write from programs.
Explain about WWW?
 WWW stands for World Wide Web. A technical definition of the World Wide Web is : all the
resources and users on the Internet that are using the Hypertext Transfer Protocol (HTTP).
 A broader definition comes from the organization that Web inventor Tim Berners-Lee helped found,
the World Wide Web Consortium (W3C).
 The World Wide Web is the universe of network-accessible information, an embodiment of human
knowledge.
 In simple terms, The World Wide Web is a way of exchanging information between computers on
the Internet, tying them together into a vast collection of interactive multimedia resources.
 Internet and Web is not the same thing: Web uses internet to pass over the information.
Evolution
World Wide Web was created by Timothy Berners Lee in 1989 at CERN in Geneva. World Wide Web came
into existence as a proposal by him, to allow researchers to work together effectively and efficiently
at CERN. Eventually it became World Wide Web.
Advantages of WWW:
 Availability of mainly free information
 Low cost of initial connection?
 The same protocol of communication can be used for all the services
 Facilitates rapid interactive communication
 Facilitates the exchange of huge volumes of data
 Facilitates the establishment of Professional contact

 Facilitates access to different sources of information, which is continuously updated

 Facilitates management of companies information System
 It is accessible from any where
4.Explain about Different Topologies?
Network topologies describe the ways in which the elements of a network are mapped. They describe the
physical and logical arrangement of the network nodes. The physical topology of a network refers to the
configuration of cables, computers, and other peripherals
The different types of Topologies are:
• Bus Topology
• Star Topology
• Ring Topology
• Mesh Topology
• Tree Topology
• Hybrid Topology
Bus Topology
• All the nodes (file server, workstations, and peripherals) on a bus topology are connected by one single
cable.
• A bus topology consists of a main run of cable with a terminator at each end. All nodes (file server,
workstations, and peripherals) are connected to the linear cable.
• Popular on LANs because they are inexpensive and easy to install.
BUS TOPOLOGY
Advantages of Bus Topology

• It is Cheap, easy to handle and implement.
• Require less cable
• It is best suited for small networks.
Disadvantages of Bus Topology
• The cable length is limited. This limits the number of stations that
can be connected.
• This network topology can perform well only for a limited number of
nodes.
Ring Topology
In a ring network, every device has exactly two neighbours for communication purposes.
• All messages travel through a ring in the same direction.
• A failure in any cable or device breaks the loop and can take down the entire network.
• To implement a ring network we use the Token Ring technology
• A token, or small data packet, is continuously passed around the network. When a device needs to
transmit, it reserves the token for the next trip around, then attaches its data packet to it.

Ring Topology
Advantage of Ring Topology

• Very orderly network where every device has access to the token and the opportunity to transmit.
• Easier to Mange than a Bus Network
• Good Communication over long distances
• Handles high volume of traffic
Disadvantages of Ring Topology
• The failure of a single node of the network can cause the entire network to fail.
• The movement or changes made to network nodes affects the performance of the entire network.
Star Topology:
In a star network, each node (file server, workstations, and peripherals) is connected to a central device
called a hub.
• The hub takes a signal that comes from any node and passes it along to all the other nodes in the network.
• Data on a star network passes through the hub, switch, or concentrator before continuing to its
destination.
• The hub, switch, or concentrator manages and controls all functions of the network.
• The star topology reduces the chance of network failure by connecting all of the systems to a central node.
Star Topology
Advantages of Star Topology

• Easy to manage
• Easy to locate problems (cable/workstations)
• Easier to expand than a bus or ring topology.
• Easy to install and wire.
• Easy to detect faults and to remove parts.
Disadvantages of Star Topology
• Requires more cable length than a linear topology.
• If the hub or concentrator fails, nodes attached are disabled.
• More expensive because of the cost of the concentrators.
Tree Topology:
A tree topology (hierarchical topology) can be viewed as a collection of star networks arranged in a
hierarchy.

• This tree has individual peripheral nodes which are required to transmit to and receive from one other
only and are not required to act as repeaters or regenerators.
• The tree topology arranges links and nodes into distinct hierarchies in order to allow greater control and
easier troubleshooting.
• This is particularly helpful for colleges, universities and schools so that each of the connect to the big
network in some way.
Tree Topology
Advantages of a Tree Topology
• Point-to-point wiring for individual segments.
• Supported by several hardware and software vendors.
• All the computers have access to the larger and their immediate networks.
Disadvantages of a Tree Topology
• Overall length of each segment is limited by the type of cabling used.
• If the backbone line breaks, the entire segment goes down.
• More difficult to configure and wire than other topologies
Mesh Topology
• In this topology, each node is connected to every other node in the network.
• Implementing the mesh topology is expensive and difficult.
• In this type of network, each node may send message to destination through multiple paths.
• While the data is travelling on the Mesh Network it is automatically configured to reach the destination by
taking the shortest route which means the least number of hops.
Mesh Topology
Advantage of Mesh Topology

• No traffic problem as there are dedicated links.
• It has multiple links, so if one route is blocked then other routes can be used for data communication.
• Points to point links make fault identification easy.
Disadvantage of Mesh Topology
• There is mesh of wiring which can be difficult to manage.
• Installation is complex as each node is connected to every node.

• Cabling cost is high
Hybrid Topology
• A combination of any two or more network topologies.
• A hybrid topology always accrues when two different basic network topologies are connected.
• It is a mixture of above mentioned topologies. Usually, a central computer is attached with sub-controllers
which in turn participate in a variety of topologies
Hybrid Topology
Advantages of a Hybrid Topology

• It is extremely flexible.
• It is very reliable.
Disadvantages of a Hybrid Topology
• Expensive
5.What are the different types of Networks?
A network consists of two or more computers that are linked in order to share resources (such as printers
and CDs), exchange files, or allow electronic communications.
• The computers on a network may be linked through cables, telephone lines, radio waves, satellites, or
infrared light beams.
Depending upon the geographical area covered by a network, it is classified as:
• Local Area Network (LAN)
• Metropolitan Area Network (MAN)
• Wide Area Network (WAN)
• Personal Area Network (PAN)
Local Area Network (LAN)
A LAN is a network that is used for communicating among computer devices, usually within an office building
or home. LAN’s enable the sharing of resources such as files or hardware devices that may be needed by
multiple users
• LAN is limited in size, typically spanning a few hundred meters, and no more than a mile
• It Is fast, with speeds from 10 Mbps to 10 Gbps
• It requires little wiring, typically a single cable connecting to each device
• It has lower cost compared to MAN’s or WAN’s
• LAN’s can be either wired or wireless. Twisted pair,coax or fibre optic cable can be used in wired
LAN’s.
• Every LAN uses a protocol – a set of rules that governs how packets are configured and transmitted.
• Nodes in a LAN are linked together with a certain topology. These topologies include:
o Bus
o Ring
o Star

• LANs are capable of very high transmission rates (100s Mb/s to G b/s).
Metropolitan Area Network (MAN)
• A metropolitan area network (MAN) is a large computer network that usually spans a city or a
large campus.
• A MAN is optimized for a larger geographical area than a LAN, ranging from several blocks of
buildings to entire cities.
• A MAN might be owned and operated by a single organization, but it usually will be used by many
individuals and organizations.
• A MAN often acts as a high speed network to allow sharing of regional resources.
• A MAN typically covers an area of between 5 and 50 km diameter.
• Examples of MAN: Telephone company network that provides a high speed DSL to customers and
cable TV network.
Network (WAN) Wide Area
• WAN covers a large geographic area such as country, continent or even whole of the world.
• A WAN is two or more LANs connected together. The LANs can be many miles apart.
• To cover great distances, WANs may transmit data over leased high-speed phone lines or wireless
links such as satellites.
• Multiple LANs can be connected together using devices such as bridges, routers, or gateways, which
enable them to share data.
• The world's most popular WAN is the Internet.
Personal Area Network (PAN)
• A PAN is a network that is used for communicating among computers and computer devices
(including telephones) in close proximity of around a few meters within a room
• It can be used for communicating between the devices themselves, or for connecting to a larger
network such as the internet.
• PAN’s can be wired or wireless
• A personal area network (PAN) is a computer network used for communication among computer
devices, including telephones and personal digital assistants, in proximity to an individual's body.
• The devices may or may not belong to the person in question. The reach of a PAN is typically a few
meters.
6.Explain about the structure of HTML and what are the basic tags ?
Basics of HTML
HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages.
 Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the
link available on a webpage is called Hypertext.
 As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark-up" a
text document with tags that tell a Web browser how to structure it to display.
Originally, HTML was developed with the intent of defining the structure of documents like headings,
paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.
Now, HTML is being widely used to format web pages with the help of different tags available in HTML
language.
HTML Tags
As told earlier, HTML is a markup language and makes use of various tags to format the content. These tags
are enclosed within angle braces <Tag Name>. Except few tags, most of the tags have their corresponding
closing tags. For example, <html> has its closing tag</html> and <body> tag has its closing tag </body> tag
etc.
Above example of HTML document uses
the following tags:
Tag Description

<!DOCTYPE...> This tag defines the document type and

HTML version.
<html> This tag encloses the complete HTML
document and mainly comprises of
document header which is represented by
<head>...</head> and document body
which is represented by <body>...</body>
tags.
<head> This tag represents the document's header
which can keep other HTML tags like
<title>, <link> etc.
<title> The <title> tag is used inside the <head>
tag to mention the document title.
<body> This tag represents the document's body
which keeps other HTML tags like <h1>,
<div>, <p> etc.
<h1> This tag represents the heading.
<p> This tag represents a paragraph.
HTML DOCUMENT:
Html document consists of html tags and some text.
Characteristics of HTML TAGS:
1. Html tags are used to markup html element.
2. Html tags are surrounded by <and> Characters these characters are called as angler brackets.
3. Html tags always come in pairs. That is tags contain a starting tag and ending tags.
4. The text in b/w the starting tag and ending tag is called as element content.
5. Html tags are free defined tags.
6. Html tags are not case sensitive. That the upper and lower document is html document.
7. The html tag <html> in a document represents. That the document is html document.
8. The entire html document must be written starting html tag <html> and ending html </html>.
9. Html document is divided into two sections.
Structure of Basic HTML Document

(I) Head section:
This section is used to provide general information about the html doc. This section is
representing by <head>.
Ex: Title, Meta etc.
(II) Body section:
This section is used to display text are images on the Browser. This section is representing by
<body>.
Html document structure:
<html>
<head>
<title> </title>
</head>
<body>
Welcome to any web page
</body>
</html>
Step1: Processor to write executes the html document. Open an editor and type html document.
<html>
<head>
<title>First html</title>
</head>
<body>
Welcome to my web page
</body>
</html>
Step2: Save the html document any name having “. Html” as the extension.
Step3: To execute the html document to open it in any Browser. To html language is an error free language.
That is it will not display any error massage on the Browser. Even it the html document contain any error.
Example:
In its simplest form, following is an example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
Html comments:
Comments are used to make the code name readable or they are used to explain the code.
HTML comments begins with 
EX :
</script>
</body>
</html>
HTML pages with embedded JavaScript rarely exhibit serious flaws, but they can have side effects. This is
especially true if scripts are placed inside the body of the page. If the script is at the top of the page, it may
be executed before the body of the page has loaded. Similarly having the script at the foot of the page
causes the reverse to be true. If the page relies upon a combination of scripts, text and images then the page
will not run properly as images will be downloaded a long time after the script and text. Scripts which are
loaded from separate files or placed in the head of the page do not exhibit this behaviour because they need
to be triggered by events which are controlled externally.

3.Explain about variables in Javascript?

Variables
A variable is a named value. These are the data items that we can manipulate as the program runs. While
giving a name to a variable the following rules should be followed.
 Name must begin with a letter, digit or the underscore ( _ ).
 Blank spaces are not allowed with in a name.
 Names are case-sensitive.
 We cannot use reserved word as a variable name.
Creating variables
A variable can be created by using the keyword var before the variable name. It is not necessary to specify
the type of the data that the variable is going to hold while declaring a variable. Also the keyword var is
often optional but it is best to always use var before variable declaration.
Examples:-
var first = 23;
var second = "some words";
var third = second;
var first_Boolean = true;
When you have finished with a variable you do not have to delete it or set it to null. The browser will
automatically delete it when a different web page is loaded.
Example 1 :
<html>
<head>
<title> A sample </title>
</head>
<body>
<script language="javascript">

</script>
</body>
</html>
4.What are the Data types in JavaScript?

Data types
Java script has only four types of data.
numeric
These are basic numbers. They can be integers such as 2, 22 or floating point values like 23.42, -
56.01. There is no need to differentiate between them as we declare and use them. In fact we can
change the type of data which a variable holds as the program runs.
strings
These are collections of characters. The value of a string can even contain spaces and many be totally
made from digits Like "charis bates", and "2345.432" The strings are surrounded with double quotes
visitor_name="charis Bates";
If you are nesting strings use double quotes for outer string and single for inner quote.
visitor_quote = "A quote inside 'a quote' needs different marks",
or you can force the interpreter by placing a \ before the inner quotes
visitor_quote = "A quote inside\" a quote\" with the same mark";
Boolean
Boolean variable bold the values true and false
null
A null value is one that has not yet been given a value. It does not mean zero and should not be used
in that way.
Example Program::
<html>
<head>
<title> A sample</title>
function test()
{
var visitor_name;
visitor_name=prompt("Enter your name","");
alert("your name is"+visitor_name);
document.writeln("<html><head>");
document.writeln("<title>sample</title>");
document.writeln("</head><body>");
document.writeln("<h1>"your name is </h1>");
document.writeln("<h2>"+visitor_name+"</h2>");
document.writeln("</body><html>");
document.close();
}
</script>
<body onload="test()"> </body>
</html>
Converting data types
Always assume that a value in a JavaScript is string unless you explicitly converted it to a number. The
interpreter will try to best guess your intentions if they are not clear. Here is an example of confusion which
can arise.
<html>
<head> <title>The math object</title> </head>
<body>

</script>
</body></html>
5.Explain about String manipulation?
String manipulation
Most of the data in the JavaScript are text strings. String manipulation involves either joining strings
together, splitting them a part or searching through them. JavaScript has functions which perform all of
those operations and much more
1.length

It is a value which holds the number of characters in the string. It is not a function and do not have to place
parentheses when using it.
var name = prompt("enter name"," ");
var u=name.length;
charAt(index)
The function returns which is at position index in the string.
var name = prompt("enter name:" ");
var x = name.charAt(3);
2.concat( )
concat("string" *,"string" *,........"string” + + )
JavaScript has two ways that you can join string together the simplest is to use + operator and the second is
concat method
Ex:-
var you=prompt("Enter your name:");
var yourage=prompt("Enter your age:");
vas msg="Thank you";
document.writeln(msg.concat(you));
you=you+" ";
var result=you.concat(yourage,"Thanks");
document.writeln(result);
3.indexOf( )
indexOf( "search" [ ,Offset ] )
The string is searched for the string in the first parameter. If the search is successful, the index of the target
string is returned. If the search is unsuccessful the operation returns -1. By default the indexOf() function
starts at index 0, however, an optional offset may be specified so that the search starts part way along the
string
<html>
<head> <title>Browser Agent</title> </head>
<body>
var agent=navigator.appname.toLowerCase( );
var result=agent.indexOf("Microsoft");
document.writeln("<h1>your Browser is</h1><p>"+agent+"</p>”);
if(result==-1) document.writeln("<p>it was not made by Microsoft</p>");
else document.writeln("<p>It was made by Microsoft</P>");
document. close( );
</script> </body> </html>
4.lastIndexOf( "search" [, offset] )
This function does exactly the same thing as indexOf( ) but works its way backwards along the string. the
offset works in the same way as for indexOf(), but the default value is string.length -1
5.split(separator [, limit ] )
The split() function breaks the string apart whenever it encounters the character passed in as the first
parameter. The pieces of the string are stored in an array. split() has an optional second parameter which is
an integer value indicating how many of the pieces are to the stored in the array
var words = agent.split(" ");
for(var i = 0; i < words.length; i++ )
{
document.writeln("<p>"+words[i]+"</p>");
}
6.substr( index [, length ] )
The function returns a substring which starts at the character indicated by the index parameter. The
substring continues either to the end of the string or for the number of characters indicated by the length
parameter. If the index is greater than the length of the string then nothing is returned. If it is negative then

it is taken as the offset from the end. If a length of 0 or a negative number is provided then no characters are
returned
Ex:-
piece = agent.substring(3,17);
document.writeln( "<p>" + piece + "</p>" );
substring( index1 [, index2 ] )
It returns the set of characters which starts at index1 and continues up to, but does not include the
character at index2. The following rules apply.
 If index is less than zero, it will be treated as zero
 If index2 is greater than the length of the string, it is treated as length of the string.
 If two indexes are equal, an empty string is returned.
 If index2 is missing all characters up to the end of the string are taken.
 If index1 is greater than index2, a runtime error occurs.
7.toLowerCase()
It converts all characters in the string to lower case.
8.toUppercase()
It converts all characters in the string to upper case.
6.Explain about Mathematical function in javaScript?
MATHEMATICAL FUNCTIONS:-
Mathematical functions and values are part of a built-in JavaScript object called Math. All functions and
attributes used in complex mathematics must be accessed via this object. This is usually done by preceding
the function name with object name
ex:-
var area = Math.PI * ( r * r );
var next = Math.ceil( area );
If a section of your code includes a lot of math operations the repetition of math can become tedious. It can
be replaced using the keyword "with" like this
with(Math)
{
var area=PI*(r*r);
var next=ceil(area);
}
NAN
This is value which represents something which is not number. Variable can hold different types of data, you
need a way of knowing if a value is currently numeric so that script can decide how to process it. Many
functions return numbers if they have completed successfully. Checking the return value against NAN gives a
way of deciding if the function operated properly.
Global methods
These are some methods which are always available to your scripts
isNAN( value )
This functions returns true if argument is not a number and false if it is numeric
parseFloat( string )
The function parses string, passed in as argument. The string is parsed from the start with the parser looking
for the numbers 0 through 9, the + and -, decimal point and exponents only. When any other character
encountered the parser stops and return what it has already found, if the first character does not belong to
the valid set returns NAN.
parseInt( string [, radix ] )

The string is parsed and its value as an integer returned. Once an invalid character is encountered the
parsing stops and the function returns what it has already found. If the first character of the string is invalid
it returns NAN. The function optionally takes radix as the second argument which decides the type of the
number.
The Math library
To use this simply put the name of the operation after Math and include any parameters inside the
parenthesis.
abs(value) Returns the absolute value passed into it.
acos(value)
These functions returns arcsine, arccosine, arctangent of the values
asin(value)
passed into radians.
atan(value)
Returns the smallest integer which is greater than are equal to the
ceil(value)
value passed in.
cos(value)
sin(value) Returns cosine, sine, and tangent of the values passed in.
tan(value)
Returns the largest integer which is smaller than are equal to the
floor(value)
number passed in.
log(value) Returns natural logarithm of its argument.
max(value1,value2) Returns the larger of its argument.
pow(value, power) Returns the result of rising value to power.
random() Returns the pseudo random number between zero and one.
round(value) Returns the result of rounding its argument to the nearest integer.
sqrt(value) Returns the square root of the value.
7.What are the different control statements in Java?
Control Statements
There are different control statements are there in Java
1. Decision making statements -------------If Statements
2. Looping Statements -------------while,do_while, for
3. branching statements -------------Switch
if-else
if statement is used in JavaScript to construct a test before executing the code. The code is executed only if
the test turns out to be true. if statement can also be elaborated by including an 'else' clause and the code in
the else statement will be executed if the condition in the 'if' statement is false. The general form is:
if(condition)
{
code executed if condition is true
}
else
{
code executed if condition is false

}
Example 1:
<html>
<head>
<title> Browser sniffing </title>
</head>
<body>
if(navigator.appName=="microsoft internet explorer")
{
document.write("<b><center>you have I.E" + navigator.appVersion +
"</center>" </b>");
}
if(navigator.appName=="Netscape")
{
document.write("<b><center>you have Netscape Navigator" +
navigater.appVersion + "</center>"</b>");
}
</script>
</body>
</html>
</html>
For Loop
Many Operations need to be repeated a number of times. These go inside a for loop. It has the following
general form
for( intialisztion; test; increament)
{
Code
}
The initialisation part is done first (which initialises a variable called loop index variable), the test condition is
executed for each time the code in the loop has been executed. If the test is false, the loop ends otherwise
the body of the loop is executed. When the body of the loop is executed the control is transferred back. Now
the loop index variable incremented or decremented and again test condition is executed and this process
continuous till the test condition becomes false.
Example
<html>
<head>
<title> Using the for statement </title>
</head>
<body>
var fact = 1;
for(var I =1; I <= 0; i++)
{
fact = fact * i;
document.writeln( i + "!=" + fact + "<br>" );
}
</script>
</body>
</html>
while Loop
The while loop is an entry controlled loop and it has this form
while( test )

{
Body
}
The test condition is evaluated first, if it is true then the body of the while executed. After completing the
body again the test condition is evaluated and it is true, the body is executed again. This process continuous
till the condition becomes false.
example:
<html>
<head>
<title> While loop </title>
</head>
<body>
document.writeln("<h1> while loop <h1>");
var done=false;
var msg;
while(done==false)
{
msg=prompt("Enter a string "," ");
document.writeln("<p>"+msg+"</p>");
if(msg.to lowerCase()=="quit")
{ document.writeln("<p> Thanks,Good bye </p>");}
document.close();
}
</script>
</body>
</html>
Switch Statement
Choosing between a number of alternatives can lead to awkward code if you only use if-else statements.
Where you need to make a choice between more than two items the switch statement much easier to write
and maintain. The complete switch looks like this.
switch(expression)
{
case label: statements;
break;
case label: statements;
break;
default: statements;
}
A switch selects between a number of choices depending upon the value of the expression. The choices are
identify by case statements, each has a label which equals one of the potential values of the expression. If
none of the cases matches the expression, the optional default may be used instead. Each case includes one
or more statements and is terminated by break.
example:
<html>
<head>
<title> Switch Statement </title>
</head>
<body>
var msg=prompt("Enter Heading tag"," ");
switch(msg)
{

case "h1":
case "H1": document.writeln("<h1> Welcome </h1>");
break;
case "h2":
break;
case "h3":
break;
case "h4":
break;
case "h5":
break;
case "h6":
break;
default : document.writeln("<b> Sorry you does not given
correct tag
</b>");
}
</script>
</body>
</html>
8.Explain about operators in Java?
Operators
Java script has two types of operators. Those are used in tests of logic and those used to affect variables.
Operators Meaning
+ If the arguments are numeric they are added, if they are strings they are
concatenation.
- If the supply two operands subtracts one from other, if supplied one
operand reverses its sign.
* Multiples two numbers together.
/ Divides first number by the second.
% Modulus division returns an integer remainder from division.
! Logical not returns true if the operand is evaluates false otherwise
false.
> Returns true if first operand is greater than second.
>= Returns true if first operand is greater than or equal to second.
< Returns true if first operand is less than second.
<= Returns true if first operand is less than or equal to second.
== Returns true if both operands are equals otherwise false..
!= Returns true if both operands are not equal..
&& Returns true if both operands are equals evaluated to true otherwise
false..
|| Returns false if both operands evaluated to false otherwise true.
= Assigns value to a variable.
+= Adds both operands and result is stored in left side operand
-= Subtracts right side operand from left side operand and stores result in
Left side operand.
*= Multiplies the both operands, result will be stored in left side operand.
/= Left side operand divided with right side operand and result is stored in
left side operand.
%= Performs modulus division and result stored in left side operand.
++ (Auto Increment) Increases the value of its integer argument by '1'
-- Decreases the value of its integer argument by one.
9.Explain about Arrays in java?
Arrays
An array is an ordered set of data elements which can access through a single name. We can access the
elements by their index .The index is the position of the element in the array with the first element being at
position zero and the last at (array.length-1).
- ------
ITEM1 ITEM2 ITEM3 ITEM-N
-
Creating Arrays
Arrays can be constructed in 3 different ways. The easiest way is simply to declare variable and pass it some
elements.
Ex: var days = [ "monday", "tuesday", "wednesday", "thrusday" ];
That creates an array of 4 elements each holding a text string, The second approach is to create an array
object using the keyword 'new' and a set of elements to store.
var days = new Array("Monday", "Tuesday", "Wednesday ", “Thursday" );
Finally an empty array object which has space for a number of elements can be created.
var days=new arrays(4);
Java script arrays can hold mixed data types as following example shows.
var x = ["monday", "tuesday", "wednesday", 34,76.34];
var data=new Array("Monday", "Tuesday", "Wednesday", 34.3,76);
Accessing and Adding elements to Array
Array elements are accessed by their index. The index denotes the position of the element and these starts
from zero. Adding an element uses the square bracket syntax.
Example
var x =["Monday", "Tuesday", "Wednesday", 34.3, 76];
x[5] = "Thursday";
x[23] = 48;
The code creates an array of 4 elements in line one. A new element is added at position 5 in line 2. At line 3
an element is added at position 23. To do this the array is first expanded and then new element is added.
Length
When accessing array elements it is need to know how many elements have been stored. This is done
through the length attribute.
Example
<html>
<head>
<title> Looping through an array </title>
</head>
<body>
document.writeln("<h1> looping through an array <h1>");
document.writeln("<p>");
var data=new Array("monday","tuesday","wednesday",34.3,76);
var len=data.length;
for(var counter = 0; counter < len; count++)
{
document.writeln(data[count]+",");
}
document.writeln("</p>");
</script>
</body>
</html>
10.Explain about functions in java?
FUNCTIONS
A function is a piece of code that performs a specific task. Every function is made up of a number of
statements. By creating a function the same piece of code can be used repeatedly. JavaScript has a lot of
functions built into the language. After creating a function we can use it by calling the function. Until the
program calls a function, that code will not do anything.
Defining function:
function name( parameter list )
{
body
}
Functions are defined using the keyword function. The function name can be any combination of letters,
digits and underscore but can’t contain a space. The name of the function has to be followed by parenthesis
which will contain any values that you want to pass into the function code. A function has a block of code
which is surrounded by curly brackets.
Ex:-
function example()
{ // the code
}
Parameter Passing:
We can also supply values to a function while calling it. When a function receives a value as a parameter that
value is given a name and can be accessed, using that name, by the function .The names of parameters are
taken from the function definition and or applied in the order in which parameters are passed in.
Example
function about_you(name, age)
{
document.writeln("<h1> All about you </h1>");
document.writeln("<p> <strong> your name is : </strong>"+name+ <p>");
document.writeln("<p> <strong> your age is : </strong>"+age+ <p>");
document.close();
}
While calling a function it is also possible not pass any parameters in. We can also miss out a parameter all
together but only the last one. In JavaScript parameters are passed as arrays. Every function has two
properties that can be used to find information about the parameters.
function.arguments
This is the array of parameters that have been passed.
function.arguments.length
This is the number of parameters that have been passed into the function.
Example
<html>
<head>
<title> Examining the function call </title>
</head>
<body>
function concatenator()
{
var args=concatenater.arguments;
var res=" ";
for(var i=0; I < args.length; i++) res=res.concat(args[i], " ");
return res;
}
var result=concatenator("Oh", "blah", "di");
document.writeln("<p> the result is"+result+" "+result.length+"</p>");
document.close();
</script>
</body>
</html>
Returning values
Any variable that are declared in a function are local to that function. We cannot get their values outside the
function unless we return a value from a function. That mechanism is provided by return statement. The
return statement can only pass a single value. With return the values can be a JavaScript object.
Example
var reset = getSin(32);
function getSin(number)
{
var answer=Math.sin(number);
return answer;
}
1.Explain about DHTML and JAVASCRIPT?(**)
2.What are the basic concepts of JavaScript?(***)
3.Explain about variables in Javascript?(*)
4.What are the Data types in JavaScript?(***)
5.Explain about String manipulation?(****)
6.Explain about Mathematical function in javaScript?(****)
7.What are the different control statements in Java?(***)
8.Explain about operators in Java?(***)
9.Explain about Arrays in java?(***)
10.Explain about functions in java?(*****)

UNIT-IV
OBJECTS In java script
1.Explain about objects in javascript?
Objects
Objects are described in software and design constructs called classes. A class usually contains some data
items and methods. Each class provides services to other classes in the system. Often programs are
composed of a set of class hierarchies in which generic classes are declared, which then have their
functionality refined and specialized into usable form.
A single generic class can be specialized in many ways and each of this specialized and versions inherit some
of the properties and behavior of the generic class. When a program runs, objects are created.
An object is a runtime instance of a class. When an object is needs to do something, the appropriate
method is executed.
Generally objects do not act independently; instead their actions are triggered by events throughout the
system. Very often an object is formed by aggregating together lots of simpler objects. The built in java script
objects such as document and window act and are used, like standard OO object(object-oriented and
object). Where JavaScript diverges from traditional OO is in treatment of user defined object. An object is
really a data structure that has been associated with some functions. It does not have inheritance.
example:-
<html>
<head>
<script Language="Java Script">
function.objDemo()
{
popup("Hello");
myhouse=new house(" White house",2,4);
alert(myhouse.name + "Has" + myhouse.floors + "floors and “ +
myhouse.rooms()+" Rooms" );
}
function.house(name,floors,beds)
{
this.name=name;
this.floors=floors;
this.bedrooms=beds;
this.rooms=frooms;
this.leave=popup;
}
function frooms()
{
var.ground floor=3;
var.utilities=2;
var.total=0;
if(this.floors<=0) total=0;
else
{
if(this.floors==1) total=this.bedrooms+utilities;
else
{
total=(this.floors*utilities);
total +=groundfloors;
total +=this.bedrooms;
}
}
return total;
}
function popup(msg)

{ alert(msg);}
</script>
</head>
<body onload="objDemo()">
</body>
</html>
new
The Keyword new is used to create objects. It allocates memory & sets all variables that can be at this stage.
new calls a function which has the same name as the type of the objects this is being created. This function
is called constructor.
this
To differentiate between global variables & those which are part of an object but may have the same name
JavaScript uses this. Whenever you refer to a variable which is part of an object you must precede the
variable name by this separate the variable name from this with a dot.
. (dot)
When referring to a property of an object, whether a method or a variable, a dot is placed between the
object name and property.
2.Explain about regular Expressions?
Regular expressions
One common task in software development is the parsing of a string looking for a particular pattern. For
instance a script might take name data from a user and have to search through it, checking that no digits
have been entered. The usual approach which performs these tasks in scripting languages is to create a
pattern called a regular expression which describes a set of characters that may be present in a string.
JavaScript includes a set of routines to manipulate strings & search patterns. JavaScript regular expressions
include functions which you call from your scripts when you need a pattern finding.
Creating Regular Expressions
A Regular expression is a JavaScript object. They can be created statically when the script is first parsed or
dynamically at runtime. If the search pattern depends on the user input, then you will need to create
dynamic patterns. A static regular expression is created as follows.
regex = /fish|fowl/;
Dynamic patterns are created using the new keyword to create an instance of the RegExp class.
regex = new RegExp("fish|fowl");
Writing Patterns
Patterns are expressed in a cryptic, but powerful, grammar which uses symbols to replace complex
statements.
Token Description
^ Match at the start of the input string
$ Match at the end of the input string
* Match zero or more times
+ Match one or more times
? Match zero or more one time
a|b Match a or b
{n} Match the string n times
\d Match a digit
\D Match anything except for digit
\w Match alpha numeric characters or underscore
/W Match anything except alpha numeric characters or underscore
\s Match a white space character

\S Match anything except for white space character
*…..+ Creates a set of characters, one of which must match if the operation is to
be successful. If you need to specify a range of characters then separate
the first & last with a hyphen : [0-9] or [D-G]
*^….+ Creates a set of characters, which must not match. If any character in the
set matches then the operation has failed. This fails if any lower case
letter from d to q is matched [^d-q]
Remembering the result
The RegExp object holds the result of its operation in an array which it returns to the calling script. Any part
of a pattern which you need to remember is placed inside parentheses. You can match and remember as
many strings as you want to. These are returned in an array and can be recalled very easily.
<html>
<head>
<title> Remembering Patterns </title>
</head>
<body>
<script Language="JavaScript">
var re = new RegExp (" [ F|f ]red");
var msg=" Have you met fred?";
var results = re.exec(msg);
if(results)
{
document.writeln("<p> I found" + results[0]+" </p>");
}
else
{
documents.writeln("<p> I did not find the search string </p>");
}
document.close();
</script>
</body>
</html>
3.Explain Regular Expressions using Functions
Functions
Regular expressions are manipulated using functions which belongs to either RegExp or string classes.
String class functions
match(pattern)
Searches for a matching pattern and returns an array holding the results or null if no match is found.
replace(pattern1,pattern2)
Searches for pattern1, if the search is successful, patter1 is replaced with pattern2.
search(pattern)
Searches for a pattern in the string. if the match is successful the index of the start of the match is returned.
If the search fails the function returns -1.
split(pattern)
Splits the string into parts based upon the pattern or regular expression which is supplied as a parameter.
escape(string) & unescape(string)
The escape() function takes a string as its parameter and returns a new string with characters converted to
escape sequences. The unescape() function does the reverse, convertiong an escape sequences into
characters.
<html>
<head> <title> Escape </title> </head>
<body>
var initial="A small string with <> one or two characters which need escaping";
var converted=escape(initial):
documents.writeln("<p>" +initial+" </p>");
documents.writeln("<p>" + converted+" </p>");
documents.writeln("<p>" + unescape(converted)+" </p>");
</script>
</body></html>
Class RegExp Functions
exec(string)
Executes a search for a matching pattern in its parameter string, It returns an array holding the results of the
operation.
test(string)
Searches for a match in its parameter string, it returns true match is found otherwise returns false.
Flags
The default behaviour for regular expressions is to work only one single line of data, to stop as soon as a
match is successful and to use the pattern exactly as written. The behaviour of RegExp objects can be
modified using these flags.
i - Performs searches which ignore the case of the pattern and the input string.
m - Allows searching of data which spans several input lines.
g - Rather than stopping when to match is successful, this forces global matching
across all of the input.
The flags are applied either directly into the regular expressions.
regexp= /fish|fowl/ig;
or as an additional parameter to the object constructor
regexp=new RegExp("fish|fowl","ig");
Example
<html>
<head>
<title> Regular Expression </title>
</head>
<body>
document.writeln("<h1> The words that are starts with b and ends with r are
</h1>");
var x="bitty bought bitter butter and bought better butter to make bitter
butter
better butter";
var p= new RegExp("b\\w*r","ig");
if(a)
for(var i=0;i<a.length;i++)document.writeln("<p>"+a[i]+"</p>");
else document.writeln("<p>" Not found</p>");
</script>
</body>
</html>
4.Explain about Exception handling in javascript?
Exception Handling
Java script provides a mechanism for dealing with general classes of error. This mechanism is called
exception handling. An exception in object-based programming is an object, created dynamically at runtime,
which encapsulates an error and some information about it. We can define our own exception classes to
include exactly what we need in order to handle the problem successfully. Using exception needs two new
pieces of the JavaScript language.
throw
An exception is an object. It is created using the standard new method. Once the exception object exists, we
have to throw the exception, that is we pass it to a piece of code which can handle it. The syntax of the
throw is
do something
if an error happens
{
Create a new exception object;
throw the exception
}
try ….. catch
The try ….. catch mechanism is found in many programming languages not just in JavaScript. The idea here is
that the programme is going to try to execute a block of statements, if an exception is thrown by any of
these statements, execution of the whole block ceases and the program looks for a catch statement to
handle the exception. try…..catch blocks take this form
try
{
statement one
statement two
statement three
}
catch(exception){ handle the exception}
Example:-
<html>
<head>
<title> using exception </title>
</head>
<body onload="runTest()">
function inputException(msg)
{
this.val=msg;
this.toString() = function(){return ("Input Exception in "+ this.val)};
}
function areLetters(msg)
{
var input=msg; var re=new Regexp("[a-Z]","ig");
if(input.match(re))
{
oops=new input Exception(input);
throw oops;
}
}
function runtest()
{
document.writeln("<h1> using exceptions </h1>");
var input = prompt("type something","");
try
{
areLetter(input);
}
catch(e)
{
document.writeln("<p>"+e.toString()+"</p>");
document.close();
}
document.writeln("<p> You only see this if an exception is not thrown
</p>");
document.close();
}
</script>
</body>
</html>
5.Explain about built in obects?
Built-in Objects
Most of the objects we use in scripting will be pre-built ones that came with the browser. These
objects mirror aspects of the document object model DOM.
Document Object
A document is a web page that is being either displayed or created. The document has a number of
properties that can be accessed by JavaScript and used to manipulate the content of the page. Some of the
properties can be used to create HTML pages from within java script while others may be used to change the
operation of current page.
write() & writeln() methods
HTML pages can be created on the fly using JavaScript. This is done by using the write() or writeln() methods
of the document object.
Ex
document.write("<body>");
document.writeln("<h1> A test </h1>");
bgcolor and fgcolor properties
These are the same properties that can be sent in the <body> tag. The difference here is that the values can
be set from within a JavaScript. The bgcolor and fgcolor properties specify or retrieve the background colour
and foreground colour for the document. These accept either hexadecimal values or common names for
colours
Ex
<html>
<head>
<title> docdemo </title>
<script language="java script">
function change()
{
document.bgcolor=rgb(198,198,198);
document.fgcolor="blue";
}
</script>
</head>
<body>
<h1> It is test </h1><hr>
<input type="button" value="click me" onclick="change()">
</body>
</html>
Anchors
Any named point inside an HTML document is an anchor. Anchors are created using
<a name = ………>

The anchors property is an array of these names in the ordered in which they appear in the HTML document.
Anchors can be accessed like this
document.anchors[0];
ex
<html>
<head>
<title>Anchors demo </title>
function count()
{
var x=document.anchors;
document.writeln("<p> Anchors = " + x.length + "Text=" + x[0].innerText
+ "</p>");
}
</script>
</head>
<body onload="count()">
<a href="test.html"> Test </a> <hr>
<a name="xyz"> section</a>
</body> </html>
Links
An array holding all <a> objects with a href property, as well as all area objects. All links are stored in an
array in the same order as they appear on the webpage.
ex:-
<html>
<head>
<title>Anchors demo </title>
function count()
{
var x=document.links;
document.writeln("<p>
links="+x.length+"Text="+x[0].innerText+"</p>");
}
</script>
</head>
<body onload="count()">
<a href="test.html"> Test </a><hr>
<a name="xyz"> section</a>
</body>
</html>
Forms
An array contains all of the html forms. By combining this array with the individual form objects each form
item can be accessed.
Layers
A document can be made from a number of layers of content. This array contains the layer object. Layers
have many methods and properties of their own.
close()
The document is not completely written until the close() method has been called.
Ex
<html>
<head>
<title> Setting Background color with java script </title>
</head>
<body onMouseDown="document.bgcolor=red">
<center>
<h1> Click this page to turn it red </h1>
</center>
</body>
</html>
getElementById(ID)
It uses the HTML ID attribute to locate a specific DOM load. If getElementById can't find an element with the
specified Id returns null. If it finds multiple elements with that Id it returns first one. Remember the Id's are
case sensitive.
getElementsByName(name)
This function returns an array of elements that have name attribute that matches the argument. This is
useful in particular for form radio buttons, because multiple elements grouped together can have the same
name attribute. If no elements are found array of zero length is return.
getElementsByTagName(tagname)
This method is inherited by every HTML element node and can be used to query just portions of the DOM. It
accepts a single argument, a case sensitive string of the HTML tag, we want to find and returns an array of
given tags collection.
6.Explain about window object?
Window Object
The browser window is a mutable object that can be addressed by JavaScript code. This object corresponds
to the current browser window which may contain a page or a number of pages in frames. The document
object is a part of the window object. In fact window object is the top object in hierarchy. Some of the
methods that are available from window object is
open()
This opens in new window the general syntax for this is
open("URL","name" [, "window features"])
This will return a new window object which contains the document specified by the 'URL'. The window is
given an identifying name so that it can be manipulated individually. The optional window features attribute
is a string of comma separated assignment expressions.
Ex:
var x=window.open("","","height=350,resizable=true")
close()
It closes the browser window.
scroll()
The contents of window can be automatically scrolled using this command. The general syntax for this is
scroll(coordinate, coordinate)
As with HTML layers the screen coordinates starts from (0,0) which is at top left corner and increment as
move across and down. The coordinates are given in pixels. Some of the properties are available from
window object is
toolbar = [1|0] - should a new window have a navigational toolbar(back,
forward,
reload, stop
buttons) ?
location = [1|0] - should a new window renders a address bar. ?
directions = [1|0] - if YES it renders the link bar.
status = [1|0] - should the new window have a status bar.
menubar = [1|0] - should the new window have a menu bar.
scrollbars = [1|0] - should the scrollbars be visible.
resizable = [1|0] - should the new secondary window be resizable.

These attributes can be switched on and off individually.
width = pixels - Specify the width of the content area in pixels.
height = pixels - Height of the content region in pixels.
left = pixels - Horizontal position of the window in pixels
top = pixels - Vertical position of the window in pixels
Example
<html>
<head>
<title> opening a new window </title>
<script language ="javascript ">
function showGlossary()
{ window.open("glossary.html"," ") }
</script>
</head>
<body>
<form>
<center> <br>
< h1> Opening a new window with java script</h1>
<br> <br>
<input type="button" value="see glossary" on click="show Glossary")>
</center>
</form>
</body>
</html>
Example
<html>
<head>
<script language ="javascript ">
var mywindow;
function openWindow()
{ mywindow=window.open("","","width=400,height=200");}
function closeWindow()
{ if(mywindow) mywindow.close();}
function check window()
{
if(! mywindow)
document.getElementById("msg").innerText="my window has never been
opened";
else if(mywindow.closed)
document.getElementById("msg").innerText="my window has been
closed";
else
document.getElementById("msg").innerText="my window has not
been
opened";
}
</script>
</head>
<body>
<input type="button" value="open my window" onclick="openWindow()">
<input type="button" value="close my window" onclick="closeWindow()">
<br> <br>
<input type="button" value="Has my window been closed" onclick="checkWindow()">
<br> <br> <div id="msg"> </div>
</body>
</html>
7.Explain about form object?

The form object
Two aspects of the form can be manipulated through Javascript. First the data i.e., entered on to a form can
be checked at submission. Second can actually build forms through java script. Some of the properties that
are available from form object are
action - This is the URL that the form will POST or GET to
length - Describes the number of form fields in the form
method - Indicates what type of form submission will happen.
target - The name of the frame in which to display the result of
the page.
elements[] - This is a collection of all the form field elements contained inside the
form.
Forms also provide two methods
submit() - Submits the form
reset() - Returns all the form fields to their default values
Forms also suppose a couple key events.
onClick = "method"
This can be applied to all form elements. The event is triggered when the user clicks on that event.
onSubmit = "method"
The event can only be triggered by the form itself and occurs when a form is submitted
onReset = "method"
It is triggered when a form is reset by the user
Ex:-
<html>
<head>
<script language ="javascript">
function validate()
{
var method=document.forms[0].method;
var action=document.forms[0].action;
var value=document.forms[0].elements[0].value;
if(value!="Amar") document.forms[0].reset();
else alert("Hi Amar");
}
</script>
</head>
<body>
<form method="post">
<input type="text" size=32>
<input type="submit" value="click me" onClick="validate()">
</form>
</body>
</html>
8.Explain about Browser object?
Browser object
No two browser models will process the JavaScript in the same way. It is important to find out which
browser is used to view the page then can make a choice for the visitors.
 Exclude browsers that are unable to use the code.
 Redirect then to a non-script version of the site.
 present script that are trailed to suite each browser.

The browser is a Java script object and can be queried form with in the code. The browser object is actually
called the navigator object. some of the properties of navigator object are
navigator.appCodeName
This is the internal name for the browser for both major products this is Mozilla.
navigator.appName
this is public name of the browser - navigator or Internet explorer.
navigator.appVersion
The version number, platform on which the browser is running and the version of the navigator with which it
is compatible.
navigator.userAgent
The strings appCodeName & appVersion concatenated together
navigator.plugins[]
An array containing details of all installed plugins
navigator.mimeTypes[]
An array of all supported mime type
Ex:-
<html>
<head>
<script language ="javascript">
function Sniff()
{
browser=new Is();
browser.display();
}
function Is()
{
this.app=navigator.appName.toLowerCase();
this.version=navigator.appVersion;
this.code=navigator.appCodeName.toLowerCase();
this.agent=navigator.userAgent.toLowerCase();
this.display=showData;
}
function showData()
{
win=open("","newwin");
win.document.write("<body> <h1> About your browser </h1> </body>");
win.document.write("<p> Application:"+ this.app + "</p>"+"<p>Agent: "+
this.agent + "</p>" );
win.document.write("<p> codeName:"+this.code+"</p>");
win.document.write("<p> version:"+this.version+"</p>");
win.document.write("</body>");
win.document.close();
}
</script></head>
<body onload="Sniff()">
</body>
</html>
9.Explain about date object?
The Date object
Java script includes a well-developed Date class which provides functions to perform many different data
manipulations. In Java script dates and times represent the number of milliseconds since 1st January 1970.
The constructors of date object are;
Date() Constructs an empty date object.
Date(milliseconds) Constructs a date object based upon the
number of milliseconds which have

elapsed since 00:00:00 hours on
10/01/1970.
Create a date object based upon the
contents of a text string, the string must
Date(string)
be in the format which is created by the
Date.parse() function.
Create a new Date object based upon
numerical values for the year, month &
Date(year.month,day[,hour,minute,second]) day. Optional time values may also be
specified January is represented by 0 &
December 11
This returns the number of milliseconds
parse(string) since midnight on 01/01/1970 which the
string represents
Date objects also provide some methods.
getDate() Returns the day of the month
getDay() Returns the integer representing the day of the week.
Sunday is 0 & Saturday is 6.
getFullYear() Returns year as the 4 digit number
getHours() Returns the hour field of the date objects
getMilliseconds() Returns the milliseconds of the Date object as a
number from 0 to 999
getMinutes() Returns minute of the date object from 0 to 59
getMonth() Returns month from 0 to 11
getSeconds() Returns the seconds
getTime() Returns the number of milliseconds since midnight on
01-01-1970 which the date object represents
setDate(day) Set the date value of the object Accept value in the
range 1-3
setFullYear(year[,month,day]) Set full year sets the year value of the object
optionally also sets month & day values. All are passed
as integers, Year as four digit, date & month in the
range 0 to 11,days in the range 1 to 31
setHours(hours[mins,secs,ms]) set the hours values of the object to an integer in the
range 0 through 23, optionally set minutes, seconds &
milliseconds values
setMilliseconds(ms) sets the milliseconds in the range 0 through 999
setMinutes(min[,secs,ms]) sets the minutes value in the range 0 through 59
setMonth(month[,day]) sets the month value in the range 0 through 11
setSeconds(secs[,ms]) sets the seconds values in the range 0-59
setTime(time) sets the value of the Date object. The parameter is a
string representing the number of milliseconds since
midnight 01/01/1970
10.Explain about events in Javascript?
EVENTS:-
JavaScript is an event driven system nothing happens unless it is initialised by event outside the script. An
event is any change that the user makes to the state of the browser. JavaScript event handling can be quick
a complex issue. Different manufactures have implemented their own ways of capturing & handling events.
Internet explorer has a large set of complicated but useful routines, but these lacks platform independent.
The original set of event handlers appeared in Netscape to and was broadly replicated in IE-3 and is available
in all browsers which support JavaScript.
Not all objects can create all events, some HTML objects such has paragraphs & headings can't create any
events. Not all events need handling; some can be ignored if they are not relevant. Where an event from a
user lead to some action from a script, you will need to implement an event handler. Event handlers are
JavaScript functions which you associate with an HTML element as part of its definition in HTML source
code. The names of event handlers are not case sensitive, onload, onLoad, ONLOAD represents exactly the
same thing. The following are the more common JavaScript events.
Events Handler Description

Blur onblur The input focus is moved from the object
change onchange The value of a field in a form has been changed by the user entering
or deleting data
click onclick The mouse is clicked over an element of a page
dbclick ondbclick A form element or a link is clicked twice in rapid succession
dragdrop ondragdrop A element is dragged with a mouse & dropped on to the browser
focus onfocus Input focus is given to an element the reverse of the blur
keydown onkeydown A key is depressed but not released
keypress onkeypress A key is pressed
keyup onkeyup A depressed key is released
load onload The page is loaded by the browser
mousedown onmousedown The mouse button is depressed
mousemove onmousemove The mouse is moved
mouseout onmouseout The mouse pointer moves off an element
mouseover onmouseover The mouse pointer is moved over an element
mouseup onmouseup The mouse button is released
move onMove A window is moved maximised or restored either by the user or by
a script
resize onresize A window is resized by a user or by a script
submit onsubmit A form is submitted
unload onunload The user leaves the webpage
The list of the object & event handlers which are supported by JavaScript are
Object Event handlers
Window onload, onunload, onblur, onfocus
Link onclick, onmouseout, onmouseover
Area onmouseout, onmouseover
Image onabort, onerror, onload
Form onreset, onsubmit

Text onblur. onchange, onfocus, onselect

Textarea onblur, onchange, onfocus, onselect
Password onblur, onchange, onfocus, onselect
Button Onclick
Reset Onclick
Submit Onclick
Radio Onclick
Checkbox Onclick
Select onblur, onchange, onfocus
Example :
<html>
<head>
<title>
Handling Events
</title>
</head>
<body onload=”shoeLoaded()” onUnload=”sayGoodbye()”>
<h1>Handling Events</h1>
<p><a href=”#” onmouseover=”mouse()”>A hyperlink</a></p>
<form>
<input type=”button” value=”clickme” onClick=”clicked()”
onmouseover=”mouse()”>
</form>
<script language=”javascript”>
function showLoaded(), alert(“the page has loaded”); -
function sayGoodbye(), alert(“goodbye thanks for visiting”); -
function clicked(), alert(“you clicked the button”); -
function mose() , alert(“the mouse is over the link”);-
</script>
</body>
</html>
Important Questions?

UNIT-V
Dynamic HTML with JavaScript
1.Explain about Data validation?
Data validation:
Validation is simply the process of ensuring that some data might be correct data for a particular application
that is data validation is processes of ensuring a user submit only the set of character which you required. It
is not the process of ensuring that that is in any way accurate. It would be nice to validate data that is
entered into the form at the client. Existing techniques rely upon the use of server scripting and very robust.
There is a delay between the user and entering data, the script performing validation, and an error
conformation being returned to the user. Many potential errors such as entering a space or character other
than a digit or a letter into a username should be spotted at the client and dealt with. Generally the RegExp
class provides everything that we need to start validating data.
<html>
<head><title>Data validation</title></head>
<body>
<form method=”post” action=”adduser.php” onSubmit=”return Validate()”>
<tble border=0>
<tr>
<th>Enter your name</th>
<td><input type=”text” maxlength=24 id=”name”></td>
</tr>
<tr>
<th>Your age</th>
<td><input type=”text” mxlength=3 size=3 id=”age”></td>
</tr>
</table>
<input type=”submit” value=”submit”>
</form>
<script language=”javacript”>
function validate()
{
Var valid=false;
Var name=document.getElemenById(“name”).value;
Var age=document.getElementById(“age”).value;
Var name_re=new RegExp(“*A-Z][a-z A-Z ‘-.++$”,”g”);
Var age_re=new RegExp(“^*\\d++$”,”g”);
If(name.match(name_re))
{
If(age.match(age_re)) valid=true;
else alert(“age do not match”);
}
else alert(“name does not match”);
return valid;
}
</script>
</body></html>
2. Write about “opening a new window” using javascript?
Opening a new window:
 The majority of the JavaScript coding will be based around the use of windows. The typical piece of
Microsoft windows software uses the multiple document interface (MDI) structure. The application
has a single global frame and new windows are opened they appear inside that frame.
 The application frame is said to be parent of all of the internal frames. Web browsers are based
around a different model in which each new window is independent of the application from which it
was lunched.

 The main benefit is that because windows are independent of each other, any windows spawned
from our code can be made to look and act totally different from the rest of the application.
some of the main properties and methods from the window object are
open(“URL”, “name”) close()
toolbar = [ 1 | 0 ] location = [ 1 | 0 ]
directories = [ 1 | 0 ] status = [ 1 | 0 ]
menubar = [ 1 | 0 ] scrollbars = [ 1 | 0 ]
resizable = [ 1 | 0 ] width = pixels
height = pixels
A new window can be opened which contains a URL defined and attribute of that windows can be tailored to
suit the application. The URL and window name are not optional, although the URL can be replaced with
empty quotes if you need to open a blank window. The following rules are better to follow when opening a
new window to reduce the chances of seeing random behaviour.
1. The parameter list must be inside a single set of single quotes.
2. There cannot be line brakes or spaces in the parameter string.
3. Do not have any space between the parameters.
4. Do not forget the commas between parameters
Example
<html>
<head>
<script language=”java script”>
function load(url)
{
var next=url;
newwin=open(“url”,”newwin”,”status=0,toolbar=0,resize=0,width=28,
heigt=137”);
}
</script>
</head>
<body>
<p>
<a href=”” onclick=”load(‘/pic.gif’)”>Show to next page</a>
</p>
</body>
</html.
3.Explain about message and confirmations?
Messages and confirmations
Java script provides three built-in window types. They can be used from application code. They are useful
when we need information from visitors to your site.
prompt(“string”, “string”)
This command displays simple window that contains a prompt and a text field in which the user can enter
data. The method has two parameters: A text string to be used as the prompt and a string to use as a default
value.
confirm(“string”)
This shows a window containing a message and two buttons: ok and cancel. Selecting cancel will abort any
pending action, while ok will let the action proceed.
alert(“string”)
This displays the text string and ok button. This may be used as a warning or to provide a farewell message
as visitors leave your site.
Example
prompt(“Enter our name”,””);
confirm(“Are you sure”);
alert(“A warning”);
4.Explain about Status bar in javascript?

The status bar:
Web developers can use the browser can use the browser status bar as part of the site. Text strings can be
displayed in the status bar. The status bar usually displays helpful information about the operations of the
browser. Anything that can be done in the status bar can be done using DHTML techniques.
Example
<html>
<head>
function init()
{
self.status = “my message”;
}
</script>
</head>
<body onload=”init()”>
<h1> And the status bar says ……………..</h1>
</body>
</html>
5.Explain about frames in javascript?

Writing to a different frames
 If frames and JavaScript re combined on the same page, a site can begin to develop some interesting
interactive aspects. Often developing a site with links in one frame and output in another provides
easy moment through complex data.
 The simple colour picker going to build here has two frames. The upper one contains a form which is
used for data gathering; the lower frame shows the result of the colour selection but has been
directly created by JavaScript code.
 The whole page is built around a simple frameset. When two pages is initially loaded it displays the
form in the upper window and an empty HTML page in the lower window. The code for the frame set
is
<html>
<head><title> color picker </title></head>
<frameset rows = “40%,*” >
<frame name = “topone” src = “cols.html”>
<frame name = “botone” src = “blank.html”>
</frameset>
</html>
Here is the code for the bottom frame which holds balnk.html
<html>
<head><title></title></head>
<body></body>
</html>
The top frame consist cols.html and it uses an external file to hold the JavaScript code picker.js and is called
from the script tag. The JavaScript is loaded by the browser but is not run until the onClick() action of the
button is triggered
<html>
<head><script language = “javascript” src = “picker.js” ></script></head>
<body bgcolor=”white” text=”red”>
<h1 align=”center”>color picker</h1>
<form>
<table align=”center” cellpading=5>
<tr>
<td colspan=4 align=”center”><h2>enter color value in boxes</h2></td>
</tr>
<tr>
<td><h3>background color</h3></td>
<td><input type=”text” size=16 name=”bgcol” value=”white”></td>
<td><h3>text color</h3></td>
<td><input type=”text” size=16 name=”fgcol” value=”black”></td>
</tr>
<tr>
<td colspan=2 align=”center”>
<input type=”showit” onClick=showIt()”>
</td>
<td colspan=2 align=”center”>
<input type=”reset” value=”resetIt()”>
</td>
</tr>
</table>
</form>
</body>
</html>
The code which is stored in picker.js is

function showIt()
{
var topbox=document.forms[0].elements;
var bottombox=parent.frames*‘botone’+.document;
var bg=topbox.bgcol.value;
var fg=topbox.fgcol.value;
bottombox.open();
bottombox.write(“<body bgcolor=”+bg+”text=”+fg+”>”);
bottombox.witeln(“<h1>here it shows results</h1>);
bottombox.writeln(“</body>”);
bottombox.close();
}
6.Explain about Rollover Buttons?
Rollover Buttons
 The most common usage of a dynamic HTML is the image rollover. This technique is used to visual
field back about the location of the mouse curser by changing the images on the page has the mouse
moves over them.
 This is a highly effective technique where images are used as hyperlinks or where an image map is
being used.
 The JavaScript rollover is far simple because it uses two image files which it swaps between as the
mouse is moved. One image is created for the inactive state when the mouse is not over it. A second
image is created for active state when the mouse is placed over it.
<html>
<head>
<title>rollover button</title>
<script language = “javascript” src = “rollover.js”></script>
</head>
<body>
<h1>Demonstrating the mouse over effect</h1>
<a href = “#” onmouseout=“myMouseOff(‘top’)”
onmouseover=“myMouseOn(‘top’)”>
<img src = “top_off.gif” width=60 height=37 name = “top”>
</a>
</body>
</html>
Rollover.js
function myMouseOff(n)
{
document.images*n+.src = “top_off.gif”;
}
function myMouseOn(n)
{
document.images*n+.src = “top_on.gif”;
}
Whenever the curser passes over the image onmouseOver calls a JavaScript function myMouseOn which
changes the file associated with the src value of the document image object named top to top_on.gif.
Whenever the curser moves away from the image onMouseOut calls a JavaScript function myMouseOff
which change the file associated with the src value of the document image object named top to top_off.gif
7.How can you create moving images in javascript?
Moving images
It is also possible to move the images from one location to the other with the help of the JavaScript. Unlike
rollover buttons moving images around the screen is pretty simple. The following example accomplishes the
task. In fact this is not an image moving at all, that is the just the effect. What is actually moving is a layer of
content. The example flies a logo into the left of the screen five times before positioning it in the centre of
the screen. Images (layers) can move around repeatedly but doing so takes up processor cycles. It is more
user-friendly if your images only move for a restricted amount of time, such as when the webpage is first
loaded or when the user specifically triggers an event
<html>
<head>
<title>moving on image </title>
var count; var pos; var obj;
function init()
{
count=0;
obj=document.getElementById(“logo”).style;
pos=parseInt(obj.left);
flyLogo();
}
function flyLogo()
{
obj=document.getElementById(“debug”).innerHTML=
(“<p> the tmage is now

at”+pos+”</p>”);
if(count<5)
{
if(pos==100)
{
count++;
pos=100;
}
pos-=50;
obj.left=pos;
setTimeOut(‘flyLogo()’,500);
}
else obj.left=200;
}
</script>
</head>
<body onLoad = “init()”>

<h1> moving an image</h1>
<div id = “logo” style = “top:60;left:1000;position:absolute;”>
<img src = “logo.gif”>
</div>
<div id=“debug” style = “tp:100; left:10; width:80%; position:relative;
background:pink”></div>
</body>
</html>
 The first layer contains an image which is position off the right at 1000 px. This will mean that when
the page is loaded the image is not visible, and the image gradually appearing and moving towards
the left. The second division is initially empty. It stretches across the most of the screen.
 When the page loads init() method is called to initialize the global variables which the rest of the
script is using. The content of object variable is the style properly of ‘logo’ division. Whenever the
flyLogo() is called, it starts by printing the position the image in the second division. Having printed
the location of the image, the function checks the counter.
 If counter is equal to ‘five’ then the left edge of logo is placed at pixel ‘200’ and no more processing is
performed. If counter<5 the logo will be moved by repositioning it 10 pixels to the left of its current
location. If the left hand side of the layer is at pixel ‘50’ then the layer repositioned to pixel ‘1000’.
8.How can you download multiple pages in single download?
Multiple pages in a single down load
 DHTML open up some interesting possibilities. One that is fairly obvious, but rarely used, is having
several pages in a single down load. Instead of using a separate file for each page, place each page of
content in a separate layer and switch between those layers.
 This technique will not work if the layers have too much content or too many images, simply because
the overhead of downloading the page will be too great. It also will not work well if visitors to your
site are unlikely to want to see all of the pages.
 However, where most of your data is text based and where users are going to want to see all of that
information, this is a good trick. It will also work well as a way of splitting a single large document
into several screens of data so that users do not have to scroll up and down.
<html>
<head>
<script language = “javascript”>
var active=0;
function changeLayer(now)
{
document.getElementById(“content”+active).style.visibility=”hidden”;
document.getElementById(“content”+now).style.visibility=”visible”;
active=now;
}
</script>
</head>
<body>
<div id= “menu” style= “top:5;left:5; visibility:visible; position:absolute;
width:90%” >
<p><a href = “#” onclick = “changeLayer(0)”>one</a></p>
<p><a href = “#” onclick = “changeLayer(1)”>two</a></p>
<p><a href = “#” onclick = “changeLayer(2)”>three</a></p>
</div>
<div id = “content0” style= “top:60;left:20;visibility:visible;position:absolute;”>
<h1>A Test Header</h1>
<p>here is some text</p><hr>
</div>
<div id = “content1” style = “top:60;left:20;visibility:hidden;position:absolute;”>
<h1>Another Test Header</h1>
<p>here is some more text</p><hr>
</div>
<div id = “content2” style = “top:60;left:20;visibility:hidden;position:absolute;”>
<h1>Yet Another Test Header</h1>
<p>Here is yet more text</p><hr>
</div>
</body>
</html>
 The page contains four divisions or layers. The first is a menu layer which holds three hyperlinks. Each
link points to a dummy page. The all links use the same event handler.
 When onclick occurs they call the changeLayer() routine using the number of the layer that is to be
displayed as a parameter. The other layers are all content holders.
 These are all positioned in the same place but only one content layer is visible, the other two are
hidden. Divisions have a visibility property which accepts the values visible and hidden. These can be
set either directly in HTML or through java script code.
 The routine changeLayer whenever called it hides the current layer and displays the new layer which
is given as its parameter and then makes it as current.
9.Explain about “A text only menu System” in java script?
A text only menu System
The most common use of JavaScript is the site menu. There are many ways of providing navigation but
allying a global menu to hyperlinks is one of the most popular. By combining the techniques from rollovers
and layer swapping we get a simple, fast and effective menu System.
The following code demonstrates how to use layers in a rollover, changing the formatting of the page as the
mouse moves about.
<html>
<head>
<script language = “javascript”>
function highlight(id)
{ document.getElementById(“menua”)
style.visibility = “hidden”;
document.getElementById(“menu” + id + “b”).style.visibility = “visible”;
}
function unHighlight(id)
{ document.getElementById(“menu” + id + “b”).style.visibility = “hidden”;
document.getElementById(“menua”).style.visibility = “visible”;
}
</script>
</head>
<body>
<div id = “menua” style = “top: 5; left: 5; visibility = “visible”; position: absolute;
z-index: 5;” >
<p>
<a href=”#” on mouse over=”highlight (0)” onmouseout=”unhighlight (1)”>
one
</a>
</p>
<p>
<a href=”#oneMouseover=”highlight (1)” onMouseout=”unhighlight (1)”>
two
</a>
</p>
<p>
<a href=”#oneMouseover=”highlight (2)”oneMouseout=”unhighlight (2)”>
three
</a>
</p>
</div>
<div id=”menu0b” style = ”top: 5; left: 5; visibility: hidden; position: relative;
z-index:5”>
<p>one</p><p>two</p><p>three</p>
</div>
<div id=”menu1b” style=”top: 5; left: 5; visibilioty: hidden; position: relative;
z-index:5”>
<p>four</p><p>five</p><p>six</p>
</div>
<div id=”menu2b” style=”top: 5; left: 5; visibilioty: hidden; position: relative;
z-index:5”>
<p>seven</p><p>eight</p><p>nine</p>
</div>
</body>
</html>
 The html page has four divisions the main one is ‘menua’ which will be displayed when the menu is
active. The layer is positioned at pixel 5, 5. Inside div there are hyperlinks which, in this example, go
now here.
 Each hyperlink is a piece of text but because they are links the onmouseover and onmouseout events
still work. The remaining three layers are all hidden.
 As the mouse moves over the menu these layers will be made visible and hidden. Each submenu is
basically identical to the main menu. In the script the highlight() function hides the default menu and
makes one of the other layers visible.
 The unHide( ) function reverses this by hiding the visible layer and making the default menu visible.

HTML VIVA QUESTIONS AND ANSWERS

1. What is HTML ?
HTML means Hyper Text Mark-up Language. The global publishing format of the Internet is HTML
2. Who developed HTML ?
Tim Berners – Lee
3. What are web browsers ? Give some examples
Web browsers are softwares which displays HTML documents. Eg: Internet Explorer, Fire Fox, Google Chrome,
Netscape Navigator
4. What is W3C ?
Worlod Wide Web Consortium (W#C) is a group of organizations and individuals which creates standards for web
page
5. What is Hyper Text ?
Hyper text adds diversions to a piece of text
6. What is MIME ?
Multipurpose internet Mail Extensions
7. What is tag ?
A tag is a format name surrounded by angle brackets.
8. What is the structure of HTML document ?
A html document consists two sections. Head & Body. Head consists control information and body consists
content of the page
9. What is the purpose of <title> tag ?
The content of <title> tag is displayed at the top of the browser window and mostly it is indexed by a search
engines
10. What is <p> tag ?
Paragraph tag which is used to create a block
11. How can you align paragraphs ?
By using align attribute which takes values as left, right, center. Default is left
12. What are Heading tags ?
Html has 6 levels of headings <h1> to <h6>. Largest heading is <h1> and smallest is <h6>
13. What is <hr> tag ?
Horizontal ruler tag which places a horizontal line across the screen
14. What is <basefont> tag ?
The <basefont> tag defines the font face, size and colour to be used in the HTMl document and may be included in
the head section
15. What is the purpose of <font> tag ?
By using <font> tag we can change the face, size and colour of any piece of text
16. What is <b> tag ?
Bold tag, used to make text in bold face
17. What is <i> tag ?
Italig tag, use to make a portion of text in Italics
18. What is <tt> tag ?
Type writer Text tag, which renders a text using a monospaced font
19. What is <sub> & <sup> ?
<sub> is subscript tag, renders text as subscript
<sup> is superscript tag, renders text as superscript
20. What is <br> ?

Break tag, which forces a line break
21. What is <pre> tag ?
Pre-formatted tag, which dosnt convert line breaks, tabs and multiple white spaces into a single space
22. What are escape sequence characters ?
Escape sequence chartacters starts with & and ends with ; which are used to display the control sequence
characters (< for < and > for >)
23. What is hyperlink ?
Hyperlinks are clickable text or images which renders a new page
24. How can you create hyperlinks ?
Anchor tag (<a>)is used to create hyperlinks
25. What is the mandatory attribute of <a> tag ?
Href(hypertext reference) is the compulsory attribute of anchor tag which takes value as the URL of another page
26. What is URL ?
Uniform Resource Locator
27. How many types of lists are there ?
HTML provides 3 types of lists
1) Unordered list(bulleted list)
2) Ordered list(Numbered list)
3) Definition list
28. What is unordered list ?
The basic unordered list has a bullet in front of each list item, An unordered list is created using <ul> tag
29. What are the attributes of <ul> tag ?
<ul> tag consists one attribute that is type which takes value as disc, square and circle
30. What is <li> tag ?
<li> is list item tag. The ordered and unordered lists are made up of set of <li>’s
31. What is an ordered list ?
An ordered list has a number instead of a bullert in front of each list item. It is created using <ol> tag
32. What attributes are used in <ol> tag ?
Type and start are attributes that are used with <ol>tag. Type takes value as 1 or a or A or i or I. Start takes a
number as it value
33. What is definition list ?
Element in the definition lists are either items being defined or their definitions. It is created using <dl> tag
34. What is <dt> tag ?
Definition term tag mark items whose definitions will be provided by the next <dd>
35. What is <dd> tag ?
Definitions of <dt>’s are enclosed within these tags and it is called data definition tag
36. How can you include images as a background of a web page ?
By using background attribute of <body> tag. Which takes value as URL
37. How can you include inline images in a web page ?
By using <img> tag
38. What is the mandatory attribute of <img> tag ?
“src” (source) which takes value as URL
39. What are the other attributes of <img> tag ?
Width, height, align, usemap, lowsrc
40. What is lowsrc attribute of <img> tag ?
Gives the URL of low-resolution image
41. What is the purpose of usemap attribute if <img> tag ?
To create clientside image maps
42. What is an Image map ?

Image map is a large image which provides different hyperlinks by clicking different areas on that image
43. How many types of Image map programs are there ?
Two. Client-side and serve-side
44. How can you create client-side image map ?
By using usemap attribute of <img> and <map> tag
45. What is the required attribute if <map> tag ?
“name” attribute whose value will be identical to that of the value given to the “usempa” attribute of <img> tag.
46. What tags can be includes in between the starting and ending tags of <map> tag ?
<area> tag
47. What are the required attributes of <area> tag ?
Shape – takes value as either circle or rect or polu or default
Href – it is the destination of the link
Cords- each shape is defined by coordinates
48. What is a table in web page ?
Tables in HTML allow to organize information in a row and colums format
49. How can you create tables ?
By using <table>,<tr>,<td>,<th> tags
50. What is cellpadding ?
Sets the spacing between cell walls and cell contents. Takes value as pixel value
51. What is cellspacing ?
Gives the distance between cells
52. What is colspan ?
Indicates how many cell columns of the table this cell should span
53. What is rowspan ?
Indicates how many rows of the table this cell should span
54. In which tag we use colspan and rowspan attributes
<td> tag
55. How can you include multimedia objects in a web page ?
By using <object> tag
56. What are the attributes of <object> tag ?
Classid, height, width
57. How can you send command line arguments to an object ?
Bu using <parm> (parameter) tag
58. What are the required attributes of <param> tag ?
Name and value
59. What are applets ?
Applets are small java applications
60. How can you include applets in HTML document?
By using <applet> tag
61. What are the required attributes of <applet> tag ?
Code, width and height
62. What are frames ?
Frames give us the ability to split browser window into vertical or horizontal or both sections so that we load
different pages in different sections
63. How can you create frames ?
By using <frameset> and <frame> tags
64. What are the attributes of <frameset> tag ?

“cols” and “rows” which sets the number of columns or rows in the frameset. They take value either in pixel value
or percentage
65. What are the attributes of the <frame> tag ?
“name” and “src”. “name” sets a name to a frame and “src” specifies the url of the frame document
66. What is <iframe>
Inline frame. It is used to embed within a document the content of other document.
67. What attributes we use in <iframe> tag ?
“name” and “src”. “name” sets a name to a frame and “src” specifies the “url” of the frame document
68. What is a form ?
Forms are used to add an element of interactivity to a web site. They are usually used to send information back to
the server.
69. How can you create a form ?
By using <form> tag
70. What are the attributes of a <form> tag ?
“action” and “method”. “action” attribute specifies the URL of the CGI script that will be used to process the data
and “method” attribute takes value as “get” or “post”
71. What is “get” and what is “post” ?
When get is used data is included as part of the URL and when “post” is used it encodes the data within the body
of the message. “post” is used to sent large amount of data.
72. What is a “CGI” script ?
Common Gateway Interface Script.
73. Name some common “CGI” scripting languages ?
Perl, PHP and python
74. How can you include HTML control or input widgets in a form ?
By using <input> tag.
75. What are the attributes of <input> tag ?
“type”, “name”.
76. What values can we assign to a type attribute ?
Text, password, checkbox, radio, submit, rest, button, image
77. What is <select> tag ?
This tag encloses a set of options.
78. What tags can we include in between the starting and ending tags of <select> tag ?
<option> tag. It specifies a list item in the list of a select control
79. What is <textarea> tag ?
It create a text area into which the user can enter large text.
80. What are the attributes of <textarea> tag ?
Rows, cols and readonly. Rows specifies the number of rows in the control and cols specifies the number of
columns. Readonly is a standalone attribute and it indicates the content may not be modified
81. What tags can we include in head section of a HTML document ?
<title>, <base>,<link>,<meta>
82. What is the purpose of <base> tag and what are its attributes ?
This tag is used to enforce the relative li9nks. Attributes are “href” which holds and “URL”
83. What is the use of <link> tag ?
It is used to allow other documents to be linked in the current document. It is mainly used to include external style
sheets.
84. What is <meta> tag ?
Any information which describes the whole document should be included using this tag.
85. What is a CSS ?
Cascading Style Sheet. Which is a set of formatting instructions that can be applied to a piece of text

rride.
86. How many types of CSS are there ?
3. Inline, Internal and External
87. What is the meaning of cascading ?
This means that the styles can be override. Inline styles can be override by internal and internal can be override by
external
88. What are Inline styles ?
An Inline style allows you to change the behaviour of an individual HTML tag.
89. How can you create and Inline style ?
By including style attribute to a tag.
90. What are Internal styles ?
Internal styles can be used to define a tag properties that are applied globally through out a document
91. How can you create Internal styles ?
By using <style> tag in head section. The declaration has the name of the element which is being changed and
then definition placed inside the braces
92. What are external style sheets or including style sheets ?
External style sheets are stored separately in a file and can be applied to any number of documents
93. How can you include an external style sheet in a document ?

By using <link> tag in the head section.
94. What is a style rule ?
A style rule has two parts; a selector and a set of declarations. Selector is a link between the rule and the HTML
tag. The declaration has two parts. A property and a value and they are separated by colon and the declaration
ends with a semicolon
95. What are style classes ?
A style class is a new style that we can apply various elements. These are called named styles.
96. What is an anonymous class ?
By creating anonymous class we can apply a piece of formatting to different elements.
97. What is a <div> tag ?
By using <div> tag we can create a block of elements so that we can format all the elements at one place
98. What are layers ?
Layers lets us to use images as backgrounds and to place further images and text over them.
99. How can you create layers ?
By using z-index property in the style attribute of a tag.
100. How can you position a division in a page ?
By using position property in the style attribute of a <div> tag

LAB Programs
PROGRAM 1

<html>
<head>
<title> body and pre tag </title>
</head>
<body text="red" bgcolor="yellow" background="Desert.jpg">
This is an Illustration of body tag with its properties
<pre>
This text uses
pre tag and preserves
nextline and spaces </pre>
This text doesnt uses
pre tag so doesnt preserves
nextline and spaces.. everything
will be printed in the same line
</body>
</html>
PROGRAM 2

<html>
<title> Font tag Example </title>
<body>
<font face="arial" size="1" color="blue"> WELCOME </font> <br>
<font size="2" color="cyan"> WELCOME </font> <br>
<font size="3" color="red"> WELCOME </font> <br>
<font size="4" color="yellow"> WELCOME </font> <br>
<font size="5" color="green"> WELCOME </font> <br>
<font size="6" color="brown"> WELCOME </font> <br>
<font size="7" color="pink"> WELCOME </font> <br>
<font size="20" color="gray"> WELCOME </font> <br>
</body>
</html>
PROGRAM 3

<html>
<head>
<title> Illustrating comment, h1...h6 and div tags </title>
</head>
<body>

<div style="color:#00ff00">
<h1 align="center"> This is h1 tag text with center aligned </h1>
<h2 align="left"> This is h2 tag text with left aligned </h2>
<h3 align="right">This is h3 tag text with right aligned </h3>
</div>
<h4> This is h4 tag text without alignment</h4>
<h5> This is h5 tag Text without alignment </h5>
<h6> This is h6 tag text without alignment </h6>
</body>
</html>
PROGRAM 4

<html>
<head>
<title> Text Tags </title>
</head>
<body>
<center>
<h1 align="center">To illustrate text formatting tags </h1>
<hr color="red">
<P> <marquee behavior="alternate"> This is an alternate Marquee text
</marquee>
<p> This is <i> italized </i> </p>
<p> This is <u> underlined </u> </p>
<p> This is <b> bold </b> </p>
<p> This is <em> emphasized </em> </p>
<p>This is <Strong> Strong Text </strong> </p>
<p> This is <s> striked text </s> </p>
<p> This is <code> computer code </code> </p>
<p> This is <sup> superscript </sup> code </p>
<p> This is <sub> subscript </sub> code </p>
<p> This is <big> big text </big> </p>
<p> This is <small> small text </small> </p>
</center>
</body>
</html>
PROGRAM 5

<html>
<head>
<title> Order List tag </title>
</head>
<body>
<h3 align="center" style="color:red">To illustrate ORDER list tags</h3>
<hr COLOR="RED">
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Uppercase Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
/ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
PROGRAM 6

<html>
<title> Unorder List </title>
</head>
<body>
<h3 align="center"> To illustrate unorder list tags </h3>
<hr color="red">
<h4>Disc bullets list:</h4>

<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
PROGRAM 7

<html>
<head>
<title> Image Tag </title>
</head>
<body>
<h3 align="center" style="color:red"> To illustrate image tags</h3> <hr>
<p>
<img src="flower.bmp" align="right" height="100" width="100"/>
This image is right aligned with the text
</p>
<br><br><br><br><hr>
<p>
<img src="flower.bmp" align="left" height="100" width="100"/>
This image is left aligned with the text
</p>
This image is center aligned with the text.
<img src="flower.bmp" align="middle" height="100" width="100"/>
This image is bottom aligned with the text.
<img src="flower.bmp" align="bottom" height="100" width="100"/>
This image is top aligned with the text.

<img src="flower.bmp" align="top" height="100" width="100"/>
</body>
</html>
PROGRAM 8

<html>
<head>
<title> Table tag </title>
</head>
<body>
<center>
<h4>Table with border, vertical headers, cellpadding and cellspacing</h4>
<table border="10" cellpadding="10" cellspacing="10">
<tr>
<td></td>
<th>Name</th>
<th>Age</th>
<th>Telephone</th>
</tr>
<tr>
<th>Student 1</th>
<td>Radha Desai</td>
<td>20</td>
<td>123 456 789</td>
</tr>
<tr>
<th>Student 2</th>
<td>Geetha Bharadwaj</td>
<td>21</td>
<td>267 891 281</td>
</tr>
</table>
<hr>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Radha</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<hr>
<h4>Cell that spans two rows:</h4>

<table border="1">
<tr>
<th>First Name:</th>
<td>Radha</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</center>
</body>
</html>
PROGRAM 9

mainframe.html
<html>
<head>
<title> Frame tag </title>
</head>
<head>
<frameset cols="20,60">
<frame src="f1.html">
<frame src="f2.html" name="main">
</frameset>
</frameset>
</head>
</html>
f1.html
<html>
<head>
<title> f1.html </title>
</head>
<body>
<h3> States of karnataka </h3>
<a href="gul.html" target="main"> gulbarga<br></a>
<a href="bid.html" target="main"> Bidar<br> </a>
</body>
</html>
f2.html
<html>
<head>
<title> f2.html </title>
</head>
<body>
<h1> Click on any state to get a welcome message </h2>
</body>
</html>
gulbarga.html
<html>
<head>
<title> Gulbarga.html </title>
</head>
<body bgcolor="green">
<h1> Welcome to gulbarga </h1>
</body>
</html>
bidar.html
<html>
<head>
<title> bidar.html </title>
</head>
<body bgcolor="red">
<h1> Welcome to bidar </h1>
</body>
</html>
PROGRAM 10

<html>
<head>
<title> form tag </title>
</head>
<body>
<center>
<h3 align="center">To illustrate form based tags</h3> <hr color="red">
<form action="">
<p>This is a text box to enter any text.<input type="text" >
<p>This is a text box to enter password.<input type="password" >
<p>This is a text area to enter large text<textarea> </textarea>
<p>This is a button.<input type="button" Value="Click" >
<p><b><u>Radio Options</u></b><br>
<input type="radio" name="y" checked> yes
<input type="radio" name="n" checked> no </p>
<p><b><u>Checkbox Options</u></b><br>
Sunday<input type="checkbox" checked >
Monday<input type="checkbox" >
Tuesday<input type="checkbox" >
</p>
<p><b><u>Menu driven options </u></b>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select></p>
</form>
</center>
</body>
</html>
PROGRAM 11

<html>
<head>
<title> span tag </title>
<style type="text/css">
span.blue{ color:lightskyblue; font-weight:bold;}
span.green{ color:darkolivegreen; font-weight:bold;}
</style>
</head>
<body>
<p align="center">
<font size=10>
my mother has <span class="blue"> light blue </span> eyes and
my father has <span class="green"> dark green </span> eyes.
</font>
</p>
</body>
</html>
PROGRAM 12

<html>
<head>
<title> css demo </title>
<style type="text/css">
body { background-color:red;}
h1 { color:orange; text-align:center;}
p { font-family: "Times new roman "; font-size: 20px;}
</style>
</head>
<body>
<h1> CSS EXAMPLE </h1>
<p> This is a paragraph </p>
</body>
</html>
PROGRAM 15

<html>
<head>
<title> embedding multimedia </title>
</head>
<body>
<center>
<h1> Here is a video embedded on this webpage </h1>
<br>
<object data="Wildlife.wmv" type="video/msvideo" height=200 width=200
hspace=200 vspace=200>
</object>
</center>
</body>
</html>

WT PDF

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

WT PDF

Hochgeladen von

Copyright:

Verfügbare Formate

III Bcom WEBTECHNOLOGY SEMESTER-VI

RAO’S DEGREE COLLEGE

RAYALASEEMA UNIVERSITY, KURNOOL

Study material by D.Swetha 1 Rao's Degree college, Yemmignoor

Study material by D.Swetha 2 Rao's Degree college, Yemmignoor

Study material by D.Swetha 3 Rao's Degree college, Yemmignoor

 Facilitates access to different sources of information, which is continuously updated

Advantages of Bus Topology

Study material by D.Swetha 4 Rao's Degree college, Yemmignoor

Advantage of Ring Topology

Advantages of Star Topology

Study material by D.Swetha 5 Rao's Degree college, Yemmignoor

Advantage of Mesh Topology

• Installation is complex as each node is connected to every node.

Advantages of a Hybrid Topology

Study material by D.Swetha 7 Rao's Degree college, Yemmignoor

Study material by D.Swetha 8 Rao's Degree college, Yemmignoor

<!DOCTYPE...> This tag defines the document type and

Structure of Basic HTML Document

Study material by D.Swetha 11 Rao's Degree college, Yemmignoor

Study material by D.Swetha 12 Rao's Degree college, Yemmignoor

Ex: align = “left |center |right”

<p align = “left”>this is a paragraph</p>

Ex:<hr width = “300”/> or <hr width = “75%”/>

Ex:<hr size “10”/>

Ex :< hr align = “center”/>

Note: hr is an empty tag.

Study material by D.Swetha 13 Rao's Degree college, Yemmignoor

 links to a specific part of either current page or another page

Study material by D.Swetha 14 Rao's Degree college, Yemmignoor

 alt -- use this attribute to specify text to be displayed in place of an

Study material by D.Swetha 18 Rao's Degree college, Yemmignoor

span. Set to positive integer

Study material by D.Swetha 19 Rao's Degree college, Yemmignoor

15.Explain about Frames in detail?

Study material by D.Swetha 23 Rao's Degree college, Yemmignoor

Short Answer Type(4 Marks)

Study material by D.Swetha 24 Rao's Degree college, Yemmignoor

4.Imported Style Sheet

Study material by D.Swetha 26 Rao's Degree college, Yemmignoor

properties and values in styles

Study material by D.Swetha 28 Rao's Degree college, Yemmignoor

Study material by D.Swetha 29 Rao's Degree college, Yemmignoor

 block elements where overflow has a value over than visible

1.What CSS? What are the different Style in HTML?

Study material by D.Swetha 30 Rao's Degree college, Yemmignoor

Study material by D.Swetha 31 Rao's Degree college, Yemmignoor

 Scripts require neither a main function nor an exit condition.

Study material by D.Swetha 32 Rao's Degree college, Yemmignoor

3.Explain about variables in Javascript?

4.What are the Data types in JavaScript?

Study material by D.Swetha 34 Rao's Degree college, Yemmignoor

Study material by D.Swetha 35 Rao's Degree college, Yemmignoor

Study material by D.Swetha 36 Rao's Degree college, Yemmignoor

code executed if condition is false

Study material by D.Swetha 38 Rao's Degree college, Yemmignoor

Study material by D.Swetha 39 Rao's Degree college, Yemmignoor

Study material by D.Swetha 43 Rao's Degree college, Yemmignoor

Study material by D.Swetha 44 Rao's Degree college, Yemmignoor

\s Match a white space character

Study material by D.Swetha 49 Rao's Degree college, Yemmignoor

resizable = [1|0] - should the new secondary window be resizable.

7.Explain about form object?