Super 25 Css

Download as pdf or txt
Download as pdf or txt
You are on page 1of 26

V2V EdTech LLP | ALL IMPORTANT Board Questions

TY DIPLOMA VIMP QUESTIONS CSS

1. Explain getter and setter properties in Java script with suitable example.
Ans:
Property getters and setters
1. The accessor properties. They are essentially functions that work on getting
and setting a value.
2. Accessor properties are represented by “getter” and “setter” methods. In an
object literal they are denoted by get and set.
let obj = { get propName() {
// getter, the code executed on getting obj.propName
},
set propName(value) {
// setter, the code executed on setting obj.propName = value
}
};
3. An object property is a name, a value and a set of attributes. The value may
be replaced by one or two methods, known as setter and a getter. 4. When
program queries the value of an accessor property, Javascript invoke getter
method(passing no arguments). The retuen value of this method become the
value of the property access expression.
5. When program sets the value of an accessor property. Javascript
invoke the setter method, passing the value of right-hand side of assignment.
This method is responsible for setting the property value.
If property has both getter and a setter method, it is read/write property.
If property has only a getter method , it is read-only property.
If property has only a setter method , it is a write-only property.
6. getter works when obj.propName is read, the setter – when it is
assigned.
Example:
<html>
<head>
<title>Functions</title>
<body>
<script language="Javascript"> var myCar = { /* Data properties */ defColor:
"blue", defMake: "Toyota",

/* Accessor properties (getters) */ get color() { return this.defColor;


},
get make() { return this.defMake;
},

/* Accessor properties (setters) */ set color(newColor) { this.defColor =


newColor;
},
set make(newMake) { this.defMake = newMake;
} };
document.write("Car color:" + myCar.color + " Car Make: "+myCar.make)
/* Calling the setter accessor properties */ myCar.color = "red"; myCar.make =
"Audi";
/* Checking the new values with the getter accessor properties */
document.write("<p>Car color:" + myCar.color); // red document.write(" Car
Make: "+myCar.make); //Audi
</script>
</head>
</body>
</html>

2. Explain prompt(), alert(), write() and confirm() method of Java script with
syntax and example.
Ans:
prompt()
The prompt () method displays a dialog box that prompts the visitor for input.
The prompt () method returns the input value if the user clicks "OK". If the
user clicks
"cancel" the method returns null. Syntax: window.prompt (text, defaultText)
Example:
<html>
<script type="text/javascript"> function msg(){
var v= prompt("Who are you?"); alert("I am "+v);
}
</script>
<input type="button" value="click" onclick="msg()"/>
</html> confirm()
It displays the confirm dialog box. It has message with ok and cancel buttons.
Returns Boolean indicating which button was pressed Syntax:
window.confirm("sometext"); Example :
<html>
<script type="text/javascript">
function msg(){
var v= confirm("Are u sure?"); if(v==true){ alert("ok");
}
else{ alert("cancel");
}}
</script>
<input type="button" value="delete record" onclick="msg()"/>
</html>
.
Explain alert method in Java script with suitable example.
The alert() method displays an alert box with a message and an OK
button. The alert() method is used when you want information to come
through to the user. Syntax:
alert(message) example: <html>
<body>
<h1>The Window Object</h1>
<h2>The alert() Method</h2>
<p>Click the button to see line-breaks in an alert box.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
alert("Hello\nHow are you?");
}
</script>
</body>
</html>

3. Write a Java script program which computes, the average marks of the
following students then, this average is used to determine the
corresponding grade.
Ans:
<html>
<head>
<title>Compute the average marks and grade</title>
</head>
<body>
<script>
var students = [['Summit', 80], ['Kalpesh', 77], ['Amit', 88], ['Tejas', 93],
['Abhishek', 65]]; var Avgmarks = 0;
for (var i=0; i < students.length; i++) {
Avgmarks += students[i][1];
}
var avg = (Avgmarks/students.length);
document.write("Average grade: " + (Avgmarks)/students.length);
document.write("<br>"); if (avg < 60){ document.write("Grade : E");
}
else if (avg < 70) { document.write("Grade : D");
}
else if (avg < 80) { document.write("Grade : C");
} else if (avg < 90) {
document.write("Grade : B");
} else if (avg < 100) { document.write("Grade : A");
}
</script>
</body>
</html>

4. Write the use of chatAt(),fromCharCode(), and indexof() with syntax and


example.
Ans:
charAt()
The charAt() method requires one argument i.e is the index of the character
that you want to copy.
Syntax:
var SingleCharacter = NameOfStringObject.charAt(index); Example:
var FirstName = 'Bob';
var Character = FirstName.charAt(0); //o/p B indexOf()
The indexOf() method returns the index of the character passed to it as an
argument.
If the character is not in the string, this method returns –1.
Syntax:
var indexValue = string.indexOf('character'); Example:
var FirstName = 'Bob';
var IndexValue = FirstName.indexOf('o'); //o/p index as 1

5. Differentiate between concat() and join() methods of array.


Ans:

concat() join()

The concat() method concatenates (joins) The join() method returns an


two or more arrays. array as a string.
The concat() method returns a new array,
containing the joined arrays.

The concat() method separates each Any separator can be specified.


value with a comma only. The default is comma (,).

Syntax: array1.concat(array2, array3, ..., Syntax: array.join(separator)


arrayX)

Example: <script> Example: <script>


const arr1 = ["CO", "IF"]; const arr2 = var fruits = ["Banana", "Orange",
["CM", "AI",4]; const arr = "Apple", "Mango"]; var text =
arr1.concat(arr1, arr2); fruits.join();
document.write(arr); document.write(text); var text1 =
</script> fruits.join("$$");
document.write("<br>"+text1);
</script>

6. Write a JavaScript that will replace following specified value with another
value in string. String = “I will fail” Replace “fail” by “pass”.
Ans:
<html>
<head> <body> <script>
var myStr = ‘I will fail’;
var newStr = myStr.replace(fail, "pass"); document.write(newStr);
</script>
</body>
</head>
</html>

7. Write a Java Script code to display 5 elements of array in sorted order and
Write a javascript function to generate Fibonacci series till user defined
limit.
Ans:
<html>
<head>
<title> Fibonacci Series in JavaScript </title>
</head>
<body>
<script>
// declaration of the variables
var n1 = 0, n2 = 1, next_num, i;
var num = parseInt (prompt (" Enter the limit for Fibonacci Series "));
document.write( "Fibonacci Series: ");
for ( i = 1; i <= num; i++)
{ document.write (" <br> " + n1); // print the n1
next_num = n1 + n2; // sum of n1 and n2 into the next_num

n1 = n2; // assign the n2 value into n2


n2 = next_num; // assign the next_num into n2
}

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

8. List ways of protecting your web page and describe any one of them.
Ans:
Ways of protecting Web Page:
1)Hiding your source code
2)Disabling the right MouseButton
3) Hiding JavaScript
4) Concealing E-mail address.

1) Hiding your source code


The source code for your web page—including your JavaScript—is stored in
the cache, the part of computer memory where the browser stores web pages
that were requested by the visitor. A sophisticated visitor can access the
cache and thereby gain access to the web page source code.
However, you can place obstacles in the way of a potential peeker. First, you
can disable use of the right mouse button on your site so the visitor can't
access the View Source menu option on the context menu. This hides both
your HTML code and your JavaScript from the visitor.
Nevertheless, the visitor can still use the View menu's Source option to
display your source code. In addition, you can store your JavaScript on your
web server instead of building it into your web page. The browser calls the
JavaScript from the web server when it is needed by your web page.
Using this method, the JavaScript isn't visible to the visitor, even if the visitor
views the source code for the web page.

2)Disabling the right MouseButton


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 <head> tag of the web page.
The JavaScript begins by defining the BreakInDetected() function. This
function is called any time the visitor clicks the right mouse button while the
web page is
displayed. It displays a security violation message in a dialog box whenever a
visitor clicks the right mouse button
The BreakInDetected() function is called if the visitor clicks any button other
than the left mouse button.
Example:
<html>
<head>
<title>Lockout Right Mouse Button</title>
<script language=JavaScript> function BreakInDetected(){ alert('Security
Violation') return false
}
function NetscapeBrowser(e){ if (document.layers||
document.getElementById&&!document.all){ if (e.which==2||e.which==3){
BreakInDetected()
return false
}}
}
function InternetExploreBrowser(){ if (event.button==2){ BreakInDetected()
return false
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN)
document.onmousedown=NetscapeBrowser()
}
else if (document.all&&!document.getElementById){
document.onmousedown=InternetExploreBrowser()
}
document.oncontextmenu=new Function(
"BreakInDetected();return false")
</script>
</head>
<body>
<table width="100%" border=0>
<tbody>
<tr vAlign=top>
<td width=50>
<a>
<ing height=92 src="rose.jpg" width=70 border=0
onmouseover="src='rose1.jpg'" onmouseout="src='rose.jpg'">
</a>
</td>
<td>
<img height=1 src="" width=10>
</td>
<td>
<a>
<cTypeface:Bold><u> Rose Flower</U></b>
</a>
</font><font face="arial, helvetica, sans-serif" size=-1><BR>Rose Flower
</td>
</tr>
</tbody>
</table> </body>
</html>

3) Hiding JavaScript
You can hide your JavaScript from a visitor by storing it in an external fi le on
your web server. The external fi le should have the .js fi le 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 fi le, but you won't see the
source code for the JavaScript.
The next example shows how to create and use an external JavaScript file.
First you must tell the browser that the content of the JavaScript is located in
an external file on the web server rather than built into the web page. You do
this by assigning the file name that contains the JavaScripts to the src
attribute of the <script>tag, as shown here: <script src="MyJavaScripts.js"
language="Javascript" type="text/javascript">
Next, you need to defi ne empty functions for each function that you define in
the external JavaScript file.
<html >
<head>
<title>Using External JavaScript File</title>
<script src="myJavaScript.js" language="Javascript" type="text/javascript">
function OpenNewWindow(book) {
}
</script>
</head>
<body>
<tablewidth="100%" border=0>
<tbody>
<tr vAlign=top>
<td width=50>
<a>
<img height=92 src="rose.jpg" width=70 border=0 name='cover'>
</a>
</td>
<td>
<img height=1 src="" width=10>
</td>
<td>
<a onmouseover="OpenNewWindow(1)" onmouseout="MyWindow.close()">
<b><u>Rose </u></b>
</a> <br>
<a onmouseover="OpenNewWindow(2)" onmouseout="MyWindow.close()">
<b><u>Sunflower</U></b>
</a>
<br>
<A onmouseover="OpenNewWindow(3)" onmouseout="MyWindow.close()">
<b><u>Jasmine </u></b>
</a>
</td>
</tr>
</tbody>
</table> </body>
</html>
The final step is to create the external JavaScript fi le. You do this by placing
all function definitions into a new fi le and then saving the fi le using the .js
extension.
MyJavaScript.js file:
function OpenNewWindow(book) { if (book== 1)
{
document.cover.src='rose.jpg'
MyWindow = window.open('', 'myAdWin', 'titlebar=0 status=0, toolbar=0,
location=0, menubar=0, directories=0, resizable=0, height=50,
width=150,left=500,top=400')
MyWindow.document.write( 'Rose flower')
}
if (book== 2)
{
document.cover.src='sunflower.jpeg'
MyWindow = window.open('', 'myAdWin', 'titlebar=0 status=0, toolbar=0,
location=0, menubar=0, directories=0, resizable=0, height=50,
width=150,left=500,top=500')
MyWindow.document.write( 'sunflower flower')
}
if (book== 3)
{
document.cover.src='jasmine.gif'
MyWindow = window.open('', 'myAdWin', 'titlebar=0
status=0, toolbar=0, location=0, menubar=0, directories=0, resizable=0,
height=50,
width=150,left=500,top=600')
MyWindow.document.write( 'Jasmine Flower')
}
}
After you create the external JavaScript fi le, defi ne empty functions for each
function that is contained in the external JavaScript fi le, and reference the
external JavaScript file in the src attribute of the <script> tag, you're all set.
4) Concealing E-mail address:
Many of us have endured spam at some point and have probably blamed
every merchant we ever patronized for selling our e-mail address to
spammers. While e-mail addresses are commodities, it's likely that we
ourselves are the culprits who invited spammers to steal our e-mail
addresses.
Here's what happens: Some spammers create programs called bots that surf
the Net looking for e-mail addresses that are embedded into web pages, such
as those placed there by developers to enable visitors to contact them. The
bots then strip these e-mail addresses from the web page and store them for
use in a spam attack.
This technique places developers between a rock and a hard place. If they
place their e-mail addresses on the web page, they might get slammed by
spammers. If they don't display their e-mail addresses, visitors will not be able
to get in touch with the developers.
The solution to this common problem is to conceal your e-mail address in the
source code of your web page so that bots can't fi nd it but so that it still
appears on the web page. Typically, bots identify e-mail addresses in two
ways: by the mailto: attribute that tells the browser the e-mail address to use
when the visitor wants to respond to the web page, and by the @ sign that is
required of all e-mail addresses. Your job is to confuse the bots by using a
JavaScript to generate the e-mail address dynamically. However, you'll still
need to conceal the e-mail address in your JavaScript, unless the JavaScript
is contained in an external JavaScript file, because a bot can easily recognize
the mailto: attribute and the @sign in a JavaScript.
Bots can also easily recognize when an external fi le is referenced. To
conceal an e-mail address, you need to create strings that contain part of the
e-mail address and then build a JavaScript that assembles those strings into
the e-mail address, which is then written to the web page.
The following example illustrates one of many ways to conceal an e-mail
address.
It also shows you how to write the subject line of the e-mail. We begin by
creating four strings:
• The first string contains the addressee and the domain along with symbols &,
*, and _ (underscore) to confuse the bot.
• The second and third strings contain portions of the mailto: attribute name.
Remember that the bot is likely looking for mailto:.
• The fourth string contains the subject line. As you'll recall from your HTML
training, you can generate the TO, CC, BCC, subject, and body of an e-mail from
within a web page. You then use these four strings to build the e-mail address. This
process starts by
using the replace() method of the string object to replace the & with the @
sign and the * with a period (.). The underscores are replaced with nothing,
which is the same as simply removing the underscores from the string.
All the strings are then concatenated and assigned to the variable b, which is
then assigned the location attribute of the window object. This calls the e-mail
program on the visitor's computer and populates the TO and Subject lines
with the strings generated by the JavaScript.
<html>
<head>
<title>Conceal Email Address</title>
<script>
function CreateEmailAddress(){ var x = manish*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="Help" onclick="CreateEmailAddress()">
</body>
</html>

9. Create a slideshow with the group of three images, also simulate next and
previous transition between slides in your Java Script
Ans:
<html>
<head> <script>
pics = new Array('1.jpg' , '2.jpg' , '3.jpg'); count = 0;
function slideshow(status)
{
if (document.images)
{
count = count + status; if (count > (pics.length - 1))
{
count = 0;
}
if (count < 0)
{
count = pics.length - 1;
}
documet.imag1.src = pics[count];
}}
</script>
</head>
<body>
<img src="1.jpg" width="200" name="img1">
<br>
<input type="button" value="Next" onclick="slideshow(1)">
<input type="button" value="Back" onclick="slideshow(-1)">
</body>
</html>

10. Explain text rollover with suitable example.


Ans:
You create a rollover for text by using the onmouseover attribute of the <A>
tag ,which is the anchor tag. You assign the action to the onmouseover
attribute the same way as you do with an <IMG> tag.
Let's start a rollover project that displays a flower titles. Additional information
about a flower can be displayed when the user rolls the mouse cursor over
the flower name. In this example, the image of the flower is displayed.
However, you could replace the flower image with an advertisement or
another message that you want to show about the flower.
<html>
<head>
<title>Rollover Text</title>
</head>
<body>
<TABLE width="100%" border="0">
<TBODY>
<TR vAlign="top">
<TD width="50">
<a>
<IMG height="92" src="rose.jpg" width="70" border="0" name="cover">
</a>
</TD>
<TD>
<IMG height="1" src="" width="10">
</TD>
<TD>
<A onmouseover= "document.cover.src='sunflower.jpg'">
<B><U>Sunflower</U></B>
</A>
<BR>
<A onmouseover=
"document.cover.src='jasmine.jpg'">
<B><U>Jasmine</U></B>
</A>
<BR>
<A onmouseover=
"document.cover.src='rose.jpg'">
<B><U>Rose</U></B>
</A>
</TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>

11. Write a javascript to create option list containing list of images and then
display images in new window as per selection.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Image Selection</title>
<style>
body {
font-family: Arial, sans-serif;
}
select {
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<h1>Select an image to view:</h1>
<!-- Dropdown menu to select image -->
<select id="imageSelect" onchange="openImageWindow()">
<option value="">--Select Image--</option>
<option
value="https://via.placeholder.com/150/0000FF/808080?text=Image+1">I
mage 1</option>
<option
value="https://via.placeholder.com/150/FF5733/FFFFFF?text=Image+2">I
mage 2</option>
<option
value="https://via.placeholder.com/150/32CD32/FFFFFF?text=Image+3">
Image 3</option>
<option
value="https://via.placeholder.com/150/FFD700/FFFFFF?text=Image+4">I
mage 4</option>
</select>

<script>
// Function to open the selected image in a new window
function openImageWindow() {
var imageUrl = document.getElementById('imageSelect').value;
if (imageUrl) {
// Open new window with the image
var imageWindow = window.open("", "_blank", "width=500,
height=500");
imageWindow.document.write("<img src='" + imageUrl + "'
alt='Selected Image' style='width: 100%; height: auto;'>");
}
}
</script>
</body>
</html>

12. Write a JavaScript program that will remove the duplicate element from an
array.
Ans:
<html>
<body> <script>
function merge_array(array1, array2)
{
var result_array = []; var arr = array1.concat(array2); var len = arr.length;
var assoc = {}; while(len--)
{
var item = arr[len]; if(!assoc[item])
{
result_array.unshift(item); assoc[item] = true;
}
}
return result_array;
}
var array1 = [1, 2, 3,4,7,9];
var array2 = [2, 30, 1,40,9]; document.write(merge_array(array1, array2));
</script>
</body>
</html> Output:
3,4,7,2,30,1,40,9
OR
<html>
<body> <script> function mergearr(arr1, arr2)
{
// merge two arrays var arr = arr1.concat(arr2); var uniqueArr = []; // loop
through array for(var i of arr) { if(uniqueArr.indexOf(i) === -1)
{
uniqueArr.push(i);
}
}
document.write(uniqueArr);
}
var array1 = [1, 2, 3,6,8]; var array2 = [2, 3, 5,56,78,3] mergearr(array1,
array2);
</script>
</body>
</html> Output:
1,2,3,6,8,5,56,78

13. Write HTML script that will display dropdown list containing options such
as Red, Green, Blue and 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>

Fy-Dip [LIVE] (Sem 2) : 4999/- BUY NOW | Sy-Dip [LIVE] (Sem 3 + 4) : 4999/- BUY NOW
Ty-Dip [LIVE] (Sem 3 + 4) : 4999/- BUY NOW | APP Free Content : CHECK NOW
YOUTUBE : CHECK NOW INSTA : FOLLOW NOW | Contact No : 9326050669 /93268814281
SY DIP WHATSAPP Group : JOIN GROUP 1 JOIN GROUP 2 | ALL FREE CONTENT : CHECK NOW

V2V EdTech LLP | ALL IMPORTANT Board Questions

14. Describe Quantifiers, Meta characters with the help of example.


Ans: The frequency or position of bracketed character sequences and single characters
can be denoted by a special character. Each special character has a specific
connotation.
The +, *, ?, and $ flags all follow a character sequence.
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>

Metacharacters

A metacharacter is simply an alphabetical character preceded by a backslash that acts


to

Give the combination a special meaning.

For instance, you can search for a large sum of money using the ‘\d’ metacharacter:

/([\d]+)000/, Here \d will search for any string of numerical character.


The following table lists a set of metacharacters which can be used in PERL Style
Regular

Expressions.

Sr.No. Character & Description

. (dot)

A single character

\s

A whitespace character (space, tab, newline)

\S

Non-whitespace character

\d

A digit (0-9)

\D

A non-digit

\w

A word character (a-z, A-Z, 0-9, _)

\W

A non-word character

[\b]
A literal backspace (special case).

9 [aeiou]
Matches a single character in the given set

10

[^aeiou]

Matches a single character outside the given set

11

(foo|bar|baz)

Matches any of the alternatives specified

15. Describe frameworks of JavaScript & its application.


Ans:
Frameworks of JavaScript:
1. ReactJs
React is based on a reusable component. Simply put, these are code blocks
that can be
classified as either classes or functions. Each component represents a
specific part of a
page, such as a logo, a button, or an input box. The parameters they use are
called props, which stands for properties.
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:
1. 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

16. Develop a JavaScript program to create Rotating Banner Ads with URL.
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>
17. How to read, write and delete cookie in javascript? Explain with example.
Ans:
Read a Cookie with JavaScript
With JavaScript, cookies can be read like this: var x = document.cookie; Write a
Cookie with JavaScript
You can access the cookie like this which will return all the cookies saved for the
current domain. document.cookie=x;
Example:
<html>
<head> <script> function writeCookie()
{ with(document.myform)
{ document.cookie="Name=" + person.value + ";" alert("Cookie written");
}
} function readCookie()
{ var x; if(document.cookie=="") x=""; else x=document.cookie;
document.write(x);
}
</script>
</head>
<body>
<form name="myform" action="">

Enter your name:


<input type="text" name="person"><br>
<input type="Reset" value="Set
Cookie" type="button"
onclick="writeCookie()"> Cookie" type="button"
<input type="Reset" value="Get
onclick="readCookie()">
</form>
</body>
</html>

<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>
<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>

18. What is status bar? How to create status bar in Javascript.


Ans:
The status property of the Window interface was originally intended to set the
text in the status bar at the bottom of the browser window. However, the
HTML standard now requires setting window.status to have no effect on the
text displayed in the status bar.
Syntax:
window.status = string; var value = window.status;

<html>
<head>
<title>JavaScript Status Bar</title></head>
<body>
<a href="http://www.v2v.edu.in" onMouseOver="window.status='Vision to
Victroy';return true" onMouseOut="window.status='';return true">
Vision 2 Victory
</a>
</body>
</html>

19. What is context menu? How to create it? Explain with example.
Ans:
When we click the right mouse button on our desktop, a menu-like box
appears and this box is called the context menu. In JavaScript, a context
menu event runs when a user tries to open a context menu. This can be done
by clicking the right mouse button.

Example:
<html>
<head> <style>
div {
background: yellow; border: 1px solid black; padding: 10px;
}
</style>
</head>
<body>

<div contextmenu="mymenu">
<p>Right-click inside this box to see the context menu!

<menu type="context" id="mymenu">


<menuitem label="Refresh" onclick="window.location.reload();"
icon="ico_reload.png"></menuitem>
<menu label="Share on...">
<menuitem label="Twitter" icon="ico_twitter.png"
onclick="window.open('//twitter.com/intent/tweet?text=' +
window.location.href);"></menuitem>
<menuitem label="Facebook" icon="ico_facebook.png"
onclick="window.open('//facebook.com/sharer/sharer.php?u=' +
window.location.href);"></menuitem>
</menu>
<menuitem label="Email This Page"
onclick="window.location='mailto:?body='+window.location.href;"></men
uitem>
</menu>

</div>

<p>This example currently only works in Firefox!</p>

</body> </html>

20. Write a javascript program to validate emailID, pincode, phone of the user
using regular expression.

Html lang=”en”>

<head>
<meta charset=”UTF-8”>

<meta name=”viewport” content=”width=device-width, initial-


scale=1.0”>

<title>Form Validation</title>

</head>

<body>

<h2>User Information Validation</h2>

<form id=”userForm”>

<label for=”email”>Email ID:</label><br>

<input type=”text” id=”email” name=”email”><br><br>

<label for=”pincode”>Pincode:</label><br>

<input type=”text” id=”pincode” name=”pincode”><br><br>

<label for=”phone”>Phone Number:</label><br>

<input type=”text” id=”phone” name=”phone”><br><br>

21. Write a HTML script which displays 2 radio buttons to the users for fruits
and vegetables and 1 option list. When user select fruits radio button
option list should present only fruits names to the user & when user select
vegetable radio button option list should present only vegetable names to
the user.

Ans:
<head>
<title>HTML Form</title>
<script language="javascript" type="text/javascript"> function
updateList(ElementValue)
{
with(document.forms.myform)
{
if(ElementValue == 1)
{
optionList[0].text="Mango"; optionList[0].value=1; optionList[1].text="Banana";
optionList[1].value=2; optionList[2].text="Apple"; optionList[2].value=3;
}
if(ElementValue == 2)
{
optionList[0].text="Potato"; optionList[0].value=1;
optionList[1].text="Cabbage"; optionList[1].value=2;
optionList[2].text="Onion"; optionList[2].value=3;
}}
}
</script>
</head>
<body>
<form name="myform" action="" method="post">
<p>
<select name="optionList" size="2">
<option value=1>Mango
<option value=2>Banana
<option value=3>Apple
</select>
<br>
<input type="radio" name="grp1" value=1 checked="true"
onclick="updateList(this.value)">Fruits <input type="radio" name="grp1"
value=2 onclick="updateList(this.value)">Vegetables
<br>
<input name="Reset" value="Reset" type="reset">
</p>
</form>
</body>
</html>

22. Write a script for creating following frame structure FRUITS, FLOWERS
AND CITIES are links to the webpage fruits.html, flowers.html, cities.html
respectively. When these links are clicked corresponding data appears in
FRAME 3.
Ans:
<html>
<head>
<title>Frame Demo</title>
</head>
<body>
<table border="1">
<tr>
<td align="center" colspan="2">
FRAME 1
</td>
</tr>
<tr>
<td>
FRAME 2
<ul>
<li>
<a href="fruits.html" target="mainframe">FRUITS</a>
</li>
<li>
<a href="flowers.html" target="mainframe">FLOWERS</a>
</li>
<li>
<a href="cities.html" target="mainframe">CITIES</a>
</li>
</ul>
</td>
<td>
FRAME 3<BR>
<iframe name="mainframe"></iframe>
</td>
</tr>
</table> </body>
</html>

23. Write a javascript to create a pull-down menu with three options [Google,
MSBTE, Yahoo] once the user will select one of the options then user will
be redirected to that site.
Ans:
<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.yahoo.com">Yahoo</option>
</form>
</body>
</html>
24. 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>

25. Write a javascript to checks whether a passed string is palindrome or not.


Ans:
<script>
// program to check if the string is palindrome or not function
checkPalindrome(string)
{
// convert string to an array
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');
}

Fy-Dip [LIVE] (Sem 2) : 4999/- BUY NOW | Sy-Dip [LIVE] (Sem 3 + 4) : 4999/- BUY NOW
Ty-Dip [LIVE] (Sem 3 + 4) : 4999/- BUY NOW | APP Free Content : CHECK NOW
YOUTUBE : CHECK NOW INSTA : FOLLOW NOW | Contact No : 9326050669 /93268814282
SY DIP WHATSAPP Group : JOIN GROUP 1 JOIN GROUP 2 | ALL FREE CONTENT : CHECK NOW

You might also like