da55dq
da55dq
Total 4 18 20
3.(d) 4 3.(d) 4
4.(d) 4
4.(a) 4 4.(c) 4
Regular Expression, Rollover and 5.(c) 6
5 4.(d) 4 4.(d) 4
Frames 6.(b) 6
5.(c) 6 6.(b) 6
Total 16 18 18
4.(b) 4 4.(b) 4 1.(f) 2
4.(c) 4 4.(e) 4 3.(b) 4
Menus,navigation and web page 4.(e) 4 6.(b) 6 4.(e) 4
6
protection 6.(c) 6 6.(c) 6 5.(c) 6
Total 18 20 16
4
4
2.(d) Write and explain a string functions for converting string to number and
number to string.
3.(a) Differentiate between concat( ) & join( ) methods of array object.
3.(b) Write a JavaScript function to check the first character of a string is uppercase
or not.
3.(c) Write a JavaScript function to merge two array & removes all duplicate
values.
Summer Unit 2 2.(b) Differentiate between concat() and join() methods of array object. 4
-2022 Array, 4.(b) Write a javascript function that accepts a string as a parameter and find the 4
Function and length of the string.
String 5.(b) Develop javascript to convert the given character to unicode and vice-versa. 6
6.(c) Write a javascript function to generate Fibonacci series till user defined limit.
Summer Unit 3 1.(f) Enlist any four mouse events with their use. 2
-2023 Form and 5.(a) Write HTML code to design a form that display two textboxes for accepting two numbers,one 6
Event textbox for accepting result and two buttons as ADDITION and SUBTRACTION.Write proper
Handling JavaScript such that when the user clicks on any one of the button,respective operation will be
performed on two numbers and result will be displayed in result textbox.
5.(b) Write HTML code to design a form that dsiplayes two buttons START and STOP.Write a 6
JavaScript code such that when user clicks on START button, real time digital clock will be
displayed on screen. When user clicks on STOP button,clock will stop displaying time(Use Timer
Methods) 6
6.(a) Explain how to evaluate Radiobutton in JavaScript with suitable example.
Winter- Unit 3 1.(f) Enlist & explain the use of any two Intrinsic JavaScript functions. 2
2022 Form and 6
6.(a) Write HTML script that will display dropdown list containing options such as
Red, Green, Blue & Yellow. Write a JavaScript program such that when the 6
user selects any options. It will change the background colour of webpage.
Summer Unit 3 1.(d) Explain following form events : 2
-2022 Form and (i) onmouseup
Event (ii) onblur
Handling 1.(e) Write a javascript program to changing the contents of a window. 2
2.(c) Write a javascript program to demonstrate java intrinsic function. 4
3.(c) Write a javascript program to calculate add, sub, multiplication and division
of two number (input from user). Form should contain two text boxes to input 4
numbers of four buttons for addition, subtraction, multiplication and division.
Summer Unit 4 Q3 d. Explain how to create and read Persistent Cookies in JavaScript with example. 4
-2023
Write the JavaScript code for below operations : (1) Name, Email & Pin Code should not be blank. (2) Pin
Code must contain 6 digits & it should not be accept any characters.
Q5 b. Write a webpage that displays a form that contains an input for username & password. User is
prompted to entre the input & password & password becomes the value of the cookie. Write a JavaScript
function for storing the cookie. It gets executed when the password changes.
Summer Unit 4 Q1 b. Differentiate between session cookies and persistent cookies. 2
-2022 Q1 e. Write a JavaScript program to changing the contents of a window. 2
Q1 g. Write a JavaScript syntax to accessing elements of another child window. 2
Q2 d. Design a webpage that displays a form that contains an input for user name and password. User is 4
prompted to enter the input user name and password and password become value of the cookies. Write the 4
JavaScript function for storing the cookies. 6
Q3 a. Write a JavaScript program to create read, update and delete cookies.
Q6 a. Write a JavaScript to open a new window and the new window is having two frames. One frame
containing button as “click here !”, and after clicking this button an image should open in the second frame of
that child window.
Summer Unit 5 Q4 d. Explain text and image rollover with suitable example. 2
-2023 Q5 c. Write HTML code to design a form that displays textboxes for accepting UserID and Aadhar No. and a 6
SUBMIT button. UserlD should contain 10 alphanumeric characters and must start with Capital Letter. Aadhar 6
No. should contain 12 digits in the format nnnn nnnn nnnn. Write JavaScript code to validate the UserID and
Aadhar No. when the user clicks on SUBMIT button.
Q6 b. Write a script for creating following frame structure : Frame 1 contains three buttons SPORT, MUSIC
and DANCE that will perform following action : When user clicks SPORT button, sport.html webpage will
appear in Frame 2. When user clicks MUSIC button, music.html webpage will appear in Frame 3. When user
clicks DANCE button, dance.html webpage will appear in Frame 4.
Winter- Unit 5 Q3 d. Write a JavaScript function that will open new window when the user will clicks on the button. 4
2022 Q4 a. Describe text Rollover with the help of example. 4
Q4 c. Describe Quantifiers with the help of example. 4
Q4 d. Describe frameworks of JavaScript & its application. 4
Q5 c. Write a JavaScript for creating following frame structure : 6
Chapter 1 & Chapter 2 are linked to the webpage Ch1 HTML & Ch2.html respectively. When user click on
these links corresponding data appears in FRAME3.
Summer Unit 5 Q3 d. State what is regular expression. Explain its meaning with the help of a suitable example. 4
-2022 Q4 c. Write a JavaScript program to validate email ID of the user using regular expression. 4
Q4 d. Write a JavaScript program to design HTML page with books information in tabular format, use 4
rollovers to display the discount information. 6
Q6 b. Write a JavaScript to create option list containing list of images and then display images in new window
as per selection.
Summer Unit 6 Q4 b. List Ways of protecting your web page and describe any one of them. 4
-2023 Q4 c. Explain how to create and display Rotating Banner in JavaScript with example. 4
Q4 e. What is Status bar and how to display moving message on the status line of a window using 4
JavaScript. 6
Q6 c. Write a JavaScript to create a pull - down menu with four options [AICTE, DTE, MSBTE, GO0GLE].
Once the user will select one of the options then user will be redirected to that site.
Winter- Unit 6 Q4 b. Write a JavaScript program that will create pull-down menu with three options. Once the user will select 4
2022 the one of the options then user will redirected to that website. 4
<script>
for(var i=1; i<=15; i++)
{
if(i%2)
{
document.write(i+”is even”);
}
else
{
document.write(i+”is odd”);
}
}
</script>
Ans: Correct
<script> logic
// program to check if the string is palindrome or not
progra
function checkPalindrome(string)
{ m6
// convert string to an array marks
const arrayValues = string.split('');
// reverse the array values
const reverseArrayValues = arrayValues.reverse();
// convert array to string
const reverseString = reverseArrayValues.join('');
if(string == reverseString) {
document.write('It is a palindrome');
}
else {
document.write('It is not a palindrome');
}
}
//take input
const string = prompt('Enter a string: ');
checkPalindrome(string);
</script>
</script>
</body>
</html>
Example:
<script>
function maxTwo(x,y)
{
if(x,y)
return x;
else
return y;
}
</script>
fromCharCode():
• If you need to know the character, number, or symbol that is assigned to a Unicode number, use the
fromCharCode() method. The fromCharCode() method requires one argument, which is the Unicode
number.
Example:
<html>
<body>
<script>
document.write("<br>"+res1);
</script>
</body>
</html>
Output:
<html>
<body>
<script>
var fruits = ["Banana", "Watermelon", "Chikoo", "Mango", "Orange", "Apple"]; document.write(fruits+"<br>");
fruits.splice(2,2, "Lemon", "Kiwi");
document.write(fruits+"<br>");
fruits.splice(0,2); //removes first 2 elements from array document.write(fruits+"<br>");
</script>
</body>
</html>
Output:
Banana,Watermelon,Chikoo,Mango,Orange,Apple Banana,Watermelon,Lemon,Kiwi,Orange,Apple
Lemon,Kiwi,Orange,Apple
Ans:
<html>
<body>
<script>
var students = [["Amit", 70],["Sumit", 78],["Abhishek", 71],];
var Avgmarks = 0;
for (var i = 0; i < students.length; i++) {
Avgmarks += students[i][1];
for (var j = i + 1; j < students.length; j++) {
if (students[i] > students[j]) {
a = students[i];
students[i] = students[j];
students[j] = a
}
}
}
var avg = Avgmarks / students.length;
document.write("Average grade: " + Avgmarks / students.length);
document.write("<br><br>");
for (i = 0; i < students.length; ++i){
document.write(students[i]+"<br>")
}
</script>
</body>
</html>
Summer- Unit 2 2.(b) Differentiate between concat() and join() methods of array object.
2022 Array, Ans:
Function and concat() of array object join() of array object
String The concat() method concatenates (joins) two or The join() method returns an array as a string.
more arrays.
The concat() method does not change the existing The join() method does not change the original
arrays. array.
Syntax: array1.concat(array2, array3, ..., arrayX) Syntax: array.join(separator)
Any separator can be specified. The default is
comma (,).
Example: Example:
<script> <script>
var arr1 = ["Java", "Python"]; var fruits = ["Banana", "Orange", "Apple",
var arr2 = [1, 2, 3]; "Mango"];
var arr3 = arr1.concat(arr2); var text = fruits.join("#");
document.write(arr3); document.write(text);
</script> </script>
4.(b) Write a javascript function that accepts a string as a parameter and find the
length of the string.
Ans:
<html>
<body>
<p id="demo"></p>
<script>
function len(text)
{
return (text.length);
}
document.getElementById("demo").innerHTML = "length of string="+len("Information");
</script>
</body>
</html>
Output:
5.(b) Develop javascript to convert the given character to unicode and vice-versa.
Ans:
<script>
var x="HeLLO";
document.writeln(x.charCodeAt(3));
document.writeln("<br>"+x.charCodeAt(1));
document.writeln("<br>"+x.charCodeAt(4));
document.writeln("<br>");
Output:
6.(c) Write a javascript function to generate Fibonacci series till user defined limit.
Ans:
<script>
function fibonacci(num)
{
var x = 0;
var y = 1;
var z;
var i = 0;
document.write(x);
document.write("<br>"+y);
for (i = 2; i < num; i++)
{
z = x + y;
x = y;
y = z;
document.write("<br>"+y);
}
}
var num = parseInt(prompt('Enter the number of terms: '));
answer = fibonacci(num);
</script>
Summer- Unit 3 1.(f) Enlist any four mouse events with their use. 2
5.(a) Write HTML code to design a form that display two textboxes for accepting two numbers,one textbox for
accepting result and two buttons as ADDITION and SUBTRACTION.Write proper JavaScript such that when
the user clicks on any one of the button,respective operation will be performed on two numbers and result will
be displayed in result textbox.
5.(b) Write HTML code to design a form that dsiplayes two buttons START and STOP.Write a JavaScript code
such that when user clicks on START button, real time digital clock will be displayed on screen. When user
clicks on STOP button,clock will stop displaying time(Use Timer Methods)
Ans:
<html>
<body>
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop time</button>
<script>
var myVar = setInterval(myTimer ,1000);
function myTimer()
{
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
</body>
Ans:
The radio button allows the user to choose one of a predefined set of options. You can define groups with the
name property of the radio buttons.
Radio buttons with the same name belong to the same group. Radio buttons with different names belongs to
the different groups. At most one radio button can be checked in a group.
Syntax:
<input type="radio" id="male" name="gender" value="male">
Code:
<html>
<body>
<form method="post" action=" " onsubmit="return ValidateForm();">
<fieldset>
<legend>Select Course:</legend>
<input type="radio" name="br" value="IT" checked>IT<br>
<input type="radio" name="br" value="CO">CO<br>
<input type="radio" name="br" value="EJ">EJ<br>
<br>
<input type="submit" value="Submit now">
</fieldset>
</form>
<script type="text/javascript">
function ValidateForm()
{
var obj = document.getElementsByName("br");
for(var i = 0; i < obj.length; i++)
{
if(obj[i].checked == true)
{
if(confirm("You have selected " + obj[i].value))
return true;
else
return false;
}
}
Example:
<html>
<head>
<title>Using Intrinsic JavaScript Functions</title>
</head>
<body>
<FORM name="contact" action="#" method="post">
<P>
First Name: <INPUT type="text" name="Fname"/> <BR>
Last Name: <INPUT type="text" name="Lname"/><BR>
Email: <INPUT type="text" name="Email"/><BR>
<img src="submit.jpg"
onclick="javascript:document.forms.contact.submit()"/>
<img src="reset.jpg"
onclick="javascript:document.forms.contact.reset()"/>
</P>
</FORM>
</body>
</html>
3.(c) Write a javascript program to calculate add, sub, multiplication and division
function divideBy()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = num1 / num2;
}
function add()
{
num1 = parseInt(document.getElementById("firstNumber").value);
num2 = parseInt(document.getElementById("secondNumber").value);
document.getElementById("result").innerHTML = num1 + num2;
}
function subtract()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = num1 - num2;
}
</script>
</head>
<body>
<form>
1st Number : <input type="text" id="firstNumber"><br>
2nd Number: <input type="text" id="secondNumber"><br><br>
<input type="button" onClick="multiplyBy()" Value="Multiply">
<input type="button" onClick="divideBy()" Value="Divide">
Example:
<html>
<head>
<script>
function writeCookie()
{
var d=new Date();
d.setTime(d.getTime()+(1000*60*60*24));
with(document.myform)
{
document.cookie="Name=" + person.value + ";expires=" +d.toGMTString();
}
}
function readCookie()
{
if(document.cookie=="")
document.write("cookies not found");
else
document.write(document.cookie);
}
</script>
</head>
Write the JavaScript code for below operations : (1) Name, Email & Pin Code should not be blank. (2) Pin
Code must contain 6 digits & it should not be accept any characters.
Ans:
<html>
<head>
<style>
table,tr,td
{
border: solid black 1px;
border-collapse: collapse;
}
td
{
padding: 10px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>Name : </td>
<td> <input type="text" id="name" required></td>
</tr>
<tr>
<td>Email : </td>
<td> <input type="email" id="email" required></td>
</tr>
<tr>
<td>Pin code : </td>
<td> <input type="number" id="pin" required></td>
</tr>
<tr>
<td></td>
<td><button onclick="submit()">Submit</button></td>
</tr>
</tbody>
</table>
</body>
<script>
function submit()
{
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var pin = Number(document.getElementById("pin").value);
if(name.length==0 || email.length==0 || pin.length==0)
{
alert("Please enter value in all fields.")
}
else
{
var pinpattern =/^[4]{1}[0-9]{5}$/;
if( pinpattern.test(pin))
{
alert("Perfect Pin code");
}
else
{
alert("Wrong Pin code.");
}
}
}
</script>
</html>
Q5 b. Write a webpage that displays a form that contains an input for username & password. User is prompted
to entre the input & password & password becomes the value of the cookie. Write a JavaScript function for
storing the cookie. It gets executed when the password changes.
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.
Q2 d. Design a webpage that displays a form that contains an input for user name and password. User is
prompted to enter the input user name and password and password become value of the cookies. Write the
JavaScript function for storing the cookies.
Ans:
<html>
<head>
<script>
function storeCookie()
{
var pwd = document.getElementById('pwd').value
document.cookie = "Password=" + pwd + ";"
alert("Cookie Stored\n"+document.cookie);
}
</script>
</head>
<body>
<form name="myForm">
Enter Username <input type="text" id="uname"/><br/>
Enter Password <input type="password" id="pwd"/><br/>
<input type="button" value="Submit" onclick="storeCookie()"/>
<p id="panel"></p>
</form>
</body>
</html>
{
if(document.cookie=="")
document.write("cookies not found");
else
document.write(document.cookie);
}
</script>
</head>
<body>
<form name="myform" action="">
Enter your name:
<input type="text" name="person"><br>
<input type="Reset" value="Set" type="button" onclick="writeCookie()">
<input type="Reset" value="Get" type="button" onclick="readCookie()">
</form>
</body>
</html>
Q6 a. Write a JavaScript to open a new window and the new window is having two frames. One frame
containing button as “click here !”, and after clicking this button an image should open in the second
frame of that child window.
Ans:
Code:
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>
Summer Unit 5 Q4 d. Explain text and image rollover with suitable example. 2
-2023 Ans: 6
6
Text rollover:
We can also create a rollover and rollback for text using the onmouseover and onmouseout.
Ans:
<html>
<head>
<title>
text rollovers</title>
</head>
<body>
<table border="1" width="100%">
<tbody>
<tr valign="top">
<td width="50%">
<a><img height="500" src="blue.png" width="900" name="clr"></a></td>
<td><a onmouseover="document.clr.src='blue.png' ">
<b><u> Blue Color</u></b></a> 55
<br>
<a onmouseover="document.clr.src='red.png' ">
<b><u> Red Color</u></b></a>
<br>
<a onmouseover="document.clr.src='green.png' ">
<b><u> Green Color</u></b></a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Image Rollover:
<html>
<head>
<title>JavaScript Image Rollovers</title>
</head>
<body>
<img src="blue.png" name="image1" onmouseover="src='car.jpg' " onmouseout="src='blue.png' ">
</img>
</body>
</html>
Q5 c. Write HTML code to design a form that displays textboxes for accepting UserID and Aadhar No.
and a SUBMIT button. UserlD should contain 10 alphanumeric characters and must start with Capital
Letter. Aadhar No. should contain 12 digits in the format nnnn nnnn nnnn. Write JavaScript code to
validate the UserID and Aadhar No. when the user clicks on SUBMIT button.
Ans:
<html>
<body>
<script>
function submitdata()
{
Var userID=document.getElementById(‘uid’).value;
Var aadharno=document.getElementById(‘uaadhatNo’).value;
Var userIDExp=/^[A-Z][A-Z a-z 0-9] {9} $/;
Var aadharIDExp=/^\d{4} \d{4} \d{4} $/;
If(!userIDExp.test(userID))
{
Alert(“Invalid userID, it should contain 10 alphanumeric character);
}
Else if(!aadharNoExp.test(aadharNo);
{
Alert(“Invalid aadharNo, It should be in the nnnn nnnn nnnn format);
}
Else
{
Alert(“valid user”);
}
}
</script>
<form>
<inpt id=”aadhar no” type=”text” placeholder=”Enter your adhar no” required><br><br>
<button onclick=”Submitdata()”>
Submit</button>
</form>
</body>
</html>
Q6 b. Write a script for creating following frame structure : Frame 1 contains three buttons SPORT,
MUSIC and DANCE that will perform following action : When user clicks SPORT button, sport.html
webpage will appear in Frame 2. When user clicks MUSIC button, music.html webpage will appear in
Frame 3. When user clicks DANCE button, dance.html webpage will appear in Frame 4.
Ans:
<html>
<head>
<title> main frame</title>
</head>
<frameset rows=”20%, 20%,60%”>
<frameset cols=”*,*,*”>
<frame src=”frame5.html>
<frame src=”frame1.html>
<frame src=”frame5.html>
</frameset>
<frame src=”finalf.html”>
<frameset cols=”*,*,*”>
<frame src=”frame2.html>
<frame src=”frame3.html>
<frame src=”frame4.html>
</frameset>
</frameset>
</html>
Frame1.html
<html>
<body>
<center><b>frame1
</body>
</html>
Frame2.html
<html>
<head>
<body>
Welcome to Sport Page
</body>
</html>
Frame3.html
<html>
<head>
<body>
Welcome to Music Page
</body>
</html>
Frame4.html
<html>
<head>
<body>
Welcome to Dance Page
</body>
</html>
Frame5.html
<html>
<head>
<body>
</body>
</html>
Frame6.html
<html>
<head>
<body>
<button onclick=”Frame2.html”>Sport</button>
</body>
</html>
Frame7.html
<html>
<head>
<body>
<button onclick=”Frame3.html”>Sport</button>
</body>
</html>
Frame8.html
<html>
<head>
<body>
<button onclick=”Frame4.html”>Sport</button>
</body>
</html>
Winter- Unit 5 Q3 d. Write a JavaScript function that will open new window when the user will clicks on the button. 4
2022 Ans: 4
<html> 4
<body> 4
<button onclick="openWin()">Open "New Window"</button> 6
<script>
var myWindow;
function openWin()
{
myWindow = window.open("", "myWindow", "width=400,height=400");
myWindow.document.write("<p>Hello Everyone.Welcome to new window.</p>");
}
</script>
</body>
</html>
4 p{N}
It matches any string containing a sequence of N p's
5 p{2,3}
It matches any string containing a sequence of two or three p's.
6 p{2, }
It matches any string containing a sequence of at least two p's.
7 p$
It matches any string with p at the end of it.
Example:
<html>
<body>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction()
{
var str = "100, 1000 or 10000?";
var patt1 = /\d{3,4}/g;
var result = str.match(patt1);
document.getElementById("demo").innerHTML = result;
}
</script>
</body>
</html>
Applications:
React is a JavaScript library developed by Facebook which, among other things, was used to build
Instagram.com.
2. Angular
Google operates this framework and is designed to use it to develop a Single Page Application (SPA).
This development framework is known primarily because it gives developers the best conditions to
combine JavaScript with HTML and CSS. Google operates this framework and is designed to use it to
develop a Single Page Application (SPA). This development framework is known primarily because it
gives developers the best conditions to combine JavaScript with HTML and CSS.
Applications:
Microsoft Office ,Gmail, Forbes, PayPal, Grasshopper, Samsung, Delta
3. Vue.js
Vue is an open-source JavaScript framework for creating a creative UI. The integration with Vue in
projects using other JavaScript libraries is simplified because it is designed to be adaptable.
Application:
VueJS is primarily used to build web interfaces and one-page applications. It can also be applied to both
desktop and mobile app development.
4. jQuery
It is a cross-platform JavaScript library designed to simplify HTML client-side scripting. You can use the
jQuery API to handle, animate, and manipulate an event in an HTML document, also known as DOM.
Also, jQuery is used with Angular and React App building tools.
Applications:
JQuery can be used to develop Ajax based applications. 2. It can be used to make code simple, concise
and reusable. 3. It simplifies the process of traversal of HTML DOM tree. 4. It can also handle events,
perform animation and add ajax support in web applications.
5. Node.js
Node.js is an open-source, server-side platform built on the Google Chrome JavaScript Engine. Node.js is
an asynchronous, single-threaded, non-blocking I/O model that makes it lightweight and efficient.
Applications:
Paypal, LinkedIn, Yahoo, Mozilla, Netflix, Uber, Groupon, GoDaddy, eBay
Q5 c. Write a JavaScript for creating following frame structure :
Chapter 1 & Chapter 2 are linked to the webpage Ch1 HTML & Ch2.html respectively. When user click
on these links corresponding data appears in FRAME3.
Ans:
Step 1) create file frame1.html
<html>
<body>
<h1 align="center">FRAME1</h1>
</body>
</html>
Step 2) create frame2.html
<html>
<head>
<title>FRAME 2</title>
</head>
<body><H1>Operating System</H1>
<a href="Ch1.html" target="c"><UL>Chapter 1</UL></a>
<br>
<a href=" Ch2.html" target="c"><UL> Chapter 2</UL></a>
</body>
</html>
Step 3) create frame3.html
<html>
<body>
<h1>FRAME3</h1>
</body>
</html>
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 a sequence of characters that constructs a search pattern. When you search for
data in a text, you can use this search pattern to describe what you are looking for.
Syntax:
A regular expression is defined with the RegExp () constructor as:
var pattern = new RegExp(pattern, attributes);
or simply
var pattern = /[pattern]/attributes;
Here,
• Pattern – A string that specifies the pattern of the regular expression or another regular expression.
• Attributes – An optional string containing attributes that specify global, case-insensitive, and
multi-line matches.
Example:
<html>
<body>
<script>
//validating mobile number
function validatePhone(num) {
Q4 c. Write a JavaScript program to validate email ID of the user using regular expression.
Ans:
<html>
<head>
<title>JavaScript Regular expression to valid an email address</title>
</head>
<body>
<script>
function valid_email(str)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(mailformat.test(str))
{
alert("Valid email address!");
}
else
{
alert("You have entered an invalid email address!");
}
}
valid_email('[email protected]');
</script>
</body>
</html>
Q4 d. Write a JavaScript program to design HTML page with books information in tabular format, use
rollovers to display the discount information.
Ans:
<html>
<head>
<title>
table rollovers</title>
<script>
function open_new_window(clrname)
{
if(clrname==1)
{
document.clr.src="c.jpg";
mwin=window.open('','myadwin','height=50,width=50,left=500,top=200');
mwin.document.write("Discount is 50%");
}
if(clrname==2)
{
document.clr.src="java.jpg";
mwin=window.open('','myadwin','height=50,width=50,left=500,top=200');
mwin.document.write("Discount is 40%");
}
if(clrname==3)
{
document.clr.src="p.jpg";
mwin=window.open('','myadwin','height=100,width=150,left=500,top=200');
mwin.document.write("Discount is 20%");
}
}
</script>
</head>
<body>
<table border="1" width="100%">
<tbody>
<tr>
<td width="50%">
<a><img height="500" src="c.jpg" width="400" name="clr"></td>
<td><H2>
<a onmouseover="open_new_window(1)" onmouseout="mwin.close()">
<b><u>Programming in C</u></b></a>
<br><br>
<a onmouseover="open_new_window(2)" onmouseout="mwin.close()">
<b><u>Java</u></b></a>
<br><br>
<a onmouseover="open_new_window(3)" onmouseout="mwin.close()">
<b><u>Python</u></b></a>
</H2>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Q6 b. Write a JavaScript to create option list containing list of images and then display images in new
window as per selection.
Ans:
<html>
<body>
<label for="contries">Choose a Country:</label>
<select name="contries" id="contries" class="select" onchange="changecontry()">
<option value="india">India</option>
<option value="japan">Japan</option>
<option value="usa">USA</option>
</select>
<script>
changecontry= () => {
var contries = document.getElementById("contries").value;
switch(contries)
{
case "india":
var myWindow=window.open("i.png","MsgWindow", "width=200,height=100");
break;
case "japan":
var myWindow=window.open("j.png","MsgWindow", "width=200,height=100");
break;
case "usa":
var myWindow=window.open("u.png","MsgWindow", "width=200,height=100");
break;
default:
/*document.getElementById("city-name").innerHTML = "Nill";
document.getElementById("city-description").innerHTML = "Nill";
document.getElementById("city-image").src = "";*/
break;
}
}</script>
</body>
</html>
Summer Unit 6 Q4 b. List Ways of protecting your web page and describe any one of them. 4
-2023 Ans: 4
There is nothing secret about your web page. Anyone with a little computer knowledge can use a few 4
mouse clicks to display your HTML code, including your JavaScript, on the screen. 6
<html>
<head>
<script>
window.onload = function()
{
document.addEventListener("contextmenu", function(e)
{
e.preventDefault();
}, false);}
</script>
<body>
The preventDefault() method cancels the event if it is cancelable, meaning that the default action that
belongs to the event will not occur.
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);
}
<html>
<head>
<title>Conceal Email Address</title>
<script>
function CreateEmailAddress()
{
var x = 'abcxyz*c_o_m'
var y = 'mai'
var z = 'lto'
</script>
</head>
<body>
<input type="button" value="send" onclick="CreateEmailAddress()">
</body>
</html>
Q4 c. Explain how to create and display Rotating Banner in JavaScript with example.
Ans:
Following steps must be follow for creating banner in javascript:
Example:
<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>
Q4 e. What is Status bar and how to display moving message on the status line of a window using
JavaScript.
Ans:
To set the text in the status bar at the bottom of the browser window. The HTML standards now requires
setting window.status to have no effect on the text displayed in the status bar.
<script>
Var scrollpos=0
Var maxscroll=100;
Var blank=” “
Function scrollText(text,milliseconds)
{
Window.setInterval(“displayText(“+text+”);milliseconds)
}
Function displayText(text)
{
Window.defaultStatus=blanks+text++scrollpos
Blanks+=” “
If(scrollpos>maxscroll)
{
Scrollpos=0
Blanks=” “
}
</script>
Q6 c. Write a JavaScript to create a pull - down menu with four options [AICTE, DTE, MSBTE,
GO0GLE]. Once the user will select one of the options then user will be redirected to that site.
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="https://www.google.com">Google</option>
<option
value="https://www.msbte.org.in">MSBTE</option>
<option
value="https://www.aicte-india.org/">AICTE</option>
<option
value="https://poly23.dtemaharashtra.gov.in/diploma23/">DTE</option>
</form>
</body>
</html>
Winter- Unit 6 Q4 b. Write a JavaScript program that will create pull-down menu with three options. Once the user will 4
2022 select the one of the options then user will redirected to that website. 4
Ans: 6
<html> 6
<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>
Q4 e. Describe how to link banner advertisement to URL with example.
Ans:
The banner advertisement is the hallmark of every commercial web page. It is typically positioned near
the top of the web page, and its purpose is to get the visitor's attention by doing all sorts of clever things.
To get additional information, the visitor is expected to click the banner so that a new web page opens.
You can link a banner advertisement to a web page by inserting a hyperlink into your web page that calls
a JavaScript function rather than the URL of a web page. The JavaScript then determines the URL that is
associated with the current banner and loads the web page that is associated with the URL.
Example:
<html>
<head>
<title>Link Banner Ads</title>
<script language="Javascript" type="text/javascript">
Banners = new Array('1.jpg','2.jpg','3.jpg')
BannerLink = new Array(
'google.com/','vpt.edu.in/', 'msbte.org.in/');
CurrentBanner = 0;
NumOfBanners = Banners.length;
function LinkBanner()
{
document.location.href =
"http://www." + BannerLink[CurrentBanner];
}
function DisplayBanners() {
if (document.images) {
CurrentBanner++
if (CurrentBanner == NumOfBanners) {
CurrentBanner = 0
}
document.RotateBanner.src= Banners[CurrentBanner]
setTimeout("DisplayBanners()",1000)
}
}
</script>
</head>
<body onload="DisplayBanners()" >
<center>
<a href="javascript: LinkBanner()"><img src="1.jpg"
width="400" height="75" name="RotateBanner" /></a>
</center>
</body> </html>
Q6 b. 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>
Q6 c. Write a JavaScript for the folding tree menu.
Ans:
<html>
<head>
<style>
ul, #myUL {
list-style-type: none;
}
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
.caret-down::before {
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari */'
transform: rotate(90deg);
}
.nested {
display: none;
}
.active {
display: block;
}
</style>
</head>
<body>
<h2>Folding Tree Menu</h2>
<p>A tree menu represents a hierarchical view of information, where each item can have a number of
subitems.</p>
<p>Click on the arrow(s) to open or close the tree branches.</p>
<ul id="myUL">
<li><span class="caret">India</span>
<ul class="nested">
<li>Karnataka</li>
<li>Tamilnaadu</li>
<li><span class="caret">Maharashtra</span>
<ul class="nested">
<li>Mumbai</li>
<li>Pune</li>
<li><span class="caret">Navi Mumbai</span>
<ul class="nested">
<li>Nerul</li>
<li>Vashi</li>
<li>Panvel</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
});
}
</script>
</body>
</html>
Summer Unit 6 Q1 f. Explain frame works of JavaScript and its application. 2
-2022 Ans: 4
JavaScript frameworks are a type of tool that makes working with JavaScript easier and smoother. 6
1) Angular 6
2) React
3) Vue.js
4) Node.js
5) Backbone.js
{
if (document.images)
{
CurrentBanner++;
if (CurrentBanner == NumOfBanners)
{
CurrentBanner = 0;
}
document.RotateBanner.src= Banners[CurrentBanner];
setTimeout("DisplayBanners()",1000);
}
}
</script>
</head>
<body onload="DisplayBanners();" >
<center>
<a href="javascript: LinkBanner()">
<img src="1.jpg"
width="400" height="200" name="RotateBanner" /></a>
</center>
</body>
</html>
Q4 e. List ways of protecting your webpage 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.
<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.
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>
<html>
<head>
<title>Conceal Email Address</title>
<script>
function CreateEmailAddress()
{
var x = 'abcxyz*c_o_m'
var y = 'mai'
var z = 'lto'
var s = '?subject=Customer Inquiry'
x = x.replace('&','@')
x = x.replace('*','.')
x = x.replace('_','')
x = x.replace('_','')
var b = y + z +':'+ x + s
window.location=b;
}
</script>
</head>
<body>
<input type="button" value="send" onclick="CreateEmailAddress()">
</body>
</html>
Q5 c. Write a JavaScript program to create a slide show with the group of six images, also simulate the
next and previous transition between slides in your JavaScript.
Ans:
<html>
<title>slideshow</title>
<body>
<h2 class="w3-center">Manual Slideshow</h2>
<div class="w3">
<img class="mySlides" src="1.jpg" style="width:50%">
<img class="mySlides" src="2.jpg" style="width:50%">
<img class="mySlides" src="3.jpg" style="width:50%">
<img class="mySlides" src="4.jpg" style="width:50%">
<img class="mySlides" src="5jpg" style="width:50%">
<img class="mySlides" src="6.jpg" style="width:50%">
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n)
{
showDivs(slideIndex += n);
}
function showDivs(n)
{
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length)
{
slideIndex = 1
}
if (n < 1)
{
slideIndex = x.length
}
for (i = 0; i < x.length; i++)
{
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
</body>
</html>