Scribd
Upload
8 views

IT Essentials

The document describes how to incorporate dynamism in websites using PHP scripts. It provides 7 examples of PHP scripts that include: 1) Changing an image on mouseover using JavaScript, 2) Changing text style on mouseover using JavaScript, 3) Checking if a number is an Armstrong number, 4) Building a basic calculator, 5) Calculating factorials, 6) Checking if a number is even or odd, and 7) Calculating the sum of digits in a number. The examples cover basic PHP concepts like forms, GET and POST methods, functions, if/else statements, and performing calculations.

Uploaded by

srii21rohith
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

IT Essentials

The document describes how to incorporate dynamism in websites using PHP scripts. It provides 7 examples of PHP scripts that include: 1) Changing an image on mouseover using JavaScript, 2) Changing text style on mouseover using JavaScript, 3) Checking if a number is an Armstrong number, 4) Building a basic calculator, 5) Calculating factorials, 6) Checking if a number is even or odd, and 7) Calculating the sum of digits in a number. The examples cover basic PHP concepts like forms, GET and POST methods, functions, if/else statements, and performing calculations.

Uploaded by

srii21rohith
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

EX.

NO: 8 INCORPORATE DYNAMISM IN WEBSITES USING PHP


DATE:

AIM:
To develop incorporate dynamism in websites using PHP scripts.

PROCEDURE:
1) Create a new HTML file and include head tag and title tag
2) Include image tag and add onmouseover property of event listener then define
a javascript function and call the function in onmouseover event
3) Define a function for changing font colour, font size and font style in
javascript call the function in onmouseover event listener.
4) Define a function to find the Armstrong number and declare the logics and
call in button onclick.
5) Get the input form the user using html form and declare the calculator function
and pass the input as parameters do the calculation and display to the user
6) Get input the user through html form and declare a function OddOrEven then
write a logic in php if(inputnumber/2)==0 then the given is even else odd and
display the result to user

PROGRAM:
1)
<!DOCTYPE html>
<html>
<head>
<title>Image Hover Change</title>
<style>
#hover-image {
width: 300px;
height: 200px;
transition: transform 0.3s ease-in-out;
}
</style>
</head>
<body>
<img id="hover-image" src="original.jpg"
onmouseover="changeImage()" onmouseout="revertImage()">

<script>

Roll Number:212722080305 Page No.:


function changeImage() {
document.getElementById('hover-image').src = 'changed.jpg';
}

function revertImage() {
document.getElementById('hover-image').src = 'original.jpg';
}
</script>
</body>
</html>

2)
<!DOCTYPE html>
<html>
<head>
<title>Text Style Change on Hover</title>
<style>
#hover-text {
font-size: 18px;
color: black;
font-family: Arial, sans-serif;
transition: all 0.3s ease-in-out;
}
</style>
</head>
<body>
<p id="hover-text" onmouseover="changeTextStyle()"
onmouseout="revertTextStyle()">Hover over this text!</p>

<script>

Roll Number:212722080305 Page No.:


function changeTextStyle() {
document.getElementById('hover-text').style.fontSize = '24px';
document.getElementById('hover-text').style.color = 'blue';
document.getElementById('hover-text').style.fontFamily = 'Georgia,
serif';
}

function revertTextStyle() {
document.getElementById('hover-text').style.fontSize = '18px';
document.getElementById('hover-text').style.color = 'black';
document.getElementById('hover-text').style.fontFamily = 'Arial, sans-serif';
}
</script>
</body>
</html>

3)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>

Roll Number:212722080305 Page No.:


</head>
<body>
<br><br>
<center>
<h1>Armstrong Number</h1>
<form action="" method="post" id="forms">
<label for="input">Enter a Number:</label>
<input type="text" name="number" id="input" placeholder="Enter a
Number"> <br>
</form>
<br>
<button type="submit" value="CHECK"
onclick="isArmstrongNumber()">Check</button>
<p id="display"></p>
</center>
<script>
function isArmstrongNumber() {
let number=document.getElementById("input").value;
var temp=number;
const numString =
number.toString(); const numDigits
= numString.length; let sum = 0;

for (let i = 0; i < numDigits; i++) {


sum += Math.pow(parseInt(numString[i]), numDigits);
}
temp=parseInt(temp);
if(temp==sum)
{
document.getElementById("display").innerHTML="<h3>"+temp+" is an
Armstrong number."+"</h3>";
}
else
{
document.getElementById("display").innerHTML=temp+" is not an
Armstrong number.";
}
}

</script>
</body>
</html>

Roll Number:212722080305 Page No.:


4)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<style>
body{
background-color: rgb(239, 221, 221);
}
form{
margin: auto;
position: absolute;

Roll Number:212722080305 Page No.:


top:150px;
left: 400px;
font-size: 25px;

}
h2
{
color:blue;
}
button
{
color: blue;
}
#fnumber
{
margin-left:29px ;
}
#op
{
margin-left: 139px;
}
#op_id
{
position: relative;
left: 80px;
}
#button
{
height: 30px;
border-radius: 7px;
}
</style>
</head>
<body>
<center>
<form >
<h2>Calculator Using JavaScript</h2>
<label for="fnumber">Enter the first Number:</label> <input type="text" name=""
id="fnumber" placeholder="0" ><br>
<label for="snumber">Enter the Second Number:</label> <input type="text"
name="" id="snumber" placeholder="0"><br>
<label for="op" id="op_id">Enter the Operation:</label> <input type="text"
name="Operation" id="op" placeholder="+/-">
<button onclick="calcul()" id="button">Calculate</button>

Roll Number:212722080305 Page No.:


</form>
</center>
<script>
function calcul()
{
var input1=document.getElementById("fnumber").value;input1= parseInt(input1);
var input2=document.getElementById("snumber").value;input2=
parseInt(input2); var operator=document.getElementById('op').value;
if(operator=='+')
{
alert("Your Ans is:"+eval('input1+input2'))
}
else if(operator=='-')
{
alert("Your Ans is:"+eval('input1-input2'))
}
else if(operator=='*')
{
alert("Your Ans is:"+eval('input1*input2'))
}
else
{
alert("Your Ans is:"+eval('input1/input2'))
}
}
</script>
</body>
</html>

Roll Number:212722080305 Page No.:


5)
<!DOCTYPE html>
<html>
<head>
<title>Factorial Calculator</title>
</head>
<body>
<form action="index.php" method="post">
Enter a number: <input type="number" name="number" required>
<input type="submit" value="Calculate Factorial">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$number = $_POST["number"];

function calculateFactorial($n) {
if ($n === 0 || $n === 1) {
return 1;
} else {
return $n * calculateFactorial($n - 1);
}

Roll Number:212722080305 Page No.:


}

$factorial = calculateFactorial($number);

echo "The factorial of $number is: $factorial";


}
?>
</body>
</html>

6)
<!DOCTYPE html>
<html>
<head>
<title>Odd/Even Checker Result</title>
</head>
<body>
<form method="post" action="index.php">
Enter a number: <input type="number" name="number">
<input type="submit" value="Check">
</form>
<?php
if(isset($_POST['number'])) {
$number = $_POST['number'];
if($number % 2 == 0) {
echo "<p>$number is an even number.</p>";
} else {
echo "<p>$number is an odd number.</p>";
}
} else {
echo "<p>No number entered.</p>";
}
?>
</body>
</html>

Roll Number:212722080305 Page No.:


7)
<!DOCTYPE html>
<html>
<head>
<title>Sum of Digits Calculator</title>
</head>
<body>
<form action="sum_of_digits.php" method="post">
Enter a number: <input type="number" name="number" required>
<input type="submit" value="Calculate Sum of Digits">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$number = $_POST["number"];

function sumOfDigits($num) {
$sum = 0;
while ($num != 0) {
$digit = $num % 10;
$sum += $digit;
$num = (int)($num / 10);
}
return $sum;
}

Roll Number:212722080305 Page No.:


$result = sumOfDigits($number);

echo "The sum of digits of $number is: $result";


}
?>
</body>
</html>

RESULT:
Thus Incorporate audio and video elements in web with suitable html tags is executed
and verified successfully.

Roll Number:212722080305 Page No.:

You might also like