Super 25 Css
Super 25 Css
Super 25 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",
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>
concat() join()
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
</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.
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>
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
Metacharacters
For instance, you can search for a large sum of money using the ‘\d’ metacharacter:
Expressions.
. (dot)
A single character
\s
\S
Non-whitespace character
\d
A digit (0-9)
\D
A non-digit
\w
\W
A non-word character
[\b]
A literal backspace (special case).
9 [aeiou]
Matches a single character in the given set
10
[^aeiou]
11
(foo|bar|baz)
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="">
<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>
<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!
</div>
</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”>
<title>Form Validation</title>
</head>
<body>
<form id=”userForm”>
<label for=”pincode”>Pincode:</label><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>
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