Scribd
Upload
29 views

css exps

Uploaded by

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

css exps

Uploaded by

gamer102469
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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