|
Home >
Learn some Javascript
Well, author is no Javascript expert. He is just providing you some simple and basic Javascript programmes. If because of some typo error or any other type of error, any of these programmes do not run, we apologise for the inconvenience.
We invite members of public that, if they like, may send us any Javascript programmes, we will append them on this page with the sender's name.
-
Body color, message at window status.
<html>
<head>
<title>
welcome to my page
</title>
</head>
<body bgcolor=lavender>
<script language=javascript>
document.write("<font color=blue size=10> <center> hello world </center> </font>");
document.write("<br>");
document.write("<font color=red><center>How are you?</center></font>");
window.status="We are using the object window and its property status to display this message";
</script>
</body>
</html> -
Time
<script language=Javascript>
document.title="Ex5-use of variables and the NEW keyword";
var x=new Date();
var m=x.getMonth()+1;
var yr=x.getFullYear();
var dt=x.getDate();
var d=x.getDay();
var hr=x.getHours();
var mi=x.getMinutes();
var se=x.getSeconds();
document.write("We are visiting this page in the "+m+"th month which is March<br>");
document.write("<font color='red' size=5><b><i>Today's date = "+dt+"/"+m+"/"+yr+"</font></i></b><br>");
document.write("<br>");
document.write("Time is="+hr+":"+mi+":"+se);
</script> -
'Mouseover' changes window status
<html>
<body bgcolor="pink">
To visit my webpage
<a href="#"onMouseOver="window.status='mouse over link';return true;" onMouseOUt="window.status='mouse off';return true;">please click here</a>
</body>
</html> -
'Mouseover' changes the document of the color
<html>
<body>
<a href="#"onMouseOver="document.bgColor='yellow';return true;" onMouseOut="document.bgColor='white';return true;">hyperlink here</a>
<script language = "javascript">
//program changes the background color of screen each time the mouse moves over the link
document.title="Example 8 - Event handler onMouseOver and onMouseOut";
</script>
</body>
</html> -
'Mouseover' changes the color of the document, 'Mouseout' changes again the document color
<html>
<script language = javascript>
function blue()
{
document.bgColor="blue";
return true;
}
function red()
{
document.bgColor="red";
return true;
}
</script>
<body>
<a href="#" onMouseOver="blue()" onMouseOut="red()">click here</a>
</body>
</html> -
'Mouseover' changes the caps from lower case to upper case
<html>
<script language = javascript>
function caps(msg)
{
document.write(msg.toUpperCase());
return true;
}
</script>
<body>
<a href="#" onMouseOver="caps('Hello World');
return true">Hyperlink text</a> -
Scrolling message at the window status
<html>
<head>
<title>Program to display a scrolling status message</title>
<script language = javascript>
var pos=0;
var message=new String("Welcome to Script using JavaScript");
var spacer="..................";
function scrollmess()
{
window.status=message.substring(pos,message.length)+spacer+message.substring(0,pos);
pos=pos+1;
if(pos>message.length)
pos=0;
window.setTimeout("scrollmess()",100);
}
</script>
</head>
<body OnLoad="scrollmess()">
Watch the status bar.....
</body>
</html> -
Write numerous lines with a very simple javascript
<html>
<body>
<script language=javascript>
for(x=0;x<10;x++)
{
document.write("This is line",x);
document.write("<br>");
}
</script>
</body>
</html> -
Pull Down Menu
<html>
<head></head>
<body>
<select>
<option>Singapore
<option>India
<option>Australia
</select>
</body>
</html> -
Buttons, pull down menus, mouseover the image and it changes to another image
<html>
<body>
<img height=40 width=40 name="pic" src="tiger.jpg" onMouseOver="document.pic.src='lion.jpg';" onMouseOut="document.pic.src='tiger.jpg';">
</img>
<FORM NAME="first">
<input type="button" value="change to yellow!" name="button3" onClick="document.bgColor='yellow'">
<input type="button" value="Click here to go back" onClick="history.go(-1)">
<input type="text" name="cooltext" value="I am Cool!!!" size="20">
<input type="button" name="change" value="Click to see new text!" onClick="document.first.cooltext.value='You are cool too!!'">
<input type="button" name="coolbutton" value="Click Here and see what I have to say!" onClick="document.first.coolbutton.value='Who told you to Click ME?'">
<br><br>
<Select name="guidelink">
<option selected value="ex6.htm">page1
<option value="ex7.htm">My Cool Page
</select>
<!- the following characters will insert two spaces-->
<input type="button" name="go" value="GO!" onClick="window.location=document.first.guidelinks.options[document.first.guidelink.selectedIndex].value">
<br><br>
<Select name="sport" onChange="alert('I\'m glad YOU can make choices!')">
<option selected>--Choose a sport--
<option>Football
<option>Basketball
</Select>
<br><br>
<SELECT name="guidelinks" onChange="window.location=document.first.guidelinks.options[document.first.guidelinks.selectedIndex].value">
<option selected value="forms.htm">--Choose--
<option value="ex15.htm">page1
<option value="ex16.htm">My Cool Page
</select>
<select name="list" size=3 onClick="window.location=document.first.list.options[document.first.list.selectedIndex].value">
<option value="forms.htm" selected>Same form
<option value="http://www.hotmail.com">Hotmail
<option value="http://www.google.com">Google
<option value="http://www.sinda.org.sg">Sinda
</select>
</form>
</body>
</html> -
Mouseover changes the image, arithmatica functions - subtraction, you can use addition, multiplication, division as well by changing it suitably
<html>
<head>
<script language=javascript>
function validate (x)
{
if(x=="")
{
alert("invalid entry...try again")
}
}
function Subtract(a,b)
{
x=parseFloat(a)-parseFloat(b);
//parseInt is a function inbuilt for changing a string to integer number
document.write("the sum is "+x);
}
</script>
<body>
<img height =60 width = 60 name="img"src="lion.jpg" onMouseOver="document.img.src='tiger.jpg';"onMouseOut="document.img.src='lion.jpg';"></img>
<form name="sample">
Number<input type="text" name="t1" onChange=validate(document.sample.t1.value)><br>
Number2<input type="text" name="t2">
<input type=button value="Subtract" onClick="Subtract(document.sample.t1.value,document.sample.t2.value)">
</form>
</html>
| Home | About Us | Disclaimer | Advertise With Us | ||
|
Copyright © 2005, Mirror Media Pte Ltd.
Strategised by
Ncode.
|