Wad

Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B

MCA Sem-II (B2)
Practical No. 1
To understand Event Handling & DOM in JavaScript.
1. Write a JavaScript code which will display patient Master details having
following field’s patient name, address, city, contact, no., Date of Birth on submits.
Also when it loads it show the present date. Each of the textbox should show a
default value to be entered.
<html>
<head>
<script type="text/javascript">
function date()
{
var a=document.getElementById("name");
var b=document.getElementById("add");
var c=document.getElementById("city");
var d=document.getElementById("no");
var e=document.getElementById("d");
document.write("<b>Name: </b>"+ a.value+"<br>");

document.write("<b>Adress: </b>"+ b.value+"<br>");
document.write("<b>City: </b>"+ c.value+"<br>");
document.write("<b>Contact: </b>"+ d.value+"<br>");
document.write("<b>D.O.B: </b>"+ e.value+"<br>");
var z = new Date()

document.write("<br><br>"+z.getDate()+"-"+(z.getMonth()+1)+"-
"+z.getFullYear());
</script>
</head>
<body>
<h1>patient Master details</h1>
<form>
Name:<input type="text" placeholder="name" id="name"><br>
address:<textarea placeholder="address" rows="5" cols="6" id="add"></textarea><br>
1
MCA Sem-II (B2)
city:<input type="text" placeholder="city" id="city"><br>

contact no.:<input type="text" placeholder="name" id="no"><br>
D.O.B:<input type="date" id="d"><br>
<input type="button" value="submit" onclick="date()"><br>
</form>
</body>
</html>
Output :-
2
MCA Sem-II (B2)
2. Create a JavaScript code block, which checks the content entered in a form’s Text
element. If the text entered is in lower case convert to upper case when it is
unfocused.
<html>
<head>
<script type = "text/javascript">
function upper()
{
var upper = document.form1.string.value.toUpperCase();
document.form1.string.value = upper;
}
</script>
</head>
<body>
<form name = "form1">
<table>
<tr>
<td>Enter String</td>
<td><input type = "text" name = "string" /></td>
</tr>
<tr>
<td><input type = "button" value = "upper" onclick = "upper()"></td>
</tr>
</table>
</form>
</body>
</html>
Output :-
3
MCA Sem-II (B2)
3. Write a JavaScript code to calculate Sales Commissions as per the total sales value
is entered. Accepted total sales in RS. In a box, after clicking on a Find Commissions
button display the commissions value in a new text. box No one should be able to
change the value of commissions, directly in a text box. Criteria
Sales >50 and sales then comm. = θ
Sales >500 then sales <=500 then Comm = 10 % of sales
Sales < 500 then comm = 50 + 8% of sales.
<html>
<hed>
<script lang="javascript">
function meth()
{
var a=document.getElementById("t1").value;
if((a>=0)&&(a<=50))
{document.getElementById("t2").value="0";}
else if((a>=51)&&(a<=500))
{document.getElementById("t2").value=a*0.1;}
else if(a>=501)
{document.getElementById("t2").value=(50+(0.08*a));}
}
</script></head><body><form>
Enter total sales <input type="text" id="t1"/><br>
<input type="submit" onClick="meth()"/><br>
<br>
Result : <input type="text" id="t2"/><br>
</form>
</body>
</html>
4
MCA Sem-II (B2)
Output :-
 Sales <50
 For sales <500
 For sales>500
5
MCA Sem-II (B2)
4. Create a HTML form that has a number of textboxes. When the form runs in the
browser fill the textboxes with data. Write the JavaScript code which verifies that
all textboxes have been filled. If the textbox has been left empty, popup an Alert
indicating which textbox has been left empty. When alert’s OK button is clicked on,
set focus to that specific textbox.
<html>
<head>
<title>Registration Form</title>
<script type = "text/javascript">
function validate()
{
if(document.myForm.Name.value == "")
{
alert("Please Provide Your Name");
document.myForm.Name.focus();
return false;
}
if(document.myForm.Email.value == "")
{
alert("Please Provide Your Email ID");
document.myForm.Email.focus();
return false;
}
if ((document.myForm.Zip.value == "")||(document.myForm.Zip.value.length != 5))
{
alert("Please Provide a valid zip code format #####");
document.myForm.Zip.focus();
return false;
}
if(document.myForm.Country.value == "-1")
{
alert("Please Provide Your Country Name");
return false;
}
return true;
}
functionvalidateEmail()
{
varemailID = document.myForm.Email.value;
atpos = emailID.indexOf("@");
6
MCA Sem-II (B2)
dotpos = emailID.lastIndexOf(".");
if(atpos< 1 || (dotpos - atpos< 2))
{
alert("Please Enter Correct Email ID");
document.myForm.Email.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form name = "myForm" onsubmit = "return(validate());" >
<table cellspacing = "2" cellpadding = "2" border = "1">
<tr>
<td>Name</td>
<td><input type = "text" name = "Name" /></td>
</tr>
<tr>
<td>Email ID</td>
<td><input type = "text" name = "Email" onchange = "validateEmail();"/></td>
</tr>
<tr>
<td>Zip Code</td>
<td><input type = "text" name = "Zip" /></td>
</tr>
<tr>
<td>Country</td>
<td><select name = "Country" >
<option value = "-1" selected> [Choose Yours]</option>
<option value = "1" >INDIA</option>
<option value = "2" >USA</option>
<option value = "3" >Srilanka</option>
</select>
</td>
</tr>
<tr>
<td colspan = "2" align = "center"><input type = "submit" value = "Submit" /></td>
</tr>
7
MCA Sem-II (B2)
</table>
</form>
</body>
</html>
Output :-
8
MCA Sem-II (B2)
5. Create a form having textboxes, radio buttons and check boxes and reset button. On
clicking the reset button the entire form should be reset.
<html>
<body>
<form>
Name:-<input type="textbox" placeholder="NAME"><br><br>
Gender:-
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other">Other<br><br>
Hobbies:-
<input type="checkbox" name="h" value="f">football
<input type="checkbox" name="h" value="c" checked>Cricket
<input type="checkbox" name="h" value="k">kabaddi<br><br>
<input type="reset" value="Reset">

</form>
</body>
</html>
Output :-
9
MCA Sem-II (B2)
6. Create a login form and open a new window.

<html>
<head>
<title>
Login page
</title>
</head>
<body>
<h1 style="font-family:Comic Sans Ms;text-align="center";font-size:20pt;
color:#00FF00;>
Simple Login Page
</h1>
<form name="login">
Username<input type="text" name="userid"/><br>
Password<input type="password" name="pswrd"/><br>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function check(form)/*function to check userid& password*/
{
/*the following code checkes whether the entered userid and password are matching*/
if(form.userid.value == "myuserid" &&form.pswrd.value == "mypswrd")
{
window.open('pag.html')/*opens the target page while Id & password matches*/
}
else
{
alert("Error Password or Username")/*displays error message*/
}
}
</script>
</body>
</html>
10
MCA Sem-II (B2)
Output :-
11
MCA Sem-II (B2)
8. Write JavaScript code to demonstrate feedback form.

<html>
<body><div>
<table>
<tr><td>
<label> Name :</label>
</td><td>
<input type="text" name="name" id="name">
</td></tr>
<tr><td>
<label> Email Id :</label>
</td>
<td>
<input type="email" name="email" id="email">
</td>
</tr><tr><td>
<label> Age :</label>
</td>td>
<input type="text" name="age" id="age">
</td></tr>
<tr><td>
<label> Phone Number :</label>
</td><td>
<input type="text" name="phone" id="phone">
</td></tr>
<tr><td>
<label> Is this the first time you have visited the site :</label>
</td><td>
<input type="radio" name="vists" id="visit_yes" value="Yes" checked>Yes
<input type="radio" name="visits" id="visit_no" value="No">No
</td></tr>
<tr><td>
<label> Did you find what you need? </label>
</td><td>
<input type="radio" name="find" id="find_yes_all" value="Yes, all of it" checked>Yes, all of it
<input type="radio" name="find" id="find_yes_some" value="Yes, some of it">Yes, some of it
<input type="radio" name="find" id="find_no" value="No">No
</td></tr>
<tr><td>
<label> Please tell us how easy it is to find information on the site. </label>
12
MCA Sem-II (B2)
</td><td>
<input type="radio" name="info" id="info_very_easy" value="Very Easy" checked>Very Easy
<input type="radio" name="info" id="info_easy" value="Easy">Easy
<input type="radio" name="info" id="info_avg" value="Average">Average
<input type="radio" name="info" id="info_difficult" value="Difficult">Difficult
<input type="radio" name="info" id="info_very_difficult" value="Very Difficult">Very
Difficult
</td></tr>
<tr><td>
<label> Please add any comments you have for improving the website.</label>
</td><td>
<textarea name="feedback" id="feedback" cols="60" rows="5"></textarea>
</td></tr><tr>
<td colspan="2" style="text-align:center;">
<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"
onclick="btnSubmit()">
</td></tr>
</table></div>
<script src="script.js" type="text/javascript">
</script></body></html>
functionbtnSubmit()
{
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var age = document.getElementById("age").value;
var phone = document.getElementById("phone").value;
var visits = document.getElementsByName("visits");
for (var v = 0; v <visits.length; v++) {
if (visits[v].checked) {
varvisits_value = visits[v].value;
}
}
var find = document.getElementsByName("find");
for (var f = 0; f <find.length; f++) {
if (find[f].checked) {
varfind_value = find[f].value;
}
}
var info = document.getElementsByName("info");
for (vari = 0; i<info.length; i++) {
if (info[i].checked == true) {
13
MCA Sem-II (B2)
varinfo_value = info[i].value;
}
}
var feedback = document.getElementById("feedback").value;
if (!name || !email || !age || !phone || !visits_value || !find_value || !info_value ||

!feedback) {
alert("Please enter all the fields");
}
var letters = /^[A-Za-z]+$/;
if (!name.match(letters)) {
alert("Enter only letters in name");
}
if (isNaN(age)) {
alert("Enter only number in age");
}
if (age > 3) {
alert("Please check the value of age");
}
if (isNaN(phone)) {
alert("Enter only numbers in phone number");
}
if ((phone.length> 11) || (phone.length != 10)) {

alert("Enter only 10 digits");
}
if (feedback.length> 200) {
alert("Enter only 200 charasters");
}
}
14
MCA Sem-II (B2)
Output :-
15
MCA Sem-II (B2)
16
MCA Sem-II (B2)
9. Design a code for the following
<html>
<body>
<form>
<table border="0" cellpadding="0" cellspacing="10">
<tr>
<td colspan=2><b>Office address</b></td>
</tr>
<tr>
<td>Address 1</td>
<td><input type="text"></td>
</tr>
<tr>
<td>Address 2</td>
</tr>
<tr>
<td>City</td>
</tr>
<tr>
<td>State</td>
</tr>
<tr>
<th>Residence Address</th>
<td><input type="radio" name="add" value="s"> Same as above
<input type="radio" name="add" value="n"> Not Same</td>
</tr>
17
MCA Sem-II (B2)
<tr>
<td>Address 1</td>
</tr>
<tr>
<td>Address 2</td>
</tr>
<tr>
<td>City</td>
</tr>
<tr>
<td>State</td>
</tr>
<tr>
<tr>
<thcolspan="2"><input type="button" value="Submit"></th>
</tr>
</table>
</form>
</body></html>
18
MCA Sem-II (B2)
Output :-
19
MCA Sem-II (B2)
10. Design the following TexArea counter.
<html><head>
<title>(Type a title for your page here)</title>
<script language=JavaScript>


<button onclick="f1()">Onclick</button>
<button ondblclick="ondbclick()">OnDouble click</button>


<p onmouseover="style.color='red'" onmouseout="style.color='green'">Mouse over and
Mouse Out</p>


<p onmousedown="colorChange(this,'pink')"
onmouseup="colorChange(this,'black')">Mouse Down and Mouse UP </p>
<script src="script.js" type="text/javascript"></script>

</body>
</html>
Script.js
function f1() {
document.write("onclick");
alert("on Click");
}
functionondbclick() {
alert("double click");
}
functioncolorChange(el, cr) {
el.style.color = cr;
}
22
MCA Sem-II (B2)
Output :-
23
MCA Sem-II (B2)
12 .Write a JS to identify the correct image captcha.

<html>
<head>
<title> Image Capcha</title>
</head>
<body onmousedown="identify(event)">
<img id="I1" src="rf4.jpg" />
<img id="I2" src="rf5.jpg" />
</body>
</html>
function identify(e) {
var t;
if (!e) {
var e = window.event;
}
if (e.target) {
t = e.target;
document.write(t);
}
if (event.target.id == "rf4") {
alert("selected correct Image");
}
if (event.target.id == "rf5") {
alert("selected Worng Image");
}
}
24
MCA Sem-II (B2)
Output :-
25
MCA Sem-II (B2)
13. Validate the following form.

a. Name (Name should contains alphabets and the length should not be less than 6
characters).
b. E-mail id (should not contain any invalid and must follow the standard pattern
name@domain.com).
c. Phone number (Phone number should contain 10 digits only).
Should be disabled when clicked.
d. Comments should only be text.
e. All fields should be filled.
<html>
<head>
<script src="script.js" type="text/javascript">
</script></head?
<body><form>
Name : <input type="text" name="name" id="name" size="30"> <br> <br>
E-mail Address :<input type="email" name="email" id="email" size="35"><br><br>
Telephone : <input type="text" name="phone" id="phone" size="30">
<br><br>
<input type="checkbox" checked> Please do not call me.
<br><br>
What can we help you with?
<select>
<option>Customer Service</option>
<option>Call Services</option>
</select><br><br>
Comments : <textarea name="comments" id="comments" cols="30" rows="2"></textarea>
26
MCA Sem-II (B2)
<br><br>
<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"
onclick="btnSubmit()">
<input type="reset" value="reset">
</form>
</body>
</html>
Script.js
functionbtnSubmit(){
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
var comments = document.getElementById("comments").value;
var letters = /^[A-Za-z]+$/;
varemailVaildation = /\S+@\S+\.\S+/;
if(!name || !email || !phone || !comments){

alert("Pllease fill all fields");
}
if(!name.match(letters)){
alert("Enter only letters");
}
if(!email.match(emailVaildation)){
alert("Please enter a correct email id");
}
if(isNaN(phone)){
alert("Please enter only numbers in phone number");
}else if((phone.length> 11) || (phone.length != 10)){
alert("Please enter only 10 numbers in phone number");
}
if(!comments.match(letters)){
alert("Enter only letters");
}
}
27
MCA Sem-II (B2)
Output :-
28
MCA Sem-II (B2)
1. Write a JavaScript to convert all the context of textboxes to UpperCase onblur

event.
CODE:
.html
<html>
<head></head>
<body>
<script src="abc.js" type="text/javascript"></script> NAME:<input
type="text" id ="name" onblur="uppercase()"/><br> ADDRESS:<input
type="text" id ="address" onblur="uppercase()"/><br> CITY:<input
type="text" id ="city" onblur="uppercase()"/><br> HOBBIES:<input
type="text" id ="hobbies" onblur="uppercase()"/><br><input
type="submit" value="SUBMIT"/></body>
</html>
.js
function uppercase() {
document.getElementById("name").value=document.getElementById("name").value.toUpperCa
se();
document.getElementById("address").value=document.getElementById("address").value.toUp
p erCase();
document.getElementById("city").value=document.getElementById("city").value.toUpperCase()
;
document.getElementById("hobbies").value=document.getElementById("hobbies").value.toUpp
erCase();
29
MCA Sem-II (B2)
OUTPUT:
30
MCA Sem-II (B2)
2. Write a JavaScript to find odd numbers from 1 to 40.
CODE:
.html
<html>
<head>
</head>
<body>
<script src="odd.js" type="text/javascript">
</script>
NUMBER TO BE ENTERED:<input type="text" id ="number"
onblur="odd()"/><br> RESULT:<input type="text" id ="result"
onblur="odd()"/><br></body>
</html>
.js
function odd()
{
alert("HELLOO");
var
n=document.getElementById("number").value=document.getElementById("number").value.toU
pperCase();
if(n%2==0)
{
document.getElementById("result").value="not odd";
}
else{
document.write(n +"IS A ODD NUMBER!!")
}
}
31
MCA Sem-II (B2)
OUTPUT:-
32
MCA Sem-II (B2)
3. Write a JavaScript to calculate sales commission as per total sales value

entered. Accepted total sales in Rs. in a textbox after clicking on find
commission button-display the commission value in a new text box.
CODE:
.html
<html>
<head>
alert("Welcome");
function meth()
if((a>=0)&&(a<=50))
{document.getElementById("t2").value="0";}
else if((a>=51)&&(a<=500))
{document.getElementById("t2").value=a*0.1;}
else if(a>=501)
{document.getElementById("t2").value=(50+(0.08*a));}
</script></head><body><form>
Enter total sales <input type="text"
id="t1"/><br><input type="submit"
onClick="meth()"/><br><br>
Result : <input type="text" id="t2"/><br>
</form>
</body></html>
33
MCA Sem-II (B2)
OUTPUT:-
<=50
>=51 to <=500
>=501
34
MCA Sem-II (B2)
4. Write a JavaScript code to implement Dense Array.
CODE:
.html
<html>
<head>
alert("Welcome");
function meth()
friends=new Array(5);
friends[0]="a";
friends[1]="b";
friends[2]="c";
friends[3]="d";
document.write("Print<br>"+friends[0]+"<br>");
var x=friends.join();
document.write("Join method :<br>"+x);
</script>
</head>
<body>
<input type="submit" value="array" onClick="meth()"/>
</body>
</html>
35
MCA Sem-II (B2)
OUTPUT:-
36
MCA Sem-II (B2)
5. Create html form that has number of text boxes when the form runs on browser fill
the text boxes with data. Write a JavaScript code to verify if the textboxes are empty an
alert dialogue box is popped indicating which textbox is left empty.
CODE:
.html
<html>
<head>
<script>
function demo()
var name=document.getElementById("t1").value;
var city=document.getElementById("t2").value;
var state=document.getElementById("t3").value;
var country=document.getElementById("t4").value;
if(!name)
alert("Name cannot be empty");
document.getElementById("t1").classList.add("err");
else
document.getElementById("t1").classList.add("err1");
if(!city)
37
MCA Sem-II (B2)
alert("City cannot be empty");

else
if(!state)
alert("State cannot be empty");
else
if(!country)
alert("Country cannot be empty");
else
38
MCA Sem-II (B2)
</script>
<style>
.err{
background-color:red;
.err1{
background-color:yellow;
</style>
</head>
<body>
Name :<input type="text" id="t1"/><br>
City :<input type="text" id="t2"/><br>
State :<input type="text" id="t3"/><br>
Country :<input type="text" id="t4"/><br>
<input type="submit" value="Submit" id = "b1" onClick="demo()"/><br>
</body>
</html>
39
MCA Sem-II (B2)
OUTPUT:-
40
MCA Sem-II (B2)
6. Write a JavaScript code to check whether the entered number is prime or not with
prompt dialogue box.
CODE:
.html
<html>
<head>
alert("Welcome");
function meth1()
var a=prompt("Please enter the number", "00");
if (a!= null) {
document.getElementById("t1").innerHTML =
"Your number is " + t1 + "entered by you";
if(a%2==1)
{document.getElementById("t2").value="PRIME
NUMBER";} else
{document.getElementById("t2").value="NOT A PRIME NUMBER";}
} </script></head><body><form>
Enter the number: <input type="text"
id="t1"/><br><input type="submit" onClick="meth1
()"/><br><br> Result : <input type="text"
id="t2"/><br></form></body></html>
41
MCA Sem-II (B2)
OUTPUT:-
42
MCA Sem-II (B2)
7. Write a JavaScript code to ask a question and accept an answer from the user.
User is given 3 chances. The 2nd and 3rd chance to provide and answer can be
accepted or rejected. If accepted the program prompts for an answer again.
CODE:
.html
<html>
<head>
<script>
var q="What is 10+10 ? ";
var ans=20;
var correct="The given input is Correct";
var incorrect="The given input is Incorrect";
var resp=prompt(q,"0");
for(var count=0;count<3;count++) {
if(resp!=ans) {
confirm("Wrong !! Press OK for other chance");
resp=prompt(q,"0");
if(count==1) {
alert("All the best") }
else {
alert("Great !! You are right");
count=3;
43
MCA Sem-II (B2)
var output=(resp==ans)?correct:incorrect;
document.write("<br>"+output);
</script>
</head>
</html>
OUTPUT:-
44
MCA Sem-II (B2)
45
MCA Sem-II (B2)
8. Write a JavaScript code to event handling.
CODE:
.html
<html>
<head>
</head>
<body>
<button onClick="f1()">OnClick</button>
<button ondblClick="f2()">On Double Click</button>
<p onmouseover="style.color='red' "onmouseout="style.color='green'">Hi Welcome to

BVIMIT MCA </p>
<p
onmousedown="colorChange(this,'pink')"onmouseup="colorChnage(this,'yellow')">Bye..Be
Back Soon :)</p>
<script src="event.js">
</script>
</body>
</html>
.js
function f1() {
document.write("onClick");
alert("On Click"); }
function f2() {
alert("Double Click"); }
function colorChange(e1,cr) {
e1.style.color=cr;
46
MCA Sem-II (B2)
OUTPUT:-
47
MCA Sem-II (B2)
9. Write a JavaScript program to accept a string from user and replace vowels in the
string with asterisk using built-in functions
CODE:
.html
<html>
<head>
<title>FORM</title>
<body>
ENTER ANY STRING : <input type="string" id="t1"/><br>
<input type="submit" value="SUBMIT" id="b1"
onClick="btnsubmit()"/><script src="script1.js"
type="text/javascript"></script>
</body>
</html>
.js
function btnsubmit() {
var temp=new Array();
for(var i=0;i<a.length;i++)
{var s=a.charAt(i);
if((s=='a')||(s=='e')||(s=='i')||(s=='o')||(s=='u')||(s=='A')||(s=='E')||(s=='I')||(s=='O')||(s=='U'))
{temp.push("*");
}
48
MCA Sem-II (B2)
else
{temp.push(s);
document.write(temp.join(""));
OUTPUT:-
49
MCA Sem-II (B2)
50
MCA Sem-II (B2)
10. Write a JavaScript program to demonstrate built-in functions of strings.
CODE:
.html
<html>
<head>
<script lan="javascript">
var t1= "shruti nair";
var l=t1.length;
alert(l);
var s1="Please locate where 'locate'occurs";
var p=s1.indexOf("locate");
alert(p);
var p1=s1.lastIndexOf("locate");
alert(p1);
var p2=s1.indexOf("locate",1);
alert(p2);
var s3="ABC XYZ NAIR";
var r=s3.slice(7,13);
alert(r);
var r1=s3.slice(-12,-6);
alert(r1);
var r=s3.substring(7,13);
alert(r);
var r=s3.substr(7,13);
alert(r);
51
MCA Sem-II (B2)
var n=s3.replace("ABC","SHRUTI");
alert(n);
var n1=n.replace("XYZ","SHASHIDHARAN");
alert(n1);
var t3=s3.toUpperCase();
alert(t3);
var t4=s3.toLowerCase();
alert(t4);
var t=s3.concat(n);
alert(t);
var q=s3.charAt(5);
alert(q); </script></head></html>
52
MCA Sem-II (B2)
OUTPUT:
53
MCA Sem-II (B2)
54
MCA Sem-II (B2)
11. Write a JavaScript program to demonstrate built-in functions of date.
CODE:
.html
<html>
<title>DATE STRING BULTIN-
FUNCTIONS</title><body>
<p id="demo">
<script>
var d=new Date();
document.getElementById("demo").innerHTML =d;
var d1=new Date("October 08,1995 11:27:00");
alert(d1);
var d2=new Date("10000");
alert(d2);
var d3=d.getDate();
alert(d3);
var d4=d.getHours();
alert(d4);
var d5=d.getTime();
alert(d5);
var d6=new Date(99,4,24,10,20,30,0);
alert(d6);
var d7=d6-d1;
alert(d7);
var d8=d.getFullYear();
55
MCA Sem-II (B2)
alert(d8);
var d9=d.getUTCDay();
alert(d9);
var d10=d.getDate();
alert(d10);
</script>
</p>
</body>
</html>
OUTPUT:-
56
MCA Sem-II (B2)
12.Write a JavaScript to calculate user’s age.
CODE:
.html
<html>
<head>
<script>
function getAge(date)
var now=new Date();
var b=new Date(a);
var age=now.getFullYear()-b.getFullYear();
alert(age);
</script>
</head>
</body>
ENTER DATE OF BIRTH :
<input type="date" id="t1"><br>
<input type="submit" id="b1" value="SUBMIT"
onClick="getAge()"><br></body>
</html>
57
MCA Sem-II (B2)
OUTPUT:
58
MCA Sem-II (B2)
13. Write a JavaScript to greet the user according to the time he has logged in as Good
Morning, Good Afternoon, Good Evening, Good Night.
CODE:
.html
<html> <head>
<title>LOGIN FORM</title> <body>
EMAIL : <input type="email" id="t1"/><br>
PASSWORD : <input type="password" id="t2"/><br>
<input type="submit" value="SUBMIT" id="b1"
onClick="btnsubmit()"/><input type="reset" value="RESET" id="b2"
onClick="btnreset()"/><script src="script.js" type="text/javascript">
</script></body> </html>
.js
function btnsubmit() {
var email=document.getElementById("t1").value;
var password1=document.getElementById("t2").value;
if ((email==='abc@gmail.com')&&(password1==='ABC'))
var myDate = new Date();
var hrs = myDate.getHours();
var greet;
if (hrs < 12)
greet = 'Good Morning';
else if (hrs >= 12 && hrs <= 17)
59
MCA Sem-II (B2)
greet = 'Good Afternoon';
else if (hrs >= 17 && hrs <= 24)
greet = 'Good Evening';
alert(greet); }
else {
alert("ENTERED EMAIL AND PASSWORD DOESN'T MATCH"); } }
function btnreset()
var email=document.getElementById("t1").value="";
var password1=document.getElementById("t2").value="";
OUTPUT:
60
MCA Sem-II (B2)
14. Write a JavaScript program to display math function
CODE:
.html
<html><title>DATE STRING BULTIN-
FUNCTIONS</title><body><p id="demo"><script> var
d=Math.abs(15);
alert("Math.abs(15)= "+d);
var d1=Math.ceil(15.45);
alert("Math.ceil(15.45)= "+d1);
var d2=Math.cos(90);
alert("Math.cos(90) ="+d2);
var d3=Math.floor(15.45);
alert("Math.floor(15.45)= "+d3);
var d4=Math.pow(2,2);
alert("Math.pow(2,2)= "+d4);
var d5=Math.random();
alert("Math.random()= "+d5);
var d6=Math.sin(180);
alert("Math.sin(180)= "+d6);
var d7=Math.sqrt(4);
alert("Math.sqrt(4)= "+d7);
var d8=Math.tan(90);
alert("Math.tan(90)= "+d8);
</script> </p> </body></html>
61
MCA Sem-II (B2)
OUTPUT:
62
MCA Sem-II (B2)
63
MCA Sem-II (B2)
15. Write a JavaScript program to display browser attributes.
CODE:
.html
<html>
<head>
<script>
function display()
with(document)
write("Navigator properties are");
writeln(navigator.appName);
writeln(navigator.appVersion);
writeln(navigator.aapCodeName);
writeln(navigator.platform);
writeln(navigator.language);
writeln(navigator.cookieEnabled);
writeln(navigator.browserLanguage);
</script>
</head>
<body onLoad=display()>
</body>
</html>
64
MCA Sem-II (B2)
OUTPUT:
65
MCA Sem-II (B2)
Practical No. 2
To implement AJAX.
1. Write an Ajax program to display the content of text file.
CODE:
.html
<html>
<head>
<title>Ajax to read from file </title>
</head>
<body>
<div style ="width:300px;height:100px;">
CLICK ON BUTTON BELOW
</div>
<button type="button" onClick="read()">SHOW
CONTENT</button><div id="myDiv"></div>
</body>
</html>
.js
function read() {
var a;
if(window.XMLHttpRequest) {
a=new XMLHttpRequest(); }
else {
a=new ActiveXObject("Microsoft.XMLHTTP"); }
a.onreadystatechange=function() {
66
MCA Sem-II (B2)
if (a.readyState == 4 && a.status ==200)
{ document.getElementById("myDiv").innerHTML=a.responseText; }
a.open("POST","file.txt",true);
a.send();
file .text
WELCOME TO BVIMIT BELAPUR NAVI-MUMBAI MCA SEM 2.....:
OUTPUT:
67
MCA Sem-II (B2)
2. Write an Ajax program to check whether entered number is even or odd.
CODE:
.php
<html><head>
<title>EVEN ODD NUMBER</title></head>
<body><div>
<label>Enter any number </label>
<br>
<input type="text" name="num"
id="num"><button type="submit" name="btnSubmit"
value="btnSubmit"
onclick="btnSubmit()">Submit</button><br><br>
<div id="myDiv" style="font-weight:600;font-
size:1.5em;"></div></div><script src="script.js"
type="text/javascript"></script></body></html>
.php
<?php
$num=$_REQUEST["num"];
if($num%2==0) {
echo "EVEN NUMBER"; }
else {
echo "ODD NUMBER"; } ?>
.js
function btnSubmit()
{
var num = document.getElementById("num").value;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (this.readyState==4 && this.status==200)
{
document.getElementById("myDiv").innerHTML=this.responseText; }
68
MCA Sem-II (B2)
}
xmlhttp.open("GET","check.php?num="+num,true);
xmlhttp.send();
}
OUTPUT:
69
MCA Sem-II (B2)
3. Write an Ajax program to create a table at run time.
CODE:
.html
<html>
<head>
<title>Assign Dynamic Rows</title>
</head>
<body>
<div>
<label>Enter a number of rows </label><br>
<input type="text" name="rows" id="rows">
<button type="submit" name="btnSubmit" value="btnSubmit"
onclick="btnSubmit()">Submit</button><br><br>
<div id="myDiv" style="font-weight:600;font-
size:1.5em;"></div></div><script src="script.js"
type="text/javascript"></script></body>
</html>
.php
<?php
$rows=$_REQUEST["rows"];
echo "<table border=\"1\">";
echo "<thead>";
echo "<tr>";
echo "<th> Roll No </th>";
echo "<th> Name </th>";
echo "<th> Marks </th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
for($i=0;$i<$rows;$i++)
{
echo "<tr>";
echo "<td>" .($i+1). "</td>";
echo "<td>" .($i+1). "</td>";
echo "<td>" .($i+1). "</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
70
MCA Sem-II (B2)
?>
.js
function btnSubmit() {
var rows = document.getElementById("rows").value;
} else {
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("myDiv").innerHTML=this.responseText
;
}
}
xmlhttp.open("GET","createTable.php?rows="+rows,true);
xmlhttp.send();
}
71
MCA Sem-II (B2)
OUTPUT:
72
MCA Sem-II (B2)
CODE:
.html
<!DOCTYPE html>
<html><style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
}
th,td { padding: 5px; }
</style> <body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Get my CD
collection</button><br><br>
<table id="demo"></table>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD"); for
(i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>
73
MCA Sem-II (B2)
.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>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COMPANY>Virgin records</COMPANY>
<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>
74
MCA Sem-II (B2)
<ARTIST>Bee Gees</ARTIST>
<COMPANY>Polydor</COMPANY>
<YEAR>1998</YEAR>
</CD>
<CD>
<TITLE>Sylvias Mother</TITLE>
<ARTIST>Dr.Hook</ARTIST>
<COMPANY>CBS</COMPANY>
<PRICE>8.10</PRICE>
<YEAR>1973</YEAR>
</CD>
<CD>
<TITLE>Maggie May</TITLE>
<ARTIST>Rod Stewart</ARTIST>
<COMPANY>Pickwick</COMPANY>
<PRICE>8.50</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Romanza</TITLE>
<ARTIST>Andrea Bocelli</ARTIST>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>When a man loves a woman</TITLE>
<ARTIST>Percy Sledge</ARTIST>
<COMPANY>Atlantic</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Black angel</TITLE>
<ARTIST>Savage Rose</ARTIST>
<COMPANY>Mega</COMPANY>
<YEAR>1995</YEAR>
</CD>
75
MCA Sem-II (B2)
<CD>
<TITLE>1999 Grammy Nominees</TITLE>
<ARTIST>Many</ARTIST>
<COMPANY>Grammy</COMPANY>
<YEAR>1999</YEAR>
</CD>
<CD>
<TITLE>For the good times</TITLE>
<ARTIST>Kenny Rogers</ARTIST>
<COMPANY>Mucik Master</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>Big Willie style</TITLE>
<ARTIST>Will Smith</ARTIST>
<COMPANY>Columbia</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>Tupelo Honey</TITLE>
<ARTIST>Van Morrison</ARTIST>
<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>
<COMPANY>Island</COMPANY>
<PRICE>8.90</PRICE>
76
MCA Sem-II (B2)
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Stop</TITLE>
<ARTIST>Sam Brown</ARTIST>
<COMPANY>A and M</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Bridge of Spies</TITLE>
<ARTIST>T'Pau</ARTIST>
<COMPANY>Siren</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Private Dancer</TITLE>
<ARTIST>Tina Turner</ARTIST>
<COMPANY>Capitol</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Midt om natten</TITLE>
<ARTIST>Kim Larsen</ARTIST>
<COMPANY>Medley</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Pavarotti Gala Concert</TITLE>
<ARTIST>Luciano Pavarotti</ARTIST>
<COMPANY>DECCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1991</YEAR>
</CD>
<CD>
<TITLE>The dock of the bay</TITLE>
<ARTIST>Otis Redding</ARTIST>
77
MCA Sem-II (B2)
<COMPANY>Stax Records</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1968</YEAR>
</CD>
<CD>
<TITLE>Picture book</TITLE>
<ARTIST>Simply Red</ARTIST>
<COMPANY>Elektra</COMPANY>
<PRICE>7.20</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Red</TITLE>
<ARTIST>The Communards</ARTIST>
<COMPANY>London</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Unchain my heart</TITLE>
<ARTIST>Joe Cocker</ARTIST>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR>
</CD>
</CATALOG>
OUTPUT:
78
MCA Sem-II (B2)
5. Write an Ajax program to find a name and provide the hint feature.
CODE:
.html
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML =
""; return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.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)"></form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
.php
<?php
// Array with names
$a[] = "Anna"; $a[]
= "Brittany"; $a[] =
"Cinderella"; $a[] =
"Diana"; $a[] =
"Eva";
79
MCA Sem-II (B2)
$a[] = "Fiona";
$a[] =
"Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johanna";
$a[] = "Kitty";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ophelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";
// get the q parameter from

URL $q = $_REQUEST["q"];
$hint = "";
// lookup all hints from array if $q is different from

"" if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name)
{
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= ", $name";
}
}
}
}
80
MCA Sem-II (B2)
// Output "no suggestion" if no hint was found or output correct

values echo $hint === "" ? "no suggestion" : $hint
?>
OUTPUT:
81
MCA Sem-II (B2)
6. Write an Ajax program to upload a file.6.1 On drive.
CODE:
.php
<html>
<body>
<form action="uploader.php" method="post" enctype="multipart/form-data">
select file :<br>
<input type="file" name="fileToUpload"/>
<input type="submit" value="Upload file" name="submit"/>
</form>
</body>
</html>
.php
<?php
$target_path="d:/";
$target_path=$target_path.basename($_FILES['fileToUpload']['name']);
if(move_uploaded_file($_FILES['fileToUpload']['tmp_name'],$target_path))
{
echo "File uploaded Successfully .. ";
}
else
{
echo "File not uploaded !! ";
}
?>
82
MCA Sem-II (B2)
OUTPUT:
83
MCA Sem-II (B2)
6.2 On Server.
CODE:
.html
<html>
<head>
</head>
<body>
<form action="uploader1111.php" method="post" enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file"><br>
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>
.php
<?php
if($_FILES['file']['error'] > 0)
{
echo "error: " .$_FILES['file']['error']."<br>";
}
else
{
echo "upload:" .$_FILES['file']['name']."<br>";
echo "type:" .$_FILES['file']['type']."<br>";
echo "size:" .($_FILES['file']['size']/1024)."<br>";
echo "stored in:" .$_FILES['file']['tmp_name'];
}
?>
84
MCA Sem-II (B2)
OUTPUT:
85
MCA Sem-II (B2)
7. Write an Ajax and php program to perform Addition, Subtraction,

Multiplication and Division.
CODE:
.php
<html>
<head>
<script>
function showResult(id,url)
var xmlhttp;
if (window.XMLHttpRequest)
else
var f1 = parseInt(document.getElementById('f1').value); var f2 =
parseInt(document.getElementById('f2').value); var result;
xmlhttp.onreadystatechange=function(
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById("id").innerHTML=xmlhttp.responseText;
}
86
MCA Sem-II (B2)
if("+"==document.getElementById("options").value)
result=f1+f2;
document.getElementById("res").value=result;
else if("-"==document.getElementById("options").value)
result=f1-f2;
else if("*"==document.getElementById("options").value)
result=f1*f2;
else
{
result=f1/f2;
xmlhttp.open("GET",url,true);
xmlhttp.send();
</script>
87
MCA Sem-II (B2)
</head>
<body>
<form name=form1 method=get>
Enter any Number: <input type="text" name="f1" id="f1" /><br /><br />
Enter any other Number: <input type="text" name="f2" id="f2" /><br /><br />
Result : <input type="text" name="res" id="res" /><br /><br /><select

id="options">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option></select>
<input type=button value="Result" name=result

onClick="showResult('ajaxDiv','cal.php')">
</form>
</body>
</html>
88
MCA Sem-II (B2)
OUTPUT:
89
MCA Sem-II (B2)
90
MCA Sem-II (B2)
8. Write an Ajax and php program to perform form validations
CODE:
.php
<html>
<head>
<style> .error {color: #FF0000;}</style></head><body><?php
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = ""; $name =
$email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") { if
(empty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = test_input($_POST["name"]);
if (empty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = test_input($_POST["email"]);
91
MCA Sem-II (B2)
if (empty($_POST["website"])) {
$website = "";
} else {
$website = test_input($_POST["website"]);
if (empty($_POST["comment"])) {
$comment = "";
} else {
$comment = test_input($_POST["comment"]);
if (empty($_POST["gender"])) {
$genderErr = "Gender is required";
} else {
$gender = test_input($_POST["gender"]);
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
92
MCA Sem-II (B2)
?>
<h2>PHP Form Validation Example</h2>
<p><span class="error">* required field.</span></p>
<form method="post" action="<?php echo

htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Name: <input type="text" name="name">
<span class="error">* <?php echo $nameErr;?></span>
<br><br>
E-mail: <input type="text" name="email">
<span class="error">* <?php echo $emailErr;?></span><br><br>

Website: <input type="text" name="website">
<span class="error"><?php echo $websiteErr;?></span><br><br>
Comment: <textarea name="comment" rows="5" cols="40"></textarea>
<br><br>
Gender:
<input type="radio" name="gender" value="female">Female
93
MCA Sem-II (B2)
<input type="radio" name="gender" value="male">Male <span

class="error">* <?php echo $genderErr;?></span><br><br>
<input type="submit" name="submit" value="Submit"></form>
<?php
echo "<h2>Your Input:</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>"; echo $comment;
echo "<br>"; echo $gender; ?> </body> </html>
94
MCA Sem-II (B2)
OUTPUT:
95
MCA Sem-II (B2)
9. Write an Ajax and php program to select from the drop down list name of the
student and display in the tabular format student details like roll no. , name and
percentage.
CODE:
.php
<?php
$student = array
array("Shruti",32,80),
array("Ruchi",43,89),
array("Rohini",7,85),
array("Aarti",8,87)
);
$q = $_REQUEST['q'];
//echo $q;
for($r=0;$r<4;$r++)
if($student[$r][0]==$q)
echo "<html><body><table border='1'><tr>
<th>Name</th>
<th>RollNo</th>
</tr><tr>
<td>";
echo $student[$r][0]."</td><td>";
96
MCA Sem-II (B2)
echo $student[$r][1]."</td><td>";
echo
$student[$r][2]."</td></tr></table></body></html>"; }
} ?>
.php
<html>
<head>
<title> Student Details </title>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)"><option

value="">Select a Student:</option><option
value="Shruti">Shruti</option>
<option value="Ruchi">Ruchi</option><option
value="Rohini">Rohini</option><option
value="Aarti">Aarti</option>
</select>
</form><br><div id="txtHint"><b></b></div><script
src="script.js" type="text/javascript"></script></body></html>
.js
function showUser(str) {
97
MCA Sem-II (B2)
if (str=="") {
document.getElementById("txtHint").innerHTML=""; return;
} else {
document.getElementById("txtHint").innerHTML=this.responseText;
}
xmlhttp.open("GET","student.php?q="+str,true);
xmlhttp.send();
}
98
MCA Sem-II (B2)
OUTPUT:
99
MCA Sem-II (B2)
10.Write an Ajax and php program to select the student and display details from
MYSQL.
CODE:
.php
<html>
<head>
<title> Student Details </title>
</head>
<body>
<div>
<div>
<label> Enter the starting aplabet </label><br><input
type="text" name="name" id="name"><br><button
type="submit" name="btnSubmit"
value="btnSubmit" onclick="btnSubmit()">Submit</button></div>
</div>
<div id="result"><b></b></div>
<script src="script.js" type="text/javascript"></script></body>
</html>
getDetails.php
<?php
$name=$_REQUEST["name"];
$dbhost = "localhost";
$dbusername = "root";
$dbpassword = "";
$currentdb = "pracs";
100
MCA Sem-II (B2)
$connection = mysqli_connect($dbhost,$dbusername,$dbpassword);
if(!$connection){
die('Could not connect' .mysql_error()); }

if(!mysqli_select_db($connection, $currentdb)){
die('Could not connect to database' .mysql_error());
$sql="Select * from student where name LIKE '$name%' ";

$result=mysqli_query($connection, $sql);
echo "<table cellpadding=\"5\" border=\"2\">";
echo"<thead>";
echo "<th> ID </th>";
echo "<th> Name </th>";
echo "<th> Email </th>";
echo "<th> Address </th>";
echo "<th> City </th>";
echo "<th> State </th>";
echo "<th> Country </th>";
echo "</thead>";
echo "<tbody>";
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){
echo "<tr>";
echo "<td>" .$row["ID"]. "</td>"; echo "<td>"
.$row["Name"]. "</td>"; echo "<td>"
.$row["Email"]. "</td>"; echo "<td>"
101
MCA Sem-II (B2)
.$row["Address"]. "</td>"; echo "<td>"
.$row["City"]. "</td>"; echo "<td>"
.$row["State"]. "</td>"; echo "<td>"
.$row["Country"]. "</td>";
echo "</tr>"; }
echo "</tbody>";
echo "</table>";
?>
.js
function btnSubmit() {
var name = document.getElementById("name").value; if

(window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest(); } else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

document.getElementById("result").innerHTML=this.responseText;
} }
xmlhttp.open("GET","getDetails.php?name="+name,true);
xmlhttp.send();
}
102
MCA Sem-II (B2)
OUTPUT:
103
MCA Sem-II (B2)
104
MCA Sem-II (B2)
Practical No. 3
To implement Bootstrap.
1. Design a web page in bootstrap using grid system.
CODE:-
<!DOCTYPE

html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Grid System</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="vendor/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="vendor/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<link href="vendor/bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"
rel="stylesheet">
</head><body>
<div class="container-fluid">
<div class="row">
<div class="col-md-10 col-md-offset-1"><div
class="col-md-6">
<h2 class="text-center"> Table Basic</h2>
<table class="table">
<thead><tr><th>
Emp. no.
</th><th> Name </th>
<th>Designation</th>
<th>Manager</th>
</tr></thead>
<tbody>
<tr><td> 101 </td>
<td> Joe </td>
<td> Developer </td>
<td> 20000 </td>
</tr>
<tr>
<td> 102 </td>
<td> Jerry </td>
<td> Manager </td>
<td> 2000000 </td>
</tr>
<tr>
<td> 103 </td>
105
MCA Sem-II (B2)
<td> Jack </td>

<td> Designer </td>
<td> 500000 </td>
</tr>
<tr>
<td> 102 </td>
<td> Rayan </td>
<td> 60000 </td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<h2 class="text-center"> Table Stripped</h2><table
class="table table-striped"><thead>
<tr>
<th>Emp. no.</th>
<th>Name</th>
<th>Manager</th></tr>
</thead><tbody>
<tr>
<td> 101 </td>
<td> Joe </td>
<td> 20000 </td>
</tr>
<tr>
<td> 102 </td>
<td> Jerry </td>
<td> Manager </td>
<td> 2000000 </td>
</tr>
<tr>
<td> 103 </td>
<td> Jack </td>
<td> Designer </td>
<td> 500000 </td>
</tr>
<tr>
<td> 102 </td>
<td> Rayan </td>
106
MCA Sem-II (B2)
<td> 60000 </td>

</tr>
</tbody>
</table>
</div>
<h2 class="text-center"> Table Bordered</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>Emp. no.</th>
<th>Name</th>
<th>Manager</th>
</tr></thead><tbody>
<tr>
<td> 101 </td>
<td> Joe </td>
<td> 20000 </td>
</tr>
<tr>
<td> 102 </td>
<td> Jerry </td>
<td> Manager </td>
<td> 2000000 </td>
</tr>
<tr>
<td> 103 </td>
<td> Jack </td>
<td> Designer </td>
<td> 500000 </td>
</tr>
<tr>
<td> 102 </td>
<td> Rayan </td>
<td> 60000 </td>
</tr>
</tbody>
</table>
</div>
<h2 class="text-center"> Table Hover</h2>
<table class="table table-hover">
<thead>
107
MCA Sem-II (B2)
<tr>
<th>Emp. no.</th>
<th>Name</th>
<th>Manager</th>
<tr>
<td> 101 </td>
<td> Joe </td>
<td> 20000 </td>
</tr>
<tr>
<td> 102 </td>
<td> Jerry </td>
<td> Manager </td>
<td> 2000000 </td>
</tr>
<tr>
<td> 103 </td>
<td> Jack </td>
<td> Designer </td>
<td> 500000 </td>
</tr>
<tr>
<td> 102 </td>
<td> Rayan </td>
<td> 60000 </td>
</tr></tbody></table>
</div></div></div></div>
</body>
</html>
108
MCA Sem-II (B2)
OUTPUT:
109
MCA Sem-II (B2)
2. Design a web page in bootstrap for different types of image formats
CODE:-
<!DOCTYPE

html>
<title>Table Styles</title>
rel="stylesheet">
</head>
<body>
<div class="row">
class="col-md-3">
<h2 class="text-center"> Table Basic</h2>
<table class="table">
<thead>
<tr><th>Emp. no.</th>
<th>Name</th>
<th>Designation </th>
<th>Manager</th>
</tr></thead>
<tbody><tr>
<td> 101 </td>
<td> Joe </td>
<td> 20000 </td>
</tr><tr>
<td> 102 </td>
<td> Jack </td>
<td> Manager </td>
<td> 2000000 </td>
</tr><tr>
<td> 103 </td>
110
MCA Sem-II (B2)
<td> Jerry </td>

<td> Designer </td>
<td> 500000 </td>
</tr><tr>
<td> 102 </td>
<td> Bob </td>
<td> 60000 </td>
</tr></tbody></table></div>
<h2 class="text-center"> Table Stripped</h2>
<table class="table table-striped">
<thead><tr>
<th>Emp. no.</th>
<th>Name</th>
<th>Manager</th>
<tr>
<td> 101 </td>
<td> Joe </td>
<td> 20000 </td>
</tr>
<tr>
<td> 102 </td>
<td> Jack </td>
<td> Manager </td>
<td> 2000000 </td>
</tr>
<tr>
<td> 103 </td>
<td> Jerry </td>
<td> Designer </td>
<td> 500000 </td>
</tr>
<tr>
<td> 102 </td>
<td> Bob </td>
<td> 60000 </td>
</tr>
</tbody>
</table>
111
MCA Sem-II (B2)
</div>
<h2 class="text-center"> Table Bordered</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>Emp. no.</th>
<th>Name</th>
<th>Manager</th>
<tr>
<td> 101 </td>
<td> Joe </td>
<td> 20000 </td>
</tr>
<tr>
<td> 102 </td>
<td> Jack </td>
<td> Manager </td>
<td> 2000000 </td>
</tr>
<tr>
<td> 103 </td>
<td> Jerry </td>
<td> Designer </td>
<td> 500000 </td>
</tr>
<tr>
<td> 102 </td>
<td> Bob </td>
<td> 60000 </td>
</tr>
</tbody>
</table>
</div>
<h2 class="text-center"> Table Hover</h2>
<table class="table table-hover">
<thead>
<tr>
<th>Emp. no.</th>
<th>Name</th>
112
MCA Sem-II (B2)
<th>Manager</th>
<tr>
<td> 101 </td>
<td> Joe </td>
<td> 20000 </td>
</tr><tr>
<td> 102 </td>
<td> Jack </td>
<td> Manager </td>
<td> 2000000 </td>
</tr><tr>
<td> 103 </td>
<td> Jerry </td>

<td> Designer </td>
<td> 500000 </td>
</tr><tr>
<td> 102 </td>
<td> Bob </td>
<td> 60000 </td>
</tr></tbody></table></div></div></div></div></body></html>
113
MCA Sem-II (B2)
OUTPUT:-
114
MCA Sem-II (B2)
3. Design a web page in bootstrap for different types of image formats
CODE:-
<!DOCTYPE

html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image Formats</title>
rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col-md-10 col-md-offset-
1"><h2>Image Formats</h2><div class="col-md-
4">
<img src="images/img1.jpg" class="img-responsive img-rounded"></div>
<img src="images/img2.jpg" class="img-responsive img-circle"></div>
<img src="images/img4.jpg" class="img-responsive img-thumbnail">
</body></html>
115
MCA Sem-II (B2)
OUTPUT:-
116
MCA Sem-II (B2)
4. Design a web page in bootstrap for different types of buttons.
CODE:-
<!DOCTYPE

html>
<head>
<title>Buttons Type</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link
href="vendor/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="vendor/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script><link
href="vendor/bootstrap-3.3.6-dist/css/bootstrap-theme.min.css" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h2 class="text-center"> Button Types </h2><br><div
class="col-md-2">
<button type="button" class="btn btn-default">Default Button</button></div><div
class="col-md-2">
<button type="button" class="btn btn-primary">Primary Button</button></div><div
class="col-md-2">
<button type="button" class="btn btn-success">Success Button</button></div><div
class="col-md-2">
<button type="button" class="btn btn-info">Info Button</button></div><div
class="col-md-2">
<button type="button" class="btn btn-warning">Warning Button</button></div><div
class="col-md-2">
<button type="button" class="btn btn-danger">Danger Button</button></div><div
class="col-md-2">
<button type="button" class="btn btn-link">LINK

Button</button></div></div></div></div></body></html>
117
MCA Sem-II (B2)
OUTPUT:-
118
MCA Sem-II (B2)
5. Design a web page in bootstrap to demonstrate different types of forms using

bootstrap.
CODE:-
<!DOCTYPE

html>
<head>
<title>News Channel</title>
rel="stylesheet">
</head>
<body>
<div class="row">
<h1 class="text-center">Missing Kerala Man, Suspected ISIS Recruit, Killed In Afghanistan
Drone Strike</h1><br>
<p class="text-left">5 Times Airlines Needed A Really Good PR Manager</p><br>
<h3 class="text-right">The new Hero Glamour gets an all-new 125 cc engine which meets the
latest BS-IV emission regulations. The bike also gets Hero's i3S start-stop technology and both
power and torque have increased marginally.</h3><br>
<h4 class="text-left"> The eighth instalment in the long-running franchise goes down the wrong
road in search of a new direction. </h4><br>
<small class="text-justify">Prime Minister Narendra Modi today paid
tributes to Dr Babasaheb Ambedkar on his 126th birth anniversary at
Deekshabhoomi in Nagpur.</small>
</div></div></div></body>
</html>
121
MCA Sem-II (B2)
OUTPUT:-
122
MCA Sem-II (B2)
7. Design a registration page in bootstrap and apply validation class.
CODE:-

<!DOCTYPE html>
<head>
<title> Validation Classes </title>
rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col-md-10 col-md-offset-1"><fieldset>
<legend>Registration Form</legend>
<div class="row">
class="col-md-6 form-horizontal"><div
class="form-group has-
success"><label>Name</label>
<input type="text" class="form-control" placeholder="Name"></div></div>
<div class="col-md-6 form-horizontal"><div
warning"><label>Email</label>
<input type="text" class="form-control" placeholder="Email"></div></div>

success"><label>Address</label>
<input type="text" class="form-control" placeholder="Address"></div></div>
error"><label>Phone</label>
123
MCA Sem-II (B2)
<input type="text" class="form-control" placeholder="Phone"></div></div>

warning"><label>Age</label>
<input type="text" class="form-control" placeholder="age"></div></div>
class="form-group has-error"><label>Date of
Birth</label>
<input type="text" class="form-control" placeholder="Date of Birth">
</fieldset>
</div>
</div>
</div>
</body>
</htm>
OUTPUT:-
8. Design a webpage to demonstrate use of alerts in bootstrap.
124
MCA Sem-II (B2)
CODE:-

<!DOCTYPE html>
<head>
<title> ALERTS EXAMPLE </title>
<link href="vendor/bootstrap-3.3.6-dist/css/bootstrap.min.css"
rel="stylesheet">
href="vendor/bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"
rel="stylesheet">
</head>
<body>
<div class="container">
<h2> ALERTS </h2>
<div class="alert-info">
<strong>INFO</strong></div><div
class="alert-warning">
<strong>WARNING</strong>
</div>
<div class="alert-
sucess"><strong>SUCESS</stron
g>
</div>
<div class="alert-
danger"><strong>DANGER</stron
g>
</div></div>
</body></html>
OUTPUT:-
125
MCA Sem-II (B2)
9. Design a form in bootstrap using glyphicon.

126
MCA Sem-II (B2)
CODE:-

<!DOCTYPE html>
<head>
<title> Navs </title>
rel="stylesheet">
</head>
<body>
<div class="row">
class="col-md-10"><h2>Tabs</h2>
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li><li
role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
<h2>Tabs-Justified</h2>
<ul class="nav nav-tabs nav-justified">
<li role="presentation"><a href="#">Messages</a></li></ul></div>

<h2>Pills</h2>
<ul class="nav nav-pills">
<li role="presentation"><a href="#">Messages</a></li></ul></div>
129
MCA Sem-II (B2)
<h2>Pills-Justified</h2>
<ul class="nav nav-pills nav-justified">
<li role="presentation"><a
href="#">Messages</a></li></ul></div></div>
</div></div></body></html>
OUTPUT:-
130
MCA Sem-II (B2)
11. Design a webpage using button group to display buttons in group horizontally,
vertically aligned in different sizes.
CODE:-
<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<head>
<title>Button Example</title>
rel="stylesheet">
</head>
<body>
<h2>Vertical Button Group</h2>
<p>Use the .btn-group-vertical class to create a vertical button group:</p><div class="btn-
group-vertical">
<button type="button" class="btn btn-primary">Apple</button><button
type="button" class="btn btn-primary">Samsung</button><button type="button"
class="btn btn-primary">Sony</button></div></div>
<h2>Justified Button Groups</h2>
<p>To span the entire width of the screen, use the .btn-group-justified class:</p>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a><a href="#"
class="btn btn-primary">Samsung</a><a href="#" class="btn
btn-primary">Sony</a>
</div></div>
<h2>Button Group</h2>
<p>The .btn-group class creates a button group:</p><div
class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
131
MCA Sem-II (B2)
<h2>Button Groups - Set Sizes</h2>
<p>Add class .btn-group-* to size all buttons in a button group.</p><h3>Large
Buttons:</h3>
<div class="btn-group btn-group-lg">
class="btn btn-primary">Sony</button></div>
<h3>Default Buttons:</h3>
<div class="btn-group">
<h3>Small Buttons:</h3>
<div class="btn-group btn-group-sm">
<h3>Extra Small Buttons:</h3>
<div class="btn-group btn-group-xs">
class="btn btn-primary">Sony</button></div></div></body></html>
132
MCA Sem-II (B2)
OUTPUT:-
133
MCA Sem-II (B2)
12. Design a webpage using bootstrap pagination.
CODE:-
<!DOCTYPE html>
<head><title> Breadcrumbs, Pagination and Pager</title><meta
charset="utf-8">
</head>
<body>
<div class="row">
class="col-md-10"><h2>Breadcrumbs</h2><ol
class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol></div>
<h2>Pagination</h2>
<nav aria-label="Page navigation">
<ul class="pagination"><li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next"><span aria-
hidden="true">»</span></a></li></ul></nav
></div>
<h2>Pager</h2>
<nav aria-label="...">
134
MCA Sem-II (B2)
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-
hidden="true">«</span></a></li>
<li><a href="#">1 <span class="sr-only">(current)</span></a></li><li><a
href="#">2 <span class="sr-only">(current)</span></a></li><li class="active"><a
href="#">3 <span class="sr-only">(current)</span></a></li>
<li><a href="#">4 <span class="sr-only">(current)</span></a></li><li><a
href="#">5 <span class="sr-only">(current)</span></a></li><li><a href="#">6 <span
class="sr-only">(current)</span></a></li><li class="disabled"><a href="#" aria-
label="Next"><span aria-hidden="true">»</span></a></li>
</ul></nav></div></div></div></div></body></html>
OUTPUT:-
135
MCA Sem-II (B2)
13. Design a webpage using bootstrap progress bar.
CODE:-
<!DOCTYPE html>
<head>
<title>Progress Bar</title>
</head>
<body>
<div class="row">
1"><h2>Basic Progress Bar</h2><div
class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100" style="width: 60%;">60% </div></div>
<h2>Progress Bar with Diffrent Colors and strips</h2><div
class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-
valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:
40%"> 40%
</div></div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width: 50%"> 50%
</div></div><div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped"
role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
style="width: 70%">70% </div></div><div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped"
role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
style="width: 20%"> 20%
136
MCA Sem-II (B2)
OUTPUT:-
137
MCA Sem-II (B2)
14. Design a webpage to create a media object using bootstrap.
CODE:-
<!DOCTYPE html>
<head>
<title>Media Object</title>
rel="stylesheet">
</head>
<body>
<div class="row">
1"><h2>Media Object</h2><div class="media">
<div class="media-left media-middle"><a
href="#">
<img class="media-object" src="images.jpeg" height="120"></a></div>
<div class="media-left">
<h4 class="media-heading"> What is Lorem Ipsum? </h4><p>Lorem Ipsum is simply
dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. </p>
</div></div>
<div class="media">
<div class="media-left">
<a href="#"><img class="media-object" src="images.jpeg" height="120"></a></div><div
class="media-body">
<h4 class="media-heading"> What is Lorem Ipsum? </h4><p>Lorem Ipsum is simply
dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
138
MCA Sem-II (B2)
scrambled it to make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. </p>
OUTPUT:-
139
MCA Sem-II (B2)
15. Design a webpage to create a wells using bootstrap.
CODE:-
<!DOCTYPE html>
<head>
<title>Wells </title><meta charset="utf-8">
rel="stylesheet"></head>
<body>
<div class="row">
1"><h2>Wells</h2>
<div class="well well-lg">What is Lorem Ipsum?</div><div
class="well well-sm">What is Lorem
Ipsum?</div></div></div></div></body></html>
OUTPUT:-
140
MCA Sem-II (B2)
16. Design a webpage to create dropdown using bootstrap
CODE:-
<!DOCTYPE html>
<title>Dropdowns</title>
<script src="vendor/jquery-2.x-git.min.js" type="text/javascript"></script>
rel="stylesheet">
</head>
<body>
<div class="row">
1"><h2>Drop Downs</h2><div
class="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false"> Dropdown trigger
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel"><li><a
href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact us</a></li>
</ul></div></div></div></div></body></html>
141
MCA Sem-II (B2)
OUTPUT:-
142
MCA Sem-II (B2)
17. Design a Scroll Spy in a webpage using java plugin.
CODE:-
<!DOCTYPE html>
<head>
<title>Scrollspy</title>
<link href="vendor/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet"><script
src="vendor/jquery-2.x-git.min.js" type="text/javascript"></script><script
src="vendor/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
rel="stylesheet">
</head>
<body>
<div class="row">
<h2>Scrollspy</h2>
<nav class="navbar navbar-default navbar-static" id="scrollspy"><div
class="container-fluid">
<div class="collapse navbar-collapse bs-example-js-navbar-scrollspy"><ul
class="nav nav-tabs">
<li><a href="#home">Home</a></li><li><a
href="#profile">Profile</a></li><li><a
href="#message">Messages</a></li></ul></div></
div></nav>
<div class="scrollspy-example" data-spy="scroll" data-target="#scrollspy"><h4
id="home">Home</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries</p>
143
MCA Sem-II (B2)
<h4 id="profile">Profile</h4>
not only five centuries</p>
<h4 id="message">Message</h4>
not only five centuries</p></div></div></div></div></body></html>
OUTPUT:-
144
MCA Sem-II (B2)
18. Design a webpage to create tooltip using java plugin.
CODE:-
<!DOCTYPE html>
<head>
<title>Tooltips</title>
rel="stylesheet">
</head>
<body>
<div class="row">
<h2>Tooltips</h2>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left"
title="Tooltip on left">Tooltip on left</button></div>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top"
title="Tooltip on top">Tooltip on top</button></div><div class="col-md-3">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
title="Tooltip on bottom">Tooltip on bottom</button></div><div class="col-md-3">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right"
title="Tooltip on right">Tooltip on right</button>
145
MCA Sem-II (B2)
$(function () {
$('[data-toggle="tooltip"]').tooltip()
}) </script></body></html>
OUTPUT:-
146
Roll No-:- 27
/Div -B
MCA Sem-II (B2)
19. Create a Popover in a webpage using java plugin.
CODE:-
<!DOCTYPE html>
<head>
<title>Popovers</title>
rel="stylesheet">
</head>
<body>
<div class="row">
2"><h2>Popovers</h2><div class="col-md-3">
<button type="button" class="btn btn-default" data-container="body" data-
toggle="popover" data-placement="left" data-content="On Left">Popover on
left </button></div>
toggle="popover" data-placement="top" data-content="On Top"> Popover
on top </button></div>
toggle="popover" data-placement="bottom" data-content="On Bottom">
Popover on bottom
</button>
147
Roll No-:- 27
/Div -B
MCA Sem-II (B2)
</div><div class="col-md-3">
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover"
data-placement="right" data-content="On Right"> Popover on right
</button></div></div></div></div>
$(function () {
$('[data-toggle="popover"]').popover()
}) </script></body></html>
OUTPUT:-
148
Roll No-:- 27
/Div -B
MCA Sem-II (B2)
20. Create a collapse in a webpage using java plugin.
CODE:-
<!DOCTYPE html>
<head>
<title>Collapse</title>
rel="stylesheet">
</head>
<body>
<div class="row">
2"><h2>Collapse</h2>
<a class="btn btn-primary" role="button" data-toggle="collapse"
href="#collapseExample" aria-expanded="false" aria-
controls="collapseExample">
Link with href </a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-
target="#collapseExample" aria-expanded="false" aria-
controls="collapseExample">
Button with data-target </button>
<div class="collapse" id="collapseExample"><div
class="well">
149
Roll No-:- 27
/Div -B
MCA Sem-II (B2)
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with
the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div></div>
<h2>Accordion</h2>
<div class="panel-group" id="accordion" role="tablist" aria-
multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne"><h4
class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1
</a></h4></div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-
labelledby="headingOne">
<div class="panel-body">
been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum. </div></div></div>
<div class="panel-heading" role="tab" id="headingTwo"><h4
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2 </a></h4></div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-
labelledby="headingTwo">
150
Roll No-:- 27
/Div -B
MCA Sem-II (B2)
and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum. </div></div></div>
<div class="panel-heading" role="tab" id="headingThree"><h4
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3 </a></h4></div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-
labelledby="headingThree">
and more recently with desktop publishing software like Aldus PageMaker including versions of
Lorem Ipsum. </div></div></div></div></div></div></div>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script></body></html>
151
Roll No-:- 27
/Div -B
MCA Sem-II (B2)
OUTPUT:-
152
Roll No-:- 27
/Div -B
MCA Sem-II (B2)
21. Create a collapse in a webpage using java plugin.
CODE:-
<!DOCTYPE html>
<head>
<title>Carousel</title>
rel="stylesheet">
</head>
<body>
<div class="row">
2"><h1>Carousel</h1>
<div id="carousel-example-generic" class="carousel slide" data-
ride="carousel">

<ol class="carousel-indicators">
153
Roll No-:- 27
/Div -B
MCA Sem-II (B2)
<li data-target="#carousel-example-generic" data-slide-to="0"

class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-
target="#carousel-example-generic" data-slide-to="2"></li></ol>

<div class="carousel-inner" role="listbox"><div
class="item active">
<img src="images/slider1.JPG" alt="...">
<div class="carousel-caption"> Img 1</div></div>

<div class="item"><img src="images/slider2.JPG" alt="..."><div
class="carousel-caption"> Img 2</div></div></div>


<a class="left carousel-control" href="#carousel-example-generic" role="button"
data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-
only">Previous</span></a>
<a class="right carousel-control" href="#carousel-example-generic" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-
hidden="true"></span>
<span class="sr-
only">Next</span></a></div></div></div></div></bod
y></html>
OUTPUT:-
154
Roll No-:- 27
/Div -B
MCA Sem-II (B2)
155

Wad

Uploaded by

Document Information

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

Wad

Uploaded by

Copyright:

Available Formats

Name:- Nair Shivaprasad B

Roll No-:- 27/Div -B

document.write("<b>Name: </b>"+ a.value+"<br>");

var z = new Date()

city:<input type="text" placeholder="city" id="city"><br>

 For sales <500

<input type="reset" value="Reset">

6. Create a login form and open a new window.

8. Write JavaScript code to demonstrate feedback form.

var feedback = document.getElementById("feedback").value;

if (!name || !email || !age || !phone || !visits_value || !find_value || !info_value ||

var letters = /^[A-Za-z]+$/;

if ((phone.length> 11) || (phone.length != 10)) {

9. Design a code for the following

10. Design the following TexArea counter.

varmsg = "You have reached your maximum limit of characters allowed";

my_form.my_text.value = my_form.my_text.value.substring(0, maxLen);

11. Write a JS to implement different events such as onchange, onclick, onmouseover,

<button ondblclick="ondbclick()">OnDouble click</button>

<script src="script.js" type="text/javascript"></script>

12 .Write a JS to identify the correct image captcha.

13. Validate the following form.

if(!name || !email || !phone || !comments){

1. Write a JavaScript to convert all the context of textboxes to UpperCase onblur

<script src="abc.js" type="text/javascript"></script> NAME:<input

type="text" id ="name" onblur="uppercase()"/><br> ADDRESS:<input

type="text" id ="address" onblur="uppercase()"/><br> CITY:<input

type="text" id ="city" onblur="uppercase()"/><br> HOBBIES:<input

type="text" id ="hobbies" onblur="uppercase()"/><br><input

2. Write a JavaScript to find odd numbers from 1 to 40.

3. Write a JavaScript to calculate sales commission as per total sales value

Enter total sales <input type="text"

Result : <input type="text" id="t2"/><br>

4. Write a JavaScript code to implement Dense Array.

document.write("Join method :<br>"+x);

<input type="submit" value="array" onClick="meth()"/>

alert("Name cannot be empty");

alert("City cannot be empty");

alert("State cannot be empty");

alert("Country cannot be empty");

Name :<input type="text" id="t1"/><br>

City :<input type="text" id="t2"/><br>

State :<input type="text" id="t3"/><br>

Country :<input type="text" id="t4"/><br>

<input type="submit" value="Submit" id = "b1" onClick="demo()"/><br>

var a=prompt("Please enter the number", "00");

"Your number is " + t1 + "entered by you";

{document.getElementById("t2").value="NOT A PRIME NUMBER";}

Enter the number: <input type="text"

id="t1"/><br><input type="submit" onClick="meth1

()"/><br><br> Result : <input type="text"

var q="What is 10+10 ? ";

var correct="The given input is Correct";

var incorrect="The given input is Incorrect";

confirm("Wrong !! Press OK for other chance");

alert("All the best") }

alert("Great !! You are right");

8. Write a JavaScript code to event handling.

<button ondblClick="f2()">On Double Click</button>

<p onmouseover="style.color='red' "onmouseout="style.color='green'">Hi Welcome to

ENTER ANY STRING : <input type="string" id="t1"/><br>