You are on page 1of 7

1. Write HTML code to design a form that displays 2 buttons START and STOP.

Write 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.
<!DOCTYPE html>
<html>
<body>
<button onclick="c()">Start time interval</button>
<button onclick="d()">Stop time interval</button>
<h1 id="ht"></h1>
<script>
var tint;
function c() {
tint = setInterval(mySetInt, 1000);
}
function d() {
clearInterval(tint);
}
function mySetInt() {
const d = new Date();
document.getElementById("ht").innerHTML = d.toLocaleTimeString();
}
</script>
</body>
</html>

2. Frame 1 contains 3 buttons SPORT, MUSIc and DANC. When user clicks SPORT buttin
sport.html webpage will appear in Frame 2, When user click MUSIC button,music.html
webpage will appear in FRAME 3, When user5 clicks DANCE button, dance.html webpage will
appear in FRAME 4

Frame 1
SPORT MUSIC DANCE
FRAME 2 FRAME 3 FRAME 4

<html>
<frameset rows="20%,*">
<frame src="frame1.html" name="frame1" />
<frameset cols="*,*,*">
<frame src="frame2.html" name="frame2" />
<frame src="frame3.html" name="frame3" />
<frame src="frame2.html" name="frame2" />
</frameset>
</frameset>
</html>

<!-- --------------frame2.html---------------- -->


<html>
<script>
function a() {
parent.frame2.location.href = SPORT.html;
}
function b() {
parent.frame3.location.href = musice.html;
}
function c() {
parent.frame4.location.href = DANC.html;
}
</script>
<body>
<input type="button" onclick="a()" value="SPORT"> <br>
<input type="button" onclick="b()" value="music"><br>
<input type="button" onclick="c()" value="DANC">
</body>

3. Write a Javascript to create a pull down menu with 4 options[AICTE,DTE,MSBTE,GOOGLE].


Once the user will select one of the option then user will be redirected to that site.
<!DOCTYPE html>
<html>
<head>
<script type='text/JavaScript'>
function getPage(Choice)
{
Page = Choice.options[Choice.selectedIndex].value;
if(Page != "")
{
window.location = Page;
}
}
</script>
</head>
<body>
<form action="" name="f">
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.yahoo.com/"> Yahoo </option>
</select>
</form>
</body>
</html>

4. Enlist and explain the use of any 2 Instrinsic Javascript functions

5. Write a javascript function that will open new window when user will click on button
<!DOCTYPE html>
<html>
<body>
<h2>The open() Method</h2>
<button onclick="myFunction()">Open it</button>
<script>
function myFunction() {
myWindow = window.open("", "", "width=200,height=100");
}
</script>
</body>
</html>

6. Describe quantifiers with the help of example


Quantifiers
Quantifiers indicate numbers of characters or expressions to match.

Quantifier Description
n+ Matches any string that contains at least one n
n* Matches any string that contains zero or more occurrences of n
n? Matches any string that contains zero or one occurrences of n
n{X} Matches any string that contains a sequence of X n's
n{X,Y} Matches any string that contains a sequence of X to Y n's
n{X,} Matches any string that contains a sequence of at least X n's
n$ Matches any string with n at the end of it
^n Matches any string with n at the beginning of it
?=n Matches any string that is followed by a specific string n
?!n Matches any string that is not followed by a specific string n

<!DOCTYPE html>
<html>
<body>
<script>
let result = "World".match(/r+/g);
alert(result);
result = "Hellooo".match(/r+/g);
alert(result);
</script>
</body>
</html>

7. Describe Framework of Javascript and its application


JavaScript framework is an application framework which is written in JavaScript.
This are collections of JavaScript libraries which provide the predefined code or functions to the
developer.
There are various JavaScript frameworks are available. Each framework has different work flow.
An entire application is based on the framework. The framework designs the complete
application.
In framework, User need not call the predefined library functions instead the framework itself
call the functions in specific way.
Some of the framework such as AngularIS follows the Model-View-Controller design pattern to
separate the complex code and to make easy the development and improve the code quality.
Some of the examples of JavaScript frameworks are AngularJS, React.JS, Meteor.JS, EmberJS,
etc.
Each Framework has wide range of applications.
JavaScript frameworks are used in web development as well as in hybrid mobile app
development.
It improves the code quality.
The development of entire application is based on the framework, where less code is required
to write by developer.
The react.js is used in react-native mobile application development.
Angular JS is used in single page web application development.
Frameworks reduce the code complexity.

8. Describe how to link banner advertisement to URL with example.


<html>
<head>
<script language="Javascript">
var MyBanners = new Array('banner1.jpg', 'banner2.jpg')
var MyBannerLinks = new Array('http://www.abc.net/', 'http://www.pqr.com/')
banner = 0
function ShowLinks() {
document.location.href = "http://www." + MyBannerLinks[banner]
}
function ShowBanners() {
if (document.images) {
banner++
if (banner == MyBanners.length) {
banner = 0
}
document.ChangeBanner.src = MyBanners[banner]
setTimeout("ShowBanners()", 5000)
}
}
</script>
<body onload="ShowBanners()">
<center>
<a href="javascript: ShowLinks()">
<img src="banner1.jpg" width="900" height="120" name="ChangeBanner" /></a>
</center>
</body>
</html>

9. Write a webpage that displays a form that contains an input for username and password. User
is prompted to entire the input and password and password becomes the value of cookie.
Write a javascript function for storing the cookie. It gets executed when the password
changes.
<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>

10. Write Javascript for the folding tree menu


<!DOCTYPE html>
<html>
<head>
<style>
.nested {
display: none;
}
.active {
display: block;
}
</style>
</head>
<body>
<h2>Tree View</h2>
<ul>
<li id="m" >Beverages
<ul class="nested">
<li>Water</li>
<li>Coffee</li>
<li>Tea</li>
</ul>
</li>
</ul>
<script>
var toggler = document.getElementById("m");
toggler.addEventListener("click", function () {
this.parentElement.querySelector(".nested").classList.toggle("active");
});
</script>
</body>
</html>

11. Explain open() method of window object with syntax and example.
open()
It opens a new browser window, or a new tab, depending on your browser settings and the
parameter values.

Syntax:
window.open(URL, name, specs, replace)

URL
It is Optional.
The URL of the page to open.
If no URL is specified, a new blank window/tab is opened
name
It is Optional.
The target attribute or the name of the window.
The following values are supported:
<!DOCTYPE html>
<html>
<body>
<h2>The open() Method</h2>
<button onclick="myFunction()">Open it</button>
<script>
function myFunction() {
window.open("https://www.google.com");
}
</script>
</body>
</html>

12. Write a javascript to modify the status bar using on Mouseover and on mouseout with links.
When the user moves his mouse over the link, it will displa “MSBTE” in status bar.When user
moves his mouse away from the link the status bar will display nothing.

<!DOCTYPE html>
<html>
<body>
<a href="www.msbte.org.in" id="demo" name="demo" onmouseover="ov()"
onmouseout="out()"> LINK MSBTE</a>
<script>
let deomImage = document.getElementById("demo");
deomImage.addEventListener("mouseover", function () {
window.status = "MSBTE";
});
deomImage.addEventListener("mouseout", function () {
window.status = "";
});
</script>
</body>
</html>

You might also like