Back to E-Commerce Home Page

An Easy Way To Get JavaScript On Your Web Page

JavaScript is terrific on web pages and seems to be gaining in popularity.  You can do many cool things such as passwords, pictures that change automatically, number crunching, etc..  Their are a multitude of nifty JavaScript tricks that people have come up with.  One of the best things about JavaScript is there are many people who like to develop scripts and post them on the web.  You are allowed to use them for free.  Often times the author just would like you to have his / her name mentioned in the code (not on your page).

It is very simple to grab JavaScript off the web and implement it.  Of course, it helps if you know how JavaScript works, but it is not necessary.  Here is what you do:

#1.  Create a simple web page in "NotePad" and save your web page to a floppy disk.  Simple is better when first starting out (less to go wrong).

#2.  Go to a web site that has free JavaScript.  There are many of them.  Search "JavaScript" and you will find a bunch of web sites.  If that does not work, listed below are a few good sites.

http://www.geocities.com/SiliconValley/7116/

http://www.javascriptcity.com/scripts/index.html

http://javascript.internet.com/

#3. Find something that looks interesting to you.  Examples may include calculators, alert boxes, curser effects, background effects, etc.  Some of the scripts are very useful and others are just for fun. 

#4.  Click on the script that looks interesting.  Although web sites vary, there will probably be an explanation of what the script does and some code for you to copy and paste.

#5. Unless you are pretty good with JavaScript, choose one that is simple.  How do you know if it is simple?  The answer: the code is not very long and all you do is post the script into the body of your web page.  If you have to post several scripts into various places on your web page, you are asking for problems.

#6.  Once you have found that interesting, useful, and fun script, and it seems pretty easy (just copy and paste the script into the body of your web page), highlight and copy the script.  Most of the time you will be copying everything from <script> to </script>.  Sometimes you will need to copy a little more.  The process is a) highlight the script you want to copy. b) press "Edit" c) choose "Copy."

#7.  Go to your web page that was saved on your floppy disk.  Open up the source code and put your curser in the body section of your HTML code (that is, of course, if you have chosen a simple script that only needs to be pasted into the body section of your code).  Press "Edit" ... "Paste."  A bunch of strange looking JavaScript code should be in your web page source code.

#8.  Save your web page as you normally do and then check your web page to see if you have the desired effect.  Please be warned... no matter how careful you are, some of these JavaScripts just don't work.  Usually, it is the JavaScript you really like.  You will just have to look for another JavaScript and try again.

#9.  For the brave and adventurous only:  these scripts are not cast in stone.  It is possible to modify them to fit your needs.  Make a back-up copy of your web page and try changing your JavaScript.  If you look carefully enough, you may see places where you can alter the code.  Just experiment and have fun.  You may even learn how JavaScript works.

 

The following is an example of the above instructions:

A) Simple Web Page

<HTML>

<HEAD>

</HEAD>

<BODY>

Howdy!!

</BODY>

<HTML>

 

 

 

  B) Find some simple JavaScript on the web (simple usually means that the code is rather short and all you have to do is cut and paste into the <BODY> of your web page.)

 

C) Copy the JavaScript and paste the code into your web page.  The following is code I found on the net. The JavaScript is in yellow.  The code in white is HTML.

<HTML>

<HEAD>

</HEAD>

<BODY>

Howdy!!

<script language="JavaScript">
<!--
function showpay() {
if ((document.calc.loan.value == null || document.calc.loan.value.length == 0) ||
(document.calc.months.value == null || document.calc.months.value.length == 0)
||
(document.calc.rate.value == null || document.calc.rate.value.length == 0))
{ document.calc.pay.value = "Incomplete data";
}
else
{
var princ = document.calc.loan.value;
var term = document.calc.months.value;
var intr = document.calc.rate.value / 1200;
document.calc.pay.value = princ * intr / (1 - (Math.pow(1/(1 + intr), term)));
}

// payment = principle * monthly interest/(1 - (1/(1+MonthlyInterest)*Months))

}

// -->
</script>


The results of this loan payment calculator are for comparison purposes only.
They will be a close approximation of actual loan
repayments if available at the terms entered, from a financial institution. This
is being
provided for you to plan your next loan application. To use, enter values
for the
Loan Amount, Number of Months for Loan, and the Interest Rate (e.g.
7.25), and
click the Calculate button. Clicking the Reset button will clear entered
values.
<p>
<center>
<form name=calc method=POST>
<table width=60% border=0>
<tr><th bgcolor="#aaaaaa" width=50%><font color=blue>Description</font></th>
<th bgcolor="#aaaaaa" width=50%><font color=blue>Data Entry</font></th></tr>
<tr><td bgcolor="#eeeee">Loan Amount</td><td bgcolor="#aaeeaa" align=right><input
type=text name=loan
size=10></td></tr>
<tr><td bgcolor="#eeeee">Loan Length in Months</td><td bgcolor="#aaeeaa"
align=right><input type=text
name=months size=10></td></tr>
<tr><td bgcolor="#eeeee">Interest Rate</td><td bgcolor="#aaeeaa" align=right><input
type=text name=rate
size=10></td></tr>
<tr><td bgcolor="#eeeee">Monthly Payment</td><td bgcolor="#eeaaaa"
align=right><em>Calculated</em> <input
type=text name=pay size=10></td></tr>
<tr><td bgcolor="#aaeeaa"align=center><input type=button onClick='showpay()'
value=Calculate></td><td bgcolor="#eeeeaa" align=center><input type=reset
value=Reset></td></tr>
</table>
</form>
<font size=1>Enter only numeric values (no commas), using decimal points
where needed.<br>
Non-numeric values will cause errors.</font>
</center>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>

</BODY>

</HTML>

 

 

 

 Click here if you want to see what this looks like.