itfinal it lab manual
Post on 25-May-2015
102 Views
Preview:
DESCRIPTION
TRANSCRIPT
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 1
Lab#1: Introduction to HTML.
Basic HTML, Formatting and Fonts, Commenting code.
Create Following Web Page Using given tags with its attributes.
TAG ATTRIBUTESTOBE USED
<HTML> -- <HEAD> -- <TITLE> -- <BODY> BGCOLOR,TEXT,BACKGROUND <H1>,<H2>,<H3>,<H4>,<H5>,<H6>
ALIGN <FONT> FACE,SIZE,COLOR <P> (Paragraph) -- <U> (Underline) -- <HR> (Horizontal Rules) WIDTH,COLOR,ALIGN <BR>(Break Line) --
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 2
HTML CODE:
<html> <head> <title>Lab#1</title> <font size="6"> <b> MEFGI...WAD/WTP - Lab Session#1 </b> </font> </head> <body style="background-color: cyan ;"> <h1>Heading#1</h1> <h2>Heading#2</h2> <h3>Heading#3</h3> <h4>Heading#4</h4> <h5>Heading#1</h5> <h6>Heading#1</h6> <font color="red" size="15">This text displays the use of font tag with font face, color and size.</font> <p>paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. <u> paragraph 1 start with underline.</u> here paragraph 1 start here.</p> <hr> Some random text. Some random text. Some random text. Some random text. Some random text.<br> Some random text. Some random text. Some random text. using br tag we can break the line.<br> Some random text. Some random text. Some random text. Some random text. Some random text. </body> </html>
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 3
Lab#2: Formatting web pages with HTML
Hyperlink, Lists, Tables, Images:
1) Create following Web Page Using given tags with its attributes.
TAG ATTRIBUTESTOBE USED <HTML> -- <HEAD> -- <TITLE> -- <BODY> BGCOLOR,TEXT,BACKGROUND <H1>,<H2>,<H3>,<H4>,<H5>,<H6>
ALIGN <A> -- <UL> -- <OL> -- <LI> -- <TABLE> BORDER <TH> -- <TR> -- <TD> --
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 4
HTML CODE: <html> <head> <title>Lab#2</title> <font size="6"> <b> MEFGI...WAD/WTP - Lab Session#2 </b> </font> </head><br> <br> <br> <body style="background-color:cyan;"> <a href="http://www.marwadieducation.edu.in">Click for Marwadi Education</a> <br> <br> <b>List of Institutes</b> <ul> <li>FOE <li>FOT <li>FOPG </ul> <b>List of Subjects</b> <ol type="1"> <li>WAD <li>WTP <li>IS </ol> <br> <table border="1"> <tr> <td><b>Subjects</b></td> <td><b>Marks</b></td> </tr> <tr> <td>WAD</td> <td>20</td> </tr> <tr> <td>WTP</td> <td>30</td> </tr> </table> <img src="D:\ARPAT\1846_365175073598623_767591942_n.jpg" width="144" height="144" /> </body> </html>
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 5
Lab#2 Formatting web pages with HTML
Simple HTML Forms:
2) Create following Web Page Using given tags with its attributes.
TAG ATTRIBUTESTOBE USED <HTML> -- <HEAD> -- <TITLE> -- <BODY> BGCOLOR,TEXT,BACKGROUND <H1>,<H2>,<H3>,<H4>,<H5>,<H6> ALIGN <FORM> -- <TABLE> -- <TR> -- <TD> -- <INPUT> TYPE, NAME, SIZE, MAXLENGTH <SELECT> NAME <OPTION> VALUE,SELECTED VALUE
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 6
HTML CODE:-
<html>
<head>
<title> Lab#2_2 </title>
</head>
<body bgcolor=#00eeff>
<h1><b>MEFGI...WAD/WTP -Lab Session#2_2 </b></h1><br><br>
<h2>Registration Form Demo</h2>
<form>
<table align="left">
<tr>
<td> First Name </td>
<td><input type="text" name="fn" maxlength=30 /></td>
</tr>
<tr>
<td> Last Name </td>
<td><input type="text" name="ln" maxlength=30 /></td>
</tr>
<tr>
<td> Desired Login Name </td>
<td><input type="text" name="dln" /></td>
</tr>
<tr>
<td> Choose a Password </td>
<td><input type="password" name="pwd" /></td>
</tr>
<tr>
<td> Re-enter a Password </td>
<td><input type="password" name="pwd" /></td>
</tr>
<tr>
<td> Choose a question </td>
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 7
<td><select name="Security Question">
<option name="sop1" selected>Security Question</option>
<option name="sop2" value="who is your best friend?">who is your best friend?</option>
<option name="sop3" value="who is your favourite teacher?">who is your favourite teacher?</option>
<option name="sop4" value="what is your nick name?">what is your nick name?</option>
</select>
</td>
</tr>
<tr>
<td> Answer </td>
<td><input type="text" name="ans" /></td>
</tr>
<tr>
<td> Location </td>
<td><select name="s2">
<option name="lop1">country</option>
<option name="lop2" value="India" selected>India</option>
<option name="lop3" value="afrika">afrika</option>
<option name="lop4" value="shri-lanka">shri-lanka</option>
</select>
</td>
</tr>
</table>
</body>
</html>
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 8
Lab#3: Introduction to CSS
Basic syntax and structure, using CSS, background images, Colors and properties
Create following Web Page Using given tags with its attributes.
TAG ATTRIBUTESTOBE USED <HTML> -- <HEAD> -- <TITLE> -- <BODY> BGCOLOR,TEXT,BACKGROUND <H1>,<H2>,<H3>,<H4>,<H5>,<H6> ALIGN, CLASS <SPAN> CLASS <P> ID
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 9
HTML CODE: <html>
<head>
<title>Lab#3</title>
<link rel="stylesheet" href="a.css"/>
<font size="6" color="blue">
<b>
MEFGI...WAD/WTP - Lab Session#3
</b>
</font>
</head>
<body>
<h1>Heading#1</h1>
<h2>Heading#2</h2>
<h3 class="redbox">Heading#3</h3>
<h4>Heading#4</h4>
<h5>Heading#5</h5>
<h6>Heading#6</h6>
<font color="red" size="15">This text displays the use of font tag with font face,color and size.</font>
<p>paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here.
paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. <u> paragraph 1 start with underline.</u> here paragraph 1 start here.</p>
<hr>
Some random text. Some random text. Some random text. Some random text. Some random text.<br>
Some random text. Some random text. Some random text. using br tag we can break the line.<br> Some random text. Some random text. Some random text. Some random text. Some random text.
</body>
</html>
CSS CODE
body
{
background:#bdcffb url(abstract_0037.jpg);
color:#00ff00;
}
h3.redbox
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 10
{
color:#FFFFFF;
}
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 11
Lab#4: Formatting web pages with CSS Manipulating texts, using fonts, borders and boxes, margins, padding lists.
Create following Web Page Using given tags with its attributes.
TAG ATTRIBUTESTOBE USED <HTML> -- <HEAD> -- <TITLE> -- <BODY> BGCOLOR,TEXT,BACKGROUND <H1>,<H2>,<H3>,<H4>,<H5>,<H6> ALIGN, CLASS <IMG> FLOAT <P> ID
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 12
HTML CODE:
<html>
<head>
<title>Lab#3</title>
<style type="text/css">
img {float:left;}
</style>
<link rel="stylesheet" href="b.css"/>
<font size="6" color="blue">
<b>
MEFGI...WAD/WTP - Lab Session#4
</b>
</font>
</head>
<body>
<h1>Heading#1</h1>
<h2>Heading#2</h2>
<h3 class="redbox">Heading#3</h3>
<h4>Heading#4</h4>
<h5 class="bbox">Heading#5</h5>
<h6 class="bluebox">Heading#6</h6>
<font color="red" size="15">This text displays the use of font tag with font face,color and size.</font>
<p>
<img src="1475872_10201919425338870_1838258255_n.jpg" width="50" height="50" />paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here.
paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. <u> paragraph 1 start with underline.</u> here paragraph 1 start here.</p>
<hr>
Some random text. Some random text. Some random text. Some random text. Some random text.<br>
Some random text. Some random text. Some random text. using br tag we can break the line.<br> Some random text. Some random text. Some random text. Some random text. Some random text.
</body>
</html>
CSS code
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 13
body
{
background:#bdcffb url(abstract_0037.jpg);
color:#00ff00;
}
h3.redbox
{
color:#FFFFFF;
}
h5.bbox
{
color:#FF0000;
}
h6.bluebox
{
color:#FF0000;
}
h1
{
border:5px solid #ff0000;
color:#ff0000;
}
h2
{
border:5px dotted #ff0000;
color:#ff0000;
}
h4
{
border:5px groove #ff0000;
color:#ff0000;
}
#f1
{
font:35px;
color:#ff0000;
font-family:"'Lucida Handwriting’, script";
}
#p1
{
font-weight:italic;
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 14
}
#s1
{
text-decoration:underline;
color:lightblue;
}
#hr1
{
color:red;
}
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 15
Lab#5: Introduction to Java script How to develop Java script, variables, functions, condition
Create following Web Page Using given tags with its attributes and Java script.
1)
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 16
Screenshot#1 Program with two buttons to print 1 to100
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 17
Screenshot#1 Program with two buttons to print 100 to 0
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 18
Lab#5: Introduction to Java script How to develop Java script, variables, functions, conditions
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 19
ADDITION:
SUBTSACTION:
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 20
MULTIPLICATION:
DIVISION:
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 21
HTML CODE: <! DOCTYPE> <Html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <h2>Calculator</h2> <form> <table cellpadding="2px"> <tr> <td>1st Number:</td> <td><input type="text" name="1st" id="1st" size="20px" /></td> </tr> <tr> <td>2nd Number:</td> <td><input type="text" name="2nd" id="2nd" size="20px" /></td> </tr> <tr> <td>Total:</td> <td><input type="text" name="total" id="total" size="20px" /></td> </tr> <tr> <td colspan="2"> <input type="button" value="Add" style="width:50px;" onclick="add()" /> <input type="button" value="Sub" style="width:50px;" onclick="substract()"/> <input type="button" value="Mul" style="width:50px;" onclick="mul()"/> <input type="button" value="Div" style="width:50px;" onclick="div()"/> </td> </tr> </table> </form> <script> function add() { var first=document.getElementById('1st').value; var second=document.getElementById('2nd').value; if(first=="") { alert("Enter First Value"); document.getElementById('1st').focus(); }
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 22
else if(second=="") { alert("Enter Second Value"); document.getElementById('2nd').focus(); } else { var total=parseInt(first,10)+parseInt(second,10); document.getElementById('total').value=total; } } function substract() { var first=document.getElementById('1st').value; var second=document.getElementById('2nd').value; if(first=="") { alert("Enter First Value"); document.getElementById('1st').focus(); } else if(second=="") { alert("Enter Second Value"); document.getElementById('2nd').focus(); } else { var total=parseInt(first,10)-parseInt(second,10); document.getElementById('total').value=total; } } function mul() { var first=document.getElementById('1st').value; var second=document.getElementById('2nd').value; if(first=="") { alert("Enter First Value"); document.getElementById('1st').focus(); } else if(second=="") { alert("Enter Second Value");
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 23
document.getElementById('2nd').focus(); } else { var total=parseInt(first,10)*parseInt(second,10); document.getElementById('total').value=total; } } function div() { var first=document.getElementById('1st').value; var second=document.getElementById('2nd').value; if(first=="") { alert("Enter First Value"); document.getElementById('1st').focus(); } else if(second=="") { alert("Enter Second Value"); document.getElementById('2nd').focus(); } else { var total=parseInt(first,10)/parseInt(second,10); document.getElementById('total').value=total; } } </script> </body>
</html>
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 24
Lab#6: Browser interaction and validations using JS
1) Create following Web Page Using given tags with its attributes and Java script.
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 25
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
HTML CODE: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <div align="center"> <h3 style="color:#33F">Registartion Form</h3> <form name="registrationform" method="post" action="submit.php" onsubmit=" return validationcheck()"> <table cellpadding="2px"> <tr> <td>First Name:<b style="color:red">*</b></td> <td><input type="text" name="fname" id="fname" size="20"/></td> </tr> <tr> <td>Last Name:<b style="color:red">*</b></td>
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 26
<td><input type="text" name="lname" id="lname" size="20"/></td> </tr> <tr> <td>User Name<b style="color:red">*</b></td> <td><input type="text" name="email" id="email" placeholder="XYZ@abc.com"/></td> </tr> <tr> <td>Password:<b style="color:red">*</b></td> <td><input type="password" name="password" id="password" size="20"/></td> </tr> <tr> <td>ReEnter Password:<b style="color:red">*</b></td> <td><input type="password" name="repassword" id="repassword" size="20" /></td> </tr> <tr> <td>Gender:<b style="color:red">*</b></td> <td>Male<input type="radio" id="gender" name="gender" value="Male" checked="checked"/> Female<input type="radio" id="gender" name="gender" value="Female"/> </td> </tr> <tr> <td></td> <td> <input type="checkbox" /> Verify Terms & Condition. </td> </tr> <tr> <td></td> <td><input type="submit" value="Register" /></td> </tr> </table> </form> </div> <script> $(document).ready(function(e) { $("input,textarea,select").focus(function() { $(this).css("background-color","#cccccc"); }); $("input,textarea,select").blur(function(){ $(this).css("background-color","#FFF"); }); }); function validationcheck() { var fname=document.getElementById('fname'); var lname=document.getElementById('lname'); var email=document.getElementById('email'); var password=document.getElementById('password'); var repassword=document.getElementById('repassword');
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 27
var addr=document.getElementById('addr'); var pincode=document.getElementById('pincode'); var mobileno=document.getElementById('mobileno'); // name validation var patternforname=/^[A-Za-z]{3,25}$/; if(fname.value==null || fname.value=="") { alert("Enter First Name"); fname.focus(); return false; } if(!patternforname.test(fname.value)) { alert("Enter valid First Name"); fname.focus(); return false; } if(!mobilenopattern.test(mobileno.value)) { alert("Enter Valid Mobile No"); mobileno.focus(); return false; } } </script> </body> </html>
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 28
2) Create following Web Page Using given tags with its attributes and Java script. Image Slider, images should be in repeating fashion for infinite time.
Use following functions.
Image ()
Eva l ()
set Timeout ()
HTML CODE: html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>Untitled Document</title>
</head>
<body>
<img src="dreamboy_sn4n27ia.jpeg" width="400" height="300"
border="5"/>
</body>
</html>
MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS. DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 29
top related