Scribd
Upload
15 views

css exps

Uploaded by

gamer102469
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

css exps

Uploaded by

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

Exp 2.

Develop JavaScript to use decision making and looping statements


<!DOCTYPE htm>

<head>

<title>Javascript Decision Mkaing Example0</title>

</head>

<body>

<script type="text/javascript">

var number = 7;

if (number>5){

document.write('The number is greater than 5.<br>')

if(number %2==0){

document.write("The number is even.<br>");

} else {

document.writ("The number is odd.<br>");

var fruit = 'apple';

switch(fruit){

case 'banana':fruit

document.write('The fruit is a banana.<br>');

break;

case'apple':

document.write('The fruit is an apple.<br>');

break;

default:

document.write('unknown fruit.<br>');

break;

</script>

</body>

</html>

EXP 3. Develop JavaScript to implement Aray functionalities.

<html lang="en">

<head>

<title>Array Operations</title>

</head>
<body>

<h1>Array Operations</h1>

<input type="text" id="elementInput" placeholder="Enter element">

<button onclick="pushElement()">Push</button>

<button onclick="popElement()">Pop</button>

<button onclick="shiftElement()">Shift</button>

<button onclick="reverseArray()">Reverse</button>

<button onclick="sortArray()">Sort</button>

<h2>Array:</h2>

<div id="arrayDisplay">[ ]</div>

<script>

// Initialize an empty array

let myArray = [];

// Function to update the array display

function updateDisplay() {

document.getElementById('arrayDisplay').innerText = `[ ${myArray.join(', ')} ]`;

// Push an element into the array

function pushElement() {

const input = document.getElementById('elementInput').value;

if (input) {

myArray.push(input);

updateDisplay();

document.getElementById('elementInput').value = '';

} else {

alert('Please enter an element!');

// Pop the last element from the array

function popElement() {

if (myArray.length > 0) {

const popped = myArray.pop();

alert(`Popped element: ${popped}`);


updateDisplay();

} else {

alert('Array is empty!');

// Shift (remove) the first element from the array

function shiftElement() {

if (myArray.length > 0) {

const shifted = myArray.shift();

alert(`Shifted element: ${shifted}`);

updateDisplay();

} else {

alert('Array is empty!');

// Reverse the array

function reverseArray() {

myArray.reverse();

updateDisplay();

// Sort the array

function sortArray() {

myArray.sort();

updateDisplay();

</script>

</body>

</html>

EXP 4:- Develop JavaScript to implement functions.

<html>

<head>

<title>Javascript Functions Demo</title>

</head>
<body>

<h1>Javascript Functions Example</h1>

<script>

function greet(name, age) {

// Instead of template literals

document.write("Hello " + name + ", You are " + age + " years old <br>");

greet("Bob", 45);

function addnumbers(a, b) {

return a + b;

let result = addnumbers(12, 8);

document.write("The Sum of 12 and 8 is " + result + "<br>");

const multiply = new Function('a', 'b', 'return a * b;');

// Different values

let product = multiply(7, 6);

document.write("The product of 7 and 6 is " + product + "<br>");

</script>

</body>

</html>

EXP 6;- create webpage using Form Elements.(

<html>

<body>

<form action="">

Use name: <br>

<input type="text" name="userid"><br>

Use password: <br>

<input type="password" name="pwd"><br>

<input type="submit" value="Submit">

<input type="reset">

<br>

<input type="radio" name="gender" value="male" checked>Male<br>


<input type="radio" name="gender" value="female">Female<br>

<input type="radio" name="gender" value="other">Other<br>

<input type="checkbox" name="vehicle1" value="Bike">I have a bike<br>

<input type="checkbox" name="vehicle2" value="Car">I have a car<br>

</form>

</body>

</html>

EXP 7:- reate a webpage to implement Form Events.(


<html>

<head>

<script type="text/javascript">

function sayhello() {

alert ("Hello World");

function myfunction () {

document.getElementById("demo").innerHTML = "Hello World";

function changecolor (elemnt, clr) {

elmnt.style.color = clr;

</script>

</head>

<body>

<form>

<input type="button" onclick="sayHello()" value="sayhello"/>

<p ondbclick = "myFunction ()">

Double-click this paragroph to trigger a function.

</p>

<p id="demo"></p>

<h1 onmouseover="this.style.color = 'red'" onmouseout="this.style.color="black" >

Mouse over this text

</h1>

<p onmousedown="Changecolor (this,'red');" onmouseup="changecolor (this, 'green')" > hi now ru ?

</p>

</form>

</body>

</html>
EXP 8:- reate a webpage to implement Form Events.(
<html>

<head>

<script>

function myfunction() {

alert("You pressed a key inside the input field");

function myfunction1() {

var x = document.getElementById("tname");

x.value = x.value.toUpperCase();

function myfunction2() {

alert("You pressed a key inside the input field");

</script>

</head>

<body>

<input type="text" onkeypress="myfunction()">

Enter your name: <input type="text" id="tname" onkeyup="myfunction1()">

<input type="text" onkeydown="myfunction2()">

</body>

</html>

EXP 9:;= Develop a webpage using Intrinsic Java Functions


<!DOCTYPE html>

<html>

<head>

<title> Combine Form Example </title>

<script type="text/javascript">

function Enable Function () {

document.form.myform. name. disabled = fake.

function Disable function () {

Clocument. form. myform. name. disabled = true;

function Submit form (event) {


event. prevent Default();

alert("Form

Submitted

succesfully");

</script>

</head>

<body>

<form name="myform">

Roll number: <input type="text"

<br /> <br />

name = "roll" />

Name: <input type="text" name="name" />

<br /> <br />

<input type="button" value="submit" onclick="Submit Form (event);

<br><br/>

</body>

</html>

EXP 10 evelop a webpage for creating session and persistent cookies.


<!DOCTYPE html>

<html lang="en">

<head>

</head>

<body>

<div class="container">

<h1>Cookie Manager</h1>

<label for="cookie-name">Cookie Name:</label>

<input type="text" id="cookie-name" placeholder="Enter cookie name" required>

<label for="cookie-value">Cookie Value:</label>

<input type="text" id="cookie-value" placeholder="Enter cookie value" required>

<label for="cookie-expiry">Expiry Time (in days):</label>

<input type="number" id="cookie-expiry" placeholder="Enter expiry days (leave empty for session cookie)">

<button onclick="setCookie()">Set Cookie</button>

<button onclick="getCookies()">Get All Cookies</button>

<button onclick="deleteCookie()">Delete Cookie</button>


<div class="output" id="output"></div>

</div>

<script>

// Function to set a cookie

function setCookie() {

const name = document.getElementById('cookie-name').value;

const value = document.getElementById('cookie-value').value;

const expiryDays = document.getElementById('cookie-expiry').value;

if (!name || !value) {

alert("Please enter both cookie name and value.");

return;

let cookieString = `${name}=${value}; path=/;`;

if (expiryDays) {

const date = new Date();

date.setTime(date.getTime() + expiryDays * 24 * 60 * 60 * 1000);

cookieString += `expires=${date.toUTCString()};`;

document.cookie = cookieString;

alert("Cookie set successfully!");

// Function to get all cookies

function getCookies() {

const cookies = document.cookie;

const output = document.getElementById('output');

output.textContent = cookies ? `Cookies: ${cookies}` : "No cookies found.";

// Function to delete a specific cookie

function deleteCookie() {

const name = document.getElementById('cookie-name').value;

if (!name) {

alert("Please enter the cookie name to delete.");


return;

document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;

alert("Cookie deleted successfully!");

</script>

</body>

</html>

Exp 11:- Develop a webpage for placing the Window on the screen and working with child
window.(p
<!DOCTYPE html>

<html lang="en">

<head>

</head>

<body>

<div class="container">

<h1>Window & Child Window Manager</h1>

<!-- Parent Window Controls -->

<h2>Parent Window Controls</h2>

<button onclick="moveWindow()">Move Main Window</button>

<!-- Child Window Controls -->

<h2>Child Window Controls</h2>

<button onclick="openChild()">Open Child Window</button>

<button onclick="moveChild()">Move Child Window</button>

<button onclick="resizeChild()">Resize Child Window</button>

<button onclick="closeChild()">Close Child Window</button>

<!-- Communication -->

<h2>Send Message to Child</h2>

<input type="text" id="messageToChild" placeholder="Enter message for child window">

<button onclick="sendMessageToChild()">Send Message</button>


<script>

let childWindow = null;

// Move the main window

function moveWindow() {

window.moveTo(200, 200);

alert("Main window moved to (200, 200)");

// Open a new child window

function openChild() {

if (childWindow && !childWindow.closed) {

alert("Child window is already open.");

return;

childWindow = window.open("", "ChildWindow", "width=400,height=400");

childWindow.document.write(`

<html>

<head><title>Child Window</title></head>

<body>

<h1>Child Window</h1>

<p id="parentMessage">No message from parent yet.</p>

<button onclick="sendMessageToParent()">Send Message to Parent</button>

<script>

function sendMessageToParent() {

if (window.opener && !window.opener.closed) {

window.opener.receiveMessageFromChild("Hello from Child Window!");

</script>

</body>

</html>

Exp 12:- Develop a webpage for validation of form fields using regular expressions

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Form Validation</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f9;

color: #333;

margin: 20px;

.container {

max-width: 600px;

margin: auto;

padding: 20px;

background: #fff;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

input {

width: calc(100% - 22px);

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-radius: 4px;

font-size: 16px;

button {

padding: 10px;

background-color: #28a745;

color: white;

border: none;

cursor: pointer;

width: 100%;

font-size: 16px;

border-radius: 4px;

button:hover {

background-color: #218838;

}
.error {

color: red;

font-size: 14px;

.success {

color: green;

font-size: 16px;

</style>

</head>

<body>

<div class="container">

<h1>Form Validation</h1>

<form id="validationForm">

<label for="name">Name (Only alphabets, min 3 characters):</label>

<input type="text" id="name" placeholder="Enter your name" required>

<span id="nameError" class="error"></span>

<label for="email">Email:</label>

<input type="email" id="email" placeholder="Enter your email" required>

<span id="emailError" class="error"></span>

<label for="phone">Phone Number (10 digits):</label>

<input type="tel" id="phone" placeholder="Enter your phone number" required>

<span id="phoneError" class="error"></span>

<label for="password">Password (Min 8 characters, 1 uppercase, 1 number):</label>

<input type="password" id="password" placeholder="Enter your password" required>

<span id="passwordError" class="error"></span>

<button type="button" onclick="validateForm()">Submit</button>

</form>

<div id="formMessage" class="success"></div>

</div>

<script>

// Validation function

function validateForm() {

let isValid = true;


// Name validation

const name = document.getElementById("name").value;

const nameError = document.getElementById("nameError");

const nameRegex = /^[A-Za-z]{3,}$/; // Only alphabets, at least 3 characters

if (!nameRegex.test(name)) {

nameError.textContent = "Invalid name. Only letters, min 3 characters.";

isValid = false;

} else {

nameError.textContent = "";

// Email validation

const email = document.getElementById("email").value;

const emailError = document.getElementById("emailError");

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Standard email regex

if (!emailRegex.test(email)) {

emailError.textContent = "Invalid email format.";

isValid = false;

} else {

emailError.textContent = "";

// Phone validation

const phone = document.getElementById("phone").value;

const phoneError = document.getElementById("phoneError");

const phoneRegex = /^\d{10}$/; // Exactly 10 digits

if (!phoneRegex.test(phone)) {

phoneError.textContent = "Invalid phone number. Must be 10 digits.";

isValid = false;

} else {

phoneError.textContent = "";

// Password validation

const password = document.getElementById("password").value;

const passwordError = document.getElementById("passwordError");

const passwordRegex = /^(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,}$/; // Min 8 chars, 1 uppercase, 1 number

if (!passwordRegex.test(password)) {
passwordError.textContent =

"Invalid password. Min 8 characters, 1 uppercase letter, 1 number.";

isValid = false;

} else {

passwordError.textContent = "";

// Form Message

const formMessage = document.getElementById("formMessage");

if (isValid) {

formMessage.textContent = "Form submitted successfully!";

} else {

formMessage.textContent = "";

</script>

</body>

</html>

Exp 14Develop a webpage for implementing Menus.(

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Menu Example</title>

</head>

<body>

<ul class="menu">

<li><a href="#">Home</a></li>

<li>

<a href="#">About</a>

<ul class="dropdown">

<li><a href="#">Team</a></li>

<li><a href="#">History</a></li>

<li><a href="#">Vision</a></li>

</ul>
</li>

<li>

<a href="#">Services</a>

<ul class="dropdown">

<li><a href="#">Web Development</a></li>

<li><a href="#">SEO</a></li>

<li><a href="#">Marketing</a></li>

</ul>

</li>

<li><a EXP 16ref="#">Contact</a></li>

</ul>

</body>

</html>

Exp16: Develop a webpage for implementing Slideshow, banner


<!DOCTYPE html>

<html lang="en">

<head>

</head>

<body>

<h1 style="text-align: center; padding: 20px 0;">Slideshow & Banner</h1>

<div class="slideshow-container">

<!-- Slides -->

<div class="slide">

<img src="https://via.placeholder.com/1200x400/ff7c7c/333?text=Slide+1" alt="Slide 1">

</div>

<div class="slide">

<img src="https://via.placeholder.com/1200x400/7cafff/333?text=Slide+2" alt="Slide 2">

</div>

<div class="slide">

<img src="https://via.placeholder.com/1200x400/ffd27c/333?text=Slide+3" alt="Slide 3">

</div>

<!-- Navigation Buttons -->

<button class="prev" onclick="changeSlide(-1)">&#10094;</button>

<button class="next" onclick="changeSlide(1)">&#10095;</button>

<!-- Dots -->


<div class="dots">

<span class="dot" onclick="currentSlide(1)"></span>

<span class="dot" onclick="currentSlide(2)"></span>

<span class="dot" onclick="currentSlide(3)"></span>

</div>

</div>

<script>

let currentIndex = 0;

const slides = document.querySelectorAll('.slide');

const dots = document.querySelectorAll('.dot');

// Initialize Slideshow

showSlide(currentIndex);

// Show Slide Function

function showSlide(index) {

if (index >= slides.length) currentIndex = 0;

if (index < 0) currentIndex = slides.length - 1;

// Hide all slides

slides.forEach((slide) => (slide.style.display = 'none'));

// Remove "active" class from dots

dots.forEach((dot) => dot.classList.remove('active'));

// Show the current slide and activate the corresponding dot

slides[currentIndex].style.display = 'block';

dots[currentIndex].classList.add('active');

// Change Slide

function changeSlide(step) {

currentIndex += step;

showSlide(currentIndex);

// Set Current Slide

function currentSlide(index) {

currentIndex = index - 1;
showSlide(currentIndex);

// Auto Slide

setInterval(() => {

changeSlide(1);

}, 5000); // Change slide every 5 seconds

</script>

</body>

</html>

You might also like