Scribd
Upload
20 views79 pages

WEB TECHNOLOGY Notes

The document provides an overview of HTML, its structure, and essential components for web page design, including tags, elements, attributes, and formatting. It explains the different types of tags, such as paired and unpaired tags, and discusses the importance of headings, paragraphs, lists, tables, and hyperlinks. Additionally, it covers the use of images, comments, and various formatting options to enhance web content.

Uploaded by

darshan442005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views79 pages

WEB TECHNOLOGY Notes

The document provides an overview of HTML, its structure, and essential components for web page design, including tags, elements, attributes, and formatting. It explains the different types of tags, such as paired and unpaired tags, and discusses the importance of headings, paragraphs, lists, tables, and hyperlinks. Additionally, it covers the use of images, comments, and various formatting options to enhance web content.

Uploaded by

darshan442005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 79

WEB

TECHNOLOGY
BCOM IV SEMESTER
OSMANIA UNIVERSITY

By,
Shiva Lakshmi G
Avinash Degree College

Page 1 of 79
UNIT I
HTML:
HTML stands for Hypertext Markup Language, and it is most widely used language used to design web pages.
A HTML document is simply a text file that contains the information you want to publish over the web.
A web page is accessed by entering a URL (Unform Resource Locator) address in the web browser. A web page
contains text, graphics, images, hyperlinks to web pages and files.
A website is composed of a group of webpages linked together. It is a central location that contains more than
one web page.
A browser is a software that acts as an interface between user and the internet. E.g. Google Chrome, Mozilla
Firefox, Internet Explorer etc.

Tag
A webpage contain text, graphics, audio, video and animations. To mark up this content, we use various
commands called Markup Indicators or TAGS.
So, HTML Tags are basically HTML based commands or keywords surrounded by angular brackets.
Eg. <HTML>, <head>, <body>, <form> etc
According to HTML standard, tag and attribute names are not case sensitive. So, there is no difference between
<HTML> and <html>.
Types of Tags:
There are 2 types of tags
1. Paired Tags or Padded Tags or Container Tags.
2. Unpaired Tags or Unpadded Tags or Empty Tags.
Paired Tags: HTML Tags normally come in pairs like HTML> and /HTML>. Such tags are called as paired
tags. The first tag in pair is the start tag and the second tag is called the end tag. End tag is same as start
tag but has forward slash before the tag name. Start tag and end tags are called as opening and closing
tags.
Eg. <html>, <a>, <table> etc
Unpaired tags: Unpaired tag refers to a tag which does not have closing or ending tag.
Eg. <br>, <hr>

HTML Elements:
An HTML element is everything from the start tag to the end tag, including the contents.
Example:

Page 2 of 79
Structure of HTML Document:
Every HTML document or page a basic structure.
An HTML document starts and ends with
<HTML> and </HTML> tags. Inside these 2 tags,
the document is split into 2 sections:
I. Header Section
II. Body Section
Header Section: This section define
<HEAD> …</HEAD> elements, which contain
information about the document such as title of
the document, author of the document etc.
Information inside this tag does not display
outside.
Body Section: This section define
<BODY>…</BODY> elements, which contain the
actual content of the document that is visible on
the web page.

Document Tags: Document tags define the overall structure of an HTML document. There are 4 tags every
HTML document should have. These tags define what type of document it is and the major sections of the
document. These tags are:
1. <HTML>
2. <HEAD>
3. <TITLE>
4. <BODY>
<HTML>: The <HTML> tag is the main container element for the whole HTML document It simply tells the
browser that this is an HTML document. Each HTML document should have one <HTML> tag and each document
should end with a closing </HTML> tag. The main two elements of HTML tag are <head> and <body>.
<HEAD>: The <head> tag is just a container for all the header elements. It simply defines the header section
of the HTML document. It should be the first thing to appear after opening <HTML> tag. The head tag should
contain <title> indicating the title of the document. It may also contain other tags like <link>, <style>, <script>,
<meta>
<TITLE>: The <title> tag is used to set a title for HTML document. The<title> tag defines a title in the browser’s
title bar. This element is a child of the <head> element. The <title> tag should contain only the text for the title
and it may not contain any other elements.
<BODY>: The <body> tag appears after the <HEAD> tag. It defines the body section of HTML document i.e., it
simply defines the documents body. The <BODY> tag contains all the contents of an HTML Document, such as
text, hyperlinks, images, tables, lists etc.
The <body> tag attributes:

Page 3 of 79
HTML Attributes
Attributes are important part of HTML elements. An attribute is used to define the characteristics of an element
and is always placed inside the elements opening tag. They provide some additional information about the
element.
All attributes are made up of 2 parts: a name and a value. Name is the property of the tag and the value is
assigned to the property. Name and value are separated by the equals sign.
Usually, attributes are written like name=”value”
Eg. <body bgcolor=”red”>
<font size=10 color=”blue”>

Example Program:
<html>
<head>
<title> Document Tags </title>
</head>
<body bgcolor=”pink” text=”blue”>
Have a nice Day!!
</body>
</html>

Header Tags:
Headings are important in HTML documents. Almost every document starts with a heading. HTML defines 6
levels of headings. The header tags are <H1>, <H2>, <H3>, <H4>, <H5>, <H6>.
<H1> displays text with larger size and <H6> displays text with smaller size.

Page 4 of 79
HTML Paragraphs:

The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before
and after a paragraph. Each paragraph of text should go between an opening <P> and closing </p> tag.

Horizontal line breaks <BR> and Horizontal Line<HR> Tags:


To break a line without starting a new paragraph in the webpage, <BR> tag is used. When<br> tag is used,
anything following it will start in the next line. The <br> tag is an empty HTML tag. It has no ending tag.
The HTML <HR> tag is used for creating a horizontal line. This is also called as Horizontal Ruler in HTML. A <HR>
tag is used to break a page into logical sections or into separate headers and footers from the rest of the page.

Page 5 of 79
HTML COMMENTS
Comments can be inserted in the HTML document to make it more readable and understandable. Comments
are used to explain the HTML code, which helps to edit source code at the later stage. Comments are ignored
by the browser and are not displayed on the web page.
HTML comment lines are indicated by the special beginning tag<!- - and ending tag --> . Content between these
two is treated as a comment. We can comment multiple lines by the beginning tag <!- - and ending tag - ->.

Page 6 of 79
Formatting Tags
HTML uses tags like <B>, <I> etc for formatting output like bold or italic text. These tags are called as HTML
Formatting Tags. The list of formatting tags are:
Page 7 of 79
Sl No Tag Description
1 <b> Bold text
2 <i> italic text
3 <u> underline text
4 <em> emphasized text
5 <small> smaller text
6 <big> bigger text
7 <strong> important text (Bold)
8 <sub> subscripted text
9 <sup> superscripted text
10 <pre> pre formatted text
11 <blackquote> Define a section that is quoted
12 <strike> striked text (line through)
13 <font> setting font size, color and face of text
14 <center> setting text/Image as center aligned
setting alignment of text/ image as
15 <div> center/left/right

Page 8 of 79
Logical Tags:

The Logical tags describe how the text is being used, not necessarily how it is formatted. The following are the
various logical tags.
Sl No Tag Description
1 <em> To emphasize text (Same as bold)
2 <strong> To define important text (Same as italics)
3 <cite> To emphasize the text in italics
To display some characters as code usually in
4 <code> Courier font
5 <del> To display text with line through
6 <dfn> Italic text
7 <ins> Underlined text

Page 9 of 79
Hyperlinks:

A hyperlink is a word or group of words or an image, that when clicked, we will be redirected to another
document or another section of the same page. Hyperlinks, connect HTML pages and other resources on the
web.
In HTML, <A> element defines a hyperlink. This element is called anchor tag as well. Anything between the
opening <A> tag and the closing </A> tag becomes part of the link and a user can click that part to reach to the
linked document.
The syntax of using <A> tag is:
<A href=”URL”>Link Text </A>
The href attribute specifies the destination of a link. The Link can be text or an image.
If the link is text, it is called as hypertext and if the link is an image, it is called as hyperimage.
By default, links will appear as follows in all browsers:
1. An unvisited link is underlined and blue.
2. A visited link is underlined and purple.
3. An active link is underlined and red.

Types of Hyperlinks
1. Absolute hyperlinks (External Hyperlinks)
2. Relative Hyperlinks (Internal Hyperlinks)

Page 10 of 79
1. Absolute Hyperlink: An absolute hyperlink uses a complete URL to connect browsers to a web page or
online resource. They provide a complete, stan-alone path to another web resource.

2. Relative Hyperlink: When a browser sees a link without a domain name, the browser assumes that the
link is relative and uses the domain and path from the linking page to find the linked page.
The following example works only when index.html and this program (hyper.html) are in the same
folder/ directory.

Page 11 of 79
Image Tag:
We can insert an image or graphics in many ways, but only a few formats are appropriate for images to
be inserted.
1. .GIF: GIF stands for “Graphics Interchange Format, a commonly used format for graphics/pictures
presented on websites.
2. .JPG/.JPEG: .JPEG stands for Joint Picture Experts Group, a common file format for digital photos and
other digital graphics.
3. .PNG: .PNG stands for Portable Network Graphics, a graphics file format which was created to
combine the best aspects of GIF and JPG.
We can add or insert an image in webpage by using HTML <IMG> tag. The <IMG> tag is an empty tag, which
means that it contains attributes only and has no closing tag. To display an image on a webpage, we need to use
src attribute of <IMG> tag. Src stands for “source”. The value of the src attribute is the URL of the image that
you want to display.

Syntax:
<img src=”URL”>

Attributes of <IMG> Tag:

<html>
<head>
<title>Images</title>
</head>
<body>
<img src=”img1.jpg” border=5 height=100 width=100 alt=”Good Morning” align=”right” valign=”middle” >
</body>
</html>

Page 12 of 79
MARQUEE TAG:
HTML marquees are a piece of code that allows us to create movement on an HTML element (text or image).
Usually, marquees continuously scroll across the screen. The tag used by HTML for this purpose is <marquee>.
We can make text/image to scroll from right to left, left to right, top to bottom, bottom to top.
Syntax:
<marquee attribute_name=”attribute_value”……..>
Text or Image
</marquee>

Marquee Attributes:

Page 13 of 79
Lists in HTML:
Lists are used to arrange or organize similar kinds of information i.e., lists are used to group related pieces of
information together, so they are clearly associated with each other and easy to read.

Types of Lists: HTML supports 3 types of lists:


1. Ordered List / Numbered List
2. Unordered List/ Bulleted List
3. Definition List

Page 14 of 79
Ordered List:
An ordered list consists of at least two items, each prefaced by a number. In HTML, an ordered list starts with
the <OL> tag. Each list item starts with <li> tag. The numbering starts with one and increments by one for each
successive list item.
The values used by type attribute are 1, a, A, I, i.
The default value of type attribute is 1.

Syntax:
<ol type=”value”>
<li>item1
<li>item2
.
.
.
</ol>

Example:
<html>
<head>
<title>Ordered list</title>
</head>
<body>
List of Courses
<ol type=”A”>
<li>BCom General
<li>BCom Comp Appl
<li>BCom Bus. Analytics
</ol>
</body>
</html>

Unordered List:
An unordered List is a collection of related items that have no special order or sequence. The list is created by
using <ul> tag. Each item in the list is marked with a bullet. The different bullets used are circle, square and disc.
So, the values used by type attribute are circle, square and disc.

<ul type=”value”>
<li>item1
<li>item2
.
.
.
</ul>

Page 15 of 79
Example:
<html>
<head>
<title>UnOrdered list</title>
</head>
<body>
List of Courses
<ul type=”circle”>
<li>BCom General
<li>BCom Comp Appl
<li>BCom Bus. Analytics
</ul>
</body>
</html>

Definition List: Definition lists group terms and definitions into a single list and requires 3 elements to complete
the list.
1. <DL>: Definition List, holds the list definitions
2. <DT>: Definition Term, defines the term in the list
3. <DD>: Data Definition, defines the definition for the term.

Syntax:
<DL>
<DT> Term1
<DD>Definition1
<DT> Term2
<DD> Definition2
.
.
.
</DL>
Example:
<html>
<head>
<title>Definition list</title>
</head>
</body>
<dl>
<dt>MBA
<dd>Master of Business Applications
<dt>MCA
<dd>Master of Computer Applications
</dl>
</body>
</html>

Page 16 of 79
Tables:
In HTML, tables make it easy to layout data, text and images in a grid. Tables are made up of rows and columns.
They are very frequently for arranging the data in tabular format.
In HTML, tables are defined with <table> tag. A table is divided into rows with <tr> tag and row is divided into
cells with <td> tag. <tr> stands for table row and <td> for table data. A <td> tag can contain text, images, links
etc.
Table Caption:
To add a title or caption to a table, <caption> tag is used. <caption> tag must be inserted immediately after the
<table> tag.
<th> tag: Header information in a table is defined with the <th> tag. The text is displayed in bold and centered.

<table> attributes:

Sl.No Attribute value Description


1 border pixels Specifies the border width
2 bordercolor colorname Specifies the color of the tables border
3 align right/ left/ center/ Specifies the alignment of a table
justify
4 bgcolor colorname Specifies the background color of the
table
5 background URL Specifies the background image of the
table
6 height pixels Specifies the height of a table
7 width pixels Specifies the width of a table
8 cellspacing pixels Specifies the space between the cells
9 cellpadding pixels Specifies the space between the cell
borders and their contents

<th> and <td> attributes:

Sl.No Attribute value Description


1 valign top/ middle/ bottom/ vertical alignment of the content
2 align right/ left/ center/ justify Specifies the alignment of a table cell
3 bgcolor colorname Specifies the background color of the cell
4 height pixels Specifies the height of the cell
5 width pixels Specifies the width of the cell
6 rowspan number Specifies the number of rows a header cell should span
7 colspan number Specifies the number of columns a header cell should span

Page 17 of 79
<tr> attributes:

Sl.No Attribute value Description


1 valign top/ middle/ bottom/ vertical alignment of the content of table row
2 align right/ left/ center/ justify Specifies the alignment of a table row
3 bgcolor colorname Specifies the background color of the table row

Page 18 of 79
Frames in HTML
HTML allows us to divide a web page into several pieces or panes called as frames. Each frame can contain
separate HTML document. So, frames allow us to display more than one HTML document in the window
simultaneously. Each frame is independent of the other frame. A collection of frames is known as a frameset.
To create a frameset document, we need <frameset> tag, which is used instead of <body> tag. Each <frameset>
defines a set of rows or columns. The values of rows/ columns indicate the amount of screen area each row/
column occupy. Each frame is then represented by a <frame> tag. The <frame> tag defines which HTML
document should be opened in each frame.

<frameset> attributes
Sl.No Attribute Value Description
specifies the number of columns
column
1 cols and their width in pixels or
size
percentages
specifies the number of rows and
2 rows row size
their height in pixels or percentages

<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="frame1.html" >
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>

Page 19 of 79
Forms in HTML:
<form> is a HTML element to collect input data with containing interactive controls. It provides facilities to input
text, number, values, email, password, and control fields such as checkboxes, radio buttons, submit buttons,
etc.
form is a container that contains input elements like text, email, number, radio buttons, checkboxes, submit
buttons, etc. Forms are generally used when you want to collect data from the user. For example, a user wants
to buy a bag online, so he/she has to first enter their shipping address in the address form and then add their
payment details in the payment form to place an order.

<form> tag: In HTML, The HTML <form> element is used to create an HTML form for user input. A
form is defined with the <form> tag. The various form elements are:
<input>
<textarea>
<button>
<select>
<option>

<input> tag: The most used form tag is the <input> tag. The <input> tag specifies an input field where the user
can input or enter data. The type of input is specified with the type attribute.
The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
Here are some examples:
Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

The most commonly used types are:

1. Textbox in HTML Form:


In an HTML form, we use the <input> tag by assigning type attribute value to text to give single line of input.
The <input type="text"> defines a single-line input field for text input.
Syntax:
<input type=”text” maxlength=value size=value name=”field name”>
Example:
<input type=”text” maxlength=20 size=10 name=”FName”>
Page 20 of 79
2. Password box in HTML Form:
In an HTML form, we use the <input> tag by assigning type attribute value to password to give single line of input as
password.
Syntax:
<input type=password maxlength=value size=value name=”field name”>
Example:
<input type=”password” maxlength=20 size=10 name=pword”>

3. Radio Button:
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.

Syntax:
<iput type=”radio” name=”n1”>Value1
<iput type=”radio” name=”n1”>Value2

Example:
gender:<input type="radio" name="r1"> male
&nbsp; &nbsp;
<input type="radio" name="r1"> female

4. Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Syntax:
skill:<input type="checkbox" name="c1">Value1
<input type="checkbox" name="c1">Value2
<input type="checkbox" name="c1">Value3
.
.

Example:
skill:<input type="checkbox" name="c1">C Language
&nbsp;&nbsp;
<input type="checkbox" name="c1">MS-Office
&nbsp;&nbsp;
<input type="checkbox" name="c1">Tally

5. The Submit Button

The <input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.
The form-handler is specified in the form's action attribute.
Page 21 of 79
Syntax:
<input type="submit" value="name on the button">
Example:
<input type="submit" value="Submit Form">

6. Reset Button:
The <input type="reset"> defines a reset button which resets all form values to its initial values.
Syntax
<input type="reset" value=”name on the button>
Example:
<input type=”reset” value=”Clear Form”>

HTML Textarea
The HTML <textarea> tag is used to define a multi-line text input control.
It can hold unlimited number of characters and the texts are displayed in a fixed-width font (usually courier).
The size of the HTML textarea is defined by <cols> and <rows> attribute, or it can also be defined through CSS
height and width properties.
Syntax:
<textarea rows=value cols=value>
Default text here
</textarea>

Example
Address:<textarea name="ta" rows=5 cols=50>
</textarea>

HTML <select> tag

HTML <select> tag is used to create a drop down list with multiple options. The <option> element is nested
within <select> tag for defining options in a list.

Syntax
<select>
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
.
.
</select>
Example:
Qualification:<select name="s1">
<option>B.Com
<option>B.Sc
<option>B.Tech
</select>
Page 22 of 79
Program to demonstrate <FORM> Tag
<html>
<head>
<title>Forms</title>
</head>
<body>
<br><br><br>
<center><u>
Student Form</u></center>
<br><br><br>
<form OnSubmit='alert("Form Submitted Successfully")'>
Student Name: <input type="text" name="t1" size=10 maxlenth=20>
<br><br><br>
Fathers Name:<input type="text" name="t2" size=10 maxlength=20>
<br><br><br>
Gender:<input type="radio" name="r1"> male
&nbsp; &nbsp;
<input type="radio" name="r1"> female
<br><br><br>
Address:<textarea name="ta" rows=5 cols=50>
</textarea>
<br><br><br>
Qualification:<select name="s1">
<option>B.Com
<option>B.Sc
<option>B.Tech
</select>
<br><br><br>
Skill:<input type="checkbox" name="c1">C Language
&nbsp;&nbsp;
<input type="checkbox" name="c1">MS-Office
&nbsp;&nbsp;
<input type="checkbox" name="c1">Tally
<br><br><br>
<input type="submit" value="Submit Form">
<input type="reset" value="Clear Form">
</form>
</body>
</html>

Page 23 of 79
<Font> Tag:
HTML <font> tag is used to define the font style for the text contained within it. It defines the font size, color,
and face or the text in an HTML document.
Syntax:
<font size=" " color=" " face=" "> Content....</font>
Example:
<html>
<head>
<title> Font </title>
</head>
<body>
<font face="corbel" size=3 color="red">This is some text!</font>
<font face="courier" size=2 color="blue">This is some text!</font>
<font face="verdana" size=5 color="green">This is some text!</font>
</font>
</html>

Page 24 of 79
Web Designing Principles:
Effective web design is generally judged by the users of the website and not the website owners. The purpose
of a website is to support and enhance the goals of your business or organization. Designing and building a
website is both an art and a science. Designs should enable your users to reach their goals with speed and
effectiveness. The various web designing principles that will make your website visually pleasing and easy to
use our as follows:
1. Appearance A website reflects companies’ product and service. Hence it must be visually appealing,
polished and professional. All the visual elements of any website like logo, fonts, theme/ templates,
layouts and colors should meet companies needs and features. An attractive site generally creates a
positive impression which helps in grabbing users’ attention. A good use of color, readable text,
meaningful graphics, quality photography and simplicity impress website visitors.

2. Content Along with appearance, website must have a good content. The key to a good website is
providing relevant content that your readers want. The relevant website content closely matches the
information that people need. The informative website increase visitor confidence in companies’
knowledge and competence. The short, organized and regular updated content grab visitors’ attention.

3. purpose of each element A websites page is limited by a screen size and scrolling, so you cannot
afford to waste the precious space for unnecessary and useless decorations. Each website page should
also have a clear purpose and help your visitors to find what they need. Each button, navigation menu,
contact form etc should lead your visitors exactly to their goals without confusing them. It helps to build
a strong client relationship

4. design consistency Your design elements should match throughout each page. It means your
headings, sub headings, fonts, button styles and sizes - everything should be with the same look and feel
every time there used. Choose the right colors and fonts for your text and buttons.

5. Effective navigation Good navigation is the basis for effective web design. A navigation should
provide a clear way to organize, arrange and display content to users. The visitor looking for content on
website should not be time consuming. Visitor must easily find their way around a website from any page.

6. Usability The success of website can be measured by its degree of usability. Website must be easy to
read, navigate and understand. The various elements that can improve the usability of any website
includes browser compatibility, user friendly, descriptive text linking, effective navigation, fast loading
pages, proper scroll, cross platform, screen resolution etc.

7. Functionality Website has to be functional and work correctly. The various elements that can improve
the functionality of any website include proper hyperlinks, contact forms, sites options, event registration,
multimedia elements, etc.

8. Grid Based layout The randomly placed images, pieces of text, buttons, and forms all over the page
leave uses frustrated. Proper alignment of the website content of the page helps to avoid the mess and
organizing it in a more user friendly way. It helps users to get the info you are website provides without
effort.

Page 25 of 79
UNIT II
DHTML [Cascading Style sheets]
DHTML-AN INTRODUCTION
1.DHTML stands for Dynamic Hyper Text Markup Language. DHTML is not a language or a web Standard, rather
is a term describing the art of making dynamic and interactive web pages. In DHTML, the term ‘’Dynamic ‘’
means the ability of the browser to alter a web document’s look and style after the document has loaded.

2.DHTML is a new tool for web designers to create web pages with special effects and animations. For example,
a piece of text can change from one size or color to another ,or a graphic can move from one location to another,
in response to some kind of user action, such as clicking a button.

3. DHTML makes the web experience faster and more interactive for end users.

4.For example, text and images can be hidden in a document until a user moves the mouse over an element or
clicks a button.

COMPONENTS OF DHTML
DHTML requires following independent components to work:
1. HTML (Hypertext Markup Language)
2. CSS (Cascading Style Sheets)
3. Scripting.

1. HTML: It stands for Hyper Text Markup Language, and it is the most widely used language to design web
pages. HTML defines the structure of a web page, using some basic elements or tags.
2. CSS: CSS controls the formatting of HTML elements. It defines how to display HTML elements. Over a
webpage .CSS is easy to learn and understand but it provides powerful control over the presentation of an
HTML document.
3. Scripting: Scripting provides the mechanisms to interpret user actions and produce client-side changes
to a page. For example, scripts can interpret mouse actions and respond to the action by using a
set of predefined instructions. Although DHTML can communicate with several scripting
languages, JavaScript is most commonly used.

Features of DHTML:
1. Document Object Model: This model exposes all the page elements as objects. These objects can easily
be manipulated by changing their attributes or applying methods to them at any time.
2. Dynamic Content: Text or graphics can be added, deleted or modified.
3. Changing the tags and properties: It allows you to change the qualities of a HTML depending on an event
outside of the browser.
4. Real time Positioning: Objects, images and text moving around the web pages. They allow you to play
interactive games.
5. Scriptlets: With scriptlets content providers can write the content once. Then easily reuse the content
on the other web pages.
6. Dynamic Fonts: With dynamic fonts the fonts are encoded and downloaded with the page, so that the
page always looks how the designer want to.

Page 26 of 79
STATIC VS. DYNAMIC WEB PAGE

Static Web Page is one that does not change its appearance, layout or content once it has been loaded. Event
handling is not possible in Static Web Pages.
Dynamic Web Page is one that change its appearance, layout or content once it has been loaded. Event handling
is possible in Dynamic Web Pages.

HTML Vs DHTML

HTML DHTML
HTML stands for Hypertext Markup DHTML Stands for Dynamic Hypertext
Language Markup Language
It is used to design Dynamic or interactive
It is used to design static web pages
webpages
HTML creates a plain web page without DHTML creates a web page with styles
any styles and scripts using CSS, DOM and scripts

HTML cannot have any server-side code DHTML can contain Server-side code

HTML sites work slowly upon client-side DHTML sites work faster upon client-side
technologies technologies
DHTML uses events, methods and much
HTML does not make use of any methods
more for providing dynamism for HTML
for making it dynamic
pages.

CSS (CASCADING STYLE SHEETS)

1. CSS or Cascading Style Sheets is used to control the style of a web document in a simple and easy way.
A single CSS file can contain positioning, layout, font, colors and style information for an entire web site.
2. CSS is easy to learn and understand. It provides powerful control over the presentation of an HTML
document. Using CSS, you can control the color of the text, the style of fonts, the spacing between
paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a
variety of other effects .

With style sheets, you can:


▪ Add style markup to individual HTML elements. (Called inline styles).
▪ Create sequences of style instructions in the head of an HTML document. (Called
Embedded Style Sheet).
▪ Refer to a separate stand-alone style sheet via a link or other reference inside your HTML
document. (Called External Style Sheet)
▪ Style an HTML document differently depending on whether it’s being viewed on a desktop
▪ Computer or a mobile phone.

Page 27 of 79
ADVANTAGES OF CSS

• CSS SAVES TIME: You can write CSS once and then reuse same sheet in multiple HTML pages.
You can define a style for each HTML element and apply it to many web pages as you want.
• Pages load faster: If you are using CSS, you do not need to write HTML tag attributes every time.
Just write one CSS rule of a tag and apply to all the occurrences of that tag. So, less code means
faster download times.
• Easy maintenance: To make a global change, simply change the styles in CSS file, and all the web
pages will be updated automatically.
• Superior styles to HTML: CSS have a much wider array of attributes than HTML so you can give
far better look to your HTML page in comparison of HTML attributes.
• Multiple device compatibility: Style sheets allow content to be optimized for more than one type
of device.
• Create dynamic pages: With CSS, anyone can easily animate HTML elements with just a couple
lines of simple code .

DISADVANTAGES OF CSS

• BROWSER COMPATIBILITY: CSS works differently on different browsers. Internet Explorer and Opera
supports CSS as different logic.
• Lack of Variables: CSS contains no variables. This makes it necessary to do a replace all when one
desires to change a fundamental constant, such as color scheme or various heights and widths.
• Different Syntax to HTML: CSS was developed independently of HTML and uses a different syntax, so
a web developer has to learn two sets of formatting syntax instead of one. CSS syntax is also rather
clumsy and user unfriendly.
• Lack of Security: CSS is an open text-based system. There is no security built in and any one with
read/write access to a website can disrupt the formatting by changing the CSS files.

CSS SYNTAX
A CSS comprises of style rules that are interpreted by the web browser and then applied to the
corresponding elements in your document. A CSS rule has two main parts:
(i) Selector
(ii) Declaration

Page 28 of 79
(i) Selector: A selector is an HTML tag at which style will be applied. This could be any tag like
<H1> or <BODY > etc.
(ii) Declaration: Each declaration consists of a property and a value. The property is the style attribute
you want to change. Each property has a value. A CSS declaration always ends with a semicolon, and
declaration groups are surrounded by curly brackets.

Syntax of CSS style rule is as follows:


To make it more readable, we can write it as,
h1{
color: blue;
font-style: italic;
}
Example:
<html>
<head>
<title>Cascading Style Sheets</title>
</head>
<body>
<h2> Cascading Style Sheets</h2>
<p style="color: green; font-size:24px; text-transform: uppercase; text-decoration: line-
through; background: yellow;">
This program demonstrates DHTML
</body>
</html>

Style Sheets:
Style Sheets are the way that web designers define the layout, look and feel and design for their web pages.
They are called as CSS or Cascading Style Sheets. A designer can design many aspects of a web page such as
fonts, colors, layout, positioning etc.
There are 3 types of style sheets. They are:
1. Inline Style sheets.
2. Embedded Style Sheets / Internal Style Sheets.
3. External Style Sheets

Page 29 of 79
Inline Style Sheets:
Inline Style Sheet is a term that refers to Style Sheet information that is applied to the current element. We can
apply to the instance where we want to the style to be applied.
Syntax: <element style=” property: value”>
Example: <h1 style=”text-decoration: underline”>
Program:
<html>
<head>
<title>Cascading Style Sheets</title>
</head>
<body>
<h2> Cascading Style Sheets</h2>
<p style="color: green; font-size:24px; text-transform:
uppercase; text-decoration: line-through;
background: yellow;">
This program demonstrates DHTML
</body>
</html>

Embedded Style Sheet / Internal Style Sheet:


Embedded style sheets refer to when you embed style sheet information into an HTML document using the
style element. We do this b embedding he style sheet information within <style>………</style> tags in the head
of the document.
Syntax: <style>
Element1{property: value}
Element2{property: value}
</style>
Example: <style>
h1{text-decoration: underline}
b{color: red}
</style>
Program:
<html>
<head>
<title>Embedded Style Sheets</title>
<style>
h1{text-decoration: underline; color: blue}
b{color: red}
</style>
</head>
<body>
<h2> Embedded Style Sheets</h2>
<h1>This text has embedded style sheets tag styles</h1>
<b> This text also has some styles</b>
<h3>This text has no styles</h3>

Page 30 of 79
</body>
</html>

External Style Sheets:


An external Style Sheet is a separate file where we can declare all the styles that we want to use on our website
(in all the web pages). We can link to the external style sheet to all our HTML web pages.

Syntax: .css file


Element1{property: value}
Element2{property: value}

Example: style.css
h1{text-decoration: underline}
b{color: red}

Program: Style.css
h1{text-decoration: underline; color: blue }
b{color: red}

external.html
<html>
<head>
<title>External Style Sheets</title>
<link rel="StyleSheet" href="style.css">
</head>
<body>
<h2> External Style Sheets</h2>
<h1>This text has embedded style sheets tag styles</h1>
<b> This text also has some styles</b>
<h3>This text has no styles</h3>
</body>
</html>

Page 31 of 79
Multimedia (Filters and Transitions):

• Filters and transitions enable us to create the multimedia effects. These are style object properties i.e., we
must enclose filters in <style>.
• They work with Internet Explorer only.
• We can give transition between pages, horizontal and vertical blind effects.
• We can convert colored image to greyscale or blur etc in response to user action.
• We can make text or image glow.
• We can give drop shadow effect to give text a 3D appearance.

Advantages of Filters:
1. To achieve special effects.
2. To be able to create animated visual transition between pages.
3. To be able to modify the filter dynamically.
Note: The changes we get by filters is permanent in the web page. All filters and transitions are included with
CSS filter property.

Syntax: <element style=”filter: filtername(parameter)”>

Page 32 of 79
Some of the filters are:

Filter Description
As its name implies, it is used to set the brightness of an element. If the
brightness is 0%, then it represents completely black, whereas 100%
brightness()
brightness represents the original one. It can also accept values above 100%
that provide brighter results.
It is used to apply the blur effect to the element. If the blur value is not
specified, then the value 0 is used as a default value. The parameter in blur()
blur()
property does not accept the percentage values. A larger value of it creates
more blur.
It is used to invert the samples in the input image. Its 100% value represents
invert() completely inverted, and 0% values leave the unchanged input. Negative
values are not allowed in it.
It sets the saturation of an element. The 0% saturation represents the
saturate() completely unsaturated element, whereas the 100% saturation represents
the original one. The values greater than 100% are allowed that provides
super-saturated results. We cannot use negative values with this property.

drop-shadow() It applies the drop-shadow effect to the input image. The values it accepts
are h-shadow, v-shadow, blur and color.
It adjusts the contrast of the input. Its 0% value will create a completely
contrast() black image, whereas the 100% values leave the unchanged input, i.e.,
represents the original one. Values greater than 100% are allowed that
provides results with less contrast.
It is used to apply transparency to the input image. Its 0% value indicates
opacity() completely transparent, whereas the 100% value represents the original
image, i.e., fully opaque.
It applies a hue-rotation on the input image. Its perimeter value defines the
number of degrees around the color circle; the image will be adjusted. Its
hue-rotate()
default value is 0 degree, which represents the original image. Its maximum
value is 360 degrees.
It converts the input image into black and white. 0% grayscale represents the
grayscale() original one, whereas 100% represents completely grayscale. It converts the
object colors into 256 shades of gray.

It is used to transform the image into a sepia image. 0% value represents the
sepia()
original image, whereas the 100% value indicates the completely sepia.

Page 33 of 79
<html>
<head>
<title>CSS filter property</title>
</head>
<body>
<img src="tiger1.jpeg" height=200 width=200> Original Image
<img src = "tiger1.jpeg" style="filter: brightness(50%)" height=200 width=200> brightness(50%)
<img src = "tiger1.jpeg" height=100 width=100 style="filter: invert(50)" height=200 width=200>
invert(50)
<img src = "tiger1.jpeg" style="filter: saturate(50)" height=200 width=200> saturate(50)<br>
<img src = "tiger1.jpeg" style="filter: drop-shadow(10px 20px 10px green)" height=200
width=200> drop-shadow(10px 20px 30px green)
<img src = "tiger1.jpeg" style="filter: contrast(50)" height=200 width=200> contrast(50)
<img src = "tiger1.jpeg" style="filter: opacity(50%)" height=200 width=200> opacity(50%)<br>
<img src = "tiger1.jpeg" style="filter: hue-rotate(180deg)" height=200 width=200> hue-
rotate(180deg)
<img src = "tiger1.jpeg" style="filter: grayscale(50%)" height=200 width=200> grayscale(50%)
<img src = "tiger1.jpeg" style="filter: sepia(90%)" height=200 width=200> sepia(90%)
</body>
</html>

Page 34 of 79
Transitions:
The CSS transitions are effects that are added to change the element gradually from one style to another. The
use of transitions is to visually transit an object from one state to another.

There are 2 types of transitions. They are


1. Blend transition
2. Reveal transition

<html>
<head>
<title>CSS Transition property</title>
<style>
h1:hover{
width: 800px;
height: 350px;
background-color: yellow;
color:green;
font-size:100
}
</style>
</head>
<body>
<font size=5 color="red">
<h1>Our class has bright students</h1></font>
</body>
</html>

Page 35 of 79
Dynamically Changing Style:
In DHTML, a user can modify the attributes of a HTML document using Document Object Model (DOM). Internet
Explorer is built with rich set of properties and methods with which the DHTML document can be dynamically
constructed and altered.
Note: Program same as transitions.

Changing Text Attributes:


In DHTML, a user can modify the attributes of a HTML document using Document Object Model (DOM). Internet
Explorer is built with rich set of properties and methods with which the DHTML document can be dynamically
constructed and altered.

The following are the properties of the text:

1. Text color: The text-color property is used to set the color of the text.
Example: h1{word-spacing: 10px}

2. Text Alignment: The text-align property is used to set the horizontal alignment of the text. It can take
values left/ right/center/ justify.
Example: h1{word-spacing: 10px}

3. Text Decoration: The text-decoration property is used to set or remove decorations from text. It can
take values none/ underline/ overline/ line-through
Example: h1{word-spacing: 10px}

4. Text Transformation: This text-transform property is used to specify uppercase and lowercase letters
in a text. It can take values uppercase/ lowercase/ capitalize.
Example: h1{word-spacing: 10px}

5. Text Indentation: The text-indent property is used to specify the indentation of the first line of a text.
It can take values 50px/ 30px/ 20px/…….
Example: h1{word-spacing: 10px}

6. Letter Spacing: The letter-spacing property is used to specify the space between the characters in a
text. It can take values 3px/ 5px/…….
Example: h1{word-spacing: 10px}

7. Line Height: The line-height property is used to specify the space between lines. It can take values
like 0.8/ 1.5/ 1.8/ …….
Example: h1{word-spacing: 10px}

8. Word Spacing: The word-spacing property is used to specify the space between the words in a text.
It can take values like 3px/ 5px/ 10px/ …..
Example: h1{word-spacing: 10px}

Page 36 of 79
<html>
<head>
<title>Text attributes</title>
</head>
<body>
<center><b><u>Text attributes</u></b></center>
<h1 style="color:green">This text is in green color</h1>
Page 44 of 75
<h2 style="text-align:center">This text is center aligned</h2>
<h1 style="text-indent:10px">This text is with indentation 10</h2>
<h1 style="text-decoration:overline">This text is overline</h1>
<h2 style="text-transform:uppercase">This text is in uppercase</h2>
<h1 style="letter-spacing:3px">This text is with letter spacing 3</h1>
<h2 style="line-height:5">This text is with line-height 5 </h2>
<h1 style="word-spacing:10px">This text is with word-spacing 10</h2>
</body>
</html>

Page 37 of 79
UNIT III
JavaScript:
JavaScript is a dynamic computer programming language. It is most commonly used as a part of web pages,
whose implementations allows client-side script to interact with the user and make dynamic pages.
JavaScript was first known as LiveScript, but NetScape changed its name to JavaScript.
It is integrated with Java and HTML.

Advantages of JavaScript:
1. Less Server Interaction: You can validate user input before sending the page off to the server. This
saves server traffic, which means less load on your server.

2. Immediate feedback to the visitors: They don’t have to wait for a page to reload to see if they have
forgotten to enter something.

3. Increased interactivity: You can create interfaces that react when the user hovers over them with a
mouse or activates them via the keyboard.

4. Richer Interfaces: You can use JavaScript to include such items as drag-and-drop components and slide
to give a Rich Interface to your site visitors.

Limitations of JavaScript:
1. Client-Side JavaScript does not allow the reading or writing of files. This has been kept for security
reason.
2. JavaScript cannot be used for networking applications because there is no such support available.
3. JavaScript does not have any multiprocessor capabilities.

JavaScript Syntax:
<script language=”JavaScript” type=”text/JavaScript”>
JavaScript Code
</script>
Language: This attribute specifies what scripting language is being used.
Type: It indicates the scripting language and its value should be set as “text/JavaScript”.

Program to demonstrate JavaScript:


<html>
<head>
<title>First Program</title>
</head>
<body>
<script language="JavaScript">
document.writeln("Hello! This is my first program in JavaScript")
</script>
</body>
</html>

Page 38 of 79
Comments in JavaScript: JavaScript supports both C and C++ style comments.

Any line beginning with // is a comment.


Multiple lines between /* and */ are comments.
Any text between <!-- and //--> is a comment.

<html>
<head>
<title>Comments</title>
</head>
<body>
<script language="JavaScript">

<!--
// This is single line comment
/* This is a multi
line comment */
//-->
document.writeln("Hello! This is my first program in JavaScript")
</script>
</body>
</html>

Features of JavaScript:
1. It is an object-based language that is confined to run within the web browser only.
2. It is an interpreted language and requires no compilations.
3. It can be directly embedded into HTML files.
4. It supports event-based programming.
5. It is multi-functional i.e., it can be used as client side and server-side scripting.
6. It is a case-sensitive programming language.
7. It offers the concept of predefined objects.
8. It contains the syntaxes of control statements similar to the statements of C.
9. It is loosely typed language i.e., one datatype can be automatically converted to other types without
explicit conversions.

Client-Side and Server-Side Scripting:

The basic components of JavaScript are as follows:


1. Core JavaScript
2. Client-Side JavaScript
3. Server-Side JavaScript

1. Core JavaScript: Core JavaScript consists of different objects like Date, Array, Math. It also contains
some elements like operators, statements and control structures.

Page 39 of 79
2. Client-Side JavaScript: Client-Side JavaScript performs execution of programs/ scripts written by client
on web browser. Client-side scripts are written using java script embedded in HTML documents.
The steps for executing client-side scripts:
• A script is written using scripting languages like JavaScript on end user system.
• Upon receiving a request, the web server transfer the required file on user computer.
• Later, this file is executed b web browser on end-user system.

3. Server-Side JavaScript: Server-Side JavaScript performs execution of program/script on web server.


Server-Side scripts are usually written using JSP. These languages are later embedded in HTML
documents on server file system.
Steps for executing Server-Side scripts:
• A script is written using server-side language like ASP, JSP etc. and is stored on server file
system.
• Upon request, the web server directly runs the script and generates a dynamic HTML page.
• This page is later sent by web server on client browsers.

Datatypes in JavaScript:
The Datatype is used to indicate the type of data value stored in a variable. The datatype of a variable is
specified at the time of its declaration.
JavaScript datatypes are classified into mainly 4 types. They are
1. Boolean datatype
2. String datatype
3. Null datatype
4. Number datatype.

1. Boolean Datatype: This datatype consists of 2 logical values (a) True and (b) False.
E.g, var a=True
Here a is a Boolean variable of Boolean datatype.
2. String Datatype: In this datatype, data is written in double quotes.
E.g., var name=”Hello”
Here name is of string datatype.
3. Null datatype: The user can use this datatype when he doesn’t want to initialize the value of a
particular variable.
E.g., var age=null
var salary=null
4. Number datatype: This datatype is just the opposite of String datatype. The value is declared without
double quotes.
E.g., var n1=30
Var price=65.25

Variables in JavaScript:
A variable is a data item that stores the user defined values. A name given to a variable is called as variable
name. In JavaScript, the variables are same as the other programming language variables. If a value is assigned
to variable n1, then this is called as assignment.

Page 40 of 79
Syntax: var variable_name=value1
Example: var n=10
var c=20+n

Declaration of a variable: A variable is created using the keyword “var”.


Syntax: var variable_name
E.g.: var x

Rules for writing variable names:


1. A variable name should begin either with an underscore (_) or a letter.
2. Spaces are allowed in variable names.
3. Variable names are case sensitive in JavaScript i.e., a is different from A.
4. Reserved keywords cannot be used as variable names, like var, if, for etc.

Scope of a variable:
Scope of variable specifies the position of the program where a variable can be accessed.
Scope of a variable can be of 2 types:
1. Local scope
2. Global scope
1. Local Scope: Is the variable is declared inside a function, then it is said to have a local scope. In this
case, a variable can be accessed only within the function itself.
Example:
function print()
{
var x=”local”
document.writeln(x)
}
Global Scope: Output: local
2. If a variable is declared outside a function definition, then the variable is said to have global scope. In
this case the variable can be accessed any where in the program.
Example:
var x=”global”
function print()
{
var x=”local”
document.writeln(x)
}
document.writeln(x)
Output: local
global

Page 41 of 79
Operators in JavaScript:
Operator is a symbol that performs various operations. The different type of operators supported by
JavaScript are as follows:
1. Arithmetic Operators
2. Relational Operators
3. Logical Operators
4. Assignment Operators
5. Bitwise Operators

1. Arithmetic Operators: These are the mathematical operators that are used to perform basic
arithmetic operations. Various arithmetic operators are as follows: If A=10, B=20

Operator Description Example


+ Adds two operands. A + B = 30
− Subtracts second operand from the first. A − B = -10
* Multiplies both operands. A * B = 200

/ Divides numerator by de-numerator. B/A=2


% Modulus Operator and gives remainder B%A=0
++ Increment Operator A++=11
-- Decrement Operator B--=19

<html>
<head>
<title>Arithmetic</title>
</head>
<body>
<script language="JavaScript">
var a,b
a=5
b=3
document.writeln("The value of a+b is " + (a+b) + "<br>")
document.writeln("The value of a+b is " + (a+b) + "<br>")
document.writeln("The value of a*b is " + (a*b) + "<br>")
document.writeln("The value of a/b is " + (a/b) + "<br>")
document.writeln("The value of a%b is " + (a%b) + "<br>")
document.writeln("The value of ++a is " + (++a) + "<br>")
document.writeln("The value of b-- is " + (b--) + "<br>")
</script>
</body>
</html>

Page 42 of 79
2. Relational Operators: These operators are used to test the relationship between 2 operands. They
return a Boolean value.
If A=10, B=20
Operator Description Example

== Checks if the values of two operands are equal or (A == B) is false.


not. If yes, then the condition becomes true.

!= Checks if the values of two operands are equal or (A != B) is true.


not. If the values are not equal, then the condition
becomes true.

> Checks if the value of left operand is greater than the (A > B) is false.
value of right operand. If yes, then the condition
becomes true.

< Checks if the value of left operand is less than the (A < B) is true.
value of right operand. If yes, then the condition
becomes true.

>= Checks if the value of left operand is greater than or (A >= B) is false.
equal to the value of right operand. If yes, then the
condition becomes true.

<= Checks if the value of left operand is less than or (A <= B) is true.
equal to the value of right operand. If yes, then the
condition becomes true.

<html>
<head>
<title>Relational</title>
</head>
<body>
<script language="JavaScript">
var a,b
a=5
b=3
document.writeln("The value of a>b is " + (a>b) + "<br>")
document.writeln("The value of a < b is " + (a<b) + "<br>")
document.writeln("The value of a>=b is " + (a>=b) + "<br>")
document.writeln("The value of a<=b is " + (a<=b) + "<br>")
document.writeln("The value of a==b is " + (a==b) + "<br>")
document.writeln("The value of a!=b is " + (a!=b) + "<br>")
</script>
</body>
</html>
Page 43 of 79
3. Logical Operators: The operators which operate only on more than one condition and return the
Boolean values such as true or false are called as logical operators.

If A=10, B=20
Operator Description Example

&& Called Logical AND operator. If both the operands are non-zero, (A && B) is true.
then the condition becomes true.

|| Called Logical OR Operator. If any of the two operands is non-zero, (A || B) is true.


then the condition becomes true.

! Called Logical NOT Operator. It is used to reverse the logical state !(A && B) is
of its operand. If a condition is true, then Logical NOT operator will false.
make it false.

<html>
<head>
<title>Logical</title>
</head>
<body>
<script language="JavaScript">
var a,b
a=5
b=3
document.writeln("The value of ((a>10) && (b>10)) is " + ((a>10)&&(b>10)) + "<br>")
document.writeln("The value of ((a>10)||(b>10)) is " + ((a>10)||(b>10)) + "<br>")
document.writeln("The value of !a is " + !(a) + "<br>")
</script>
</body>
</html>
4. Bitwise Operators: JavaScript provides various bitwise operators like Bitwise AND, Bitwise OR,
Bitwise XOR, Bitwise NOT.
Operator Description Example

& Binary AND Operator copies a bit to the result if it exists in both (A & B) = 12, i.e., 0000 1100
operands.

| Binary OR Operator copies a bit if it exists in either operand. (A | B) = 61, i.e., 0011 1101

^ Binary XOR Operator copies the bit if it is set in one operand (A ^ B) = 49, i.e., 0011 0001
but not both.

~ Binary One's Complement Operator is unary and has the effect (~A ) = ~(60), i.e,. -0111101
of 'flipping' bits.
Page 44 of 79
<html>
<head>
<title>Bitwise</title>
</head>
<body>
<script language="JavaScript">
var a,b
a=60
b=13
document.writeln("The value of (a&b) is " + (a&b) + "<br>")
document.writeln("The value of (a&b) is " + (a|b) + "<br>")
document.writeln("The value of (~a) is " + (~a) + "<br>")
document.writeln("The value of (a^b) is " + (a^b) + "<br>")
</script>
</body>
</html>

5. Assignment Operator: These operators are used to assign values to variables. The basic assignment
operator is =, which assigns the right side value to the left side variable.

Operator Description Example

= Simple assignment operator. Assigns values from right side


operands to left side operand C = A + B will assign the
value of A + B to C

+= Add AND assignment operator. It adds the right operand


C += A is equivalent to C = C
to the left operand and assign the result to the left
+A
operand.

-= Subtract AND assignment operator. It subtracts the right


C -= A is equivalent to C = C
operand from the left operand and assigns the result to
-A
the left operand.

*= Multiply AND assignment operator. It multiplies the right


C *= A is equivalent to C = C
operand with the left operand and assigns the result to the
*A
left operand.

/= Divide AND assignment operator. It divides the left


C /= A is equivalent to C = C
operand with the right operand and assigns the result to
/A
the left operand.

%= Modulus AND assignment operator. It takes modulus using C %= A is equivalent to C = C


two operands and assigns the result to the left operand. %A

Page 45 of 79
<html>
<head>
<title>Assignment</title>
</head>
<body>
<script language="JavaScript">
var a,b
a=5
b=3
a+=b
document.writeln("The value of a and b are " + a + " and " + b + "<br>")
a-=b
document.writeln("The value of a and b are " + a + " and " + b + "<br>")
a*=b
document.writeln("The value of a and b are " + a + " and " + b + "<br>")
a/=b
document.writeln("The value of a and b are " + a + " and " + b + "<br>")
a%=b
document.writeln("The value of a and b are " + a + " and " + b + "<br>")
</script>
</body>
</html>

Conditional Statements:
JavaScript supports conditional statements which are used to perform different actions based on different
conditions. While writing a program, there may be a situation when you need to use conditional statements
that allow your program to make correct decisions and perform right actions.

1. If statement: The if statement is the fundamental control statement that allows JavaScript to make
decisions and execute statements conditionally.
Syntax:
if(condition)
{
// if body
// Statements to execute if condition is true
}

Page 46 of 79
<html>
<head>
<title>while loop</title>
</head>
<body>
<script language="JavaScript">
var age
age=30
if(age>18)
{
document.writeln("Eligible for voting")
}
else
{
document.writeln("Not eligible for voting")
}
</script>
</body>
</html>

2. If else: The if else statement is the next form of control statement that allows JavaScript to execute
statements in a more controlled way.
Syntax of if-else Statement
if (condition)
{
// code executed when the condition is true
}
else
{
// code executed when the condition is false
}

Page 47 of 79
<html>
<head>
<title>while loop</title>
</head>
<body>
<script language="JavaScript">
var age
age=30
if(age>18)
{
document.writeln("Eligible for voting")
}
else
{
document.writeln("Not eligible for voting")
}
</script>
</body>
</html>

3. Switch-Case Statement:
A switch statement is a multi-way decision making statement.
Syntax:
switch(expression)
{
case value1: statement_1;
break;
case value2: statement_2;
break;
.
.
.
case value_n: statement_n;
break;

default: default_statement;
}
<html>
<head>
<title>while loop</title>
</head>
<body>
<script language="JavaScript">
var i
i=1
switch(i)
Page 48 of 79
{
case 1:
document.writeln("Case 1 is Matched.")
break;
case 2:
document.writeln("Case 2 is Matched.")
break;
case 3:
document.writeln("Case 3 is Matched.")
break;
default:
document.writeln("Default case is Matched.")
break;
}
</script>
</body> </html>

Looping Statements:
Loop is a process of executing series of statements number of times. Every looping statements has the
following 3 expressions
1. Initialization
2. Condition
3. Updation
The initialization statement is executed before entering the loop. The body of the loop will be executed if the
condition is true. The update expression is executed at the end of the loop to update the variable value.

for loop: A set of instructions will be executed repeatedly by using for loop.
Syntax: for(initialization; condition; updation)
{
Statements
}
Example:
<html>
<head>
<title>for loop</title>
</head>
<body>
<script language="JavaScript">
var i
for(i=1;i<=5;i++)
{
document.writeln("The value is " + i + "<br>")
}
</script>
</body>
</html>
Page 49 of 79
do while loop: do while is same as that of while loop, but the condition is specified at the end of the loop.
The body of the do while loop is executed at least once even if the condition is false.
Syntax:
initialization
do
{
statements
updation
}
while(condition)
Example:
<html>
<head>
<title>do while loop</title>
</head>
<body>
<script language="JavaScript">
var i
i=1
do
{
document.writeln("The value is " + i + "<br>")
i=i+1
}
while(i<=5)
</script>
</body>
</html>

while loop: The loop is executed until the condition remains


true.
Syntax:
initialization
while(condition)
{
statements
updation
}

Page 50 of 79
<html>
<head>
<title>while loop</title>
</head>
<body>
<script language="JavaScript">
var i
i=1
while(i<=5)
{
document.writeln("The value is " + i + "<br>")
i=i+1
}
</script>
</body>
</html>

for in loop: for in loop is used to iterate through all elements in a variable list.
<html>
<head>
<title>while loop </title>
</head>
<body>
<script language="javascript">
var x
var appc={name1:"supriya",name2:"sakshi",name3:"lahari",name4:"hemalatha"}
for(x in appc)
{
document.writeln(appc[x] +"<br>")
}
</script>
</body>
</html>

Functions:
A function is a group of reusable code which can be called anywhere in your program.
This eliminates the need of writing the same code again and again.
It helps programmers in writing modular codes. Functions allow a programmer to divide a big program into a
number of small and manageable functions.

Function Definition:
The most common way to define a function in JavaScript is by using the function keyword followed by a
function name, a list of parameters and a statement block surrounded by curly braces.

Page 51 of 79
Syntax:
function function_name(parameter_list)
{
Statements
}

Calling a function: To invoke a function somewhere later in the script you would simply need to write the
name of that function.
Syntax:
function function_name(values of parameters)

Program to demonstrate functions:


<html>
<head>
<title> arrays</title>
</head>
<body>
<script language="javascript">
function hello()
{
document.writeln("This is inside the function hello() " + "<br>")
}
document.writeln("Before calling hello() function " + "<br>")
hello()
document.writeln("After calling hello() function " + "<br>")
</script>
</body>
</html>

Arrays:
An array contains a set of homogeneous items. Arrays are similar to structure variables and they can be
accessed randomly by making use of index and the array name.

Declaration of an array:
Syntax:
var variable_name=new Array
Example: var data=new Array

Accessing the array elements:


Array index starts with 0 and the elements of array are accessed using the index.
Syntax:
variable_name[index]=value

Example: data[0]=10
data[1]=20

Page 52 of 79
Program to demonstrate Arrays:
<html>
<head>
<title> arrays</title>
</head>
<body>
<script language="javascript">
var data=new Array
var i
data[0]=10
data[1]=20
data[2]=30
data[3]=40
data[4]=50
for(i=0;i<5;i++)
document.writeln("The element is "+data[i]+"<br>")
</script>
</body>
</html>

Objects:
JavaScript is an object-oriented programming (OOP) language.
Objects are composed of attributes. If an attribute contains a function, it is considered to be a method of the
object, otherwise the attribute is considered a property.

1. Boolean Object:
Boolean object is a object wrapper which consists of logical values true and false. The wrapper object is
responsible for defining methods and properties that help in manipulating Boolean values.

Functions of Boolean Object:


1. toString(): If the Boolean value is true then, it returns string “true”, otherwise it returns “false”.
E.g., var a new Boolean(false)
document.writeln(a.toString())
Output: false
2. valueOf(): If the Boolean value is true then, it returns string “true”, otherwise it returns “false”.
E.g., var a new Boolean(false)
document.writeln(a.valueOf())
Output: false

Program to demonstrate Boolean Object:


<html>
<head>
<title> number </title>
</head>
<body>
Page 53 of 79
<script language="javascript">
var m=new Boolean
m=false
document.writeln("m.toString() value is " + m.toString() + "<br>")
document.writeln("m.valueOf() value is " + m.valueOf() + "<br>")
</script>
</body>
</html>

2. Number Object: The number object represents numerical data either integers or floating points.

Function of Number Object:


1. toString(radix): IT returns a number in its string form. The radix of 2 represents binary number. The
radix 8 represents octal number and radix 16 represents hexa decimal number.
Example: var m=new Number(10)
document.writeln(m.toString(16))
Output: A
2. valueOf(): It returns the number value.
Example: var m=new Number(10)
document.writeln(m.valueOf())
Output: 10
3. isNaN(): It returns a non-number value. In order to know whether a number is NaN, we make use of
isNaN() function. If the value is NaN it returns true , else it returns false.
Example: var m=”Hello”
document.writeln(m.isNaN())
Output: true

Program to demonstrate Number Object:


<html>
<head>
<title> number </title>
</head>
<body>
<script language="javascript">
var m=new Number
m=10
document.writeln("m.toString(16) value is " + m.toString(16) + "<br>")
document.writeln("m.valueOf() value is " + m.valueOf() + "<br>")
document.writeln("isNaN(m) value is " + isNaN(m) + "<br>")
</script>
</body>
</html>

Page 54 of 79
3. String Object:
String functions are performed on strings. Strings refer to the series of characters enclosed under double
quotes.
Functions of String Object:
1. toLowerCase(): It takes a string and convert all the characters of it to lowercase. If the string contains
non-characters, then they remain unchanged.
Example: var name1=”web”
Document.writeln(name1.toLowerCase())

2. toUpperCase(): It takes a string and convert all the characters of it to uppercase. If the string contains
non-characters, then they remain unchanged.
Example: var name1=”web”
Document.writeln(name1.toUpperCase())

3. concat(): This function joins two strings.


Example: var name1=”web”
var name=”Technology”
document.writeln(name1.concat(name2))

4. charAt(): It returns a character whose index value is supplied as an argument to this function.
Example: var name2=”Technology”
document.writeln(name1.charAt(3))

5. charCodeAt(): It returns the Unicode equivalent of the character whose index value is supplied as an
argument to this method.
Example: var name1=”Capital”
Document.writeln(name1.charCodeAt(1))

6. fromCharCode(): This function is used to return the character with a given code.
Example: document.writeln(String.fromCharCode(97))

7. substr(): This function takes 2 arguments index and length. The sub string is displayed from the given
index to the given length.
Example: var name2=”Technology”
Document.writeln(name2.substr(2,3))

8. substring(): This function takes 2 arguments starting index and ending index. The substring is displayed
between the 2 index values.
Example: var name2=”Technology”
Document.writeln(name1.substring(0,3))

Page 55 of 79
Program to demonstrate String Object:
<html>
<head>
<title>string</title>
</head>
<body>
<script language="javascript">
var nam1,name2
name1="web"
name2="technology"
document.writeln("name1.toLowerCase() value is " + name1.toLowerCase()+"<br>")
document.writeln("name1.toUpperCase() value is " + name1.toUpperCase()+"<br>")
document.writeln("name1.concat(name2) value is " + name1.concat(name2)+"<br>")
document.writeln("name1.charAt() value is " + name1.charAt(2)+"<br>")
document.writeln("name1.charCodeAt(1) value is " + name1.charCodeAt(1)+"<br>")
document.writeln("String.fromCharCode(97) value is " + String.fromCharCode(97)+"<br>")
document.writeln("name2.substr(1,4) value is " + name2.substr(1,4)+"<br>")
document.writeln("name2.substring(1,4) value is " + name2.substring(1,4)+"<br>")
</script>
</body>
</html>

4. Math Object:
JavaScript has numbr of mathematical functions to perform several mathematical calculations. These
mathematical functions are entities of Math Object.
Functions of Math Object are:
1. Min(): This function displays mimimum of the numbers entered.
E.g. document.writeln(min(2,4,3,6))
Output: 2
2. Max(): This function displays maximum of the numbers entered.
E.g. document.writeln(max(2,4,3,6))
Output: 6
3. Abs(): This function is used to find the absolute value.
E.g. document.writeln(abs(-6))
Output: 6
4. Ceil(): This function is used to find the next largest integer value of the given number.
E.g. document.writeln(ceil(5.2345))
Output: 6
5. Floor(): This function is used to find the immediate smallest integer value of the given number.
E.g. document.writeln(ceil(5.2345))
Output: 5
6. Pow(): This function is used to find the value of x raised to power y.
E.g. document.writeln(pow(x,y))
E.g. document.writeln(pow(2,3))
Output: 8

Page 56 of 79
7. Round(): This function is used to find the rounded integer value of the given number.
E.g. document.writeln(round(4.8236))
Output: 5
8. Sqrt(): This function is used to find the square root value of the given number.
E.g. document.writeln(sqrt(100))
Output: 10
9. Sin(): This function is used to find the trignometric sine value of the value passed to it.
E.g. document.writeln(sin(90))
Output: 1
10. cos(): This function is used to find the trignometric cosine value of the value passed to it.
E.g. document.writeln(co(90))
Output: 0
11. tan(): This function is used to find the trignometric tangent value of the value passed to it.
E.g. document.writeln(tan(45))
Output: 1

Program to demonstrate Math functions:


<html>
<head>
<title> math object </title>
</head>
<body>
<script language="javascript">
document.writeln("min(2,5) is "+Math.min(2,5)+"<br>")
document.writeln("max(2,5) is "+Math.max(2,5)+"<br>")
document.writeln("abs(-3) is "+Math.abs(-3)+"<br>")
document.writeln("ceil(1.234) is "+Math.ceil(1.234)+"<br>")
document.writeln("floor(1.2345) is "+Math.floor(1.2345)+"<br>")
document.writeln("pow(2,3) is "+Math.pow(2,3)+"<br>")
document.writeln("round(1.3478) is "+Math.round(1.3478)+"<br>")
document.writeln("sqrt(100) is "+Math.sqrt(100)+"<br>")
document.writeln("sin(90) is "+Math.sin(90)+"<br>")
document.writeln("cos(90) is "+Math.cos(90)+"<br>")
document.writeln("tan(45) is "+Math.tan(45)+"<br>")
</script>
</body>
</html>

5. Date Object:
Globally, date/time is recognized in 2 ways:
1. UTC (Universal coordinated time), which is a standard time followed through out the world.
2. Local time, which is the time of the system where the script is currently residing.

Functions of Date Object are:


1. toString(): This function returns a string representation of date and time
Page 57 of 79
Example: var c=new Date
document.writeln(c.toString())
2. valueOf(): This function returns the time in number of milliseconds since midnight of January 1, 1970.
Example: var c=new Date
document.writeln(c.valueOf())
3. getDate(): This function returns a number from 1 to 31 representing the day of the month.
Example: var c=new Date
document.writeln(c.getDate())
4. getDay(): This function returns a number from 0 to 6 (Sunday to Saturday) representing the day.
Example: var c=new Date
document.writeln(c.getDay())
5. getMonth(): This function returns a number from 0 to 11 (January to December) representing the
month of the year.
Example: var c=new Date
document.writeln(c.toMonth())
6. getFullYear(): This function returns 4 digit number representing the year.
Example: var c=new Date
document.writeln(c.getFullYear())
7. getTime(): This function returns the number of milliseconds between January1, 1970 and the time in
the date object.
Example: var c=new Date
document.writeln(c.getTime())
8. getMinutes(): This function returns a number from 0 to 59 representing the minutes for the time.
Example: var c=new Date
document.writeln(c.getMinutes())
9. getSeconds(): This function returns a number from 0 to 59 representing the seconds for the time.
Example: var c=new Date
document.writeln(c.getSeconds())
10. getMilliseconds(): This function returns a number from 0 to 999 representing the milli seconds for the
time.
Example: var c=new Date
document.writeln(c.getMilliseconds())

Program to demonstrate
Date/Time Functions:
<html>
<head>
<title>
date object
</title>
</head>
<body>
<script language="javascript">
var c=new Date();
document.writeln("c.toString() value is "+ c.toString()+"<br>")
document.writeln("c.valueOf() value is "+ c.valueOf()+"<br>")
Page 58 of 79
document.writeln("c.getDate() value is "+ c.getDate()+"<br>")
document.writeln("c.getDay() value is "+ c.getDay()+"<br>")
document.writeln("c.getMonth() value is "+ c.getMonth()+"<br>")
document.writeln("c.getFullYear() value is "+ c.getFullYear()+"<br>")
document.writeln("c.getTime() value is "+ c.getTime()+"<br>")
document.writeln("c.getMinutes() value is "+ c.getMinutes()+"<br>")
document.writeln("c.getSeconds() value is "+ c.getSeconds()+"<br>")
document.writeln("c.getMilliseconds() value is "+ c.getMilliseconds()+"<br>")
</script>
</body>
</html>

HTML Document Object Model:


A Document object represents the HTML document that is displayed in the window. Every web page in the
browser window is considered as an object.
DOM is a W3C (World Wide Web Consortium) standard used for accessing web documents. The objects are
organized in a hierarchy.

• Window Object: Top of the hierarchy is the WINDOW object. It is the outmost element of the object
hierarchy.
• Document Object: Each HTML document that gets loaded into a window becomes a DOCUMENT
object. The document contains the contents of the page.

• Form Object: Every-thing enclosed in the <Form> …….</Form> tags set the FROM object.

• For Control Elements: The form object contains all the elements defined for that object such as text
fields, buttons, radio buttons and check boxes.

Page 59 of 79
The document object provides properties and methods to access all objects within JavaScript.
The following methods can be used on HTML documents.

1. document. write(): Writes HTML expressions or JavaScript code to a document.


2. document.writeln(): Same as write(), but adds a newline character after each statement.
3. document.open(): Opens an HTML output stream to collect output from document.write()
4. document.close(): Closes the output stream previously opened with document.open().

Page 60 of 79
UNIT IV
HTML EVENTS:
In Object Oriented Programming, event means an action performed over an object. An HTML event can be
something the browser does or something a user does.
Responses by the browser, because of user interaction are called as events.

Event Handler:
Once the event is generated, there is often requirement of code to process those events. Such code is known
as event handler.
There are 2 types of event handlers.

Interactive Event Handlers: The event handlers which simply relies on the users activity. E.g., OnClick,
OnDblClick etc.
Non-interactive Events: The event handlers which do not rely on users activity. E.g, OnLoad, OnUnLoad etc.

Event Handling: The process of JavaScript recognizing an event and executing some piece of code is called as
Event Handling.

OnClick Event:
Whenever mouse is clicked, the OnClick event handler calls the JavaScript function. The specific JavaScript
code is executed on the occurrence of the OnClick event. We can put validation, warning, alert messages
against the event type.
Syntax:
<tag_name OnClick=”Some JavaScript Code”>
Example:
<h2 OnClick=”hello()”>

Program to demonstrate OnClick Event:


<html>
<head>
<title>OnClick</title>
<script language="JavaScript">
function hello()
{
alert("Hey! you have clicked on the text")
}
</script>
</head>
<body bgcolor="pink">
<h1>This program demonstrates about OnClick Event</h1>
<br>
<h2 onclick="hello()">Click on this text</h2>
<h2>This is normal text</h2>
</body>
</html>

Page 61 of 79
OnDblClick:
Whenever mouse is double clicked, the OnDblClick event handler calls the JavaScript function. The specific
JavaScript code is executed on the occurrence of the OnDblClick event. We can put validation, warning, alert
messages against the event type.
Syntax:
<tag_name OnDblClick=”Some JavaScript Code”>
Example:
<h2 OnDblClick=”hello()”>

Program to demonstrate OnClick Event:


<html>
<head>
<title>OnDblClick</title>
<script language="JavaScript">
function hello()
{
alert("Hey! you have double clicked on the text")
}
</script>
</head>
<body bgcolor="pink">
<h1>This program demonstrates about OnDblClick Event</h1>
<br>
<h2 ondblclick="hello()">Double Click on this text</h2>
<h2>This is normal text</h2>
</body>
</html>

Page 62 of 79
OnMouseDown:
OnMouseDown event occurs when the mouse button is pressed down on an element. This event is handled by
the OnMouseDown event handler.
Syntax:
<tag_name OnOnMouseDown=”Some JavaScript Code”>
Example:
<h2 OnMouseDown=”hello()”>

Program to demonstrate OnMouseDown Event:


<html>
<head>
<title>OnMouseDown</title>
<script language="JavaScript">
function hello()
{
alert("Hey! you have pressed the mouse button on the text")
}
</script>
</head>
<body bgcolor="pink">
<h1>This program demonstrates about OnMouseDown Event</h1>
<br>
<h2 onmousedown="hello()">Press the mouse click on the text</h2>
<br>
<h2>This is normal text</h2>
</body>
</html>

OnMouseMove:
OnMouseMove event occurs when the mouse pointer moves on an element. This event is handled by the
OnMouseMove event handler. The browser will be checking the mouse position constantly. If any changes in
the mouse position is observed, then the OnMouseMove event is triggered.
Syntax:
<tag_name OnOnMouseMove=”Some JavaScript Code”>
Example:
<h2 OnMouseMove=”hello()”>

Page 63 of 79
Program to demonstrate OnMouseMove Event:
<html>
<head>
<title>OnMouseMove</title>
<script language="JavaScript">
function hello()
{
alert("Hey! you have moved the mouse on the text")
}
</script>
</head>
<body bgcolor="pink">
<h1>This program demonstrates about OnMouseMove Event</h1>
<br>
<h2 onmousemove="hello()">Move the mouse on the text</h2>
<br>
<h2>This is normal text</h2>
</body>
</html>

OnMouseOver:
OnMouseOver event occurs when the mouse pointer is moved over an element. This event is handled by the
OnMouseOver event handler. The browser will be checking the mouse position constantly. If any changes in
the mouse position is observed on the element, then the OnMouseOver event is triggered.
Syntax:
<tag_name OnOnMouseOver=”Some JavaScript Code”>
Example:
<h2 OnMouseOver=”hello()”>

Program to demonstrate OnMouseOver Event:


<html>
<head>
<title>OnMouseOver</title>
<script language="JavaScript">

Page 64 of 79
function hello()
{
alert("Hey! you have moved the mouse over the text")
}
</script>
</head>
<body bgcolor="pink">
<h1>This program demonstrates about OnMouseOver Event</h1>
<br>
<h2 onmouseover="hello()">Move the mouse over this text</h2>
<br>
<h2>This is normal text</h2>
</body>
</html>

OnMouseOut:
OnMouseOut event occurs when the mouse pointer leaves from an element. This event is handled by the
OnMouseOut event handler. The browser will be checking the mouse position constantly. If the mouse
position is observed to move out of the element, then the OnMouseOut event is triggered.
Syntax:
<tag_name OnOnMouseOut=”Some JavaScript Code”>
Example:
<h2 OnMouseOut=”hello()”>

Program to demonstrate OnMouseOut Event:

<html>
<head>
<title>OnMouseOut</title>
<script language="JavaScript">
function hello()
{
alert("Hey! you have moved the mouse out of the text")
}
</script>
</head>

Page 65 of 79
<body bgcolor="pink">
<h1>This program demonstrates about OnMouseOut Event</h1>
<br>
<h2 onmouseout="hello()">Move the mouse out of the text</h2>
<br>
<h2>This is normal text</h2>
</body>
</html>

OnLoad Event: OnLoad event is invoked (triggered) as soon as a web document (web page) is opened. It is
handled by the OnLoad event. It is mostly used when a web page loads its complete content.
Syntax:
<body OnLoad=” some java script code”>
Example:
<body OnLoad=” hello ()”>

OnUnLoad Event:
The OnUnLoad event occurs once a page has unloaded. OnUnLoad occurs when the user navigates away from
the page by clicking on a link, or submitting a form, or closing the web page etc. The OnUnLoad event is also
triggered when the user reloads the page.
Syntax:
<body OnUnLoad=” some java script code”>
Example:
<body OnUnLoad=” hello ()”>

Program to demonstrate OnLoad and OnUnLoad Events:


<html>
<head>
<title>OnLoad and OnUnLoad</title>
<script language="JavaScript">
function hello1()
{
alert("Hey! Welcome to my website")
}

Page 66 of 79
function hello2()
{
alert("Hey! Thanks for visiting my website")
}
</script>
</head>
<body bgcolor="pink" onload="hello1()" onunload="hello2()">
<h1>This program demonstrates about Onload and onunload Event</h1>
<br>
<h1>Hello</h1>
<h2>Hello</h2>
<h3>Hello</h3>
</body>
</html>

OnResize Event: The OnResize Event occurs when the browser window is resized. This event is handled by
OnResize event handler.
Syntax:
<body OnResize=” some java script code”>
Example:
<body OnResize=” hello ()”>

Page 67 of 79
Program to demonstrate OnResize Event:
<html>
<head>
<title>OnResize</title>
<script language="JavaScript">
function hello1()
{
alert("Hey! you have resized the window")
}
</script>
</head>
<body bgcolor="pink" onresize="hello1()">
<h1>This program demonstrates about OnResize Event</h1>
<br>
<h1>Hello</h1>
<h2>Hello</h2>
<h3>Hello</h3>
</body>
</html>

OnSubmit Event:
It is a form-based event. Whenever, user fills the form and ensures that his entries have to be loaded onto the
server, then he clicks submit button which is provided at the end of each form. Hence, OnSubmit event is fired
whenever the submit button is clicked.
Syntax:
<form OnSubmit=” some java script code”>
Example:
<form OnSubmit=” hello ()”>

OnReset Event:
It is a form-based event. Whenever, user want to clear the entered details in the form, he clicks on reset/ Clear
button which is provided at the end of each form. Hence, OnReset event is fired whenever the Reset/Clear
button is clicked.
Syntax:
<form OnReset=” some java script code”>
Example:
<form OnReset=” hello ()”>
Page 68 of 79
Program to demonstrate OnSubmit and OnReset Event:

<html>
<head>
<title>Form Events</title>
<script language="JavaScript">
function hello1()
{
alert("Hey! Form submitted successfully")
}
function hello2()
{
alert("Hey! All the values have been cleared")
}
</script>
</head>
<body bgcolor="pink">
<h1>This program demonstrates about OnSubmit and OnReset Events</h1>
<br>
<form OnSubmit="hello1()" OnReset="hello2()">
Student Name: <input type="text" size=10 maxlength=20><br><br>
Fathers Name: <input type="text" size=10 maxlength=20><br><br>
Mothers Name: <input type="text" size=10 maxlength=20><br><br>
Gender: <input type="radio" name="r1">Male
<input type="radio" name=r1">Female
<br><br>
<input type="submit" value="Submit">
<input type="reset" value="reset">
</body>
</html>

Page 69 of 79
OnSelect Event:
The OnSelect event occurs after some text has been selected in an element. This event is handled by the
OnSelect event handler. The OnSelect event is mostly used in <input type=”text”> or <textarea> elements.

Syntax: <element OnSelect=”some java script code”>


Example: <input type=”text” OnSelect=”hello()”>

OnKeyUp Event:
The OnKeyUp event occurs when the user releases the key that is pressed by him on the element. This event is
handled by the OnKeyUp event handler. The OnKeyUp event is mostly used in <input type=”text”> or
<textarea> elements.

Syntax: <element OnKeyUp=”some java script code”>


Example: <input type=”text” OnKeyUp=”hello()”>

OnKeyPress Event:
The OnKeyPress event occurs when the user releases the key that is pressed by him on the element. This
event is handled by the OnKeyPress event handler. The OnKeyPress event is mostly used in <input
type=”text”> or <textarea> elements.

Syntax: <element OnKeyPress=”some java script code”>


Example: <input type=”text” OnKeyPress=”hello()”>

Program to demonstrate OnKeyPress and OnKeyUp and OnSelect Events:

<html>
<head>
<title>keyboard Events</title>
<script language="JavaScript">
function hello1()
{
alert("Hey! You have pressed the key")
}
Page 70 of 79
function hello2()
{
alert("Hey! You have pressed and released the key")
}
function hello3()
{
alert("Hey! You have selected some text")
}
</script>
</head>
<body bgcolor="pink">
<h1>This program demonstrate OnKeyPress and OnKeyUp and OnSelect Events</h1>
<br>
<form>
Student Name: <input type="text" size=10 maxlength=20 OnKeyPress="hello1()"><br><br>
Fathers Name: <input type="text" size=10 maxlength=20 OnKeyUp="hello2()"><br><br>
Mothers Name: <input type="text" size=10 maxlength=20 OnSelect="hello3()"><br><br>
Gender: <input type="radio" name="r1">Male
<input type="radio" name=r1">Female
<br><br>
<input type="submit" value="Submit">
<input type="reset" value="reset">
</body>
</html>

Page 71 of 79
OnFocus:
When a window or form element is focused on, the OnFocus event handler calls the java script function. The
element can be focused by clicking on it or by tabbing on it. The OnFocus event handler occurs when an
element gains focus.
Syntax: <element OnFocus=”some java script code”>
Example: <input type=”text” OnFocus=”hello(this)”>

Program to demonstrate OnFocus Event:

<html>
<head>
<title>keyboard Events</title>
<script language="JavaScript">
function hello1(x)
{
x.style.background = "red";
}

</script>
</head>
<body bgcolor="pink">
<h1>This program demonstrate OnFocus Event</h1>
<br>
<form>
Student Name: <input type="text" size=10 maxlength=20 OnFocus="hello1(this)"><br><br>
Fathers Name: <input type="text" size=10 maxlength=20><br><br>
Mothers Name: <input type="text" size=10 maxlength=20><br><br>
Gender: <input type="radio" name="r1">Male
<input type="radio" name=r1">Female
<br><br>
<input type="submit" value="Submit">
<input type="reset" value="reset">
</body>
</html>

Page 72 of 79
OnAbort Event: An OnAbort event occurs when the loading of an image stops or aborts. When the user
press the stop button or redirects the page before the image loads then OnAbort event occurs.
Syntax: <element OnAbort=”Some javaScript code”>
Example: <img src=”flower.jpg” OnAbort=”hello()”>

OnErrorEvent: An OnError event occurs when there is a javascript error. The OnError event is used to
launch a script that writes messages to the status bar of the browser.
Syntax: <element OnError=”Some javaScript code”>
Example: <img src=”flower.jpg” OnError=”hello()”>

Program to demonstrate OnAbort and OnError events:

<html>
<head>
<title>keyboard Events</title>
<script language="JavaScript">
function hello1()
{
alert("Hey! The loading of the image was aborted")
}
function hello2()
{
alert("Hey! An error occured while loading the image")
}
</script>
</head>
<body bgcolor="pink">
<h1>This program demonstrate OnAlert and OnError Events</h1>
<br>
<img src="flowers.jpg" height=250 widthd=250 OnAbort="hello1()" OnError="hello2()">
</body>
</html>

Page 73 of 79
UNIT V
Extensible Markup Language (XML):

➢ It is a kind of markup language like HTML developed by W3C. W3C stands for world wide web
consortium, which is an international group of companies involved with the internet and the web.

➢ HTML is designed to display data with focus on “how data should look”, but XML is designed to
transport and store data with more focus on what data is rather than how it looks i.e., XML document
is mainly concerned with storage and description of the data. XML is mainly used to store data or
information.

Applications of XML:
1. Cell Phones: XML data which is stored or sent to some cell phones may be formatted by the cell
phones software designer to display text, images and even pay sounds.
2. File Converters: Many appliations have been written to convert existing documents into XML
standards.
3. Voice XML: Converts an XML document into audio format, so that a user can listen to an XML
document.
4. XML documents can be used as mini data storage: The data stored in XML documents can be used to
present on variety of targets like browsers, print-media etc.
5. Storing data Configuration information: Most server software have configuration files in XML format.

Features of XML:

1. XML provides a framework for defining markup languages like XHTML.


2. An XML document seperates the contents from their presentation through external style sheet.
3. XML document form a tree structure, which must contain a root element. This root element is the
parent of all other elements.
4. XML is case sensitive.
5. XML makes data sharing among applications easy.
6. XML is a flexible tool. In XML, custom tags can be defined. XML tags are invented by the user of the
XML document.
7. XML can be used to store data in files or in databases.
8. Easy to interpret and Licence-free.
9. XML is a text-based language, which makes it easily readable and more portable than binary data
format.

Disadvantages of XML:
1. XML syntax is redundant.
2. The redundancy may effect application efficiancy through high storage, transmission and processing
cost.
3. The hierarchial model for representation is limited compared to relational or object oriented model.
4. Expressing overlapping node relationship requires extra effort.

Page 74 of 79
Differences between HTML and XML:

1. XML is designed to carry data:XML describes and focus only on the data, while HTML only displays and
focus on how data looks. HTML is about displaying and XML is about describing information.

2. XML is free and extensible: XML tags are not predefined, they are developed by the user where as
HTML tags are pre-defined which are defined in HTML standard.

3. XML tags are case sensitive: XML tags are case sensitive i.e., opening and closing tags must be written
in the same case. HTML tags are not case sensitive.

4. XML elements must be properly nested: In XML tags must be properly nested like root node has child
nodes and futher division. But in HTML, elements ( tags) may be improperly nested with in each other.

5. XML is a compliment to HTML: IT is important to understand that XML is not a replacement for HTML.
In web development it is most likely that XML will be used to decribe the data while HTML is used to
display the same data.

Creating XML Documents:

1. XML Syntax: The syntax of XML is simple and logical rules are easy to learn and use.

2. All lements must have a closing tag: In HTML some elements do not have a closing like <br>, <p> etc.
But, in XML all the elements should have a closing tag.

3. XML tags are case sensitive: XML tags are case sensitive. The tag <Letter> is different from <letter>.
Opening and closing tags must be written within the same case.
E.g., <message> closing tag will be </message> and mot </Message>

4. XML elemetns must be properly nested: In HTML, we may have improperly nested tags, but XML
should have properly nested tags.

5. XML document must have a root element: XML document must have a root elemt. XML document
contains one root element and all other elements are its child or subchild elements.
E.g., <root>
<child>
<subchild>…..</subchild>
</child>
</root>
6. XML attribute, values must be quoted: XML elements can have attributes in name and value pairs like
in hTML. In XML, the attribute values must be always quoted.
E.g., <book category=”stories”>
<title>Harry Potter</title>
<price>500</price>
</book>

Page 75 of 79
7. Comments in XML: The syntax for writing commets in XML is siliar to that of HTML.
<!...........This is a comment …………….>
8. White spaces are preserved in XML: In HTML white spaces are truncted to only one space character.
E.g., HTML <h1> Hello World</h1>
Output: Hello World
But, in XML white spaces are preserved.

9. Entity Reference: Some characters have a special meaning in XML. If you place a character like ‘<’
inside an XML element, it will generate an error because the interpreter interprets that as a start of
new element. To avoid this, we can replace ‘<’ symbol with entity reference. There are 5 pre-defined
entity reference in XML.
&lt; < less than
&gt; > greater than
&amp; & ampersand
&apos; ‘ apostrophe
&quot; ‘‘ Single Quotation mark

Extensible Stylesheet Language (XSL)

XSL is the stylesheet for XML documents. It does not work like CSS which attach the style information to the
elements. Instead, XSL is a programming language with templates, functions, and recursion, its quality of style
is far better than CSS, but the complexity keeps it away from becoming popular.

XSL
It is similar to XML as CSS is to HTML.

Need for XSL


➢ In case of HTML document, tags are predefined such as table, div, and span; and the browser knows
how to add style to them and display those using CSS styles.

➢ But in case of XML documents, tags are not predefined. In order to understand and style an XML
document, World Wide Web Consortium (W3C) developed XSL which can act as XML based Stylesheet
Language. An XSL document specifies how a browser should render an XML document.

Following are the main parts of XSL −


XSLT − used to transform XML document into various other types of document.
XPath − used to navigate XML document.
XSL-FO − used to format XML document.

XSLT
XSLT, Extensible Stylesheet Language Transformations, provides the ability to transform XML data from one
format to another automatically.

Page 76 of 79
XSLT Working
An XSLT stylesheet is used to define the transformation rules to be applied on the target XML document. XSLT
stylesheet is written in XML format. XSLT Processor takes the XSLT stylesheet and applies the transformation
rules on the target XML document and then it generates a formatted document in the form of XML, HTML, or
text format. This formatted document is then utilized by XSLT formatter to generate the actual output which is
to be displayed to the end-user.

Advantages
Independent of programming. Transformations are written in a separate xsl file which is again an XML
document.

XML Query Language:

XQuery is a query language that is designed to query XML data. “Query” refers to the action of retrieving data
from the database. XQuery for XML is just like SQL for database. Its main role is to get information out of XML
databases. The language is developed by the XML Query working group of W3C.

➢ XQuery provides the means to extract and manipulate data from XML documents or any databases.

➢ XQuery has functions for numerous operations including date and time comparisions, mathematical
calculations and string manipulations. If any function is needed and not found in XQuery, the
programmer can write a new one.

XQuery is a functional language which is responsible for finding and extracting elements and attributes from
XML documents.

Page 77 of 79
It can be used for following things:

o To extract information to use in a web service.


o To generates summary reports.
o To transform XML data to XHTML.
o Search Web documents for relevant information.
o
Features of XQuery:

1. It is easy to learn with knowledge of SQL.


2. XQuery statements are shorter than similar SQL or XSLT programs.
3. All major databases support XQuery.
4. Low maintenance cost, because XQuery requires less code to perform a query.
5. With XQuery, you can select information based on specific criteria.
6. With XQuery, you can join data from multiple XML documents.
7. XQuery can be used to extract information from a database.
8. XQuery support all datatypes from XML schema, including complex types.

XML Document Object Model:

The XML Document Object Model (DOM) defines a standard way for accessing and manipulating XML
documents. The DOM is a W3C standard. It is a platform and language-neutral interface that allows programs
and scripts to dynamically access and update the content, structure and style of a document.

The XML DOM is:


• A Standard object model for XML.
• A Standard programming interface for XML.
• Platform and language independent.
• The XML DOM is a standard for how to get, change, add or delete XML elements.

According to the DOM, everything in an XML documents is a node.

• The entire XML document is a document node.


• Every XML element is an element node.
• Every attribute is an attribute node.
• The Texts in the XML elements ae text nodes.
• Comments are comment nodes.

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


<bookstore>
<book category="cooking">
<title lang="en">Southern Dishes</title>
<author>Cherry</author>
<year>2005</year>
<price>300</pr00ice>
</book>

Page 78 of 79
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>500</price>
</book>

<book category="web">
<title lang="en">Web Technology</title>
<author>Chinnu</author>
<year>2003</year>
<price>400</price>
</book>
</bookstore>

Here, the root node is <bookstore>. All other nodes are contained within <bookstore>. The root node has
<book> as child node and <book> has 4 child nodes <title>, <author>, <year> and <price>.

XML DOM Node Tree:


The XML DOM views an XML document as a tree structure. The tree structure is called as node-tree. The node-
tree shows the set of nodes and the connections between them. The tree starts at the root node and branches
out to the text nodes at the lowest level of the tree. The nodes in the tree have a hierarchical relationship to
each other.
• In a node-tree, the top node is called as the root.
• Every node, except the node, has exactly one parent node.
• A node can have any number of children.
• A leaf is a node with no children.
• Siblings are nodes with the same parent.

Page 79 of 79

You might also like