Scribd
Upload
13 views24 pages

Web Technologies

The document provides an overview of HTML forms, tables, frames, and DHTML, detailing various form controls, attributes, and examples. It explains the structure and attributes of tables and frames in HTML, as well as the role of filters and transitions in DHTML for creating dynamic web pages. Additionally, it introduces CSS and its types, including inline, embedded, and external styles.

Uploaded by

manideepyadav58
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
13 views24 pages

Web Technologies

The document provides an overview of HTML forms, tables, frames, and DHTML, detailing various form controls, attributes, and examples. It explains the structure and attributes of tables and frames in HTML, as well as the role of filters and transitions in DHTML for creating dynamic web pages. Additionally, it introduces CSS and its types, including inline, embedded, and external styles.

Uploaded by

manideepyadav58
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/ 24

Unit 1

1. Define forms. Explain various form controls or elements in HTML.


Form:
Form is a web page which carries elements like text fields, check boxes, buttons etc. These
web pages look like a normal white sheet of paper consisting significant spaces for
information to be entered by users. Online forms can be used for different purposes in order
to retrieve input from the user.
Ex: Online registration, order entry, subscription form etc.
<form> tag helps in creating HTML form. The code is embedded between the tags <form>
……… </form>.
Attributes:
a) Action:
This attribute carries a URL, where a program that is responsible for managing the data
that belong to current form. Whenever the user clicks the submit button, the current data
gets directed to that program whose path is supplied as URL.
b) Method:This attribute selects the best possible way of transmitting the data from the current
form
to the server. The attributes are “POST” and “GET”.
c) Name:
This attribute is used to specify the name the form. It references the form data after form
submission.
Syntax:
<form action = “URL” method = “POST / GET” name = “form name”>
Statements
</form>
Form Elements:
The different types of form controls are
➔ Text Input controls
➔ Checkboxes controls
➔ Radio box controls
➔ Select box controls
➔ Button controls
Text Input Controls:
Attributes of <input> tag:
1. type: Indicates the type of input control and output control.
2. name: Specifies the name of the control to be sent to the server.
3. value: Specifies the initial value to be displayed inside the control.
4. size: Specifies the width of the text-input control.
5. maxlength: Specifies the maximum number of characters a user can enter into the text
box.
There are three types of text input controls
i) Single – line text input control:
This control is used for items that require only one line of user input, such as search boxes
or names. They are created using <input> tag.
Ex:
<input type = “text” name = “firstname”>
ii) Password input control:
This control marks the characters as soon as a user enters it. They are created using <input>
tag.
Ex:
<input type = “password” name = “Password”>
iii) Multi – line text input control:
This control is used to give details that may be longer than a single line, such as address,
comments, feedback etc. They are created using <textarea> tag.
Attributes:
Rows: Specifies the number of rows in the text area.
Cols: Specifies the number of columns in the text area.
Name: Specifies the name to the control which is sent to the server.
Ex:
<textarea cols = “50” rows = “10” name = “address”>
</textarea>
Program:
<html>
<head>
<title> Input Control </title>
</head>
<body>
<form>
<label> Fisrt Name: </label>
<input type = “text” name = “fname” value = “Enter your first name” size = “20”> <br>
<label> Last Name: </label>
<input type = “text” name = “lname” value = “Enter your last name” size = “20”> <br>
<label> Address: </label>
<textarea rows = “5” cols = “50” name = “address” >
Enter Address
</textarea>
</form>
</body>
</html>
Checkbox Controls:
They are used when more than one option is required to be selected. They are also created
using <input> tag. The type definition is set to checkbox.
Ex:
<input type = “checkbox” name = “cb1”>Attributes:
Type: Specifies the type of control.
Name: Specifies the name to the checkbox which to be sent to the server.
Value: Specifies the value that if the checkbox is selected.
Checked: Set to checked, if you want to select it by default.
Program:
<html>
<head>
<title> Check Box </title>
</head>
<body>
<form>
<label> Languages known: </label>
<input type = “checkbox” name = “cb1” checked> English <br>
<input type = “checkbox” name = “cb2”> Hindi <br>
<input type = “checkbox” name = “cb3”> Telugu
</form>
</body>
</html>
Radio Box Control:
Radio buttons are used to select only one option from many options. They are used with
<input> tag. They type attribute is set to radio.
Ex:
<input type = “radio” name = “r1”>
Attributes:
Type: Specifies the type of control.
Name: Specifies the name to the radio button which to be sent to the server.
Value: Specifies the value that if the radio button is selected.
Checked: Set to checked, if you want to select it by default.
Program:
<html>
<head>
<title> Radio Button </title></head>
<body>
<form>
<label> Gender </label>
<input type = “radio” name = “r1” checked> Male <br>
<input type = “radio” name = “r1”> Female <br>
<input type = “radio” name = “r1”> Others
</form>
</body>
</html>
Select Box Control:
A select box is also known as drop down box which provides option to list down various
option in the form of drop down list. The user can select one or more options also.
Syntax:
<select name = “value”>
<option value = “value” selected> ………… </option>
</select>
Attributes of <select> tag:
Name: Specifies the name given to the control to be sent to the server.
Size: It is used to present a scrolling list box.
Multiple: Allows the user to select multiple items from the menu.
Attributes of <option> tag:
Value: Specifies the value used in the select box.
Selected: Specifies that this option should be initially selected.
Label: Specifies an alternative way of labeling options.
Program:
<html>
<head>
<title> Drop Down Box </title>
</head>
<body><form>
<select name = “Universities”>
<option> Osmania University </option>
<option> JNTU </option>
<option> Kakatiya University </option>
<option> Mahatma Gandhi University </option>
<option> Palmur University </option>
</select>
</form>
</body>
</html>

2. What is a Table? Explain the attributes of <table> in HTML.


In HTML, data can also be represented in tabular format. Data is arranged in terms of
rows and columns. The tags and attributes are as follows:
1. <table> ………….. </table>
The entire code of a given table is written within these tags.
Attributes:i) align: Specifies the alignment of the given table. The values are left / right / center
respectively.
ii) background: Species an image or other graphics as background of the table. It usually
carries a URL path to the given image or graphics.
iii) bgcolor: Sets the colour of the window where the table is displayed.
iv) bordercolor: Sets the color to the border of the table.
v) border: Sets the border of the table.
vi) cols: Specifies the number of columns in a given table
viii) height: Specifies the height of a given table.
ix) width: Specifies the width of a given table.
x) cellspacing: Specifies the space between table cell.
xi) cellpadding: Specifies the space between the cell and the content.
2. <tr> …………. </tr>
It corresponds to a single row of a given table. Data within these tags is displayed in a
particular row of that table. These tags may have <th> and <td> tags within them.
Attributes:
i) align: Specifies the alignment of the text in a given row of a table. The values are left /
right/ center.
ii) bgcolor: Specifies the background colour of the blocks of a table corresponding to a given
row.
iii) bordercolor: It sets the border colour for a given row of the table.
iv) valign: Specifies the vertical placement of data in a given row. The values are top /
bottom / middle.
3. <th> …………. </th>
It is specifically used to set the headings of the available columns. <th> tag is followed by
<tr> tag.
Attributes:
i) align: Specifies the alignment of the text given in the header column of a table. The values
are left / right/ center.
ii) bgcolor: Specifies the background colour for the table headers.
iii) bordercolor: It sets the border colour for a given table headers.
iv) valign: Specifies the vertical alignment of data in the table row.
v) width: Sets the width of the table header.
vi) rowspan: Merges two or more rows into a single row.
vii) colspan: Merges two or more columns into a single column.
4. <td> …………. </td>
It inserts data into each block of the table. It supports the attributes of <th> tag.
5. <caption> …………. </caption>
It specifies title to the table. This tag can be placed at bottom or above the table. The
attributes are align / valign respectively.
Program:
<html>
<head>
<title> Table </title>
</head>
<body>
<table border = “3” cellpadding = “2” cellspacing = “2” >
<caption> Course Details </caption>
<tr>
<th> Courses </th>
<th> Duration </th>
<th> Fee </th>
</tr>
<tr>
<td> C & C++ </td>
<td> 45 Days </td>
<td> Rs.1200 </td>
</tr>
<tr>
<td> Java & J2EE </td>
<td> 3 Months </td>
<td> Rs. 8000 </td>
</tr>
<tr>
<td> . Net </td>
<td> 3 Moths </td>
<td> Rs. 8000 </td>
</tr>
</table>
</body>
</html>

3. What is a frame? Explain in detail about frames in HTML with examples.


Frame:
HTML frames are used to divide the browser window into multiple sections where each
section can have a separate HTML document. A collection of frames is known as frameset.
<frameset> tag:
The <frameset> tag is used to define the frameset. It contains one or more frames. It is used
to specify the number of rows and columns. Each element can hold a separate document.
Syntax:
<frameset cols or rows = “pixels|%|*”>
Attributes:
Cols: It is used to create vertical frames in a web browser. It is used to define the no. of
columns and their size inside the frameset tag.
Rows: It is used to create horizontal frames in a web browser. It is used to define the no. of
rows and their size inside the frameset tag.
Border: It defines the width of the border of each frame in pixels.
Frameborder: It specifies whether a 3D border should be displayed or not between the
frames. The values are 0 – no border and 1 – border.
Framespacing: It is used to specify the amount of spacing between frames in the frameset.
<frame> tag:
Frames are used to divide the browser window into multiple sections.
Syntax:
<frame name = “text” src = “URL”>
Attributes:
Name: Specifies the name to a frame.
Src: It is used to define the source file to be loaded in to the frame.
Marginwidth: Specifies the width of the spaces between the border and content.
Marginheight: Specifies the height of the spaces between the border and content.
Scrollbar: It is used to control the appearance of the scrollbar in the frame. The values are
yes, no or auto.
Program:
Frame1.html
<html>
<head>
<title> Frame1 </title>
</head>
<body>
<h1> Frame1 </h1>
</body>
</html>
Frame2. Html
<html>
<head>
<title> Frame2 </title>
</head>
<body>
<h1> Frame2 </h1>
</body>
</html>
Frameset.html
<html>
<head>
<title> Frameset </title>
</head>
<frameset cols = “50%, %50”>
<frame src = “Frame1.html”>
<frame src = “Frame2.html”>
</frameset>
</html>

Unit 2

1. Explain about different types of filters and transitions in DHTML.


Filters and transitions play an important role in creating multimedia effects. They provide
dynamic visual effects to web pages.
Filters:
They are used to apply visual effects to some HTML objects and some other objects like
button, div, img, marquee, input, span, table etc. Filters are usually applied to text and
graphics.
List of filters:
1. fliph( ): Creates horizontal mirror image.
2. flipv( ): Creates vertical mirror image.
3. blur( ): Causes an object to be in a state of motion.
4. wave( ): Generates a wave-like distortion to an object.
5. chroma( ): Causes a color to appear/become transparent.
6. glow( ): Adds a glow effect round an object.
7. grayscale( ): Turns an object to grayscale.
8. invert( ): Creates inverse of an object.
9. mask( ): Creates a transparent mask from the given non-transparent pixels.
10. shadow( ): Creates a shadow behind the object.
Syntax:
<img src = “URL” width = “pixels” height = “pixels” style = “filter:effect( )”>
Ex:
<img src = “Tulips.jpg” width = “100” height = “100” style = “filter.glow( )”>
Program:
<html>
<head>
<style>img { filter: grayscale(100%);}
</style>
</head>
<body>
<h1>The filter Property</h1>
<p>Convert the image to grayscale:</p>
<img src="butterfly.jpg" alt="Butterfly" width="300" height="300">
</body>
</html>
Transitions:
They are filters that provide effects to the content of the web page. They are responsible for
visually changing the control/moving a page from one state to another. They are two types
1. Reveal Transition Filter:
This filter is written as RevealTrans. It is applied to multiple visual objects together inorder
to show/hide them.
Syntax:
style = “filter:revealtrans(duration = duration, transition = transitionshape)”
2. Blend Transition Filter:
This filter is written as BlendTrans. It is applied to a visual object to fadein/fadeout for
certain time limit.
Syntax:
style = “filter:blendtrans(duration = duration)”
Program:
<html>
<head>
<style>
div { width: 100px; height: 100px; background: red; transition: width 2s; }
div:hover { width: 300px; }
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
</body>
</html>

2. Give a brief introduction about DHTML and its features.


DHTML:
DHTML means Dynamic Hyper Text Markup Language and is also known as dynamic
HTML. It is combination of different technologies such as HTML, JavaScript and CSS. It
is a client-side technology used for developing dynamic web pages.
Features:
1. Alteration of Tags and Properties:
It allows to make changes in the qualities of HTML tags based on the events that are
external to the browser. The events may include mouse click, time, date etc. It can be used
for preloading information onto the web page.
2. Real-Time Positioning:
It allows to position the objects, images and texts in such a way that they can move all over
the webpage. This concept is used for interactive games.
3. Dynamic Fonts:
This feature is called Netscape-only because it was developed by Netscape inorder to
prevent the problem of designers caused due to the unawareness of the font’s type present
on the user’s system. Dynamic font in DHTML allow to encode and download the fonts with
the pages such that the page remains the same as it was designed.
4. Data Binding:
Microsoft developed the concept of data binding in DHTML inorder to make databases and
web sites easily accessible. This feature is also known as Internet-Only feature.

3. What is CSS? Explain different types of CSS.


Cascading Style Sheets:
CSS forms specifies the style rules for organizing elements of a given web document. It
extends its features in controlling colors, sizes, fonts, and spaces. CSS is used to determine
the style and layout of web pages.
Syntax:
Selector { property : value; }
Types of CSS:
1. Inline style sheet
2. Embedded style sheet
3. External style sheet
1. Inline Style Sheet:
It is used to directly apply style sheet rules to any HTML element using style attribute of
the relevant tag.
Syntax:
<selector style = “property : value;”>
Program:
<html>
<head>
<title> Inline Style Sheet </title>
</head>
<body>
<h1 style = “background-color:orange; font-size:200%;”> Inline Style Sheet </h1>
<p style = “background-color:green; font-size:200%;”> This is an Inline Style Sheet </p>
</body>
</html>
2. Embedded Style Sheet:
It is used to apply Style Sheet rules to a single document. The style rules are included in the
header section of the html document by using <style> tag.
Syntax:
<head>
<style>
Selector { property : value; }
</style>
</head>
Program:
<html>
<head>
<title> Embedded Style Sheet </title>
<style>
h1 { background-color:orange; font-size:200%; }
p { background-color:green; font-size:200%; }
</head>
<body>
<h1> Embedded Style Sheet </h1>
<p> This is an Embedded Style Sheet </p>
</body>
</html>
3. External Style Sheet:
It is used to style multiple set of pages. The CSS rules are written in a single document and
saved as “filename.css” extension. This document can be downloaded once and applied to
any number of pages, multiple times.
The external style sheet can be linked with the web document with a <link> tag.
Syntax:
<link href = “URL” rel = “filename.css”>
“href” specifies the location of the stylesheet and “rel” indicates that the referred document
is a stylesheet.
Program:
External.css
h1 { background-color:orange; font-size:200%; }
p { background-color:green; font-size:200%; }
external.html
<html>
<head>
<title> External Style Sheet </title>
<link href = “External.css” rel = “stylesheet”>
</head>
<body>
<h1> External Style Sheet </h1>
<p> This is an External Style Sheet </p>
</body>
</html>

Unit 3

1. What is an array? Explain how to create an array and how to add and access elements in
an array.
Array:
An array is a collection of homogeneous items. In JavaScript an array contains
heterogeneous items. Arrays in JavaScript are also called as associative arrays.
Creating and Accessing the Array Elements:
An array can be declared as follows,
var arr;
Elements can be allocated to this array by the following statement,
arr = new Array(10);
An array is not initialized while it is allocated.
Arrays in JavaScript are considered as objects. They can also be created by making use of
constructors. Constructors in JavaScript are of three types. They are,
➔ Array( );
➔ Array(number of elements);
➔ Array(List of elements separated by commas);
Ex:
var arr = new Array( );
It creates an array of zero length.
arr[3] = 5;
The length of an array is 4. i.e., it has 4 elements. It adds an elements at the location arr[3].
Values to the array elements are assigned by writing them in square brackets by separating
them with commas.
Syntax:
var arr = [element0, element1, element2, ……….., element];
Ex:
var flowers = [“Rose”
,
“Lily”
,
“Jasmine”];
var arr = [0, 1, 2, 3, 4, 5];
An array index starts with 0. The elements of an array are accessed using the index.
Program:
<html>
<head>
<title>Basic Javascript Array Example</title>
</head>
<body>
<script language="javascript">
var empty = [];
var fruits = ['apple', 'orange', 'kiwi'];
alert(fruits[1]);
</script>
</body>
</html>

2. Explain the different datatypes supported by JavaScript.


Data Type:
The data type is used to indicate the type of data value stored in a variable. The data type
of a variable is specified at the time of its declaration.
Data Types of JavaScript:
1. Boolean data type
2. String data type
3. Null data type
4. Number data type
1. Boolean Data Type:
This data type consists of two logical values.
➔ True
➔ False
Ex: var snowing = false;
2. String Data Type:
The information is written in double quotes.
Ex: var name = “Siddharth”;
var greeting = “Hello!”;
3. Null Data Type:
The user can use this data type when they does not want to initialize the value of a particular
variable.
Ex: var empno = null;
var age = null;
4. Number Data Type:
This data type is just the opposite of String data type. The value is declared without double
quotes.
Ex: var n1 = 30;
var weight = 65.75;
var sal = 20000;

3. What is an object? Explain various member functions of math object and date object.
Object:
An object is referred as a set of properties and methods. Properties are nothing but the
features and methods are nothing but the actions that are performed on the objects. The
properties can either be primitive data type or objects themselves. They can be added to the
objects even after they are created. Objects belonging to a class can have different
properties and methods.
Types of objects in JavaScript:
1. Math Object:
2. Date Object:
3. String Object:
4. Boolean Object:
5. Number Object:
Math Object:
Numerous mathematical functions are introduced by JavaScript to perform several
mathematical calculations. These mathematical functions or methods are entities of “Math”
object.
Syntax:
Math.methodname(numeric values);
Mathematical functions are:
i) min( ): Displays minimum of two numerical values.
Ex: document.writeln( min(2,5));
ii) max( ): Displays maximum of two numerical values.
Ex: document.writeln(max(2,5));
iii) abs( ): Displays the absolute value of the number entered into it.
Ex: document.writeln(abs(5));
iv) ceil( ): Displays the rounded value of the integer. The values displayed will be greater
than the value supplied.
Ex: document.writeln(ceil(5.2));
v) pow( ): Displays the power of the given number.
Ex: document.writeln(pow(2,3));
vi) round( ): Rounds the value entered to its nearest integer.
Ex: document.writeln(round(5.5));
vii) sqrt( ): Displays the square root of the given value.
Ex: document.writeln(sqrt(4));
viii) sin( ): Displays the sine value of the given numeric value.
Ex: document.writeln(sin(90));
viii) cos( ): Displays the consequent value of the given numeric value.
Ex: document.writeln(cos(0));
ix) tan( ): Displays the tangent value of the given numeric value.
Ex: document.writeln(tan(45));
x) exp( ): Displays exponential value of the number value.
Ex: document.writeln(exp(2));
xi) floor( ): Rounds the numeric value to the largest integer.
Ex: document.writeln(floor(5,2));
xii) log( ): Displays the logarithmic equivalent value for the numeric value.
Ex: document.writeln(log(2.718282));
Program:
<html>
<body>
<script type = "text/javascript">
var value = Math.abs( 4.5 );
document.writeln("First Value : " + value );
var value = Math.floor( 90.45 );
document.writeln("<br>Second Value : " + value );
var value = Math.sin( Math.PI/2 );
document.write("<br>Third Value : " + value );
</script>
</body>
</html>
Date Object:
Date/Time is recognized in two ways i.e., UTC (Universal Coordinated Time or Greenwich
Mean Time) and Local Time. UTC is a standard time followed through out the world. Local
time is the time of the system where the script is currently residing.
Syntax:
var currentdate = new date( );
The date( ) constructor in the above declaration is empty. Different values can e obtained
by passing parameters to this constructor.
Ex:
var currentdate = new date(“month, dd, yyyy”);
It returns a snapshot of system’s month, date and year values of that particular instant.
var currentdate = new date(“month, dd, yyyy, hh:mm:ss”);
It returns system’s month, date and year along with hours, minutes and seconds value of
that particular instant.
var currentdate = new date(yy, mm, dd);
It returns the current year, month and date values of the system.
var currentdate = new date(yy, mm, dd, hh, mm, ss);
It returns current year, month, date, hours, minutes and seconds values of the system.
var currentdate = (GMT milliseconds from 1/1/1970);
It returns the Greenwich Mean Time value.
The following methods are also supported by date object.
1) getFullyear( ) 2) getHours( ) 3) getMilliseconds 4) getDate( )
5) getDay( ) 6) getMonth( ) 7) getMinutes( ) 8) getTime( )
9) getSeconds( ) 10) setDate(1….31) 11) setFullyear(year[ , month, day])
12) setMilliseconds(ms) 13) setMinutes(min[ , secs ,ms]) 14)setSeconds(secs[ , ms])
15) setMonth(month[ , day]) 16) setTime(time) 17)toString( ) 18)toGMTString( )
19) toLocalString( )
Program:
<html>
<head>
<title> Working with Date object </title>
</head>
<body>
<script type="text/javaScript">
var mydate = new Date();
document.write("Today date is: " + mydate.getDate() + "/" + (mydate.getMonth()+1 ) +
"/" + mydate.getFullYear() + "<br/>");
document.write("The time is: " + mydate.getHours() + ":" + mydate.getMinutes() + ":"+
mydate.getSeconds() + "<br/>");
</script>
</body>
</html>

Unit 4
1. List and explain Mouse Events.
The following are the list of Mouse events.
➔ onClick
➔ onDblClick
➔ onDragDrop
➔ onMouseDown
➔ onMouseUp
➔ onMouseOut
➔ onMouseOver
1. onClick:
When an element or mouse is clicked, the onClick event handler calls the JavaScript
function. The specific JavaScript code or function is being executed on the occurrence of
the click event.
Program:
<html>
<head>
<script>
function fun()
{
alert("Welcome");
}
</script>
</head>
<body>
<h3> On Click Event </h3>
<p> Click the following button to see the effect. </p>
<button onclick = "fun()">Click me</button>
</body>
</html>
2. onDblClick:
This event occurs when the user double clicks on an object. onDblClick event is handled by
onDblClick event handler.
Program:
<html>
<head>
<title> On Double Click Event </title>
</head>
<body>
<h1 id = "heading" ondblclick = "fun()"> Hello world :):) </h1>
<h2> Double Click the text "Hello world" to see the effect. </h2>
<script>
function fun()
{
document.getElementById("heading").innerHTML = " Welcome to the javaTpoint.com ";
}
</script>
</body>
</html>
3. onDragDrop:
This event occurs when the user drags and drops the element at a different location.
Program:
<html>
<head>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="butterfly.jpg" draggable="true" ondragstart="drag(event)"
width="336" height="69"></body>
</html>
4. onMouseDown:
This event occurs when the mouse button is pressed down on an element. This event is
handled by the onMouseDown event handler.
Program:
<html>
<body>
<li> OnMouseDown Eventhandler :
<input type=text value="click mouse key, don't release" size=20
onMouseDown='alert("Mouse Down")'>
</body>
</html>
5. onMouseMove:
This event occurs when the pointer moves when it is on an element. This event is handled
by the onMouseMove event handler.
Program:
<html>
<body>
<li> onMouseMove Eventhandler:
Traverse the mouse through the text
<a href =" " onMouseMove='alert(" mouse traversed")'> Welcome </a>
</body>
</html>
6. onMouseOut:
This event occurs when the cursor leaves the element. The javascript code is called when
the cursor leaves the element.
Program:
<html>
<body>
<li> onMouseOut Eventhandler :
Place the mouse pointer here
<a href=" " onMouseOut='alert("Mouse Out")'> Welcome </a>
</body>
</html>
7. onMouseOver:
This event occurs when the mouse pointer is moved over an element. This event is handled
by the onMouseOver eventhandler.
Program:
<html>
<body>
<li> onMouseOver Eventhandler:
<a href=" " onMouseOver='alert("Mouse Over")'> Welcome </a>
</body>
</html>

2.Write short notes on Event and Event Handlers in JavaScript.


Event:
Responses made by the browser on account of user’s interactions are known as events.
Ex: Playing audio clip as soon as the page is loaded, generation of informative text as the
mouse pointer is moved through a region of the web page etc.
Event Handler:
The code for the requirement of the events to process is known as event handler. There are
two types of event handlers.
1. Interactive Event Handlers
2. Non – Interactive Event Handlers
1. Interactive Event Handlers:
The event handlers that simply depend on the user’s activity for them to be invoked are
interactive event handlers.
Ex: onClick, onBlur, onFocus etc.
2. Non – Interactive Event Handlers:
The event handlers that do not depend on the user’s for them to be invoked are non –
interactive event handlers.
Ex: onPageLoad
Types of Events:
There are two types of events.
1. Window Events
2. User Events
1. Window Events:
The events that occur as soon as something happens to the window. They occur when a page
loads or windows, when the focus moves to and from the window or frame.
2. User Events:
The events that occur when user interacts with page elements by using mouse or keyboard
or other pointing device.

Unit 5

1. Explain in detail about X-Query or XML Query.


XML Query Language:
Xquery is a functional programming language developed by working group of W3C
recommendation. It is a xml query language that has been designed for retrieving data
stored in xml database. This language is used for querying xml data as well as for
transforming both structured and unstructured data stored in xml database into various
other formats.
Benefits of Xquery:
1. It is expressive language that enables a user to type a query irrespective of the data
structure.
2. The statements are relatively very brief when compared to the statements in SQL.
3. It is a flexible language that enable the user to query hierarchical as well as tabular data.
4. It is a consistent language.
5. It can be used as a URL in both xml and HTML attributes.
Uses of Xquery:
1. It extracts data from database to use it in webservices.
2. It creates reports in a summarized form on data stored in data base.
3. It has the ability of transforming xml data into XHTML.
4. It uses the extracted data for integrating applications.
5. It divides a single document that performs multiple transactions into multiple documents.
6. It defines syntaxes for creating new xml documents.
7. It searches data from relevant text based documents.

2. Explain about XML – style sheets.


Style sheet can be defined as a form that species a set of layouts of document used in
either word processing or desktop publishing.
XML style sheet is a language that provides styles to XML document by using:
1. Extensible Stylesheet Language (XSL)
2. Extensible Stylesheet Language Transformation (XSLT)
3. Cascading Style Sheet (CSS)
1. Extensible Stylesheet Language (XSL):
XSL is a language capable of transforming as well as formatting given XML documents.
➔ It can format or structure XML data depending on the supplied values.
➔ It can sort or filter XML documents.
Various tasks by using XSL are
➢ Adding/deleting elements
➢ Sorting and filtering of XML elements
➢ Testing and making decisions about elements to included or deleted etc.
Ex:
Demo.xml
<?xsl-stylesheet type=”text/xsl” href=”Demo.xsl”?>
<menu>
<dvd>
<name> Don </name>
<actor> Prakash Chopra </actor>
<place> India </place>
<amount> Rs. 150 </amount>
<year of release> 2006 </year of release>
</dvd>
</menu>
Demo.xsl
<xsl:Stylesheet>
<xsl:template match=”/”>
<html>
<body>
<table border=”1”>
<tr>
<th> Name </th>
<th> Actor </th>
</tr>
<xsl: for each select = “menu/dvd”>
<tr>
<td><xsl:value of select=”name”/> </td>
<td><xsl:value of select=”actor”/> </td>
</tr>
</xsl:for each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
2. Extensible StyleSheet Language Transformation (XSLT):
XSLT is a declarative programming language that converts and restructures as XML
document to some other form such as HTML or CSV. The steps of transformation in XSLT
are performed using an XSLT processors.
➢ Takes the source document as input.
➢ Creates a “source tree” of the document.
➢ Processes the source tree as per the templates in XSLT style sheet.
➢ Generates a “result tree”.
➢ Creates the result document from the result tree.
Ex:
Books.xml
<Books>
<Book>
<Title> Web Technologies </Title>
<Author> XYZ </Author>
<Publisher> PQR </Publisher>
</Book>
</Books>
Books.xslt
<xsl:stylesheet
xmlns:xsl = “http://www.w3.org/1999/xsl/Transform”
version = “1.0”>
<xsl:template match=”/”>
<html>
<head>
<title> List of Books </title>
</head>
<body>
<h1>Books Details </h1>
</body>
</html>
</xsl:template>
<xsl:template match =”Books”>
<h2> <xsl:value_of select = “Title”/></h2>
<xsl:value_of select = “Author”/>
<xsl:value_of select = “Publisher”/>
</xsl:template>
</xsl:stylesheet>
Books.html
<html>
<head>
<tilte> List of Books </title>
</head>
<body>
<h1>Books Details </h1>
<h2> Web Technologies </h2>
ABC
PQR
</body>
</html>
3. Cascading Style Sheet (CSS)
CSS can be defined with XML as XSL for a given XML file.
Books.xml
<?xml version = “1.0” encoding =”ISO-8859-1”?>
<?xml-stylesheet type=”text/css” href=”catalog.css”>
<catalog>
<book>
<booktitle> Web Technologies </booktitle>
<author> ABC </author>
<amount> Rs.500 </amount>
</book>
</catalog>
Catalog.css
catalog {background-color:pink;
width:150%;}
book { display:block;
margin-bottom:20pt;
margin-left:0.5;}
booktitle { color:blue;
font-size:25pt;}
author {color:fuchsia;
font-size:25pt;}
amount {display:block;
color: purple;
margin-left:25pt;}

3. Explain XML Document Object Model (DOM).


XML Document Object Model (DOM) is an interface using which given programs/scrips
can dynamically alter the contents of a given XML document.
Features:
1. It is an Application Programming Interface (API) for XML document.
2. It allows user to access XML documents.
3. It allow user to change/modify XML documents.
4. It allow user to insert/delete XML documents.
5. It defines standard programming interface that allow user to work on any environment.
6. It provides a cross platform on which objects of XML document interact.
7. It defines objects and properties of XML element.
8. It defines objects and properties of XML document.
9. It specifies methods to access XML elements.
DOM Levels:
W3C has supplied certain specifications related to DOM which are claimed under various
levels. A few essentials corresponding to each of these levels are:
1. Essential Conditions at Level 0:
This level claimed all the specifications which existed even prior to DOM’s maturity.
Ex: DHTML object model
2. Essential Conditions at Level 1:
❖ Elements corresponding to HTML
❖ Content alteration
❖ Navigation of DOM document
3. Essential Conditions at Level 2:
❖ Support to events
❖ Support to views
❖ XML namespace
4. Essential Conditions at Level 3:
❖ Core
❖ Load and save, views and formatting
❖ Xpath
❖ Requirement and validations
Ex:
<table>
<tr> <tr>
<td> <td> <td> <td>
Apple Mango Grapes Orange

Program:
<table>
<tbody>
<tr>
<td>Apple</td>
<td>Mango</td>
</tr>
<tr>
<td>Grapes</td>
<td>Orange</td>
</tbody>
</table>

You might also like