MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

(FEB 2023 – MAY 2023)

WEB TECHNOLOGY

VI SEMESTER

P a g e | 1 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

SYLLABUS
Lectures Tutorials Practical
Subject Code Subject Name
(Periods) (Periods) (Periods)
CS T63 WEB TECHNOLOGY 3 1 -
Course Objectives:
1. To learn and program features of web programming languages.
2. To understand the major components of internet and associated protocols.
3. To design an innovative application for web.
Course Outcomes:
On successful completion of this course
1. The students will get acquainted with client side and server side programming
languages for web.
2. They will understand the major components and protocols of internet application.
3. They will become capable of designing web services.
UNIT - I
Internet Principles and Components: History of the Internet and World Wide Web – HTML -
protocols – HTTP, SMTP, POP3, MIME, IMAP. Domain Name Server, Web Browsers and Web
Servers. HTML-Style Sheets-CSS-Introduction to Cascading Style Sheets-Rule-Features-
Selectors- Attributes. Client-Side Programming: The JavaScript Language- JavaScript in
Perspective-Syntax-Variables and Data Types-Statements-Operators-Literals-Functions-
Objects-Arrays-Built-in Objects-JavaScript Debuggers and Regular Expression.

UNIT - II
Server Side Programming: Servlet- strengths – Architecture - Life cycle - Generic and HTTP
servlet- Passing parameters- Server Side Include- Cookies- Filters. JSP- Engines-Syntax-
Components- Scriplets- JSP Objects-Actions-Tag Extensions- Session Tracking- Database
connectivity- Sql statements-J2EE - Introduction - Beans- EJB.

UNIT - III
XML: Introduction- Revolutions of XML-XML Basics – Defining XML Documents: DTD-XML
Schema-Namespaces – XFiles: XLink – XPointer - XPath - XML with XSL – XSL-FO-Parsing XML
using DOM-SAX-Integrating XML with database – Formatting XML on the web.

UNIT - IV
Multimedia and Web Application: Multimedia in web design, Audio and video speech
synthesis and recognition - Electronic Commerce – E-Business Model – E-Marketing – Online

P a g e | 2 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Payments and Security – N-tier Architecture. Search and Design: Working of search engines -
optimization- Search interface.

UNIT - V
Web Services: Introduction to Web Services, UDDI, SOAP, WSDL, Web Service Architecture,
Developing and deploying web services. Ajax – Improving web page performance using Ajax,
Programming in Ajax.
TOTAL PERIODS: 60

TEXT BOOKS
1. Deitel and Deitel, Goldberg, “Internet and World Wide Web – How to Program”,
Pearson Education Asia, 2001.
2. Uttam K.Roy, “Web Technologies”, Oxford University Press, 2012.
3. Rajkamal, “Web Technology”, Tata McGraw-Hill, 2001.
4. Ron Schmelzer, Travis Vandersypen, Jason Bloomberg, Madhu Siddalingaiah, Sam
hunting, Micheal D.Qualls, David Houlding, Chad Darby, Diane Kennedy, “XML and Web
Services”, Sams, Feburary 2002.
5. Eric Newcomer, “Understanding Web Services: XML, WSDL, SOAP, and UDDI”, Addison-
Wesley, 2002.

REFERENCE BOOKS
1. Phillip Hanna, “JSP 2.0 - The Complete Reference”, McGraw-Hill, 2003.
2. Mathew Eernisse, “Build Your Own AJAX Web Applications”, SitePoint, 2006.

P a g e | 3 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

UNIT-I

Internet Principles and Components: History of the Internet and World Wide Web –
HTML - protocols – HTTP, SMTP, POP3, MIME, IMAP. Domain Name Server, Web
Browsers and Web Servers. HTML-Style Sheets-CSS-Introduction to Cascading Style
Sheets-Rule-Features- Selectors- Attributes. Client-Side Programming: The JavaScript
Language- JavaScript in Perspective-Syntax-Variables and Data Types-Statements-
Operators-Literals-Functions-Objects-Arrays-Built-in Objects-JavaScript Debuggers and
Regular Expression.

P a g e | 4 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

2 MARKS

1. Define internet?
Network is an interconnection of systems to share data and information. Internet is network of
network or collection of heterogeneous networks.
The Internet is a global system that consists of millions of public, private, academic, business, and
government networks of local to global scope. It allows all the computers connected to it to exchange
information with one another.

2. Define Web site and web page?

A website is a set of related web pages that are addressed with a common domain name or IP
address. A website is hosted on a machine called web server, which should be accessible via a
network.
The web pages of a web site are accessed using URLs (Uniform Resource Locator). The web pages are
organized into a hierarchy. They contain hyperlinks that guide the visitors navigating the website.

3. What is meant by web applications?

Web applications are applications that are accessed via web browsers usually through networks. Web
applications run on a server called web server. Each web applications is identified by a Uniform
Resource Locator.

4. List types of web applications?

There are two types of web applications are
 Service oriented web application
 Presentation oriented web application

5. What is a service-oriented web application?

The service-oriented web applications implement web services and are typically coded using server-
side technologies such as CGI, JSP, ASP, etc.

6. What is a presentation-oriented web application?

The presentation-oriented web applications are usually clients of service-oriented applications. They
are coded in browser supported languages such as HTML, XML, JavaScript, etc. These applications
generate interactive web pages.

7. What is protocol?

P a g e | 5 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

A protocol is a set of rules or an agreement that specifies a common language that computer on a
network use for communication with other computers. It specifies on how the computer talk with
each other.
A protocol is a set of rules that define the syntax and semantics of the connection, communication, and
data transfer between two computing end-points.

8. Define proxy servers?

Proxy servers are related to firewalls prevents hosts on a network from making direct connections to
the outside world; a proxy server can act as a go-between. Thus a machine that is prevented from
connecting to the external network by a firewall would make a request for a web page from the local
proxy server instead of requesting the web page directly from the remote web server.

9. List the types of Internet servers?

 Mail servers
 Web servers
 FTP servers
 News server
 DNS servers

10. What is meant by web server?

Collection of web pages is stored in a computer for publishing is called web server. Any computer can
act as a web server if it is connected to the network. ISP (Internet Service Protocol) is used to connect
a system to network.

11. What are types of web server?

 Application server
 E-mail server
 Database server

12. What is meant by web browser? List out any four?

Web browser fetches a page from a web server by an http request. The request includes page address
of an http standard.
Some of the web browsers are: Mozilla Firefox, Google chrome, Internet explorer and Opera etc.

13. What is meant by web hosting?

A web hosting is a type of Internet hosting service that allows individuals and organizations to make
their own website accessible via the World Wide Web. Web hosts are companies that provide space
on a server they own or lease for use by their clients as well as providing Internet connectivity,
typically in a data center.

P a g e | 6 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

14. List out the services provided by the Internet?

 Electronic Mail
 World Wide Web
 FTP
 Telnet
 Gopher and Chat

15. What do you mean by World Wide Web?

World Wide Web (WWW) is a distributed system of inter linked pages that include text, pictures,
sound and other information. It enables easy access to the information available on the internet.
WWW is a repository of information (called resource) distributed all over the world, is defined as a
world-wide networks of networks.

16. List the elements of WWW?

 Client & server
 Web languages & protocols
 Web pages
 Home page
 Web browsers and Web sites

17. What is meant by HTML?

 HTML stands for Hyper Text Markup Language.
 It is a markup language for describing web documents (web pages).
 A markup language is a set of markup tags.
 HTML documents are described by HTML tags.
 Each HTML tag describes different document content.

18. Write the format of html program.

<HTML>
<HEAD>
<TITLE> This is the Title </TITLE>
</HEAD>
<BODY>
Type the body of the program
</BODY>
</HTML>

P a g e | 7 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

19. How do you make a graphic a link?

<A HREF="http://www.snowhawk.com/wildlife.html"> <IMG SRC="leopard.jpg" WIDTH="25"
HEIGHT="25" ALIGN="top" BORDER="0" ALT="link to wildlife"> </A>
20. Mention some text formatting tags?
 <p> </p> - is used for introducing various paragraphs.
 <br> - this tag is used for giving an empty blank line.
 HEADING TAGS - <h1> </h1> ….. <h6> </h6> is used to introduce various headings.
 <h1> is the biggest and h6 is the smallest heading tag.
 <HR> TAG – is used to draw lines and horizontal rules.
 <B>, <I>, <U> for bold, italic and underline respectively.

21. Explain about list tag?

Types of Lists
1. Unordered lists
2. Ordered lists

Unordered List:
It starts with <ul> and ends with </ul>
Attributes of Unordered lists

Type
TYPE = FILLROUND or TYPE = SQUARE

Example:
<UL TYPE = FILLGROUND>
<LI> CSE </LI>
<LI> IT </LI>
</UL>

Output:
 CSE
 IT

Ordered List (Numbering):

TYPE: Controls the numbering scheme to be used
TYPE = “1” will give counting numbers (1,2,…).
“A” will give A, B, C...
“a” will give a,b,c
“I” starts with Capital roman letters I, II, II…
“I” starts with small case roman letters.

P a g e | 8 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

START: Alters the numbering sequence can be set to any numeric value.
VALUE: Change the numbering sequence in the middle of an ordered list.

Example:
<OL TYPE = “1” START = 5>
<LI> CSE </LI>
<LI> IT </LI>
</OL>

Output:
5. CSE
6. IT

22. Explain the attributes of table tag with an example?

A table is a two dimensional matrix, consisting of rows and columns. All table related tags are
included between <TABLE> </TABLE> tags.
<TABLE BORDER=“3” WIDTH=”100” HEIGHT=”200”>
<TH> Heading </TH>
<TR> Row elements </TR>
<TD> Table data values </TD>
</TABLE>

Attributes of table tag:

 ALIGN Horizontal alignment is controlled by the ALIGN attribute. It can be set to LEFT, CENTER,
or RIGHT VALIGN Controls the vertical alignment of cell contents. It accepts the values TOP,
MIDDLE or BOTTOM WIDTH Sets the WIDTH of a specific number of pixels or to a percentage of
the available screen width.
 BORDER - controls the border to be placed around the table.
 CELLPADING - This attribute controls the distance between the data in a cell and the boundaries
of the cell
 CELLSPACING- Controls the spacing between adjacent cells.
 COLSPAN- Used to spilt the single cell to one or more columns.
 ROWSPAN- Used to spilt the single cell to one or more rows.
 ALIGN: ALIGN = TOP, MIDDLE, AND BOTTOM.
 BORDER: Specifies the size of the border to place around the image.
 WIDTH: Specifies the width of the image in pixels.
 HEIGHT: Specifies the height of the image in pixels
 HSPACE: Indicates the amount of space to the left and right of the image
 VSPACE: Indicates the amount of apace to the top and bottom of the image.

P a g e | 9 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

23. Mention the different types of links?

HTML allows linking to other HTML documents as well as images. There are 3 attributes that can be
introduced in BODY tag.
a) LINK – Changes the default color of a Hyperlink to whatever color is specified with this tag.
b) ALINK – Changes the default color of a hyperlink that is activated to whatever color is specified
with this tag.
c) VLINK – Changes the default color of a hyperlink that is already visited to whatever color is
specified with this tag.
Note: User can specify the color name of a hyperlink or an equivalent hexadecimal number.

24. Explain image maps with its syntax?

When a hyperlink is created on an image, clicking on any part of the image will lead to opening of the
document specified in the <A HREF TAG>. Linked regions of an image map are called hot regions and
each hot region is associated with a filename.html.
Syntax:
<MAP NAME = “map name”>
Attributes of Image Maps:
 COORDS: Each of the above shapes takes different coordinates as parameters.
 Rectangle – 4 coordinates (x1, y2, x3, y2)
 POLYGON: 3 or more coordinates.
 HREF – Takes the name of the .html file that s linked to the particular area on the image.
<MAP NAME = “fish.jpg”>
<AREA SHAPE = “rect” COORDS = “52, 65, 122, 89” HREF = “sct.html”>
</MAP>

25. Explain about html form tag with its attributes?

HTML form provides several mechanisms to collect information from people viewing your site.
The syntax of the form is
<FORM METHOD = “POST” ACTION = “/cgi-bin/formmail”>
 The METHOD attribute indicates the way the web server will organize and send you the form
output.
 Use METHOD = “post” in a form that causes changes to server data, for example when updating a
database.
 The ACTION attribute in the FORM tag is the path to this script; in this case, it is a common script
which emails form data to an address. Most Internet Service Providers will have a script like this
on their site.

P a g e | 10 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

26. Mention the various form elements?

The various elements or controls can be created in FORM using <INPUT> tag. They are
 Label
 Text box
 Text Area
 Radio button
 Check box
 List box
 Command button
 Scroll bars

27. What is the use of frames in html give the syntax of frames?
Frames are used to call many html files at the same time. This can be done using <FRAMESET>
</FRAMESET> tags.

Attributes of Frames:
 ROWS – This attribute is used to divide the screen into multiple rows. It can be set equal to a list
of values. Depending on the required size of each row. The values can a number of pixels.
 Expressed as a percentage of the screen resolution.
 The symbol *, which indicates the remaining space.
 COLS – This attribute is used to divide the screen into multiple columns.

Example:
<FRAMESET ROWS = “30 %,*”> => Divides the screen into 2 rows, occupying the remaining space.
<FRAMESET COLS = “50%, 50 %”> => Divides the first row into 2 equal columns.
<FRAME SRC = “file1.html”>
<FRAME SRC = “file2.html”>
<FRAMESET COLS = “50%, 50 %”> => Divides the second row into 2 equal columns.
<FRAME SRC = file3.html”>
<FRAME SRC = file4.html”>
</FRAMESET>

28. What are the different types of HTML protocols?

The different types of HTML protocols are
 Hyper Text Transfer Protocol (HTTP)
 Simple Mail Transfer Protocol (SMTP)
 Post Office Protocol Version 3 (POP3)

P a g e | 11 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

 Multi-Purpose Mail Extension (MIME)

 Internet Message Access Protocol (IMAP)

29. What is meant by HTTP?

HTTP (Hyper Text Transfer Protocol) is an application layer protocol in the TCP/IP protocol suite.
HTTP was originally developed to transfer files and data in distributed, collaborative, hypermedia
information systems.
The primary purpose of HTTP is to transfer web pages from one computer (web server) to another
computer (web client). The basic idea of the protocol is that a browser will request a page from a
server.

30. What are the elements of HTTP URL?

The four elements of a URL specification are
1) Method (Protocol)
2) Host (Local hostname or IP address)
3) Port (Port number for contacting server)
4) Path (Path name of the resource file)

31. List the steps functions of http protocol?

HTTP is a standard protocol for communication between the web browsers and the web servers. It is
a stateless protocol that specifies
1) how a client and a server establish a connection,
2) how the client request data to the server,
3) how the server responds to the client and
4) finally how the connection is closed.

32. What is SMTP?

The TCP/IP protocol that supports electronic mail on the internet is called the Simple Mail Transfer
Protocol (SMTP). SMTP is the protocol used by mail servers to exchange email messages. It is a
system for sending messages to other computer users based on e-mail addresses.

33. What is POP3?

POP3 stands for Post Office Protocol Version3. It is used to retrieve e-mail from Internet
mailboxes. Mail access starts with the client when the user needs to download e-mail from the
mailbox on the mail server. It then sends its user name and password to access the mailbox. The user
can then list and retrieve the mail messages, one by one.

34. What is the use of MIME?

P a g e | 12 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Multipurpose Internet Mail Extensions (MIME) is an Internet standard that extends the format
of email to support:
 Text in character sets other than ASCII.
 Non-text attachments: audio, video, images, application programs etc.
 Message bodies with multiple parts.
 Header information in non-ASCII character sets.

35. List the predefined MIME content types?

The predefined MIME content types are
 Text
 Multipart
 Message
 Image
 Audio
 Video
 Model
 Application

36. Define IMAP?

The Internet Message Access Protocol (IMAP) is an Internet standard protocol used by e-mail
clients to retrieve e-mail messages from a mail server over a TCP/IP connection. IMAP is used to
access the messages in email that are in mail server. It also used for manipulation of stored messages
on server.

37. What is meant by DNS?

Domain Name System (DNS) is an application level protocol for message exchange between client
and server.
DNS is a hierarchical naming system for computer services for any resources connected to internet
or private network. The important work of DNS protocol is to convert the computer host name into
IP address.
DNS is a system for naming computers and network services that is organized into a hierarchy of
domains. DNS naming is used in TCP/IP networks, such as the Internet, to locate computers and
services through user-friendly names.

38. What are the properties of DNS?

The properties of DNS are:
 Each label in the domain can contain up to 63 characters.
 The full domain name should not exceed the length of 253 characters.
 The domain name should follow ‘LDH’ rule.

P a g e | 13 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

39. What is Domain Name?

Each host computer on the Internet has a unique number called IP address. And also have a name
know as host name. The name of each host computer consists of a series of words separated by dots.
40. What are domain & mention different types of domains?
Domain is a place where information is available. Domain name extensions are
 .edu – Servers that provide Educational services
 .gov – About the government of a country.
 .mil – Servers that provide military information.
 .org – Provide information about the organizations in the world.
 .com – Servers providing commercial services on the Internet.

41. Define DHTML?

 DHTML stands for Dynamic HTML.
 It is NOT a language or a web standard.
 It means the combination of HTML, JavaScript, DOM and CSS.
According to the World Wide Web Consortium (W3C): “Dynamic HTML is a term used by some
vendors to describe the combination of HTML, style sheets and scripts that allows documents to be
animated”.

42. What is meant by CSS?

 CSS stands for Cascading Style Sheets.
 CSS is a style sheet language that describes the presentation of an HTML (or XML) document.
 It describes how HTML elements are to be displayed on screen, paper, or in other media.
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
External style sheets are stored in CSS files.

43. What is the syntax of CSS?

A CSS rule set consists of a selector and a declaration block:
selector { property1: value1; property2: value2; }
h1 { color: blue; font-size: 12px; }
 The selector points to the HTML element you want to style.
 The declaration block contains one or more declarations separated by semicolons.
 Each declaration includes a property name and a value, separated by a colon.

44. List the features of CSS?

The various features of CSS are
 Selectors
 Box Model

P a g e | 14 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

 Backgrounds and Borders

 Image Values and Replaced Content
 Text Effects
 2D/3D Transformations
 Animations
 Multiple Column Layout
 User Interface

45. What is meant by selectors in CSS?

 CSS selectors allow you to select and manipulate HTML elements.
 CSS selectors are used to "find" (or select) HTML elements based on their id, class, type, attribute,
grouping, universal, descendant, and child selectors.

46. What is meant by id selector in CSS?

 The id selector uses the id attribute of an HTML element to select a specific element.
 An id should be unique within a page, so the id selector is used if you want to select a single,
unique element.
 To select an element with a specific id, write a hash character, followed by the id of the element.
 The style rule below will be applied to the HTML element with id="para1":

Example:
#para1 {
text-align: center;
color: red;
}

47. What is meant by class selector in CSS?

 The class selector selects elements with a specific class attribute.
 To select elements with a specific class, write a period character, followed by the name of the
class:

Example:
All HTML elements with class="center" will be red and center-aligned:
.center {
text-align: center;
color: red;
}

48. What is meant by grouping selector in CSS?

 In CSS, you can group the selectors, to minimize the code.
 To group selectors, separate each selector with a comma.

P a g e | 15 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Example:
h1, h2, p {
text-align: center;
color: red;
}

49. Explain the various attributes in CSS?

It is possible to style HTML elements that have specific attributes or attribute values.
1. The [attribute] selector is used to select elements with a specified attribute.
The following example selects all <a> elements with a target attribute:
a[target] {
background-color: yellow;
}
2. The [attribute="value"] selector is used to select elements with a specified attribute and value.
The following example selects all <a> elements with a target="_blank" attribute:
a[target="_blank"] {
background-color: yellow;
}
3. The [attribute~="value"] selector is used to select elements with an attribute value containing a
specified word.
The following example selects all elements with a title attribute that contains a space-separated list
of words, one of which is "flower":
[title~="flower"] {
border: 5px solid yellow;
}
4. The [attribute|="value"] selector is used to select elements with the specified attribute starting
with the specified value.
The following example selects all elements with a class attribute value that begins with "top":
[class|="top"] {
background: yellow;
}
5. The [attribute$="value"] selector is used to select elements whose attribute value ends with a
specified value.
The following example selects all elements with a class attribute value that ends with "test":
[class$="test"] {
background: yellow;
}
6. The [attribute*="value"] selector is used to select elements whose attribute value contains a
specified value.
The following example selects all elements with a class attribute value that contains "te":

P a g e | 16 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

[class*="te"] {
background: yellow;
}

50. What are the types of CSS?

There are four ways to specific style information in a document
i. External style sheet
ii. Embedded style sheet
iii. Imported style sheet
iv. Inline style sheet

51. What is client side programming?

Client side programming has mostly to do with the user interface, with which the user
interacts. In web development it's the browser, in the user's machine, that runs the code,
and it's mainly done in JavaScript, flash, etc. This code must run in a variety of browsers.
The examples are JavaScript, VBScript, HTML, and CSS.

52. What is meant by JavaScript?

 JavaScript is an object-oriented programming language commonly used to create
interactive effects within web browsers.
 JavaScript is the programming language of HTML and the Web.
 JavaScript is a lightweight, interpreted programming language. It is designed for creating
network-centric applications.
 It is open and cross-platform.
 JavaScript inserted into HTML pages, can be executed by all modern web browsers.

53. Write the syntax of JavaScript program?

Javascript code may be placed anywhere in an HTML file. It is interpreted in the order in which it
appears.
<html>
<head>
<script language = “javascript” (or) language=”text/javascript”>
//function declaration
</script>
</head>
<body>
<script language = “javascript”>
//function call

P a g e | 17 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

//other JavaScript statements

</script>
</body>
</html>

54. Explain the JavaScript variables with an example?

 JavaScript variables are containers for storing data values.
 Javascript allows us to create and manipulate variables.
 Creating a variable in JavaScript is called "declaring" a variable.
You declare a JavaScript variable with the var keyword:
var carName;
var x = 5;
var person = "John Doe";
var person = "John Doe", carName = "Volvo", price = 200;

55. What are local and global variables in JavaScript?

 A variable can be a local or global.
 A local variable is declared in a function using the keyword var.
 Variables declared without the var keyword is always global.

56. List the various data types in Javascript?

Javascript variables support the following data types:
 String,
 Number,
 Boolean,
 Array, and
 Object.

57. Explain the Statements in Javascript?

 In HTML, JavaScript statements are "instructions" to be "executed" by the web browser.
 This statement tells the browser to write "Hello Dolly." inside an HTML element with
id="demo":

Example:
document.getElementById("demo").innerHTML = "Hello Dolly.";

58. List the various conditional Statements in Javascript?

Conditional statements are used to perform different actions based on different conditions.
i. if statement
ii. else statement

P a g e | 18 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

iii. else if statement

iv. switch statement

59. List the various operators in Javascript?

Javascript supports the operators are
i. Arithmetic operators
ii. Assignment operators
iii. Relational operators
iv. Logical operators
v. Bitwise operators

60. List the types of Javascript literals?

The various Javascript literals are
 String literals
 Array literals
 Integer literals
 Floating pointing literals
 Boolean literals
 Object literals

61. Explain the functions in Javascript?

 A JavaScript function is a block of code designed to perform a particular task.
 A JavaScript function is executed when "something" invokes it (calls it).
 A JavaScript function is defined with the function keyword, followed by a name, followed by
parentheses ().
function name(parameter1, parameter2, parameter3)
{
code to be executed
}

62. What is function Invocation?

The code inside the function will execute when "something" invokes (calls) the function:
 When an event occurs (when a user clicks a button).
 When it is invoked (called) from JavaScript code.
 Automatically (self-invoked).

63. What is meant by Javascript objects?

P a g e | 19 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

 An object is a collection of related properties and methods.

 Javascript objects are different from C++/Java objects.
 The properties and methods can be added at any time even after the creation of an object.

64. How to access properties and methods in JavaScript?

Accessing Object Properties:
You can access object properties in two ways:
objectName.propertyName
(or)
objectName["propertyName"]
Accessing Object Methods:
You access an object method with the following syntax:
objectName.methodName()

65. What is a JavaScript array?

An array is a special variable, which can hold more than one value at a time. In
Javascript array may contain heterogeneous items. These arrays are similar to structure
variables, except that they can be accessed randomly with the array name and the index.

66. How to create an array in JavaScript?

Using an array literal is the easiest way to create a JavaScript Array.
Syntax:
var array_name = [item1, item2, ...];
Example:
var cars = ["Saab", "Volvo", "BMW"];

Using the JavaScript Keyword new

The following example also creates an Array, and assigns values to it:
Example:
var cars = new Array("Saab", "Volvo", "BMW");

67. What are the various Built-in objects in JavaScript?

 Math object
 String object
 Date object
 Boolean and Number objects
 Array object
 Regular Expression object
 Document object

P a g e | 20 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

 Window object

68. What is meant by JavaScript Debugging?

 Searching for errors in programming code is called code debugging.
 It is difficult to write JavaScript code without a debugger.
 Your code might contain syntax errors, or logical errors, that are difficult to diagnose.
 Often, when JavaScript code contains errors, nothing will happen. There are no error messages,
and you will get no indications where to search for errors.

69. What is meant by JavaScript Debuggers?

 Debugging is not easy. But fortunately, all modern browsers have a built-in debugger.
 Built-in debuggers can be turned on and off, forcing errors to be reported to the user.
 With a debugger, you can also set breakpoints (places where code execution can be stopped), and
examine variables while the code is executing.
 Normally, otherwise follow the steps at the bottom of this page, you activate debugging in your
browser with the F12 key, and select "Console" in the debugger menu.

70. What is regular expression in JavaScript?

 A regular expression is a sequence of characters that forms a search pattern.
 When you search for data in a text, you can use this search pattern to describe what you are
searching for.
 A regular expression can be a single character, or a more complicated pattern.
 Regular expressions can be used to perform all types of text search and text replace operations.

71. Write the syntax for regular expression?

Syntax:
/pattern/modifiers;
Example:
var patt = /w3schools/i;

where
 /w3schools/i is a regular expression.
 w3schools is a pattern (to be used in a search).
 i is a modifier (modifies the search to be case-insensitive).

72. What are the methods in regular expression?

P a g e | 21 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

 In JavaScript, regular expressions are often used with the two string methods: search() and
replace().
1. The search() method uses an expression to search for a match, and returns the position of
the match.
2. The replace() method returns a modified string where the pattern is replaced.

11 MARKS

1. Explain the basic concepts in Internet? (5 MARKS)

Internet:
 The internet is a collection of interconnected computer networks, linked by copper wires, fiber
optic cables, wireless connections etc.
 Network is an interconnection of systems to share data and information. Internet is a network of
network or collection of heterogeneous networks.
 The internet (also known as net) is the worldwide, publicly accessible system of interconnected
computer networks that transmit data by packet switching using the standard Internet Protocol
(IP).
 It consists of millions of smaller domestic, academic, business and government networks, which
together carry various information services such as
 Electronic mail
 Online chat
 Interlinked web pages
 Other documents of WWW

Internetworks (Networks):
When two or more networks are connected, they become an internetworks or networks

LAN R LAN

R R

LAN R WA R LAN
N

P a g e | 22 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Web:
The web is a collection of interconnected documents, linked by hyperlinks and URLs and is accessible
using the Internet.

Applications of internet:
 Electronic mail
 World Wide Web
 FTP
 Telnet
 Chat & Online transaction

2. Explain the history of Internet and WWW? (11 MARKS)

History of the Internet:

 The USSR (Russia) launch of Sputnik spurred the U.S. to create the Advanced Research Project
Agency (ARPA) in February 1958 to regain a technological lead.
 ARPA created the information processing technology office (IPTO), to further the research of the
semi-Automatic Ground, Which had networked country-wide radar systems together for the first
time.
 In late 1960’s, one of the authors (HMD) research project MAC was funded by ARPA – of the
Department of Defense (DOD).
 ARPA rolled out for networking the main computer systems of about a dozen ARPA – funded
universities and research institutions.
 They were to be connected with communications lines operating at a then – stunning 56kbps
(i.e., 56.000 bits per second) - this at a time of most people was connecting over telephone lines
to computers at a rate of 110 bps.
 ARPA proceeded to implement the ARPANET which eventually evolved into today’s internet.
 Researchers to share each other’s computers, it rapidly became clear that enabling researchers
to communicate quickly and easily (via) became known as electronic mail(e-mail).
 As e-mail facilities communications of all kinds among a billion people worldwide.

Goals for ARPANET:

 The Primary goal of ARPANET is to allow multiple users to send and receive information
simultaneously over the same communication paths (e.g., Phone lines).
 The network operated with a technique called packet switching, in which digital data was sent in
small bundles called packets.
 The packets contained address, error control and sequencing information.
 The address information allowed packets to be routed to their destination.

P a g e | 23 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

 The sequencing information helped in reassembling the packets;

 Packets from different senders were intermixed on the same lines.
 This packet switching technique greatly reduced transmission costs, as compared with the cost
of the dedicated communication lines.
 The network was designed to operate without centralized control. If a portion of the network
failed, the remaining working portions would still route packets from senders to receivers over
alternative paths for reliability.
 The protocol for communicating over the ARPANET became known as TCP – the Transmission
Control Protocol.
 TCP ensured that messages were properly routed form sender to receiver and that they arrived
intact.
 Internet involved, organizations worldwide were implementing their own networks for both
 intero-organization (within the organization)
 inter- organization (between organization)
 ARPA accomplished with internet protocol (IP), creating a “network of networks”, the current
architecture of the internet the combined set of protocols is commonly called TCP/IP.

Usage:
 Internet was limited to universities and research institutions; then the military began using the
internet.
 The government decided to allow access to the internet for commercial purposes.

History of World Wide Web:

 The World Wide Web (WWW) allows computer users to locate and view multimedia – based
documents over the internet.
 In 1989, Tim Berners – Lee of CERN (The European organization for Nuclear research) began to
develop a technology for sharing information via a hyperlinked text documents.
 Berners – Lee called his invention the Hyper Text Markup Language(HTML)
 He also wrote communication protocols to form the backbone of his new information system,
which he called the World Wide Web
 The Hyper Text Transfer protocol (HTTP) – a communication protocol used to send information
over the web.
 Web use exploded with the availability in 1993 of the mosaic browser, which featured a user –
friendly graphical interface.
 Mark Andreesen, whose team at NCSA developed mosaic, went on to found Netscape with
initiating the explosive internet economy late 1990’s.
 In September 1194, Berners-Lee founded the World Wide Web Consortium (W3c), which is the
well-known standard making for free software’s all over the world.

P a g e | 24 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

 The WWW became commercially viable during 1996-98 when a large number of dot-com
companies used it for placing their services on the web.
 In past, most computer applications run on computers that were not connected to one another,
whereas today’s applications can be written to communicate among the world’s computers.
 The internet mixes computing & communication technologies. It makes our work easier. It makes
information instantly and conveniently accessible worldwide.
 It enables individuals and small business to get worldwide exposure. It is changing the way
business is done.
 People can search for the best prices on virtually any product or service special interest
communities can stay in touch with one another.
 HTTP – Communication between a web server and a web browser.
 HTTP is used for sending requests from a web client (browser) to a web server, returning web
contents (web pages) from the server back to the client.

3. Explain the various concepts in HTML? (11 MARKS)

 Hyper Text Markup Language (HTML) is a tag – based language and these tags are added to the
pages, there by instructing the web browser about the format in which the page has to be
displayed.
 The source code passed, the browser read web pages serially in the text format.
 HTML was display static content like text, with user specific formatting.

Fundamental HTML elements:

 HTML tags are usually used in pairs.
 All tags are enclosed between the angle brackets (< >)
 The start tag is usually between angle brackets, while the end also has a forwarding slash
preceding
the text (< / >).
 The element content is everything between the start and the end tag.
 Most HTML elements can have their attributes.
 HTML elements have empty content.
 Empty elements are closed in the start tag
 HTML tags are case sensitive.
The types of section are
1. Head section
2. Body section

Elements for the head section:

The HTML tags
<HTML>
………

P a g e | 25 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

</HTML>
are the first and last tags in a page. All the content in HTML goes within these tags, which tell the
browser, or any other program reading that page that the file is a web page.
 With these tags lie the header tags <HEAD> ……</HEAD>; the HEAD tags are always first and do
not contain the page’s actual content.
 The only content the page title enabled through the TITLE tags.
 The TITLE tags occur within the HEAD tags and are the name of the browser window that is
currently active.
 The HEAD tag can also contain script.
 The syntax for the HEAD section
1. TITLE – Document title
2. LINK – Site structure
3. BASE – Document location
4. SCRIPT – Java script and VB script
Example:
<Html>
<Head>
<Title> Example Of Web </Title>
</Head>
</Html>

Elements for the body section:

 The body tags <BODY> …. </BODY> contain the actual page content.
 All page’s text, images, forms links and other HTML come in the body block.
 The body tag has 3 commonly used attributes
1. BGCOLOR
2. TEXT
3. LINK
 BGCOLOR specifies the background color for the page.
 TEXT specifies the color of the text on the page.
 LINK specifies the color of the hyperlink on the page.

HTML named colors:

Color values are represented in either hexadecimal numbers or color names. User can specify only 16 by
names. It can specify any color by its hexadecimal values.
 White - #FFFFFF
 Yellow - #FFFF00
 Red - #FF00FF
 Green - #008000
 Blue - #0000FF

P a g e | 26 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

 Black - #000000
The default background, text and link colors for the web page are white, black and blue.

The various types of tags in HTML are

Comments in web pages:

 Comments make the web page code more readable and documentation is eased.
 Comments are enclosed within the comments tag <!- and --> and are simply ignored by the
browsers.
 Browsers simply interpret the comment begin tag and stop display until the end comment tag is
encountered.

Heading tags:
 Heading in HTML are to be used like heading in Books and Newspapers. Headings divide sections of
text and improve page readability.
 The above six levels of headings defined by HTML.
 <H1>……</H1> - Level 1 Header
 <H2>……</H2> - Level 2 Header
 <H3>……</H3> - Level 3 Header
 <H4>……</H4> - Level 4 Header
 <H5>……</H5> - Level 5 Header
 <H6>……</H6> - Level 6 Header

Example:
<HTML>
<HEAD>
<TITLE> HEADING OG VARIOUS SIZE </TITLE>
</HEAD>
<BODY>
<H1> IP </H1>
<H2> Web </H2>
.
.
.
<H6> Technology </H6>
</BODY>
</HTML>

P a g e | 27 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Text level elements:

 &nbsp is used to insert a single blank space.
 <BR> indicates the line break sometimes user might want to use is to separate text into paragraphs.
 <P> …. </P> - Paragraph tag. These tags add a blank line before and after the block they enclose.
Two line break tag can be used consecutively.
 <B>…..</B> - Bold tag
 <I>…..</I> - Italic tag
 <U>…..</U> - Underline tag
 It can effect as indicated in the modification of the font.

Example:
<HTML>
<HEAD>
<TITLE> Page with HTML Format tag </TITLE>
</HEAD>
<BODY>
<B> India is one of the developing country </B>
<BR>
<I> Web Technology </I>
<U> Internet Programming </U>
<P> Welcome to web technology laboratory </P>
</BODY>
</HTML>

Output:

India is one of the developing country

Web Technology

Internet Programming

Welcome to web technology laboratory

Lists of text:
 The most commonly list are of 2 types
1. Ordered Lists (OL)

P a g e | 28 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

2. Unordered Lists (UL)

 The ordered list tags <OL>……</OL> create ordered list item.

 The unordered list tags <UL>……</UL> create unordered list item.
 For each list item in the list, within either of these set of tag, user can use the listing tag (LI) – List
Item, this tag is used singly and does not have an end tag.
 <HR> is used to draw a horizontal line on the web page requires only a single tag.

Example:
<HTML>
<HEAD>
<TITLE> Using Lists </TITLE>
</HEAD>
<BODY>
<HR>
<UL>
<B> MVIT
<LI>CSE
<LI>IT
</B>
</UL>
Dept
<OL>
<LI> Computer
<LI> Information
</OL>
</BODY>
</HTML>

Output:

MVIT
 CSE
 IT
Dept
1. Computer
2. Information

P a g e | 29 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Definition List (DL) tag:

 Definition list are also commonly used to display information in the form of definitions which
have common use to convey information to users.
 A definition has two parts
1. A term (DT)
2. A definition (DD)
 Definition list tag <DL>……</DL> - create a definition list
 Within these tags, user can use the definition term tag <DT> - for each list item term.
 Definition data tag <DD> - for each list item’s data.
 Both the <DT> and <DD> tag have no associated end tags.

Example:
<HTML>
<HEAD>
<TITLE> Using definition lists </TITLE>
</HEAD>
<BODY>
<U> <H2> Bharath infotech </H2> </U>
<Font size = 2 >
<DL>
<DT> The company </DT>
<DD> Mr. X is the CEO of the company</DD>
<DD> Mr. Y & Z are the incharge of QC</DD>
</DL>
</Font>
</BODY>
</HTML>

Output:

Bharath Infotech
The Company
Mr. X is the CEO of the company
Mr. Y & Z are the incharge of QC

Font tag:
<Font color = “Red” Face = “Times” size = 5>
All data displayed here is red in color and has the times font and the size is 5
</Font>

P a g e | 30 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Linking:
 The most important capability of the HTML is its ability to create hyperlinks to documents and
make the World Wide Web as a collection of linked documents.
 The links are created using anchor <a>…..</a> element.
 <a href = “location of the page”> </a>
 It is used to hyperlink the web page.
 <Img src = “s.jpg” width =”25” height = ”25” align = “top”>…….</img>
 This element requires an attribute to mark the location of the object to get linked. The address
of the object is specified using href attribute.
 The href attribute of the tag tells the browser to get another html document of the web.
Example:
<html>
<head>
<title> Linking <title>
</head>
<body>
<h1 align=center> My favorite search sites</h1>
<p align=center> The yahoo!: <a href=””> http://www.yahoo.com </a> </p>
<p align=center> The Google: <a href=”> http://www.google.com </a> </p>
</body>
</html>

Link will appear as

1. An unvisited link is underlined and blue in color.
2. A visited link is underlined and purple in color.
3. An active link is underlined and red in color.

Output:

My favorite search sites

The yahoo! : http://www.yahoo.com

The google : http://www.google.com

Internal linking:
 To create links to external documents. HTML has facilities to include internal links also by
assigning a location name to any individual point in an HTML document.
 This location name can then be added to the page URL
 For internal linking also, the anchor tag is used.

P a g e | 31 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Syntax:
 To create name the following tag is used
<a name=”location”> </a>
 To refer to the location use
<a href = “#name”> text </a>

Example:
<html>
<head>
<title> Internal Linking <title>
</head>
<body>
<h1 align=center> My book </h1>
<p> the book contains the following chapters </p>
<br>
<a href = “#chap1” > 1. Introduction </a> <br>
<a href = “#chap2” > 2. Topics1 </a> <br>
<a href = “#chap3” > 3. Topics2 </a> <br>
<a name = “chap1” > </a>
<h3 align = “center”> Chapter 1 </h3>
<p> The text is here </p> <br>
<a name = “chap2” > </a>
<h3 align = “center”> Chapter 2 </h3>
<p> The text is here </p> <br>
<a name = “chap3” > </a>
<h3 align = “center”> Chapter 3 </h3>
<p> The text is here </p> <br>
</body>
</html>

Output:

My book
The book contain the following chapters
1. Introduction
2. Topics 1
3. Topics 2
Chapter 1
The text is here
Chapter 2
The text is here

P a g e | 32 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Embedding Images:
 Images can be embedded into the web page. To add images as a background for the whole web
page, the following format is used,
<body background = “bg.gif”>
 To include the image as a normal figure in the web page the <img> tag is used.
 The image tag has the following attributes
 src
 height
 width
 border
 align
 alt
 The src attribute is used to specify the location of the image, height and width, specify the size.
 alt attribute which is provided for browsers that have images turned off or that cannot have
images.
 The value of alt attribute will appear on screen in the place of the images.

Example:
< img src = “url “ height = “144” border = “1” width = “200” alt = “An image is here”>
</img>
The other related tag is <map> which is used to create hot spots. The syntax is
<map name = “ “>
……
</map>

Example:
The following code creates a hot spot of rectangular shape and has the hyperlink in the coordinates
mentioned.
<map>
<area shape = “rect” cords =”23, 45, 56, 89” href = “source.html”>
</map>

Frames:
 Frame layout is one in which the browser windows is broken into multiple region called frames.
 Each frame contains different HTML documents.
 The <frameset> tag is a container for frames and replaces the body tag. </frameset>
 <frame> tag is used to place the contents into the frame.

Example:

P a g e | 33 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

<frameset rows = “value” cols = “value”>

 The attribute rows – The window is to be divided in horizontal stripes.
 The attribute cols – The window is to be divided in vertical stripes.

Example:
 Divides the window into 2 regions in row wise
<frameset rows = “30%,70%”>
 The <frame> tag is used to place different HTML documents in each frame.
<frame src = “ “ frameborder = “0|1” name = “name” scrolling = “yes|no|auto”>

Example:
<html>
<head>
<title> Internal Linking <title>
</head>
<frameset cols = “40% , * “>
<frame src=”list1.html”>
<frame src=”l.html”>
</frameset>
</html>

Vertical Frames (Cols) Horizontal frames (Rows)

Other tags:
 &amp – is used to insert an ampersand
 The tag <del> is used to strike through text with a horizontal line.
 The tag <sub> and <aup> are used to turn the text into subscript and superscript.
 To draw a horizontal line in the web page <hr> tag is used. This tag has 3 attributes
 width – to specify the width of the line
 size – to specify the height of the line
 noshade – eliminates the default shading effect and instead display the horizontal rule as
a solid color bar.

Example:
<hr noshade width = “50%” size = 5 align = “center”>

Tables:

P a g e | 34 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

 This form tag is the HTMLs best way of arranging information in space and controlling layout
 Table element to format a table
 The various tag in table as
<table>……</table>
align = left, center, right
border = make a border around the table & its cells
1. The <tr> element (table row) inserts a row in the table.
2. The <td> element (table detail) inserts a cell within a row
3. The <th> element (table header) to add headings to the rows and columns of the table.

Example:
<table>
<tr>
<td> apples
<td> celery
</tr>
<tr>
<td> oranges
<td> carrots
</tr>
</table>

Output:
apples celery
oranges carrots

 <caption> tag is used to be added to row and column headings. By default it will be aligned in center
of a table.
 <border> is used for draw a border around the tables and the individual cells. Specify the border
width in pixels.

Example:
<table border = 1>
<caption> Fruits and vegetables </caption>
<tr>
<th> Fruits
<th> vegetables
</tr>
<tr>

P a g e | 35 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

<td> apples
<td> celery
</tr>
<tr>
<td> oranges
<td> carrots
</tr>
</table>

Output:
Fruits and Vegetables
fruits vegetables
apples celery
oranges carrots

 Color can be added to tables by using the bgcolor = and bordercolor = attributes. These attributes
are available in the Table, <tr> and <td> elements; so user can apply colors to all the cell in a table,
selected rows and individual cells.

Example:
<table border = “1” cellspacing = “10%” cellpadding = “10%”> …. </table>

Spanning rows:
 The two types of attributes are
 colspan – to span column
 rowspan – to span rows

Example:
<table border = “2”>
<tr>
<th colspan = 3> Tic Tac Games </th>
</tr>
<tr>
<td> X </td>
<td> O </td>
<td> X </td>
</tr>
</table>

P a g e | 36 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Example:
<table border = “2”>
<tr>
<th rowspan = 3> Tic Tac Games </th>
</tr>
<tr>
<td> X </td>
<td> O </td>
<td> X </td>
</tr>
</table>
 The bgcolor = attribute sets the color used to fill the background of the cell before text and images
are drawn.
 The border color = attribute sets the color of the borders drawn around the table, row or cell.

Example:
<table border color = “navy” border = 5>
<tr bgcolor = “gray”>
<th>Fruits <th> Vegetables
</tr>
<tr>
<td bgcolor = “lime”> Apples <td bgcolor = “Aqua”>Celery
</tr>
<tr>
<td bgcolor = “lime”> Oranges <td bgcolor = “Aqua”>Carrots
</tr>
</table>

Control spacing within a table:

 Cellspacing attribute determines the amount of space between two adjacent cells or between a side
of a cell and border of the table.
 Cellpadding determines the amount of space between the content of cell and edge of the cell.

P a g e | 37 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

HTML Forms:
 Form provides a way to prompt the user for information and to carry out the actions based on the
input.
 A form consists of one or more input controls that the user uses to enter text and select choices.
 Once the user provides the input, the form collects the data and sent it to a destination specified in
the form element.
 To carry out the requested action, the server must have a script or other service that corresponds to
the destination.
 A form can contain inputs like text fields, check boxes, passwords, radio-buttons, submit buttons
and reset buttons.
 The <form> tag is used to create an HTML form.
<form name=” frm1“ action=”index.jsp “ method=”get|post” >
</form>
 HTML forms are used to pass the data to the server.

Input Types:
 Text Fields
 Check Boxes
 Password
 Radio Button
 Submit Button
 Reset Button
 Image Based Buttons
 Scripted Buttons

The syntax is
<input type = “text | passwd” name =”name” value =”default_value” size=”field size”>

1. Text Fields:
<input type=”text”> defines a one line input field that a user can text into.

Example:
<form>
First name: <input type=”text” name=”first name”>
Last name: <input type=”text” name=”last name”>
</form>

The output is
First name: SMVEC
Last name:
IFET

 The default width of a text field is 20 characters.

P a g e | 38 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

2. Password Field:
<input type=”password”> defines a password field.

Example:
<form>
Password: <input type=”password” name=”pwd”>
</form>

The output will be displayed as

Password:
*******

 The characters in a password field are masked (shown as asterisks or circles).

3. Radio Buttons:
 <input type=”radio”> defines a radio button.
 Radio buttons let a user to select only one of a limited number of choices.

Example:
<form>
Gender <input type=”radio” name=”gender” value=”male” checked> Male
Gender <input type=”radio” name=”gender” value=”female”> Female
</form>

The output is

Male

Female

4. Checkboxes:
 <input type=”checkbox”> defines a checkbox.
 Checkboxes let a user to select one or more options of a limited number of choices.

Example:
<form>
<input type=”checkbox” name=”vehicle” value=”bike”> Bike <br>
<input type=”checkbox” name=”vehicle” value=”car”> Car
</form>

The output is
Bike
Car

P a g e | 39 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

5. Submit Button
 <input type=”submit”> defines a submit button.
 A submit button is used to send the form data to a server. The data is sent to the page specified
in the form’s action attribute.
 The file defines in the action attribute usually does something with the receiving input.
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

How the HTML code above looks in a browser:

Username:
 Click the “submit” button, the browser will send your input to a page called “filename”.

6. Text Area:
 This tag sets up a multiple line input text window.

The Syntax is
<textarea name=”name” rows=”no of rows” cols=”no of cols” accesskey=”shortcut
key”></textarea>

Example:
Give the comments here <br>
<textarea name=”comments” rows=10 cols=20>
</textarea>

Output:

7. Selection List (<select>):

 This form tag is used to set up a list of choices from which a user can select one or many.
The syntax is
<select name=”name”>
<option>…………</option>
</select>

P a g e | 40 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Example:
<form name=”form1”>
Text<input type=”text” name=”textfield” size=”20”> <br>
<select name=”select1”>
<option> Item1</option>
<option> Item2</option>
</select>
</form>

Output:

8. Image Button:
<input type=”image” src=” “ name=”submit” value=”submit”>

9. Filename:
<input type=”file” name=”filename” value=” “ size=25> Browser

Example:
Browse

 The form tag can be used in the HTML code.

<form name=” frm1“ action=” hello.jsp “ method=”get | post” target=”response_frame”>
</form>
 The method attribute is used to send the form data to the web server.
 The default attribute value for the method is get which appends the data to the end of the
processing script URL.
 If the method has the value post, then the data is sent to the web server as a separate
transaction.
 The value post is used when the form data is to be stored in a database or as a processing
data in the web server.

P a g e | 41 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Output:

Source Program:
<html>
<head>
<title> Frame </title>
</head>
<body>
<center> <h1>Form Submission </h1> </center>
<form action=" home.jsp" method="get">
Login Name: <input type="text" name="login" size=20> <br>
Password: <input type="password" name="pass" size=20> <br>
Birthdate: <input type="text" name="DOB" size=20> <br>
Gender: <input type="radio" name="gender" value="F" checked> Female
<input type="radio" name="gender" value="m"> Male <br> <br>
Department
<select name="dept">
<option> CSE</option>
<option> IT</option>
</select> <br>
Give the comments here <br>
<textarea name="comments" rows=10 cols=20> </textarea>
<input type="button" value="check" OnClick="validate()"><br>
<input type="submit" value="login" OnClick="submit()">
<input type="reset" value="clear" OnClick="clear">
</form>
</body>
</html>

P a g e | 42 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

4. Explain the Internet Protocols? (4 MARKS)

 A protocol is a set of rules or an agreement that specifies a common language that computer on
a network use for communication with other computers.
 It specifies the conditions under which a particular message should be sent or respond and the
particular method of doing it.
 It specifies on how the computer talk with each other.
 The various protocols are
 Hyper Text Transfer Protocol (HTTP)
 Simple Mail Transfer Protocol (SMTP)
 Post Office Protocol Version 3 (POP3)
 Multipurpose Internet Mail Extension (MIME)
 File Transfer Protocol (FTP)
 Internet Protocol (IP)
 Transport Control Message (TCP)
 Internet Message Access Protocol (IMAP)

5. Explain briefly about HTTP? (11 MARKS)

 Hyper Text Transfer Protocol (HTTP) is a communication protocol used to send information
over the web.
 HTTP protocol is used by the World Wide Web (WWW).
 HTTP defines how messages are formatted and transmitted and what actions web servers and
browsers should in response to various commands.
 Example: When you enter a URL in your browser, this actually sends an HTTP command to the
web server directing it to fetch and transmit the requested web page.
 It is a standard protocol for communication between the web browsers and the web servers.
 It is a stateless protocol that specifies how a client and a server establish a connection, how the
client request data to the server, how the server responds to the client and finally how the
connection is closed.
 Sending a request in the form of ACSII string and expects a reply (ASCII).

The basic structures of HTTP communications are:

1. Request Model
2. Response Model

P a g e | 43 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Client Server

HTTP Request
Message

HTTP Response
Message

1. HTTP Request Message:

 A client sends an HTTP request to server by
 Clicking a link on the web page
 Submitting a form
 Typing a web page address in the browser’s address field
 The browser uses the URL (Uniform Resource Locator) to create the request message.

Start Line

Header Line

Blank / Empty Line

Message Body (Optional)

Figure: HTTP Request Message

The HTTP request message consists of
 Request / start line
 Request header / header field
 Blank line
 Request / message body (optional)

P a g e | 44 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

a. Start Line / Request Line

It consists of 3 parts
i. Request Method (Example: GET)
ii. Request URI Portion of Web Address
iii. HTTP Version (Example: HTTP/1.1)

Sample Request / Start Line

“GET/home/web/cs336/syll.so9 HTTP/1.0\r\n”

Command
Resource
Protocol & Carriage Return
Pathname (UNIX
Version & Line-Feed
filename Syntax)
Number

i. Request Method
The various methods supported by HTTP are:
METHODS DESCRIPTIONS
GET Gets a file from the server (or) tells the server the client wants to get some resource.
POST Sends user information to the server (or) tells the server the client wants to get
some resources and information will be sent by the client that may modify the
request (ex: Submitting the form).
HEAD Gets information about a file from the server.
PUT Sends a file to be stored on the server (transfers a file from the client to the server).
DELETE Deletes a file on the server.
OPTIONS Requests the available server options.

ii. A Resource Identifier (Request URI)

 Uniform Resource Identifier (URI) is a string of characters used to identify a name or a resource
on the internet.
 Such identification enables interaction with representations of the resource over a network
(WWW) using a specific protocols.
 URI are composed of alpha-numeric names (punctuation characters are permitted) delimited by
the character “/”
 URL (Uniform Resource Locator) is used for specifying any kind of information available on the
internet.

P a g e | 45 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

The four elements of a URL specification are

 Method (Protocol)
 Host (Local hostname or IP address)
 Port (Port number for contacting server)
 Path (Pathname of the resource file)

URL Format:
Example:
Method: //host: port/path/filename
http://www.google.com:80/icuse/cs336/syllabus.pdf

iii. HTTP Version Identifier

 It specifies the version of the HTTP that the client understands.
 The string starts with the prefix HTTP / and is followed by a version number.
 Example: HTTP/1.1

Example of HTTP Request

 <method> <Request-URI> <HTTP-Version>
 <Request options> CRLF  Request line & header must all end with <CR><LF>
 Get/foobar/index HTTP/1.1
 GET/mypage.html HTTP/1.1 CRLF
 Host: www.example.com CRLF
 HEAD/ HTTP/1.1
 POST/ www.yahoomail.com/signup?=name=......&address=..... HTTP/1.1
 HTTP header contains the additional information about the client or the request that the
server may provide a response.

The predefined fields are

Field Name Field Value

User agent Internet Explorer browser
From [email protected]
Referrer http://....
Accept */*
Cookie favourite

P a g e | 46 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

2. HTTP Response Message:

 A server response is followed by a blank, status line and text of the requested page.

Example:
GET/HTTP/1.0
HTTP/1.0 200 OK
Date: Mon, 12 Dec 2011 11:40:40 GMT
Server: Apache/1.3.3.7 (UNIX)
Last_Modified: Wed, 08 Jan 2003 12:10:10 GMT
E tag: “3f80F-1b6-3e1cb03b”

Server receives a request and uses its URL to decide how to handle it.
 Accept-Range: bytes
 Content-Length: 438
 Connection: close
 Content-Type: text/html

Start Line

Headers

A Blank Line

Body

 Etag (Entity Tag) header is used to determine if a cached version of the requested resource is
identical to the current version of the resource on the server.
 Content-Type specifies the internet media type of the data conveyed by the HTTP message.
 Content-Length indicates it length in bytes.
 The HTTP/1.1 Web Server publishes its ability to respond to requests for certain byte range
of the document – accept ranges bytes.
 Connection: Close is sent in a header. It means that the web server will close the TCP
connection immediately after the transfer of this response.

P a g e | 47 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Status Code:

The status codes returned by the server are:

1xx Informational Request received, continuing process

2xx Success The action was successfully
200 OK Received, understood and accepted
201 Created
202 Accepted
204 No content
3xx Redirection Further action must be taken in order to complete
301 The request
304 Move permanently
4xx Client error The request contains bad syntax or cannot be fulfilled
400 Bad request
401 Unauthorized
402 Payment Required
404 Not found
410 Gone
5xx Server Error The server failed to fulfill the valid request
500 Internal server error
503 Service not available

6. What are various e-mail Protocols? (2 MARKS)

 The e-mail (electronic mail) protocols are very popular web based e-mail system.
 The various types are
i. SMTP
ii. POP3
iii. IMAP
iv. MIME

P a g e | 48 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

7. Explain in detail about SMTP? (11 MARKS)

 The TCP/IP protocol that supports electronic mail on the internet is called the Simple Mail
Transfer Protocol (SMTP).
 SMTP is the protocol used by mail servers to exchange email messages.
 It is a system for sending messages to other computer users based on e-mail addresses.

SMTP provides for mail exchanges between users on the same or different computers and supports
are
 Sending a single message to one or more recipients.
 Sending messages that include text, audio, video format or graphics file.
 Sending messages to users on networks.

User User

SMTP Client
SMTP Server

INTERNET

Fig: SMTP Concept

SMTP client and server has 2 components

a) User Agent (UA)
b) Mail Transfer Agent (MTA)
 The UA prepares the message, create the envelope and puts the message in the envelope.
 The MTA transfers the mail across the internet.

User A User B

UA
UA

MTA Client MTA Server

INTERNET

Fig: UA and MTA

P a g e | 49 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

 A mail gateway which is a relay MTA that can receive mail prepared by a protocol other than
SMTP and transform it to SMTP format before sending it.
 It can also receive mail in SMTP format and change it to another format before sending it.

User A User B

MTA Client
Mail Server

INTERNET MTA Private

Mail gateway Network

SMTP:
 It is used to exchange mail messages between mail servers (MTA).

MTA MTA MTA

SMTP SMTP

UA
File
UA System

1. User Agent (UA):

 The UA is normally a program used to send and receive mail.
 Example: Gmail, yahoomail, Hotmail

Addresses
 To deliver mail, a mail handling system must use a unique addressing system.
 The addressing system used by SMTP as 2 parts
 A local part
 A domain name, separated by an @ sign

e-Mail Address
Localpart @ domain name

Address of the mailbox The domain name of the

on the local site destination

P a g e | 50 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Local Part
 The local part defines the name of a special file called the user mailbox, where all of the mail
received for a user is stored for retrieval by the user agent.

Domain Name
 The 2nd part of the address is the domain name.
 An organization usually selects one or more hosts, to receive and send e-mail. They are called
mail exchangers.
 The domain name assigned to each mail exchanger from the DNS database.
Example: [email protected]

Local part Domain name

2. Mail Transfer Agent (MTA):

 The actual mail transfer is done through mail transfer agent (MTA).
 To send mail, a system must have a client MTA and to receive mail, a system must have a
server MTA.
 Client sends command and server responds with command status message.
 Status messages include ASCII encoded numeric status code and text string.

SMTP Commands
 The SMTP provides a two way communication between the client and the server (remote)
MTA.
 The client MTA sends commands to the server MTA, which turns, sends replies back to the
client MTA.
 SMTP refers to the exchange of SMTP commands and replies between two hosts as mail
transactions.

The major SMTP request commands are

Commands Descriptions
HELO Establishes SMTP connection, identify the sender (client).
MAIL FROM e-mail address of the sender.
RCPT TO e-mail address of the recipients.
BODY Body of the mail.
DATA Sender ready to transmit a series of lines of text, each ends with \r\n.
A line containing only a period ‘.’ Indicates the end of the data.
VRFY Verify that an e-mail address is valid.
EXPN Expands an alias (group e-mail address).

P a g e | 51 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

RSET Aborts current transaction.

SOML Send or mail (if recipient is logged in, display message on terminal, otherwise E-mail).
SAML Send and mail (delivers mail data to one or more terminals or mailboxes).

Data Format:
 ASCII only – must convert binary to an ASCII representation to send via e-mail.

Example:
Date: Sat, 27 Jan 02 13:26:24 GMT
From: [email protected]
To: [email protected]
Subject: meeting
Let’s get together Monday at 1pm.
R 220 [email protected] SMTP service at 29 Jan 02 05:17:11 GMT
S HELO [email protected]
R 250 [email protected]
S mail from: <[email protected]>
R 250 mail Accepted
S RCPT TO: <[email protected]>
R 250 Recipient Accepted
Sender DATA
R 354 start mail input; end with <CRLF>. <CRLF>
S Date: Sat, 27 Jan 02 13:26:21 GMT
S From: [email protected]
S To: [email protected]
S Subject: meeting
S
S Let’s get together Monday at 1pm.
S
R 250 OK
S QUIT
R 221 [email protected] service closing transmission channel

P a g e | 52 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

SMTP Replies:

 SMTP reply code has special significance.

Reply Code Description
211 System status
214 Help message
220 Service ready <domain>
221 Service closing transmission channel
250 Requested mail action OK or completed
421 Service not available
451 Requested action aborted
452 Requested action not taken
501 System (or) syntax error
554 Transaction failed
500 Syntax error in parameter or arguments
503 Bad sequence of commands

Size Limitations for SMTP:

SMTP Object Size Limitation

User The max-length of a username is 64 characters
Domain The max-length of a domain name or number is 64 characters
Path The max-length of reverse path or forward path, including the
punctuation and element separates is 256 characters
Command Line The max-length of a command line, including the command word and
<CRLF>
Reply Line The max-length of a reply line is 512 characters
Text Line 1000 characters
Recipients Buffer The maximum number of buffered recipients is 100

P a g e | 53 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

8. Explain in detail about POP3? (6 MARKS)

 Post Office Protocol Version3 (POP3) is used to retrieve e-mail from an internet mailbox.
 POP3 is used to retrieve mail for a single user; typically the POP server has access to a
database of email messages created by an SMTP server.
 POP3 is used to download messages from the server.
 POP3 connections require authentication in the form of a secret (i.e.,) shared by the user and
the POP server (a password)
 POP3 session passes
 Authentication
 Transaction
 Update
 In the authorization state, the client identifies itself to the server.
 If the authorization is successful, the server opens the client’s mailbox and the session enters
the transaction state.
 In this state, the client requests the POP3 server provide information or perform an action.
 When it enters the update state, the connection terminates.

POP commands:
 POP commands and replies are formatted as ASCII lines and all replies start with either
“+OK” or “-ERR”.
The various POP commands are

Command Description
USER Requires a name that identifies the user (Specify username).
PASS Specify password for the user/server.
STAT Get mailbox status (no. of messages in the mailbox).
LIST Get a list of messages and size, one per line, termination line contains a
period.
RETR Retrieves message from mailbox.
DELE Marks a message for deletion.
LAST The server returns the highest message no accessed.
RSET Unmarks all messages marked for deletion.
QUIT Remove marked messages and close the TCP connection.

 “+OK” is a positive success indicator similar to an ACK message

 The text “-ERR” is a negative success indicator similar to a NAK message

P a g e | 54 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Example:
QSMTP
char “mailmessage[]”
{
“HELO user: host\r\n”;
“MAIL FROM: [email protected]\r\n”;
“RCPT TO: [email protected]\r\n”;
“DATA\r\n”;
“This is my friend\r\n\r\n”;
“QUIT\r\n”
NULL
};

QPOP3
char “popmessage[]”
{
“USER your_mailbox_id\r\n”,
“PASS your_password\r\n”,
“STAT\r\n”,
“LIST\r\n”,
“RETR\r\n”,
“DELE\r\n”,
“QUIT\r\n”,
NULL
};

 SMTP or POP3 based client program establishes a connection; it sends a command and waits
for the server to respond.
 SMTP to transfer mail messages across the internet and POP3 to retrieve mail from the
internet.
 The two protocols are
 QSMTP
 QPOP3
 QSMTP used for send mail to send e-mail messages using SMTP
 QPOP3 – get mail to retrieve e-mail messages using SMTP

P a g e | 55 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

POP3 and SMTP:

9. Explain in detail about MIME? (11 MARKS)

 MIME is an acronym of Multipurpose Internet Mail extensions.
 It is an international standard that deals with the format of messages exchanged between
different e-mail systems.
 It is a specification for formatting non – ASCII messages so that they can be sent over the
internet.
 Many e-mail clients now support MIME, which enables them to send and receive graphics,
audio and video files via the internet mail system.
 MIME supports messages in character set other than ASCII.
 MIME was defined in 1992 by the internet engineering task force (IETF).
 A new version called s/MIME supports encrypted message.
 The format of Internet mail to allow Non – US – ASCII textual messages, non – textual
messages, multipart message bodies and non – US – ASCII information in message headers.

Need for MIME:

 Messages contain only ASCII characters.
 Messages with only 1000 characters.
 Messages should not exceed certain length.

P a g e | 56 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Features of MIME:

MIME allow mail messages to have

 Multiple objects in a single message.
 Message with any no. of lines or unlimited overall length.
 Characters other than ASCII, allowing non – English messages.
 Multi – font messages.
 Binary or application specific files.
 Images, audio, video and multipart messages.

 MIME transforms non-ASCII data at the sender site to NVT ASCII data and delivers them to
the client MTA to be sent through the Internet.
 The message at the receiving side is transformed back to the original data.
 NVT(Network Virtual Terminal)

MIME Headers:
The 5 header fields to internet e-mail messages.
1. MIME version
2. Content type
3. Content transfer encoding
4. Content id
5. Content description

P a g e | 57 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

1. MIME-Version:
 This header defines the version of MIME used.
 The current version is 1.1
MIME-Version: 1.1

2. Content type:
 This header defines the type of data used in the body of the message.
 The content type and the content subtype are separated by a slash.
 Depending on the subtype, the header may contain other parameters.
Content-Type : < type / sub-type >

Data Types and Subtypes in MIME

2. Content –Transfer:
 This header defines the method used to encode the messages into 0’s and 1’s for transport.
Content -Transfer – Encoding: < type >

P a g e | 58 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Base-64

Base-64 Converting Table

4. Content-Id:
 This header uniquely identifies the whole message in a multiple-message environment.
Content-Id: id = < content-id >

5. Content-Description:
 This header defines whether the body is image, audio, or video.
Content-Description: <description>

P a g e | 59 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

10. Write a short note on IMAP? (5 MARKS)

 IMAP stands for Internet Message Access protocol.
 This protocol is used to access the messages in e-mail or electronic bulletin board that are in
mail server
 It is an application layer Internet protocol that allows e-mail client to access e-mail on a
remote mail server
 The current version IMAP4 is defined by RFC3501.
 IMAP server on well-known port no.143

The objectives of IMAP are

1. Compatible with internet messaging standards Ex: MIME
2. Allow message access from multiple computers.
3. It supports for online, offline and disconnected access nodes.
4. Support for concurrent access to shared mailboxes.
5. Client software needs no knowledge about the servers file store format.

 The feature of IMAP is the mail messages remain on the server, instead of being downloaded
to a computer.
 Checking the mail with a client or web-based environment using the protocol.
 IMAP supports the use of folders for mail organization, but instead of organizing the
messages on the local computer, these folders are kept on the server.
 IMAP is quicker access to mail.
 The message headers are initially downloaded so the user can choose to download, open and
read only this message.
 Using IMAP and saving messages on the server is that the user will be restricted.

The protocols includes operations for

 Creating mailboxes.
 Deleting mailboxes.
 Renaming mailboxes.
 Checking for new messages.
 Permanently removing messages.
 Setting and clearing flags.
 Selective fetching of message attributes, text and portion of efficiency.

P a g e | 60 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

11. Explain in detail about DNS? (11 MARKS)

Domain Name System (DNS)

 To identify an entity, TCP/IP protocols use the IP address which uniquely identifies the
connection of a host to the internet.
 We prefer to use names instead of address.
 We need a system that can map a name to an address and conversely an address to a name.
In TCP/IP, this is the domain name system (DNS).
 What internet users use to reference anything by the name of the internet?
 The mechanism by which Internet software translates name to addresses.

The Namespace
 The namespace is the structure of the DNS database.
 An inverted tree with the root node at the top.
 Each node has a label.
 The root node has a null node written as “ “.

Root Node

Top Level Node Top Level Node Top Level Node

Labels
 Each node in the tree must have a label
 A string of upto 63(8 bit bytes)
 Legal characters are a-z & A-Z
 Sibling nodes must have unique label
 The null label is reserved for the root node

Root

Top 1 Top 2 Top 3

foo foo foo foo

P a g e | 61 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

DNS in the Internet:

 A domain name is the sequence of labels from a node to the root separated by dots (“.”’s),
read left to right.
 The namespace has a maximum depth of 127 levels.
 Domain names are limited to 64 characters in length.
 A node’s domain name identifies its position in the namespace.
 DNS is a protocol that can be used in different platforms.
In the internet, the domain namespace (tree) is divided onto 3 different sections.
1. Generic domains
2. Country domains
3. Inverse domains

1. Generic Domains:
 The generic domains define registered host according to their generic behavior.
 Each node in the tree defines a domain, which is an index to the domain namespace database.
 It represents as 3 character labels.
 Ex: com, edu.

P a g e | 62 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

The generic domain labels are

Sub-Domain
 One domain is a sub domain of another if its apex node is a descendant of the others apex
node.
 One domain is a sub domain of another if its domain name is in the other’s domain name.
 Ex: sales.google.com is a subdomain of
 google.com
 com
 Administrators can create subdomains to group hosts.
 The parent domains retain links to the delegated subdomains.

Zones
 The subdomain and its parent domain can now be administrated independently. These units
are called zones.
 The boundary between zones is a point of delegates in the namespace.

“ Root univ.edu domain

.com .edu .org

univ

anna anna.univ.edu zone

P a g e | 63 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

2. Country Domain:
 The county domain section follows the same format as the generic domains but uses two
characters country abbreviations
 Ex: .us(United States), .in(India)

3. Inverse Domain:
 The inverse domain is used to map an address to a name.
 For ex, when a server has received a request from a client to do a task.
 The server has a file that contains a list of authorized clients; the server lists only the IP
address of the client.
 If the client is on the authorized list, it can send a query to the DNS server and ask for a
mapping of address to name.

 Infrastructure domains as
 IPv4 reverse (address to name) lookups
 IPv6 reverse lookups
 DNS root server get approximately 3000 queries per second.

P a g e | 64 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

12. Explain about the web browser and web servers? (11 MARKS)
Web Browser:
 The internet is an essential medium for communicating and interacting with people
worldwide.
 A web browser is used to display web pages. Common web browsers are Netscape navigator
and internet explorer.
 The web browser is the interpreter of our web sites.
 Web browsers are software programs that allow users to access the web content.
 Millions of people use web browsers to access the tremendous amount of information
available on the web and to store or exchange this content with other users.
 The popular web browsers are
 Microsoft’s Internet Explorer
 Mozilla’s Firefox
 Apple’s Safari
 Opera Software’s Opera
 Google Chrome
 Web browsers, a software application used to locate, retrieve and also display content on the
worldwide web, including web pages, images, videos and other files.
 As a client/server model, the browser is the client run on a computer that contacts the web
server and request information.
 The web server sends the information back to the web browser which displays the results on
the computer or other internet enabled device that supports a browser.
 Browsers are fully functional software suites that can interpret and display HTML web pages,
applications, java scripts, AJAX and other content hosted on web servers.
 Many browsers offer plug-in which extend the capabilities of a browser so it can display
multimedia information (including sound and video) or the browser can be used to perform
tasks such as video conferencing, to design web pages or add ant phishing filters and other
security features to the browser.

Web Servers:
 Web servers are computers that deliver (serves up) web pages.
 Every web server has an IP address and possibly a domain name.
 Ex: if you enter the URL http://www.google.com/index.html in your web browser. This sends
a request to the web server whose domain name is google.com. The server then fetches the
page named index.html and sends it to your browser.
 Any computer can be turned into a web server by installing server software and connecting
the machine to the internet.

P a g e | 65 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

 Web server software applications including public domain software from NCSA (National
Computer Security Association) and Apache web server.
 The web browser includes 3 categories as
 Static web document
 Dynamic web document
 Active web document

Static Documents:
 Static documents are fixed content documents that are created and stored in a server.
 The client can get only a copy of the document.
 The content in the server can be changed but the user cannot change it.
 When a client accesses the document, a copy of the document is sent. The user then uses a
browser to display the content.

Client Request Server Web documents

Web document

Client Response Server

 Ex: HTML web page file

Dynamic Document:
 A dynamic document is created by a web server whenever a browser requests the document.
 When a request arrives, the web server runs an application program that creates the
dynamic document.
 The server returns the output of the program as a response to the browser that requested
the document.
 Because a fresh document is created for each request, the contents of a dynamic document
can vary from one request to another.
 Ex: Dynamic document is getting the time and date from the server.
 Time and date are kinds of information that is dynamic and they change from moment to
moment.
 Cricket refresh button.

Program
Client Request Server

a. Request for running a program

Program Document
Client

Server
P a g e | 66 WEB TECHNOLOGY DEPARTMENT OF CSE
 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

b. Running the program and creating the document

Program

Client Document Server

c. Response
 A server that handles dynamic documents as
 The server examines the URL to find if it defines a dynamic document.
 If the URL defines a dynamic document, the server executes the program.
 The server sends the output of the program to the client (browser).

Common Gateway Interface (CGI):

 It creates and handles dynamic documents.
 CGI is a set of standards that defines how a dynamic document should be written, how input
supplied to the program and how the output result is used.
 CGI program is a gateway that can be used to access other resources such as database,
graphic, packages.

Active Document:
 We need a program to be a run at the client side.
 Ex: we want to run a program that creates animated graphics on the screen or interacts with
the user.
 The program can be run at the client side where the animation or interaction taken place.
 An active document in the server is stored in the form of binary code.
 Ex: Java Applet

Web Page Request:

1. Request
Get /index.html HTTP/1.1
HOST: www.google.com
Date: ……….
User-agent: Mozilla Firefox/8.9
Accept-type: text/html, image/jpeg
/*blank line*/

2. Parsing the request

Get, head, post the file was requested and HTTP version will be accepted.

P a g e | 67 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

3. Response
HTTP/1.1 200 OK
Server: Apache Server/5.1
Location: http://www.google.com/imksmvec/coll.html
Date-time: …
Content-type: text/html
Content-length: 67
/*blank line*/
 Each server has multiple ports.
 Each port also has multiple sockets.
 The socket at a server provides a document, a page or a resource.
 A web server is software. A computer running that software connects to all servers on the
internet.
 Examples: The servers are Apache web server, Netscape and Microsoft IIS (Internet
Information Server).
 Web servers are also called hosts.

Linking to the Web Server:

 A browser has a client and a server has a server socket at the port for accessing website
pages.
 While browsing a page at the site, the browser establishes a virtual connection to the server
port.
 A socket of the port 80 accesses a specific hypertext document.
 Each socket has an IP address and a port number.
 A client socket connects a server socket for both request and response from the network
connections.

Virtual Link
(Connection between HTTP Pages &
client & server socket) Documents
Response
------------
HTTP 25
HTTP Request (Port Queue ------------
80 request) SMTP 110

POP3 119 HTTP Pages

HTTP Client & Documents
sponse
DNS 79
Queue
HTTP Response
Host with an
Web Client (Response to the
Source) IP address FTP 21

and host
name
Telnet 23

Resources

P a g e | 68 WEB TECHNOLOGY DEPARTMENT OF CSE

Web Server
 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

1. The port for SMTP mail server is 25.

2. POP3 mail server is 110.
3. Domain Name System (DNS) port is 119.
4. IP address of all remote users’ port is 11.
5. Port 7 is to test the connection between 2 hosts.
6. Time of a day at the server port 13.
7. FTP is 21 and Telnet is 23.

 Web server is to deliver web pages on the request to clients.

 HTML documents such as images, style sheets and scripting languages.
 Generic web servers also support server-side scripting languages such as
 Active Server Pages (ASP)
 PHP (Hypertext Pre-Processor) or Pre-Hypertext Processing
 Web servers can be scripted in separate files while the actual server software remains
unchanged.

Path Translations
 Web servers are able to map the path component of URL into
 A local file system resource (static resource)
 Internal or External program name (dynamic resource)
Example: http://www.google.com/path/file.html
 The client user agent will translate it into a connection to www.google.com with the HTTP1.1
request.
Example:
 GET/path/file.html HTTP1.1
 Host: www.google.com
 The server on www.google.com will append the given path of its root directory.

Load
 It can handle only a limited number of concurrent client connections (usually between 2 and
80000 by default between 500 and 1000) per IP address and it can serve only a certain
number of requests per second.
 Its own setting.
 HTTP request type
 Content type (static or dynamic document)
 Hardware and software limitations of OS

P a g e | 69 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Server
Server Name Foundation
1 Apache Apache
2 IIS (Internet Information Microsoft
Server)
3 Nginx Igarsysoev
4 GWS Google
5 Sun Java System Web Server Oracle
6 Lighttpd lighttpd

13. Write short notes on DHTML? (5 MARKS)

 Dynamic Hyper Text Markup Language (DHTML) is a technique of dynamically changing the
rendering content of the HTML code.
 DHTML is the ability to create visually outstanding HTML documents that interact with the user,
without relying on server side programs or complicated set of HTML pages to achieve special
effects.
 It makes possible for the web pages to react to the user actions or to the changes.
 The image can be animated when the mouse moves over it or certain part of the document a
separate design can be applied.
 In DHTML, we can hide text and images of a document for a given period of time, create timers
that automatically refresh the content of a document with the latest data, create a form which
can be readily filled up with data, which can be processed and accessed immediately.
 The 3 different technologies in DHTML are
1. Client side scripting (JavaScript or VB Script)
2. Cascading Style Sheets (CSS)
3. Document Object Model (DOM)

DHTML

CSS Client side

scripting DOM

The contents of web pages are

1. Hide text and images in document and keep this content hidden until a given time elapses or
the user interacts with the page.

P a g e | 70 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

2. Animate text and images in document, independently moving each element from any starting
point to any ending point.
3. Create a timer that automatically refreshes the content of a document with the latest news,
stock quotes, cricket scores, etc.
4. Animated audio and video files (visual change)
5. Create a form and then instantly read, process and respond to the data. The user enters in the
form.
6. DHTML can be
a. Internet Explorer: VB Script and JavaScript both works
b. Netscape Navigator: JavaScript
7. Forms processing (validation, calculations)
8. Changing text (moving, scrolling, blinking, etc…)

14. Explain in detail about Cascading Style Sheets? (11 MARKS)

Introduction to (CSS):
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External style sheets are stored in CSS files.
 CSS are rules or styles for organizing the layout of an HTML document including its color,
typefaces, margins, links and other formatting elements.
 Style sheets make it easier to create an index because indexing software has only to read the
structural elements rather than full content page.
 User includes multiple set of style sheet information.
 It contains rules, composed of selectors and declarations that define how styles are applied.
 The selector (HTML element, class name or ID name) is the link between the HTML document
and the style.
 HTML element tags
 Attributes (class, ID name)

Rule or Syntax:
A CSS rule set consists of a selector and a declaration block:
Selector { property1: value1; property2: value2; } or tagname {style_attribute value:}
h1 { color : blue; font-size : 12px; }
 The selector points to the HTML element you want to style.
 The declaration block contains one or more declarations separated by semicolons.
 Each declaration includes a property name and a value, separated by a colon.

P a g e | 71 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Example 1:
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly
braces:
p{
color:red;
text-align:center;
}
Example 2:
<html>
<head>
<style type="text/css" >
body {background-color:yellow;}
h1 {font-size:36pt;}
h2 {color:blue;}
p {margin-left:50px;}
</style>
</head>
<body>
<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>
</body>
</html>
 To assign more than one kind of style information at the same time, separate the styles with
semicolon.

Example 3:
<style>
body{font: 10pt times; color: black; margin-left: 1in; margin-right: 1in}
</style>
 An external style sheet to a document or documents on a site. To link a page to this style sheet
use the link element.
 Ex: <link ref=style type=”text/css” href=”http://www.google.com/mystyle.css”>

Property Values:
 em – overall height of current font <style = font-size: 2em>
 px – pixels < style = font-size: 8px>
 in – inches < style = font-size: -5in>

P a g e | 72 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

 pt – point size < style = font-size: 8pt>

URL:
 When URL are used as a property value, specify the keyword URL followed by the actual URL
inside parenthesis.
 Ex: <body style=”background-image: url (….)”>

Image:

<img align=top|middle|center|bottom|left|right alt=text border=n class=type controls dynsrc=url

height=n space=n ID=value ismap=image start=start-event>
 Alt=text
 Specifies text that will be displayed in place of the pictures if show pictures is turned
off
 class=type
 indicates the class to which the element belongs
 controls
 if a video clip is present, displays a set of controls under the clip
 dynsrc=url
 specifies the address of a video clip
 id=value
 specifies a unique value for the element over the document
 ismap=image
 Identifies the picture as a server-side image map. Clicking the picture transmits the
coordinates of the click back to the server, triggering a jump to another.
 Loop=n
 Specifies how many times a video clip will loop when activated.
 Start=start-event
 Specifies when the file specified by the dynsrc=attribute should start playing
 FILEOPEN
 MOUSEOPEN

Other Style Properties:

 font-style normal|italic|oblique
 font-variant normal|small-caps
 font-weight normal|bold|bolder|lighter|100…|900
 font-size absolute-size|relative-size
 background-image url|filename
 background-color color
 background-position top|center|bottom|left|right

P a g e | 73 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

 text-decoration underline|overline|line-through|blink
 text-transform capitalize|uppercase|lowercase
15. Write a short note on Features of CSS? (6 MARKS)

A Cascading Style Sheets (CSS) file can contain positioning, layout, font, colors and style
information for an entire web site. The file can be referenced by each html file on the site.
CSS is a means of separating the content of an html document from the style and layout of that
document.

Making changes to the layout

CSS makes it very easy to change the style of a document. Let's say we wanted to move the
picture in the title of this page to the right by 10 pixels. This would be a nightmare in a table based
design. We would have to open every page and alter the table width manually.
Fortunately we have used CSS, and all we have to do is open our CSS file which stores the
layout of the site, and change the number relating to the position of the image. That will change his
position throughout the whole site.
The look and layout of a site can be changed beyond recognition just by altering the CSS file.
This makes CSS indispensable for large web sites.

File Size
Probably the mostly useful feature of CSS is that all of the style and layout is removed from
the html, so the html page size is very much smaller. The CSS file is downloaded just once by the
visitor's browser and re-used for different pages on a web site. This reduces the bandwidth
requirements for your server and also ensures a faster download for your visitors.

Search Engines
A search engine robot will normally consider the content in the start of your html code is
more important than the text towards the end of the code. For a table based page the contents of the
navigation bar will normally show up as the page description in search engine results. With a CSS
page the navigation can be moved to the bottom of the source code, so the search engine displays
your content instead of your navigation.

Accessibility
Separating style from content makes life very easy for visitors who prefer to view only the
content of a web page, or to modify the content. These could be blind or partially sighted people who
might use a screen reader to interpret a page.

Consistency
Layout and position of navigation can be completely consistent across a site. This was
previously possible only using frame.

P a g e | 74 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

CSS saves time

With CSS, you only have to specify these details once for any element. CSS will automatically
apply the specified styles whenever that element occurs.

Pages load faster

Less code means faster download times.

Easy maintenance
To change the style of an element looks across the whole site, you only have to make an edit in one
place.

Superior styles to HTML

CSS was built for styles. HTML was not. While browsers usually display HTML elements in a
certain way, you can override this with CSS.

Search Engine Optimization

CSS features a coding technique that is clear-cut and simple to read. Search engines will no
longer have to struggle to comprehend your website content. The advantage of improved
accessibility of content will allow a broader number of users to locate you on the Internet. Less code
and more content equals search engine success.

Browser Compatibility
Browser compatibility is very important and CSS addresses this issue nicely. When you
decide to use CSS, you will find that it will improve the characteristic of your website while securing
your visitors with the capacity to view your website as precisely as you have designed it to be.

Appearance
CSS makes it easy to improve the appearance of a website by allowing you to create a much
more stylish website since CSS offers a wide array of expressive style capableness. With CSS, you will
actually obtain more control over your website's visual aspect. Now, designers can orchestrate the
styles and design of several web pages in a flash.

Bandwidth Savings
Once CSS takes apart your websites content from its design language, you will trim down
your file transfer magnitude significantly. These Bandwidth savings are considerable figures of
insignificant tags that are distracted from a multitude of pages. This will leave less, but more
significant captions, listings and paragraphs.

P a g e | 75 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

16. Explain in detail about Selectors in CSS? (6 MARKS)

CSS Selectors:
 CSS selectors allow you to select and manipulate HTML elements.
 CSS selectors are used to "find" (or select) HTML elements based on their id, class, type,
attribute, grouping and more.

1. The element Selector:

 The element selector selects elements based on the element name.
 You can select all <p> elements on a page like this (in this case, all <p> elements will be
center-aligned, with a red text color):

Example:
p{
text-align: center;
color: red;
}

2. The id Selector:
 The id selector uses the id attribute of an HTML element to select a specific element.
 An id should be unique within a page, so the id selector is used if you want to select a single,
unique element.
 To select an element with a specific id, write a hash character, followed by the id of the
element.
 The style rule below will be applied to the HTML element with id="para1":

Example:
#para1 {
text-align: center;
color: red;
}

3. The class Selector:

 The class selector selects elements with a specific class attribute.
 To select elements with a specific class, write a period character, followed by the name of the
class:
Syntax:
<style type=”text/css”>
.classname {style_attribute: value;}

P a g e | 76 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

</style>

In the example below, all HTML elements with class="center" will be red and center-aligned:

Example1:
.center{
text-align: center;
color: red;
}

 You can also specify that only specific HTML elements should be affected by a class.
 In the example below, all <p> elements with class="center" will be center-aligned:

Example 2:
p.center{
text-align: center;
color: red;
}

4. Grouping Selectors:
 Size of the style sheets can be reduced using grouping
 One can group selectors in comma-separates list.

If you have elements with the same style definitions, like this:
h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p{
text-align: center;
color: red;
}
 You can group the selectors, to minimize the code.
 To group selectors, separate each selector with a comma.

P a g e | 77 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

In the example below we have grouped the selectors from the code above:

Example:
h1, h2, p {
text-align: center;
color: red;
}

Con-textual Selectors:
 Setting all style properties one can create defaults and then list the expectations.
 ‘em’ elements within ‘H1’ a different color specify as H1 {color: blue} em {color: red} or H1,
em {color: red}
 Em elements within H1 should turn red and the color format.
 Several contextual selectors can be grouped together as: H1 B, H2 B, H1 em, H2 em {color:
red}

17. Explain in detail about Attributes in CSS? (6 MARKS)

It is possible to style HTML elements that have specific attributes or attribute values.

1. CSS [attribute] Selector:

 The [attribute] selector is used to select elements with a specified attribute.
 The following example selects all <a> elements with a target attribute:
a[target] {
background-color: yellow;
}

2. CSS [attribute="value"] Selector:

 The [attribute="value"] selector is used to select elements with a specified attribute and
value.
 The following example selects all <a> elements with a target="_blank" attribute:
a[target="_blank"] {
background-color: yellow;
}

3. CSS [attribute~="value"] selector:

 The [attribute~="value"] selector is used to select elements with an attribute value
containing a specified word.
 The following example selects all elements with a title attribute that contains a space-
separated list of words, one of which is "flower":
[title~="flower"] {
border: 5px solid yellow;

P a g e | 78 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

4. CSS [attribute|="value"] selector:

 The [attribute|="value"] selector is used to select elements with the specified attribute
starting with the specified value.
 The following example selects all elements with a class attribute value that begins with "top":
[class|="top"] {
background: yellow;
}
5. CSS [attribute^="value"] Selector:
 The [attribute^="value"] selector is used to select elements whose attribute value begins
with a specified value.
 The following example selects all elements with a class attribute value that begins with "top":
[class^="top"] {
background: yellow;
}

6. CSS [attribute$="value"] selector:

 The [attribute$="value"] selector is used to select elements whose attribute value ends with
a specified value.
 The following example selects all elements with a class attribute value that ends with "test":
[class$="test"] {
background: yellow;
}

7. CSS [attribute*="value"] selector:

 The [attribute*="value"] selector is used to select elements whose attribute value contains
a specified value.
 The following example selects all elements with a class attribute value that contains "te":
[class*="te"] {
background: yellow;
}

P a g e | 79 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

18. Explain the various Cascading Style Sheet? (11 MARKS)

There are 4 ways of adding styles to web page

1. Internal style sheet within the head tags of the HTML document
2. Link to an external style sheet from the HTML document
3. Import an external style sheet into the document
4. Inline style sheet added into the middle of the HTML document

External Style Sheet:

 With an external style sheet, you can change the look of an entire website by changing just
one file!
 Each page must include a reference to the external style sheet file inside the <link> element.
The <link> element goes inside the <head> section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

 An external style sheet can be written in any text editor. The file should not contain any html
tags. The style sheet file must be saved with a .css extension.
An example of a style sheet file called "myStyle.css", is shown below:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

Example:
style.css
/*External Style Sheet*/
body {font-family: arial}
a.node {text-decoration: none}
a.hover {text-decoration: underline}
li em {font-weight: bold}
h1, em {text-decoration: underline}
ul {margin-left: 20px}
.ul {font-size: .8em;}

P a g e | 80 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

external.html
<html>
<head>
<title> Linking External Style Sheets</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Shopping list for <em> monday</h1>
<ul>
<li>Milk</li>
<li>Bread
<ul>
<li>White Bread</li>
<li>Wheat Bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potato</li>
</ul>
<p><em>Go to the</em>
<a class="nodec" href="http://www.dietel.com">Store</a>
</p>
</body>
</html>

Output:

P a g e | 81 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Internal Style Sheet:

 An internal style sheet may be used if one single page has a unique style.
 Internal styles are defined within the <style> element, inside the head section of an HTML
page:

Example 1:
<head>
<style type="text/css" >
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

Example 2:
<html>
<head>
<title>Style Sheet</title>
<!-- Style Sheet -->
<style type="text/css">
em {font-weight: bold; color: blue}
h1 {font-family: times}
p {font-size: 12px; font-family: arial}
.special {color: blue}
</style>
</head>
<body>
<!-- Class Attribute -->
<h1 class="special"> Web Technology </h1>
<p> Deitel &nbsp; </p>
<h1> Client </h1>
<p class="special"> Server side<em>Computing</em></p>
</body>
</html>

P a g e | 82 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Output:

Inline Style Sheet:

 An inline style may be used to apply a unique style for a single element.
 An inline style loses many of the advantages of a style sheet (by mixing content with
presentation). Use this method sparingly!
 To use inline styles, add the style attribute to the relevant element. The style attribute can
contain any CSS property.

Example:

The example below shows how to change the color and the left margin of a <h1> element:
<h1 style="color: blue; margin-left: 30px ;"> This is a heading. </h1>

P a g e | 83 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

19. Explain briefly about JavaScript in detail? (5 MARKS)

 JavaScript is the programming language of HTML and the Web.

 Programming makes computers do what you want them to do.
 JavaScript to program the behavior of web pages.
 JavaScript is an object-oriented language that allows creation of interactive Web pages.
 JavaScript allows user entries, which are loaded into an HTML form to be processed as required.

What is JavaScript?
JavaScript is a scripting language mainly used for writing dynamic Web pages. When a script
written in JavaScript is embedded in a Web page, it will be executed by the Web browser on the
client machine.
JavaScript supports functions as first-class functions - Functions are really objects. Like regular
objects, functions can be created during execution, stored in data structure, and passed to other
functions as arguments.
 JavaScript is a client – side scripting language for the World Wide Web that is similar to the
syntax of the Java programming language.
 JavaScript is designed to provide limited programming functionality.

Why JavaScript?
 By executing more web functionality on the user’s machine, webmasters can optimize their
servers to serve more pages.
 The decrease in traffic from constant interaction with the server can also improve a server's
performance.
 Because the local machine is doing the script processing, the user can view web pages much
faster.

JavaScript Syntax:
A simple JavaScript program:
<html>
<head>
<Title> Hello World </Title>
</head>
<body>
<script language=“javascript”>
document.write(“Hello,World wide web”);
</script>
</body>
</html>

P a g e | 84 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

20. Explain the JavaScript in Perspective in detail? (6 MARKS)

Javascript is a dynamic computer programming language. It is lightweight and most

commonly used as a part of web pages, whose implementations allow client-side script to interact
with the user and make dynamic pages. It is an interpreted programming language with object-
oriented capabilities.

JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript,
possibly because of the excitement being generated by Java. JavaScript made its first appearance in
Netscape 2.0 in 1995 with the name LiveScript. The general-purpose core of the language has been
embedded in Netscape, Internet Explorer, and other web browsers.

The ECMA-262 Specification defined a standard version of the core JavaScript language.
 JavaScript is a lightweight, interpreted programming language.
 Designed for creating network-centric applications.
 Complementary to and integrated with Java.
 Complementary to and integrated with HTML.
 Open and cross-platform

Client-side JavaScript:

 Client-side JavaScript is the most common form of the language. The script should be
included in or referenced by an HTML document for the code to be interpreted by the
browser.
 It means that a web page need not be a static HTML, but can include programs that interact
with the user, control the browser, and dynamically create HTML content.
 The JavaScript client-side mechanism provides many advantages over traditional CGI server-
side scripts. For example, you might use JavaScript to check if the user has entered a valid e-
mail address in a form field.
 The JavaScript code is executed when the user submits the form, and only if all the entries
are valid, they would be submitted to the Web Server.
 JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and
other actions that the user initiates explicitly or implicitly.

Advantages of JavaScript:

The merits of using JavaScript are −

 Less server interaction − You can validate user input before sending the page off to the
server. This saves server traffic, which means less load on your server.
 Immediate feedback to the visitors − They don't have to wait for a page reload to see if
they have forgotten to enter something.

P a g e | 85 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

 Increased interactivity − You can create interfaces that react when the user hovers over
them with a mouse or activates them via the keyboard.
 Richer interfaces − You can use JavaScript to include such items as drag-and-drop
components and sliders to give a Rich Interface to your site visitors.

Limitation s of JavaScript:

The JavaScript as a full-fledged programming language. It lacks the following important features
 Client-side JavaScript does not allow the reading or writing of files. This has been kept for
security reason.
 JavaScript cannot be used for networking applications because there is no such support
available.
 JavaScript doesn't have any multithreading or multiprocessor capabilities.
 JavaScript is a lightweight, interpreted programming language that allows you to build
interactivity into otherwise static HTML pages.

JavaScript Development Tools:

One of major strengths of JavaScript is that it does not require expensive development tools.
You can start with a simple text editor such as Notepad. Since it is an interpreted language inside
the context of a web browser, you don't even need to buy a compiler.
To make our life simpler, various vendors have come up with very nice JavaScript editing tools.
Some of them are listed here −
 Microsoft FrontPage − Microsoft has developed a popular HTML editor called FrontPage.
FrontPage also provides web developers with a number of JavaScript tools to assist in the
creation of interactive websites.
 Macromedia Dreamweaver MX − Macromedia Dreamweaver MX is a very popular HTML
and JavaScript editor in the professional web development crowd. It provides several handy
prebuilt JavaScript components, integrates well with databases, and conforms to new
standards such as XHTML and XML.
 Macromedia HomeSite 5 − HomeSite 5 is a well-liked HTML and JavaScript editor from
Macromedia that can be used to manage personal websites effectively.

P a g e | 86 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

21. Write a short note on JavaScript Syntax? (6 MARKS)

JavaScript Syntax:
 JavaScript can be implemented using JavaScript statements that are placed within
the <script>... </script> HTML tags in a web page.
 You can place the <script> tags, containing your JavaScript, anywhere within you web page,
but it is normally recommended that you should keep it within the <head> tags.
 JavaScript can be placed in the <body> and the <head> sections of an HTML page.
 The <script> tag alerts the browser program to start interpreting all the text between these
tags as a script.

A simple syntax of your JavaScript will appear as follows.

<script…>
JavaScript code
</script>

The script tag takes two important attributes −

 Language − This attribute specifies what scripting language you are using. Typically, its
value will be Javascript. Although recent versions of HTML have phased out the use of this
attribute.
 Type − This attribute is what is now recommended to indicate the scripting language in use
and its value should be set to "text/javascript".

The JavaScript segment will look like –

<script language="Javascript" type="text/Javascript">
JavaScript code
</script>
The sample example to print out "Hello World". We added an optional HTML comment that
surrounds our JavaScript code. This is to save our code from a browser that does not support
JavaScript. The comment ends with a "//-->". Here "//" signifies a comment in JavaScript, so we add
that to prevent a browser from reading the end of the HTML comment as a piece of JavaScript code.
Next, we call a function document.write which writes a string into our HTML document.

This function can be used to write text, HTML, or both. Take a look at the following code.
<html>
<body>
<script language="Javascript" type="text/Javascript">
document.write("Hello World!")
</script>
</body>
</html>

P a g e | 87 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Output:
This code will produce the following result –
Hello World!

White Space and Line Breaks:

JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs. You can
use spaces, tabs, and newlines freely in your program and you are free to format and indent your
programs in a neat and consistent way that makes the code easy to read and understand.

Semicolons are Optional:

Simple statements in JavaScript are generally followed by a semicolon character, just as they
are in C, C++, and Java. JavaScript, however, allows you to omit this semicolon if each of your
statements are placed on a separate line.
For example, the following code could be written without semicolons.

<script language="javascript" type="text/javascript">

var1 = 10
var2 = 20
</script>

But when formatted in a single line as follows, you must use semicolons −

<script language="javascript" type="text/javascript">

var1 = 10; var2 = 20;
</script>

Case Sensitivity:
 JavaScript is a case-sensitive language. This means that the language keywords, variables,
function names, and any other identifiers must always be typed with a consistent
capitalization of letters.
 So the identifiers Time and TIME will convey different meanings in JavaScript.

Comments in JavaScript:
JavaScript supports both C-style and C++-style comments.
 Any text between a // and the end of a line is treated as a comment and is ignored by
JavaScript.
 Any text between the characters /* and */ is treated as a comment. This may span multiple
lines.
 JavaScript also recognizes the HTML comment opening sequence <!--. JavaScript treats this
as a single-line comment, just as it does the // comment.
 The HTML comment closing sequence --> is not recognized by JavaScript so it should be
written as //-->.
P a g e | 88 WEB TECHNOLOGY DEPARTMENT OF CSE
 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Example:
The following example shows how to use comments in JavaScript.
<script language="javascript" type="text/javascript">
<!--
// This is a comment. It is similar to comments in C++
/*
* This is a multiline comment in JavaScript
* It is very similar to comments in C Programming
*/
//-->
</script>

22. Explain the JavaScript Variables? (6 MARKS)

JavaScript Variables:
 JavaScript variables are containers for storing data values.
 You can place data into these containers and then refer to the data simply by naming the
container.
 Before you use a variable in a JavaScript program, you must declare it.

Variables are declared with the var keyword as follows.

<script type="text/javascript">
var money;
var name;
</script>

You can also declare multiple variables with the same var keyword as follows –
<script type="text/javascript">
var money, name;
</script>
JavaScript Identifiers:
 All JavaScript variables must be identified with unique names.
 These unique names are called identifiers.
 JavaScript identifiers are case-sensitive.
 Identifiers can be short names (like x and y), or more descriptive names (age, sum,
totalVolume).

P a g e | 89 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

The general rules for constructing names for variables (unique identifiers) are:
 Names can contain letters, digits, underscores, and dollar signs.
 Names must begin with a letter.
 Names can also begin with $ and _.
 Names are case sensitive (y and Y are different variables).
 Reserved words (like JavaScript keywords) cannot be used as names.

Storing a value in a variable is called variable initialization. You can do variable initialization at
the time of variable creation or at a later point in time when you need that variable.
For instance, you might create a variable named money and assign the value 2000.50 to it later. For
another variable, you can assign a value at the time of initialization as follows.

<script type="text/javascript">
var name = "Ali";
var money;
money = 2000.50;
</script>

Use the var keyword only for declaration or initialization, once for the life of any variable name in a
document. You should not re-declare same variable twice.

JavaScript is untyped language. This means that a JavaScript variable can hold a value of any data
type. Unlike many other languages, you don't have to tell JavaScript during variable declaration
what type of value the variable will hold. The value type of a variable can change during the
execution of a program and JavaScript takes care of it automatically.

JavaScript Variable Scope:

The scope of a variable is the region of your program in which it is defined. JavaScript variables
have only two scopes.
1. Global Variables − A global variable has global scope which means it can be defined
anywhere in your JavaScript code.
2. Local Variables − A local variable will be visible only within a function where it is defined.
Function parameters are always local to that function.

Within the body of a function, a local variable takes precedence over a global variable with the same
name. If you declare a local variable or function parameter with the same name as a global variable,
you effectively hide the global variable.

P a g e | 90 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Example:
<script type="text/javascript">
var myVar = "global"; // Declare a global variable
function checkscope( ) {
var myVar = "local"; // Declare a local variable
document.write(myVar);
}
</script>

Output:
This produces the following result –
local

JavaScript Reserved Words:

 A list of all the reserved words in JavaScript are given in the following table.
 They cannot be used as JavaScript variables, functions, methods, loop labels, or any object
names.

abstract else instanceof switch

boolean enum int synchronized
break export interface this
byte extends long throw
case false native throws
catch final new transient
char finally null true
class float package try
const for private typeof
continue function protected var
debugger goto public void
default if return volatile
delete implements short while
do import static with
double in super

P a g e | 91 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

23. Explain the data types in JavaScript? (6 MARKS)

JavaScript Data Types:

JavaScript provides different data types to hold different types of values. There are two types of
data types in JavaScript.
1. Primitive data type
2. Non-primitive (reference) data type

JavaScript is a dynamic type language, means you don't need to specify type of the variable because
it is dynamically used by JavaScript engine. You need to use var here to specify the data type.
It can hold any type of values such as numbers, strings etc.
For example:
 var a=40; //holding number
 var b="Rahul"; //holding string

1. JavaScript primitive data types:

There are five types of primitive data types in JavaScript. They are as follows:

Data Type Description

String represents sequence of characters e.g.
"hello"
Number represents numeric values e.g. 100
Boolean represents boolean value either false or
true
Undefined represents undefined value
Null represents null i.e. no value at all

(i) JavaScript String:

 A string (or a text string) is a series of characters like "John Doe".
 Strings are written with quotes. You can use single or double quotes:

Example:
var carName = "Volvo XC60"; //Using double quotes
var carName = 'Volvo XC60'; // Using single quotes

You can use quotes inside a string, as long as they don't match the quotes surrounding the string:

Example:
var answer = "It's alright"; // Single quote inside double quotes
var answer = "He is called 'Johnny'"; // Single quotes inside double quotes
var answer = 'He is called "Johnny"'; // Double quotes inside single quotes

P a g e | 92 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

(ii) Javascript Number:

 JavaScript has only one type of numbers.
 Numbers can be written with, or without decimals:

Example:
var x1 = 34.00; // Written with decimals
var x2 = 34; // Written without decimals

Extra-large or extra small numbers can be written with scientific (exponential) notation:

Example:
var y = 123e5; // 12300000
var z = 123e-5; // 0.00123

(iii) JavaScript Boolean:

 Booleans can only have two values: true or false.
 Booleans are often used in conditional testing.

Example:
var x = true;
var y = false;

(iv) Undefined:
In JavaScript, a variable without a value, has the value undefined. The typeof is also undefined.

Example:
var person; // Value is undefined, type is undefined

Any variable can be emptied, by setting the value to undefined. The type will also be undefined.

(v) Empty Values

 An empty value has nothing to do with undefined.
 An empty string variable has both a value and a type.

Example:
var car = ""; // The value is "", the typeof is string

P a g e | 93 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

(vi) Null:
 In JavaScript null is "nothing". It is supposed to be something that doesn't exist.
 Unfortunately, in JavaScript, the data type of null is an object.

You can empty an object by setting it to null:

Example:
var person = null; // Value is null, but type is still an object

You can also empty an object by setting it to undefined:

Example:
var person = undefined; // Value is undefined, type is undefined

2. JavaScript non-primitive data types:

The non-primitive data types are as follows:

Data Type Description

Object represents instance through which we can access
members
Array represents group of similar values
RegExp represents regular expression

(i) JavaScript Object:

 JavaScript objects are written with curly braces.
 Object properties are written as name:value pairs, separated by commas.

Example:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
The object (person) in the example above has 4 properties: firstName, lastName, age, and eyeColor.

(ii) JavaScript Array:

 JavaScript arrays are written with square brackets.
 Array items are separated by commas.

The following code declares (creates) an array called cars, containing three items (car names):

Example:
var cars = ["Saab", "Volvo", "BMW"];
Array indexes are zero-based, which means the first item is [0], second is [1], and so on.

P a g e | 94 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

(iii) JavaScript RegExp:

 A regular expression is an object that describes a pattern of characters.
 Regular expressions are used to perform pattern-matching and "search-and-replace"
functions on text.

Syntax:
/pattern/modifiers;

Example:
var patt = /w3schools/i
 /w3schools/i is a regular expression.
 w3schools is a pattern (to be used in a search).
 i is a modifier (modifies the search to be case-insensitive).

24. Explain the JavaScript Statements? (6 MARKS)

Conditional statements are used to perform different actions based on different conditions.

In JavaScript we have the following conditional statements:

i. Use if to specify a block of code to be executed, if a specified condition is true.
ii. Use else to specify a block of code to be executed, if the same condition is false.
iii. Use else if to specify a new condition to test, if the first condition is false.
iv. Use switch to specify many alternative blocks of code to be executed.

The if Statement:
Use the if statement to specify a block of JavaScript code to be executed if a condition is true.

Syntax:
if (condition)
{
block of code to be executed if the condition is true
}

Example:
Make a "Good day" greeting if the hour is less than 18:00:
if (hour < 18)
{
greeting = "Good day";
}

P a g e | 95 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

The result of greeting will be:

Good day
(ii) The else Statement:
Use the else statement to specify a block of code to be executed if the condition is false.

Syntax:
if (condition)
{
block of code to be executed if the condition is true
}
else
{
block of code to be executed if the condition is false
}

Example:
If the hour is less than 18, create a "Good day" greeting, otherwise "Good evening":
if (hour < 18)
{
greeting = "Good day";
}
else
{
greeting = "Good evening";
}

The result of greeting will be:

Good day

(iii) The else if Statement:

Use the else if statement to specify a new condition if the first condition is false.

Syntax:
if (condition1)
{
block of code to be executed if condition1 is true
}
else if (condition2)

P a g e | 96 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

{
block of code to be executed if the condition1 is false and condition2 is true
}

else
{
block of code to be executed if the condition1 is false and condition2 is false
}

Example:
If time is less than 10:00, create a "Good morning" greeting, if not, but time is less than
20:00, create a "Good day" greeting, otherwise a "Good evening":
if (time < 10)
{
greeting = "Good morning";
}
else if (time < 20)
{
greeting = "Good day";
}
else
{
greeting = "Good evening";
}

The result of greeting will be:

Good day

P a g e | 97 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

25. Explain the JavaScript Operators with an example? (6 MARKS)

JavaScript supports the following types of operators.
1. Arithmetic Operators
2. Comparison Operators
3. Logical (or Relational) Operators
4. Bitwise Operators
5. Assignment Operators
6. Conditional (or ternary) Operators

Arithmetic Operators:
Arithmetic operators are used to perform arithmetic on numbers (literals or variables).

Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
-- Decrement

Comparison Operators:
JavaScript supports the following comparison operators.

Operator Description
== Equal
!= Not Equal
> Greater than
< Less than
>= Greater than or Equal
to
<= Less than or Equal to

Logical (or Relational) Operators:

JavaScript supports the following logical operators.

P a g e | 98 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Operator Description
&& Logical AND
|| Logical OR
! Logical NOT

Bitwise Operators:
JavaScript supports the following bitwise operators.

Operator Description
& Bitwise AND
| Bitwise OR
^ Bitwise XOR
~ Bitwise Not
<< Left Shift
>> Right Shift
>>> Right shift with Zero

Assignment Operators:
JavaScript supports the following assignment operators.

Operator Description
= x=y
+= x+=y
-= x-=y
*= x *= y
/= x /= y
%= x %= y

Miscellaneous Operator:

The two Miscellaneous operators are

 conditional operator (? :)
 typeof operator.

Conditional Operator (? :)

The conditional operator first evaluates an expression for a true or false value and then
executes one of the two given statements depending upon the result of the evaluation.

S.No Operator and Description

1 ? : (Conditional )

P a g e | 99 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

If Condition is true? Then value X : Otherwise value Y

Example:
The following code to understand how the Conditional Operator works in JavaScript.
<html>
<body>
<script type="text/javascript">
var a = 10;
var b = 20;
var linebreak = "<br />";

document.write ("((a > b) ? 100 : 200) => ");

result = (a > b) ? 100 : 200;
document.write(result);
document.write(linebreak);

document.write ("((a < b) ? 100 : 200) => ");

result = (a < b) ? 100 : 200;
document.write(result);
document.write(linebreak);
</script>
</body>
</html>

Output:
((a > b) ? 100 : 200) => 200
((a < b) ? 100 : 200) => 100

typeof operator:
 The typeof operator is a unary operator that is placed before its single operand, which can
be of any type. Its value is a string indicating the data type of the operand.
 The typeof operator evaluates to "number", "string", or "boolean" if its operand is a number,
string, or boolean value and returns true or false based on the evaluation.
 The list of the return values for the typeof Operator.

Type String Returned by typeof

Number "number"
String "string"
Boolean "boolean"

P a g e | 100 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Object "object"
Function "function"
Undefined "undefined"
Null "object"

Example:
The following code shows how to implement typeof operator.
<html>
<body>
<script type="text/javascript">
var a = 10;
var b = "String";
var linebreak = "<br />";

result = (typeof b == "string" ? "B is String" : "B is Numeric");

document.write("Result => ");
document.write(result);
document.write(linebreak);

result = (typeof a == "string" ? "A is String" : "A is Numeric");

document.write("Result => ");
document.write(result);
document.write(linebreak);
</script>
</body>
</html>

Output:
Result => B is String
Result => A is Numeric

P a g e | 101 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

26. Explain the JavaScript Literals with an example? (6 MARKS)

The various Javascript literals are
1. String literals
2. Array literals
3. Integer literals
4. Floating pointing literals
5. Boolean literals
6. Object literals

String literals:
A string literal is zero or more characters, either enclosed in single quotation (') marks
or double quotation (") marks. You can also use + operator to join strings. The following are
the examples of string literals:
i. string1 = "w3resource.com"
ii. string1 = 'w3resource.com'
iii. string1 = "1000"
iv. string1 = "google" + ".com"
In addition to ordinary characters, you can include special characters in strings, as shown in the
following table.
string1 = "First line. \n Second line."
Character Meaning
\b Backspace
\f Form feed
\n New line
\r Carriage return
\t Tab
\' Single quote
\" Double quote
\\ Backslash character
(\)

Array literals
In Javascript an array literal is a list of expressions, each of which represents an array
element, enclosed in a pair of square brackets ' [ ] ' .

P a g e | 102 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

When an array is created using an array literal, it is initialized with the specified values as its
elements, and its length is set to the number of arguments specified. If no value is supplied it creates
an empty array with zero length.

Creating an empty array :

var fruits = [ ];

Creating an array with four elements

var fruits = ["Orange", "Apple", "Banana", "Mango"]

Integer literals:
An integer must have at least one digit (0-9).
 No comma or blanks are allowed within an integer.
 It does not contain any fractional part.
 It can be either positive or negative, if no sign precedes it is assumed to be positive.

In JavaScript, integers can be expressed in three different bases.

1. Decimal (base 10)
Decimal numbers can be made with the digits 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 and there will be no
leading zeros.
Example: 123, -20, 12345
2. Hexadecimal (base 16)
Hexadecimal numbers can be made with the digits 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 and letters A, B, C,
D, E, F or a, b, c, d, e, f. A leading 0x or 0X indicates the number is hexadecimal.
Example: 7b, -14, 3039
3. Octal (base 8)
Octal numbers can be made with the digits 0, 1, 2, 3, 4, 5, 6, 7. A leading 0 indicates the
number is octal.
Example: 173, -24, 30071

Floating pointing literals:

A floating number has the following parts.
 A decimal integer.
 A decimal point ('.').
 A fraction.
 An exponent.

The exponent part is an "e" or "E" followed by an integer, which can be signed (preceded by "+" or
"-").

P a g e | 103 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Example:
 8.2935
 -14.72
 12.4e3 [ Equivalent to 12.4 x 103 ]
 4E-3 [ Equivalent to 4 x 10-3 => .004 ]
Boolean literals:
The Boolean type has two literal values:
 true
 false

Object literals:
An object literal is zero or more pairs of comma separated list of property names and associated
values, enclosed by a pair of curly braces.

In JavaScript an object literal is declared as follows:

1. An object literal without properties:
var userObject = {}

2. An object literal with a few properties :

var student = {
First-name : "Suresy",
Last-name : "Rayy",
Roll-No : 12
};

Syntax rules:
Object literals maintain the following syntax rules:
 There is a colon (:) between property name and value.
 A comma separates each property name/value from the next.
 There will be no comma after the last property name/value pair.

P a g e | 104 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

27. Explain the JavaScript Functions with an example? (11 MARKS)

 A function is a group of reusable code which can be called anywhere in your program. This
eliminates the need of writing the same code again and again. It helps programmers in writing
modular codes.
 Functions allow a programmer to divide a big program into a number of small and manageable
functions.
 A JavaScript function is a block of code designed to perform a particular task.
 A JavaScript function is executed when "something" invokes it (calls it).

JavaScript Function Syntax:

 A JavaScript function is defined with the function keyword, followed by a name, followed by
parentheses ().
 Function names can contain letters, digits, underscores, and dollar signs.
 The parentheses may include parameter names separated by commas:(parameter1,
parameter2, ...)
The code to be executed, by the function, is placed inside curly brackets: {}
function name(parameter1, parameter2, parameter3)
{
code to be executed
}
 Function parameters are the names listed in the function definition.
 Function arguments are the real values received by the function when it is invoked.
 Inside the function, the arguments behave as local variables.

Function Invocation:
The code inside the function will execute when "something" invokes (calls) the function:
 When an event occurs (when a user clicks a button)
 When it is invoked (called) from JavaScript code
 Automatically (self-invoked)

Function Return:
 When JavaScript reaches a return statement, the function will stop executing.
 If the function was invoked from a statement, JavaScript will "return" to execute the code after
the invoking statement.

P a g e | 105 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

 Functions often compute a return value. The return value is "returned" back to the "caller":

Example:
Calculate the product of two numbers, and return the result:
var x = myFunction(4, 3); // Function is called, return value will end up in x

function myFunction(a, b) {
return a * b; // Function returns the product of a and b
}

The result in x will be:

12

Calling Function:
To invoke a function somewhere later in the script, you would simply need to write the name of that
function as shown in the following code.
<html>
<head>
<script type="text/javascript">
function sayHello()
{
document.write ("Hello there!");
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="sayHello()" value="Say Hello">
</form>
<p>Use different text in write method and then try...</p>
</body>
</html>

Output:
Click the following button to call the function

P a g e | 106 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Use different parameters inside the function and then try...

Hello there!

Function Parameters:
There is a facility to pass different parameters while calling a function. These passed parameters
can be captured inside the function and any manipulation can be done over those parameters. A
function can take multiple parameters separated by comma.

Example:
<html>
<head>
<script type="text/javascript">
function sayHello(name, age)
{
document.write (name + " is " + age + " years old.");
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="sayHello('Zara', 7)" value="Say Hello">
</form>
<p>Use different parameters inside the function and then try...</p>
</body>
</html>

Output:
Click the following button to call the function

Use different parameters inside the function and then try...

Zara is 7 years old.

P a g e | 107 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Example:
<html>
<head>
<script language="javascript">
function showmessage()
{
alert("How are you");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click Here!" onclick="showmessage()" >
</form>
</body>
</html>

Function starts with the function keyword and code of the function is enclosed in {..} brackets.
Functions are written inside the head section of the html document, because function does not execute
when the page loads. The alert function displays the message "How are you", when you clicked on the
button ("Click Here").

P a g e | 108 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Built-in functions:
The list of the built-in JavaScript functions:

JavaScript Build in Function Function Description

alert() The alert() built-in function displays the alert dialog box.

The confirm() built-in function display the confirmation dialog box. and
confirm()
ask the user to determine from the two option .

The focus() built -in function built the pointed object active and put the
focus()
curser on the text field.

The prompt() built -in function display the prompt dialog box. Inquiring
prompt()
the user for input.

select() The select() built -in function used to select the pointed object.

write() The write() built in function used to write something on the document.

Function arguments:
Through variable you can pass argument to function. The output of the function looks on the
arguments given by you.

Example:
<html>
<head>

P a g e | 109 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

<script language="javascript">
function myfunction(text)
{
confirm(text)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="myfunction('Do you want to delete it!')" value="Delete">
<input type="button" onclick="myfunction('Do you want to save it!')" value="Save">
</form>
</body>
</html>

Output:

28. Explain the JavaScript objects with an example? (6 MARKS)

JavaScript is an Object Oriented Programming (OOP) language. A programming language can be

called object-oriented if it provides four basic capabilities to developers
 Encapsulation − the capability to store related information, whether data or methods, together
in an object.
 Aggregation − the capability to store one object inside another object.

P a g e | 110 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

 Inheritance − the capability of a class to rely upon another class (or number of classes) for
some of its properties and methods.
 Polymorphism − the capability to write one function or method that works in a variety of
different ways.

Objects are composed of attributes. If an attribute contains a function, it is considered to be a method of

the object, otherwise the attribute is considered a property.

Object Properties:
The name:values pairs (in JavaScript objects) are called properties.
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

property Property Value

firstName John
lastName Doe
age 50
eyeColor blue
Object Methods

 Methods are actions that can be performed on objects.

 Methods are stored in properties as function definitions.

property Property Value

firstName John
lastName Doe
age 50
eyeColor blue
fullName function() {return this.firstName + " " + this.lastName;}

Object Definition:
You define (and create) a JavaScript object with an object literal:

Example:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Spaces and line breaks are not important. An object definition can span multiple lines:

Example:
var person = {
firstName:"John",
lastName:"Doe",
age:50,

P a g e | 111 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

eyeColor:"blue"
};

Accessing Object Properties:

You can access object properties in two ways:

Syntax:
objectName.propertyName
(or)
objectName["propertyName"]

Example:
person.lastName;
person["lastName"];

Accessing Object Methods:

You access an object method with the following syntax:

Syntax:
objectName.methodName()

Example:
name = person.fullName();

The Object() Constructor:

A constructor is a function that creates and initializes an object. JavaScript provides a special
constructor function called Object()to build the object. The return value of the Object() constructor is
assigned to a variable.
The variable contains a reference to the new object. The properties assigned to the object are
not variables and are not defined with the var keyword.

Example:
Try the following example; it demonstrates how to create an Object.
<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
var book = new Object(); // Create the object
book.subject = "Perl"; // Assign properties to the object

P a g e | 112 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

book.author = "Mohtashim";
</script>
</head>
<body>
<script type="text/javascript">
document.write("Book name is : " + book.subject + "<br>");
document.write("Book author is : " + book.author + "<br>");
</script>
</body>
</html>

Output:
Book name is : Perl
Book author is : Mohtashim

29. Explain the JavaScript Arrays with an example? (6 MARKS)

 An array is a special variable, which can hold more than one value at a time.
 JavaScript arrays are used to store multiple values in a single variable.

Creating an Array:
Using an array literal is the easiest way to create a JavaScript Array.

Syntax:
var array-name = [item1, item2, ...];

Example:
var cars = ["Saab", "Volvo", "BMW"];

Using the JavaScript Keyword new:

The following example also creates an Array, and assigns values to it:

Example:
var cars = new Array("Saab", "Volvo", "BMW");

Access the Elements of an Array:

An array element by referring to the index number.
This statement accesses the value of the first element in cars:
var name = cars[0];

P a g e | 113 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Arrays are Objects:

 Arrays are a special type of objects. The typeof operator in JavaScript returns "object" for arrays.
 But, JavaScript arrays are best described as arrays.

Arrays use numbers to access its "elements". In this example, person[0] returns John:

Array:
var person = ["John", "Doe", 46];
Objects use names to access its "members". In this example, person.firstName returns John:

Object:
var person = {firstName:"John", lastName:"Doe", age:46};

Array Properties and Methods:

The real strength of JavaScript arrays are the built-in array properties and methods:

Examples:
var x = cars.length; // The length property returns the number of elements in cars
var y = cars.sort(); // The sort() method sort cars in alphabetical order

The length Property:

The length property of an array returns the length of an array (the number of array elements).

Example:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length; // the length of fruits is
4

Adding Array Elements:

The easiest way to add a new element to an array is using the push method:

Example:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon"); // adds a new element (Lemon) to fruits

New element can also be added to an array using the length property:

P a g e | 114 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Example:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon"; // adds a new element (Lemon) to fruits
Adding elements with high indexes can create undefined "holes" in an array:

Example:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[10] = "Lemon"; // adds a new element (Lemon) to fruits

30. Explain the JavaScript Built-in Objects with an example? (11 MARKS)
The various Built-in Objects in JavaScript are
1. Math object
2. String object
3. Date object
4. Boolean objects
5. Number objects
6. Array object
7. Regular Expression object
8. Document object
9. Window object

(i) Math Object:

 The Math object allows you to perform mathematical tasks.
 The Math object includes several mathematical methods.

Example:
Math.min(0, 150, 30, 20, -8, -200); // returns -200

Method Description
abs(x) Returns the absolute value of x
ceil(x) Returns x, rounded upwards to the nearest integer
cos(x) Returns the cosine of x (x is in radians)
exp(x) Returns the value of Ex

P a g e | 115 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

floor(x) Returns x, rounded downwards to the nearest integer

log(x) Returns the natural logarithm (base E) of x
max(x,y,z,...,n) Returns the number with the highest value
min(x,y,z,...,n) Returns the number with the lowest value
pow(x,y) Returns the value of x to the power of y
random() Returns a random number between 0 and 1
round(x) Rounds x to the nearest integer
sin(x) Returns the sine of x (x is in radians)
sqrt(x) Returns the square root of x
tan(x) Returns the tangent of an angle

(ii) String object:

 The String object is used to manipulate a storing and manipulating text.
 String objects are created with new String().

Syntax:
var mystring = new String(“Hello World”);
Or
var mystring = “Hello World”;

Method Description
charAt() Returns the character at the specified index (position)
charCodeAt() Returns the Unicode of the character at the specified index
concat() Joins two or more strings, and returns a new joined strings
fromCharCode() Converts Unicode values to characters
indexOf() Returns the position of the first found occurrence of a specified
value in a string
lastIndexOf() Returns the position of the last found occurrence of a specified
value in a string
localeCompare() Compares two strings in the current locale
match() Searches a string for a match against a regular expression, and
returns the matches
replace() Searches a string for a specified value, or a regular expression, and
returns a new string where the specified values are replaced

P a g e | 116 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

search() Searches a string for a specified value, or regular expression, and

returns the position of the match
slice() Extracts a part of a string and returns a new string
split() Splits a string into an array of substrings
substr() Extracts the characters from a string, beginning at a specified start
position, and through the specified number of character
substring() Extracts the characters from a string, between two specified indices
toLocaleLowerCase() Converts a string to lowercase letters, according to the host's locale
toLocaleUpperCase() Converts a string to uppercase letters, according to the host's locale
toLowerCase() Converts a string to lowercase letters
toString() Returns the value of a String object
toUpperCase() Converts a string to uppercase letters
trim() Removes whitespace from both ends of a string
valueOf() Returns the primitive value of a String object
substring() Extracts the characters from a string, between two specified indices

String HTML Wrapper Methods:

The HTML wrapper methods return the string wrapped inside the appropriate HTML tag.

Method Description
anchor() Creates an anchor
big() Displays a string using a big font
blink() Displays a blinking string
bold() Displays a string in bold
fixed() Displays a string using a fixed-pitch font
fontcolor() Displays a string using a specified color
fontsize() Displays a string using a specified size
italics() Displays a string in italic
link() Displays a string as a hyperlink
small() Displays a string using a small font
strike() Displays a string with a strikethrough
sub() Displays a string as subscript text
sup() Displays a string as superscript text

(iii) Date object:

 JavaScript’s Date object provides methods for date and time manipulations.
 Date objects are created with new Date().

P a g e | 117 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

 Date and time processing can be performed based on the computer’s local time zone or based on
World Time Standard’s Coordinated Universal Time (UTC) - formerly called Greenwich Mean
Time (GMT).
There are four ways of instantiating a date:
1. var d = new Date();
2. var d = new Date (milliseconds);
3. var d = new Date (dateString);
4. var d = new Date (year, month, day, hours, minutes, seconds, milliseconds);

Date Methods:
 When a Date object is created, a number of methods allow you to operate on it.
 Date methods allow you to get and set the year, month, day, hour, minute, second, and
millisecond of objects, using either local time or UTC (universal, or GMT) time.

Method Description
getDate() Returns the day of the month (from 1-31)
getDay() Returns the day of the week (from 0-6)
getFullYear() Returns the year (four digits)
getHours() Returns the hour (from 0-23)
getMilliseconds() Returns the milliseconds (from 0-999)
getMinutes() Returns the minutes (from 0-59)
getMonth() Returns the month (from 0-11)
getSeconds() Returns the seconds (from 0-59)
getTime() Returns the number of milliseconds since midnight Jan 1, 1970
getTimezoneOffset() Returns the time difference between UTC time and local time, in minutes
getUTCDate() Returns the day of the month, according to universal time (from 1-31)
getUTCDay() Returns the day of the week, according to universal time (from 0-6)
getUTCFullYear() Returns the year, according to universal time (four digits)
getUTCHours() Returns the hour, according to universal time (from 0-23)
getUTCMilliseconds() Returns the milliseconds, according to universal time (from 0-999)
getUTCMinutes() Returns the minutes, according to universal time (from 0-59)
getUTCMonth() Returns the month, according to universal time (from 0-11)
getUTCSeconds() Returns the seconds, according to universal time (from 0-59)
parse() Parses a date string and returns the number of milliseconds since midnight of
January 1, 1970

P a g e | 118 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

setDate() Sets the day of the month of a date object

setFullYear() Sets the year (four digits) of a date object
setHours() Sets the hour of a date object
setMilliseconds() Sets the milliseconds of a date object
setMinutes() Set the minutes of a date object
setMonth() Sets the month of a date object
setSeconds() Sets the seconds of a date object
setTime() Sets a date and time by adding or subtracting a specified number of
milliseconds to/from midnight January 1, 1970
toDateString() Converts the date portion of a Date object into a readable string
toLocaleDateString() Returns the date portion of a Date object as a string, using locale conventions
toLocaleTimeString() Returns the time portion of a Date object as a string, using locale conventions
toLocaleString() Converts a Date object to a string, using locale conventions
toString() Converts a Date object to a string
toTimeString() Converts the time portion of a Date object to a string
valueOf() Returns the primitive value of a Date object
(iv) Boolean objects:
 JavaScript Boolean objetcs can have one of two values: true or false.
 These wrappers define methods and properties useful in manipulating Boolean values.
var b = new Boolean ( booleanValue );

Boolean Methods:
Method Description
toString() Converts a boolean value to a string, and returns the result
valueOf() Returns the primitive value of a boolean

(v) Number objects:

 JavaScript has only one type of number.
 Numbers can be written with, or without, decimals:

Number Methods:
Method Description
toExponential(x) Converts a number into an exponential notation
toFixed(x) Formats a number with x numbers of digits after the decimal point
toPrecision(x) Formats a number to x length
toString() Converts a number to a string
valueOf() Returns the primitive value of a number

P a g e | 119 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

(vi) Array object:

The Array object is used to store multiple values in a single variable:
var cars = ["Saab", "Volvo", "BMW"];
Method Description
concat() Joins two or more arrays, and returns a copy of the joined arrays
indexOf() Search the array for an element and returns it's position
join() Joins all elements of an array into a string
lastIndexOf() Search the array for an element, starting at the end, and returns it's position
pop() Removes the last element of an array, and returns that element
push() Adds new elements to the end of an array, and returns the new length
reverse() Reverses the order of the elements in an array
shift() Removes the first element of an array, and returns that element
slice() Selects a part of an array, and returns the new array
sort() Sorts the elements of an array
splice() Adds/Removes elements from an array
toString() Converts an array to a string, and returns the result
unshift() Adds new elements to the beginning of an array, and returns the new length
(vii) Regular Expression object:
 A regular expression is an object that describes a pattern of characters.
 Regular expressions are used to perform pattern-matching and "search-and-replace" functions
on text.

Syntax:
var patt=new RegExp(pattern,modifiers);
(or)
var patt=/pattern/modifiers;
 pattern specifies the pattern of an expression
 modifiers specify if a search should be global, case-sensitive, etc.

Modifiers:
Modifiers are used to perform case-insensitive and global searches:

Method Description
i Perform case-insensitive matching
g Perform a global match (find all matches rather than stopping after the first match)
m Perform multiline matching

Brackets:
Brackets are used to find a range of characters:

P a g e | 120 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Method Description
[abc] Find any character between the brackets
[^abc] Find any character not between the brackets
[0-9] Find any digit from 0 to 9
[A-Z] Find any character from uppercase A to uppercase Z
[a-z] Find any character from lowercase a to lowercase z
[A-z] Find any character from uppercase A to lowercase z
[adgk] Find any character in the given set
[^adgk] Find any character outside the given set
(red|blue|green) Find any of the alternatives specified

Meta-characters:
Meta-characters are characters with a special meaning:

Method Description
. Find a single character, except newline or line terminator
\w Find a word character
\W Find a non-word character
\d Find a digit
\D Find a non-digit character
\s Find a whitespace character
\S Find a non-whitespace character
\b Find a match at the beginning/end of a word
\B Find a match not at the beginning/end of a word
\0 Find a NUL character
\n Find a new line character
\f Find a form feed character
\r Find a carriage return character
\t Find a tab character
\v Find a vertical tab character
\xxx Find the character specified by an octal number xxx
\xdd Find the character specified by a hexadecimal number dd
\uxxxx Find the Unicode character specified by a hexadecimal number xxxx

P a g e | 121 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Quantifiers:

Method Description
n+ Matches any string that contains at least one n
n* Matches any string that contains zero or more occurrences of n
n? Matches any string that contains zero or one occurrences of n
n{X} Matches any string that contains a sequence of X n's
n{X,Y} Matches any string that contains a sequence of X to Y n's
n{X,} Matches any string that contains a sequence of at least X n's
n$ Matches any string with n at the end of it
^n Matches any string with n at the beginning of it
?=n Matches any string that is followed by a specific string n
?!n Matches any string that is not followed by a specific string n

RegExp Object Properties:

Method Description
global Specifies if the "g" modifier is set
ignoreCase Specifies if the "i" modifier is set
lastIndex The index at which to start the next match
multiline Specifies if the "m" modifier is set
source The text of the RegExp pattern

RegExp Object Methods:

Method Description
compile() Compiles a regular expression
exec() Tests for a match in a string. Returns the first match
test() Tests for a match in a string. Returns true or false

(viii) Document objects:

 When an HTML document is loaded into a web browser, it becomes a document object.
 The document object is the root node of the HTML document and the "owner" of all other nodes:
 element nodes,
 text nodes,
 attribute nodes,

P a g e | 122 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

 and comment nodes

 The document object provides properties and methods to access all node objects, from within
JavaScript.

Method Description
document.close() Closes the output stream previously opened with
document.open()
document.cookie Returns all name/value pairs of cookies in the document
document.domain Returns the domain name of the server that loaded the
document
document.getElementById() Returns the element that has the ID attribute with the
specified value
document.getElementsByName() Returns a NodeList containing all elements with a specified
name
document.getElementsByTagName() Returns a NodeList containing all elements with the specified
tag name
document.lastModified Returns the date and time the document was last modified
document.open() Opens an HTML output stream to collect output from
document.write()
document.write() Writes HTML expressions or JavaScript code to a document
document.writeln() Adds a newline character after each statement

(ix) Window objects:

 The window object represents an open window in a browser.
 If a document contain frames (<iframe> tags), the browser creates one window object for the
HTML document, and one additional window object for each frame.

Method Description
alert() Displays an alert box with a message and an OK button
close() Closes the current window
blur() Removes focus from the current window
confirm() Displays a dialog box with a message and an OK and a Cancel button
createPopup() Creates a pop-up window
focus() Sets focus to the current window
print() Prints the content of the current window
prompt() Displays a dialog box that prompts the visitor for input
setInterval() Calls a function or evaluates an expression at specified intervals (in milliseconds)
setTimeout() Calls a function or evaluates an expression after a specified number of
milliseconds

P a g e | 123 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

stop() Stops the window from loading

31. Explain in detail about Javascript debuggers? (6 MARKS)

JavaScript Debugging:
 A mistake in a program or a script is referred to as a bug.
 The process of finding and fixing bugs is called debugging and is a normal part of the
development process.
 It is difficult to write JavaScript code without a debugger.
 It contains syntax errors, or logical errors, that are difficult to diagnose.
 When JavaScript code contains errors, nothing will happen. There are no error messages, and
you will get no indications where to search for errors.

JavaScript Debuggers:
 Searching for errors in programming code is called code debugging.
 Debugging is not easy. But fortunately, all modern browsers have a built-in debugger.
 Built-in debuggers can be turned on and off, forcing errors to be reported to the user.
 With a debugger, you can also set breakpoints (places where code execution can be stopped), and
examine variables while the code is executing.
 Normally, otherwise follow the steps at the bottom of this page, you activate debugging in your
browser with the F12 key, and select "Console" in the debugger menu.

P a g e | 124 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

The console.log() Method:

 If your browser supports debugging, you can use console.log() to display JavaScript values in the
debugger window:

Example:
<html>
<body>
<h1>My First Web Page</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>

The debugger Keyword:

 The debugger keyword stops the execution of JavaScript, and calls (if available) the debugging
function.
 This has the same function as setting a breakpoint in the debugger.
 If no debugging is available, the debugger statement has no effect.
 With the debugger turned on, this code will stop executing before it executes the third line.
Example:
<script>
var x = 15 * 5;
debugger;
document.write(x);
</script>

Error Message in IE:

The most basic way to track down errors is by turning on error information in your browser. By
default, Internet Explorer shows an error icon in the status bar when an error occurs on the page.

P a g e | 125 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

Double-clicking this icon takes you to a dialog box showing information about the specific error that
occurred.
Since this icon is easy to overlook, Internet Explorer gives you the option to automatically show
the Error dialog box whenever an error occurs.
To enable this option, select Tools → Internet Options → Advanced tab. and then finally check
the "Display a Notification About Every Script Error" box option as shown below.

Error Notifications:
Error notifications that show up on Console or through Internet Explorer dialog boxes are the
result of both syntax and runtime errors. These error notifications include the line number at which the
error occurred.

Major Browsers' Debugging Tools:

Normally, you activate debugging in your browser with F12, and select "Console" in the debugger
menu.

Chrome
 Open the browser.
 From the menu, select tools.
 From tools, choose developer tools.
 Finally, select Console.

Internet Explorer
 Open the browser.

P a g e | 126 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

 From the menu, select tools.

 From tools, choose developer tools.
 Finally, select Console.

32. Explain in detail about Regular Expression in Javascript? (6 MARKS)

 A regular expression is an object that describes a pattern of characters.

 When you search in a text, you can use a pattern to describe what you are searching for.
 A simple pattern can be one single character.
 A more complicated pattern can consist of more characters, and can be used for parsing, format
checking, substitution and more.
 Regular expressions are used to perform powerful pattern-matching and "search-and-replace"
functions on text.

Syntax:
var patt=new RegExp(pattern,modifiers);
or
var patt=/pattern/modifiers;

 pattern specifies the pattern of an expression

 modifiers specify if a search should be global, case-sensitive, etc.

RegExp Modifiers:
i. Modifiers are used to perform case-insensitive and global searches.
ii. The i modifier is used to perform case-insensitive matching.
iii. The g modifier is used to perform a global match (find all matches rather than stopping after the
first match).

Example 1:
Do a case-insensitive search for "w3schools" in a string:
var str="Visit W3Schools";
var patt1=/w3schools/i;

The marked text below shows where the expression gets a match:
W3Schools

Example 2:
Do a global search for "is":

P a g e | 127 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

var str="Is this all there is?";

var patt1=/is/g;

The marked text below shows where the expression gets a match:
Is this all there is?

Example 3
Do a global, case-insensitive search for "is":
var str="Is this all there is?";
var patt1=/is/gi;
The marked text below shows where the expression gets a match:
Is this all there is?

test ():
 The test () method searches a string for a specified value, and returns true or false, depending on
the result.
The following example searches a string for the character "e":

Example:
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));

Since there is an "e" in the string, the output of the code above will be:
true
exec():
 The exec() method searches a string for a specified value, and returns the text of the found value.
If no match is found, it returns null.

The following example searches a string for the character "e":

Example 1
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
Since there is an "e" in the string, the output of the code above will be:
e

Using String Methods:

In JavaScript, regular expressions are often used with the two string methods:
 search()
 replace()

P a g e | 128 WEB TECHNOLOGY DEPARTMENT OF CSE

 MANAKULA VINAYAGAR INSTITUTE OF TECHNOLOGY

The search() method:

 It uses an expression to search for a match, and returns the position of the match.

Example:
Use a regular expression to do a case-insensitive search for "w3schools" in a string:
var str = "Visit W3Schools";
var n = str.search(/w3schools/i);

The result in n will be:

6

The replace() method:

 It returns a modified string where the pattern is replaced.

Example:
Use a case insensitive regular expression to replace Microsoft with W3Schools in a string:
var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "W3Schools");

The result in res will be:

Visit W3Schools!

P a g e | 129 WEB TECHNOLOGY DEPARTMENT OF CSE