2 Marks Questions

1. List the attributes of Frame tag and explain any 2.

Ans: Following are the important attributes of frame tag – src, name, frameborder, marginwidth,
marginheight,
noresize, scrolling.
src: This attribute is used to give the file name that should be loaded in the frame. Its value can
be any URL. For example, src = "/html/top_frame.html" will load an HTML file available in
html directory.
name: This attribute allows you to give a name to a frame. It is used to indicate which frame a
document should be loaded into. This is especially important when you want to create links in
one frame that load pages into an another frame, in which case the second frame needs a name to
identify itself as the target of the link.
frameborder: This attribute specifies whether or not the borders of that frame are shown; it
overrides the value given in the frameborder attribute on the tag if one is given, and this can take
values either 1 (yes) or 0 (no).

2. Write the syntax for creating and deleting cookie in JavaScript.

Ans: Creating a cookie:
In JavaScript, we can create, read, update and delete a cookie by using document.cookie
property.
The following syntax is used to create a cookie:
document.cookie="name=value";
You can also add an expiry date (in GMT time).
By default, the cookie is deleted when the browser is closed:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
Deleting a cookie is very simple.
You don't have to specify a cookie value when you delete a cookie.
Just set the expires parameter to a passed date:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
3. List any four properties of Window Object.
Ans:
 Document
 Frames
 Closed
 History
 innerHeight
 innerWidth

4. State the use of the following functions:

i) setTimeout()
Executes a function, after waiting a specified number of milliseconds.
Syntax: setTimeout(function, milliseconds)

ii) clearInterval()
The clearInterval() method stops the executions of the function specified in the
setInterval() method.
Syntax: window.clearInterval(timerVariable)
The window.clearInterval() method can be written without the window prefix.

5. List any four JavaScript frameworks.

Ans:
 ReactJs
 Angular
 Vue.js
 Node.js
 jQuery

6. Define regular expression with its modifiers.

Ans: A regular expression is an object that describes a pattern of characters. The JavaScript
RegExp class represents regular expressions, and both String and RegExp define methods that
use regular expressions to perform powerful pattern-matching and search-and-replace functions
on text. A regular expression is very similar to a mathematical expression, except a regular
expression tells the browser how to manipulate text rather than numbers by using special
symbols as operators.
i : Perform case-insensitive matching.
m : Specifies that if the string has newline or carriage return characters, the ^ and $ operators will
now match against a newline boundary, instead of a string boundary
g : Performs a global match that is, find all matches rather than stopping after the first match.

7. List quantifiers used in RegEx with example

Ans:
 p+ It matches any string containing one or more p's.
 p* It matches any string containing zero or more p's.
 p? It matches any string containing at most one p.
 p{N} It matches any string containing a sequence of N p's
 p{2,3} It matches any string containing a sequence of two or three p's.

8. What is rollover
Ans: Rollover means a webpage changes when the user moves his or her mouse over an object
on the page. It is often used in advertising. There are two ways to create rollover, using plain
HTML or using a mixture of JavaScript and HTML. We will demonstrate the creation of
rollovers using both methods. The keyword that is used to create rollover is the event. For
example, we want to create a rollover text that appears in a text area. The text “What is
rollover?” appears when the user place his or her mouse over the text area and the rollover text
changes to “Rollover means a webpage changes when the user moves his or her mouse over an
object on the page” when the user moves his or her mouse away from the text area.

9. Describe browser location object.

Ans:
 The location object contains information about the current URL.
 The location object is a property of the window object.
 The location object is accessed with: window.location or just location.

10. Write a javascript syntax to accessing elements of another child window.

Ans: From the top level window that contains the iFrame you start by getting a reference to the
iFrame by using plain old getElementById to select the iFrame by Id. Alternately you can also
access the frame via window.frames[0] (or appropriate numeric index). Once the iFrame is
selected you can use the contentDocument property to access the child frame content. From there
you can access document methods as you normally would – in this case by using
getElementById() and then assigning some HTML to the display tag in the child frame.
Example: window.frames[0].showMessage("Hello from Main Page in iFrame");
11. Differentiate between session cookies and persistent cookies
Ans:
 Session Cookies persistent cookies
It resides in memory for the length of the A persistent cookie is a cookie that is assigned
browser session. an expiration date.
Also known as an in-memory cookie. Also known as transient cookie.
Session cookie is automatically deleted when It is written to the computer’s hard disk and
the user exits the browser application. remains there until the expiration date has
been reached; then it’s deleted.

4 Marks Questions

1. Describe the navigator object in JavaScript. Describe the methods of navigator object which
is used to display browser name and version.

Ans:
2. Write a JavaScript function to check whether a given address is a valid IP address or not.
Ans:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IP Address Validator</title>
</head>
<body>
<h2>IP Address Validator</h2>
<input type="text" id="ipInput" placeholder="Enter IP address">
<button onclick="validateIP()">Check</button>
<p id="result"></p>

<script>
function validateIP() {
const ip = document.getElementById("ipInput").value;
const ipv4Pattern = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9]
[0-9]?)$/;

if (ipv4Pattern.test(ip)) {
document.getElementById("result").innerText = "Valid IPv4 address.";
} else {
document.getElementById("result").innerText = "Invalid IPv4 address.";
}
}
</script>
</body>
</html>

3. List Ways of protecting your web page and describe any one of them.
Ans: There is nothing secret about your web page. Anyone with a little computer knowledge can
use a few mouse clicks to display your HTML code, including your JavaScript, on the screen.
Following are the ways to protect web pages: 1) Hiding Your Code by disabling Right Mouse
Click: The following example shows you how to disable the visitor's right mouse button while
the browser displays your web page. All the action occurs in the JavaScript that is defined in the
tag of the web page.
<html>
<head>
<script>
window.onload = function()
{
document.addEventListener("contextmenu", function(e)
{
e.preventDefault();
}, false);}
</script>
<body>
<h3>Right click on screen,Context Menu is disabled</h3>
</body>
</html>
The preventDefault() method cancels the event if it is cancelable, meaning that the default action
that
belongs to the event will not occur.
For example, this can be useful when:
 Clicking on a "Submit" button, prevent it from submitting a form
 Clicking on a link, prevent the link from following the URL
2) Hiding JavaScript
You can hide your JavaScript from a visitor by storing it in an external file on your web server.
The
external file should have the .js file extension. The browser then calls the external file whenever
the
browser encounters a JavaScript element in the web page. If you look at the source code for the
web page,
you'll see reference to the external .js file, but you won't see the source code for the JavaScript.

webpage.html
<html>
<head>
<script src="mycode.js" languages="javascript" type="text/javascript">
</script>
<body>
<h3> Right Click on screen, Context Menu is disabled</h3>
</body>
</html>
mycode.js
window.onload=function()
{
document.addEventListener("contextmenu", function(e)
{
e.preventDefault();
}, false);
}

4. Write a JavaScript that accepts the string and searches for the pattern “MSBTE” in the given
string using regular expression. If the pattern is found JavaScript will display “Pattern is
found” else display “pattern is not found.”
Ans:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pattern Search</title>
</head>
<body>
<h2>Pattern Search for "MSBTE"</h2>
<input type="text" id="inputText" placeholder="Enter text">
<button onclick="searchPattern()">Check Pattern</button>
<p id="result"></p>

<script>
function searchPattern() {
const text = document.getElementById("inputText").value;
const pattern = /MSBTE/; // Regular expression to search for "MSBTE"

if (pattern.test(text)) {
document.getElementById("result").innerText = "Pattern is found";
} else {
document.getElementById("result").innerText = "Pattern is not found";
}
}
</script>
</body>
</html>
5. Write a JavaScript program that will create a pull-down menu with three options. Once the
user will select the one of the options then the user will redirected to that website.
Ans:
Ans:
<html>
<head>
<title>HTML Form</title>
<script language="javascript" type="text/javascript">
function getPage(choice)
{
page=choice.options[choice.selectedIndex].value;
if(page != "")
{
window.location=page;
}
}
</script>
</head>
<body>
<form name="myform" action="" method="post">
Select Your Favourite Website:
<select name="MenuChoice" onchange="getPage(this)">
<option value="select any option">Select</option>
<option value="https://www.codecademy.com/catalog/language/javascript/">
CodeAcademy </option>
<option value="https://www.msbte.org.in">MSBTE</option>
<option value="https://www.javatpoint.com/javascript-tutorial">JavaTpoint</option>
</form>
</body>
</html>

6. With the help of example describe how to replace text using a regular expression.
Ans:
 you can also use a regular expression to replace portions of the text by using the
 replace() method.
 The replace() method requires two parameters: a regular expression and the
 replacement text.
 Here's how the replace() method works. First, you create a regular expression that
 identifies the portion of the text that you want replaced.
 Then you determine the replacement text. Pass both of these to the replace()
 method, and the browser follows the direction given in the regular expression to
 locate the text. If the text is found, the browser replaces it with the new text that
 you provided.
The replace() method searches a string for a specified value, or a regular exp
Syntax:
string.replace(searchvalue, newvalue)
Example:
<html>
<script>
function check()
{
var exp=/:/g;
var str=document.getElementById("txt").value;
var res=str.replace(exp,"-");
document.getElementById("demo1").innerHTML=res;
}
</script>
<body>
Enter text:<textarea id="txt"></textarea>
<input type="button" onclick="check()" value="check">
<p id="demo1"></p>
</body> </html>
7. List and state various properties of a window object. Write a JavaScript that opens a new
popup window with message “WELCOME To SCRIPTING” when the page loads and a new
popup window displaying message “FUN WITH SCRIPTING” when the page unloads
Ans:

Property Description
Document It returns the document object for the window (DOM).
Frames It returns an array of all the frames including iframes in the
current window.
Closed It returns the Boolean value indicating whether a window has
been closed or not.
History It returns the history object for the window.
innerHeig It sets or returns the inner height of a window's content area.
ht
innerWidt It sets or returns the inner width of a window's content area.
h
Length It returns the number of frames in a window.
Location It returns the location object for the window.
Name It sets or returns the name of a window.
Navigator It returns the navigator object for the window.
Opener It returns a reference to the window that created the window.
outerHeig It sets or returns the outer height of a window, including
ht toolbars/scrollbars.
outerWidt It sets or returns the outer width of a window, including
h toolbars/scrollbars.
Parent It returns the parent window of the current window.
Screen It returns the screen object for the window.
screenX It returns the X coordinate of the window relative to the screen.
screenY It returns the Y coordinate of the window relative to the screen.
Self It returns the current window.
Status It sets the text in the status bar of a window.
Top It returns the topmost browser window that contains frames.

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup Example</title>
<script>
// Function to display popup on page load
function welcomePopup() {
window.open("", "", "width=300,height=200").document.write("<h3>WELCOME To
SCRIPTING</h3>");
}

// Function to display popup on page unload

function farewellPopup() {
alert("FUN WITH SCRIPTING");
}

// Call welcomePopup when the page loads

window.onload = welcomePopup;

// Call farewellPopup when the page is about to unload

window.onbeforeunload = farewellPopup;
</script>
</head>
<body>
<h2>Welcome to the Popup Example Page</h2>
<p>This page will show popups when you load and leave the page.</p>
</body>
</html>
8. Write an HTML script that displays names of different brands of Laptop and an image by
default as :

Ans:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laptop Brand Display</title>
</head>
<body>
<h2>Laptop Brands</h2>

<!-- Brand names with mouseover events -->

<div id="brands">
<p onmouseover="showImage('images/lenovo.jpg')">Lenovo</p>
<p onmouseover="showImage('images/hp.jpg')">HP</p>
<p onmouseover="showImage('images/dell.jpg')">Dell</p>
</div>

<!-- Image display area -->

<img id="laptopImg" src="images/default.jpg" alt="Laptop Image">
<script>
function showImage(imgPath) {
// Change the src attribute of the image element to show the new image
document.getElementById('laptopImg').src = imgPath;
}
</script>
</body>
</html>

9. When the mouse moves over the specific brand name the script must display the image of
respective Laptop in the adjacent box.
Ans:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laptop Brand Display</title>
</head>
<body>
<h2>Laptop Brands</h2>

<!-- Brand names with mouseover events -->

<div id="brands" style="display: inline-block; vertical-align: top;">
<p onmouseover="showImage('images/lenovo.jpg')">Lenovo</p>
<p onmouseover="showImage('images/hp.jpg')">HP</p>
<p onmouseover="showImage('images/dell.jpg')">Dell</p>
</div>
<!-- Adjacent image display box -->
<div id="imageBox" style="display: inline-block; margin-left: 20px;">
<img id="laptopImg" src="images/default.jpg" alt="Laptop Image" width="300" height="200">
</div>

<script>
function showImage(imgPath) {
// Change the src attribute of the image element to show the new image
document.getElementById('laptopImg').src = imgPath;
}
</script>
</body>
</html>

10. Form regular expressions for following :

(i) Validation of email address.
(ii) Validation of adhaar card. Format is dddd – dddd – dddd
(iii) Validation of phone number. Format is (ddd) – (dddddddd)
Ans:
(i) Validation of Email Address
A regular expression to validate an email address, where it ensures there’s a username, an @
symbol, a domain, and a valid top-level domain (like .com, .org, etc.).
const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
 Explanation:
o ^[\w-\.]+: Matches the beginning with alphanumeric characters, dots, or hyphens.
o @: Requires an @ symbol.
o ([\w-]+\.)+: Requires one or more domain segments separated by dots.
o [\w-]{2,4}$: Ensures a top-level domain of 2 to 4 characters.
(ii) Validation of Aadhaar Card (Format: dddd – dddd – dddd)
This format expects exactly 12 digits separated by hyphens in a dddd-dddd-dddd structure.
const aadhaarRegex = /^\d{4}-\d{4}-\d{4}$/;
 Explanation:
o ^\d{4}: Matches exactly 4 digits at the start.
o -: Requires a hyphen.
o \d{4}-\d{4}$: Requires two more sets of 4 digits separated by hyphens.
o Ensures that only the format dddd-dddd-dddd is valid.
(iii) Validation of Phone Number (Format: (ddd)–(dddddddd))
The format expects a three-digit area code in parentheses, followed by a hyphen and an eight-
digit phone number.
const phoneRegex = /^\(\d{3}\)-\d{8}$/;
 Explanation:
o ^\(\d{3}\): Matches three digits enclosed in parentheses at the start.
o -: Requires a hyphen after the area code.
o \d{8}$: Ensures exactly eight digits at the end.

11. Design frameset tag for representing following layout :

Ans:
<!DOCTYPE html>
<html>
<head>
<title>Frameset Layout</title>
</head>
<frameset rows="30%, 70%">
<!-- Frame 1 on the top row -->
<frame src="frame1.html" name="frame1" title="Frame 1">

<!-- Bottom row divided into three frames: Frame 2, Frame 4, Frame 3 -->
<frameset cols="33%, 34%, 33%">
<frame src="frame2.html" name="frame2" title="Frame 2">
<frame src="frame4.html" name="frame4" title="Frame 4">
<frame src="frame3.html" name="frame3" title="Frame 3">
</frameset>
</frameset>

<noframes>
<body>
<p>Your browser does not support frames.</p>
</body>
</noframes>
</html>

12. Develop a JavaScript program to create Rotating Banner Ads.

Ans.
<html >
<head>
<title>Banner Ads</title>
<script>
Banners = new Array('1.jpg','2.jpg','3.jpg');
CurrentBanner = 0;
function DisplayBanners()
{
if (document.images);
{
CurrentBanner++;
if (CurrentBanner == Banners.length)
{
CurrentBanner = 0;
}
document.RotateBanner.src= Banners[CurrentBanner];
setTimeout("DisplayBanners()",1000);
}
}
</script>
</head>
<body onload="DisplayBanners()" >
<center>
<img src="1.jpg" width="400"
height="75" name="RotateBanner" />
</center>
</body>
</html>

13. Write HTML script that will display dropdown list containing options such as Red, Green, Blue &
Yellow. Write a JavaScript program such that when the user selects any options. It will change the
background colour of webpage.

Ans:
<html>
<body>
<label for="color">Choose a Background Color:</label>
<select name="color" id="color" class="color" onchange="changeColor()">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
<script type="text/javascript">
function changeColor() {
var color = document.getElementById("color").value;
switch(color){
case "green":
document.body.style.backgroundColor = "green";
break;
case "red":
document.body.style.backgroundColor = "red";
break;
case "blue":
document.body.style.backgroundColor = "blue";
break;
case "yellow":
document.body.style.backgroundColor = "yellow";
break;
default:
document.body.style.backgroundColor = "white";
break;
}
}
</script>
</body>
</html>

14. Write a javascript to open a new window and the new window is having two frames. One frame
containing buthon as “click here !”, and after clicking this button an image should open in the second
frame of that child window.

Ans:

f.html

<html>

<head>

<title>Create a Frame</title>

</head>

<frameset rows="60%,40%">

<frame src="b.html" name="a" />

<frame src="im.html" name="b" />

</frameset>

</frameset>

</html>

b. html

<html>

<head>

<title>Web Page 1</title>

</head>

<body>

<form action="" method="post">

<p><a href="j.png" target="b">

<input name="WebPage1" value="Click here!" type="button">

</a></p>

</body>

</html>

im.html

<html>

<head>

<title>Web Page 1</title>

</head>

<body>

<img src="i.png">

</body>

</html>