Applied Component - I

1.
Create a website with 3 pages for appropriate profile like Hotel, College
etc.
home.html
<html>
<head><title>ABC Hotel</title></head>
<body background="CLOUDS.jpg" link="red" alink="green" vlink="orange">
<h1>ABC Hotel</h1><br>
<P><B>Near Cross Garden</B>
<I>Station Road</I>
<U>Bhayandar(W)</U>
Dist-Thane</P><br>
<A href="menu.html">Menu</A><br>
<A href="feedback.html">Feedback</A>
</body></html>
======================================
menu.html
<html><head><title>Menu</title></head>
<body><OL>
<li>Pav Bhaji</li>
<li>Vada Pav</li>
<li>Dosa</li>
<li>Burger</li>
<li>Paneer Masala</li>
</OL><br>For Online Order Mail us on:
<A href="abc@yahoo.com">abc@yahoo.com</A><br>
<A href="main.html"><img src="blue hills.jpg" height="50"
width="50"></A><br>
<A href="feedback.html">Feedback</A>
</body></html>
==============================
<html>
<body>
<form name="f1">
Enter Name:<input type="text"><br>
Gender:<input type="radio" name="g">Male
<input type="radio" name="g">Female<br>
Your Feedback:<textarea rows="4" cols="30">Enter Comment</textarea><br>
<input type="submit" value="submit">
<input type="reset" value="clear"><br>
<A href="main.html"><img src="blue hills.jpg" height="50"
width="50"></A><br>
<A href="menu.html">Menu</A>
</form>
</body>
</html>
2. Create a web sites using frames and css for any profile like Hotel,
college etc.
home.html
<html>
<head><title>home</title></head>
<frameset rows="40%,60%">
<frameset cols="50%,50%">
<frame src="menulink.html" name="left">
<frame src="contactlink.html" name="right">
</frameset>
<frame src="content.html" name="bottom">
</frameset>
</html>
Menulink.html
<html>
<body bgcolor="red">
<A href="menu.html" target="bottom">Menu</A>
</body> </html>
Contactlink.html
<html>
<body bgcolor="yellow">
<A href="contact.html" target="bottom">Contact</A>
</body> </html>
Content.html
<html>
<body background="sunset.jpg">
<h1>welcome to OBEROI hotel<h1>
</body>
</html>
Menu.html
<html>
<head>
<style type="text/css">
h2{background-color:yellow; color:red; font:15px}
</style></head>
<body>
<h2>Our Menu Item Are:-</h2>
<ol>
<li>Pizza ............................................................{RS.50/-}
<li>franky...........................................................{RS.50/-}
<li>Pav bhaji.......................................................{RS.100/-}
<li>Biryani...........................................................{RS.199/-}
<li>Burger............................................................{RS.75/-}
</ol> </body> </html>
Contact.html
<html>
<head>
<style type="text/css">
h3{background-color:pink; color:blue; font style:italic}
</style>
</head>
<body>
<h3>oberoi hotel</h3><br>
<h3>near gate way of INDIA
SV. road,
churchgate(west),
Mumbai 400 001
</h3><br>
<b><u>contact</u></b><br>
Rohit - 8108801385<br>
</body>
</html>
3. Write java script code for email validation
<html><head>
<script language="javascript">
function validateemail()
{
if(document.frmRegistration.txtEmail.value=="")
{
alert("Email Cannot be blank");
document.frmRegistration.txtEmail.focus()
}
else
{
var remail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var test_bool =
remail.test(document.frmRegistration.txtEmail.value);
if (test_bool==false)
{
alert('Please Enter proper email id');
document.frmRegistration.txtEmail.focus()
return false;
}
}
return true;
}
</script></head><body> <form name="frmRegistration>
Email Id: <input type="text" name="txtEmail"> <br>
<input type="button" name="txtSubmit" value="Submit Form"
onClick="validateemail()">
</form></body></html>
4. Write JavaScript code for Date validation.
<html>
<head><title>Date Validation</title></head>
<body bgcolor="Red"> <form name="f">
Enter Date of Birth in DD/MM/YYYY format:-
<input type="text" name="db" value=" "> <br>
<input type="button" name="b1" value="send" onClick="valid()">
</form> <script language="javascript">
function valid()
{ var dy, mn , yr;
var bdate=document.f.db.value;
alert("DOB"+bdate);
strmdy=bdate.split("/",3);
alert(strmdy);
dy=strmdy[0];
mn=strmdy[1];
yr=strmdy[2];
alert("Date"+dy);
alert("Month"+mn);
alert("Year"+yr);
if(dy>31)
{ alert("Invalid Date");
document.f.db.value=" ";
document.f.db.focus();
}
else if(mn>12)
{ alert("Invalid month");
}
else if(yr>2013||yr<1901)
{ alert("Invalid year");
}
else if(bdate>"11/09/2013")
{ alert("Date is ahead of time");
}
else
alert("Valid date||Success");
}
</script>
</body>
</html>
5. Write java Script code for changing background color of document on
click event and on mouseOver event.
Event1.html
<html>
<head><title>event driven client side </title>
function f1()
{ document.bgColor="red";
window.setTimeout ("f2()",2000);
}
function f2()
{ document.bgColor="black";
}
function f3()
{ document.bgColor="yellow";
window.setTimeout ("f4()"
,2000);
}
function f4()
{ document.bgColor="pink";
}
function f5()
{ document.bgColor="blue";
}
function f6()
{ document.bgColor="purple";
}
function f7()
{ document.bgColor="green";
}
function msg()
{
status="this is javascript"
}
</script> </head> </body>
<input type="button" name="b1" value="get message" onClick="msg()">
<input type="button"name="b2" value="change color" onMouseover="f1()">
</body></html>
Event2.html
<html>
<head><title>event driven client side </title>
function f1()
{ document.bgColor="red";
}
function f2()
{ document.bgColor="black";
}
function f3()
{ document.bgColor="yellow";
}
function f4()
{ document.bgColor="pink";
}
function f5()
{ document.bgColor="blue";
}
function f6()
{ document.bgColor="purple";
}
function f7()
{ document.bgColor="green";
}
function msg()
{ alert("page unloaded") }
</script> </head>
<body onload="f1()" onUnload="msg()" >
</body> </html>
6. Study of XMLHttp object to capture data entered by user in a text field
and display it in the webpage in a span element.
<html>
<head>
<title>Ajax at work</title>
<script language = "javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new
ActiveXObject("Microsoft.XMLHTTP");
}
function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<H1>Fetching data with Ajax</H1>
<form>
<input type = "button" value = "Display Message"
onclick = "getData('data.txt', 'targetDiv')">
</form>
<div id="targetDiv">
<p>The fetched data will go here.</p>
</div>
</body>
</html>
</form>
<p>The fetched data will go here</p>
</div>
</body>
</html>
7. Create a webpage to fetch and display the contents of a text file on click of
a button using XMLHttpRequestObject.
<html>
<head>
XMLHttpRequestObject = new
ActiveXObject("Microsoft.XMLHTTP");
}

{
{
}
}
}
}
</script>
</head>
<body>
<H1>Fetching data with Ajax</H1>
<form>
<input type = "button" value = "Display Message"
onclick = "getData('data.txt', 'targetDiv')">
</form>
</div>
</body>
</html>
</form>
<p>The fetched data will go here</p>
</div>
</body>
</html>
8. Create a web page using ajax to fetch text file contents on mouseover.
<html>
<head>
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

{
{
}
}
}
}
</script>
</head>
<body>
<H1>Interactive mouseovers </H1>
<img src='sandwich.jpg'
onmouseover="getData('sandwiches.txt','targetDiv')">
<img src='pizza.gif' onmouseover="getData('pizza.txt','targetDiv')">
<img src='soup.jpg' onmouseover="getData('soups.txt','targetDiv')">
</div>
</body>
</html>
Deploying php applications Using Wamp Server
To Run php applications download wampserver from
It will create following folder on your PC
C:\wamp\www
Inside that create your own folder say myphp to store your php programs
and then open these html files withphp code in browser as follows:
http://localhost:80/myphp/welcome.php
9. Create a php file to display welcome message .
welcome.php
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<?php echo '<p>Welcome to the World of php</p>'; ?>
</body>
</html>
10.Accept age of user from HTML file and then check whther he/ she is
available for vote or not.
Age.html
<html>
<head><title>My first html</title></head>
<body>
<form method="post" action="age.php">
Enter the age:<input type="text" name="t1">
<input type="submit">
</form>
</body>
</html>
Age.php
<?php
$age = $_REQUEST["t1"];
if($age <= 18)
{
echo"you are minor";
}
else
{
echo"You are eligible for voting";
}
?>

Applied Component - I

Uploaded by

Document Information

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

Applied Component - I

Uploaded by

Copyright:

Available Formats

1.

function getData(dataSource, divID)

function getData(dataSource, divID)

You might also like