Sie sind auf Seite 1von 155

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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

Output :-

 Sales <50

 For sales <500

 For sales>500

5
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

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

Output :-

8
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

Output :-

11
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

Output :-

15
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

16
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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>
<td><input type="text"></td>
</tr>
<tr>
<td>City</td>
<td><input type="text"></td>
</tr>
<tr>
<td>State</td>
<td><input type="text"></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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

<tr>
<td>Address 1</td>
<td><input type="text"></td>
</tr>
<tr>
<td>Address 2</td>
<td><input type="text"></td>
</tr>
<tr>
<td>City</td>
<td><input type="text"></td>
</tr>
<tr>
<td>State</td>
<td><input type="text"></td>
</tr>
<tr>
<tr>
<thcolspan="2"><input type="button" value="Submit"></th>
</tr>
</table>
</form>
</body></html>

18
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

Output :-

19
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

10. Design the following TexArea counter.

<html><head>
<title>(Type a title for your page here)</title>

<script language=JavaScript>
<!--
functioncheck_length(my_form)
{
maxLen = 50;
if (my_form.my_text.value.length>= maxLen)
{

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


alert(msg);

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


}
else{
my_form.text_num.value = maxLen - my_form.my_text.value.length;
}
}

</script>

</head>

<body>
<form name=my_form method=post>
<textareaonKeyPress=check_length(this.form); onKeyDown=check_length(this.form);
name=my_text rows=4 cols=30></textarea>
<br>
<input size=1 value=50 name=text_num> Characters Left
</form>
20
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

</body>
</html>

Output :-

21
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

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


onmouseout, onkeydown, onload, mouseup and mousedown
<html>

<head>
<title> DOM Events</title>
</head>

<body>

<!-- Click Events -->


<button onclick="f1()">Onclick</button>

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

<!--Mouse Events -->


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

<!--Mouse down up -->


<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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

Output :-

23
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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" />
<script src="script.js" type="text/javascript"></script>
</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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

Output :-

25
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

Output :-

28
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:

30
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:-

32
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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>

<script lang="javascript">

alert("Welcome");

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>

33
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:-

<=50

>=51 to <=500

>=501

34
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

4. Write a JavaScript code to implement Dense Array.

CODE:

.html

<html>

<head>

<script lang="javascript">

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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:-

36
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

alert("City cannot be empty");


document.getElementById("t2").classList.add("err");

else

document.getElementById("t2").classList.add("err1");

if(!state)

alert("State cannot be empty");

document.getElementById("t3").classList.add("err");

else

document.getElementById("t3").classList.add("err1");

if(!country)

alert("Country cannot be empty");

document.getElementById("t4").classList.add("err");

else

document.getElementById("t4").classList.add("err1");

38
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:-

40
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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>

<script lang="javascript">

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";

var a=document.getElementById("t1").value;

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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:-

42
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

var output=(resp==ans)?correct:incorrect;

document.write("<br>"+output);

</script>

</head>

</html>

OUTPUT:-

44
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

45
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:-

47
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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 a=document.getElementById("t1").value;

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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

else

{temp.push(s);

document.write(temp.join(""));

OUTPUT:-

49
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

50
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:

53
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

54
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

alert(d8);

var d9=d.getUTCDay();

alert(d9);

var d10=d.getDate();

alert(d10);

</script>

</p>

</body>

</html>

OUTPUT:-

56
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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 a=document.getElementById("t1").value;

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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:

58
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:

62
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

63
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:

65
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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>

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

</body>

</html>

.js

function read() {

var a;

if(window.XMLHttpRequest) {

a=new XMLHttpRequest(); }

else {

a=new ActiveXObject("Microsoft.XMLHTTP"); }

a.onreadystatechange=function() {
66
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

}
xmlhttp.open("GET","check.php?num="+num,true);
xmlhttp.send();
}

OUTPUT:

69
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

?>

.js

function btnSubmit() {
var rows = document.getElementById("rows").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
;
}
}
xmlhttp.open("GET","createTable.php?rows="+rows,true);
xmlhttp.send();
}

71
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:

72
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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>
<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>

74
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

<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>

75
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

<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>

76
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

<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>
77
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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>
<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>

OUTPUT:

78
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

// Output "no suggestion" if no hint was found or output correct


values echo $hint === "" ? "no suggestion" : $hint

?>

OUTPUT:

81
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:

83
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:

85
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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)

xmlhttp=new XMLHttpRequest();

else

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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;

document.getElementById("res").value=result;

else if("*"==document.getElementById("options").value)

result=f1*f2;

document.getElementById("res").value=result;

else
{

result=f1/f2;

document.getElementById("res").value=result;

xmlhttp.open("GET",url,true);

xmlhttp.send();

</script>
87
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:

89
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

90
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:

95
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

if (str=="") {

document.getElementById("txtHint").innerHTML=""; return;

if (window.XMLHttpRequest) {

xmlhttp=new XMLHttpRequest();

} else {

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

xmlhttp.onreadystatechange=function() {

if (this.readyState==4 && this.status==200) {

document.getElementById("txtHint").innerHTML=this.responseText;

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

98
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:

99
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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"); }
xmlhttp.onreadystatechange=function() {

if (this.readyState==4 && this.status==200) {


document.getElementById("result").innerHTML=this.responseText;
} }

xmlhttp.open("GET","getDetails.php?name="+name,true);
xmlhttp.send();
}

102
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:

103
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

104
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

Practical No. 3
To implement Bootstrap.
1. Design a web page in bootstrap using grid system.

CODE:-

<!--Design web page in bootstrap using grid system.--><!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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

<td> Jack </td>


<td> Designer </td>
<td> 500000 </td>
</tr>
<tr>
<td> 102 </td>
<td> Rayan </td>
<td> Developer </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>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>
<td> Jack </td>
<td> Designer </td>
<td> 500000 </td>
</tr>
<tr>
<td> 102 </td>
<td> Rayan </td>
<td> Developer </td>
106
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

<td> 60000 </td>


</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<h2 class="text-center"> Table Bordered</h2>
<table class="table table-bordered">
<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>
<td> Jack </td>
<td> Designer </td>
<td> 500000 </td>
</tr>
<tr>
<td> 102 </td>
<td> Rayan </td>
<td> Developer </td>
<td> 60000 </td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<h2 class="text-center"> Table Hover</h2>
<table class="table table-hover">
<thead>
107
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

<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>
<td> Jack </td>
<td> Designer </td>
<td> 500000 </td>
</tr>
<tr>
<td> 102 </td>
<td> Rayan </td>
<td> Developer </td>
<td> 60000 </td>
</tr></tbody></table>
</div></div></div></div>
</body>
</html>

108
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:

109
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

2. Design a web page in bootstrap for different types of image formats

CODE:-

<!--Design a webpage using different types of tables using bootstrap--><!DOCTYPE


html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Table Styles</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-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> Developer </td>
<td> 20000 </td>

</tr><tr>
<td> 102 </td>
<td> Jack </td>
<td> Manager </td>
<td> 2000000 </td>
</tr><tr>
<td> 103 </td>
110
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

<td> Jerry </td>


<td> Designer </td>
<td> 500000 </td>
</tr><tr>
<td> 102 </td>
<td> Bob </td>
<td> Developer </td>
<td> 60000 </td>
</tr></tbody></table></div>
<div class="col-md-3">
<h2 class="text-center"> Table Stripped</h2>
<table class="table table-striped">
<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> 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> Developer </td>
<td> 60000 </td>
</tr>
</tbody>
</table>
111
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

</div>
<div class="col-md-3">
<h2 class="text-center"> Table Bordered</h2>
<table class="table table-bordered">
<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> 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> Developer </td>
<td> 60000 </td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-3">
<h2 class="text-center"> Table Hover</h2>
<table class="table table-hover">
<thead>
<tr>
<th>Emp. no.</th>
<th>Name</th>
<th>Designation</th>
112
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

<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> 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> Developer </td>
<td> 60000 </td>
</tr></tbody></table></div></div></div></div></body></html>

113
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:-

114
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

3. Design a web page in bootstrap for different types of image formats

CODE:-

<!--Design a webpage in bootstrap for different types of image format--><!DOCTYPE


html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Image Formats</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"><h2>Image Formats</h2><div class="col-md-
4">
<img src="images/img1.jpg" class="img-responsive img-rounded"></div>
<div class="col-md-4">
<img src="images/img2.jpg" class="img-responsive img-circle"></div>
<div class="col-md-4">
<img src="images/img4.jpg" class="img-responsive img-thumbnail">
</div></div></div></div>
</body></html>

115
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:-

116
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

4. Design a web page in bootstrap for different types of buttons.

CODE:-

<!--Design a webpage in bootstrap for different types of buttons--><!DOCTYPE


html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Buttons Type</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">
<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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:-

118
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

5. Design a web page in bootstrap to demonstrate different types of forms using


bootstrap.

CODE:-

<!--Design different types of forms using bootstrap--


><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Form Styles</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-3">
<h2 class="text-center">Basic Form</h2><div
class="form-group"><label>Name</label>
<input type="text" class="form-control"></div><div
class="form-group"><label>Email</label>

<input type="text" class="form-control"></div></div><div


class="col-md-6 form-inline">
<h2 class="text-center">Inline Form</h2><br><div
class="form-group"><label>Name</label>
<input type="text" class="form-control"></div><div
class="form-group">

<label>Email</label>
<input type="text" class="form-
control"></div></div><br>
<div class="col-md-6 form-horizontal">
<h2 class="text-center">Horizontal Form</h2><br>
<div class="form-group">
<label>Name</label>

119
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

<input type="text" class="form-control"></div><div


class="form-group"><label>Email</label>
<input type="text" class="form-control">
</div></div></div></div></div></body></html>

OUTPUT:-

120
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

6. Design a web page in bootstrap using different typography.

CODE:-

<!--Design news home in bootstrap using different typography--><!DOCTYPE


html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>News Channel</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">
<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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:-

122
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

7. Design a registration page in bootstrap and apply validation class.

CODE:-

<!--Design registration form in bootstrap and apply validation class has


warning,success,error.-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title> Validation Classes </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"><fieldset>
<legend>Registration Form</legend>
<div class="row">
<div class="col-md-10 col-md-offset-1"><div
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
class="form-group has-
warning"><label>Email</label>

<input type="text" class="form-control" placeholder="Email"></div></div>


<div class="col-md-6 form-horizontal"><div
class="form-group has-
success"><label>Address</label>
<input type="text" class="form-control" placeholder="Address"></div></div>
<div class="col-md-6 form-horizontal"><div
class="form-group has-
error"><label>Phone</label>
123
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

<input type="text" class="form-control" placeholder="Phone"></div></div>


<div class="col-md-6 form-horizontal"><div
class="form-group has-
warning"><label>Age</label>
<input type="text" class="form-control" placeholder="age"></div></div>
<div class="col-md-6 form-horizontal"><div
class="form-group has-error"><label>Date of
Birth</label>
<input type="text" class="form-control" placeholder="Date of Birth">
</div></div></div></div>
</fieldset>
</div>
</div>
</div>
</body>
</htm>

OUTPUT:-

8. Design a webpage to demonstrate use of alerts in bootstrap.

124
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

CODE:-

<!--Design registration form in bootstrap and apply validation class has


warning,success,error.-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title> ALERTS EXAMPLE </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">
<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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

9. Design a form in bootstrap using glyphicon.


126
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

CODE:-

<!--Design a form in bootstrap using glyphicon--


><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title> Glyhicons </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"><fieldset>
<legend>Registration Form</legend>
<div class="row">
<div class="col-md-10 col-md-offset-1"><div
class="col-md-6 form-horizontal"><div
class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-
user"></i></span>
<input id="email" type="text" class="form-control" name="email"
placeholder="Email">
</div></div>
<div class="col-md-6 form-horizontal"><div
class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-
lock"></i></span>

<input id="password" type="password" class="form-control"


name="password" placeholder="Password"></div></div>
<div class="col-md-6 form-horizontal"><div
class="input-group">
<span class="input-group-addon">Text</span>
<input id="msg" type="text" class="form-control" name="msg"
placeholder="Additional Info">
</div></div>

127
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

<div class="col-md-6 form-horizontal"><div


class="input-group">
<input type="text" class="form-control" placeholder="Search"><div
class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon
glyphicon-search"></i></button>
</div></div></div>
<div class="col-md-6 form-horizontal"><button
type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</div></div>
</div></fieldset>
</div></div>
</div>
</body>
</html>

OUTPUT:-

128
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

10. Design a navigation bar in bootstrap using different types of .nav class.

CODE:-

<!--Create navigation in bootstrap using different types of .nav class.(pills


and justified)-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title> Navs </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-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>
<div class="col-md-10">
<h2>Tabs-Justified</h2>
<ul class="nav nav-tabs nav-justified">
<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>


<div class="col-md-10">
<h2>Pills</h2>
<ul class="nav nav-pills">
<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>
<div class="col-md-10">
129
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

<h2>Pills-Justified</h2>
<ul class="nav nav-pills nav-justified">
<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></div>
</div></div></body></html>

OUTPUT:-

130
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Button Example</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">
<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>
<div class="container">
<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>
<div class="container">
<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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

<div class="container">
<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">
<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>
<h3>Default Buttons:</h3>
<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>
<h3>Small Buttons:</h3>
<div class="btn-group btn-group-sm">
<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>
<h3>Extra Small Buttons:</h3>
<div class="btn-group btn-group-xs">
<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></body></html>

132
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:-

133
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

12. Design a webpage using bootstrap pagination.

CODE:-

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> Breadcrumbs, Pagination and Pager</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-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>
<div class="col-md-10">
<h2>Pagination</h2>
<nav aria-label="Page navigation">
<ul class="pagination"><li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</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">&raquo;</span></a></li></ul></nav
></div>
<div class="col-md-10">
<h2>Pager</h2>
<nav aria-label="...">

134
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-
hidden="true">&laquo;</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">&raquo;</span></a></li>
</ul></nav></div></div></div></div></body></html>

OUTPUT:-

135
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

13. Design a webpage using bootstrap progress bar.

CODE:-

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Progress Bar</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"><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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

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

OUTPUT:-

137
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

14. Design a webpage to create a media object using bootstrap.

CODE:-

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Media Object</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"><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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
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>
</div></div></div></div></div></body></html>

OUTPUT:-

139
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

15. Design a webpage to create a wells using bootstrap.

CODE:-

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Wells </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"><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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

16. Design a webpage to create dropdown using bootstrap

CODE:-

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Dropdowns</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/jquery-2.x-git.min.js" type="text/javascript"></script>
<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"><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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

OUTPUT:-

142
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

17. Design a Scroll Spy in a webpage using java plugin.

CODE:-

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Scrollspy</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/jquery-2.x-git.min.js" type="text/javascript"></script><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">
<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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

<h4 id="profile">Profile</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>

<h4 id="message">Message</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></div></div></div></div></body></html>

OUTPUT:-

144
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

18. Design a webpage to create tooltip using java plugin.

CODE:-

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Tooltips</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/jquery-2.x-git.min.js" type="text/javascript"></script>
<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">
<h2>Tooltips</h2>
<div class="col-md-3">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left"
title="Tooltip on left">Tooltip on left</button></div>

<div class="col-md-3">
<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
Name:- Nair Shivaprasad B
Roll No-:- 27/Div -B
MCA Sem-II (B2)

</div></div></div></div>
<script type="text/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip()
}) </script></body></html>

OUTPUT:-

146
Name:- Nair Shivaprasad B
Roll No-:- 27
/Div -B
MCA Sem-II (B2)

19. Create a Popover in a webpage using java plugin.

CODE:-

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Popovers</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/jquery-2.x-git.min.js" type="text/javascript"></script>
<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-8 col-md-offset-
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>
<div class="col-md-3">
<button type="button" class="btn btn-default" data-container="body" data-
toggle="popover" data-placement="top" data-content="On Top"> Popover
on top </button></div>
<div class="col-md-3">
<button type="button" class="btn btn-default" data-container="body" data-
toggle="popover" data-placement="bottom" data-content="On Bottom">
Popover on bottom
</button>

147
Name:- Nair Shivaprasad B
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>
<script type="text/javascript">
$(function () {
$('[data-toggle="popover"]').popover()
}) </script></body></html>

OUTPUT:-

148
Name:- Nair Shivaprasad B
Roll No-:- 27
/Div -B
MCA Sem-II (B2)

20. Create a collapse in a webpage using java plugin.

CODE:-

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Collapse</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/jquery-2.x-git.min.js" type="text/javascript"></script>
<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-8 col-md-offset-
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
Name:- Nair Shivaprasad B
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">
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></div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo"><h4
class="panel-title">
<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">
<div class="panel-body">

150
Name:- Nair Shivaprasad B
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></div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree"><h4
class="panel-title">
<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">
<div class="panel-body">
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></div></div></div></div></div>

<script type="text/javascript">
$(function () {
$('[data-toggle="popover"]').popover()
})
</script></body></html>

151
Name:- Nair Shivaprasad B
Roll No-:- 27
/Div -B
MCA Sem-II (B2)

OUTPUT:-

152
Name:- Nair Shivaprasad B
Roll No-:- 27
/Div -B
MCA Sem-II (B2)

21. Create a collapse in a webpage using java plugin.

CODE:-

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Carousel</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/jquery-2.x-git.min.js" type="text/javascript"></script>
<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-8 col-md-offset-
2"><h1>Carousel</h1>
<div id="carousel-example-generic" class="carousel slide" data-
ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">

153
Name:- Nair Shivaprasad B
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>
<!-- Wrapper for slides -->
<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>

<!-- Controls -->


<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
Name:- Nair Shivaprasad B
Roll No-:- 27
/Div -B
MCA Sem-II (B2)

155