Scribd
Upload
11 views

CSS 4m ^0 6m answers(only code)

4marks and 6 marks answers

Uploaded by

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

CSS 4m ^0 6m answers(only code)

4marks and 6 marks answers

Uploaded by

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

Below is the proper code with all necessary HTML tags for the 4m and 6m

questions:

1. Explain prompt(), confirm(), alert()


1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Prompt, Confirm, Alert</title>
</head>
<body>
<script>
let name = prompt("Enter your name:"); // Ask user for input
let isSure = confirm("Are you sure you want to continue?"); //
Confirm user decision
if (isSure) {
alert("Hello, " + name + "! Welcome!"); // Display the greeting
} else {
alert("Action cancelled!");
}
</script>
</body>
</html>

2. Explain Date Object in JavaScript


2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Date Object</title>
</head>
<body>
<script>
let now = new Date();
document.write("<p>Current Year: " + now.getFullYear() + "</p>");
document.write("<p>Current Month: " + (now.getMonth() + 1) +
"</p>");
document.write("<p>Current Date: " + now.getDate() + "</p>");
document.write("<p>Current Time: " + now.toLocaleTimeString() +
"</p>");
</script>
</body>
</html>

3.

Remove Duplicate Elements from Array


3)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Remove Duplicates</title>
</head>
<body>
<script>
let arr = [1, 2, 2, 3, 4, 4, 5];
let uniqueArr = [...new Set(arr)];
document.write("Original Array: " + arr + "<br>");
document.write("Array Without Duplicates: " + uniqueArr);
</script>
</body>
</html>

4. Convert String to Number and Vice Versa


4)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>String and Number Conversion</title>
</head>
<body>
<script>
let str = "123";
let num = 123;
document.write("<p>String to Number: " + Number(str) + "</p>");
document.write("<p>Number to String: " + num.toString() + "</p>");
</script>
</body>
</html>

5. Explain charCodeAt() and fromCharCode()


5)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>charCodeAt() and fromCharCode()</title>
</head>
<body>
<script>
let char = "A";
document.write("<p>ASCII Code of 'A': " + char.charCodeAt(0) +
"</p>");
document.write("<p>Character for ASCII Code 65: " +
String.fromCharCode(65) + "</p>");
</script>
</body>
</html>

6. Difference Between concat() and join()


6)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>concat() vs join()</title>
</head>
<body>
<script>
let arr1 = [1, 2];
let arr2 = [3, 4];
document.write("<p>Using concat(): " + arr1.concat(arr2) + "</p>");
document.write("<p>Using join(): " + arr1.join("-") + "</p>");
</script>
</body>
</html>

7. Difference Between push()/pop() and shift()/unshift()


7)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>push/pop vs shift/unshift</title>
</head>
<body>
<script>
let arr = [1, 2, 3];
arr.push(4); // Add to end
document.write("<p>After push(4): " + arr + "</p>");
arr.pop(); // Remove from end
document.write("<p>After pop(): " + arr + "</p>");
arr.shift(); // Remove from start
document.write("<p>After shift(): " + arr + "</p>");
arr.unshift(0); // Add to start
document.write("<p>After unshift(0): " + arr + "</p>");
</script>
</body>
</html>

8. Open New Window on Button Click


8)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Open New Window</title>
</head>
<body>
<button onclick="openNewWindow()">Click to Open New Window</button>

<script>
function openNewWindow() {
window.open("https://example.com", "_blank");
}
</script>
</body>
</html>

9. Describe Text Rollover


9)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Text Rollover</title>
</head>
<body>
<img src="image1.jpg"
onmouseover="this.src='image2.jpg'"
onmouseout="this.src='image1.jpg'"
alt="Rollover Image">
</body>
</html>

10. Pull-Down Menu Redirect


10)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Pull-Down Menu</title>
</head>
<body>
<select onchange="redirectToWebsite(this.value)">
<option value="#">Select a Website</option>
<option value="https://example.com">Example</option>
<option value="https://google.com">Google</option>
</select>

<script>
function redirectToWebsite(url) {
if (url !== "#") window.location.href = url;
}
</script>
</body>
</html>
Here are the remaining answers in the HTML + JavaScript format:11.
11)Describe Regular Expression Quantifiers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Regular Expression Quantifiers</title>
</head>
<body>
<script>
let text = "hello world";
let regex1 = /l{2}/; // Matches exactly 2 'l's
let regex2 = /o+/; // Matches one or more 'o's
let regex3 = /l*/; // Matches zero or more 'l's
document.write("<p>Regex1 (/l{2}/): " + regex1.test(text) +
"</p>");
document.write("<p>Regex2 (/o+/): " + regex2.test(text) + "</p>");
document.write("<p>Regex3 (/l*/): " + regex3.test(text) + "</p>");
</script>
</body>
</html>

12) Describe Frameworks of JavaScript


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>JavaScript Frameworks</title>
</head>
<body>
<p>Popular JavaScript Frameworks:</p>
<ul>
<li><strong>React.js</strong>: For building user interfaces,
maintained by Facebook.</li>
<li><strong>Angular</strong>: A complete framework for building
single-page applications, by Google.</li>
<li><strong>Vue.js</strong>: Lightweight and flexible for UI
development.</li>
<li><strong>Node.js</strong>: For server-side scripting and backend
development.</li>
</ul>
</body>
</html>

13. Rotating Banner Ads


13)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Rotating Banner Ads</title>
</head>
<body>
<img id="banner" src="image1.jpg" alt="Banner Ad" width="400">

<script>
let images = ["image1.jpg", "image2.jpg", "image3.jpg"];
let index = 0;

function rotateBanner() {
index = (index + 1) % images.length;
document.getElementById("banner").src = images[index];
}

setInterval(rotateBanner, 3000); // Rotate every 3 seconds


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

14. Getter and Setter Properties


14)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Getter and Setter</title>
</head>
<body>
<script>
let person = {
firstName: "John",
lastName: "Doe",
get fullName() {
return this.firstName + " " + this.lastName;
},
set fullName(name) {
[this.firstName, this.lastName] = name.split(" ");
}
};

person.fullName = "Jane Smith";


document.write("<p>Full Name: " + person.fullName + "</p>");
</script>
</body>
</html>

15. Display Array in Sorted Order


15)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Sort Array</title>
</head>
<body>
<script>
let arr = [5, 1, 3, 2, 4];
let sortedArr = arr.sort((a, b) => a - b); // Sort in ascending
order
document.write("<p>Sorted Array: " + sortedArr + "</p>");
</script>
</body>
</html>

16. Explain open() Method


16)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>open() Method</title>
</head>
<body>
<button onclick="openNewWindow()">Open New Window</button>

<script>
function openNewWindow() {
window.open("https://www.example.com", "ExampleWindow",
"width=800,height=600");
}
</script>
</body>
</html>

17. Regular Expressions: search() and test()


17)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Regular Expressions</title>
</head>
<body>
<script>
let text = "hello world";
let regex = /world/;
document.write("<p>Using search(): " + text.search(regex) +
"</p>"); // Position of 'world'
document.write("<p>Using test(): " + regex.test(text) +
"</p>"); // Returns true or false
</script>
</body>
</html>

18. Ways to Protect Web Pages


18)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Web Page Protection</title>
</head>
<body>
<p>Ways to protect your web page:</p>
<ul>
<li><strong>Disable right-click:</strong> Prevent users from
copying content.</li>
<li><strong>Use HTTPS:</strong> Secure communication with
encryption.</li>
<li><strong>Obfuscate code:</strong> Make source code harder to
read.</li>
<li><strong>Restrict access:</strong> Use authentication to protect
sensitive pages.</li>
</ul>
</body>
</html>

19. Slideshow with Previous/Next Transition


19)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Slideshow</title>
</head>
<body>
<img id="slideshow" src="image1.jpg" alt="Slideshow" width="400">
<br>
<button onclick="prevSlide()">Previous</button>
<button onclick="nextSlide()">Next</button>

<script>
let images = ["image1.jpg", "image2.jpg", "image3.jpg"];
let index = 0;

function showSlide() {
document.getElementById("slideshow").src = images[index];
}
function nextSlide() {
index = (index + 1) % images.length;
showSlide();
}

function prevSlide() {
index = (index - 1 + images.length) % images.length;
showSlide();
}
</script>
</body>
</html>

20. Read and Write Cookies


20)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Cookies</title>
</head>
<body>
<button onclick="writeCookie()">Write Cookie</button>
<button onclick="readCookie()">Read Cookie</button>

<script>
function writeCookie() {
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024
23:59:59 GMT";
alert("Cookie written!");
}

function readCookie() {
alert("Cookies: " + document.cookie);
}
</script>
</body>
</html>

Let me know if you’d like additional examples or explanations!


Let me know if you’d like additional solutions or further explanations!
Here are the remaining questions answered in the required HTML + JavaScript
format:

21. Evaluate Checkbox or Radio Button Selection


21)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Checkbox & Radio Button</title>
</head>
<body>
<h3>Choose your options:</h3>
<input type="checkbox" id="option1" value="Option 1"> Option 1<br>
<input type="checkbox" id="option2" value="Option 2"> Option 2<br>
<button onclick="evaluateCheckbox()">Submit</button>

<h3>Select your gender:</h3>


<input type="radio" name="gender" id="male" value="Male"> Male<br>
<input type="radio" name="gender" id="female" value="Female">
Female<br>
<button onclick="evaluateRadio()">Submit</button>

<script>
function evaluateCheckbox() {
let selected = [];
if (document.getElementById("option1").checked)
selected.push("Option 1");
if (document.getElementById("option2").checked)
selected.push("Option 2");
alert("Selected options: " + selected.join(", "));
}

function evaluateRadio() {
let gender =
document.querySelector('input[name="gender"]:checked');
alert("Selected gender: " + (gender ? gender.value : "None"));
}
</script>
</body>
</html>

22. Explain Form Events


22)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Form Events</title>
</head>
<body>
<form onsubmit="formSubmitted(event)">
<label for="name">Name:</label>
<input type="text" id="name" onfocus="focusEvent()"
onblur="blurEvent()" required>
<button type="submit">Submit</button>
</form>

<script>
function focusEvent() {
alert("Input field is focused");
}

function blurEvent() {
alert("Input field is unfocused");
}

function formSubmitted(event) {
event.preventDefault(); // Prevent page reload
alert("Form submitted successfully!");
}
</script>
</body>
</html>

23. Browser Location and History


23)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Browser Location & History</title>
</head>
<body>
<h3>Browser Location</h3>
<p>Current URL: <span id="location"></span></p>
<button onclick="redirect()">Go to Google</button>

<h3>Browser History</h3>
<button onclick="goBack()">Go Back</button>
<button onclick="goForward()">Go Forward</button>

<script>
document.getElementById("location").innerText =
window.location.href;

function redirect() {
window.location.href = "https://www.google.com";
}

function goBack() {
window.history.back();
}

function goForward() {
window.history.forward();
}
</script>
</body>
</html>

24. Frame Example


24)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Frame Example</title>
</head>
<body>
<h3>Example of Frames</h3>
<iframe src="https://www.wikipedia.org" width="500"
height="300"></iframe>
</body>
</html>

25. Use of Banners for Advertisements


25)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Advertisement Banner</title>
</head>
<body>
<h3>Advertisement Banner</h3>
<img src="ad_banner.jpg" alt="Ad Banner" width="600"
onclick="redirectToAd()">

<script>
function redirectToAd() {
window.open("https://www.example-ad.com", "_blank");
}
</script>
</body>
</html>

26. Status Bar in JavaScript


26)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Status Bar</title>
</head>
<body>
<button onclick="changeStatusBar()">Show Status</button>
<script>
function changeStatusBar() {
window.status = "Welcome to the JavaScript page!";
alert("Check the status bar (only visible in some browsers).");
}
</script>
</body>
</html>

27. Form Controls


27)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Form Controls</title>
</head>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name"><br><br>

<label for="comments">Comments:</label>
<textarea id="comments" rows="4" cols="50"></textarea><br><br>

<label for="gender">Gender:</label>
<select id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select><br><br>

<label>
<input type="checkbox"> Agree to Terms
</label><br><br>

<button type="submit">Submit</button>
</form>
</body>
</html>

28. Types of Cookies


28)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Cookies</title>
</head>
<body>
<h3>Types of Cookies:</h3>
<ul>
<li><strong>Session Cookies:</strong> Temporary cookies stored only
during a session.</li>
<li><strong>Persistent Cookies:</strong> Stored on the user's
device for a fixed period.</li>
<li><strong>Secure Cookies:</strong> Transmitted over HTTPS
only.</li>
<li><strong>Third-Party Cookies:</strong> Set by domains other than
the one visited.</li>
</ul>
</body>
</html>

29. Properties of window Object


29)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Window Object Properties</title>
</head>
<body>
<p>Some Properties of the `window` Object:</p>
<ul>
<li><strong>innerWidth:</strong> <span id="width"></span></li>
<li><strong>innerHeight:</strong> <span id="height"></span></li>
<li><strong>location:</strong> <span id="location"></span></li>
<li><strong>navigator:</strong> <span id="navigator"></span></li>
</ul>

<script>
document.getElementById("width").innerText = window.innerWidth;
document.getElementById("height").innerText = window.innerHeight;
document.getElementById("location").innerText =
window.location.href;
document.getElementById("navigator").innerText =
navigator.userAgent;
</script>
</body>
</html>

30. setTimeout() and setInterval()


30)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>setTimeout and setInterval</title>
</head>
<body>
<button onclick="delayedMessage()">Show Delayed Message</button>
<button onclick="startCounter()">Start Counter</button>
<p id="counter">0</p>
<script>
function delayedMessage() {
setTimeout(() => alert("This is a delayed message!"), 3000); // 3
seconds delay
}

let count = 0;
function startCounter() {
setInterval(() => {
count++;
document.getElementById("counter").innerText = count;
}, 1000); // 1-second interval
}
</script>
</body>
</html>

Let me know if you’d like additional explanations!


Here are the answers to the remaining questions formatted as per your
requirement:

31. Floating Menu


31)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Floating Menu</title>
<style>
#floatingMenu {
position: fixed;
top: 10px;
right: 10px;
background-color: lightblue;
padding: 10px;
border: 1px solid black;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="floatingMenu">
<a href="#section1">Section 1</a><br>
<a href="#section2">Section 2</a><br>
<a href="#section3">Section 3</a>
</div>

<h2 id="section1">Section 1</h2>


<p>Content of section 1.</p>

<h2 id="section2">Section 2</h2>


<p>Content of section 2.</p>

<h2 id="section3">Section 3</h2>


<p>Content of section 3.</p>
</body>
</html>

32. Regular Expressions for Validation


32)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Regular Expressions</title>
</head>
<body>
<h3>Validation Examples</h3>

<!-- Email Validation -->


<p>Validate Email:</p>
<input type="text" id="email" placeholder="Enter email">
<button onclick="validateEmail()">Validate</button>
<p id="emailResult"></p>

<!-- Aadhaar Validation -->


<p>Validate Aadhaar:</p>
<input type="text" id="aadhaar" placeholder="Enter Aadhaar (dddd-
dddd-dddd)">
<button onclick="validateAadhaar()">Validate</button>
<p id="aadhaarResult"></p>

<!-- Phone Number Validation -->


<p>Validate Phone Number:</p>
<input type="text" id="phone" placeholder="Enter Phone (ddd)-
(dddddddd)">
<button onclick="validatePhone()">Validate</button>
<p id="phoneResult"></p>

<script>
function validateEmail() {
const email = document.getElementById("email").value;
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
document.getElementById("emailResult").innerText =
regex.test(email) ? "Valid Email" : "Invalid Email";
}

function validateAadhaar() {
const aadhaar = document.getElementById("aadhaar").value;
const regex = /^\d{4}-\d{4}-\d{4}$/;
document.getElementById("aadhaarResult").innerText =
regex.test(aadhaar) ? "Valid Aadhaar" : "Invalid Aadhaar";
}

function validatePhone() {
const phone = document.getElementById("phone").value;
const regex = /^\(\d{3}\)-\d{8}$/;
document.getElementById("phoneResult").innerText =
regex.test(phone) ? "Valid Phone Number" : "Invalid Phone Number";
}
</script>
</body>
</html>

If there are any other questions you’d like me to format or code out, let me know!

You might also like