You are on page 1of 35

SWE1008 – Web Technologies

JAVASCRIPT

Challenging cycle Sheet

NAME: B.NIKHILA

REG.NO:15MIS0429

SLOT: L9+10

FACULTY: JAYAKUMAR S
Question 1:

According to Wikipedia a happy number is defined by the following process : "Starting


with any positive integer, replace the number by the sum of the squares of its digits, and
repeat the process until the number equals 1 (where it will stay), or it loops endlessly in a
cycle which does not include 1. Those numbers for which this process ends in 1 are happy
numbers, while those that do not end in 1 are unhappy numbers (or sad numbers).Write
a JavaScript program to find and print the first 5 happy numbers.

Answer:
<html>
<head>
<title>Happy Number</title>
<script type="text/javascript"> function happy_num(form)
{
var num=form.hapnum.value; calc(num);
}
function calc(no)
{
var res=0,temp,count=0; while(no!==0)
{
temp=parseInt(no%10); temp*=temp; no=parseInt(no/10); res+=temp;
}
if(res<10)
{
if(res===1) count=1;
else
count=2;
}
if(count===1)
{
document.getElementById("p1").innerHTML="Is a happy no.";
}
else if(count===2)
document.getElementById("p1").innerHTML="Is not a happy no.";
else
calc(res);
}
</script>
</head>
<body>
<form>
<input type="number" name="hapnum">
<input type="button" value="Find" onclick="happy_num(this.form);">
</form>
<p id="p1"></p>
</body></html>

OUTPUT:
QUESTION-2
Design a HTML page to generate an image slide show using JavaScript. First input all the
images (minimum of 5 images) you want to add to the slideshow. Add a button to start the
slideshow. Repeatedly starting from the first to last, display each image for 5 seconds and
then display the next image. Add two buttons to view the previous and next image.

CODE:
<!DOCTYPE html>
<html>
<head>
<title>"Image Slider"</title>
<style>
.as{
margin-top:300px;
float:left;
height:50px;
}
img{
float:left;
margin-top:10px;
margin-right:10px;
margin-left:10px;
}
</style>
</head>
<body>
<label>Enter the image path: </label><input id="op" type="text" size = 20px > <button
onclick="addimg()"> Add Image </button> <button onclick="sart()">Start slide show
</button><br>
<button class="as">Prev</button>
<img id="slider" src="a.png" width="400px" height="400px">
<button class="as">Next</button>
<script>
var imgs = ['a.png'];
var num=0;
function addimg()
{
var im = document.getElementById("op");

var scri = im.value;


var len = imgs.length;
imgs[len] = scri ;
alert(imgs.length);
}
function next()
{
var slide = document.getElementById("slider");
num++;
if ( num >= imgs.length )
{
num=0;
}
slide.src = imgs[num];
}
function prev()
{
var sl = document.getElementById("slider");
num--;
if (num <0)
{
num = imgs.length-1;
}
sl.src=imgs[num];
}
function sart(){
setInterval(next,5000);}
</script>
</body>
</html>
OUTPUT:

QUESTION-3
Develop an Online Greetings Designer using JavaScript and CSS.
Add options to
i) Change the image
ii) Position the image(left,background,right)
iii)Edit text
iv)Change font size
v)Change font color

CODE:
<html>
<head>
<title>Greeting Card</title>
<style>
#main
{
background-image:url('');
height:700px;
width:600px;
border:5px double red;
background-color:#65d396;
margin-left:250px;
margin-top:20px;
position:absolute;
}
#imga
{
position:absolute;
top:105px;
left:85px;
height:440px;
width:420px;
border:2px solid black;
}
#content{
position:absolute;
top:25px;
left:190px;
}
#person{
position:absolute;
top:55px;
left:255px;
}
#msg{
position:absolute;
bottom:10px;
left:80px;
width:420px;
height:100px;
border:2px solid black;
}
#change{
width:350px;
height:680px;
position:absolute;;
top:130px;
right:25px;
border:4px dashed blue;
padding:15px;
}
#head{
background-color:yellow;
border:2px dashed blue;
text-align:center;
margin-top:25px;
}
</style>
</head>
<body>
<div id=head>
<h1>ONLINE GREETING GENRATOR </h1>
</div>
<div id="main">
<span id=content>HAPPY BIRTHDAY </span>
<span id=person>RAJESH</span>
<div id="imga">
<img id="kl" src="file:///F:/studies/fall%20sem%2017-18/swe1008/notepad++/cake.jpg" width=420px
height=440px >
</div>
<div id=msg>
<p id="bmsg"></p>
</div>
</div>
<div id=change>
<h2>DESIGN YOUR GREETING</h2>
url:<input type="text" id ="ur" size=25 >
<button onclick="im()" >change image</button>
<button onclick="document.getElementById('kl').src='flower.png'" >back</button><br>
<h3>Position Image </h3>
<button onclick="document.getElementById('imga').style.left='20px'" >Left</button>
<button onclick="document.getElementById('imga').style.left='85px'" >center</button>
<button onclick="document.getElementById('imga').style.left='140px'" >Right</button><br>
background url :<input type="text" id="lp" size=25"><br>
<button type="button" onclick="BACKGR()" >Background Image</button><br>
Background color:<input type="color" id="fg"><button type="button"
onclick="backcolor()">Change</button><br><br>
Edit Greeting:<br>
<button type="button" onclick="editText()" >Edit Greeting</button><br>
<button type="button" onclick="e1()">Edit Title </button><br>
<button type="button" onclick="e2()">Edit Name </button><br>
<button type="button" onclick="e3()">Write Message </button><br><br>
Change size:<br>
<button type="button" onclick="s1()">Change title size </button><br>
<button type="button" onclick="s2()">Change name size </button><br>
<button type="button" onclick="s3()">Change message size</button><br><br>
Your color<br> <input type="color" id="pc"><button type="button" onclick="cl()">Change
Title</button><br>
<input type="color" id="pc1"><button type="button" onclick="cl1()">Change Name</button><br>
<input type="color" id="pc2"><button type="button" onclick="cl2()">Change
Message</button><br><br>
<script>
function im(){
var u = document.getElementById('ur');
var y =u.value;
document.getElementById('kl').src=y;
}
function cl(){
var t = document.getElementById('pc');
var c = t.value;
document.getElementById('content').style.color=c;
}
function cl1(){
var t = document.getElementById('pc1');
var c = t.value;
document.getElementById('person').style.color=c;
}
function cl2(){
var t = document.getElementById('pc2');
var c = t.value;
document.getElementById('bmsg').style.color=c;
}
function BACKGR(){
var t =document.getElementById('lp');
var u = t.value;
document.getElementById('main').style.backgroundImage=u;
}
function backcolor()
{
var t =document.getElementById('fg');
var u = t.value;
document.getElementById('main').style.backgroundColor=u;
}
function editText()
{
var kl = prompt("Enter the title of the greeting");
var nm = prompt("Enter the name of the person");
var msge = prompt("Enter the message for the greeting");
document.getElementById('content').innerHTML=kl;
document.getElementById('person').innerHTML=nm;
document.getElementById('bmsg').innerHTML=msge;
}
function e1(){
var kl = prompt("Enter the title of the greeting");
document.getElementById('content').innerHTML=kl;
}
function e2(){
var nm = prompt("Enter the name of the person");
document.getElementById('person').innerHTML=nm;
}
function e3(){
var msge = prompt("Enter the message for the greeting");
document.getElementById('bmsg').innerHTML=msge;
}
function s1(){
var jk=prompt("Enter the size title of the greeting");
document.getElementById('content').style.fontSize= jk;
}
function s2(){
var jk=prompt("Enter the size of name");
document.getElementById('person').style.fontSize= jk;
}
function s3(){
var jk=prompt("Enter the size of message");
document.getElementById('bmsg').style.fontSize= jk;
}
</script>
</div>
</body>
</html>

OUTPUT:
QUESTION-4
Design an online Resume Generator using HTML and Javascript. Design a HTML page where the
user can input his personal, academic and experience details. Using Javascript generate the
formatted resume.

CODE:
<html>
<head>
<title>Online Resume</title>
<script type="text/javascript"> function validate(form)
{
var na=form.username.value; var add=form.add.value;
var email=form.email.value; var mobile=form.phone.value; var edu=form.edu.value;
var aof=form.aof.value; var skill=form.skills.value;
var award=form.awards.value;
if((na==="")||(add==="")||(email==="")||(mobile==="")||(edu==="")||(aof==="")||(skill="")||(awar d=""))
alert("Invalid details");
}
</script>
</head>
<body>
<h1 align="center">Online Resume Generator</h1><br><br>
<form method="post" action="Insert.php">
<table align="center" cellpadding="5">
<tr><td>Name:</td>
<td><input type="text" name="username"></td>
</tr>
<tr><td>Address:</td>
<td><textarea name="add" rows="5" cols="22"></textarea></td>
</tr>
<tr><td>Email ID:</td>
<td><input type="text" name="email"></td>
</tr>
<tr><td>Mobile No:</td>
<td><input type="number" name="phone"></td>
</tr>
<tr><td>Educational Qualification:</td>
<td><input type="text" name="edu"></td>
</tr>
<tr><td>Area of Interest:</td>
<td><input type="text" name="aof"></td>
</tr>
<tr><td>Skills:</td>
<td><input type="text" name="skills"></td>
</tr>
<tr><td>Awards:</td>
<td><input type="text" name="awards"></td>
</tr>
<tr><td></td>
<td><input type="submit" value="Post"
onclick="validate(this.form)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="Reset"></td>
</tr>
</table>
</form>
</body>
</html>
Php File:
<?php
$db= mysqli_connect("localhost", "root", "", "hackathon") or die('Error Connecting Database');
$name= htmlspecialchars($_POST["username"]);
$add= htmlspecialchars($_POST["add"]);
$email= htmlspecialchars($_POST["email"]);
$mobile= htmlspecialchars($_POST["phone"]);
$edu= htmlspecialchars($_POST["edu"]);
$aof= htmlspecialchars($_POST["aof"]);
$skills= htmlspecialchars($_POST["skills"]);
$awards= htmlspecialchars($_POST["awards"]);
$query="INSERT INTO Resume
VALUES('$name','$add','$email','$mobile','$edu','$aof','$skills','$awards')"; mysqli_query($db, $query)
or die('Error Inserting'); echo "Name is: ".$name."<br>"; echo "Address is: ".$add."<br>";
echo "Email IDis: ".$email."<br>"; echo "Phone No. is: ".$mobile."<br>";
echo "Educational Qualification is: ".$edu."<br>"; echo "Area of Interest is: ".$aof."<br>";
echo "Skills is: ".$skills."<br>"; echo "Awards is: ".$awards."<br>";
OUTPUT:

Question 5:
A parking garage charges a $2.00 minimum fee to park for up to three hours. The garage charges
an additional $0.50 per hour for each hour or part thereof in excess of three hours. The maximum
charge for any given 24-hour period is $10.00.
Assume that no car parks for longer than 24 hours at a time. Write a script that calculates and
displays the parking charges for each customer who parked a car in this garage yesterday. You
should input from the user the hours parked for each customer. The program should display the
charge for the current customer and should calculate and display the running total of yesterday's
receipts. The program should use the function calculate-Charges to determine the charge for each
customer. Use a text input field to obtain the input from the user.
CODE:

<html>
<head>
<title>Parking Charges</title>
<script type="text/javascript"> var total=0;
function calculate_charges(form)
{
var hour=form.hours.value; var charges=2; if(hour<=24&&hour>3)
{
hour*=0.5; charges+=hour; total+=charges;
document.getElementById("p1").innerHTML="Charges is"+charges+"Total Charges are: "+total;
}
else
{
total+=charges;
document.getElementById("p1").innerHTML="Charges is: "+charges+" Total Charges are: "+total;
}
}
</script>
</head>
<body>
<form>
Enter the no. of hours:<input type="number" name="hours">
<input type="button" value="Calculate" onclick="calculate_charges(this.form);">
<p id="p1"></p>
</form>
</body>
</html>
OUTPUT:
Question 6:
Create a script that uses regular expressions to validate credit card numbers. Major credit card
numbers must be in the following formats:

 American Express—Numbers start with 34 or 37 and consist of 15 digits.


 Diners Club—Numbers begin with 300 through 305, or 36 and 38 and consists
of 14 digits
 Discover—Numbers begin with 6011 or 65 and consist of 16 digits.
 JCB—Numbers beginning with 2131 or 1800 consist of 15 digits, while
numbers beginning with 35 consist of 16 digits.
 MasterCard—Numbers start with the numbers 51 through 55 and consist of 16
digits.
 Visa—Numbers start with a 4; new cards consist of 16 digits and old cards consist
of 13 digits.

CODE:

<html>
<head>
<title>Validate Credit Card</title>
<script type="text/javascript"> function validate(form)
{
var count=0;
var temp;
var name=form.cardname.value; var number=form.number.value;
if(name.localeCompare("American Express")===0)
{
if(number.length===15)
{
temp=parseInt(number/10000000000000); if((temp===34)||(temp===37))
count++;
}
}
else if(name.localeCompare("Diners Club")===0)
{
if(number.length===14)
{
temp=parseInt(number/1000000000000); if((temp===36)||(temp===38))
count++; temp=parseInt(number/100000000000); if((temp>=300)&&(temp<=305))
count++;

}
}
else if(name.localeCompare("JCB")===0)
{
if(number.length===15)
{
temp=parseInt(number/100000000000); if((temp===2131)||(temp===1800))
count++;
}
else if(number.length===16)
{
temp=parseInt(number/100000000000000); if(temp===35)
count++;
}
}
else if(name.localeCompare("Discover")===0)
{
if(number.length===16)
{
temp=parseInt(number/1000000000000); if(temp===6011)

count++; temp=parseInt(number/100000000000000); if(temp===65)


count++;
}
}
else if(name.localeCompare("Master Card")===0)
{
if(number.length===16)
{
temp=parseInt(number/100000000000000); if((temp>=51)&&(temp<=55))
count++;
}
}
else if(name.localeCompare("Visa")===0)
{
if(number.length===13)
{
temp=parseInt(number/1000000000000); if(temp===4)
count++;
}
else if(number.length===16)
{
temp=parseInt(number/1000000000000000); if(temp===4)
count++;
}
}
if(count===0) document.getElementById("p1").innerHTML="Invalid Credit Card"; else
document.getElementById("p1").innerHTML="Valid Credit Card"; count=0;
}
</script>
</head>
<body>
<form>
<h2 align="center">Validate Credit Cards</h2>
Credit Card:<select name="cardname" ><option value="American Express">American
Express</option>
<option value="Diners Club">Diners Club</option>
<option value="Discover">Discover</option>
<option value="JCB">JCB</option>
<option value="Master Card">Master Card</option>
<option value="Visa">Visa</option></select><br> Number:<input type="number"
name="number"><br>
<input type="button" value="Validate" onclick="validate(this.form);">
</form>
<p id="p1"></p>
</body>
</html>

OUTPUT:

Question 7:
Develop a word decoder challenge game using HTML, CSS and JavaScript. Present the player with
a set of scrambled word & hint and challenge him to unscramble them. For each attempt, randomly
select a word, refresh the browser window dynamically and display the scrambled word in red.
Once the player thinks the word has been properly decoded, he clicks on the Check Answer button
to see the results. If the answer is correct, the player is notified via a success message displayed in a
popup dialog window or displays a failure message.
CODE:
<html>
<head>
<title>Word Decoder</title>
<script type="text/javascript"> var i;
var check=["OESTRIN","NEGATOR","ENATION","ARENITE","INERTIA","ASSAULT","CALI
BER","DEFICIT","INTERIM","TORNADE"];
var dis=["I S T N R E O","N A G R E O T","E T N A N I O","E A R T E I N","A E N I R T I","A S T S
A U L","I B R E C A L","I E I F D T C","M I E N R T I","D T R O E N A"];
function generate()
{
i=parseInt(Math.random()*(9-0)+0); document.getElementById("p1").innerHTML=dis[i];
document.getElementById("p2").innerHTML="Hint:Hint No."+(i+1);
}
function checks(form)
{
var val=form.ans.value; if((val.toUpperCase()).localeCompare(check[i])===0)
alert("Correct!"); else
alert("Incorrect!");
}
</script>
</head>
<style>
#p1{color:red;font-size: 20px;font-weight: bolder;}
</style>
<body>
<p id="p1"></p>
<p id="p2"></p>
<input type="button" value="Generate" onclick="generate();">
<form>
<input type="text" name="ans">
<input type="button" value="Check" onclick="checks(this.form);">
</form>
</body>
</html>
OUTPUT:
Question 8:

Develop a JavaScript program that will determine whether a department-store customer has
exceeded the credit limit on a charge account. For each customer, the following facts are
available:

a) Account number
b) Balance at the beginning of the month
c) Total of all items charged by this customer this month
d) Total of all credits applied to this customer's account this month
e) Allowed credit limit
The program should input each of these facts from a prompt dialog as an integer,
calculate the new balance (= beginning balance + charges – credits), display the new
balance and determine whether the new balance exceeds the customer's credit limit. For
customers whose credit limit is exceeded, the program should output XHTML text that
displays the message “Credit limit exceeded.”

CODE:

<html>
<head>
<title>Balance Checking</title>
<script type="text/javascript"> function check()
{
var ac_no=parseInt(prompt("Enter Account No.")); var limit=parseInt(prompt("Enter Credit Limit"));
var begin_bal=parseInt(prompt("Enter Beginning Balance")); var expe=parseInt(prompt("Enter
Expenditures"));
var credit_pay=parseInt(prompt("Enter Credit Payments")); var new_bal=begin_bal+expe-credit_pay;
document.write("\nAccount No: "+ac_no+"<br>"); document.write("\nCredit Limit: "+limit+"<br>");
document.write("\nBeginning Balance: "+begin_bal+"<br>"); document.write("\nTotal Expenditures:
"+expe+"<br>");
document.write("\nTotal Credit Payments: "+credit_pay+"<br>"); document.write("\nNew Balance:
"+new_bal+"<br>"); if(new_bal>limit)
{
document.write("Credit Limit Exceeded");
}
}
</script>
</head>
<body>
<input type="submit" value="Click Me" onclick="check();">
</body>
</html>
OUTPUT:

Question 9:
A company wants to transmit data over the telephone, but it is concerned that its phones may be
tapped. All of its data is transmitted as four-digit integers. It has asked you to write a program
that will encrypt its data so that the data may be transmitted more securely. Your script should
read a four-digit integer entered by the user in a prompt dialog and encrypt it as follows: Replace
each digit by (the sum of that digit plus 7) modulus 10. Then swap the first digit with the third,
and swap the second digit with the fourth. Then output XHTML text that displays the encrypted
integer.

CODE:
<html>
<head>
<title>Telephone Directory</title>
<script type="text/javascript"> function encrypt(form)
{
var i;
var num=form.num.value; var temp;
var arr=[4]; for(i=3;i>=0;i--)
{
arr[i]=parseInt(num%10); num=parseInt(num/10); arr[i]=(arr[i]+7)%10;
}
i=0;
for(i=0;i<2;i++)
{
temp=arr[i]; arr[i]=arr[i+2]; arr[i+2]=temp;
}
document.getElementById("p1").innerHTML="Encrypted Text is:"+arr[0]+arr[1]+arr[2]+arr[3];
}
</script>
</head>
<body>
<form>
<p>Enter the Number:<input type="number" name="num"><input type="button" value="Encrypt"
onclick="encrypt(this.form);"></p>
</form>
<p id="p1"></p>
</body>
</html>

OUTPUT:

10. Write a program to demonstrate Event Handling • Validation of registration form


• Open a Window from the current window • Change color of background at each click of button
or refresh of a page
• Display calendar for the month and year selected from combo box OnMouseover event Solution:

Validation of registration form:


Code:
<html>
<script > function reset1()
{ x=confirm("It will clear all the text entered")
if(x==true)
{
document.form1.t1.value="" document.form1.t2.value="" document.form1.ta.value=""
document.form1.t3.value="" document.form1.r1[0].checked=false document.form1.r1[1].checked=false
document.form1.c1.checked=false document.form1.c2.checked=false document.form1.c3.checked=false
document.form1.c4.checked=false document.form1.c5.checked=false document.form1.c6.checked=false
document.form1.t1.focus() } }
function check()
{ if((document.form1.t1.value=="")||(!(isNaN(document.form1.t1.value)))) { alert("please enter the
correct name") document.form1.t1.value="" document.form1.t1.focus() }
else if((document.form1.t2.value=="")||(isNaN(document.form1.t2.value)))
{ alert("please enter the age correctly") document.form1.t2.value="" document.form1.t2.focus() } else
if(document.form1.t2.value>40) { alert("Sorry you age is beyound the limit")
document.form1.t2.value="" document.form1.t2.focus() } else if(document.form1.ta.value=="") {
alert("please enter the address") document.form1.ta.focus() }
else
if((document.form1.r1[0].checked==false)&&(document.form1.r1[1].checked==fa lse )) { alert("please
select the radio button") document.form1.r1[0].focus() }
else
if((document.form1.c1.checked==false)&&(document.form1.c2.checked==false)& &(
document.form1.c3.checked==false)&&(document.form1.c4.checked==false)&&( do
cument.form1.c5.checked==false)) { alert("please select the the languages known")
document.form1.c1.focus() } else if(document.form1.t3.value=="") { alert("please enter the password")
document.form1.t3.focus() } else
if((document.form1.t1.value!="")&&(document.form1.t2.value!="")&&(document .fo
rm1.t3.value!="")&&(document.form1.ta.value!="")&&((document.form1.r1[0].ch ec
ked!=false)||(document.form1.r1[0].checked!=false))&&((document.form1.c1.chec ke
d!=false)||(document.form1.c2.checked!=false)||(document.form1.c3.checked!=fals e)||
(document.form1.c4.checked!=false)||(document.form1.c5.checked!=false)))
{ x=confirm("you have entered the datas correctly,want to submit the form") if(x) {
document.lay.visibility="show"
}
}
}
</script>
<body bgcolor="Crimson" text="black" style="fontsize:15pt;fontfamily:Garamond"
onload=document.form1.t1.focus()><center> <h2>REGISTRATION FORM</h2></center> <form
name=form1 method=post >
<table name=tab cellspacing=30pt>
<tr><td align=left><h2>Enter your Name :</h2> </td><td align=right><input type=text name=t1
size=18>
<tr><td align=left><h2>Enter your Age :</h2> </td><td align=right><input type=text name=t2
maxlength=3 size=18> <tr><td align=left><h2>Enter your Address :</h2> </td><td
align=right><textarea name=ta rows=5 cols=15></textarea>
<tr><td align=left><h2>Sex :</h2> </td><td align=left><input type=radio name=r1
value="female">Female<br> <input type=radio name=r1 value=male>Male</td> <tr><td
align=left><h2>Languages Known :</h2> </td><td align=left><center>(select more than one)</center>
<input type=checkbox name=c1 value=c>C<br> <input type=checkbox name=c2 value=c++>C++<br>
<input type=checkbox name=c3 value=vb>VB<br>
<input type=checkbox name=c4 value=java>JAVA<br>
<input type=checkbox name=c5 value=asp>ASP<br>
<input type=checkbox name=c6 value=others>OTHERS<br></td>
<tr><td align=left><h2>Enter your Password :</h2> </td><td align=right><input type=password
name=t3 size=18> </table><center>
<input type=button value=" reset " onClick=reset1()>
<input type=button value=" check " onClick=check()>
<h3>Before submitting the datas please click the check Button</h3>
<input type="submit" value=" submit "></center>
</form>
</body>
</html>
OUTPUT:
Open a window from the current window
Code:
<html>
<head>
<script language="javascript">
function openwin()
{
msg=window.open("","Displaywindow","height=200,width=200,status=yes,to
olbar=yes,directories=no,menubar=yes,location=yes"); msg.document.write("<html><title>A new
Window</title>"); msg.document.write("<img src='nathan.gif'><p><form><input type=button
value=close onclick=self.close()></form></html>");
}
</script>
</head>
<body bgcolor="blue">
<form>
<input type=button value=click name=b1 onclick=openwin()>
</form>
</body>
</html>

OUTPUT:
Change color of background at each click of button or refresh a page
Code:
<html>
<head>
<script type="text/javascript"> function get_random_color() { var letters = '0123456789ABCDEF'.split(''); var
color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.round(Math.random() * 15)];
}
document.body.style.background= color;
}
</script>
</head>
<body onclick="get_random_color()">
<b>Click me to change my color!</b>
</body>
</html>
Output:
Display calendar for the month and year selected from the combo box OnMouseOverEvent
Code:
<html>
<head>
<script language="javascript" type="text/javascript"> var i=0,j,cnt=0,c; var
days=["sun","mon","tue","wed","thu","fri","sat"]; var yr,k,mon; var
last=[31,28,31,30,31,30,31,31,30,31,30,31]; var
mn=["January","February","March","April","May","June","July","August","S
eptember","October","November","December"]; function my()
{ yr=document.form1.qual.value; k=document.form1.qual1.value; if(yr%4==0&&yr%100==0||yr%400){las
t[1]=29;} document.write("<table width='50%' height='60%' border='9' bgcolor='Cyan'>");
document.write("<tr><td colspan='7'><center>"+ mn[k]+" "+yr+"</center></td></tr>");
document.write("<tr>"); for(i=0;i<=6;i++)
{document.write("<td>"+days[i]+"</td>");} document.write("</tr>"); var date2=new Date(yr,k,1); var
daz=date2.getDay(); cnt=0; for(i=0;i<=daz-1;i++)
{document.write("<td></td>"); cnt=cnt+1; } for(j=1;j<=last[k];j++)

{ c=cnt%7; if(c==0)
{
document.write("</tr><tr><td><a href=\"diary.html\" target=\"new\">"+j+"</a></td>");cnt++;
}
else
{
document.write("<td><a href=\"diary.html\" target=\"new\">"+j+"</a></td>"); cnt++;
} } document.write("</tr></table>");
}
</script>
</head>
<body bgcolor="DarkSalmon">
<form name="form1">
<select name="qual">
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option> </option>
</select>
<select name="qual1">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option> </option>
</select>
<input type="button" value="ok" onclick=my()></input></form>
</body>
</html>

OUTPUT:
OnMouseoverEvent
Code:
<html>
<head>
<script language="javascript"> function preload()
{ topon=new Image(100,50); topon.src="waterfall.jpg";

topoff=new Image(260,280); topoff.src="Ice cream.jpg";


} function myMouseOn(n)
{
preload(); imageON=eval(n+"on.src"); document.images[n].src=imageON;
} function myMouseOff(n)
{ imageOFF=eval(n+"off.src"); document.images[n].src=imageOFF;
}
</script>
</head>
<body >
<h1> Demo for mouse over</h1> <a href="#" onMouseOut="myMouseOff('top')";
onMouseOver="myMouseOn('top')";> <img src="God.jpg" alt="Show Next" name="top">
</a>
</body>
</html>
OUTPUT:

You might also like