TYBSC prac soln

Category A (Based on Unit 1 )Study of Basic and Advanced HTML Tags & Cascading Style Sheets .

1.Develop a website on My Profile having following web pages .

i) Code :web.html

<html><head><link href="style.css" type="text/css" rel="stylesheet"><style>h2{color:purple;font-family:Monotype Corsiva;text-align:center}</style></head><body><table align="center"><tr><td colspan="7 px" align="center"><img src="ruparel.jpg"></td></tr><tr><td><Img src="home.png" usemap="#map1"><map name="map1"><Area shape="circle" coords="50,50,100,100" href="home.html"></map></td><td><Img src="friends.png" usemap="#map2"><map name="map2"><Area shape="circle" coords="40,40,90,90" href="friends.html"></map></td><td><Img src="dreams.png" usemap="#map3"><map name="map3"><Area shape="circle" coords="50,50,100,100" href="dreams.html"></map></td><td><Img src="wish.png" usemap="#map4"><map name="map4"><Area shape="circle" coords="50,50,100,100" href="wish.html"></map></td><td><Img src="dislikes.png" usemap="#map5"><map name="map5"><Area shape="circle" coords="50,50,100,100" href="dislikes.html"></map></td><td><Img src="memories.png" usemap="#map6"><map name="map6"><Area shape="circle" coords="50,50,100,100" href="memories.html"></map></td><td><Img src="skills.png" usemap="#map7"><map name="map7"><Area shape="circle" coords="50,50,100,100" href="skills.html"></map></td></tr></table></body></html>

Output:-

ii) Code :home.html

<html><head><link href="style.css" type="text/css" rel="stylesheet"><style>h2{color:purple;font-family:Monotype Corsiva;text-align:center}</style></head><body><h2>Hello Everybody !!</h2><table align="center"><tr><td align="center"><img src="me.jpg"></td><td><pre><h1><b style="font-family:Monotype Corsiva">Name : Katrina KaifAddress : Follow my footstepsEmail : [email protected] : 9867800210</b></h1></pre></tr> </table><table align="center"><tr><td><a href="home.html">Home</a></td><td><a href="friends.html">My Friends</a></td><td><a href="dreams.html">My Dreams</a></td><td><a href="wish.html">My Wish</a></td>

<td><a href="dislike.html">Dislikes</a></td><td><a href="memories.html">Unforgottable Memories</a></td><td><a href="skills.html">Skills</a></td></tr></table></body></html>

iii) Code :friends.html

<html><head><link href="style.css" type="text/css" rel="stylesheet"><style>h2{color:purple;font-family:Monotype Corsiva;text-align:center}</style></head><body><h2>My Friend Circle !!</h2><table align="center"><tr><td align="left"><img src="frienzzzz.jpg"></td><td><pre><b>Ek island me saari feelings sathme rehti thi. Ek din waha pe tufan aaya. Sari feelings dar gayi or sochne lagi kiab hum nahi ji payenge. Tabhi friendship wali feeling ne boat dhundi or sabhi ko kaha ki ispe aake beth jao, hum sab bachjayenge.Every feeling got on the boat, one feeling was left. Friendship got down to see whoit was, it was EGO. Friendship tried n tried but EGO didnt move, everyone asked Friendship to leave him and come in the boat, but it was Friendship who remain with the EGO.All the emotions remained alive but "Friendship" died because of EGO.....</b></pre></td></tr> </table><table align="center"><tr><td><a href="home.html">Home</a></td><td><a href="friends.html">My Friends</a></td><td><a href="dreams.html">My Dreams</a></td><td><a href="wish.html">My Wish</a></td>

<td><a href="dislike.html">Dislikes</a></td><td><a href="memories.html">Unforgottable Memories</a></td><td><a href="skills.html">Skills</a></td></tr></table></body></html>

iv) Code :dreams.html

<html><head><link href="style.css" type="text/css" rel="stylesheet"><style>h2{color:purple;font-family:Monotype Corsiva;text-align:center}</style></head><body><h2>My Dreams </h2><table align="center"><tr><td align="left"><img src="images.jpg"></td><td><pre><b>We All Have OurTime Machines ...Some Take Us Back, They Are Called Memories...Some Take Us Forward, They Are Called Dreams...</b> </pre></tr> </table><table align="center"><tr><td><a href="home.html">Home</a></td><td><a href="friends.html">My Friends</a></td><td><a href="dreams.html">My Dreams</a></td><td><a href="wish.html">My Wish</a></td><td><a href="dislike.html">Dislikes</a></td><td><a href="memories.html">Unforgottable Memories</a></td><td><a href="skills.html">Skills</a></td></tr></table></body></html>

v) Code :wish.html

<html><head><link href="style.css" type="text/css" rel="stylesheet"><style>h2{color:purple;font-family:Monotype Corsiva;text-align:center}</style>

</head><body><h2>My Dreams </h2><table align="center"><tr><td align="left"><img src="wish1.jpg"></td><td><pre><b>When things go wrongWhen sadness fills your heartWhen tears flow in your eyesAlways remember 3 thingsGod, your parents & my best wishes

To achieve great things,We must not only act,But also dream,Not only plan but also believe.Believe in yourself! Best of luck!

Soft Speech clean heart,Peaceful eyes, strength hands,Focused mind & determined decision with God's Love.Always makes u winner.</pre></tr> </table><table align="center"><tr><td><a href="home.html">Home</a></td><td><a href="friends.html">My Friends</a></td><td><a href="dreams.html">My Dreams</a></td><td><a href="wish.html">My Wish</a></td><td><a href="dislike.html">Dislikes</a></td><td><a href="memories.html">Unforgottable Memories</a></td><td><a href="skills.html">Skills</a></td></tr></table></body></html>

vi) Code :dislike.html

<html><head><link href="style.css" type="text/css" rel="stylesheet"><style>h2{color:purple;font-family:Monotype Corsiva;text-align:center}</style></head>

</head><body><h2>I Dont Like !!!! </h2><table align="center"><tr><td align="left"><img src="dislike.jpg"></td><td><pre><b><h2>1. Waiting for trains / bus.2. Summer Days3. Commercial radio4. Home food5. Falling over in front of People6. Political News7. Studies8. Jobs9. Fighting10. Reading</h2></b></pre></tr> </table><table align="center"><tr><td><a href="home.html">Home</a></td><td><a href="friends.html">My Friends</a></td><td><a href="dreams.html">My Dreams</a></td><td><a href="wish.html">My Wish</a></td><td><a href="dislike.html">Dislikes</a></td><td><a href="memories.html">Unforgottable Memories</a></td><td><a href="skills.html">Skills</a></td></tr></table></body></html>

vii) Code :memories.html

<html><head><link href="style.css" type="text/css" rel="stylesheet"><style>h2{color:purple;font-family:Monotype Corsiva;text-align:center}</style></head><body><h2>Unforgottable Moments </h2><table align="center"><tr><td><img src="10.jpg"></td><td><img src="1.jpg"></td><td><img src="2.jpg"></td>

</tr><tr><td><img src="3.jpg"></td><td><img src="4.jpg"></td><td><img src="6.jpg"></td></tr><tr><td><img src="5.jpg"></td><td><img src="7.jpg"></td><td><img src="8.gif"></td></tr><tr><td colspan="3 px" align="center"><img src="9.jpg"></td></tr></table><table align="center"><tr><td><a href="home.html">Home</a></td><td><a href="friends.html">My Friends</a></td><td><a href="dreams.html">My Dreams</a></td><td><a href="wish.html">My Wish</a></td><td><a href="dislike.html">Dislikes</a></td><td><a href="memories.html">Unforgottable Memories</a></td><td><a href="skills.html">Skills</a></td></tr></table></body></html>

viii) Code :skills.html

<html><head><link href="style.css" type="text/css" rel="stylesheet"><style>h2{color:purple;font-family:Monotype Corsiva;text-align:center}</style></head><body><h2>Skills and services</h2><table align="center"><tr><td align="left"><img src="my_skill.jpg"></td><td><pre><b><h2>1. Dancing2. Singing3. Acting4. Cooking5. Batminton6. Teaching7. Helping Others8. Swimming9. Studying10. Reading

</h2></b></pre></tr> </table><table align="center"><tr><td><a href="home.html">Home</a></td><td><a href="friends.html">My Friends</a></td><td><a href="dreams.html">My Dreams</a></td><td><a href="wish.html">My Wish</a></td><td><a href="dislike.html">Dislikes</a></td><td><a href="memories.html">Unforgottable Memories</a></td><td><a href="skills.html">Skills</a></td></tr></table></body></html>

2.Code:-Registration.html

<html><head><title>My Profile</title><link rel=STYLESHEET href="style.css" /><script language="javascript">function checkChar(){ if(isNaN(document.frm1.Name.value)==false) { window.alert("Enter only Character");

document.frm1.Name.value=""return false;

} return true;} function checkNum(){ if(isNaN(document.frm1.Age.value)==true) { window.alert("Enter only Number");

document.frm1.Age.value="" return false;

} return true;} function checkMail(){ var i,j,k var t= new String()

t=document.frm1.EmailId.value; i=t.indexOf("@") j=t.indexOf(".") k=t.indexOf(" ") if(i<0 || j<0 || j<i || i==0 || j==0 || k==0 || j<3 || j==i+1) {

window.alert("invalid email");document.frm1.EmailId.value=""

} if(i!=t.lastIndexOf("@")) { window.alert("invalid email");

document.frm1.EmailId.value="" } if(j+1==t.lastIndexOf(".")) { window.alert("invalid email");

document.frm1.EmailId.value="" } if(k=0 || k>0) { window.alert("invalid email");

document.frm1.EmailId.value="" } if(i==t.Length-1) { window.alert("invalid email");

document.frm1.EmailId.value="" } if(j==t.Length-1) { window.alert("invalid email");

document.frm1.EmailId.value="" } return true;} function validate(){

var hobbies=0,gender=0,i;for(i=0;i<document.frm1.length;i++){

if((document.frm1.elements[i].type=="text" ||document.frm1.elements[i].type=="textarea") && document.frm1.elements[i].value=="")

{alert(document.frm1.elements[i].name + " is empty");document.frm1.elements[i].focus();return;// false;

}else if(document.frm1.elements[i].type=="radio" && document.frm1.elements[i].checked==true)

gender++;else if(document.frm1.elements[i].type=="checkbox" && document.frm1.elements[i].checked==true)

hobbies++;}if(gender!=1){

alert("Select one Gender");return;// false;

}if(hobbies<3){

alert("Select atleast 3 hobbies");return;// false;

}alert("Form is valid"+"\n "+"Name: "+document.frm1.Name.value +" \n "+"Age:

"+document.frm1.Age.value+" \n "+"EmailId: "+document.frm1.EmailId.value+" \n "+"Date: "+document.frm1.cboDay.value+document.frm1.cboMonth.value+document.frm1.cboYr.value +" \n "+"Address: "+document.frm1.Address.value+" \n "+"Country: "+document.frm1.country.value+" \n "+"Services: "+document.frm1.Services.value+"\n"+"Gender: "+radio()+"\n"+"Hobbies: "+chk());return;// false;

}function radio()

{choosen=" ";len=document.frm1.rdGender.length;for(i=0;i<len;i++){

if (document.frm1.rdGender[i].checked){

choosen=document.frm1.rdGender[i].value;}

}return choosen;

}function chk()

{choosen=" ";len=document.frm1.chk.length;for(i=0;i<len;i++){

if (document.frm1.chk[i].checked){

choosen=choosen+" "+document.frm1.chk[i].value;}

}return choosen;

}</script></head><body>

<h1><center>Registration</center></h1><br><center><img src="C.jpg" align="middle" width="600" height="256" border=1></center><br><form name="frm1"><table width="517" border=0 align="center">

<tr><th align="left"> <b>Name: </b> </th><td Colspan=3> <input type="text" name="Name" value="" onKeyup="checkChar();" >

</td></tr><tr>

<th align="left"> <b>Age: </b> </th><td Colspan=3> <input type="text" name="Age" value="" onKeyup="checkNum();" >

</td></tr><tr>

<th align="left"> <b> Email Id: </b> </th><td Colspan=3> <input type="text" name="EmailId" value="" onBlur="checkMail();">

</td></tr><tr>

<th align="left"> <b> Date Of Birth: </b> </th><td Colspan=3> <b> Day </b>

<select name="cboDay"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option>

<option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option>

</select> <b> Month </b>

<select name="cboMonth"> <option value="January">January</option> <option value="February">February</option>

<option value="March">March</option> <option value="April">April</option> <option value="May">May</option> <option value="June">June</option> <option value="July">July</option> <option value="August">August</option> <option value="September">September</option> <option value="October">October</option> <option value="November">November</option> <option value="December">December</option>

</select> <b> Year </b>

<select name="cboYr"> <option value="1974">1974</option> <option value="1975">1975</option> <option value="1976">1976</option> <option value="1977">1977</option> <option value="1978">1978</option> <option value="1979">1979</option> <option value="1980">1980</option> <option value="1981">1981</option> <option value="1982">1982</option> <option value="1983">1983</option> <option value="1984">1984</option> <option value="1985">1985</option> <option value="1986">1986</option> <option value="1987">1987</option> <option value="1988">1988</option> <option value="1989">1989</option> <option value="1990">1990</option> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> <option value="1994">1994</option> <option value="1995">1995</option> <option value="1996">1996</option> <option value="1997">1997</option> <option value="1998">1998</option> <option value="1999">1999</option> <option value="2000">2000</option> <option value="2001">2001</option> <option value="2002">2002</option>

<option value="2003">2003</option> <option value="2004">2004</option> <option value="2005">2005</option> <option value="2006">2006</option> <option value="2007">2007</option>

<option value="2008">2008</option> <option value="2009">2009</option>

</select> </td>

</tr><tr>

<th align="left"> <b>Gender: </b> </th><td Colspan=3> <input type="radio" value="Male" name="rdGender">Male

<input type="radio" value="Female" name="rdGender">Female

</td></tr><tr>

<th rowspan=2 align="left"><b>Hobbies:</b></th><td><Input type="CheckBox" name="chk" value="Read">Reading</td><td><Input type="CheckBox" name="chk" value="Music">Music</td>

<td><Input type="CheckBox" name="chk" value="Games">Games</td>

</tr><tr>

<td><Input type="CheckBox" name="chk" value="Adventure">Adventure</td>

<td><Input type="CheckBox" name="chk" value="Sports">Sports</td><td><Input type="CheckBox" name="chk" value="Travel">Travel</td>

</tr>

<tr rowspan=3><th align="left"><b>Address:</b></th><td Colspan=3><textarea rows=3 cols=16

name="Address"></textarea></td></tr><tr>

<th align="left"><b>Country:</b></th><td Colspan=3><Select name="country">

<option value="India">India</option><option value="America">America</option><option value="SouthAfrica">South Africa</option><option value="Brazil">Brazil</option><option value="Australia">Australia</option><option value="Dubai">Dubai</option>

</Select></td></tr><tr rowspan=3>

<th align="left"><b>Services:</b></th><td Colspan=3><textarea rows=3 cols=16

name="Services"></textarea></td></tr><tr><td align="center"><Input type="Button" value="Submit" onClick="return validate();"></td>

<td align="center"><Input type="Reset" onClick="return freset()"></td></tr>

</table></form></body></html>

Output:-

3.Code:-Style.css

body{background-color:pink

}A:hover { color: green; background-color: white; text-decoration: none}

Category B:

Title:-Javascript

1)Code:-Registration Form validations

<html><head><title>javaScript</title><script language="javascript">function isBlank(s){

var len;len=s.length;var i;for(i=0;i<len;i++){

if(s.charAt(i)!=""){

return false;}

}return true;

}

{window.alert("Age Can Not Be Empty");document.frmvalidate.txtage.value="";return false;

}if(isString(str)==2||isString(str)==3){

window.alert("Enter only numbers");document.frmvalidate.txtage.value="";return false;

}if(l>=3){

window.alert("Age Should Contain 2 Digits");document.frmvalidate.txtage.value="";return false;

}}function validateE(){

var eid,at,lenstr,idxat,dot,idxdot,dotdot;eid=document.frmvalidate.txtemail.value;at="@";lenstr=eid.length;idxat=eid.indexOf(at);dot=".";idxdot=eid.indexOf(dot);dotdot="..";//eid=toString(eid);//window.alert(at);if(isBlank(eid)){

window.alert("Please enter email");document.frmvalidate.txtemail.value="";return false;

}if(eid.indexOf(at)==-1){

window.alert("@ should be present");document.frmvalidate.txtemail.value="";return false;

}if(eid.indexOf(at)==0){

window.alert("@ should not be at the start");document.frmvalidate.txtemail.value="";return false;

}if(eid.indexOf(at)==lenstr-1){

window.alert("@ should not be at the end");

<tr><td align="right"> </td><td align="center"><input type="submit" name="btnsubmit"

onclick="return subclick()"> <input type="reset" name="btnreset"></td></tr>

</table></form>

</body></html>Output:-

2) Code:-Login validation

<html><head><title>loginss Form</title><script language="JAVAsCRIPT">function isBlank(s){

var len;len=s.length;for(i=0;i<len;i++){

if(s.charAt(i)!=""){

return false;

}}return true;

}function isString(s){

var len;len=s.length;for(i=0;i<len;i++){

if(s.charAt(i)>=0 && s.charAt(i)<=9){

return false;}

}return true;

}function ValidateName(){

var str=document.frmRegistration.txtName.value;if(isBlank(str)){

alert("Name can not be blank!");document.frmRegistration.txtName.value="";return false;

}if(isString(str)==false){

alert("Plz Enter only Alphabets!");document.frmRegistration.txtName.value="";return false;

}return true;

}function ValidatePassword(){

var str=document.frmRegistration.txtPwd.value;var len=str.length;if(isBlank(str)){

alert("Password can not be blank!");document.frmRegistration.txtPwd.value="";return false;

}if(len<8){

alert("Plz Enter atleast 8 Characters!");document.frmRegistration.txtPwd.value="";return false;

}return true;

}function ValidateEmail(){

var str=document.frmRegistration.txtEmail.value;var at="@";var dot=".";var dotdot="..";idxat=str.indexOf(at);idxdot=str.indexOf(dot);var lenstr=str.length;if(isBlank(str)){

alert("EmailId can not be blank!");document.frmRegistration.txtEmail.value="";return false;

}if(str.indexOf(at)==-1){

alert("@ should be present");document.frmRegistration.txtEmail.value="";return false;

}if(str.indexOf(at)==0){

alert("@ should not be present at the start");document.frmRegistration.txtEmail.value="";return false;

}if(str.indexOf(at)==lenstr-1){

alert("@ should not be present at the end");document.frmRegistration.txtEmail.value="";return false;

}if(str.indexOf(at,idxat+1)!=-1){

alert("@ should not be present more than once");document.frmRegistration.txtEmail.value="";return false;

}if(str.substring(idxat,idxat-1)==dot){

alert("dot should not preceed after @ ");document.frmRegistration.txtEmail.value="";return false;

}if(str.substring(idxat+1,idxat+2)==dot){

alert("dot should not appear after @ ");document.frmRegistration.txtEmail.value="";return false;

}if(str.indexOf(dot)==-1){

alert(". should be present");document.frmRegistration.txtEmail.value="";return false;

}if(str.indexOf(dot)==0){

alert(". should not be present at the start");document.frmRegistration.txtEmail.value="";return false;

}if(str.indexOf(dot)==lenstr-1){

alert(". should not be present at the end");document.frmRegistration.txtEmail.value="";return false;

}if(str.substring(idxdot,idxdot+2)==dotdot){

alert("dot should not cosecutive ");document.frmRegistration.txtEmail.value="";return false;

}return true;

}

var count = 2;function ProcessForm(){

if(document.frmRegistration.txtName.value==""){

alert("Please Enter Name");document.frmRegistration.txtName.focus();return false;

}if(document.frmRegistration.txtPwd.value==""){

alert("Please Enter Password");document.frmRegistration.txtPwd.focus();return false;

}if(document.frmRegistration.txtEmail.value==""){

alert("Please Enter EmailId");document.frmRegistration.txtEmail.focus();return false;

}

var un = document.frmRegistration.txtName.value;

</script></head><body>

<font face="comic sans ms,arial"><form name="frmRegistration"><table align="center">

<caption>USER LOGIN</captio><tr>

<td>UserName:</td><td><input type="text" name="txtName" onblur="return

ValidateName()"></td></tr><tr>

<td>Password:</td><td><input type="password" name="txtPwd" onblur="return

ValidatePassword()"></td></tr><tr>

<td>Email:</td><td><input type="text" name="txtEmail" onblur="return

ValidateEmail()"></td></tr><tr>

<td> </td><td><input type="submit" name="txtSubmit" onClick="return

ProcessForm()"></td></tr>

</table><form></font>

</body></html>

Output:-

3) Code:-Simple interest

<html><head><script language="javascript">function interest(){ var i,j,k,m,n; i=document.frm.txtPrincipal.value; j=document.frm.txtYears.value; k=document.frm.txtInterest.value; m=i*j*k; n=window.eval(m); alert("Simple Interest Is :"+n); return;} function final(){

var i,j,k,m,n,l,t,f,fa; i=document.frm.txtPrincipal.value; j=document.frm.txtYears.value; k=document.frm.txtInterest.value; m=(i*j*k); n=window.eval(m);

f=(parseInt(i)+n);

fa=window.eval(f);alert("Final Amount Is : "+fa);

return;} function checkNum(){ var i; if(isNaN(document.frm.elements[i].value)==true) { window.alert("Enter only Number");

document.frm.elements[i].value="" return false;

} return true;} </script></head><body> <h1 align="center">Calculate Interest</h1><br><center><img src="C.jpg" align="middle" width="479" height="176"></center><Form name="frm"><table align="center"><tr><td><strong>Principal Amount</strong>: </td><td> <input type="text" name="txtPrincipal" onKeyUp="checkNum();"></td></tr><tr><td><strong>No Of Years</strong>: </td><td><input type="text" name="txtYears" onKeyUp="checkNum();"></td></tr><tr><td><strong>Rate of Interest</strong>: </td><td><input type="text" name="txtInterest" onKeyUp="checkNum();"></td></tr> <tr><td colspan="2 px"><center><input type="button" value="Calculate Interest" onClick="interest();"></td></tr><tr><td colspan="2 px"><center><input type="button" value="Final Amount" onClick="final();"></center></td></tr></table></Form></body></html>

Output:-

4) Code:-MouseOver Effect

<html><head><script type="text/javascript">function change1(color){

document.getElementById("b").bgColor =color;}</script></head><body id="b"><table><tr>

<td bgcolor="pink" onMouseOver="change1('pink');">pink</td><td bgcolor="indigo" onMouseOver="change1('indigo');">indigo</td><td bgcolor="purple" onMouseOver="change1('purple');">purple</td></tr></table></body>

Output:-

5) Code:-String Objects

<html><body><script type="text/javascript">

var txt="Hello World!";document.write(txt.length);document.write("<p>Big: " + txt.big() + "</p>");document.write("<p>Small: " + txt.small() + "</p>");document.write("<p>Bold: " + txt.bold() + "</p>");document.write("<p>Italic: " + txt.italics() + "</p>");document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>");document.write("<p>Fixed: " + txt.fixed() + "</p>");document.write("<p>Strike: " + txt.strike() + "</p>");document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>");document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>");document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>");document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>");document.write("<p>Subscript: " + txt.sub() + "</p>");document.write("<p>Superscript: " + txt.sup() + "</p>");document.write("<p>Link: " + txt.link("http://www.w3schools.com") + "</p>");document.write(str.indexOf("Hello") + "<br />");document.write(str.indexOf("World") + "<br />");document.write(str.indexOf("world"));document.write(str.match("world") + "<br />");document.write(str.match("World") + "<br />");document.write(str.match("worlld") + "<br />");document.write(str.match("world!"));var str="Visit Microsoft!";document.write(str.replace(/Microsoft/,"W3Schools"));</script></body></html>

Output:-

6) Code:-Detect Browser

<html><body><script type="text/javascript">var browser=navigator.appName;var b_version=navigator.appVersion;var version=parseFloat(b_version);document.write("Browser name: "+ browser);document.write("<br />");document.write("Browser version: "+ version);</script></body></html>

Output:-

II . XML

Code:-Books1.xml

<?xml version="1.0"?><xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="/"><html><body><h2>books</h2>

<table border="1"><tr bgcolor="#9acd32">

<th bgcolor="orange">book_id</th><th bgcolor="orange">book_author</th><th bgcolor="white">price</th><th bgcolor="green">date</th></tr><xsl:for-each select="books/book"><tr><td bgcolor="orange"><xsl:value-of select="book_id"/></td><td bgcolor="orange"><xsl:value-of select="book_author"/></td>

<td ><font color="blue"><xsl:value-of select="price"/></font></td><td bgcolor="green"><xsl:value-of select="date"/></td></tr></xsl:for-each></table></body></html></xsl:template></xsl:stylesheet>

Code:-Book1.xsl

<?xml version="1.0"?><?xml-stylesheet type="text/xsl" href="book1.xsl"?><books><book><book_id>1</book_id><book_author>paa</book_author><price>100</price><date>23/09/56</date></book><book><book_id>2</book_id><book_author>aba</book_author><price>100</price><date>23/09/56</date></book><book><book_id>1</book_id><book_author>dhandya</book_author><price>100</price><date>23/09/56</date></book></books>

Output:-

Category C : Introduction to Ajax

1.Aim:- Study of XMLHttp object to capture data entered by user in a text field and display it in the webpage in a span element.

Code :- dem2.html<html><head><script>function getdata(){var obj=false;

txtuser=document.frm.txtuser.value;url="demo1.php?t1="+txtuser;if(window.XMLHttpRequest){ obj=new XMLHttpRequest();}else if(window.ActiveXObject){ obj=new ActiveXObject("Microsoft.XMLHttp");

}if(obj){ obj.open("GET","demo1.php?t1="+txtuser,true);

obj.onreadystatechange=function(){ if(obj.readyState==4 && obj.status==200)

{ alert("d");document.getElementById('Div1').innerHTML=obj.responseText;

}}obj.send(null);

}}</script></head><body><form name="frm" method="get"><input type="text" name="txtuser"><input type="button" value="Send" onclick="getdata();"><br/><div id="Div1"></div></form></body></html>

demo1.php<?php$_name=$_REQUEST['t1'];echo "welcome : ".$_name;?>

Output:-

2.Aim :- Study of XMLHttp object to capture data entered by user in a text field and display it in the webpage in a span element.

Code :-Ajax1.html

<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><div id="targetDiv"><p>The fetched data will go here</p></div></body></html>

data.txtHello Every One

Output :-

3.Aim:- Create a web page using ajax to fetch text file contents on mouseover.

Code:-ajax2.html<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>Interactive mouseovers </H1><img src='sandwich.jpg' width=50 height=50 onmouseover="getData('data.txt','targetDiv')"><img src='pizza.gif' width=50 height=50 onmouseover="getData('pizza.txt','targetDiv')"><img src='soups.jpg' width=50 height=50 onmouseover="getData('soups.txt','targetDiv')"><div id="targetDiv"><p>The fetched data will go here.</p>

</div> </body> </html>

data.txtsandwich

pizza.txtPizza--xyz--abc

soups.txtsoups--PQR--XYZ

Output:-

CategoryG :- Ajax & XML ,PHP

1.Aim:- Create a php file to display welcome message .

Code :-

welcome.php<?php$txt1="Hello";$txt2="all";echo "<Font color='Red'><I><B><Marquee direction='Right'>Welcome</Marquee></B></I></Font>"; echo "<Font color='Red'><B><Marquee>"." ".$txt1."</Marquee></B></Font>"; ?>

Output:-

2.Aim:-Create a web page to fetch the matching name from the namearray stored in a php file using ajax when you enter the starting alphabet in a textfield.

Code:-

gethint.php<?php// Fill up array with names$a[]="Anita";$a[]="Brinda";$a[]="Cinderella";$a[]="Diana";$a[]="Eva";$a[]="Fiona";$a[]="Gayatri";$a[]="Heena";$a[]="Isha";$a[]="Jigna";$a[]="Kamla";

$a[]="Leena";$a[]="Nina";$a[]="Ophelia";$a[]="Padmini";$a[]="Akansha";$a[]="Rina";$a[]="Cindy";$a[]="Diksha";$a[]="Esha";$a[]="Evita";$a[]="Sunita";$a[]="Trupti";$a[]="Usha";$a[]="Samaira";$a[]="Leena";$a[]="Edith";$a[]="Sia";$a[]="Wiha";$a[]="Vicky";

//get the q parameter from URL$q=$_GET["q"];

//lookup all hints from array if length of q>0if (strlen($q) > 0){ $hint=""; for($i=0; $i<count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint=="") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i]; } } } }// Set output to "no suggestion" if no hint were found// or to the correct valuesif ($hint == ""){ $response="no suggestion";}else{ $response=$hint;}//output the response

echo $response;?>

w3file.html<html><head><script type="text/javascript">function showHint(str){ if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; }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("txtHint").innerHTML=xmlhttp.responseText; } }xmlhttp.open("GET","gethint.php?q="+str,true);xmlhttp.send();}</script></head<body><p><b>Start typing a name in the input field below:</b></p><form> First name: <input type="text" onkeyup="showHint(this.value)" size="20" /></form><p>Suggestions: <span id="txtHint"></span></p></body></html>Output:-

3.Aim:- Create a html file to fetch the contents of cataglog.xml (CD details) using ajax and display them in a table .

Code:-Cd_catalog.xml<CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> <CD> <TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tyler</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>CBS Records</COMPANY> <PRICE>9.90</PRICE> <YEAR>1988</YEAR> </CD> <CD> <TITLE>Greatest Hits</TITLE> <ARTIST>Dolly Parton</ARTIST>

<COUNTRY>USA</COUNTRY> <COMPANY>RCA</COMPANY> <PRICE>9.90</PRICE> <YEAR>1982</YEAR> </CD> <CD> <TITLE>Still got the blues</TITLE> <ARTIST>Gary Moore</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>Virgin records</COMPANY> <PRICE>10.20</PRICE> <YEAR>1990</YEAR> </CD> <CD> <TITLE>Eros</TITLE> <ARTIST>Eros Ramazzotti</ARTIST> <COUNTRY>EU</COUNTRY> <COMPANY>BMG</COMPANY> <PRICE>9.90</PRICE> <YEAR>1997</YEAR> </CD> <CD> <TITLE>One night only</TITLE> <ARTIST>Bee Gees</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>Polydor</COMPANY> <PRICE>10.90</PRICE> <YEAR>1998</YEAR> </CD> <CD> <TITLE>Sylvias Mother</TITLE> <ARTIST>Dr.Hook</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>CBS</COMPANY> <PRICE>8.10</PRICE> <YEAR>1973</YEAR> </CD> <CD> <TITLE>Maggie May</TITLE> <ARTIST>Rod Stewart</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>Pickwick</COMPANY> <PRICE>8.50</PRICE> <YEAR>1990</YEAR> </CD> <CD> <TITLE>Romanza</TITLE> <ARTIST>Andrea Bocelli</ARTIST>

<COUNTRY>EU</COUNTRY> <COMPANY>Polydor</COMPANY> <PRICE>10.80</PRICE> <YEAR>1996</YEAR> </CD> <CD> <TITLE>When a man loves a woman</TITLE> <ARTIST>Percy Sledge</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Atlantic</COMPANY> <PRICE>8.70</PRICE> <YEAR>1987</YEAR> </CD> <CD> <TITLE>Black angel</TITLE> <ARTIST>Savage Rose</ARTIST> <COUNTRY>EU</COUNTRY> <COMPANY>Mega</COMPANY> <PRICE>10.90</PRICE> <YEAR>1995</YEAR> </CD> <CD> <TITLE>1999 Grammy Nominees</TITLE> <ARTIST>Many</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Grammy</COMPANY> <PRICE>10.20</PRICE> <YEAR>1999</YEAR> </CD> <CD> <TITLE>For the good times</TITLE> <ARTIST>Kenny Rogers</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>Mucik Master</COMPANY> <PRICE>8.70</PRICE> <YEAR>1995</YEAR> </CD> <CD> <TITLE>Big Willie style</TITLE> <ARTIST>Will Smith</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>9.90</PRICE> <YEAR>1997</YEAR> </CD> <CD> <TITLE>Tupelo Honey</TITLE> <ARTIST>Van Morrison</ARTIST>

<COUNTRY>UK</COUNTRY> <COMPANY>Polydor</COMPANY> <PRICE>8.20</PRICE> <YEAR>1971</YEAR> </CD> <CD> <TITLE>Soulsville</TITLE> <ARTIST>Jorn Hoel</ARTIST> <COUNTRY>Norway</COUNTRY> <COMPANY>WEA</COMPANY> <PRICE>7.90</PRICE> <YEAR>1996</YEAR> </CD> <CD> <TITLE>The very best of</TITLE> <ARTIST>Cat Stevens</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>Island</COMPANY> <PRICE>8.90</PRICE> <YEAR>1990</YEAR> </CD> <CD> <TITLE>Stop</TITLE> <ARTIST>Sam Brown</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>A and M</COMPANY> <PRICE>8.90</PRICE> <YEAR>1988</YEAR> </CD> <CD> <TITLE>Bridge of Spies</TITLE> <ARTIST>T'Pau</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>Siren</COMPANY> <PRICE>7.90</PRICE> <YEAR>1987</YEAR> </CD> <CD> <TITLE>Private Dancer</TITLE> <ARTIST>Tina Turner</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>Capitol</COMPANY> <PRICE>8.90</PRICE> <YEAR>1983</YEAR> </CD> <CD> <TITLE>Midt om natten</TITLE> <ARTIST>Kim Larsen</ARTIST>

<COUNTRY>EU</COUNTRY> <COMPANY>Medley</COMPANY> <PRICE>7.80</PRICE> <YEAR>1983</YEAR> </CD> <CD> <TITLE>Pavarotti Gala Concert</TITLE> <ARTIST>Luciano Pavarotti</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>DECCA</COMPANY> <PRICE>9.90</PRICE> <YEAR>1991</YEAR> </CD> <CD> <TITLE>The dock of the bay</TITLE> <ARTIST>Otis Redding</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Atlantic</COMPANY> <PRICE>7.90</PRICE> <YEAR>1987</YEAR> </CD> <CD> <TITLE>Picture book</TITLE> <ARTIST>Simply Red</ARTIST> <COUNTRY>EU</COUNTRY> <COMPANY>Elektra</COMPANY> <PRICE>7.20</PRICE> <YEAR>1985</YEAR> </CD> <CD> <TITLE>Red</TITLE> <ARTIST>The Communards</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>London</COMPANY> <PRICE>7.80</PRICE> <YEAR>1987</YEAR> </CD> <CD> <TITLE>Unchain my heart</TITLE> <ARTIST>Joe Cocker</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>EMI</COMPANY> <PRICE>8.20</PRICE> <YEAR>1987</YEAR> </CD> </CATALOG>

mytable.html<html><head><script type="text/javascript">var xmlhttp;function loadXMLDoc(url){

xmlhttp=null;If (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest(); }

else { // code for IE5, IE6 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

xmlhttp.onreadystatechange=onResponse;xmlhttp.open("GET",url,true);xmlhttp.send(null);

}function onResponse(){

if(xmlhttp.readyState!=4) return;if(xmlhttp.status!=200)

{ alert("Problem retrieving XML data"); return; }

txt="<table border='1'>";x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");for (i=0;i<x.length;i++)

{ txt=txt + "<tr>"; xx=x[i].getElementsByTagName("TITLE"); { try { txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; } catch (er) { txt=txt + "<td> </td>"; } } xx=x[i].getElementsByTagName("ARTIST"); { try { txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; }

catch (er) { txt=txt + "<td> </td>";

} } txt=txt + "</tr>";

}txt=txt + "</table>";document.getElementById('copy').innerHTML=txt;

}</script></head><body><div id="copy"><button onclick="loadXMLDoc('cd_catalog.xml')">Get CD info</button></div></body></html>

Output:-

4.Aim:- Create a html file to display a list box populated with usernames .On selecting a user name , corresponding details should be fetched from the table created in the backend.

Code:-

getuser.php<?php$q=$_GET["q"];$con = mysql_connect('localhost', 'scott', 'tiger');if (!$con){ die('Could not connect: ' . mysql_error());}mysql_select_db("Username", $con);$sql="SELECT * FROM user1 WHERE id = '".$q."'";$result = mysql_query($sql);echo "<table border='1'><tr><th>Firstname</th><th>Lastname</th><th>Age</th><th>Hometown</th><th>Job</th></tr>";

while($row = mysql_fetch_array($result)){ echo "<tr>"; echo "<td>" . $row['firstname'] . "</td>"; echo "<td>" . $row['lastname'] . "</td>"; echo "<td>" . $row['Age'] . "</td>"; echo "<td>" . $row['HomeTown'] . "</td>"; echo "<td>" . $row['Job'] . "</td>"; echo "</tr>";}echo "</table>";mysql_close($con);?>

showuser.html<html><head><script type="text/javascript">function showUser(str){

if (str=="") { document.getElementById("txtHint").innerHTML=""; return; }

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) { alert(str); document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } }

xmlhttp.open("GET","getuser.php?q="+str,true);xmlhttp.send();

}</script></head><body><form><select name="users" onchange="showUser(this.value)"><option value="">Select a person:</option><option value="1">abc</option><option value="2">pqr</option><option value="3">xyz</option></select></form><br /><div id="txtHint"><b>Person info will be listed here.</b></div></body></html>

Output :-

5.Design a loginsystem using html,ajax ,php and mysql.(this is not done)

TYBSC prac soln

Education

Transcript of TYBSC prac soln