Some javascript code
Javascript is plenty powerful. We can go in any one of a dozen directions with this. What I'm going to do some code here, trying to touch on as many basic things as I can. I'll try to explain a little as we go.
QUOTE
Code: 1
So, what now? Let's add a prompt box to ask our name and then spit out a personalized Hello message.
CODE
<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript"><!--
function HelloWorld()
{
myname = prompt("Hey! What's your name?", "");
alert ('Hello ' + myname);
}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="java script:HelloWorld()">Hello! Click here!</A>
</BODY>
</HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript"><!--
function HelloWorld()
{
myname = prompt("Hey! What's your name?", "");
alert ('Hello ' + myname);
}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="java script:HelloWorld()">Hello! Click here!</A>
</BODY>
</HTML>
So why waiting just put those code on a simple text editor save it with a '.html' extension. Now double click on the file it should be open with a web browser. If your system is windows & browser is Internet Explorer then you may have to give some permission to run that javascript. Though i prefer Mozilla FireFox & Opera browser. I believe those are better choice.
You see in the prompt box thing, there is a part that says "Hey! What's your name?" is fairly self explanatory. But you may feel doubt to think what's the empty double quotes ("") for? That's for the default string. Put something in the quotes (like your name or anything) and re-run it to see the effect.
Code: 2
Now we will have fun with javascript events.
What's an event? An event is when something happens. Such as a mouse over, mouse click, page loading, etc.
So we can put some simple alert box pop up when the page loads using the onLoad event handler in the body tag.
CODE
<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript"><!--
function HelloWorld()
{
alert ('Hello World!');
}
//--></SCRIPT>
</HEAD>
<BODY onLoad="HelloWorld()">
Hello
</BODY>
</HTML>
Some more now with events.Lots of people use <b>onMouseOver</b> event handlers in links.
CODE
<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript"><!--
function HelloWorld()
{
alert ('Hello World!');
}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="" onMouseOver="HelloWorld()">Hello</A>
</BODY>
</HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript"><!--
function HelloWorld()
{
alert ('Hello World!');
}
//--></SCRIPT>
</HEAD>
<BODY onLoad="HelloWorld()">
Hello
</BODY>
</HTML>
Some more now with events.Lots of people use <b>onMouseOver</b> event handlers in links.
CODE
<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript"><!--
function HelloWorld()
{
alert ('Hello World!');
}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="" onMouseOver="HelloWorld()">Hello</A>
</BODY>
</HTML>
Code: 3
Javascript is also fine with math. So why not some mathmatical fun with javascript.
CODE
<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript"><!--
function MathThing()
{
firstnumber = prompt("Give me a number.", "");
secondnumber = prompt("Give me another number.", "");
total = firstnumber * secondnumber;
alert (firstnumber + " x " + secondnumber + " = " + total);
}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="java script:MathThing()">Click me</A>
</BODY>
</HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript"><!--
function MathThing()
{
firstnumber = prompt("Give me a number.", "");
secondnumber = prompt("Give me another number.", "");
total = firstnumber * secondnumber;
alert (firstnumber + " x " + secondnumber + " = " + total);
}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="java script:MathThing()">Click me</A>
</BODY>
</HTML>
Now a simple logical math with javascript.
CODE
<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript"><!--
function MathThing()
{
firstnumber = Math.floor(Math.random() * (100 + 2));
firstnumber = prompt("Give me a number. A small 1 or 2 digit number is a good choice. A random value is " + firstnumber + ". Keep it or change it if you wish.", firstnumber);
value1 = parseInt (firstnumber);
value2 = value1 + 50;
alert ("Your chosen number is " + value1 + ".\n\nNow add 50 with your given number.\n\nYour number is now " + firstnumber + " + 50 = " + value2);
value3 = value2 - 15;
alert ("Now minus 15 from your present number.\n\nYour number is now " + value2 + " - 15 = " + value3);
value4 = 100 - value3;
alert ("Now minus your present number from 100.\n\nYour number is now 100 - " + value3 + " = " + value4);
value5 = value4 + value1;
alert ("Now add your first number ( that you have given ) with your present number.\n\nYour final number is " + value4 + " + " + value1 + " = " + value5);
alert ("Try it again with a different number.");
}
//--></SCRIPT>
</HEAD>
<BODY>
<div align="center"><br><br><br>
<h1><A HREF="java script:MathThing()">Click Me!</A></h1>
</div>
</BODY>
</HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript"><!--
function MathThing()
{
firstnumber = Math.floor(Math.random() * (100 + 2));
firstnumber = prompt("Give me a number. A small 1 or 2 digit number is a good choice. A random value is " + firstnumber + ". Keep it or change it if you wish.", firstnumber);
value1 = parseInt (firstnumber);
value2 = value1 + 50;
alert ("Your chosen number is " + value1 + ".\n\nNow add 50 with your given number.\n\nYour number is now " + firstnumber + " + 50 = " + value2);
value3 = value2 - 15;
alert ("Now minus 15 from your present number.\n\nYour number is now " + value2 + " - 15 = " + value3);
value4 = 100 - value3;
alert ("Now minus your present number from 100.\n\nYour number is now 100 - " + value3 + " = " + value4);
value5 = value4 + value1;
alert ("Now add your first number ( that you have given ) with your present number.\n\nYour final number is " + value4 + " + " + value1 + " = " + value5);
alert ("Try it again with a different number.");
}
//--></SCRIPT>
</HEAD>
<BODY>
<div align="center"><br><br><br>
<h1><A HREF="java script:MathThing()">Click Me!</A></h1>
</div>
</BODY>
</HTML>
Each time you try the answer will be same 65. Want to know why? Find it by yourself.
Ok i don't like to make this post any longer. But i'll try to write more post about simple javascript later. If you like this post please write some comments.
ThanX.
