You are on page 1of 35

PRACTICAL 1

INTRODUCTION TO HTML:

 HYPER TEXT MARKUP LANGUAGE(HTML):-


The language used to develop web pages is called Hyper Text Markup Language(HTML).
HTML is the language interpreted by a Browser. Web Pages are also called HTML
documents. HTML is a set of special codes that can be embedded in text to add formatting
and linking information. HTML is specified as TAGS in an HTML documents.

 HTML Tags:-
Tags are instructions that are embedded directly into the text of the document. An HTML tag
is a signal to a browser that it should do something other than just throw text up on the
screen. By convention all HTML tags begin with an open angle bracket (<) and end with a
close angle bracket (>).

HTML tags can be of two types:

 Paired Tags:-
A tag is said to be a paired tag. if it, along with a companion tag, the text. For example the
<B> tag is a paired tag. The <B> tag with its companion tag </B> causes the contained
between them to be rendered in bold. The effect of other paired tags is applied only to the
text they contain.

 Singular Tags:
The second type of tag is the singular or stand-alone tag does not have a companion tag. For
example <BR> tag will insert a line break. This tag does not require any companion tag.

COMMONLY USED HTML COMMANDS:

 The Structure of an HTML Program:-


Every HTML program has a rigid structure. The entire web page is enclosed within
<HTML> </HTML> tags. Within these two distinct sections are created using the<HEAD>
</HEAD> tags and the<BODY> </BODY> tags. These sections are described below:

 Document Head:-
Information placed in this section essential to the inner working of the document and
has nothing to do with the context document. With the exception of information
contained within the <TITLE> </TITLE> tags, all information placed within the

-1-
<HEAD> </HEAD> tags is not displayed in the browser. The HTML tags used to
indicate the start and end of the head section are:
<HEAD>
<TITLE>
E-COMMERCE
</TITLE>
</HEAD>

 Document Body:-
The tags used to indicate the start and end of the main body of textual information
are:
<BODY>
</BODY>

ATTRIBUTES OF THE <BODY> TAG:-

BGCOLOR: Change the default background color to whatever color is specified


with this tag. The user can specify a color by name or its equivalent
hexadecimal number.
BACKGROUND: Specifies the name of the Gif file that will be used as the background
of the document. This Gif file tiles up across the page to give a
background.
TEXT: Change the body text color from its default value to the color
specified with this attribute.

TITLES AND FOOTERS:

 Title:-
A web page could have a title describes what the page is about without being too wordly.
This can be achieved by using the TITLE tag. Text included between the <TITLE>
</TITLE> tag shows up in the title bar of the browser winder.
<TITLE>……………</TITLE>
 Footer:-
Just as a title can be placed in the title bar of the browser window, certain information is
commonly placed at the foot of the web page. Copyright information, contact details of the
creator of the web page and so on are the type of information traditionally placed at the foot
of the web page. The HTML tags are:
<ADDRESS>……………</ADDRESS>

This tag should ideally be immediately after the last line of the textual material of the web
page. However, it could also be placed anywhere in the body of the document. The text typed
within these tags always appears in Italics.

Example:
<HTML>

-2-
<HEAD>
<TITLE>
This is the title
</TITLE>
</HEAD>
<BODY>
<ADDRESS> This is the footer </ADDRESS>
</BODY>
</HTML>

TEXT FORMATTING:

 Paragraph Breaks:-
A blank line always separates paragraphs in the textual material. The tag that provides this
functionality is <P>. On encountering this tag, the browser moves onto a new line skipping
one line between the previous line and the new line.
<P>…………….</P>

 Line Breaks:-
When text needs to start from a new line and not continue on the same line the <BR> tag
should be used. This tag simply jumps to the start of the next line.
<BR>……………..</BR>

 Heading Styles:-
HTML supports six different levels of heading. The highest level header format is <H1> and
the lowest level is <H6>. All the styles appear in BOLDFACE and the size of the heading
depends on the level i.e. <H1> to <H6>.

 Drawing Lines:-
The tag <HR> draws lines and horizontal rules. This tag draws a horizontal line acroos the
whole page, whenever specified. The attributes to the <HR> tag are:

Attributes Description
ALIGN: Align the on the browser screen, which is by default, aligned to the
center of the screen.
ALIGN=LEFT will align the line to the left of the screen
ALIGN=RIGHT will align the line to the right of the screen
ALIGN=CENTER will align the line to the center of the screen
WIDTH: Sets the width of the rule. It can be set to a fixed number of pixels or to
a percentage of the available screen width.
SIZE: Changes the size of the rule.

TEXT STYLES:

-3-
 Bold:-
Displays text in BOLDFACE style. The tags used are
<B> …………… </B>
Example:
</B> Welcome </B>
Output: Welcome

 Italics:-
Displays text in ITALICS style. The tags used are
<I> …………… </I>
Example:
</I> Welcome </I>
Output: Welcome

 Underline:-
Displays text as UNDERLINED style. The tags used are
<U> …………… </U>
Example:
</U> Welcome </U>
Output: Welcome

OTHER TEXT EFFECTS:

 Centering (Text, Images etc.):-


<CENTER>……………</CENTER> tags are used to center everything found between them
i.e. text, list images, rules, tables or any other page document.

 Spacing (Indenting Text):-


The tag used for inserting blank spaces in an HTML document is <SPACER>. Its attributes
are:

TYPE: To specify whether space has to be left horizontally or vertically.


TYPE=”HORIZONTAL” indicates that horizontal space has to be
left.
TYPE=”VERTICAL” indicates that vertical space has to be left.
SIZE: Indicates the amount of space to be left. Size accepts any integer.

 Controlling Font Size and Color:-


All text specified within the tags <FONT> and </FONT> will appear in the font, size and
color as specified as attributes of the tag <FONT>. The attributes are:

FACE: Set the font to the specified font name.

-4-
SIZE: Sets the size of the text.
SIZE can take values between 1 and7. The default size is 3.
COLOR: Sets the color of the text. COLOR can be set to an English Language
color name or to a hexadecimal triplet.

LISTS:

TYPES OF LISTS:-

 Unordered Lists:-
An unordered list starts with the tag <UL> and ends with the tag </UL>. Each list item starts
with the tag <L1>. The attributes that can be specified with <L1> are:

TYPE: Specifies the type of the bullet.


TYPE=FILLROUND will give a solid round blank bullet.
TYPE=SQUARE will give a solid square black bullet.

 Ordered Lists:-
An ordered list starts with the tag <OL> and ends with </OL>. Each list items start with the
tag <L1>. The attributes that can be specified with <L1> are:

TYPE: Controls the numbering scheme to be used.


TYPE=”1” will give Counting Numbers (1,2,……….)
TYPE=”A” will give Uppercase Letters (A, B,…………)
TYPE=”a” will give Lowercase letters (a,b,……….)
TYPE=”I” will give Uppercase Roman Numerals (I,II,………..)
TYPE=”i” will give Lowercase Roman Numerals (I,ii,……….)
START: Alters the numbering sequence. Can be set to any numeric values.
VALUE: Change the numbering sequence in the middle of an ordered of an
ordered list. It is to be specified with the <L1> tag.

 Definition Lists:-
The definition list starts with the tag <DL> and ends with </DL>. The definition lists consists
of two parts:

Definition term: Appears after the tag <DT>.


Definition description: Appears after the tag <DD>.

-5-
PRACTICAL 2
INTRODUCTION TO TABLES IN HTML:

A table is a dimensional metrics, consisting of rows and columns. Tables are intended for
displaying data in columns on a web page. All tables related tags are included between the
<TABLES> </TABLES> tags. Each row of a table is described between the <TR> </TR> tags.
Each row of a table is described between the <TR> </TR> TAGS. Each column of a table is
described between the <TD> </TD> tags.

Table rows can be of two types:

 Header Rows:-
A tables header is defined using <TH> </TH> tags. The content of a table header row is
automatically centered and appear in boldface.

 Data Rows:-
There could be a single data cell(i.e. a single column table) or multiple data cell(i.e. a multi
column table). Data cells hold data that must be displaying in the table. A data row is defined
using <TR> </TR> tags . Text matter displayed in a data row is left justified by default. Any
special formatting like boldface or italics is done by including appropriate tags inside the
<TR> </TR> tags. An image can be displayed in a data cell.
The attributes that can be included in the <TABLE> tag are:

ALIGN: Horizontal alignment is controlled by the ALIGN attribute. It can be


set to LEFT, CENTER, or RIGHT.
VALIGN: Controls the vertical alignment of the cell content. It accepts the values TOP,
MIDDLE, or BOTTOM.
WIDTH: Sets the WIDTH to a specific number of pixels or to a percentage of the
available screen width. If width is not specified, the data cell is adjusted
based on the cell data value.
BORDER: Controls the border to be placed around the table. The border thickness is
specified in pixels.
CELLPADDING: This attribute controls the distance between the data in the cell and the
boundaries of the cell.
CELLSPACING: Controls the spacing between adjacent cells.
COLSPAN: The COLSPAN attribute inside a <TH> or <TD> tag instructs the browsers
to make the cell defined by the tag to take up more than one column. The
COLSPAN attribute can be set equal to the number of columns the cell is to
occupy. This attribute is useful when one row of the table needs to be a
certain number of columns wide.
ROWSPAN: The ROWSPAN attribute works in the same way as the COLSPAN attribute
except that it allows a cell to take up more than one row. The attribute can be

-6-
set by giving a numeric value.

 The Caption Tag:-

Often tables need to be given a heading, which gives the reader a context for the information
in the tables. Tables heading are called Captions. Captions can be provided to z table by
using the <CAPTION> </CAPTION> tags. This paired tag appears within the <TABLE>
</TABLE> tags.

ALIGN: It controls placing of the caption with respect to the table.


ALIGN=BOTTON will place the caption immediately below the table.
ALIGN=TOP will place the caption immediately above the table.

CREATE A TABLE DISPLAYING MARKS OF STUDENTS:

<HTML>
<HEAD>
<TITLE>TABLE ATTRIBUTE</TITLE>
</HEAD>
<BODY BGCOLOR="LIGHTYELLOW"><CENTER><b><U><FONT
COLOR="BLUE">CREATE A TABLE DISPLAYING MARKS OF
STUDENTS</FONT></U>
</b></CENTER>
<BR><BR><BR><BR>
<CENTER>
<Table border=1 width=75% align=center>
<TR>
<TH rowspan=2>SR NO.
<TH rowspan=2>NAME
<TH colspan=5>MARKS
</TR>
<TR>
<TH>WP
<TH>PAC
<TH>E-COM
<TH>DBMS
<TH>SAD
</TR>
<TR align=center>
<TD>1.
<TD>AMANDEEP K
<TD>35

-7-
<TD>40
<TD>42
<TD>38
<TD>43
</TR>
<TR align=center>
<TD>2.
<TD>AMANDEEP S
<TD>37
<TD>41
<TD>42
<TD>39
<TD>38
</TR>

<TR align=center>
<TD>3.
<TD>ASEEM
<TD>40
<TD>44
<TD>43
<TD>41
<TD>42
</TR>
<TR align=center>
<TD>4.
<TD>ISHAN
<TD>36
<TD>41
<TD>38
<TD>35
<TD>40
</TR><TR align=center>
<TD>5.
<TD>KUSHAL
<TD>42
<TD>45
<TD>44
<TD>42
<TD>44
</TR>
<CAPTION align=top><B><BR><font color="green">MARK
SHEET</font></B></CAPTION></TABLE>
</CENTER>
</BODY>
</HTML>

-8-
Table Output

-9-
PRACTICAL 3

INTRODUCTION TO FRAMES IN HTML:

Until now each web page when opened takes over the entire browser screen. The browser screen
could not split into separate sections, showing different but related information.

The HTML tags that divides a browser into screen into two or ore HTML recognizable unique
regions is the <FRAESET> </FRAMESET> tags. Each unique region is called a frame. Each
frame can be loaded with a different document and hence, allow multiple HTML document to be
concurrently.

The HTML frame is a powerful feature that enables a web page to be broken into different
unique sections that, although related, operate independently of each other.

 The <FRAMESET> tag:-


The splitting of a browser screen into frames is accomplished with the <FRAMESET> and
</FRAMESET> tags embedded into the HTML document. The <FRAMESET>
</FRAMESET> tags require on of the following two attributes depending on whether the
screen has to be divided into rows or columns.

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

 The <FRAME> tag:-


Once the browser screen is divided can rows and columns, each unique section defined can
be loaded with different HTML document. This is achieved by using the < FRAME> tag,
which takes in the following attributes:

- 10 -
SCR=”url”: Indicates the URL of the document to be loaded into the
frame.
MARGINHEIGHT=”n”: Specifies the amount of white space to be left at the top
and button of the frame.
MARGINWIDTH=”n”: Specifies the amount of white space to be left along the
sides of the frame.
NAME=”name”: Gives the frame a unique name so it can be targeted by
other document. The name given must begin with an
Alphanumeric character.
NORESIZE: Disables the frames resizing capability.
SCROLLING: Controls the appearances of horizontal and vertical
scroll bars in the frame. This takes the values
TES/NO/AUTO.

CREATE A FRAMESET USING HTML:

<HTML>
<HEAD>
<TITLE>FRAME ATTRIBUTE</TITLE>
</HEAD>
<FRAMESET ROWS="30%, 40%, 30 %">
<FRAMESET COLS="40%, 30%, 30 %">
<FRAME SRC="my website.html" SCROLLING="NO">
<FRAME SRC="introcomp.html" SCROLLING="NO">
<FRAME SRC=" industry organizations.html” SCROLLING="NO">
</FRAMESET>
<FRAMESET COLS="25%, 25%, 25%, 25 %">
<FRAME SRC="www.html" SCROLLING="NO">
<FRAME SRC="history.html" SCROLLING="NO">
<FRAME SRC="table.html">
<FRAME SRC="www.html" SCROLLING="NO">
</FRAMESET>
<FRAMESET COLS="50%, 50 %">
<FRAME SRC="industry organizations.html">
<FRAME SRC="introcomp.html"
</FRAMESET>
</FRAMESET>
</HTML>

- 11 -
Frame Output

- 12 -
PRACTICAL 4

INDRODUCTION TO LINKING DOCUMENTS IN HTML:

 LINKS
HTML allows linking to other HTML documents as well as images. Clicking on a section of
text or an image in one web page or an image. The text or an image that provides such
linkages is called Hypertext, a hyperlink or a hotspot.

The browser distinguishes Hyperlinks from normal text. Every Hyperlink,

 Appears blue in

• The default color setting in a browser for Hyperlink text or


image.
• The color can be set dynamically via an HTML program if
required.

 The hyperlink text/image is underlined.


 When the mouse cursor is placed over it, the standard arrow shaped mouse cursor
changes to the shape of a hand.

The blue color, which appears by default, can be over ridden. To change these link colors, there
are three attributes that can be specified with the <BODY> tag.
These are:

Changes the default color of a Hyperlink to whatever color is specified with


LINK: this tag. The user can specify the color name or an equivalent hexadecimal
number.
Changes the default color of a Hyperlink that is activated to whatever color
ALINK: is specified with this tag. The user can specify the color name or an
equivalent hexadecimal number.
Changes the default color of a Hyperlink that is already visited to whatever
VLINK: color is specified with this tag. The user can specify the color name or an
equivalent hexadecimal number.

Lists are created in a web page by using the <A></A> tags. Anything written between the
<A></A> tags become a hyperlink/hotspot. By clicking on the hyperlink navigation to a
different web page or image t6akes place.

- 13 -
The document to be navigated to needs to be specified. By using the HREF attribute of the <A>
tag the next navigable web page or image can be specified.

Syntax:
<A HREF=”filename.html”>

Hyperlinks can be of two types:


• Links to an external document
• Links to a specified place within same document
• Generally done in case of a web page containing a large amount of text

 External Document References


Example:
<A HREF=”details.html”> visit my page</A>
Here Visit my home page becomes a hyperlink and links to another document details.html,
which is present in the current working directory, if the file is not present in the current directory,
a relative or absolute path can be specified.

Step one:
Mark the location to be jumped to i.e. identify the location in a web page to jump to by giving
the location a name.

Using the Name attribute of the <> tag does this.

Syntax: <A NAME=”location_name”>

Example: <A NAME=”point1”>


This identifies a location to be jumped to as point 1.

Step two:
While jumping to a specific web page and a specific location on web page, in addition to the
name of web page to be jumped to the name of the location on the web page to go to is required.
A web page will really be contained in a HTML file. Hence the web page to jump to really
requires a file name.html, together with the name of the location to jump in the html file.
Syntax: <A HREF=”file_ name.html#location_name”>…………..</A>
Example: <A href=”details.html#point1”>visit my home page </A>

 Internal document references


Sometimes, a jump is required to a different location in the same document. Since the
jump has to be targeted to a specific location, the same two steps need to be performed as
before i.e. identity a location with name and then jump to that location using the name.
The only difference is that filename.html now will be the current filename.html.
Syntax: <A NAME=”location_name”>
<A HREF=”#location_name”>…………. </A>

- 14 -
CREATE A LINKING DOCUMENT:

<HTML>
<BODY vlink=orange alink=red>
<font face="Arial" color="green"><center><h4>Creating a Linking Document<br></font>
</CENTER></H4></font><p>
<font face="Comic Sans MS"color="BLACK">
<H2><B>For further information click on any one of the following:</B></H2><br>
<font face="Comic Sans MS">
<ul type=square><a href="biodata.html">
<li>ABOUT ME</a><p>
<a href="history.html">
<li>HISTORY OF IT </a><p>
<a href="industry organizations.html">
<li>INDUSTRY ORGANIZATIONS</a><hr><br>
<p>
<ul>
<font face="Arial" color="brown">
<b><i>Contact us at College Address :</i></b><br>
<br>
<font face="Arial” color="blue">
<b>05-IT<br>
L.L.R.I.E.T<br>
Moga<br>
</b></ul></font
</BODY>
</HTML>

- 15 -
Linking Output

- 16 -
PRACTICAL 5
INTRODUCTION TO FORMS IN HTML:

FORMS:
An HTML form provides data gathering functionality to a web page. HTML forms provide a
full range of GUI controls.Additionally,HTML forms can automatically submit data collected in
its controls to a web server.
HTML provides the <FORM> … /FORM> tags with which an html form can be created to
capture user input.
Each form object in the html page will be described between its own <FORM> … <FORM>
HTML tags.

The form object has properties like Name, Method and Action.
o Name:
The Name attribute specifies the name of the form being created.
o Method:
The Method property of a form is used to specify the method used to send data captured by
various form elements back to the web server. It can accept two possible value-post or Get.
POST method includes the form data in the body of the form and sends it to the web server.
GET method appends the data to the url specified in the action attribute and most often used
for searching.
o Action:
Action attribute, which is required, specifies the url to the server side script including the
filename also that will process the form when it is submitted. It is very much important that
the script with the name you have entered is present on your web server at the location the url
specifies.

Form controls:

Form controls are special HTML elements used in a form that allow you to gather information
from a person viewing your web page. The information is collected into a dataset that is sent to
the location of the action attribute when the form is submitted.
 TEXTBOX: This control is used to get the user input.
 TEXT
 CHECKBOX: It is a form element that boxes like a small box. Clicking on the checkbox
switches between checked and unchecked static, which is useful for indication yes or no
choices in your form. A checkbox is very simple and it has only two states.
 RADIO BUTTON: The Radio buttons are similar to checkbox but they exist in groups
& only one button can be checked in each group. They are used for one of many inputs.

- 17 -
 DROP DOWN LIST: This form element is used for multiple-choice selections. The
select tag is used to define selection or a drop down list of text items.
 BUTTON: It is a generic button. The buttons performs no action on its own. But you can
assign it one using a java script event handler.
Create a web page to demonstrate the use of form * its various elements

<HTML>
<HEAD>
<TITLE> Form Example </TITLE>
</HEAD>
<BODY bgcolor = “ pink”>
<Form>
Enter your name <input type = “text”>
<BR>
Type your password <input type = “password”>
<HR>
Topping for your Pizza:
<Input name= “Cheese” type= “checkbox” checked>cheese <BR>
<Input name =”Onion” type=”checkbox” > Onion <BR>
<Input name =”Pineapple” type=”checkbox” > Pineapple <BR>
Crust;
<Input name =”Crust” type=”radio” value = “thin”>thin <BR>
<Input name =”Crust” type=”radio” value = “Deep Dish”>Deep Dish<BR>
Please Select the store
<Select multiple><option selected>A &nbsp;
</option>
<option> B &nbsp</option>
<option> C &nbsp</option>
<option> D &nbsp</option>
<option> E &nbsp</option>
<option> G &nbsp</option>
</select <HR>

Please include any special char : <BR>


<TEXTAREA name = “ABC” rows 13,15>Directed
</TEXTAREA><BR>
<Input Type = “ rest” value = “next form”>Rest
<Input Type = “Submit” Value = “Send Form”> Send
</form>
</body>
</html>

- 18 -
Form Output

- 19 -
PRACTICAL 6
INTRODUCTION TO JAVASCRIPT:

What is JavaScript?

• JavaScript was designed to add interactivity to HTML pages


• JavaScript is a scripting language
• A scripting language is a lightweight programming language
• A JavaScript consists of lines of executable computer code
• A JavaScript is usually embedded directly into HTML pages
• JavaScript is an interpreted language (means that scripts execute without preliminary
compilation)
• Everyone can use JavaScript without purchasing a license

Are Java and JavaScript the Same?


Java and JavaScript are two completely different languages in both concept and design!
Java (developed by Sun Microsystems) is a powerful and much more complex programming
language - in the same category as C and C++.

What can a JavaScript Do?

• JavaScript gives HTML designers a programming tool - HTML authors are normally
not programmers, but JavaScript is a scripting language with a very simple syntax!
Almost anyone can put small "snippets" of code into their HTML pages
• JavaScript can put dynamic text into an HTML page - A JavaScript statement like
this: document. write("<h1>" + name + "</h1>") can write a variable text into an HTML
page
• JavaScript can react to events - A JavaScript can be set to execute when something
happens, like when a page has finished loading or when a user clicks on an HTML
element
• JavaScript can read and write HTML elements - A JavaScript can read and change the
content of an HTML element
• JavaScript can be used to validate data - A JavaScript can be used to validate form
data before it is submitted to a server. This saves the server from extra processing
• JavaScript can be used to detect the visitor's browser - A JavaScript can be used to
detect the visitor's browser, and - depending on the browser - load another page
specifically designed for that browser

- 20 -
• JavaScript can be used to create cookies - A JavaScript can be used to store and
retrieve information on the visitor's computer

Examples

How to Put a JavaScript Into an HTML Page

<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>

The code above will produce this output on an HTML page:


Hello World!

JavaScript Code
JavaScript code (or just JavaScript) is a sequence of JavaScript statements.
Each statement is executed by the browser in the sequence they are written.
This example will write a header and two paragraphs to a web page:

<script type="text/javascript">
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
</script>

JavaScript Comments
Comments can be added to explain the JavaScript, or to make it more readable.
Single line comments start with //.
This example uses single line comments to explain the code:

<script type="text/javascript">
// This will write a header:
document.write("<h1>This is a header</h1>");
// This will write two paragraphs:
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
</script>

- 21 -
JavaScript Multi-Line Comments
Multi line comments start with /* and end with */.
This example uses a multi line comment to explain the code:

<script type="text/javascript">
/*
The code below will write
one header and two paragraphs
*/
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
</script>

Using Comments at the End of a Line


In this example the comment is placed at the end of a line:

<script type="text/javascript">
document.write("Hello"); // This will write "Hello"
document.write("Dolly"); // This will write "Dolly"
</script>

JavaScript Variables
As with algebra, JavaScript variables are used to hold values or expressions.
A variable can have a short name, like x, or a more describing name like length.
A JavaScript variable can also hold a text value like in carname="Volvo".
Rules for JavaScript variable names:

• Variable names are case sensitive (y and Y are two different variables)
• Variable names must begin with a letter or the underscore character

Declaring (Creating) JavaScript Variables


Creating variables in JavaScript is most often referred to as "declaring" variables.
You can declare JavaScript variables with the var statement:

var x;
var carname;

- 22 -
After the declaration shown above, the variables has no values, but you can assign values to the
variables while you declare them:

var x=5;
var carname="Volvo";

Assigning Values to JavaScript Variables


You assign values to JavaScript variables with assignment statements:

x=5;
carname="Volvo";

The variable name is on the left side of the = sign, and the value you want to assign to the
variable is on the right.
After the execution of the statements above, the variable x will hold the value 5, and carname
will hold the value Volvo.

JavaScript Arithmetic Operators


Arithmetic operators are used to perform arithmetic between variables and/or values.
Given that y=5, the table below explains the arithmetic operators:

Operator Description Example Result


+ Addition x=y+2 x=7
- Subtraction x=y-2 x=3
* Multiplication x=y*2 x=10
/ Division x=y/2 x=2.5
% Modulus (division remainder) x=y%2 x=1
++ Increment x=++y x=6
-- Decrement x=--y x=4

JavaScript Assignment Operators


Assignment operators are used to assign values to JavaScript variables.
Given that x=10 and y=5, the table below explains the assignment operators:

Operator Example Same As Result


= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50

- 23 -
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0

Adding Strings and Numbers


Look at these examples:

x=5+5;
document.write(x);

x="5"+"5";
document.write(x);

x=5+"5";
document.write(x);

x="5"+5;
document.write(x);

Cookie
Cookies are employed when you use your browser to visit web sites on the Internet. The
two main browsers, Internet Explorer and Netscape Navigator, both allow the use of cookies.
Cookie files allow a web server to store information about you on your computer, and to retrieve
that information to identify you in the future.
A cookie is a tiny piece of text that is placed on your hard drive. Its job is to record bits of
information such as the pages you've visited, items you've put into an online shopping cart, your
user name and password. A cookie is a variable that is stored on the visitor's computer. Each
time the same computer requests a page with a browser, it will send the cookie too. With
JavaScript, you can both create and retrieve cookie values.

- 24 -
PRACTICAL 7
CREATE A FORM TO DISPLAY NEW WINDOW IN JAVASCRIPT:

<html>
<head>
<script language="javascript">
function display()
{
dispwin=window.open('','newwin','toolbar=no,status=no,width=300,height=250,captionbar=no')
message1="<Ul><li><b>NAME</b></ul>"+document.form1.yourname.value;
message2="<ul><li><b>ADDRESS</b></ul>"+document.form1.address.value;
message3="<ul><li><b>PHONE</b></UL>"+document.form1.phone.value;
dispwin.document.write(message1);
dispwin.document.write(message2);
dispwin.document.write(message3);
}
</script>
</head>
<body>
<h1>Form example</h1>
<h3>enter the following information.when you press the display button,the data you entered will
be displayed in a pop-up
window</h3>
<form name=form1 ><PRE>
NAME <input type="text" name="yourname">
ADDRESS<input type="text" name="address">
PHONE <input type="text" name="phone">
<input type="button" value="display"
onclick=display()>
</body>
</form>
</html>

- 25 -
Form Output in JavaScript

- 26 -
PRACTICAL 8
CREATE A PROGRAM TO DISPLAY ARRAY IN JAVASCRIPT:

<br>
<script language="javascript">
aman=new Array(5)
aman[0]="ankush"
aman[1]="aman"
aman[2]="sood"
aman[3]="karam"
aman[4]="kamal"
for(i=0;i<=4;i++)
{
document.write( " name no. "+ i + "&nbsp;" + aman[i] + "<br>")
}
</script>

Array Output

- 27 -
PRACTICAL 9
INTRODUCTION TO ASP(ACTIVE SERVER PAGES):

CLIENT

VB SCRIPT
ACTIVEX DATA
OBJECT IIS
J SCRIPT

ACTIVEX SCRIPTING

- 28 -
DATABASE ASP FILE

PROCESSING OF AN ACTIVE SERVER PAGE REQUEST

ASP :
The client request the page for eg.aman.asp from server.the web server checks the title extension
to see whether a special program must be invoked to process the request.if there is an.asp
extension,the web server invoke asp to process this page.
The page might be read from cache.during the parsing process,html & scripting codes are
separated.IIS determine which scripting engine is responsible for which of the script.
Now the code is executed by scripting engine using resources from IIS, which is hosting the
scripting engines.ACTIVEX objects are created & used inside the script.if it is not able to supply
object,an error is generated.
Script output and static html code in asp file are merged.
The final html is sent back to user in http response.

Request object and Response object:

Response object:

The ASP Response object is used to send output to the user from the server. Its collections,
properties, and methods are described below:

Collection
Collection Description
Cookies Sets a cookie value. If the cookie does not exist, it will be created, and take the value
that is specified

Properties
Property Description
Buffer Specifies whether to buffer the page output or not
CacheControl Sets whether a proxy server can cache the output generated by ASP or not

- 29 -
Charset Appends the name of a character-set to the content-type header in the Response object
ContentType Sets the HTTP content type for the Response object
Expires Sets how long (in minutes) a page will be cached on a browser before it expires

ExpiresAbsolute Sets a date and time when a page cached on a browser will expire

IsClientConnected Indicates if the client has disconnected from the server


Pics Appends a value to the PICS label response header
Status Specifies the value of the status line returned by the server

Methods
Method Description
AddHeader Adds a new HTTP header and a value to the HTTP response
AppendToLog Adds a string to the end of the server log entry
BinaryWrite Writes data directly to the output without any character conversion
Clear Clears any buffered HTML output
End Stops processing a script, and returns the current result
Flush Sends buffered HTML output immediately
Redirect Redirects the user to a different URL
Write Writes a specified string to the output

Request object:

When a browser asks for a page from a server, it is called a request. The ASP Request object is
used to get information from the user. Its collections, properties, and methods are described
below:

Collections

Collection Description
ClientCertificate Contains all the field values stored in the client certificate
Cookies Contains all the cookie values sent in a HTTP request
Form Contains all the form (input) values from a form that uses the post method
QueryString Contains all the variable values in a HTTP query string
ServerVariables Contains all the server variable values

Properties

Property Description
TotalBytes Returns the total number of bytes the client sent in the body of the request

- 30 -
Methods

Method Description
BinaryRead Retrieves the data sent to the server from the client as part of a post request and stores it
in a safe array

PRACTICAL 10
INTRODUCTION TO XML(EXTENSIBLE MARKUP LANGUAGE):

Extensible Markup Language

File extension .xml

application/xml, text/xml
MIME type (deprecated)

Uniform Type
public.xml
Identifier

Developed by World Wide Web Consortium

Type of format Markup language

Extended from SGML

- 31 -
Extended to XHTML, RSS, Atom, ...

The Extensible Markup Language (XML) is a general-purpose specification for creating custom
languages. It is classified as an extensible language because it allows its users to define their own
elements. Its primary purpose is to facilitate the sharing of structured data across different
information systems, particularly via the Internet and it is used both to encode documents and to
serialize data.

• XML stands for Extensible Markup Language


• XML is a markup language much like HTML
• XML was designed to carry data, not to display data
• XML tags are not predefined. You must define your own tags
• XML is designed to be self-descriptive
• XML is a W3C Recommendation

Well-formsed and valid XML document


There are two levels of correctness of an XML document:

• Well-formed. A well-formed document conforms to all of XML's syntax rules. For


example, if a start-tag appears without a corresponding end-tag, it is not well-formed. A
document that is not well-formed is not considered to be XML; a conforming parser is
not allowed to process it.
• Valid. A valid document additionally conforms to some semantic rules. These rules are
either user-defined, or included as an XML schema or DTD. For example, if a document
contains an undefined element, then it is not valid; a validating parser is not allowed to
process it.

Well Formed XML Documents


A "Well Formed" XML document has correct XML syntax.
The syntax rules were described in the previous chapters:

• XML documents must have a root element


• XML elements must have a closing tag
• XML tags are case sensitive
• XML elements must be properly nested
• XML attribute values must be quoted

<?xml version="1.0" encoding="ISO-8859-1"?>


<note>

- 32 -
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

Valid XML Documents


A "Valid" XML document is a "Well Formed" XML document, which also conforms to the rules
of a Document Type Definition (DTD):

<?xml version="1.0" encoding="ISO-8859-1"?>


<!DOCTYPE note SYSTEM "Note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

What is an XML Element?


An XML document contains XML Elements An XML element is everything from (including)
the element's start tag to (including) the element's end tag.
An element can contain other elements, simple text or a mixture of both. Elements can also have
attributes.

<bookstore>
<book category="CHILDREN">
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="WEB">
<title>Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>

In the example above, <bookstore> and <book> have element contents, because they contain
other elements. <author> has text content because it contains text.

- 33 -
In the example above only <book> has an attribute (category="CHILDREN").

XML Attributes
From HTML you will remember this: <img src="computer.gif">. The "src" attribute provides
additional information about the <img> element.
In HTML (and in XML) attributes provide additional information about elements:

<img src="computer.gif">
<a href="demo.asp">

Attributes often provide information that is not a part of the data. In the example below, the file
type is irrelevant to the data, but important to the software that wants to manipulate the element:

<file type="gif">computer.gif</file>

XML DTD
The purpose of a DTD is to define the structure of an XML document. It defines the structure
with a list of legal elements:

<!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>

Advantages of XML
• It is text-based.
• It supports Unicode, allowing almost any information in any written human language to
be communicated.
• It can represent common computer science data structures: records, lists and trees.
• Its self-documenting format describes structure and field names as well as specific
values.
• The strict syntax and parsing requirements make the necessary parsing algorithms
extremely simple, efficient, and consistent.
• XML is heavily used as a format for document storage and processing, both online and
offline.
• It is based on international standards.
• It can be updated incrementally.

- 34 -
• It allows validation using schema languages such as XSD and Schematron, which makes
effective unit-testing, firewalls, acceptance testing, contractual specification and software
construction easier.
• The hierarchical structure is suitable for most (but not all) types of documents.
• It is platform-independent, thus relatively immune to changes in technology.
• Forward and backward compatibility are relatively easy to maintain despite changes in
DTD or Schema.
• Its predecessor, SGML, has been in use since 1986, so there is extensive experience and
software available.
• An element fragment of a well-formed XML document is also a well-formed XML
document.

Disadvantages of XML
• XML syntax is redundant or large relative to binary representations of similar data,
especially with tabular data.
• The redundancy may affect application efficiency through higher storage, transmission
and processing costs.
• XML syntax is verbose, especially for human readers, relative to other alternative 'text-
based' data transmission formats.
• The hierarchical model for representation is limited in comparison to an object oriented
graph.
• Expressing overlapping (non-hierarchical) node relationships requires extra effort.
• XML namespaces are problematic to use and namespace support can be difficult to
correctly implement in an XML parser.
• XML is commonly depicted as "self-documenting" but this depiction ignores critical
ambiguities.
• The distinction between content and attributes in XML seems unnatural to some and
makes designing XML data structures harder.

- 35 -

You might also like