Web Technology lab programs Vtu
Web Technology programs Vtu (15csl77)
Program 1:
1. Write a JavaScript to design a simple calculator to perform the following operations: sum, product, difference, and quotient.
<!DOCTYPE HTML>
<html>
<head>
<style>
table,td,th
{
border:1px solid black;
width:33%
text-align:center;
background-color:DarkGray;
border-collapse:collapse;
}
table { margin:auto; }
input { text-align:right; }
</style>
<!=======================================================>
<script type="text/javascript">
function calc(clicked_id)
{
var val1=parseFloat(document.getElementById("value1").value);
var val2=parseFloat(document.getElementById("value2").value);
if(isNaN(val1)||isNaN(val2))
alert("ENTER VALID NUMBER");
else if(clicked_id=="add")
document.getElementById("answer").value=val1+val2;
else if(clicked_id=="sub")
document.getElementById("answer").value=val1-val2;
else if(clicked_id=="mul")
document.getElementById("answer").value=val1*val2;
else if(clicked_id=="div")
document.getElementById("answer").value=val1/val2;
}
function cls()
{
value1.value="0";
value2.value="0";
answer.value="";
}
</script>
</head>
<!=======================================================>
<body>
<table>
<tr><th colspan="4">my cal c</th></tr>
<tr>
<td>value1</td><td><input type="text"id="value1"value="0"/></td>
<td>value2</td><td><input type="text"id="value2"value="0"/></td>
</tr>
<tr>
<td><input type="button" value="addition" id="add"onclick="calc(this.id)"/></td>
<td><input type="button" value="subtraction" id="sub"onclick="calc(this.id)"/></td>
<td><input type="button" value="multiplication" id="mul"onclick="calc(this.id)"/></td>
<td><input type="button" value="division" id="div"onclick="calc(this.id)"/></td></tr>
<tr>
<td>answer:</td><td><input type="text" id="answer" value="" disabled/></td>
<td colspan="2"> <input type="button" value="CLEAR ALL"onclick="cls()"/>
</tr>
</table>
</body>
</html>
2.Write a JavaScript that calculates the squares and cubes of the numbers from 0 to 10 and outputs HTML text that displays the resulting values in an HTML table format.
<!DOCTYPE HTML>
<html>
<head>
<style>
table tr,td
{
border: solid black;
width:33%;
text-align:center;
border-collapse:collapse;
background-color:lightblue;
}
table {margin:auto;}
</style>
<script>
document.write("<table><tr> <th colspan='3'> Number from 0 to 10 with their squares and cubes </th></tr>");
document.write("<tr><td> Number</td> <td>Square </td> <td> Cube </td> </tr> ");
for(var n=0;n<=10;n++)
{
document.write("<tr><td>"+n+ "</td><td>" + n*n + "</td> <td>" +n*n*n+ "</td></tr>");
}
document.write("</table>");
</script>
</head>
</html>
3. Write a JavaScript code that displays text “TEXT-GROWING” with increasing font size in the interval of 100ms in RED COLOR, when the font size reaches 50pt it displays “TEXT-SHRINKING” in BLUE color. Then the font size decreases to 5pt.
<!DOCTYPE HTML>
<html>
<body>
<p id="Text1">Arya</p>
<p id="Text2">Drj</p>
</body>
<script>
var size=10;
vari=0;
var Wait=setInterval(Grow,100);
function Grow()
{
if(size<51)
{
size=size+1;
document.getElementById("Text1").style.fontSize=(size+'pt');
document.getElementById("Text1").style.color="red";
document.getElementById("Text2").style.visibility="hidden";
}
else
{
clearInterval(Wait);
Wait=setInterval(Shrink,100);
document.getElementById("Text1").style.visibility="hidden";
document.getElementById("Text1").style.fontSize='1pt';
document.getElementById("Text2").style.visibility="visible";
}
}
function Shrink()
{
if(size>5)
{
size=size-1;
document.getElementById("Text2").style.fontSize=(size+'pt');
document.getElementById("Text2").style.color="blue";
}
else
{
clearInterval(Wait);
}
}
</script>
</html>
4.Develop and demonstrate a HTML5 file that includes JavaScript script that uses functions for the following problems: a. Parameter: A string b. Output: The position in the string of the left-most vowel c. Parameter: A number d. Output: The number with its digits in the reverse order
<!DOCTYPE html>
<html>
<body>
<script>
var str=prompt("enter the input");
if(isNaN(str))
{
str=str.toUpperCase();
for(var i=0;i<str.length;i++)
{
var char=str.charAt(i);
if(char=="A"||char=="E"||char=="I"||char=="O"||char=="U")
break;
}
if(i<str.length)
alert("the pos of left most vowel is "+(i+1));
else
alert("no vowel found");
}
else
{
var str=parseInt(str);
var a,b,temp=0;
b=str;
while(b>0)
{
a=parseInt(b%10);
b=parseInt(b/10);
temp=temp*10+a;
}
alert("the reverse of number is "+ temp);
}
</script>
</body>
</html>
5.Design an XML document to store information about a student in an engineering college affiliated to VTU. The information must include USN, Name, and Name of the College, Branch, Year of Joining, and email id. Make up sample data for 3 students. Create a CSS style sheet and use it to display the document.
<?xml-stylesheet type="text/css" href="5.css"?>
<students>
<student>
<usn>1st15is001</usn>
<name>vishwas</name>
<college>sait</college>
<branch>ise</branch>
<year>2015</year>
<email>vishwas@gmail.com</email>
</student>
<student>
<usn>1st15is002</usn>
<name>madhan</name>
<college>sait</college>
<branch>ise</branch>
<year>2015</year>
<email>madhan@gmail.com</email>
</student>
<student>
<usn>1st15is003</usn>
<name>shar</name>
<college>sait</college>
<branch>ise</branch>
<year>2015</year>
<email>shar@gmail.com</email>
</student>
</students>
student{display:block;margin-top:10px;color:navy;}
usn {display:block; margin-left:20px;font-size:14px;color:red;}
name {display:block; margin-left:20px;font-size:14px;color:blue;}
college {display:block; margin-left:20px;font-size:14px;color:yellow;}
branch {display:block; margin-left:20px;font-size:14px;color:green;}
year {display:block; margin-left:20px;font-size:14px;color:purple;}
email {display:block; margin-left:20px;font-size:14px;color:pink;
6.Write a PHP program to keep track of the number of visitors visiting the web page and to display this count of visitors, with proper headings.
<?php
print"<h1>REFRESH PAGE</h1>";
$name="new.txt";
$myfile=fopen($name,"r") or die("unable");
$txt1=fgets($myfile);
$txt1=intval($txt1);
fclose($myfile);
$txt1++;
echo "result read=",$txt1;
$myfile=fopen($name,"w") or die("unable");
fwrite($myfile,$txt1);
fclose($myfile);
?>
7.Write a PHP program to display a digital clock which displays the current time of the server.
<!DOCTYPE HTML>
<html>
<head>
<style>
p{
color:yellow;
font-size:90px;
position:absolute;
top:10%;
left:50%;
transform:translate(-50%,-50%);
}
body{background-color:purple;}
</style>
<p><?php echo date("h:i:s a");?></p>
</head>
</html>
8.Write the PHP programs to do the following:
a. Implement simple calculator operations.
b. Find the transpose of a matrix.
c. Multiplication of two matrices.
d. Addition of two matrices.
<html>
<head>
<style>
table td,th
{
border:1px solid black;
width:40%;
text-align:left;
background-color:pink;
}
table{margin:auto;}
input,p{text-align:right;}
</style>
</head>
<body>
<form action="" method="post">
<table>
<caption><h2>SIMPLE CALCULATOR</h2></caption>
<tr>
<td>first number:</td> <td><input type="text"name="num1"/></td>
<td rowspan="2"><input type="submit" name="submit" value="calculate"/></td>
</tr>
<tr>
<td>Second number:</td>
<td><input type="text" name="num2"/></td>
</tr>
</form>
<?php
if(isset($_POST['submit']))
{
$num1=$_POST['num1'];
$num2=$_POST['num2'];
if(is_numeric($num1) and is_numeric($num2))
{
echo"<tr><td>addition: </td><td> <p>".($num1+$num2)."</p></td>";
echo"<tr><td>subtraction: </td><td> <p>".($num1-$num2)."</p></td>";
echo"<tr><td>multiplication:</td><td> <p>".($num1*$num2)."</p></td>";
echo"<tr><td>division: </td><td> <p>".($num1/$num2)."</p></td>";
echo"</table>";
}
}
?>
</body>
</html>
Program 8b:
<?php
$a=array(array(1,2,3),array(4,5,6),array(7,8,9));
$b=array(array(7,8,9),array(4,5,6),array(1,2,3));
$m=count($a);
$n=count($a[2]);
$p=count($b);
$q=count($b[2]);
echo "the first matrix:"."<br/>";
for($row=0;$row<$m;$row++)
{
for($col=0;$col<$n;$col++)
echo" ".$a[$row][$col];
echo"<br/>";
}
echo"the second matrix:"."<br/>";
for($row=0;$row<$p;$row++)
{
for($col=0;$col<$q;$col++)
echo" ".$b[$row][$col];
echo"<br/>";
}
echo "the transpose for the first matrix is:"."<br/>";
for($row=0;$row<$m;$row++)
{
for($col=0;$col<$n;$col++)
echo"".$a[$col][$row];
echo"<br/>";
}
if(($m===$p)and($n===$q))
{
echo"the addition od matrices is:"."<br/>";
for($row=0;$row<3;$row++)
{
for($col=0;$col<3;$col++)
echo"".$a[$row][$col]+$b[$row][$col]."";
echo"<br/>";
}
}
if($n===$p)
{
echo "the multiplication of matrices:<br/>";
$result=array();
for($i=0;$i<$m;$i++)
{
for($j=0;$j<$q;$j++)
{
$result[$i][$j]=0;
for($k=0;$k<$n;$k++)
$result[$i][$j]+=$a[$i][$k]*$b[$k][$j];
}
}
for($row=0;$row<$m;$row++)
{
for($col=0;$col<$q;$col++)
echo"".$result[$row][$col];
echo"<br/>";
}
?>
9. Write a PHP program named states.py that declares a variable states with value "Mississippi Alabama Texas Massachusetts Kansas". write a PHP program that does the following: a. Search for a word in variable states that ends in xas. Store this word in element 0 of
a list named statesList.
b. Search for a word in states that begins with k and ends in s. Perform a caseinsensitive comparison. [Note: Passing re.Ias a second parameter to method compile performs a case-insensitive comparison.] Store this word in element1 of statesList.
c. Search for a word in states that begins with M and ends in s. Store this word in element 2 of the list.
d. Search for a word in states that ends in a. Store this word in element 3 of the list.
<?php
$states= "Mississippi Alabama Texas Massachusetts Kansas";
$states1 = explode(' ',$states);
echo"Original Array:<br>";
foreach ($states1 as $i =>$i_value)
{
print("STATES[$i]=$i_value<br>");
}
foreach($states1 as $state)
{
if(preg_match('/xas$/', ($state)))
$statesArray[0] = ($state);
}
foreach($states1 as $state)
{
if(preg_match('/^k.*s$/i',($state)))
$statesArray[1]=($state);
}
foreach($states1 as $state)
{
if(preg_match('/^M.*s$/',($state)))
$statesArray[2] = ($state);
}
foreach($states1 as $state)
{
if(preg_match('/a$/',($state)))
$statesArray[3] = ($state);
}
echo "<br><br>Resultant Array <br>";
foreach($statesArray as $i =>$i_value)
print("STATES[$i]=$i_value<br>");
?>
10. Write a PHP program to sort the student records which are stored in the database using selection sort.
<html>
<head>
<style>
table, td, th
{
border: 1px solid black;
width: 33%;
text-align: center;
border-collapse:collapse;
background-color:lightblue;
}
table { margin: auto; }
</style>
</head>
<body>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "weblab";
$a=[];
$conn = mysqli_connect($servername, $username, $password, $dbname);
if ($conn->connect_error)
die("Connection failed: " . $conn->connect_error);
$sql = "SELECT * FROM students";
$result = $conn->query($sql);
echo "<br>";
echo "<center> BEFORE SORTING </center>";
echo "<table border='2'>";
echo "<tr>";
echo "<th>USN</th><th>NAME</th><th>Address</th></tr>";
if ($result->num_rows> 0)
{
// output data of each row and fetches a result row as an associative array
while($row = $result->fetch_assoc())
{
echo "<tr>";
echo "<td>". $row["usn"]."</td>";
echo "<td>". $row["name"]."</td>";
echo "<td>". $row["sem"]."</td></tr>";
array_push($a,$row["usn"]);
}
}
else
echo "Table is Empty";
echo "</table>";
$n=count($a);
$b=$a;
for ( $i = 0 ; $i< ($n - 1) ; $i++ )
{
$pos= $i;
for ( $j = $i + 1 ; $j < $n ; $j++ )
{
if ( $a[$pos] > $a[$j] )
$pos= $j;
}
if ( $pos!= $i )
{
$temp=$a[$i];
$a[$i] = $a[$pos];
$a[$pos] = $temp;
}
}
$c=[];
$d=[];
$result = $conn->query($sql);
if ($result->num_rows> 0)// output data of each row
{
while($row = $result->fetch_assoc())
{
for($i=0;$i<$n;$i++)
{
if($row["usn"]== $a[$i])
{
$c[$i]=$row["name"];
$d[$i]=$row["sem"];
}
}
}
}
echo "<br>";
echo "<center> AFTER SORTING <center>";
echo "<table border='2'>";
echo "<tr>";
echo "<th>USN</th><th>NAME</th><th>Address</th></tr>";
for($i=0;$i<$n;$i++)
{
echo "<tr>";
echo "<td>". $a[$i]."</td>";
echo "<td>". $c[$i]."</td>";
echo "<td>". $d[$i]."</td></tr>";
}
echo "</table>";
$conn->close();
?>
</body>
</html>
Comments
Post a Comment