List of Experiments

List of Experiments
S. No. Experiment Date Sign.
1 Introduction to HTML and XHTML
2 Basic Tags in HTML.
3 Write a program to create lists.
4 Introduction to CSS.
5 Write a program to create menu using HTML and CSS.
6 Introduction to JavaScript.
7 Write a program to print date using JavaScript.
Write a program to Sum and Multiply two numbers using Java

8
Script.
9 Write a program to Show use of alert, confirm and prompt Box
10 Write a program to redirect, popup and print function in Java Script.
11 Create validation Form in JavaScript.
12 Introduction to Ajax.
13 Write a program to change content of web page using ajax.
14 Write a program to create XML Http Request.
15 Introduction to php.
16 Write a program to Addition of two numbers using php.
17 Write a program to show data types in php.
18 Write a program to using class in php.
19 Introduction to Java Server Page.
20 Introduction to Java Server Page Syntax.

Experiment-01
AIM: Introduction to HTML and XHTML
HTML is a markup language. It tells the web browser what content to display. HTML separates
"content" (words, images, audio, video, and so on) from "presentation" (the definition of the type of
content and the instructions for how that type of content should be displayed). HTML uses a pre-defined
set of elements to identify content types. Elements contain one or more "tags" that contain or express
content. Tags are surrounded by angle brackets, and the "closing" tag (the one that indicates the end of
the content) is prefixed by a forward slash.
For example, the paragraph element consists of the start tag "<p>" and the closing tag "</p>". The
following example shows a paragraph contained within the HTML paragraph element:
<p>You are beginning to learn HTML.</p>
When this content is displayed in a web browser, it looks like this:
You are beginning to learn HTML.
Elements — the basic building blocks
HTML consists of a set of elements. Elements define the semantic meaning of their content. Elements
include everything between two matching element tags, including the tags themselves.
A very simple but complete web page looks like this:
<html>
<body>
<p> you are in your begining stage of HTM</p> </body>
</html>
Tags
HTML documents are written in plain text. They can be written in any text editor that allows content to
be saved as plain text, such as Notepad, Notepad++, or Sublime, but most HTML authors prefer to use
a specialized editor that highlights syntax and shows the DOM. Tag names may be written in either
upper or lower case.
This is an an example of valid code:
<em>I <strong>really</strong> mean that</em>.
XHTML
XHTML stands for Extensible HyperText Markup Language and is the next step in the evolution of the
Internet. The XHTML 1.0 is the first document type in the XHTML family.
XHTML was developed by the W3C to help web developers make the transition from HTML to XML.
By migrating to XHTML today, web developers can enter the XML world with all of its attendant
benefits, while still remaining confident in their content's backward and future compatibility.
Developers who migrate their content to XHTML 1.0 will realize the following benefits:
XHTML documents are XML conforming. As such, they are readily viewed, edited, and validated with
standard XML tools. XHTML documents can be written to operate better than they did before in
existing browsers as well as in new browsers. XHTML documents can utilize applications like scripts
and applets that rely upon either the HTML Document Object Model or the XML Document Object
Model.
1. All tag and attribute names must be in lowercase. Thus, you can't write
<A HREF="foo.html">...</A>
but must instead write this in lowercase, as :
<a href="foo.html">...</a>
2. "Empty" tags must be written with an extra slash at the end.

An empty tag is one like <br> or <img src="foo.html"> that doesn't have a </br> or <img> to end it. In
XHTML, such tags must
be written as: <br />, and <img src="foo.gif" />.
3. You can never omit an end tag. With HTML, you could
sometimes leave off an end tag, as in
<p> ..... paragraph text
<p> ..... more paragraph text
With XHTML, you must always put in the end tag, so that the preceding must be written as:
<p> ..... paragraph text </p>
<p> ..... more paragraph text </p>
4. Attributes must always have a value. In HTML you can sometimes omit atttibute values, as in
<hr size="2" noshade>
in XHTML, this would need to be written as:
<hr size="2" noshade="noshade" />
5. Attributes values must always be quoted.. In HTML you can sometimes omit the quotes,as in
<hr size=2>
in XHTML, this would need to be written as:
<hr size="2" />
Experiment-02
AIM: Basic Tags in HTML
<html>
<head>
<title>this is my first page</title> <body bgcolor=pink> <h1>welcome to html</h1><br/> <b>tag for
bold</b><br/>
<i>tag for italic</b><br/> <u>tag for underline</u><br/> <del>tag for delete</del><br/> <h2>creating
tables</h2> <table border="2">
<th>table head</th> <tr> <td>row1</td> <td>row2</td> </tr>
</table>
<h2>creating text box</h2> <input type="text" name"text"> password
<input type="password" name="pws"><br/> radio button<br/>

male<input type="radio" name="male">
female<input type="radio" name="female"> </br>
checkbox<br/>
bike<input type=checkbox" name="bike"><br/> car<input type="check box" name="car"><br/>
submit button<br/>
<input type="submit" value="submit"><br/> select box<br/>
<select>
<option>one </option> <option> two </option> <option>three </option> <option>four </option>
</select>
</body>
</html>
Experiment-03
AIM: Write a program to create lists.
<html>
<body>
<p><b><u> Ordered List</b></u> </p> <ol>
<li>a</li>
<li>s</li>
</ol>
<p><b><u> Unordered List</b></u> </p> <ul>
<li>a</li>
<li>s</li>
</ul>
<p><b><u> Nested List</b></u> </p> <OL TYPE = A START =3>
<LI> Fruits
<OL TYPE = I>
<LI> Apple
<LI> MANGO
<LI> Orange
Page 20 of 115 </OL>
<LI> VEGETABLES <OL TYPE = I>
<LI> Brinjal
<LI> Cabbage
<LI> Tomato </OL>
</OL>
<p><b><u> Definition List </b></u></p> <dl>
<dt> Coffee </dt>
<dd> Black Hot Drink </dd> <dt> Milk </dt>
<dd> White Cold Drink </dd>
</dl>
</body>
</html>
Experiment-04
AIM: Introduction to CSS.
Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting
of a document written in a markup language. While most often used to style web pages and interfaces
written in HTML and XHTML, the language can be applied to any kind of XML document, including
plain XML, SVG and XUL.
CSS is designed primarily to enable the separation of document content from document presentation,
including elements such as the layout, colors, and fonts.[1] This separation can improve content
accessibility, provide more flexibility and control in the specification of presentation characteristics,
enable multiple pages to share formatting, and reduce complexity and repetition in the structural content
(such as by allowing for table less web design
Example:-
<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="cs.css" />
<style type="text/css">
.di
{
background-color:#99FF00; margin-left:300px; width:100px;
height:100px;
}
.mm
{
background-color:#660099; width:200px; height:100px;
}
#mn
{
background-color:#3333FF; margin-left:500px; width:300px;
height:300px;
}
#ss
{
background-color:#3333FF;
width:300px;
height:100px;
}
</style>
</head>
<body>
<div id="container">
<h1>Inline CSS</h1>
<p style="color:#FF0000; margin-left:20px; font-size:14px; background-color:#CCFF00;

width:500px; height:300px">
Inline CSS exaple for background color, font size, margin-left and for width.</p>
<h1>internal CSS</h1>
<div class="di">
<table border="2">
<tr>
<td>row1</td>
<td>row2</td>
</tr>
</table>
</div>
<div class="mm">text box
<input type="text" name="text" style=" color:#00FF33; background-color:#FF0000; font-size:18px">
</div>
<div id="mn">
<h1>introduction</h1><br/>
<b>tag for bold</b><br/>
<h2>about clg</h2><br/>
<h3>create options</h3>
passwords
<input type="password"rollno="pws"><br/>
</div><br/>
<br/>
<h1>external css</h1>
<p class="ab">external css</p>
</div>
<p id="sm">example for external css </p>
</div>
</body>
</html>
Experiment-05
AIM: Write a program to create menu using HTML and CSS.
<html>
<head> <title>menu</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body> <ul><li>Home</li>
<li>About</li>
<li>
Portfolio
<ul>
<li>Web Design</li> <li>Web Development</li> <li>Illustrations</li>
</ul>
</li> <li>Blog
<ul>
<li>Web Design</li> <li>Web Development</li> <li>Illustrations</li>
</ul></li> <li>Contact</li>
<li>Facilities</li> <li>Downloads
<ul><li>apendix c</li> <li>apendix d</li> <li>apendix g</li>
</ul>
</li>
</ul>
</body>
</html>
External CSS Coding.
body {
font-family: Arial, Helvetica, sans-serif, Helvetica, Arial, sans-serif; padding: 20px 50px 150px;
font-size: 13px; text-align: center; background: #E3CAA1;
}
ul {
text-align: left; display: inline; margin: 0;
padding: 15px 4px 17px 0; list-style: none;
}
ul li {
font: bold 12px/18px sans-serif; display: inline-block; margin-right: -4px;
position: relative; padding: 15px 20px; background: #fff; cursor: pointer;
}
ul li:hover { background: #555; color: #fff;
}
ul li ul { padding: 0;
position: absolute; top: 48px;
left: 0; width: 150px; opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #CCCC33; display: block;
color: #FF0000; text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #9966CC; } ul li:hover ul {
display: block; opacity: 1; visibility: visible;}
Experiment-06
AIM: Introduction to JavaScript.
What Exactly Is JavaScript?
JavaScript is a scripting language designed primarily for adding interactivity to Web pages and
creating Web applications. The language was first implemented by Netscape Communications Corp. in
Netscape Navigator 2 beta (1995). JavaScript is different from the Java language (developed in the
1990s at Sun Microsystems). However, the two languages can interoperate well. Client-side JavaScript
programs, or scripts, can be embedded directly in HTML source of Web pages. (Note: There is also
server-side JavaScript, but it's beyond the scope of this FAQ collection.) Depending on the Web
developer's intent, script code may run when the user opens the Web page, clicks or drags some page
element with the mouse, types something on the keyboard, submits a form, or leaves the page.
JavaScript is an object-oriented language with prototypal inheritance. The language supports several
built-in objects, and programmers can create or delete their own objects. Prototypal inheritance makes
JavaScript very different from other popular programming languages such as C++, C#, or Java featuring
classes and classical inheritance. JavaScript does not have classes in the C++ or Java sense. In
JavaScript, objects can inherit properties directly from each other, forming the object prototype chain.
JavaScript is widely supported. It is available in the following browsers:
Netscape Navigator (beginning with version 2.0)

Microsoft Internet Explorer (beginning with version 3.0)
Firefox
Opera
Google Chrome
Any other browser whose vendor licensed or implemented JavaScript.

Experiment-07
AIM: Write a program to print date using JavaScript.
<!DOCTYPE html> <html>
<body>
<h1>My First JavaScript</h1>
<p>Click the button to display the date.</p> <p id="demo"></p>
<button type="button" onclick="myFunction()">print date</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
Experiment-08
AIM: Write a program to Sum and multiply two numbers using JavaScript.
<html>
<head>
<script>
function myFunction() {
var y = document.getElementById("txt1").value; var z = document.getElementById("txt2").value; var
x = +y + +z; document.getElementById("demo").innerHTML = x;
}
function mul() {
var y = document.getElementById("txt1").value; var z = document.getElementById("txt2").value; var
x = +y * +z; document.getElementById("demo").innerHTML = x;
}
</script>
</head>
<body>
<p>Click the button to calculate.</p>
<br/>
<br/>Enter first number:
<input type="text" id="txt1" name="text1" size="6px">Enter second number:
<input type="text" id="txt2" name="text2" size="6px"><br>
<button onClick="myFunction()">SUM</button> <button
onClick="mul()">Multiply</button>
<p id="demo"></p> </body>
</html>
Experiment-09
AIM: Write a program to Show use of alert, confirm and prompt box.
<html>
<head>
<title>java script</title>
<script type="text/javascript">  </script>
</head>
<body>
<h1 align="center"> Java Script Alert, Confirm and Prompt Box. </h1>
<form style="height:200px; width:200px; background-color:#CC3366;">
<h3> Java Script Alert Box.</h3>
<input type="button" onclick="alert('Are you sure you want to give us the deed to your house?')"
value="Confirmation Alert"> </form>
<form style="height:200px; width:210px; background-color:#FF9999; margin-top:-220px; margin-
left:300px"> <h3> Java Script Confirm Box.</h3>
<input type="button" onClick="confirmation()" value="Fb Login">
</form>
<div style=" margin-top:-220px; background-color:#00FF66; height:200px; width:200px; margin-
left:600px;">
<h3> Java Script Prompt Box.</h3>
<input type="button" onclick="prompter()" value="Say my name!">
</div>
</body>
</html>
Experiment-10
AIM: Write a program to redirect, popup and print function in JavaScript.
<html>
<head>
<title>java script</title>
<script type="text/javascript">  </script>
</head>
<body onLoad="setTimeout('delayer()', 5000)"> <h1> Redirect, Popup and Print Function using java
script</h1>
<h2>Prepare to be redirected!</h2>
<p>This page is a time delay redirect, please update your bookmarks to our new
location!</p>
<form style="height:200px; width:210px; background-color:#FF9999;">

<h3> Java Script Popup Box.</h3>
<input type="button" onClick="myPopup2()" value="POP2!"> </form>
<p onClick="myPopup2()">CLICK ME TOO!</p>
<form>
<input type="button" value="Print This Page" onClick="window.print()" />
</form>
</body>
</html>
Experiment-11
AIM: Create validation Form in JavaScript.
<html>
<head>
<script type='text/javascript'>
function formValidator(){
// Make quick references to our fields
var firstname = document.getElementById('firstname'); var addr = document.getElementById('addr');
var zip = document.getElementById('zip');
var state = document.getElementById('state');
var username = document.getElementById('username'); var email =
document.getElementById('email');
// Check each input in the order that it appears in the form!
if(isAlphabet(firstname, "Please enter only letters for your name")){
if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){
if(isNumeric(zip, "Please enter a valid zip
code")){
if(madeSelection(state, "Please Choose
a State")){
if(lengthRestriction(username, 6,
8)){
if(emailValidator(email, "Please enter a valid
email address")){
return true;
}
}
}
}
}
}
return false;
}
function notEmpty(joshi, helperMsg){ if(joshi.value.length == 0){

alert(helperMsg);
joshi.focus(); // set the focus to this input return false;
}
return true;
}
function isNumeric(joshi, helperMsg){ var numericExpression = /^[0-9]+$/;

if(joshi.value.match(numericExpression)){ return true;
}else{
alert(helperMsg);
joshi.focus(); return false;
}
}
function isAlphabet(joshi, helperMsg){ var alphaExp = /^[a-zA-Z]+$/; if(joshi.value.match(alphaExp)){

return true; }else{
alert(helperMsg);
}
}
function isAlphanumeric(joshi, helperMsg){ var alphaExp = /^[0-9a-zA-Z]+$/;

if(joshi.value.match(alphaExp)){
return true; }else{
alert(helperMsg);
}
}
function lengthRestriction(joshi, min, max){ var uInput = joshi.value;

if(uInput.length >= min && uInput.length <= max){ return true;
}else{
alert("Please enter between " +min+ " and " +max+ " characters");
}
}
function madeSelection(joshi, helperMsg){ if(joshi.value == "Please Choose"){

alert(helperMsg);
}else{
return true;
}
}
function emailValidator(joshi, helperMsg){

var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(joshi.value.match(emailExp)){ return true;
}else{
alert(helperMsg);
}
}
</script>
</head>
<body>
<form onsubmit='return formValidator()' >
First Name: <input type='text' id='firstname' /><br /> Address: <input type='text' id='addr' /><br />
Zip Code: <input type='text' id='zip' /><br /> State: <select id='state'>
<option>Please Choose</option> <option>Ambala</option> <option>panchkula</option>
<option>Hisar</option> <option>panipat</option> </select><br />
Username(6-8 characters): <input type='text' id='username' /><br />
Email: <input type='text' id='email' /><br /> <input type='submit' value='Check Form' /> </form>
</body>
</html>
Experiment-12
AIM: Introduction to Ajax.
AJAX = Asynchronous JavaScript and XML
AJAX is not a new programming language, but a new way to use existing standards.
AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading
the whole page.
AJAX is a technique for creating fast and dynamic web pages.
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the
server behind the scenes. This means that it is possible to update parts of a web page, without reloading
the whole page.
Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.
Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.
In essence, Ajax is an efficient way for a web application to handle user interactions with a web page
- a way that reduces the need to do a page refresh or full page reload for every user interaction. This
enables rich behavior (similar to that of a desktop application or plugin-based web application) using a
browser. Ajax interactions are handled asynchronously in the background. As this happens, a user can
continue working with the page. Ajax interactions are initiated by JavaScript code. When the Ajax
interaction is complete, JavaScript updates the HTML source of the page. The changes are made
immediately without requiring a page refresh. Ajax interactions can be used to do things such as validate
form entries (while the user is entering them) using server-side logic, retrieve detailed data from the
server, dynamically update data on a page, and submit partial forms from the page.
AJAX is Based on Internet Standards
AJAX is based on internet standards, and uses a combination of:
XMLHttpRequest object (to exchange data asynchronously with a server) JavaScript/DOM (to
display/interact with the information)
CSS (to style the data)
XML (often used as the format for transferring data)
Google Suggest
AJAX was made popular in 2005 by Google, with Google Suggest.
Google Suggest is using AJAX to create a very dynamic web interface: When you start typing in
Google's search box, a JavaScript sends the letters off to a server and the server returns a list of
suggestions.
As you type in the search box, you can find information quickly by seeing searches that might be similar
to the one you're typing. For example, as you start to type [google], you may see searches for other
popular google-related searches.
Syntax for creating an XMLHttpRequest object:
variable=new XMLHttpRequest();
Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object:
variable=new ActiveXObject("Microsoft.XMLHTTP");
Experiment-13
AIM: Write a program to change content of web page using ajax.
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>

<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
Experiment-14
AIM: Write a program to create XML Http Request.
variable=new XMLHttpRequest();
Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object: variable=new
ActiveXObject("Microsoft.XMLHTTP");
<html>
<head>
<script>
function loadXMLDoc()
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send();
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>
Experiment-15
AIM: Introduction to php.
PHP started out as a small open source project that evolved as more and more people found out how
useful it was. Rasmus Lerdorf unleashed the first version of PHP way back in 1994.
PHP is a recursive acronym for "PHP: Hypertext Preprocessor".

PHP is a server side scripting language that is embedded in HTML. It is used to manage dynamic
content, databases, session tracking, even build entire e-commerce sites.
It is integrated with a number of popular databases, including MySQL, PostgreSQL, Oracle, Sybase,
Informix, and Microsoft SQL Server.
PHP is pleasingly zippy in its execution, especially when compiled as an Apache module on the UNIX
side. The MySQL server, once started, executes even very complex queries with huge result sets in
record-setting time.
PHP supports a large number of major protocols such as POP3, IMAP, and LDAP. PHP4 added support
for Java and distributed object architectures (COM and CORBA), making n-tier development a
possibility for the first time.
PHP is forgiving: PHP language tries to be as forgiving as possible. PHP Syntax is C-Like.
Common uses of PHP:
PHP performs system functions, i.e. from files on a system it can create, open, read, write, and close
them.
PHP can handle forms, i.e. gather data from files, save data to a file, thru email you can send data, return
data to the user.
You add, delete, modify elements within your database thru PHP. Access cookies variables and set
cookies.
Using PHP, you can restrict users to access some pages of your website. It can encrypt data.
Experiment-16
AIM: Write a program to Addition of two numbers using php.
<html>
<head>
<title>Addition of Numbers Using Forms</title> </head>
<?php error_reporting(0);
$value1 = trim($_REQUEST['val_1']); $value2 = trim($_REQUEST['val_2']);
// Clear the text field.
if ($_REQUEST['submit2']){ $value1 = "";

$value2 = "";
}
?>
<h2><center> Sum of Two Numbers </center> </h2>
<form method="post" action=""> <label>Enter First Value</label><br />

<input type="text" name="val_1" value="<?php echo $value1; ?>"><br /> <label>Enter Second
Value</label><br />
<input type="text" name="val_2" value="<?php echo $value2; ?>"><br />
<br>
<input type="submit" name="submit" value="Add"> <input type="submit" name="submit2"
value="Clear">
</form>
<?php
if ($_REQUEST['submit']){
$add = ($value1 + $value2);
echo "<h3>The sum of " .$value1." and ".$value2." is ";
echo $add.".";
?>
</body>
</html>
Experiment-17
AIM: Write a program to show data types in php.
<html>
<head>
<title>PHP data types</title> </head>
<body>
<?php
// declare a string, double and integer $testString = "3.5 seconds"; $testDouble = 79.2;
$testInteger = 12; ?>


<?php print( $testString ); ?> is a string.<br /> <?php print( $testDouble ); ?> is a double.<br /> <?php
print( $testInteger ); ?> is an integer.<br />
<br />
Now, converting to other types:<br /> <?php
// call function settype to convert variable

// testString to different data types
print( "$testString" );
settype( $testString, "double" );
print( " as a double is $testString <br />" ); print( "$testString" );
settype( $testString, "integer" );
print( " as an integer is $testString <br />" ); settype( $testString, "string" );
print( "Converting back to a string results in $testString <br /><br />" );
$data = "98.6 degrees";
// use type casting to cast variables to a

// different type
print( "Now using type casting instead: <br /> As a string - " . (string) $data .
"<br />As a double - " . (double) $data . "<br />As an integer - " . (integer) $data );
?>
</body>
</html>
Experiment-18
AIM: Write a program to using class in php.
<?php
class Programmer {
// Class Properties
var $name; // Programmer's name
var $experience; // How long has been programming
var $lang; // Favorite Language
var $education; // Highest degree earned
function Programmer($name, $experience, $lang, $education) { $this->name=$name;
$this->experience=$experience; $this->lang=$lang; $this->education=$education;
}
function get_name() { return $this->name;
function set_name($newname) {
$this->name = $newname;
function get_experience() { return $this->experience;
function set_experience($newexperience) { $this->experience = $newexperience;
function get_lang() { return $this->lang;
}
function set_lang($newlang) { $this->lang = $newlang;
}
function get_education() { return $this->education;
}
function set_education($neweducation) {
$this->education = $neweducation;
function output() {
echo "Programmer Name: ".$this->name."<br>";
echo $this->name." has ".$this->experience." years of programming experience.<br>";

echo $this->lang." is ".$this->name."'s favorite programming language.<br>"; echo $this->name."
holds the degree: ".$this->education."<br><br>";
// Instantiating a programmer
$paul = new Programmer('Pardeep Joshi',4,'C++','MCA'); $paul->output();
$paul->set_experience(7); $paul->output();
?>
Experiment-19
AIM: What is Java Server Page.
JavaServer Pages (JSP) is a technology for developing web pages that support dynamic content which
helps developers insert java code in HTML pages by making use of special JSP tags, most of which
start with <% and end with %>.
A JavaServer Pages component is a type of Java servlet that is designed to fulfill the role of a user
interface for a Java web application. Web developers write JSPs as text files that combine HTML or
XHTML code, XML elements, and embedded JSP actions and commands.
Using JSP, you can collect input from users through web page forms, present records from a database
or another source, and create web pages dynamically.
JSP tags can be used for a variety of purposes, such as retrieving information from a database or
registering user preferences, accessing JavaBeans components, passing control between pages and
sharing information between requests, pages etc.
Why Use JSP?
JavaServer Pages often serve the same purpose as programs implemented using the Common Gateway
Interface (CGI). But JSP offer several advantages in comparison with the CGI.
• Performance is significantly better because JSP allows embedding Dynamic Elements in HTML Pages
itself instead of having a separate CGI files.
• JSP are always compiled before it's processed by the server unlike CGI/Perl which requires the server
to load an interpreter and the target script each time the page is requested.
• JavaServer Pages are built on top of the Java Servlets API, so like Servlets, JSP also has access to all
the powerful Enterprise Java APIs, including JDBC, JNDI, EJB, JAXP etc.
• JSP pages can be used in combination with servlets that handle the business logic, the model supported
by Java servlet template engines.
Finally, JSP is an integral part of Java EE, a complete platform for enterprise class applications. This
means that JSP can play a part in the simplest applications to the most complex and demanding.
Advantages of JSP:
Following is the list of other advantages of using JSP over other technologies:
• vs. Active Server Pages (ASP): The advantages of JSP are twofold. First, the dynamic part is written
in Java, not Visual Basic or other MS specific language, so it is more powerful and easier to use. Second,
it is portable to other operating systems and non-Microsoft Web servers.
• vs. Pure Servlets: It is more convenient to write (and to modify!) regular HTML than to have plenty
of println statements that generate the HTML.
• vs. Server-Side Includes (SSI): SSI is really only intended for simple inclusions, not for "real"
programs that use form data, make database connections, and the like.
• vs. JavaScript: JavaScript can generate HTML dynamically on the client but can hardly interact with
the web server to perform complex tasks like database access and image processing etc.
• vs. Static HTML: Regular HTML, of course, cannot contain dynamic information.
JSP - Architecture
The web server needs a JSP engine ie. container to process JSP pages. The JSP container is responsible
for intercepting requests for JSP pages. This tutorial makes use of Apache which has built-in JSP
container to support JSP pages development.
A JSP container works with the Web server to provide the runtime environment and other services a
JSP needs. It knows how to understand the special elements that are part of JSPs.
Following diagram shows the position of JSP container and JSP files in a Web Application.
JSP Processing:
The following steps explain how the web server creates the web page using JSP:
• As with a normal page, your browser sends an HTTP request to the web server.
• The web server recognizes that the HTTP request is for a JSP page and forwards it to a JSP engine. This
is done by using the URL or JSP page which ends with .jsp instead of .html.
• The JSP engine loads the JSP page from disk and converts it into a servlet content. This conversion is
very simple in which all template text is converted to println( ) statements and all JSP elements are
converted to Java code that implements the corresponding dynamic behavior of the page.
• The JSP engine compiles the servlet into an executable class and forwards the original request to a
servlet engine.
• A part of the web server called the servlet engine loads the Servlet class and executes it. During
execution, the servlet produces an output in HTML format, which the servlet engine passes to the web
server inside an HTTP response.
• The web server forwards the HTTP response to your browser in terms of static HTML content.
• Finally web browser handles the dynamically generated HTML page inside the HTTP response exactly
as if it were a static page.
All the above mentioned steps can be shown below in the following diagram:
Experiment-20
AIM: JSP Syntax.
JSP – Syntax
The Scriptlet:
A scriptlet can contain any number of JAVA language statements, variable or method declarations, or
expressions that are valid in the page scripting language.
Following is the syntax of Scriptlet:
<% code fragment %>
You can write XML equivalent of the above syntax as follows:
<jsp:scriptlet>
code fragment
</jsp:scriptlet>
Any text, HTML tags, or JSP elements you write must be outside the scriptlet. Following is the simple
and first example for JSP:
<html>
<head><title>Hello World</title></head>
<body>
Hello World!<br/>
<%
out.println("Your IP address is " + request.getRemoteAddr());
%>
</body>
</html>
JSP Declarations:
A declaration declares one or more variables or methods that you can use in Java code later in the JSP
file. You must declare the variable or method before you use it in the JSP file.
Following is the syntax of JSP Declarations:
<%! declaration; [ declaration; ]+ ... %>

<jsp:declaration>
code fragment
</jsp:declaration>
Following is the simple example for JSP Declarations:

<%! int i = 0; %>
<%! int a, b, c; %>
<%! Circle a = new Circle(2.0); %>
JSP Expression:
A JSP expression element contains a scripting language expression that is evaluated, converted to a
String, and inserted where the expression appears in the JSP file.
Because the value of an expression is converted to a String, you can use an expression within a line of
text, whether or not it is tagged with HTML, in a JSP file.
The expression element can contain any expression that is valid according to the Java Language
Specification but you cannot use a semicolon to end an expression.
Following is the syntax of JSP Expression:
<%= expression %>
<jsp:expression>
expression
</jsp:expression>
Following is the simple example for JSP Expression:
<html>
<head><title>A Comment Test</title></head>
<body>
<p>
Today's date: <%= (new java.util.Date()).toLocaleString()%>
</p>
</body>
</html>
This would generate following result:
Today's date: 11-Sep-2010 21:24:25
JSP Comments:
JSP comment marks text or statements that the JSP container should ignore. A JSP comment is useful
when you want to hide or "comment out" part of your JSP page.
Following is the syntax of JSP comments:
<%-- This is JSP comment --%>
Following is the simple example for JSP Comments:
<html>
<head><title>A Comment Test</title></head>
<body>
<h2>A Test of Comments</h2>
<%-- This comment will not be visible in the page source --%>
</body>
</html>

List of Experiments

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

List of Experiments

Uploaded by

Copyright:

Available Formats

List of Experiments

S. No. Experiment Date Sign.

1 Introduction to HTML and XHTML

2 Basic Tags in HTML.

3 Write a program to create lists.

5 Write a program to create menu using HTML and CSS.

7 Write a program to print date using JavaScript.

Write a program to Sum and Multiply two numbers using Java

9 Write a program to Show use of alert, confirm and prompt Box

10 Write a program to redirect, popup and print function in Java Script.

11 Create validation Form in JavaScript.

13 Write a program to change content of web page using ajax.

14 Write a program to create XML Http Request.

16 Write a program to Addition of two numbers using php.

17 Write a program to show data types in php.

18 Write a program to using class in php.

19 Introduction to Java Server Page.

20 Introduction to Java Server Page Syntax.

<em>I <strong>really</strong> mean that</em>.

2. "Empty" tags must be written with an extra slash at the end.

<title>this is my first page</title> <body bgcolor=pink> <h1>welcome to html</h1><br/> <b>tag for

tables</h2> <table border="2">

<th>table head</th> <tr> <td>row1</td> <td>row2</td> </tr>

<h2>creating text box</h2> <input type="text" name"text"> password

<input type="password" name="pws"><br/> radio button<br/>

bike<input type=checkbox" name="bike"><br/> car<input type="check box" name="car"><br/>

<input type="submit" value="submit"><br/> select box<br/>

<option>one </option> <option> two </option> <option>three </option> <option>four </option>

<p style="color:#FF0000; margin-left:20px; font-size:14px; background-color:#CCFF00;

What Exactly Is JavaScript?

JavaScript is widely supported. It is available in the following browsers:

Netscape Navigator (beginning with version 2.0)

Any other browser whose vendor licensed or implemented JavaScript.

<script type="text/javascript"> <!--

<form style="height:200px; width:210px; background-color:#FF9999;">

function notEmpty(joshi, helperMsg){ if(joshi.value.length == 0){

function isNumeric(joshi, helperMsg){ var numericExpression = /^[0-9]+$/;

function isAlphabet(joshi, helperMsg){ var alphaExp = /^[a-zA-Z]+$/; if(joshi.value.match(alphaExp)){

function isAlphanumeric(joshi, helperMsg){ var alphaExp = /^[0-9a-zA-Z]+$/;

function lengthRestriction(joshi, min, max){ var uInput = joshi.value;

function madeSelection(joshi, helperMsg){ if(joshi.value == "Please Choose"){

function emailValidator(joshi, helperMsg){

AJAX = Asynchronous JavaScript and XML

<div id="myDiv"><h2>Let AJAX change this text</h2></div>

{// code for IE6, IE5

if (xmlhttp.readyState==4 && xmlhttp.status==200)

<div id="myDiv"><h2>Let AJAX change this text</h2></div>

<button type="button" onclick="loadXMLDoc()">Change Content</button>

AIM: Introduction to php.

PHP is a recursive acronym for "PHP: Hypertext Preprocessor".

Common uses of PHP:

$value1 = trim($_REQUEST['val_1']); $value2 = trim($_REQUEST['val_2']);

// Clear the text field.

if ($_REQUEST['submit2']){ $value1 = "";

<h2><center> Sum of Two Numbers </center> </h2>

<form method="post" action=""> <label>Enter First Value</label><br />

$add = ($value1 + $value2);

echo "<h3>The sum of " .$value1." and ".$value2." is ";

// call function settype to convert variable

// use type casting to cast variables to a

var $name; // Programmer's name