You are on page 1of 19


Front End Design Tools& Web Services

Practical File

Made by: Akanksha Garg 01416403210 B.Tech CSE 7th Sem

Simple Switch Case in Java Script Program 3.INDEX 1. Write a JSP program to display current date of Experiments & Time on the web 4. Popup Window Program vi. Links and images v. Using JDBC concepts write a program to perform the task of insertion. Fibonacci Series JavaScript iii. Div and Span Tag vii. . JavaScript i.Making Cascading Style Sheet 2. updation and deletion of records in Oracle database for Student Management System. Working with Tables ii. HTML Forms and Input iv. Working with Frames vi. Formatting with HTML i. Form Validation in Java Script Program v. HTML Styles. Check Even Odd Number Java Script Program ii. Creating Lists iii. Copy Text Java Script Program iv. Palindrome Program Java Script vii.

1. A <td> tag can contain text. lists. <html> <head> <title>Working with tables</title> </head> <body> <p>Table</p> <table border="1"> <tr> <th>Name</th> <th>Marks</th> </tr> <tr> <td>Neha</td> <td>78</td> </tr> <tr> <td>Raj</td> <td>75</td> </tr> </table> </body> </html> . other tables. images. Formatting with HTML i. and each row is divided into data cells (with the <td> tag). etc. links. td stands for "table data. forms.A table is divided into rows (with the <tr> tag). Working with Tables Tables are defined with the <table> tag." and holds the content of a data cell.

<html> Creating Lists <head><title>Lists</title></head> <body> <h3>Ordered List</h3> <ol> <li>Item 1</li> <li>Item 2</li> </ol> <h3>Unordered List</h3> <ul> <li>Item 1</li> <li>Item 2</li> </ul> <h3>Desciption List</h3> <dl> <dt>Item 1</dt> <dd>Description for Item1</dd> <dt>Item 2</dt> <dd>Description for Item2</dd> </dl> </body> </html> .ii.

iii. <html> HTML Forms and Input <head><title>Forms</title></head> <body> <form> First name:<input type="text" name="firstname"><br> Last name:<input type="text" name="lastname"><br> Address:<input type="text" name="address"><br> Age:<input type="text" name="age"><br> Sex:<input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female<br> Username: <input type="text" name="username"><br> Password: <input type="password" name="pwd"><br> <input type="submit" value="Submit"> </form> </body> </html> .

HTML Styles.iv.jpg" alt="Smiley face" width="100" height="100"> <h4>Link to Google</h4> <ahref="http://www. Links and images <html> <head><title>Images and Links</title></head> <body> <h4>Image</h4> <imgsrc="F:\GGSIPU\Sem 7\FEDT\File\Smiley">Google</a> </body> </html> .

html" width="200" .v. <html> <head> Working with Frames <title>Working with Frames</title> </head> <body> <p>Frame</p> <iframesrc="F:\GGSIPU\Sem height="250"></iframe> </body> </html> 7\FEDT\File\Images and Links.

width:100px."> <b>Menu</b><br> Content1<br> Content2<br> </td> style="background-color:#443266.width:100px."> <h1>Main Title</h1> </td></tr> <tr> <td style="background-color:#FFD700.color:#FFFFFF".width:400px.float:left."> <b>Menu</b><br> Content1<br> Content2<br> Content3</div> <div id="content" style="backgroundcolor:#EEEEEE.text-align:center> <h1 style="margin-bottom:0.float:left.clear:both.height:200px.">Main Title</h1></div> <div id="menu" style=" <html> <body> Div and Span Tag <!DOCTYPE html> <h2>Using div tags</h2> <div id="container" style="width:500px"> <div id="header" style="background-color:#443266."> Main Content</div> <div id="footer" #FFFFFF"> Footer</div> </div> <h2>Using Table</h2> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500.text-align:center.height:200px.color: .

height:200px."> Footer</td> </tr> </table> </body> </html> .<td style="background-color:#EEEEEE."> Content goes here</td> </tr> <tr> <td colspan="2" style="background-color:#FFA500.text-align:center.width:400px.

</p> </body> </html> .color:red.text-align:center">This is a <h1 style="font-family:verdana.vii.</p> #FFFFFF.text-align:center">A heading</h1> <p style="font-family:arial.text-align:center">A paragraph.text-align:center">This is a heading</h2> <p style="background-color:green."> <h2 style="background-color:red.font-size:20px. <html> Making Cascading Style Sheet <!DOCTYPE html> <body style="background-color:cyan.color: paragraph.

")."). JavaScript i. </script> <body> </body> </html> Check Even Odd Number Java Script Program .2. else document.write("The number is even." ") if(number%2==0) document. <html> <head> </head> <script type="text/javascript"> var number. number=prompt("Enter the number!".write("The number is odd.

c=a+b.b=0. b=c.write(b+" "). a=b. } </script> <body> </body> </html> . alert("The series is :") while(b<=limit) { document.c. var limit." "). limit=prompt("Enter the limit of the series:". <html> <head> </head> Fibonacci Series JavaScript <script type="text/javascript"> var a=1.ii.

selection.createRange(). } </script> <body> <form name="Form1"> <br /><br /> <textarea id="txtArea" cols="60" rows="5">We can copy text from this textarea. Copy Text Java Script Program <html> <head> </head> <script type="text/javascript"> function Copy() { CopiedTxt = document.execCommand("Copy").iii. CopiedTxt.</textarea> <br> <input type="button" onClick="Copy()" value="" /> </form> </body> </html> .

0 Transitional//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML "http://www.myForm.myForm.myForm.value == "" || isNaN(document.focus() .value ) || == "" ) { alert( "Please provide your name!" ).myForm.Zip. document. document.myForm. return false.dtd"> <html xmlns="http://www.Name.value == "-1" ) { alert( "Please provide your country!" ).org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html. } if(document. charset=iso-8859-1" /> <title>Untitled Document</title> </head> <script type="text/javascript"> function validate() { if(document.w3.iv. } if(document.Zip." ).value == "" ) { alert( "Please provide your Email!" ).Zip. return false.value. Form Validation in Java Script Program 1. return false.myForm. return false.myForm.length != 5 ) { alert( "Please provide a zip in the format #####.EMail. document.Zip.Name.EMail.focus() .myForm.focus() .myForm. } if(document.w3. } .

document. } </script> <body> </body> </html> v.backgroundColor="lime".style.createPopup()"<b>HELLO<b>". win.body). win.border="lime".document.body.body.document. win.border="solid black 10px".style. win.200.100.return( true ). win. } </script> <body> <input type="button" onClick="popup_window()"> </body> </html> name="b1" value="Show Popup Window" .500.body. <html> <head> </head> Popup Window Program <script language="javascript"> functionpopup_window() { var win=window.

rev=0 var no=parseInt(frm. <html> <head> </head> Palindrome Program Java Script <script type="text/javascript"> functionchkpalindrome() { vartemp.t1.value) temp=no while(no>0) { rev=(rev*10)+(no%10) no=Math.floor(no/10) } if(rev==temp) alert(temp +" is Palindrome") else alert(temp + " is Not Palindrome") } </script> <body> <form name=frm> Enter any Number:<input type=text name=t1 /><input type=button value='Check' onclick="chkpalindrome().vi."> </form> </body> </html> .

break.!"). month=prompt("Enter the number:"." ").vii. break. case 6:alert("June"). month=parseInt(month). break. switch(month){ case 1: alert("January"). break. break. break. case 7:alert("July"). case 9:alert("September"). case 10: alert("October"). default:alert("Wrong choice. case 2:alert("Febuary").. alert("Switch program to find the month!"). case 5:alert("May"). break. case 3:alert("March"). <html> <head> </head> Simple Switch Case in Java Script Program <script type="text/javascript"> var month. case 4:alert("April"). case 11:alert("November"). case 8:alert("August"). case 12:alert("December"). break. break. break. } </script> . break. break.

<body> </body> </html> .

Write a JSP program to display current date of Experiments & Time on the web <%@ page import ="java.close().executeUpdate(). Connection con = DriverManager.util. con.?.?)").3.odbc. ps2.sql. <%@page import="java.setInt(1.prepareStatement("Insert into student values(?.setString(2.println(today). ps.*. ps1.println("number of rows inserted are:" + num ).executeUpdate()."Noida"). out.50). ps. num=ps1.JdbcOdbcDriver").?. PreparedStatement ps1 = con. java. ps.*" %> <% Class.println("number of rows deleted are:" + num ).56).jdbc. PreparedStatementps = con. updation and deletion of records in Oracle database for Student Management System. %> 4.24).setString(3. %> ."25").getConnection("jdbc:odbc:fedt").println("number of rows updated are:" + num ). out.setString(4. num=ps2. out.prepareStatement("delete from student where StudentID=?"). Using JDBC concepts write a program to perform the task of insertion."Tarun").prepareStatement("update student set age=23 where StudentID=?"). PreparedStatement ps2 = con.setInt(1.util.setInt(1. intnum=ps. out.*" %> <% Date today = new Date().forName("sun. ps.executeUpdate().