1.
Write
using JavaScript: how to know which mouse button was clicked, number of
elements in form, and write hello world.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Title of the Page</title>
<script language="JavaScript">
document.write("hello world");
function message(element)
{
alert("You clicked the " + element +
" element!");
}
function myFunction() {
alert("hello");
var x =
document.frm.length;
alert(x);
}
</script>
</head>
<body>
<form name="frm">
<input type="radio"
name="Radio" onClick="message('Radio Button 1')">Option
1<br>
<input type="radio"
name="Radio" onClick="message('Radio Button 2')">Option
2<br>
<input type="checkbox"
onClick="message('Check Button')">Check Button<br>
<input type="submit"
value="Send" onClick="message('Send Button')">
<input type="reset"
value="Reset" onClick="message('Reset Button')">
<input type="button"
value="Mine" onClick="message('My very own Button')">
<input type="submit" value="no of
ele" onclick="myFunction()" />
</form>
</body>
</html>
2.
Differentiate
between server side and client side scripting languages. Write HTML and
JavaScript to take input for loginname, password, birthdate, email address,
phone no. and validate them.
Refer
form validation program.
3.
Write
an HTML file with Javascript that finds position of first occurrence of vowel
“a”, last occurrence of vowel “a” in a given word and returns the string
between them. For example, ajanta- then script would return first occurrence of
“a”-that is position 1 and last occurrence-6 and string between them is “jant”.
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled
Document</title>
<script
type="text/javascript">
var str=prompt("enter
string");
var strlen=str.length;
alert(strlen);
var frstletter = str.charAt(0);
var lastletter =
str.charAt(strlen);
alert(frstletter);
if(frstletter=='a' ||
lastletter=='a' )
{
document.write("string
is in proper format");
}
for(var index = 0;index < strlen;index++)
{
if(str.charAt(index)!='a'
&& str.charAt(strlen)!='a' )
{
var
str1 = str.charAt(index);
alert(str1);
document.write("<br/>"+str1);
}
}
</script>
</head>
<body>
</body>
</html>
4. Write a JavaScript that handles following mouse events.
Add necessary elements. (i) If findtime button is clicked show time and date
information. (ii) If button named “red”
is clicked, background should change to red and If button named “green” is
clicked, background should change to green.
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled
Document</title>
<script
type="text/javascript">
function
showdttime()
{
document.getElementById("demo").innerHTML
= Date();
}
function
changebackground(val)
{
if(val=='red')
{
document.body.style.background="red";
}
else if(val=='green')
{
document.body.style.background="green";
}
}
</script>
</head>
<body>
<p
id="demo"></p>
<input
type="button" onclick="showdttime()"
value="finddatetime" />
<input
type="button" id="rbtn"
onclick="changebackground('red')" value="redbutton"/>
<input
type="button"
id="gbtn"onclick="changebackground('green')"
value="greenbutton"/>
</body>
</html>
5. Write a JavaScript that handles following mouse events.
Add necessary elements. (i) JavaScript gives the key code for the key pressed.
(ii) If the key pressed is “a”,”e”,”i”,”o”,”u”, the script should announce that
vowel is pressed. (iii) When the key is released background should change to
blue.
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
window.onkeyup = changebgcolor;
function myKeyPress(e){
var keynum;
if(window.event){ // IE
keynum
= e.keyCode;
}else
if(e.which){ // Netscape/Firefox/Opera
keynum
= e.which;
}
var char1=String.fromCharCode(keynum);
//for vovel
if(char1=='a' || char1=="e" ||
char1=='i' || char1=='o' || char1=='u')
{
alert("you
have pressed vovel");
}
alert("you
pressed "+char1 +" & keycode for that is "+ keynum);
}
function changebgcolor()
{
document.getElementById("txt1").style.backgroundColor
= "blue";
}
</script>
</head>
<body>
<form>
<input type="text" id="txt1"
onkeyup="changebgcolor()"
onkeypress="myKeyPress(event)"/>
</form>
</body>
</html>
6.
Write a
JAVAScript to print characters of a string at odd positions.(for example for
the string India, I, d and a should get printed).
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled
Document</title>
<SCRIPT
language="JavaScript">
var
yourname=prompt('Enter your name, NOW!','');
var mychar, value;
for (var i=1;
i<=yourname.length; i++)
{
// Modulo operator (%) - returns remainder
when divide by
if (i % 2 == 1)
{
// Odd
mychar = yourname.charAt(i-1);
alert(mychar + '...... available at odd
position :.... ' + i);
}
}
</SCRIPT>
</head>
<body>
</body>
</html>
7.
(ii) Write a JAVAScript to take 2 digit number
and then separate these 2 digits, then multiply first digit by itself for
second digit times.( for example, 23 should be separated as 2 and 3. 2 should
multiply with itself 3 times).
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled
Document</title>
<script
type="text/javascript">
//var num=
var
num=parseInt(prompt(("enter no")));
var rem=num%10;
document.write("you
have entered:" + num +"<br/>")
var quat=parseInt(num/10);
var result=Math.pow(quat, rem);
document.write(quat+" power of
"+rem+" = "+ result);
</script>
</head>
<body>
</body>
</html>
8. Write a JavaScript that uses function to calculate how
many days are left in your birthday?
<html>
<head>
<title>(Type a title for your page here)</title>
<script type="text/javascript">
var month = parseInt(prompt("enter your birth month
(1-12)","") - 1);
var day = parseInt(prompt("enter your birth day(1-31)",
""));
var birthday = new Date();
var currentdate = new Date();
var one_day=1000*60*60*24;
birthday.setDate(day);
birthday.setMonth(month);
birthday = birthday.getTime();
currentdate = currentdate.getTime();
var theDate = birthday - currentdate;
document.write(theDate+"<br/>");
theDate = (theDate / one_day);
document.write("days left are " + theDate.toFixed(0) + " in
your birthday ");
</script>
</head>
</html>
9.
Write a
JavaScript, that uses a loop, that searches a word in sentence held in an
array, returning the index of the word.
<html>
<head>
<title>Untitled
Document</title>
</head>
<body>
<script
type="text/javascript">
var str =
prompt("enter string");
var
srchword=prompt("enter word to search in string");
var copyword=0;
var temp = new
Array();
temp =
str.split(" ");
alert(temp.length);
for (var i = 0;i
< temp.length; ++i)
{
if(srchword.match(temp[i]))
{
copyword=srchword.match(temp[i]);
var pos = temp.indexOf(srchword);
document.write(srchword+" found
in your array at "+ pos +" position" );
copyword=-1;
}
}
if(copyword==0)
{
document.write(srchword+" not
found in your array");
}
</script>
</body
onload=containsAny()>
</html>
10. Show the use of events for the following with
example. (i) Trap the exiting of the user from a page. (ii) Show the heading.
When the mouse is over the heading the background color should be yellow and
when the mouse goes out of the heading, color should change to black.
Ans.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled
Document</title>
<script
language="JavaScript">
window.onbeforeunload = confirmExit;
function confirmExit()
{
return "You have attempted to leave
this page. If you have made any changes
to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this
page?";
}
function over()
{
document.getElementById("head1").style.backgroundColor="yellow";
}
function out()
{
document.getElementById("hid").style.color="white";
document.getElementById("head1").style.backgroundColor="black";
}
</script>
</head>
<body>
<div
id="head1"><h1 id="hid" onmouseover="over()"
onmouseout="out()" >This is heading1 style.</h1></div>
</body>
</html>
11. Write an HTML and JavaScript program which accepts N as
input and displays first N Fibonacci numbers as list.
Ans. <HTML>
<HEAD>
<TITLE>Fibonacci
series by Kashid</TITLE>
<script>
function display()
{
var n=parseInt(frm.t1.value)
var a=0,b=1,c=0,s=" ";
while((a+b)<=n)
{
c=a+b;
s=s+c+ " , ";
b=a;
a=c;
}
alert("Fibonacci
Series: "+s)
}
</script>
</HEAD>
<BODY>
<form name=frm>
<input type=text
name=t1>
<input
type=button name=b1 onclick="display();" value="fibonacci
series">
</form>
</BODY>
</HTML>
12. Design an login form using HTML and JavaScript with
following validations on password field : minimum length 8 characters, it
should have some special character.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript form validation - Password
Checking - 3</title>
</head>
<body>
<h2>Input Password and Submit [7 to 16
characters which contain numeric digit,character and a special
character]</h2>
<form name="form1"
action="#">
enter Usernamr:<input type='text'
name='text2'/><br/><br/>
enter password:<input type='password'
name='text1'/><br/><br/>
<input type="submit"
name="submit" value="Submit" onclick="CheckPassword(document.form1.text1)"/>
</form>
<script type="text/javascript">
function CheckPassword(inputtxt)
{
var
minNumberofChars = 7;
var
maxNumberofChars = 16;
var
regularExpression =
/^[a-zA-Z0-9!@#$%^&*.-_]{7,16}$/;
if(inputtxt.value.match(regularExpression))
{
alert('password is correct') ;
return true;
}
else
{
alert('must enter number,char,spacial
character.')
return false;
}
}
</script>
</body>
</html>
