Scribd
Upload
6 views48 pages

HTML 10

The document outlines various practical exercises in HTML and JavaScript, demonstrating the use of predefined functions in the window object, event handling, and PHP programming. It includes code examples for alert, prompt, confirm methods, and changing background colors through different events. Additionally, it covers creating a calendar with combo boxes and implementing a stopwatch using setInterval and clearInterval methods.

Uploaded by

nautiyalgautam484
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views48 pages

HTML 10

The document outlines various practical exercises in HTML and JavaScript, demonstrating the use of predefined functions in the window object, event handling, and PHP programming. It includes code examples for alert, prompt, confirm methods, and changing background colors through different events. Additionally, it covers creating a calendar with combo boxes and implementing a stopwatch using setInterval and clearInterval methods.

Uploaded by

nautiyalgautam484
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 48

PRACTICAL-8

Objective: To create an html page to explain the use of


various predefined functions in window object in java
script.
Code:
Program 1:
<!-- Understand and implement alert method -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Window Alert Example</title>
<script>
function showAlert() {
alert("This is an alert message!");
}
</script>
</head>
<body>
<button onclick="showAlert()">Click for Alert</button>
<h3>cody by Bela Diwan</h3>
</body>
</html>

Output 1:
Program 2:
<!-- Understand and implement prompt method -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Window Prompt Example</title>
<script>
function getPrompt() {
let name = prompt("Enter your name:");
if (name) {
document.getElementById("result").innerText = "Hello, " + name + "!";
} else {
document.getElementById("result").innerText = "No name entered!";
}
}
</script>
</head>
<body>
<button onclick="getPrompt()">Click for Prompt</button>
<p id="result"></p>
<h3>code by Bela Diwan</h3>
</body>
</html>

Output 2:
Program 3:
<!-- Understand and implement confirm method -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Window Confirm Example</title>
<script>
function confirmAction() {
let result = confirm("Do you want to proceed?");
if (result) {
document.getElementById("message").innerText = "You clicked OK!";
} else {
document.getElementById("message").innerText = "You clicked Cancel!";
}
}
</script>
</head>
<body>
<button onclick="confirmAction()">Click for Confirm</button>
<p id="message"></p>
<h3>code by Bela Diwan</h3>
</body>
</html>
Output 3:
Program 4:
<!-- Understand and implement open function -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Window Open Example</title>
<script>
function openWindow() {
window.open("https://www.example.com", "_blank",
"width=600,height=400");
}
</script>
</head>
<body>
<button onclick="openWindow()">Open New Window</button>
<h3>Code by Bela Diwan</h3>
</body>
</html>
Output 4:
PRACTICAL-9
Objective: To create an html page to change the background color for
every click of a button using javascript. Write seperate code for different
events
Code:
Program 1:
<!-- Understand and implement onclick -->
<!DOCTYPE html>
<html>
<head>
<title>Click Event - Change Background</title>
</head>
<body>
<button onclick="changeColor()">Click Me</button>
<script>
const colors = ["lightblue", "lightgreen", "lavender", "peachpuff", "lightpink"];
let index = 0;
function changeColor() {
document.body.style.backgroundColor = colors[index];
index = (index + 1) % colors.length;
}
</script>
</body>
</html>
Output 1:
Program 2:
<!-- Understand and implement addEventListener('click') -->
<!DOCTYPE html>
<html>
<head>
<title>Event Listener - Change Background</title>
</head>
<body>
<button id="colorBtn">Click Me</button>

<script>
const colors = ["#ff9999", "#99ccff", "#ccffcc", "#ffff99", "#d9b3ff"];
let i = 0;

document.getElementById("colorBtn").addEventListener("click", function () {
document.body.style.backgroundColor = colors[i];
i = (i + 1) % colors.length;
});
</script>
</body>
</html>
Output 2:

Program 3:
<!-- Understand and implement onmouseover (hover event) -->
<!DOCTYPE html>
<html>
<head>
<title>Mouse Over - Change Background</title>
</head>
<body>
<button onmouseover="hoverColor()">Hover Over Me</button>
<script>
const hoverColors = ["#e6f7ff", "#ffe6e6", "#e6ffe6", "#fff0b3"];
let hIndex = 0;
function hoverColor() {
document.body.style.backgroundColor = hoverColors[hIndex];
hIndex = (hIndex + 1) % hoverColors.length;
}
</script>
</body>
</html>

Output 3:
Program 4:
<!-- Understand and implement ondblclick (double-click event) -->
<!DOCTYPE html>
<html>
<head>
<title>Double Click - Change Background</title>
</head>
<body>
<button ondblclick="dblColor()">Double Click Me</button>
<h3>code by Bela Diwan</h3>
<script>
const dblColors = ["#f0f8ff", "#faebd7", "#ffe4e1", "#f5f5dc"];
let dIndex = 0;
function dblColor() {
document.body.style.backgroundColor = dblColors[dIndex];
dIndex = (dIndex + 1) % dblColors.length;
}
</script>
</body>
</html>
Output 4:

Program 5:
<!-- Understand and implement onkeydown (keyboard key press event -->
<!DOCTYPE html>
<html>
<head>
<title>Key Down - Change Background</title>
</head>
<body>
<h3>Press any key to change background color</h3>
<h4>code by Bela Diwan</h4>
<script>
const keyColors = ["#ffe6cc", "#cce6ff", "#e6ccff", "#ccffe6"];
let kIndex = 0;

document.body.onkeydown = function () {
document.body.style.backgroundColor = keyColors[kIndex];
kIndex = (kIndex + 1) % keyColors.length;
};
</script>
</body>
</html>
Output 5:

Program 6:
<!-- Understand and implement onload (when the page finishes loading) -->
<!DOCTYPE html>
<html>
<head>
<title>Page Load - Change Background</title>
</head>
<body>
<h3>Background changes when page loads</h3>
<h4>code by Bela Diwan</h4>
<script>
window.onload = function () {
document.body.style.backgroundColor = "#ccffcc"; // light green
};
</script>
</body>
</html>
Output 6:

Program 7:
<!-- Understand and implement onmousemove (mouse movement over the page) -->
<!DOCTYPE html>
<html>
<head>
<title>Mouse Move - Background</title>
</head>
<body>
<h3>Move your mouse around the page</h3>
<h4>code by Bela Diwan</h4>
<script>
const moveColors = ["#e0ffff", "#f0fff0", "#fff0f5", "#ffffe0"];
let mIndex = 0;

document.body.onmousemove = function () {
document.body.style.backgroundColor = moveColors[mIndex];
mIndex = (mIndex + 1) % moveColors.length;
};
</script>
</body>
</html>
Output 7:

Program 8:
<!-- Understand and implement onchange (dropdown selection change) -->
<!DOCTYPE html>
<html>
<head>
<title>Change Event - Background Color</title>
</head>
<body>
<select onchange="changeColor(this)">
<option value="">-- Select Color --</option>
<option value="#ffc">Light Yellow</option>
<option value="#cff">Light Cyan</option>
<option value="#fcf">Light Magenta</option>
</select>
<h4>code by Bela Diwan</h4>

<script>
function changeColor(selectObj) {
document.body.style.backgroundColor = selectObj.value;
}
</script>
</body>
</html>
Output 8:
PRACTICAL-10
Objective: Event Handling - calendar for the month and year by
combo box: To create an html page with 2 combo box
populated with month & year, to display the calendar for
the selected month & year from combo box using
javascript.
Code:
<!DOCTYPE html>
<html>
<!-- https://www.geeksforgeeks.org/javascript-events/ -->
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css" />
</head>
<!-- https://www.geeksforgeeks.org/css-to-put-icon-inside-an-input-element-in-a-form/ -->
<style>
.input-icons i {
position: absolute;
}

.input-icons {
width: 100%;
margin-bottom: 10px;
}

.icon {
padding: 2px;
min-width: 40px;
}
.input-field {
width: 50%;
padding: 3px;
text-align: right;
}
</style>

<body>
<h1>Show a Date Control</h1>

<div>
<label>Select Date:</label>
<div class="input-icons">
<i class="fa fa-calendar icon"></i>
<input
class="input-field"
type="text"
placeholder="Select date"
id="selectedDateField"
readonly
/>
</div>

<div id="dateDropdownDiv">
<select
id="yearDropdownField"
onchange="onChangeYearAndMonth(this)"
></select>
<select
id="monthDropdownField"
onchange="onChangeYearAndMonth(this)"
></select>
<select id="dateDropdownField"></select>
<button onclick="onOkClick()">Ok</button>
<button onclick="onNowClick()">Now</button>
</div>
</div>
</body>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-
3.2.1.min.js"></script>
<script type="text/javascript">
const yearDropdownField = $("#yearDropdownField");
const monthDropdownField = $("#monthDropdownField");
const dateDropdownField = $("#dateDropdownField");
const selectedDateField = $("#selectedDateField");

window.onload = function () {

populateYearDropdown();
populateMonthDropdown();
populateDateDropdown();

// Initially, we make hidden Date Dropdown Div.


$("#dateDropdownDiv").toggle();

// Add click event on selectedDateField and called toggle method on dateDropdownDiv


$("#selectedDateField").click(function () {
$("#dateDropdownDiv").toggle();
});
};
function populateYearDropdown() {

//Determine the Current Year.


const currentYear = new Date().getFullYear();

//Loop and add the Year values to DropDownList.


for (let i = currentYear; i >= 1950; i--) {
const option = document.createElement("OPTION");
option.innerHTML = i;
option.value = i;
yearDropdownField.append(option);
}
}

function populateMonthDropdown() {
const monthNames = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
//Loop and add the Year values to DropDownList.
for (let i = 0; i < monthNames.length; i++) {
const option = document.createElement("OPTION");
option.innerHTML = monthNames[i];
option.value = i;
monthDropdownField.append(option);
}
}

function populateDateDropdown() {
dateDropdownField.empty();
const year = yearDropdownField.val();
const month = parseInt(monthDropdownField.val()) + 1;

//get the last day, so the number of days in that month


const days = new Date(year, month, 0).getDate();

//lets create the days of that month


for (let d = 1; d <= days; d++) {
const option = document.createElement("OPTION");
option.innerHTML = d;
option.value = d;
dateDropdownField.append(option);
}
}

function onChangeYearAndMonth($event) {
this.populateDateDropdown();
}

function onOkClick() {
const y = yearDropdownField.val();
const m = monthDropdownField.val();
const d = dateDropdownField.val();

// make date object by passing year, month and date value


const date = new Date(y, m, d);

// set date object into readonly input field


selectedDateField.val(date.toLocaleDateString());

// after set date, hide date dropdown div


$("#dateDropdownDiv").hide();
}

function onNowClick() {
const date = new Date(); // get date object

// set values
yearDropdownField.val(date.getFullYear());
monthDropdownField.val(date.getMonth());
dateDropdownField.val(date.getDate());

// set date value into input field


selectedDateField.val(date.toLocaleDateString());
// hide date dropdown div
$("#dateDropdownDiv").hide();
}
</script>
<p>Code by Gautam</p>

</html>
Output:
PRACTICAL-11
Objective: Window object method setInterval, clearInterval: To
create an html page with three button START PAUSE and
RESET for controlling stopwatch.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stopwatch</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding-top: 50px;
}
#display {
font-size: 48px;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
margin: 5px;
font-size: 18px;
}
</style>
</head>
<body>
<div id="display">00:00:00</div>
<button onclick="startTimer()">START</button>
<button onclick="pauseTimer()">PAUSE</button>
<button onclick="resetTimer()">RESET</button>
<h4>code by Gautam Nautiyal</h4>

<script>
let seconds = 0;
let intervalId = null;

function formatTime(sec) {
const hrs = String(Math.floor(sec / 3600)).padStart(2, '0');
const mins = String(Math.floor((sec % 3600) / 60)).padStart(2, '0');
const secs = String(sec % 60).padStart(2, '0');
return `${hrs}:${mins}:${secs}`;
}

function updateDisplay() {
document.getElementById("display").textContent = formatTime(seconds);
}

function startTimer() {
if (intervalId) return; // prevent multiple intervals
intervalId = setInterval(() => {
seconds++;
updateDisplay();
}, 1000);
}

function pauseTimer() {
clearInterval(intervalId);
intervalId = null;
}

function resetTimer() {
pauseTimer();
seconds = 0;
updateDisplay();
}
</script>
</body>
</html>
Output:
PRACTICAL-12
Objective : PHP XAMPP Server: Install and configure PHP,
web server, MYSQL (XAMPP), Write a program to print
“Welcome to PHP”, Create a php program to find odd or
even number from given number. Write a php program to
find maximum of three numbers.
Code:
Program 1: welcome page of php
<?php
echo "Welcome to PHP";
echo "code by Gautam Nautiyal";
?>
Output 1 :

Program 2: Odd-even using PHP.


<!DOCTYPE html>
<html>
<head>
<title>Odd or Even Checker</title>
</head>
<body>
<h2>Check Odd or Even</h2>
<form method="post">
Enter a number: <input type="number" name="number" required>
<input type="submit" value="Check">
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$number = $_POST['number'];
if ($number % 2 == 0) {
echo "<p>$number is <strong>Even</strong></p>";
} else {
echo "<p>$number is <strong>Odd</strong></p>";
}
}
?>
<h3>Code by Gautam Nautiyal</h3>
</body>
</html>
Output 2 :
Program 3: maximum number using php.
<!DOCTYPE html>
<html>
<head>
<title>Find Maximum of Three Numbers</title>
</head>
<body>

<h2>Find the Maximum of Three Numbers</h2>


<form method="post">
Enter first number: <input type="number" name="num1" required><br><br>
Enter second number: <input type="number" name="num2" required><br><br>
Enter third number: <input type="number" name="num3" required><br><br>
<input type="submit" value="Find Maximum">
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$a = $_POST['num1'];
$b = $_POST['num2'];
$c = $_POST['num3'];
$max = $a;
if ($b > $max) {
$max = $b;
}
if ($c > $max) {
$max = $c;
}
echo "<p>The maximum of $a, $b, and $c is <strong>$max</strong></p>";
}
?>
<h3> code by Gautam Nautiyal</h3>
</body>
</html>
Output 3 :
PRACTICAL-13
Objective: Write a program to enter TWO numbers and
print the Swap Numbers using PHP Example.

Code-
Program :

<!DOCTYPE html>
<html>
<head>
<title>Swap Two Numbers</title>
</head>
<body>

<h2>Swap Two Numbers</h2>


<form method="post">
Enter first number (A): <input type="number" name="num1" required><br><br>
Enter second number (B): <input type="number" name="num2" required><br><br>
<input type="submit" value="Swap">
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$a = $_POST['num1'];
$b = $_POST['num2'];

echo "<p><strong>Before Swap:</strong><br> A = $a, B = $b</p>";

// Swapping
$temp = $a;
$a = $b;
$b = $temp;

echo "<p><strong>After Swap:</strong><br> A = $a, B = $b</p>";


}
?>
<h3>Code by Gautam Nautiyal</h3>
</body>
</html>
Output :
PRACTICAL-14
Objective: Write a PHP Program to demonstrate the
variable function: gettype() and settype(),Write a PHP
Program to demonstrate the variable unction:
isset() ,Write a PHP Program to demonstrate the variable
unction: unset()
Code:
Program-1 : settype and gettype:
<?php
echo "=== gettype() and settype() ===\n";

// Declare a variable
$var = 42;

// Get and display the type


echo "Original type of \$var: \n" . gettype($var) . "\n";

// Change the type to string


settype($var, "string");
echo "Type after settype to string: \n" . gettype($var) . "\n";

// Change the type to boolean


settype($var, "boolean");
echo "Type after settype to boolean: \n" . gettype($var) . "\n";

// Output the value


echo "Value of \$var: \n";
var_dump($var);
?>
Output -1:

Program 2 : demonstrating isset()


<?php
echo "\n=== isset() ===\n";

// Declare a variable
$name = "Alice";

// Check if variable is set


if (isset($name)) {
echo "\$name is set and is: $name\n";
} else {
echo "\$name is not set\n";
}

// Check an unset variable


if (isset($age)) {
echo "\$age is set\n";
} else {
echo "\$age is not set\n";
}
?>
Output 2:

Program 3 : Demonstrating unset()


<?php
echo "\n=== unset() ===\n";

// Declare and use a variable


$city = "New York";
echo "Before unset: \$city = $city\n";

// Unset the variable


unset($city);

// Try to access the variable after unset


if (isset($city)) {
echo "After unset: \$city is still set to $city\n";
} else {
echo "After unset: \$city is no longer set\n";
}
?>
Output 3:
PRACTICAL-15
Objective: Session Handling Using PHP: Create login page using
session variables
Code:
Login.php:
<?php
session_start();

// Hardcoded username and password


$correct_username = "admin";
$correct_password = "12345";

// Check if form submitted


if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST["username"] ?? '';
$password = $_POST["password"] ?? '';

// Simple login validation


if ($username === $correct_username && $password === $correct_password) {
$_SESSION["username"] = $username;
header("Location: dashboard.php");
exit();
} else {
$error = "Invalid username or password!";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
<h2>Login</h2>
<?php if (!empty($error)) echo "<p style='color:red;'>$error</p>"; ?>
<form method="POST">
Username: <input type="text" name="username" required><br><br>
Password: <input type="password" name="password" required><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>

Dashboard.php:
<?php
session_start();

// Check if user is logged in


if (!isset($_SESSION["username"])) {
header("Location: login.php");
exit();
}
?>

<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
</head>
<body>
<h2>Welcome, <?php echo htmlspecialchars($_SESSION["username"]); ?>!</h2>
<p>You are logged in.</p>
<a href="logout.php">Logout</a>
</body>
</html>

Logout.php:
<?php
session_start();
// Destroy all session data
session_unset();
session_destroy();

header("Location: login.php");
exit();
Output:
PRACTICAL-16
Objective: Cookies Management: Write PHP program to implement a cookie
and session based counter. Create Cookies variable using PHP, Display the
cookies variable using PHP.

Code:
Counter.php:
<?php
session_start();

// COOKIE-BASED COUNTER
if (isset($_COOKIE['cookie_counter'])) {
$cookie_counter = $_COOKIE['cookie_counter'] + 1;
} else {
$cookie_counter = 1;
}
// Set cookie with 1 year expiration
setcookie('cookie_counter', $cookie_counter, time() + (365 * 24 * 60 * 60));

// SESSION-BASED COUNTER
if (isset($_SESSION['session_counter'])) {
$_SESSION['session_counter']++;
} else {
$_SESSION['session_counter'] = 1;
}

?>

<!DOCTYPE html>
<html>
<head>
<title>Cookie and Session Counter</title>
</head>
<body>
<h2>Cookie and Session Counter Example</h2>
<p><strong>Cookie Counter:</strong> <?php echo $cookie_counter; ?> visits (persists across
browser sessions)</p>
<p><strong>Session Counter:</strong> <?php echo $_SESSION['session_counter']; ?> visits
(resets when session ends)</p>

<p><a href="counter.php">Reload Page</a></p>


<p><a href="reset.php">Reset Cookie and Session</a></p>
</body>
</html>

Reset.php:
<?php
session_start();
// Clear session variables
session_unset();
session_destroy();
// Expire the cookie
setcookie('cookie_counter', '', time() - 3600); // set in the past
header("Location: counter.php");
exit();
Output:

Code by Gautam Nautiyal

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy