Scribd
Upload
16 views

Css

Uploaded by

Neha Vengurlekar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views

Css

Uploaded by

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

1.

Develop a Simple Javascript with Html to implement array


functionalities.
</html>

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Functions</h2>

<button onclick="addToArray()">Add to Array</button>


<button onclick="removeFromArray()">Remove from Array</button>
<button onclick="displayArray()">Display Array</button>

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

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];

function addToArray() {
var fruit = prompt("Please enter a fruit name", "Grapes");
if (fruit != null) {
fruits.push(fruit);
document.getElementById("demo").innerHTML = fruit + " added to the
array.";
}
}
function removeFromArray() {
fruits.pop();
document.getElementById("demo").innerHTML = "Last fruit removed from
the array.";
}

function displayArray() {
document.getElementById("demo").innerHTML = fruits.toString();
}
</script>

</body>
</html>

2. Develop a Simple Javascript with Html to implement functions and


strings.
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Functions</h2>

<button onclick="displayLength()">Display String Length</button>


<button onclick="convertToUpper()">Convert to Uppercase</button>
<button onclick="convertToLower()">Convert to Lowercase</button>

<p id="demo"></p>
<script>
var str = "Hello, World!";

function displayLength() {
document.getElementById("demo").innerHTML = "Length of string is: " +
str.length;
}

function convertToUpper() {
document.getElementById("demo").innerHTML = "String in uppercase: " +
str.toUpperCase();
}

function convertToLower() {
document.getElementById("demo").innerHTML = "String in lowercase: " +
str.toLowerCase();
}
</script>

</body>
</html>
This HTML file contains JavaScript functions handling a string "Hello,
World!" displayed in a paragraph. Three buttons trigger different string
manipulations: displaying the string length, converting the string to uppercase,
and converting it to lowercase. JavaScript functions tied to these buttons use
`getElementById` to update the HTML, showcasing the length or modified
versions (uppercase/lowercase) of the string in the designated paragraph (`<p>`).
3. Develop a Simple Javascript with Html to Create a webpage using form
elements.
<!DOCTYPE html>
<html>
<head>
<title>Simple Form</title>
</head>
<body>
<form id="myForm">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Submit">
</form>

<script>
document.getElementById('myForm').addEventListener('submit',
function(event) {
event.preventDefault();
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
alert('Name: ' + name + ', Email: ' + email);
});
</script>
</body>
</html>
This HTML file creates a simple form with fields for "Name" and "Email" and
a submit button. JavaScript attached to the form prevents its default
submission behavior upon submission. It retrieves the values entered into the
"Name" and "Email" fields, then displays an alert with the submitted Name
and Email details.

4. Develop a Simple Javascript with Html to Create a webpage to


implement form events (onclick , onmouseover, onload , onfocus ).
<!DOCTYPE html>
<html>
<head>
<title>Form Events</title>
</head>
<body onload="alert('Page is loaded')">
<form id="myForm">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" onfocus="alert('Input is
focused')"><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Submit" onclick="alert('Button is clicked');
return false;" onmouseover="alert('Mouse is over the button')">
</form>

<script>
document.getElementById('myForm').addEventListener('submit',
function(event) {
event.preventDefault();
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
alert('Name: ' + name + ', Email: ' + email);
});
</script>
</body>
</html>
This HTML file creates a simple form with fields for "Name" and "Email" and
a submit button. JavaScript attached to the form prevents its default
submission behavior upon submission. It retrieves the values entered into the
"Name" and "Email" fields, then displays an alert with the submitted Name
and Email details.
This HTML document features a form triggering various events. Upon page
load, an alert indicates the loaded page. The "Name" input field prompts an
alert when focused. The submit button triggers an alert on click and hover.
JavaScript code prevents the form's default submission behavior and displays
an alert containing the entered "Name" and "Email" values upon submission.

5. Develop a Simple Javascript with Html to Develop a webpage for


validation of form field using regular expressions.
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
</head>
<body>
<form id="myForm">
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="phone">Phone:</label><br>
<input type="text" id="phone" name="phone"><br>
<input type="submit" value="Submit">
</form>

<script>
document.getElementById('myForm').addEventListener('submit',
function(event) {
event.preventDefault();
var email = document.getElementById('email').value;
var phone = document.getElementById('phone').value;

var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;


var phoneRegex = /^\d{10}$/;

if (!emailRegex.test(email)) {
alert('Invalid email');
return;
}

if (!phoneRegex.test(phone)) {
alert('Invalid phone number');
return;
}

alert('Form is valid');
});
</script>
</body>
</html>
This HTML file presents a form with "Email" and "Phone" input fields. The
associated JavaScript uses an event listener to intercept form submission,
preventing default behavior. It validates the entered email using a regular
expression and displays an alert for an invalid email format. Similarly, it
verifies the phone number format using a regex and alerts for an invalid phone
number. Upon successful validation, an alert confirms the form's validity,
without submission, to the user.

6. Develop a Simple Javascript with Html to Develop a webpage for


implementing Status bars and Web Page Protection.
Sure, here’s a simple example of a webpage using HTML and JavaScript to implement a
status bar and web page protection:
<!DOCTYPE html>
<html>
<head>
<title>Web Page Protection</title>
<style>
#statusBar {
position: fixed;
bottom: 0;
width: 100%;
background-color: #ddd;
padding: 10px;
text-align: center;
}
</style>
<script>
window.onload = function() {
document.oncontextmenu = function() {
alert('Right click is disabled for protection');
return false;
}
document.onkeydown = function(e) {
if(e.ctrlKey && (e.keyCode === 67 || e.keyCode === 86 || e.keyCode ===
85 || e.keyCode === 117)) {
alert('Sorry, this function is disabled');
return false;
} else {
return true;
}
}
}
</script>
</head>
<body>
<h1>Welcome to My Web Page!</h1>
<p>This is some content...</p>
<div id="statusBar">This is a status bar</div>
</body>
</html>

In this webpage:

A status bar is created at the bottom of the page using a div element with a fixed position.
The oncontextmenu event handler is used to disable the right-click context menu for web page
protection.

The onkeydown event handler is used to disable certain keyboard shortcuts (Ctrl+C, Ctrl+V,
Ctrl+U) for web page protection.

Please note that this is a basic example and doesn’t include any advanced features. You
might want to add those in a real-world scenario. Also, keep in mind that client-side
protection methods like these can easily be bypassed by a determined user, so they should
not be relied upon for serious security measures. For serious security measures, you should
use server-side protection methods.

7. Develop a Simple Javascript with Html to Develop a webpage for


implementing Slideshow, Banner.
Sure, here is a simple example of a webpage with a slideshow. This code uses HTML and
JavaScript.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Slideshow Banner</title>

</head>

<body>

<div id="slideshow">

<a href="https://www.google.com">

<img src="C:\Users\Neha\Pictures\Adobe Scan 10-Feb-2022_1 (1).jpg"/>

</a>

<img src="C:\Users\Neha\Pictures\Adobe Scan 10-Feb-2022_1 (1).jpg"


alt="Image 1" width = 3000, height = 3000>

<img src="C:\Users\Neha\Pictures\IMG_20210712_113858_742.jpg" alt="Image


2"width = 3000, height = 3000>

<img src="C:\Users\Neha\Pictures\IMG_20210702_233228_370.jpg" alt="Image 3"


width = 3000, height = 3000>
<script>

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

const images = slideshow.querySelectorAll('img');

let currentImage = 0;

setInterval(() => {

images[currentImage].style.display = 'none';

currentImage = (currentImage + 1) % images.length;

images[currentImage].style.display = 'block';

}, 3000);

</script>

</body>

</html>

Please replace img1.jpg, img2.jpg, and img3.jpg with the paths to your actual images. This
code will display each image for 2 seconds before moving on to the next one, creating a
slideshow effect. The images are hidden by default (display:none) and only the current
image in the slideshow is displayed (display:block). The carousel function is called every 2
seconds using setTimeout. If the end of the slideshow is reached, it loops back to the first
image.

Remember to run this code in a web server environment to avoid any cross-origin issues. If
you’re running it locally, you can use server setups like Apache, Nginx, or simple python
server, etc. Also, ensure that the path to the images is correct. If the images are in the same
directory as your HTML file, you can just put the image file name (e.g., image.jpg). If
they’re in a subdirectory, include that in the path (e.g., images/image.jpg).

8. Develop a Simple Javascript with Html to Develop webpage for placing


a window on the screen and working with child window.
Sure, here’s a simple example of a webpage that opens a new window (child window) using
JavaScript and HTML. This code will open a new window and write some text in it.
<!DOCTYPE html>
<html>
<body>

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

<script>
function openChildWindow() {
var childWindow = window.open("", "ChildWindow", "width=200,height=100");
childWindow.document.write("<h1>This is a child window</h1>");
}
</script>

</body>
</html>

In this code, clicking the button calls the openChildWindow function. This function opens a
new window with window.open and then writes some text in it with document.write.

Please note that modern web browsers block pop-ups (new windows) by default, so you may
need to disable your browser’s pop-up blocker to see the new window. Also, this code might
not work properly when run locally due to browser security restrictions. It’s recommended to
run this code on a web server. If you’re running it locally, you can use server setups like
Apache, Nginx, or simple python server, etc.

9. Develop a Simple Javascript with Html to Create a webpage with


Rollover Effects
<!DOCTYPE html>
<html>
<head>
<title>Image Rollover</title>
<style>
#image1 {
width: 200px;
height: 200px;
}

#image2 {
display: none;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<img id="image1" src="C:\Users\Neha\Pictures\Screenshots\Screenshot
2023-11-05 134302.png" alt="Image 1" onmouseover="showImage2()"
onmouseout="showImage1()">
<img id="image2" src="C:\Users\Neha\Pictures\Screenshots\Screenshot
2023-11-05 131906.png" alt="Image 2">

<script>
function showImage2() {
document.getElementById('image1').style.display = 'none';
document.getElementById('image2').style.display = 'block';
}

function showImage1() {
document.getElementById('image1').style.display = 'block';
document.getElementById('image2').style.display = 'none';
}
</script>
</body>
</html>

This code creates a webpage with two images. When the user hovers over the first image,
the second image will be displayed. When the user rolls off of the first image, the first image
will be displayed again.

The showImage2() and showImage1() functions are used to show and hide the images.
The showImage2() function is called when the user hovers over the first image, and the
showImage1() function is called when the user rolls off of the first image.

10. Develop a Simple Javascript with Html to Develop a webpage for


implementing Menus.

<!DOCTYPE html>
<html>
<head>
<title>Simple Menu</title>
<style>
.menu {
background-color: #f0f0f0;
overflow: hidden;
}
.menu a {
float: left;
display: block;
color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.menu a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="menu">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
<h1 id="home">Home</h1>
<p>This is the Home section.</p>
<h1 id="about">About</a></h1>
<p>This is the About section.</p>
<h1 id="contact">Contact</h1>
<p>This is the Contact section.</p>
</body>
</html>

You might also like