0% found this document useful (0 votes)

2K views

Web Programming Notes

The document provides an overview of the origins and history of the web from the 1960s to the 1990s. It describes the development of early computer networks like ARPANET and NSFnet and how they eventually led to the modern Internet. It also defines key concepts in web programming like browsers, web servers, URLs, HTTP, and security considerations.

Uploaded by

Ashwani kumari

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

2K views

Web Programming Notes

Uploaded by

Ashwani kumari

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 138

lOMoARcPSD|17894140

Web Programming Notes

Web Programming (Bangalore University)

Studocu is not sponsored or endorsed by any college or university

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)
lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

UNIT 1

FUNDAMENTALS OF WEB, XHTML - 1

Origins: 1960s

 US. Department of Defence (DoD) became interested in developing a new large-scale

computer network
 The purposes of this network were communications, program sharing, and remote
computer access for researchers working on defence-related contracts.
 The DoD's Advanced Research Projects Agency (ARPA) funded the construction of the
first such network Hence it was named as ARPAnet
 The primary early use ofARPAnet was simple text-based communications through e-mail.

late 1970s and early 1980s

 B1TNET, which is an acronym for Because It’s Time NETwork, began at the City
University of New York
 It was built initially to provide electronic mail and file transfers.
 CSNET is an acronym for ComputerScience NETwork. Its initial purpose was to provide
electronic mail.

1990s

 NSFnet which was created in 1986 replaced ARPAnet by 1990.

 It was sponsored by the National Science Foundation (NSF).
 By 1992 NSFnet, connected more than 1 million computers around the world.
 In 1995, a small part of NSFnet returned to being a research network

These names begin with the names ofthe host machine, followed by progressively larger
enclosing collection ofmachines, called domains.

 There may be two, three or more domain names.

 DNS is of the form |hostname.doniainName.domainName|. Example: jrnsit.ac.inj

1|Page VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

The steps for conversion from DNS to IP:

 The DNS has to be converted to IP address before destination is reached.

 This conversion is needed because computer understands only numbers.
 The conversion is done with the help of name server.
 As soon as domain name is provided, it will be sent across the internet to contact name
servers.
 This name server is responsible for converting domain name to IP
 If one of the name servers is not able to convert DNS to IP, it contacts other name
server.
 This process continues until IP address is generated.
 Once the IP address is generated, the host can be accessed.
 The hostname and all domain names form what is known as FULLY QUALIFIED
DOMAIN NAME.

This is as shown below:

 They are called browsers because they allow the user to browse the resources available on
servers.
 Mosaic was the first browser with a graphical user interface.
 A browser is a client on the Web because it initiates the communication with a server, which
waits for a request from the client before doing anything.
 In the simplest case, a browser requests a static document from a server.

2|Page VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

 The server locates the document among its servable documents and sends it to the browser,
which
 displays it for the user.
 Sometimes a browser directly requests the execution of a program stored on the server. The
output of the program is then returned to the browser.
 Examples: Internet Explorer, Mozilla Firefox, Netscape Navigator, Google Chrome.
Opera etc.,

WEB SERVERS

Web servers are programs that provide documents to requesting browsers. Example: Apache

Web server operations:

 All the communications between a web client and a web server use the HTTP
 When a web server begins execution, it informs the OS under which it is running & it runs
as a background process
 A web client or browser, opens a network connection to a web server, sends information
requests and possibly data to the server, receives information from the server and closes the
connection.
 The primary task of web server is to monitor a communication port on host machine, accept
HTTP commands through that port and perform the operations specified by the commands.
 When the URL is received, it is translated into either a filename or a program name.

General characteristics of web server:

 This program allows the site manager to set parameters for the server.
 Under Windows XP and Vista, the IIS snap-in is accessed by going to Control Panel,
Administrative Tools, and IISAdmin.

3|Page VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

UNIFORM RESOURCE LOCATORS

 Uniform Resource Locators (URLs) are used to identify different kinds ofresources on
Internet
 If the web browser wants some document from web server, just giving domain name is not
sufficient because domain name can only be used forlocating the server.
 It does not have information about which document client needs. Therefore, URL should
be provided.
 The general format of URL is: {scheme: object-address}
 Example: http: www.vtu.ac.in/results.php
 The scheme indicates protocols being used, (http, ftp, telnet...)
 In case of http, the full form of the object address of a URL is as follows:
 //fully-qualified-domain-name/path-to-document
 URLs can never have embedded spaces
 It cannot use special characters like semicolons, ampersands and colons The path to the
document for http protocol is a sequence of directory names and a filename, all separated
by whatever special character the OS uses, (forward or backward slashes)
 The path in a URL can differ from a path to a file because a URL need not include all
directories on the path
 A path that includes all directories along the way is called a complete path.
 In most cases, the path to the document is relative to some base path that is specified in the

Configuration files of the server. Such paths are called partial paths.

 Example: http://wwwrnsit.ac.in/
1. HTTP method Domain part of the URL HTTP version
2. Header fields
3. Blank line
4. Message body
 The following is an example of the first line of an HTTP request:

4|Page VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

 GET /storefront.html HTTP/1.1

The format of a header field is the field name followed by a colon and the value of the field.
There are four categories of header fields:

1. General: For general information, such as the date

2. Request: Included in request headers

3. Response- . For response headers

4. Entity: Used in both request and response headers

A wildcard character, the asterisk (*). can be used to specify that part of a MIME type can be
anything.

SECURITY

Security is one of the major concerns in the Internet .The server system can be accessed easily
with basic hardware support, internet connection & web browser.

The client can retrieve very important information from the server. Similarly, the server system
can introduce virus on the client system. These viruses can destroy the hardware and software in
client. While programming the web, following requirements should be considered:

5|Page VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

 Privacy: it means message should be readable only to communicating parties and not to
intruder.
 Integrity: it means message should not be modified during transmission.
 Authentication: it means communicating parties must be able to know each other's identity
 Non-repudiation: it means that it should be possible to prove that message was sent and
received properly.

Security can be provided using cryptographic algorithm. Ex: private key. Public key
Protection against viruses and worms is provided by antivirus software, which must be
updated frequently so that it can detect and protect against the continuous stream of new
viruses and worms.

THE WEB PROGRAMMER'S TOOLBOX

 Web programmers use several languages to create the documents that servers can provide to
browsers.
 The most basic of these is XHTML, the standard mark-up language for describing how Web
documents should be presented by browsers. Tools that can be used without specific knowledge
of XHTML are available to create XHTML documents.
 A plug-in is a program that can be integrated with a word processor to make it possible to use
the word processor to create XHTML. A filter converts a document written in some other format
to XHTML.
 XML is a meta-mark-up language that provides a standard way to define new mark-up
languages.

ORIGINS AND EVOLUTION OF HTML AND XHTML

1. HTML -> Hyper Text Mark-up Language
2. XHTML -> extensible HyperText Mark-up Language

6|Page VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

HTML XHTML
HTML is much easier to write XHTML requires a level of discipline many
of us naturally resist
Huge number of HTML documents some older browsers have problems with
available on the Web, browsers will some parts of XHTML.
continue to support HTML as far as one can
see into the future.
HTML has few syntactic rules, and HTML XHTML has strict syntactic rules that
processors (e.g., browsers) do not enforce impose a consistent structure on all
the rules it does have. Therefore, HTML XHTML documents. Another significant
authors have a high degree of freedom to reason for using XHTML is that when you
use their own syntactic preferences to create create an XHTML document, its syntactic
documents. Because of this freedom, HTML Correctness can be checked, either by an
Documents lack consistency, both in low- XML browser or by a validation tool.
level syntax and in overall structure.
Used for displaying the data Used for describing the data

BASIC SYNTAX
o The fundamental syntactic units of HTML are called tags.
o In general, tags are used to specify categories of content
o The syntax of a tag is the tag's name surrounded by angle brackets (< and >).
 Tag names must be written in all lowercase letters.
 Most tags appear in pairs: an opening tag and a closing tag.

Standard XHTML Document Structure

 Every XHTML document must begin with an xml declaration element that simply
identifies the document as being one based on XML This element includes an attribute
that specifies the version number 1.0.
 The xml declaration usually includes a second attribute, encoding, which specifies the
encoding used for the document [utf-8].

7|Page VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

 Following is the xml declaration element, which should be the first line of every XHTML
document:

<?xml version = "1.0" encoding = "utf-8"?>

 Note that this declaration must begin in the first character position of the document file.
 The xml declaration element is followed immediately by an SGML DOCTYPE command,
which specifies the particular SGML document-type definition (DTD) with which the
document complies, among other things.
 The following command states that the document in which it is included complies with the
XHTML 1.0

Strict standard:

<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN"

 An XHTML document must include the four tags <html>, <head>, <title> , and <body>
 The <html> tag identifies the root element of the document. So, XHTML documents always
have an <html> tag immediately following the DOCTYPE command, and they always end
with the closing html tag, </html>.
 The html element includes an attribute, xmlns, that specifies the XHTML namespace, as shown
in the following element:

<html xmlns = "http://www.w3.org/1999/xhtml">

 Although the xmlns attribute’s value looks like a URL. it does not specify a document. It is
just a name that happens to have the form of a URL.
 An XHTML document consists of two parts, named the head and the body.

8|Page VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

PLEASE NOTE: From here onwards programming in XHTML will begin. Please add the
following compulsory document structure to all programs in the first 4 lines and skip the
simple <html> tag of first line because I have begun the coding part directly.
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtml-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">

Paragraphs:

It begins with <p> and ends with </p>

Multiple paragraphs may appear in a single document.

<html>
<head>
<title> Paragraph </title>
</head>
<body>
<p> Paragraph 1 </p>
<p> Paragraph 2 </p>
<p> Paragraph 3 </p>
</body>
</html>

Preserving White Space

9|Page VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

Sometimes it is desirable to preserve the white space in text—that is, to prevent the
browser from eliminating multiple spaces and ignoring embedded line breaks. This
can be specified with the <pre> tag.

<html>
<head>
<title> Pre Tag </title>
</head>
<body>
<pre> My Name is DIVYA K
I am from ISE Department
RNSIT, Bangalore
</pre>
</p>
</body>
</html>

Block Quotations:

The <blockquote> tag is used to make the contents look different from the surrounding text

10 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

<html>

<head> <title> Blockquotes </title>

</head>

<body>

<p> Swami Vivekananda says </p>

<p> "Arise..

•! Awake..!!" </p>

</blockquote>

<p> He is mv Role model </p>

<b> This is Bold </b>

<i> This is Italics </i>

<u> This is Underline </u>

<em> This is Emphasis </em>

<strong> This is strong </strong>

<code> Total = Internals + Externals //this is code</code>

</pre>

</p>

Illustration of Font Sizes (subscripts and superscripts)

x<sub>2</sub><sup>3</sup> + y<sub>l</sub><sup>2</sup>

</pre></p>

</body>

11 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

</html>

Horizontal Rules:

 The parts of a document can be separated from each other, making the document
easier to read, by placing horizontal lines between them. Such lines are called
horizontal rules. The block tag that creates them is <hr/>.
 The <hr /> tag causes a line break (ending the current line) and places a line across
the screen.
 Note again the slash in the <hr /> tag, indicating that this tag has no content and no
closing tag.

<html>

<head>

<title> Horizontal Rule </title>

</head>

12 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

<body>

<p> RNSIT was established in the year 2001 <hr/>

It was founded by our Chairman Dr. R N Shetty <hr/>

Dr. H N Shivshsnkar is our Director <hr/>

</p>

</html>

IMAGES

 Image can be displayed on the web page using <img> tag.

 When the <img> tag is used, it should also be mentioned which image needs to be
displayed. This is done using src attribute.
 Attribute means extra information given to the browser
 Whenever <img> tag is used, alt attribute is also used. Alt stands for alert.
 Some very old browsers would not be having the capacity to display the images.

In this case, whatever is the message given to alt attribute, that would be displayed.

 Another use of alt is -> when image display option has been disabled by user. The
option is normally disabled when the size ofthe image is huge and takes time for
downloading.

<html>

<head>

<title>display image</title>

13 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

</head>

<body>

<img src="java.png" alt="cannot display"/>

</body>

</html>

HYPERTEXT LINKS

Links:

■ Hyperlinks are the mechanism which allows the navigation from one page to another.

■ The term "hyper" means beyond and “link" means connection

■ Whichever text helps in navigation is called hypertext

Hyperlinks cam be created using <a> (anchor tag)

■ The attribute that should be used for <a> is href

Ordered Lists:

14 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

1. Ordered lists are lists in which the order of items is important. This orderedness of a list is
shown in the display of the list by the implicit attachment of a sequential value to the
beginning of each item. The default sequential values are Arabic numerals, beginning
with 1.
2. An ordered list is created within the block tag <ol>. The items are specified and displayed
just as are those in unordered lists, except that the items in an ordered list are preceded by
sequential values instead of bullets.

Definition Lists:
As the name implies, definition lists are used to specify lists of terms and their definitions, as in
glossaries. A
definition list is given as the content of a <dl> tag, which is a block tag. Each term to be defined
in the definition
list is given as the content of a <dt> tag. The definitions themselves are specified as the content
of <dd> tags.
The defined terms of a definition list are usually displayed in the left margin; the definitions are
usually shown
indented on the line or lines following the term.

15 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

Lecturer In Computer Science

The cellpadding and cellspacing Attributes:

 Cellspacing is the distance between cells.
 Cellpadding is the distance between the edges of the cell to its content.

<html>
<head>
<title> cell spacing and cell padding </title>
</head>
<body>
<h3>Table with space = 10, pad = 50</h3>
<table border = "7" cellspacing = "10" cellpadding = "50">
<tr>
<td> Divya </td>
<td>Chethan </td>
</tr>
</table>
<h3>Table with space = 50, pad = 10</h3>
<table border = "7" cellspacing = "50“ cellpadding = "10">
<tr>
<td> Divya </td>
<td>Chethan </td>
</tr>
</table></body></html>
*****************************************************************************

18 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

UNIT 2

HTML AND XHTML

FORMS
The most common way for a user to communicate information from a Web browser to the server
is through a
form. XHTML provides tags to generate the commonly used objects on a screen form. These
objects are called
controls or widgets. There are controls for single-line and multiple-line text collection,
checkboxes, radio
buttons, and menus, among others. All control tags are inline tags.

The <form> Tag:

1. All of the controls of a form appear in the content of a <form> tag.
2. A block tag, <form>, can have several different attributes, only one of which, action, is
required.
3. The action attribute specifies the URL of the application on the Web server that is to be
called when the user clicks the Submit button.
4. Our examples of form elements will not have corresponding application programs, so the
value of their action attributes will be the emptystring ("") .

The <input> Tag:

Many of the commonly used controls are specified with the inline tag <input>, including those
for text, passwords, checkboxes, radio buttons, and the action buttons Reset Submit and plain.

❖ Text Box
✓ It is a type of input which takes the text.

✓ Any type of input can be created using <input>

J The type attribute indicates what type of input is needed for the text box, the value should be
given as
text

19 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

✓ For any type of input, a name has to be provided which is done using name attribute.
The size of the text can be controlled using size attribute.
✓ Every browser has a limit on the number of characters it can collect. If this limit is exceeded,
the extra characters are chopped off. To prevent this chopping, maxlength attribute can be used.
When maxlength is used, users can enter only those many characters that is given as a value to
the attribute.

Table Sections:
1. Tables naturally occur in two and sometimes three parts: header, body, and footer. (Not
all tables have a natural footer.)
2. These three parts can be respectively denoted in XHTML with the thead, tbody, and tfoot
elements. The header includes the column labels, regardless of the number of levels in
those labels. The body includes the data of the table, including the row labels.
3. The footer, when it appears, sometimes has the column labels repeated after the body. In
some tables, the footer contains totals for the columns of data above.
4. A table can have multiple body sections, in which case the browser may delimit them
with horizontal lines that are thicker than the rule lines within a body section.\

20 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

The <select> Tag:

 Menu items is another type of input that can be created on the page.
 To create the menu item, <select> tag is used.
 To insert the item in the menu, <option> tag is used.

<html>
<head> <title> Menu </title>
</head>
<body>
<p>
RNSIT Branches - Information Science, Computer Science, Electronics, Electrical,
Mechanical
</p>
<form action = "">
<p>
<label><input type="checkbox" name='act" value="three"/>Aindritha</label>
<label><input type="checkbox" name="act" value="four"/>Radhika</label>
<label><input type=”checkbox" name="act" value="four"/>Rakshitha</label>
</p>
</form></body></html>

The <textarea> Tag:

 Text area is a type of input using which multiple statements can be entered.
 Text area is created using <textarea> tag.
 Text area should have the name.

21 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

 During the creation of text area, it should be mentioned how many sentences can be
entered. This is done using rows attribute.
 Similarly, it should also be mentioned how many characters can be entered in a line. This
is done using cols attribute.
 If the value given to rows is exceeded i.e. if users enter sentences more than specified, the
scroll bar automatically appears.

<html>
<head>
<title> text area </title>
</head>
<body>
<form action=" ">
<h3> Enter your comments</h3>
<p>
<textarea name="feedback" rows="5" cols=”100">
</textarea>
</p>
</form>
</body>
</html>

22 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

The Action Buttons:

 The Reset button clears all of the controls in the form to their initial states. The Submit
button has two actions:
 First, the form data is encoded and sent to the server; second, the server is requested to
execute the server resident program specified in the action attribute of the <form> tag.
 The purpose of such a server-resident program is to process the form data and return
some response to the user.
 Every form requires a Submit button. The Submit and Reset buttons are created with the
<input> tag.

<html>
<head>
<title> action buttons </title>
</head>
<body>
<form action=" ">
<p>
<input type="SUBMlT" value="SUBMlT"/>
<input type="RESET'' value="RESET"/>
</p>
</form>
</body>
</html>

23 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

Example of a Complete Form:

<html>
<head>
<title> CompleteForm</title>
</head>
<body>
<hl>Registration Form</hl>
<form action=" ">
<p>
<label>Enter your email id:
<input type = "text" name = "myname" size = "24" maxlength = "25" />
</label>
</p>
<p>
<label>Enter the password:
<input type = "password" name = "mypass" size = "20" maxlength = "20" />
</label*
</p>
<p>Sex</p>
<p>
<label><input type="radio" name="act" value="one"/*MaIe</label>
<label><input type="radio" name="act" value="two"/*Female</label>
</p>
<p>Which of the following Accounts do you have?</p>
<p>
<label><input type="checkbox" name="act" value="one'/*Gmail</label>
<label><input type="checkbox" name="act" value=”two"/*Facebook</IabeI>
<label><input type="checkbox" name="act" value="three"/*Twitter</label*
<label><input type="checkbox" name="act" value="four"/*Google+</label>
</p>

24 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

<p> Any Suggestions?</p\>

<p>
<textarea name="feedback" rows="5” cols="100">
</textarea>
</p>
<p>Click on Submit if you want to register</p>
<p>
<input type="SU BM1T" value="SUBMlT"/>
<input type="RESET" value="RESET"/>
</p>
</form>
</body>
</html>

FRAMES
 The browser window can be used to display more than one document at a time. The
window can be divided into rectangular areas, each of which is a frame. Each frame is
capable of displaying its own document.
Framesets:

25 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

 The number of frames and their layout in the browser window are specified with the
<frameset> tag.
 A frameset element takes the place of the body element in a document. A document has
either a body or a frameset but cannot have both.
 The <frameset> tag must have either a rows or a cols attribute, (or both)
 To create horizontal frames, rows attribute is used.
 To create vertical frames, cols attribute is used.
 The values for these attributes can be numbers, percentages and asterisks.

To Demonstrate Vertical Frames using cols attribute

<html>
<head>
<title>Frameset Cols</title>
</head>
<frameset cols = "25%,25%,25%,25%">
<frame src = "FrameColl.html"/>
<frame src = "FrameCol2.html'7>
<frame src = "FrameCoB.htmr/*
<frame src = "FrameCol4.html'7>
</frameset>
</html>

26 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

To Demonstrate Vertical Frames using rows attribute

< html>
<head>
<title>Frameset Rowsand cols</title>
</head>
<frameset rows = "50, 50” cols = "*,*,*">
<frame src = "FrameColl.html"/*
<frame src = "FrameCol2.html"/*
<frame src = "FrameCoB.html"/*
<frame src = "FrameCol4.htmlM/>
<frame src = "FrameRowl.html"/>
<frame src = "FrameRow2.htmr/>
</framset>
</html>

To Demonstrate Horizontal Frames using rows attribute

27 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

<title>Frameset Rows</title>
</head>
<frameset rows =””>
<frame src = "FrameRowl.html"/>
<frame src = "FrameRow2.html'7>
</frameset>
</html>

To Demonstrate Vertical Frames using cols Attribute

28 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

SYNTACTIC DIFFERENCES BETWEEN HTML AND XHTML

PARAMETERS HTML XHTML

Case Sensitivity Tags and attributes Tags and attributes
names are case insensitive names must be in II
lowercase
Closing tags Closing tags may be All elements must have
omitted closing tag
Quoted attribute values Special characters are All attribute values must
quoted. Numeric values be explicitly II
stated
Explicit attribute Both/(/and name Use of id is encouraged
values attributes are encouraged and use of name is 1
discouraged
Element nesting Rules against improper All nesting rules are
nesting of elements strictly enforced
(for example: a form
element cannot contain
another form element) are
not enforced.

29 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

EXAMPLE WHICH USES DOCUMENT LEVEL STYLE SHEET

<html>
<head>
<title>Sample CSS</title>

<style type = "text/css">

font-family: 'Lucida Handwriting';

font-size: 50pt;

color Red;

</style>

</head>

<hl>Puneeth Rajkumar</hl>

</html>

30 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

SELECTOR FORMS
Simple Selector Forms:
In case of simple selector, a tag is used. If the properties of the tag are changed, then it reflects at all the
places when used in the program. The selector can be any tag. If the new properties for a tag are not
mentioned within the rule list, then the browser uses default behaviour of a tag.

<html>
<head>
<title>Sample CSS</titIe>
<style type = "text/css">
P
{
font-family: 'Lucida Handwriting';
font-size: 5Opt;
color: Red;
}
</style>
</head>
<body>
<p>Puneeth Rajkumar</p>
<p>Mahesh Babu</p>
<p>Suriya</p>
</body>
</html>

31 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

Class Selectors:
In class selector, it is possible to give different properties for different elements

<html>
<head>
<title>Sample CSS</title>
</head>
<hl style ="font-family: 'Lucida Handwriting'; font-size: 5Opt; color: Red;“>
Puneeth Rajkumar </hl>
</html>

Inline Style Specification:

Style = "Property 1: Valuel; Property2: Value2; Property3: Value3; .... Property.!!: Value.n;"
Document Style Specification:
<style type = "text/css">
Rule list
</styie>
Each style rule in a rule list has two parts: a selector, which indicates the tag or tags affected by
the rule, and a
list of property-value pairs. The list has the same form as the quoted list for inline style sheets,
except that it is
delimited by braces rather than double quotes. So, the form of a style rule is as follows:
Selector { Propertyl: Valuel; Property?: Value2; Property3: Value3; Property_n: Value_n;}

32 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

Lecturer In Computer Science

NAME:
<input type = "text" />
</label>
</p>
</form>
</body>
</html>

PROPERTY VALUE FORMS

CSS includes 60 different properties in seven categories: fonts, lists, alignment of text, margins,
colours, backgrounds, and borders. Property values can appear in a variety of forms.
• Keyword property values are used when there are only a few possible values and they are
predefined.

■ A number value can be either an integer or a sequence of digits with a decimal point and can
be preceded by a sign ( + or-).

• Length values are specified as number values that are followed immediately by a two-character
abbreviation of a unit name. The possible unit names are px, for pixels; in, for inches; cm, for
centimeters; mm, for millimeters; pt, for points.

38 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

■ Percentage values are used to provide a measure that is relative to the previously used measure
for a property value. Percentage values are numbers that are followed immediately by a percent
sign p).Percentage values can be signed. If preceded by a plus sign, the percentage is added to
the previous value; if negative, the percentage is subtracted.

■ There can be no space between url and the left parenthesis.

• Color property values can be specified as color names, as six-digit hexadecimal numbers, or in
RGB form. RGB form is just the word rgb followed by a parenthesized list of three numbers that
specify the levels of red, green, and blue, respectively.

The RGB values can be given either as decimal numbers between 0 and 255 or as percentages.
Hexadecimal numbers must be preceded with pound signs (#), as in I43AF00.

Font Properties:
The font-family property is used to specify a list of font names. The browser uses the first font in
the list that it supports.

In CSS, there are two types of font family names:

 generic family - a group of font families with a similar look (like "Serif" or
"Monospace")
 font family - a specific font family (like "Times New Roman" or "Arial")

Generic Font family Description

family

Serif Times New Roman Serif fonts have small lines at the ends on
Georgia some characters

39 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

Sans-serif Arial "Sans" means without - these fonts do not

Verdana have the lines at the ends of characters

Monospace Courier New All monospace characters have the same

Lucida Console width

<!DOCTYPE html>
<html>
<head>
<style>
p.serif {
font-family: "Times New Roman", Times, serif;
}

p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>

</body>
</html>

40 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

Font-size Property:

The font-size property sets the size of a font.

Font-variants Property:
The font-variant property specifies whether or not a text should be displayed in a small-caps font.

Syntax:
font-variant: normal|small-caps|initial|inherit;

Font-style Property:
The font-style property specifies the font style for a text.
Syntax:
font-style: normal|italic|oblique|initial|inherit;

Font Weights:
The font-weight property is used to specify the degree of boldness, as in [font-weight: bold;]
Besides bold, the values normal, bolder, and lighter can be specified. Specific numbers also can
be given in multiples of 100 from 100 to 900, where 400 is the same as normal and 700 is the same
as bold.

41 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

Font Shorthands:
If more than one font property must be specified, the values can be stated in a list as the value of
the font property. The order in which the property values are given in a font value list is Important.
The order must be as follows: The font names must be last, the font size must be second to last,
and the font style, font variant, and font weight, when they are included, can be in any order but
must precede the font size and font names. [font: bold 14pt 'Times New Roman';]

<html>
<head>
<title>Font Properties</title>
<style type = "text/css">
p.one
{
font-family: 'lucida calligraphy';
font-weight:bold;
font-size:75pt;
color purple;
}h
l.two
{
font-family: 'cambria';
color violet;
font-style:italics;
}
p. three
{
font: small-caps italic bold 50pt 'times new roman'
}
</style>
</head>
<body>

42 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

Lecturer In Computer Science

46 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

Color Properties:
The color property is used to specify the foreground color of XHTML elements.
<html>
<head>
<title>Colours</title>
<style type = ”text/css">
p.one
{color: pink;}
p.two
{color: # 9900FF;}
p.three
{background-color:#99FF00;}
</style>
</head>
<body>
<p class = "one">Puneeth Rajkumar</p>
<p class = ”two">Puneeth Rajkumar</p>
<p class = "three">Puneeth Rajkumar</p>
</body></html>

Alignment of text
* The text-indent property can be used to indent the first line of a paragraph. This property takes
either a length or a percentage value. The text-align property, for which the possible keyword
valuesare left, center, right, and justify, is used to arrange text horizontally.
■ The float property is used to specify that text should flow around some element, often an image
or a table. The possible values for float are left, right, and none, which is the default.

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

<body>
<table border = "border">
<caption>PARAMATHMA </caption>
<tr>
<td> Puneeth Rajkumar </td>
<td> <img src = “puneeth.jpg" alt = "cant display"/></td>
</tr></table>
</body></html>

Margins and Padding:

The margin properties are named margin, which applies to all four sides of an element: margin-
left, margin-right, margin-top, and margin-bottom. The padding properties are named padding,
which applies to all four sides: padding-left, padding-right, padding-top, and padding-bottom.

<html>
<head>
<title> Margins and Padding </title>
<style type = "text/css">
p.one
{
marginzO.lin;
padding:0.5in;
background-color:# FF33FF;
border-style:dotted;

51 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

}
p.two
{
margin:0.5in;
padding:0.1in;
background-color:#00FF33;
border-sty le:dashed;
}
p.three
margin:0.3in;
background-color:#FFFFOO;
}
p.four
{
padding:0.3in;
background-color:# FF9900;
}
</style>
</head>
<body>
<p class = "one"> Puneeth Rajkumar is the Power Star of Sandalwood<br/>
[margin=0.1in, padding=0.5in]</p>
<p class = "two”> Puneeth Rajkumar is the Power Star of Sandalwood<br/>
[margin=0.5in, padding=0.1in]</p>
<p class = "three"> Puneeth Rajkumar is the Power Star ofSandalwood<br/>
[margin=0.3in, no padding, no border]</p>
<p class = "four"> Puneeth Rajkumar is the Power Star of Sandal wood <br/>
[no margin, padding=03in, no border]</p>
</body>
</html>

52 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

BACKGROUND IMAGES
The background-image property is used to place an image in the background of an element.
<html>
<head>
<title>Background Image</title>
<style type = "text/css">
body {background-image:url(bg3.jpg);}
p{text-align: justify; color:white;font-size:25pt;}
</style>
</head>
<body>
<p >Kannadada Kotyadhipathi is a Kannada primetime quiz show hosted by the power star
of Kannada cinema Mr. Puneet Rajkumar. This is the biggest game show ever on Kannada
Television. This show will be aired on Suvarna TV. This show gives the common man an
opportunity to win Rs 1 crore. Kannadada Kotyadipathi is a Kannada primetime quiz and
human drama show hosted by matinee idol Puneeth Rajkumaron Suvarna TV. Contestants
participate in a game that allows them to win up to Rs. 1 crore. Short-listed contestants play
a 'Fastest Finger First* round to make it to the main game. From there on, they play rounds
with increasing levels of difficulty, and winning higher amounts of money, culminating in the
Rs. 1 crore prize. Contestants can stop at any time having viewed the next question. Or they

53 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

can avail of a Lifeline' and play on.Welcome to the world of high stakes chills and thrills!
Welcome to the world of the crorepati!</p>
</body></html>

THE <span> AND <div> TAGS

In many situations, we want to apply special font properties to less than a whole paragraph of text.
The <span> tag is designed for just this purpose.

<html>
<head> <title>span</title>
<style type = "text/css">
.spanviolet {font-size:25pt;font-family:'lucida calligraphy';color:violet;}
</style>
</head>
<body>
<p >Kannadada Kotyadhipathi is a Kannada primetime quiz show hosted by <span class =
"spanviolet“>Puneeth Rajkumar </span>, the power star of Kannada cinema </p>
</body>
</html>

54 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

CONFLICT RESOLUTION
 Sometimes on a web page, there can be two different values for the same property on the
same element leading to conflict.
h3 {color: blue;}
body h3 {colon red;)
 The browser has to resolve this conflict.
 There can be one or more type of conflict: i.e. when style sheets at 2 or more levels specify
different value for same property on some element.
 This conflict is resolved by providing priority to the different levels of style sheets.
 The inline level gets the highest priority over the document level.
 The document level gets the higher priority over the external level
 But the browser must be able to resolve the conflict in the first example using same
technique.
 There can be several different origins of the specification of property values.
 One of the value may come from a style sheet created by the author or it can be specified
by the user using the options provided by the browser.
 The property values with different origin have different precedence.
 The precedence can also be set for a property by marking it as important.
 p.special {font-style: italic {important; font-size: 14}
 This means that font-style:italic is important [this is known as weight of specification]
 The process of conflict resolution is a multi-stage sorting process.
 The first step is to gather information about levels of style sheet
 Next all the origins and weights are sorted. The following rules are considered:
1. Important declarations with user origin
2. Important declarations with author origin
3. Normal declarations with author origin
4. Normal declarations with user origin
5. Any declarations with browser (or other user agent) origin
■ If there are other conflicts even after sorting, the next step is sorting by specificity. Rules
are:

55 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

58 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

implementation of JavaScript. This was really bad until jQuery comes. Its a JavaScript library
which helps to free web developers from this browser compatibility issues. This is why I prefer to
write code using jQuery rather than using plain old JavaScript code, even if its as simple as
calling getElementById() or getElementByName() methods to retrieve DOM elements.

6) Block vs Function based Scoping

Java mainly uses block based scoping i.e. a variable goes out of scope as soon as control comes
out of the block, unless until its not a instance or class variable. On the other hand JavaScript
mainly uses function based scoping, a variable is accessible in the function they are declared. If
you have a global variable and local variable with same name, local will take precedence in
JavaScript.

7) Constructors

Java has concept of constructors, which has some special properties e.g. constructor chaining and
ensuring that super class constructor runs before sub class, on the other hand JavaScript
constructors are just another function. There is no special rules for constructors in JavaScript e.g.
they cannot have return type or their name must be same as class.

 Scripts can appear directly as the content of a <script> tag.
 The type attribute of <script> must be set to “text/javascript”.
 The JavaScript script can be indirectly embedded in an XHTML document with the src
attribute of a <script> tag, whose value is the name of a file that contains the script—for
example,__________________
<script type = "text/javascript" src = ”tst_nuinber. js" > </script>
 Notice that the script element requires the closing tag, even though it has no content when
the src attribute is included.
 In JavaScript, identifiers, or names, must begin with a letter, an underscore (_), or a dollar
sign ($).
 Subsequent characters may be letters, underscores, dollar signs, or digits. There is no length
limitation for identifiers.
 JavaScript has 25 reserved words
Break delete function return typeof
case do if switch var
catch else in this void
continue finally instanceof throw while
default for new try with

 In addition, JavaScript has a large collection of predefined words, including alert, open,
java, and self.
 JavaScript has two forms of comments, both of which are used in other languages. First,
whenever two adjacent slashes (//) appear on a line, the rest of the line is considered a
comment. Second, /* may be used to introduce a comment, and */ to terminate it, in both
single- and multiple-line comments.
 The XHTML comment used to hide JavaScript uses the normal beginning syntax, <!--.
 The following XHTML comment form hides the enclosed script from browsers that do not
have
 JavaScript interpreters, but makes it visible to browsers that do support JavaScript:

62 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

 The use of semicolons in JavaScript is unusual. The JavaScript interpreter tries to make
semicolons unnecessary, but it does not always work.
 When the end of a line coincides with what could be the end of a statement, the interpreter
effectively inserts a semicolon there. But this can lead to problems. For example,

<!DOCTYPE htrnl PUBLIC “-//W3C//DTD XHTML 1.0 StrlCt//EN”

“http« //www.w3. org/TR/xhtaill/DTD/xhtml1-strict. dtd”>
<1— hello.html
A trivial hello world example of XHTML/JavaScript
—>
<html xml ns =”http//www.w3.org/1999/xhtml">
<head>
<title> Hello world </title>
</head>
<body>
<script type • "text/javascript*>
<1—
document.write)"Hello, fellow Web programmers!*);
// —>
</script>
</body>
</html>

63 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

■ In both cases, a is set to 8.

■ All numeric operations are done in double-precision floating point
The precedence rules of a language specify which operator is evaluated first when two operators
with different precedence are adjacent in an expression.
The associativity rules of a language specify which operator is evaluated first when two
operators with the same precedence are adjacent in an expression.

THE Math OBJECT

 The Math object provides a collection of properties of Number objects and methods that
operate on Number objects. The Math object has methods for the trigonometric functions,
such as sin (for sine) and cos (for cosine), as well as for other commonly used mathematical
operations.
 Among these are floor, to truncate a number; round, to round a number; and max, to return
the largest of two given numbers.

THE NUMBER OBJECT

The Number object includes a collection of useful properties that have constant values. Table 4.3
lists the properties of Number. These properties are referenced through Number.

66 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

PROPERTY : Meaning
MAX. VALUE : Largest representable number
MIN. VALUE : Smallest representable number
NaN : Not a number
POSITIVE-INFINITY : Special value to represent infinity
NEGATIVE-INFINITY : Special value to represent negative infinity
PI : The value of π
The toString method converts the number through which it is called to a string. Example:
var price = 427,
str_price;
Btr_price = price.toString();
str_price = price. toString() ;

THE STRING CATENATION OPERATOR

 JavaScript strings are not stored or treated as arrays of characters; rather, they are unit scalar
values.
 String catenation is specified with the operator denoted by a plus sign (+). For example, if
the value of first is "Divya",
the value of the following expression is “Divya Gowda":
first + " Gowda"

IMPLICIT TYPE CONVERSIONS

 The JavaScript interpreter performs several different implicit type conversions. Such
conversions are called conversions.
 If either operand of a + operator is a string, the operator is interpreted as a string
catenation operator.
 If the other operand is not a string, it is coerced to a string.
Example 1: "August " + 1977 -> "August 1997"
Example2: 7 * "3" -> 21 & will not be evaluated as string

67 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

EXPLICIT TYPE CONVERSIONS

 Strings that contain numbers can be converted to numbers with the String constructor, as
in the following code:
var str_value = String(value);
 This conversion could also be done with the toString method, which has the advantage
that it can be given a parameter to specify the base of the resulting number.
var num = 6;
var str_value ■ num.toString(); //the result is "6"
var str_value_binary = num.toString(2); //the result is "110"
 A number also can be converted to a string by catenating it with the empty string. Also,
var number = Number(aString);
 The number in the string cannot be followed by any character except a space. JavaScript
has two predefined string functions that do not have this problem.
 The parselnt function searches its string parameter for an integer literal. If
one is found at the beginning of the string, it is converted to a number and
returned. If the string does not begin with a valid integer literal, NaN Is
returned.
 The parseFloat function is similar to parselnt, but it searches for a floating-
point literal, which could have a decimal point, an exponent, or both. In both
parselnt and parseFloat, the numeric literal could be followed by any
nondigit character without causing any problem

String PROPERTIES AND METHODS

The String object includes one property, length, and a large collection of methods. The number of
characters in a string is stored in the length property as follows:
var str = "George";
var len = str.length; //now, len=6

68 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

Consider,var str = "George";

Now, str.charAt(2) is 'o'
str.indexOf('r') is 3
str.substring(2, 4) is 'org'
str.toLowerCase() is 'george'

THE typeof OPERATOR

 The typeof operator returns the type of its single operand.
 typeof produces "number", "string", or "boolean" ifthe operand is of primitive type
Number, String, or Boolean, respectively.
 If the operand is an objector null, typeof produces "object".
 If the operand is a variable that has not been assigned a value, typeof produces "undefined",
 Reflecting the fact that variables themselves are not typed.
 Notice that the typeof operator always returns a string.
 The operand for typeof can be placed in parentheses, making it appear to be a function.
 Therefore, typeof x and typeof (x) are equivalent.

ASSIGNMENT STATEMENTS
 There is a simple assignment operator, denoted by =, and a host of compound assignment
operators, such as +=and For example, the statement a += 7; means the same as a = a + 7;

69 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

THE Date OBJECT

 A Date object is created with the new operator and the Date constructor, which has several
forms,
 var today = new Date();
 The date and time properties of a Date object are in two forms: local and Coordinated
Universal Time (UTC, which was formerly named Greenwich Mean Time).
 Table 4.5 shows the methods, along with the descriptions, that retrieve information from a
Date object.

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

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, and a
specified date

70 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

SCREEN OUTPUT AND KEYBOARD INPUT

 JavaScript models the XHTML document with the Document object.
 The window in which the browser displays an XHTML document is modelled with the
Window object.
 The Window object includes two properties, document and window.
 The document property refers to the Document object.
 The window property is self-referential; it refers to the Window object.
 write is used to create XHTML code, the only useful punctuation in its parameter is in the
form of XHTML tags. Therefore, the parameter of write often includes <br />.
 The writeln method implicitly adds "\n" to its parameter, but since browsers ignore line
breaks
 when displaying XHTML, it has no effect on the output.
 The parameter of write can include any XHTML tags and content.
 The write method actually can take any number of parameters.
 Multiple parameters are concatenated and placed in the output
 Example: document .write ("The result is: ", result, "<br />") ;

There are 3 types of pop-up boxes:

► Alert
► Confirm
► Prompt
 The alert method opens a dialog window and displays its parameter in that window. It
also displays an OK button.
 The string parameter of alert is not XHTML code; it is plain text. Therefore, the string
parameter of alert may include\n but never should include <br />.
alert("The sum is:" + sum + "\n");

71 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

THE switch STATEMENT

 JavaScript has a switch statement that is similar to that of Java. In any case segment, the
statement(s) can be either a sequence of statements or a compound statement the break
statement transfers control out of the compound statement in which it appears.
 The control expression of a switch statement could evaluate to a number, a string, or a
Boolean value. Case labels also can be numbers, strings, or Booleans, and different case values
can be of different types.

74 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

LOOP STATEMENTS:
 The general form for while statement

 The general form for while statement

// Fetch the various parts of the date

var datestring =today.toLocaleString();

var day =today.getDay();
var month = today.getNonth();
var year = today.getFullYear();
var timeMi11iseconds = today.getTime();
var hour =today.getHoursf);
var minute = today.getMinutes();
var second =today.getSeconds();
var millisecond = today.getMi11iseconds();

// Display the parts

document.write(
"Date: " + datestring + "<br />",
"Days " + day + "<br />•,
"Month: “ + month + "<br />*,
•Year: “ + year “ "<br />",

75 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

•Time in milliseconds: "+timeMi11iseconds +"<br />",

•Hour: “ +hour+"<br />”);
"Minute: • ♦ minute ♦ "<br />",
•Second: • ♦ second ♦ "<br />*,
"Millisecond: • ♦ millisecond ♦ "<br />•);

JavaScript has a do-while statement, whose form is as follows:

 do or compound statement
 while (control expression)while (control expression)
JavaScript includes one more loop statement, the for-in statement, which is most often used
with objects,
for (identifier in object)
statement or compound statement

OBIECT CREATION AND MODIFICATION

 Objects are often created with a new expression, which must include a call to a constructor
method. The constructor that is called in the new expression creates the properties that
characterize the new object.
 In JavaScript, however, the new operator creates a blank object—that is, one with no
properties.
 The following statement creates an object that has no properties:
var my_object = new Object ();
 In this case, the constructor called is that of Object, which endows the new object with no
properties, although it does have access to some inherited methods.

76 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

 The variable my_object references the new object. Calls to constructors must include
parentheses, even if there are no parameters.
 The properties of an object can be accessed with dot notation, in which the first word is the
object name and the second is the property name. Because properties are not variables, they
are never declared in javabcnpr, nowever, tne new operator creates a DianK ooject—tnat is,
one witn no properties.
 The following statement creates an object that has no properties:
var my_object - new Object ();
 In this case, the constructor called is that of Ob j ect, which endows the new object with no
properties, although it does have access to some inherited methods.
 The variable my_object references the new object. Calls to constructors must include
parentheses, even if there are no parameters.
 The properties of an object can be accessed with dot notation, in which the first word is the
object name and the second is the property name. Because properties are not variables, they
are never declared.
 The number of members of a class in a typical object-oriented language is fixed at compile
time. Thenumber of properties in a JavaScript object is dynamic.
 At any time during interpretation, properties can be added to or deleted from an object. A
property for an object is created by assigning a value to that property’s name. Consider the
following example:
var my car = {make: "Ford", model: "Contour SVT"};
Properties can be accessed in two ways.
var propl = my car.make;
var prop2 = my_car["make"];
the variables propl and prop2 both have the value "Ford".
 A property can be deleted with delete, as in the following example:
delete my_car.model;
 JavaScript has a loop statement, for-in, that is perfect for listing the properties of an object,
for (var prop in my_car>
document.write("Name: ", prop, Value: ",
my_car[prop], "<br />“);

77 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

ARRAYS
Array OBJECT CREATION
 The usual way to create any object is with the new operator and a call to a constructor. In the
case of arrays, the constructor is named Array:
var my_list = new Array(1, 2, "three", "four");
var your_list = new Array(100);
 The second way to create an Array object is with a literal array value, which is a list of values
enclosed in brackets:
var my_list_2 = [1, 2, "three", "four"];

CHARACTERISTICS OF Array OBJECTS

 The lowest index of every JavaScript array is zero. Access to the elements of an array is
specified with numeric subscript expressions placed in brackets.
 The length of an array is the highest subscript to which a value has been assigned, plus 1.
 For example, if my_list is an array with four elements and the following statement is
executed, the new length of my list will be 48.
my_list[47] = 2222;
 The length of an array is both read and write accessible through the length property, which is
created for every array object by the Array constructor. For example,
my_list.length = 1002;
 An array is lengthened by setting its length property to a larger value, shortened by setting its
length property to a smaller value.
 The next example, insert_names js, illustrates JavaScript arrays. This script has an array of
names, which are in alphabetical order. It uses prompt to get new names, one at a time, and
inserts them into the existing array. Notice that each new name causes the array to grow by
one element.

78 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

CONSTRUCTORS
 JavaScript constructors are special methods that create and initialize the properties of newly
created objects.
 Every new expression must include a call to a constructor whose name is the same as that of
the object being created.
 Constructors are actually called by the new operator, which immediately precedes them in
the new expression.
 Obviously, a constructor must be able to reference the object on which it is to operate.
JavaScript has a predefined reference variable for this purpose, named this.
 When the constructor is called, this is a reference to the newly created object. The this
variable is used to construct and initialize the properties of the object.
 For example, the constructor
function car(new_make, new_nodel, nev_year) {
this.make “ new_make;
this. model - new_model;
this.year ■ new_year;
}
could be used as in the following statement:
my_car = new car("Ford", "Contour SVT", "2000");

PATTERN MATCHING BY USING REGULAR EXPRESSIONS

 JavaScript has powerful pattern-matching capabilities based on regular expressions.
 There are two approaches to pattern matching in JavaScript: one that is based on the RegExp
object and one that is based on methods of the String object
 The simplest pattern-matching method is search, which takes a pattern as a parameter.
 The search method returns the position in the String object (through which it is called) at
which the pattern matched.
 If there is no match, search returns-1.
 Most characters are normal, which means that, in a pattern, they match themselves.
 The position of the first character in the string is 0.

83 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

As an example, the following statements

var str — "Rabbits are furry";
var position “ str.search!/bits/);
if !position >= O)
document.write!"'bits' appears in position", position,
"<br />");
else
document.write("** bits' does not appear in str <br />”);
@@@@@@@@@@@@@@@
produce rhe following output:
'bits' appears In position 3
@@@@@@@@@@@@@@

CHARACTER AND CHARACTER-CLASS PATTERNS

 Metacharacters are characters that have special meanings in some contexts in patterns.
 The following are the pattern metacharacters:
 \l () []{}A$* + ?.
 Metacharacters can themselves be matched by being immediately preceded by a backslash.
 A period matches any character except newline.
 /snow./ matches "snowy", “snowe”, and "snowd"
 /3\.4/ matches 3.4. but /3Af would match 3.4 and 37 4, among others.
 [abc] matches ‘a’, 'b' & ‘c’
 [a-h] matches any lowercase letter from ’a’ to 'h'
 [^aeiou] matches any lowercase letter except ‘a’, ‘e’, 'i’, ‘o' & 'u'.

ANCHORS
 A pattern is tied to a string position with an anchor. A pattern can be specified to match
only at the beginning of the string by preceding it with a circumflex (') anchor.
 For example, the following pattern matches "pearls are pretty" but does not match "My
pearls are pretty":
 /^pearl/
 A pattern can be specified to match at the end of a string only by following the pattern
with a dollar sign anchor. For example, the following pattern matches "I like gold" but
does not match "golden":

84 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

 /gold$/
 Anchor characters are like boundary-named patterns: They do not match specific
characters in the string; rather, they match positions before, between, or after characters.

PATTERN MODIFIERS
• The modifiers are specified as letters just after the right delimiter of the pattern.
• The i modifier makes the letters in the pattern match either uppercase or lowercase letters
in the string.
• For example, the pattern /Apple/i matches ‘APPLE’, 'apple', 'APPle', and any other
combination of uppercase and lowercase spellings of the word "apple."
• The x modifier allows white space to appear in the pattern.

ERRORS IN SCRIPTS
The JavaScript interpreter is c from debugging a program in the JavaScript interpreter are
script error causes the browse diagnostic message, you must apable of detecting vari
more typical program found while the browse r not to display the doc simply examine the code

//debugdemo.
// An example to illustrate debugging help
var row;
row = 0;
while(row != 4 {
document.write("row is”,row “<br />”);
row++;
}

85 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

Unit - 4
Java Script and HTML Documents

THE IAVASCRIPT EXECUTION ENVIRONMENT

• A browser displays an XHTML document in a window on the screen of the client
• The JavaScript Window object represents the window that displays the document.
• The properties of the Window object are visible to all JavaScript scripts that appear either
implicitly or explicitly in the window's XHTML document, so they include all of the global
variables.
• Every Window object has a property named document, which is a reference to the Document
object that the window displays.
• Every Document object has a forms array, each element of which represents a form in the
Document
• Each forms array element has an elements array as a property, which contains the objects that
represent the XHTML form elements, such as buttons and menus.
• Document objects also have property arrays for anchors, links, images, and applets.

THE DOCUMENT OBJECT MODEL

• The original motivation for the standard DOM was to provide a specification that would allow
Java programs and JavaScript scripts that deal with XHTML documents to be portable
among various browsers.
• The DOM is an application programming interface (API) that defines an interface between
XHTML documents and application programs.
• It is an abstract model because it must apply to a variety of application programming
languages.
• Each language that interfaces with the DOM must define a binding to that interface.
• The actual DOM specification consists of a collection of interfaces, including one for each
document tree node type.
• They define the objects, methods, and properties that are associated with their respective
node types.

86 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

• With the DOM. users can write code in programming languages to create documents, move
around in their structures, and change, add, or delete elements and their content.
• Documents in the DOM have a treelike structure, but there can be more than one tree in a
document
• Because the DOM is an abstract interface, it does not dictate that documents be implemented
as trees or collections of trees.
• <html xmlns = “http://www.w3.org/1999/xhtml1”>
• <head> <title> A simple table </title>
• </head>
• <body>
• <table border = "border">
• <tr>
• <th> </th>
• <th> Apple </th>
• <th> Orange </th>
• </tr>
• <tr>
• <th> Breakfast </th>
• <td> 0 </td>
• <td> 1 </td>
• </tr>
• </table>
• </body>
• </html>

87 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

ELEMENT ACCESS IN JAVASCRIPT

The elements of an XHTML document have corresponding objects that are visible to an embedded
JavaScript script. There are several ways the object associated with an XHTML form element can
be addressed in JavaScript The original (DOM 0) way is to use the forms and elements arrays of
the Document object, which is referenced through the document property of the Window object.

The DOM address of the button in this example, using the forms and elements arrays, is as follows:
var dom — document.forms[0].elements[0];
The problem with this approach to element addressing is that the DOM address is defined by
address elements that could change—namely, the forms and elements arrays.

88 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

Using the name attributes, the button’s DOM address is as follows:

var dom = document.myForm.turnltOn;
One drawback of this approach is that the XHTML 1.1 standard does not allow the name attribute
in the form element, even though the attribute is now valid for form elements. This is a validation
problem, but it causes no difficulty for browsers. Hence, alternatively we use,
var dom = document.getElementById(”turnItOn");
Buttons in a group of checkboxes often share the same e ame. The buttons in a radio button group
always have the same name. In these cases, the names of the individual buttons obviously cannot
be used in their DOM addresses. To access the arrays, the DOM address of the form object must
first be obtained, as shown:
<form id » "vehicleGroup">
<input type = "checkbox" name = "vehicles1
value = "car" /> Car
<input type - "checkbox" name = "vehicles’
value = "truck" /> Truck
<input type = "checkbox" name = "vehicles'
value = “bike" /> Bike
</form>
The checked property of a checkbox object is set to true if the button is checked. For the preceding
sample
checkbox group, the following code would count the number of checkboxes that were checked:
var numChecked = 0;
var dom =document.getElementById("vehicleGroup");
for (index = 0; index < don.vehicles.length; index*+)

89 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

if (dom.vehicles!index].checked)
numChecked++;
Radio buttons can be addressed and handled exactly as are the checkboxes in the foregoing code.

EVENTSAND EVENT HANDLING

BASIC CONCEPTS OF EVENT HANDLING
 One important use of JavaScript for Web programming is to detect certain activities of the
browser and the browser user and provide computation when those activities occur. These
computations are specified with a special form of programming called event-driven
programming.
 In conventional (non-event-driven) programming, the code itself specifies the order in which it
is executed, although the order is usually affected by the program's input data.
 In event-driven programming, parts of the program are executed at completely unpredictable
times, often triggered by user interactions with the program that is executing.
 An event is a notification that something specific has occurred, either with the browser, such as
the completion of the loading of a document, or because of a browser user action, such as a
mouse click on a
 An event handler is a script that is implicitly executed in response to the appearance of an event.
Event handlers enable a Web document to be responsive to browser and user activities.
 One of the most common uses of event handlers is to check for simple errors and omissions in
user input to the elements of a form, either when they are changed or when the form is
submitted.
 This kind of checking saves the time of sending incorrect form data to the server.
 Because events are JavaScript objects, their names are case sensitive. The names of all event
objects have only lowercase letters.
 Events are created by activities associated with specific XHTML elements.
 The process of connecting an event handler to an event is called registration.
 There are two distinct approaches to event handler registration, one that assigns tag attributes
and one that assigns handler addresses to object properties.

90 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

Attribute Description

onblur Executed the script when form element loses the focus.

onchange Executed the script when the value of the element is changed.

onfocus Trigger an event when the element gets focused.

oninput Executed the script when the user enters input to the element.

oninvalid Executed the script when the element does not satisfy its predefined constraints.

onreset Triggers the event when user reset the form element values.

onsearch Triggers the event when a search field receives some input.

onselect Triggers the event when the user has selected some text.

onsubmit Triggers the event when a form is submitted.

Attribute Description

keydown Triggers the event when the user presses down a key on the keyboard.

keypress Trigger the event when the user presses the key which displays some character.

91 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

keyup Trigger the event when the user releases the currently pressed key.

Attribute Description

click Trigger the event when the mouse clicks on the element.

dblclick Trigger the event when mouse double-click occurs on the element.

mousedown Trigger the event when the mouse button is pressed on the element.

mousemove Trigger the event when the mouse pointer moves over the element.

mouseout Trigger the event when the mouse moves outside the element.

mouseover Trigger the event when the mouse moves onto the element.

mouseup Trigger the event when the mouse button is released.

onmousewheel Deprecated. Use the onwheel attribute.

onwheel Trigger the event when the mouse wheel rolls up or down on the element

HANDLING EVENTS FROM BODY ELEMENTS

The events most often created by body elements are load and unload. As our first example of event
handling, we consider the simple case of producing an alert message when the body of the
document has been loaded. In this case, we use the onload attribute of <body> to specify the event
handler:

92 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

93 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

HANDLING EVENTS FROM TEXT BOX AND PASSWORD ELEMENTS

Text boxes and passwords can create four different events: blur, focus, change, and select.

 First, it determines whether the user typed the initial password (in the first input box) by testing
the value of the element against the empty string. If no password has been typed into the first
field, the function calls alert to produce an error message and returns false.
 The second test determines whether the two typed passwords are the same. If they are
different, once again the function calls alert to generate an error message and returns
false.

94 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

THE DOM 2 EVENT MODEL

The DOM 2 model is a modularized interface. One of the DOM 2 modules is Events, which
includes several sub-modules. The ones most commonly used are HTMLEvents and
MouseEvents. The interfaces and events defined by these modules are as follows:

EVENT PROPAGATION:
• A browser which understands DOM, on receiving the XHTML document from the server,
creates a tree known as document tree.
• The tree constructed consists of elements of the document except the HTML
• The root of the document tree is document object itself
• The other elements will form the node of the tree

95 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

100 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

• <title>Visibi li ty Control</title>
• <script type="text/javascript" src="showHide.js">
• </script>
• </head>
• <body>
• <form action="">
• <div id="rnsit" style="position:relative; visibility: visible;">
• <img src = "CLASS PHOTO.jpg" alt = "RNSIT ISE 2009-2013" />
• </div>
• <p><br><input type="button" value="Toggle Rnsit" ondick = "fliplmagO" /></p>
• </form>
• </body>
• </html>

• //showHide.js
• function fliplmag( ) {
• dom=document.getElementById("rnsit").style;
• if(dom.visibility == "visible")
• dom.visibility = "hidden";
• else
• dom.visibility = "visible";
• }

101 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

CHANGING COLORS AND FONTS

The background and foreground colors of the document display can be dynamically changed, as
can the font properties of the text.

CHANGING COLORS
• Dynamic changes to colors are relatively simple.
• In the next example, the user is presented with two text boxes into which color specifications
can be typed—one for the document background color and one for the foreground color.
• The colors can be specified in any of the three ways that color properties can be given in
CSS.
• A JavaScript function that is called whenever one of the text boxes is changed makes the
change in the document’s appropriate color property: back-groundColor or color.
• The first of the two parameters to the function specifies whether the new color is for the
background or foreground; the second specifies the new color.
• The new color is the value property of the text box that was changed by the user,

102 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

• <html><title>Dynamic Colors</title>
• <scripttype="text/javascript" src = "dynColors.js">
• </script>
• </head>
• <body>
• <form action="">
• <p>
• <label>Background Color: <input type="text" name="bg" size = "20"
onchange="setColorCbg', this.value)" /></label>
• <label>Foreground Color: cinput type="text" name="fg" size = "20"
onchange="setColor('fg’, this.value)" /> </label>
• <br/>/p>
• </form>
• </body>
• </html>

• //dyn Color. js
• function setColorf where, newColor)
• {
• if( where == "bg")
• document.body.style.backgroundColor = newColor;
• else
• document.body.style.color = newColor;

103 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

DYNAMIC CONTENT
• We now develop an example that illustrates one use of dynamic content.
• Assistance to a browser user filling out a form can be provided with an associated text area,
often called a help box.
• The content of the help box can change, depending on the placement of the mouse cursor.
• When the cursor is placed over a particular input field, the help box can display advice on how
the field is to be filled in.
• When the cursor is moved away from an input field, the help box content can be changed to
simply indicate that assistance is available.
• In the next example, an array of messages that can be displayed in the help box is defined in
JavaScript.
• When the mouse cursor is placed over an input field, the mouseover event is used to call a
handler function that changes the help box content to the appropriate value
• The appropriate value is specified with a parameter sent to the handler function.

Lecturer In Computer Science

LOCATING THE MOUSE CURSOR

• A mouse-click event is an implementation of the Mouse-Event interface, which defines
two pairs of properties that provide geometric coordinates of the position of the element in
the display that created the event.
• One of these pairs, clientX and clientY, gives the coordinates of the element relative to the
upperleft comer of the browser display window, in pixels.
• The other pair, screenX and screenY, also gives coordinates of the element, but relative to
the client computer’s screen.
• In the next example, where.html, two pairs of text boxes are used to display these four
properties every time the mouse button is clicked.
• The handler is triggered by the onclick attribute of the body element.
• The call to the handler in this example sends event, which is a reference to the event object
just created in the element, as a parameter.

REACTING TO A MOUSE CLICK

The next example is another one related to reacting to mouse clicks. In this case, the mousedown
and mouseup events are used, respectively, to show and hide the message "Please don’t click
here!” on the display under the mouse cursor whenever the mouse button is clicked, regardless of
where the cursor is at the time. The offsets (-130 for left and -25 for top) modify the actual cursor
position so that the message is approximately centered over it.

111 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

• //anywhere.html
• <html>
• <head>
• <title>Sense events anywhere</title>
• <script type= "text/javascript" >
• function displaylt(evt){
• vardom=documentgetElementByld("message");
• dom.style.left=(evt.clientX -130) + "px";
• dom.style.top=(evt.clientY - 25 ) + "px";
• dom.style.visibility= "visible";
• }
• function hidelt()
• {
• document.getElementByld("message").style.visibility="hidden";
• } </script>
• </head>
• <body onmousedown="displaylt(event);" onmouseup="hidelt();">
• <P>
• <span id="message”
• style = "coloured; visibility:hidden; position:relative; font-size:20pt; font-weight:bold;">
• Please Don’t Click Here..!!
• </span>
• <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>< br> <br> <b rx br>< br> <br>
<br ><b r>< br> <br> <b rxb r>< br>< br> <br> <br>< br>< br> <br> <br>< br>< br>
<br><b r>< brx br> <br><b r>< br> <br> <b r>< br>< br> <br> <br ><b r>< br> <br>
<br><b r>< br>< br> <br> <b r><br><br>< br>< br> <br ><br >< br>< br> <br><br>
• < br>
• </p>
• </body>
• </html>

112 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

SLOW MOVEMENT OF ELEMENTS

• The only way to move an element slowly is to move it by small amounts many times, with
the moves separated by small amounts of time.
• JavaScript has two Window methods that are capable of this task: setTimeout and set
Interval.
• The setTimeout method takes two parameters: a string of JavaScript code to be executed
and a number of milliseconds of delay before executing the given code.
• The set Interval method has two forms. One form takes two parameters, exactly as does
setTimeout.
• It executes the given code repeatedly, using the second parameter as the interval, in
milliseconds, between executions.
• The second form of set interval takes a variable number of parameters.
• The first parameter is the name of a function to be called, the second is the interval in
milliseconds between the calls to the function, and the remaining parameters are used as
actual parameters to the function being called.
• The initial position of the text is set in the span element that specifies the text.
• The onload attribute of the body element is used to call a function, initText, to initialize the
x- and y-coordinates of the initial position to the left and top properties of the element and
call the mover function.
• ★ The mover function, named moveText, takes the current coordinates of the text as
parameters, moves them one pixel toward the final position, and then, using setTimeout,
calls itself with the new coordinates.

113 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

DRAGGING AND DROPPING ELEMENTS

• The mouseup, mousedown, and mousemove events can be used to implement drag and drop.
• To illustrate drag and drop, an XHTML document and a JavaScript file that creates a magnetic
poetry system is developed, showing two static lines of a poem and allowing the user to create
the last two lines from a collection of movable words.
• The DOM 0 model is used for the call to the handler for the mousedown event.
• The rest of the process is designed with the DOM 2 model.
• The mousedown event handler, grabber, takes the Event object as its parameter.
• It gets the element to be moved from the currentTarget property of the Event object and puts
it in a global variable so that it is available to the other handlers.
• Then it determines the coordinates of the current position of the element to be moved and
computes the difference between each of them and the corresponding coordinates of the
position of the mouse cursor.
• The grabber handler also registers the event handlers for mousemove and mouseup.
• These two handlers are named mover and dropper, respectively.
• The dropper handler disconnects mouse movements from the element-moving process
by unregistering the handlers mover and dropper.

INTRODUCTION TO XML
SYNTAX OF XML
• XML imposes two distinct levels of syntax:
• There is a general low level syntax that is appreciable on all XML documents
• The other syntactic level is specified by DTD (Document Type Definition) or XML schemas.
• The DTDs and XML schemas specify a set of tag and attribute that can appear in a particular
document or collection of documents.
• They also specify the order of occurrence in the document.
• The XML documents consists of data elements which form the statements of XML document
• The XML document might also consists of markup declaration, which act as instructions to
the XML parser

114 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

• All XML documents begin with an XML declaration. This declaration identifies that the
document is a XML document and also specifies version number of XML standard.
• It also specifies encoding standard.
• <?xml version = "1.0" encoding = "utf-8"?>
• Comments in XML is similar to HTML
• XML names are used to name elements and attributes.
• XML names are case-sensitive.
• There is no limitation on the length of the names.
• All XML document contains a single root element whose opening tag appears on first line of
the code
• All other tags must be nested inside the root element
• As in case of XHTML, XML tags can also have attributes
• The values for the attributes must be in single or double quotation.

XML Document Structure

The XML Recommendation states that an XML document has both logical and physical structure.
Physically, it is comprised of storage units called entities, each of which may refer to other entities,
similar to the way that include works in the C language. Logically, an XML document consists of
declarations, elements, comments, character references, and processing instructions, collectively
known as the markup.

115 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

An XML document consists of three parts, in the order given:

• An XML declaration (which is technically optional, but recommended in most normal cases)
• A document type declaration that refers to a DTD (which is optional, but required if you
want validation)
• A body or document instance (which is required)

XML Declaration
• The XML declaration is a piece of markup (which may span multiple lines of a file) that
identifies this as an XML document. The declaration also indicates whether the document can
be validated by referring to an external Document Type Definition (DTD). DTDs are the
subject of chapter 4; for now, just think of a DTD as a set of rules that describes the structure
of an XML document.

• The minimal XML declaration is:

<?xml version="1.0" ?>

• XML is case-sensitive (more about this in the next subsection), so it's important that you use
lowercase for xml and version. The quotes around the value of the version attribute are
required, as are the? Characters. At the time of this writing, "1.0" is the only acceptable value
for the version attribute, but this is certain to change when a subsequent version of the XML
specification appears.
• The following declaration means that there is an external DTD on which this document
depends. See the next subsection for the DTD that this negative standalone value implies.
• <?xml version="1.0" standalone="no" ?>
• On the other hand, if your XML document has no associated DTD, the correct XML
declaration is:
• <?xml version="1.0" standalone="yes" ?>

116 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

Document Type Declaration

• The document type declaration follows the XML declaration. The purpose of this declaration
is to announce the root element (sometimes called the document element) and to provide the
location of the DTD.4 The general syntax is:

• <!DOCTYPE RootElement (SYSTEM | PUBLIC)

ExternalDeclarations? [InternalDeclarations]? >
where <!DOCTYPE is a literal string, RootElement is whatever you name the outermost
element of your hierarchy, followed by either the literal keyword SYSTEM or PUBLIC. The
optional ExternalDeclarations portion is typically the relative path or URL to the DTD that
describes your document type. (It is really only optional if the entire DTD appears as an
InternalDeclaration, which is neither likely nor desirable.)

In this example, we are indicating that the DTD and the XML document reside in the same
directory (i.e., the ExternalDeclarations are contained in the file employees.dtd) and that the
root element is Employees:

<!DOCTYPE Employees SYSTEM "employees.dtd">

Similarly,

<!DOCTYPE PriceList SYSTEM "prices.dtd">

indicates a root element PriceList and the DTD is in the local file: prices.dtd.

In the next example, we use normal directory path syntax to indicate a different location for
the DTD.

<!DOCTYPE Employees SYSTEM "../dtds/employees.dtd">

117 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

Document Body
• The document body, or instance, is the bulk of the information content of the document.
Whereas across multiple instances of a document of a given type (as identified by
the DOCTYPE) the XML prolog will remain constant, the document body changes with each
document instance (in general).
• Because the document type declaration specifies the root element, this must be the first
element the parser encounters. If any other element but the one identified by
the DOCTYPE line appears first, the document is immediately invalid.

DECLARING ELEMENTS
• DTD follows rules of context-free grammar for element declaration
• A DTD describes the syntactic structure of a particular set of documents
• Each element declaration in a DTD specifies the structure of one category of elements
• An element is a node in such a tree either a leaf node or an internal node
• A If element is leaf node, its syntactic description is its character pattern
• If the element is internal node, its syntactic description is a list of its child element
• The form of an element declaration for elements that contain elements is as follows:

118 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

• <!ELEMENT element_name (list of names of child elements)>

• For example, consider the following declaration:
• <!ELEMENT memo (from, to, date, re, body)>

• In many cases, it is necessary to specify the number of times that a child element may appear.
• This can be done in a DTD declaration by adding a modifier to the child element
specification. These modifiers, described in Table 7.1, are borrowed from regular
expressions.
• Any child element specification can be followed by one of the modifiers.

XML attributes.

• Attributes are part of XML elements. An element can have multiple unique attributes.

• Attribute gives more information about XML elements. To be more precise, they define
properties of elements. An XML attribute is always a name-value pair.

Syntax

An XML attribute has the following syntax −

<element-name attribute1 attribute2 >

119 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

....content..
< /element-name>

where attribute1 and attribute2 has the following form −

name = "value"

value has to be in double (" ") or single (' ') quotes. Here, attribute1 and attribute2 are unique
attribute labels.

Attributes are used to add a unique label to an element, place the label in a category, add a Boolean
flag, or otherwise associate it with some string of data. Following example demonstrates the use
of attributes −

<?xml version = "1.0" encoding = "UTF-8"?>

<!DOCTYPE garden [
<!ELEMENT garden (plants)*>
<!ELEMENT plants (#PCDATA)>
<!ATTLIST plants category CDATA #REQUIRED>
]>

Attributes are used to distinguish among elements of the same name, when you do not want to
create a new element for every situation. Hence, the use of an attribute can add a little more detail
in differentiating two or more similar elements.

In the above example, we have categorized the plants by including attribute category and
assigning different values to each of the elements. Hence, we have two categories of plants,
one flowers and other shrubs. Thus, we have two plant elements with different attributes.

120 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

You can also observe that we have declared this attribute at the beginning of XML.

Attribute Types

Following table lists the type of attributes −

Attribute Type Description

StringType It takes any literal string as a value. CDATA is a StringType. CDATA is character
data. This means, any string of non-markup characters is a legal part of the
attribute.

This is a more constrained type. The validity constraints noted in the grammar
are applied after the attribute value is normalized. The TokenizedType attributes
TokenizedType
are given as −

 ID − It is used to specify the element as unique.

121 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

 IDREF − It is used to reference an ID that has been named for another

element.

 IDREFS − It is used to reference all IDs of an element.

 ENTITY − It indicates that the attribute will represent an external entity

in the document.

 ENTITIES − It indicates that the attribute will represent external entities

in the document.

 NMTOKEN − It is similar to CDATA with restrictions on what data can

be part of the attribute.

 NMTOKENS − It is similar to CDATA with restrictions on what data

can be part of the attribute.

This has a list of predefined values in its declaration. out of which, it must assign
one value. There are two types of enumerated attribute −

 NotationType − It declares that an element will be referenced to a

EnumeratedType
NOTATION declared somewhere else in the XML document.

 Enumeration − Enumeration allows you to define a specific list of values

that the attribute value must match.

Element Attribute Rules

Following are the rules that need to be followed for attributes −

 An attribute name must not appear more than once in the same start-tag or empty-element
tag.

122 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

 An attribute must be declared in the Document Type Definition (DTD) using an Attribute-
List Declaration.

 Attribute values must not contain direct or indirect entity references to external entities.

 The replacement text of any entity referred to directly or indirectly in an attribute value must
not contain a less than sign (<)

DECLARING ENTITIES

• Entities can be defined so that they can be referenced anywhere in the content of an XML
document, in which case they are called general entities. The predefined entities are all
general entities.
• Entities can also be defined so that they can be referenced only in DTDs, in which case
they are called parameter entities.
• The form of an entity declaration is <!ENTITY [%] entity_name "entity_yalue">
• When the optional percent sign (A) is present in an entity declaration, it specifies that the
entity is a parameter entity rather than a general entity.
• Example: <! ENTITY sbs "Santhosh B Suresh">

• When an entity is longer than a few words, its text is defined outside the DTD. In such
cases, the entity is called an external text entity. The form of the declaration of an external
text entity is <!ENTITY entity_name SYSTEM "file_location">

• Some XML parsers check documents that have DTDs in order to ensure that the
documents conform to the structure specified in the DTDs. These parsers are called
validating parsers.
• If an XML document specifies a DTD and is parsed by a validating XML parser, and the
parser determines that the document conforms to the DTD, the document is called valid.
• Handwritten XML documents often are not well formed, which means that they do not
follow XML’s syntactic rules.
• Any errors they contain are detected by all XML parsers, which must report them.
• XML parsers are not allowed to either repair or ignore errors.

123 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

• Validating XML parsers detect and report all inconsistencies in documents relative to their
DTDs.

INTERNAL AND EXTERNAL DTDs

• Internal DTD Example:
• <?xml version “ "1.0" encoding =”utf-8”>
• <DOCTYPE planes [
• <!— The DTD for planes —>
• ]>
• <!— The planes XMT. document —>
• External DTD Example: [assuming that the DTD is stored in the file named planes.dtd]
• <’DOCTYPE planes_for_sale SYSTEM "planes.dtd">
• //sampleDTD.xml
• <?xml version = "1.0" encoding = “utf-8"?>
• <!DOCTYPEvtu_stud_info SYSTEM ”vtu.dtd“>

124 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

• <VTU>
• <students>
• <USN> 1RN10CS090 </USN>
• <name> Santhosh B S</name>
• <college> RNSIT </college>
• <branch> CSE </branch>
• <year> 2010 </year>
• <email> santhosh. b.suresh@gmail.com </email>
• </students>
• <students>
• <USN> 1RN0IS016 </USN>
• <name> Divya K </name>
• <college> RNSIT </college>
• <branch> ISE </branch>
• <year> 2009 </year>
• <email> divya@gmail.com </email>
• </students>
• <students>
• <USN> 1RN0IS016 </USN>
• <name> Divya K </name>
• <college> RNSIT </college>
• <branch> ISE </branch>
• <year> 2009 </year>
• <email> divya@gmail.com </email>
• </students>
• </VTU>

NAMESPACES
• One problem with using different markup vocabularies in the same document is that
collisions between names that are defined in two or more of those tag sets could result
• An example of this situation is having a <table> tag for a category of furniture and a
<table> tag from
• XHTML for information tables.
• Clearly, software systems that process XML documents must be capable of unambiguously
recognizing the element names in those documents.

125 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

• One XSLT model of processing XML data is called the template-driven model, which works
well when the data consists of multiple instances of highly regular data collections, as with
files containing records.
• XSLT can also deal with irregular and recursive data, using template fragments in what is
called the data-driven model.
• A single XSLT style sheet can include the mechanisms for both the template- and data-driven
models.

XML PROCESSORS
• The XML processor takes the XML document and DTD and processes the information so that
it may then be used by applications requesting the information.
• The processor is a software module that reads the XML document to find out the structure and
content of the XML document.
• The structure and content can be derived by the processor because XML documents contain
self-explanatory data.

THE PURPOSES OF XML PROCESSORS

• First, the processor must check the basic syntax of the document for well-formedness.
• Second, the processor must replace all references to entities in an XML document with their
definitions.
• Third, attributes in DTDs and elements in XML schemas can specify that their values in an
XML document have default values, which must be copied into the XML document during
processing.
• Fourth, when a DTD or an XML schema is specified and the processor includes a validating
parser, the structure of the XML document must be checked to ensure that it is legitimate.

THE SAX APPROACH

• The Simple API for XML (SAX) approach to processing is called event processing.
• The processor scans the XML document from beginning to end.
• Every time a syntactic structure of the document is recognized, the processor signals an event
to the application by calling an event handler for the particular structure that was found.

133 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

• The syntactic structures of interest naturally include opening tags, attributes, text, and closing
tags.
• The interfaces that describe the event handlers form the SAX API.

THE DOM APPROACH

• The Document Object Model (DOM) is an application programming interface (API) for
HTML and XML documents.
• It defines the logical structure of documents and the way a document is accessed and
manipulated
• Properties of DOM
o Programmers can build documents, navigate their structure, and add, modify, or delete
elements and content.
o Provides a standard programming interface that can be used in a wide variety of
environments and applications.
o Structural isomorphism.
• The DOM representation of an XML document has several advantages over the sequential
listing provided by SAX parsers.
• First, it has an obvious advantage if any part of the document must be accessed more than once
by the application.
• Second, if the application must perform any rearrangement of the elements of the document
that can most easily be done if the whole document is accessible at the same time.
• Third, accesses to random parts of the document are possible.
• Finally, because the parser sees the whole document before any processing takes place, this
approach avoids any processing of a document that is later found to be invalid.

WEB SERVICES
A Web service is a method that resides and is executed on a Web server, but that can be called
from any computer on the Web. The standard technologies to support Web services are WSDL,
UDD1, SOAP, and XML.
• WSDL - It is used to describe the specific operations provided by the Web service, as well as
the protocols for the messages the Web service can send and receive.

134 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

• UDDI - also provides ways to query a Web services registry to determine what specific
services are available.
• SOAP - was originally an acronym for Standard Object Access Protocol, designed to describe
data objects.
• XML - provides a standard way for a group of users to define the structure of their data
documents, using a subject-specific mark-up language.

135 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

VI Semester B.C.A. Examination, May 2017 (CBCS)

(2016-17 and Onwards)
COMPUTER SCIENCE
BCA 604: Web Programming
Max. Marks: 70 Time: 3 Hours
Instruction: Answer all Sections.
SECTION-A
Answer any ten questions. Each question carries two marks (10x2=20)
1. What is a web browser? Mention any three web browsers.
2. What is a DTD? Mention its types.
3. What is the use of <img> tag? Give the syntax of <img> tag.
4. What is universal selector?
5. What is an ID selector in CSS?
6. What do you mean by an Math and date object in Java Scrip?
7. What is DHTML? Explain.
8. What are composite datatypes in JavaScript?
9. What is XML schema?
10. What are Mouse events?
11. What is an event handler?
12. What is MIME? Explain.
SECTION-B
Answer any five questions. (5x10=50)
13. a) What is DNS ? Explain domain and sub-domain with suitable examples.
b) What are the different levels of headings in HTML?
14. What are the different types of lists supported in XHTML? Explain
15. a) Explain different levels of CSS.
b) Explain any five types of selectors in CSS.
16. a) Write a Java Script code to find factorial of a number.
b) What is a Java Script? What are data types supported by Java Script.
17. What is a form? Explain form components with example.
18. a) What are the different types of positioning techniques? Explain.
b) Explain table tag with example.
19. a) Create a form for student information. Write Java Script code to find total, average, result and grade.
b) What is DTD? Explain internal DTD and external DTD.
20. a) Explain XHTML events.
b) Write a short note on DOM.

136 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

lOMoARcPSD|17894140

WEB PROGRAMMING SUHAS AITHAL V

Lecturer In Computer Science

VI Semester B.C.A. Examination, May/June 2018

(CBCS) (F+R) (2016 - 17 & Onwards)
COMPUTER SCIENCE
BCA 604: Web Programming
Time: 3 Hours Max. Marks: 70
Instruction: Answer all Sections.
SECTION - A
Answer any ten questions. Each question carries two marks. (10x2=20)
1. Define web browser.
2. What do you mean by IP address?
3. Define URL. Give an example.
4. What is MIME?
5. Give any two differences between HTML and XHTML.
6. What is navigator object?
7. What is event and event handler?
8. What is XML schema?
9. List out any two mouse events.
10. What do you mean by namespaces?
11. What is constructor in Javascript?
12. What is XSLT style sheet?
SECTION - B
Answer any five questions. Each question carries 10 marks.
13. a) Explain lists in XHTML with examples.
b) Illustrate < frameset > tag with example.
c) Differentiate < span > and < div > tags with examples.
14. a) What is CSS? Explain the different levels of CSS with examples.
b) Write a JavaScript program to implement all string operations.
15. a) What is selector in CSS? Distinguish class and ID selectors with examples.
b) What is a form? Illustrate the major attributes of form with examples.
16. a) What is an array in JavaScript? How to create an array object? Give an example.
b) What is the general syntax of a JavaScript function? Give an example.
17. Explain pattern matching using regular expressions in JavaScript.
18. a) Illustrate DOM.
b) Write a JavaScript program to implement keyboard events.
19. a) What is DTD? Explain the type of DTD.
b) Write a JavaScript program to find factorial of a list of numbers, reading input as command line argument.
20. a) Explain CSS box model. b) Describe XML processors.

137 | P a g e VSISCM

Downloaded by Ashwani kumari (kumariashwani1371@gmail.com)

Web Application Practical Questions
100% (2)
Web Application Practical Questions
2 pages
Metglas 2605S3A HFA
100% (1)
Metglas 2605S3A HFA
2 pages
Web Programming Notes
100% (1)
Web Programming Notes
82 pages
Web - Technology (Questions & Answers For Lab Viva)
67% (3)
Web - Technology (Questions & Answers For Lab Viva)
18 pages
CS6551 Computer Networks Two Mark With Answer
100% (7)
CS6551 Computer Networks Two Mark With Answer
35 pages
Aktu Notes - Principles of Programming Languages (Rcs503), Question Bank - Uptu Notes
No ratings yet
Aktu Notes - Principles of Programming Languages (Rcs503), Question Bank - Uptu Notes
117 pages
Web-Programming Notes MRIET
No ratings yet
Web-Programming Notes MRIET
142 pages
IT8501-Web-techonology QP 21
No ratings yet
IT8501-Web-techonology QP 21
3 pages
J2EE Complete Reference - Ch01
No ratings yet
J2EE Complete Reference - Ch01
19 pages
Web Unit 1 (Nep)
No ratings yet
Web Unit 1 (Nep)
47 pages
Web Technology Question Bank
No ratings yet
Web Technology Question Bank
5 pages
BCA SEE4111 Question Paper Internet Web Technology
No ratings yet
BCA SEE4111 Question Paper Internet Web Technology
2 pages
Cs2406 Open Source Lab Viva
0% (1)
Cs2406 Open Source Lab Viva
3 pages
CCS375 Web Technologies Lecture Notes 1
No ratings yet
CCS375 Web Technologies Lecture Notes 1
454 pages
CCS375 Set1
No ratings yet
CCS375 Set1
3 pages
System Calls Lab Manual
100% (1)
System Calls Lab Manual
8 pages
BCA Data Structures Notes
No ratings yet
BCA Data Structures Notes
24 pages
Question Bank Module 1: An Overview of Java
No ratings yet
Question Bank Module 1: An Overview of Java
4 pages
CS8581 Networks Lab Manual
100% (2)
CS8581 Networks Lab Manual
67 pages
DBMS Previous Questions
No ratings yet
DBMS Previous Questions
8 pages
CS 8392 - Oop - Question Bank
67% (3)
CS 8392 - Oop - Question Bank
7 pages
Daa Two Mark Questions
No ratings yet
Daa Two Mark Questions
9 pages
Data Structure Question Bank (University Papers)
No ratings yet
Data Structure Question Bank (University Papers)
3 pages
ADS Lab Manual PDF
No ratings yet
ADS Lab Manual PDF
54 pages
Java 2 Marks
No ratings yet
Java 2 Marks
9 pages
18CS55 ADP Question Bank Module 3, 4 and 5
No ratings yet
18CS55 ADP Question Bank Module 3, 4 and 5
5 pages
Unit-V: Introduction To AJAX
No ratings yet
Unit-V: Introduction To AJAX
32 pages
Web Technology Question Bank - Unit 1 and 2
No ratings yet
Web Technology Question Bank - Unit 1 and 2
13 pages
CPPS - Lab Manual (22POP13) (1-8)
No ratings yet
CPPS - Lab Manual (22POP13) (1-8)
34 pages
Full Stack - Unit 1
No ratings yet
Full Stack - Unit 1
15 pages
Dbms Important Question
No ratings yet
Dbms Important Question
4 pages
Chapter Wise Question and Answer OOPC
No ratings yet
Chapter Wise Question and Answer OOPC
65 pages
BCA T 113 Digital Electronics Question Bank
No ratings yet
BCA T 113 Digital Electronics Question Bank
9 pages
DAA Viva Questions
100% (1)
DAA Viva Questions
15 pages
Question Bank of WT-1
No ratings yet
Question Bank of WT-1
4 pages
What Is PHP BCA 6th Sem
No ratings yet
What Is PHP BCA 6th Sem
6 pages
WEB PROGRAMMING Unit 1 Notes
100% (1)
WEB PROGRAMMING Unit 1 Notes
15 pages
It3401 Web Essentials Syllabus
No ratings yet
It3401 Web Essentials Syllabus
2 pages
Chap 1 Web Essentials
75% (4)
Chap 1 Web Essentials
100 pages
Rajasthan RPSC Programmer Syllabus 2024 PDF
No ratings yet
Rajasthan RPSC Programmer Syllabus 2024 PDF
4 pages
Web Technology - Lecture Notes, Study Material and Important Questions, Answers
No ratings yet
Web Technology - Lecture Notes, Study Material and Important Questions, Answers
5 pages
Python Question Paper Mumbai Univercity
No ratings yet
Python Question Paper Mumbai Univercity
5 pages
15CS71 Web Important Questions
No ratings yet
15CS71 Web Important Questions
2 pages
It3401 Unit 5 Notes
No ratings yet
It3401 Unit 5 Notes
73 pages
Web Technology Important 2 Marks and 11 Marks
No ratings yet
Web Technology Important 2 Marks and 11 Marks
6 pages
200+ TOP DATA STRUCTURES LAB VIVA Questions and Answers CSE VIVA Questions
No ratings yet
200+ TOP DATA STRUCTURES LAB VIVA Questions and Answers CSE VIVA Questions
21 pages
Principles of Programming Languages Question Bank
50% (2)
Principles of Programming Languages Question Bank
3 pages
COMPUTER GRAPHICS-Skyward
No ratings yet
COMPUTER GRAPHICS-Skyward
80 pages
Question Bank (Advance Java)
100% (1)
Question Bank (Advance Java)
10 pages
Bpops103-C Lab Manual
No ratings yet
Bpops103-C Lab Manual
56 pages
WD File
100% (2)
WD File
22 pages
pst1 1st Sem Bca
No ratings yet
pst1 1st Sem Bca
14 pages
Algorithms As A Technology
No ratings yet
Algorithms As A Technology
4 pages
Java 2marks Questions With Answer
No ratings yet
Java 2marks Questions With Answer
19 pages
MCSL 016 Viva
No ratings yet
MCSL 016 Viva
3 pages
C & Data Structures
From Everand
C & Data Structures
Prof. P. Padmanabham
No ratings yet
Wit Lecture Notes by Ragini
No ratings yet
Wit Lecture Notes by Ragini
239 pages
Web Technologies Notes
No ratings yet
Web Technologies Notes
238 pages
Chapter 1: Introduction: Web Design and Development
No ratings yet
Chapter 1: Introduction: Web Design and Development
32 pages
Unit 1 - Fundamentals of Web, XHTML A Brief Introduction About The Internet 1) Origins
No ratings yet
Unit 1 - Fundamentals of Web, XHTML A Brief Introduction About The Internet 1) Origins
58 pages
01 Internet Web Concepts
No ratings yet
01 Internet Web Concepts
33 pages
Class 10
No ratings yet
Class 10
1 page
Math WHLP
No ratings yet
Math WHLP
4 pages
Industrial Drives and Application
No ratings yet
Industrial Drives and Application
10 pages
Accounting Entry - WIP, Variance Calculation & Settlement of Production Orders - SAP Q&A
No ratings yet
Accounting Entry - WIP, Variance Calculation & Settlement of Production Orders - SAP Q&A
3 pages
Ts Bhel
No ratings yet
Ts Bhel
71 pages
Overview of Fingerprint Recognition Syst
No ratings yet
Overview of Fingerprint Recognition Syst
5 pages
Process Design
No ratings yet
Process Design
6 pages
6CH08 01 Que 20130515
No ratings yet
6CH08 01 Que 20130515
16 pages
Bhasma Pariksha PDF
No ratings yet
Bhasma Pariksha PDF
8 pages
Abelian Group
100% (1)
Abelian Group
8 pages
Chapter4 Answers 3rd
No ratings yet
Chapter4 Answers 3rd
42 pages
Vibration sheets_SDOF
No ratings yet
Vibration sheets_SDOF
22 pages
FFF
No ratings yet
FFF
3 pages
Bolt Torque Calculation - Apr19
No ratings yet
Bolt Torque Calculation - Apr19
69 pages
StratWorks Tutorial
No ratings yet
StratWorks Tutorial
3 pages
Solidworks Tutorial: Sheetmetal & Assembly Project
No ratings yet
Solidworks Tutorial: Sheetmetal & Assembly Project
41 pages
Increased Screen Time and Its Association
No ratings yet
Increased Screen Time and Its Association
11 pages
Project Review - Final B187
No ratings yet
Project Review - Final B187
15 pages
SP Grade 2 SB Course Materials
No ratings yet
SP Grade 2 SB Course Materials
23 pages
Bioreactor Systems: For Rapid Bioprocess Development
No ratings yet
Bioreactor Systems: For Rapid Bioprocess Development
8 pages
NR-310305-Design of Machine Elements
No ratings yet
NR-310305-Design of Machine Elements
9 pages
Exam 1-Solutions
No ratings yet
Exam 1-Solutions
6 pages
Computer Networks-Lab: Hareem Aslam Hareem - Aslam@pucit - Edu.pk
No ratings yet
Computer Networks-Lab: Hareem Aslam Hareem - Aslam@pucit - Edu.pk
22 pages
11-Diktat Logam Dan Paduannya
No ratings yet
11-Diktat Logam Dan Paduannya
83 pages
Tub and D-Pro 500: The Powerful Safe Solution To Automate Large Sliding Gates. Ideal For Industrial Contexts
No ratings yet
Tub and D-Pro 500: The Powerful Safe Solution To Automate Large Sliding Gates. Ideal For Industrial Contexts
4 pages
Conventional Encryption Message Confidentiality: Data and Network Security
No ratings yet
Conventional Encryption Message Confidentiality: Data and Network Security
22 pages
Help Mla GFX
100% (1)
Help Mla GFX
374 pages
Iocl Project For 7th Sem
No ratings yet
Iocl Project For 7th Sem
14 pages
Exploratory Data Analysis BCG - Ipynb
No ratings yet
Exploratory Data Analysis BCG - Ipynb
260 pages