Free Javascript Tutorial and Scripts

Home >> Javascript & CGI>> Free Javascript Tutorial and Scripts

JavaScript is sort of like an extension to HTML which allows authors to incorporate some functionality in their web pages.

When web users hit the SUBMIT button, you don't necessarily need a CGI script to do the processing. If it is something simple, you can do the processing locally using JavaScript and give back the results.

This small tutorial will just give you the basics and some scripts that you can paste into your own site and test.

There are multiple ways of adding JavaScript to web pages. Sometimes a script can be included as part of an HTML tag and other times as part of the <body> on the page. A script can also be placed inside the page's <head>.

If your script is going to be embedded, you will need to use the <script> tag to tell the browser not to display the code.

Try adding a script by opening a blank page and saving it as javatest.html. Follow these steps:

1. Type the opening tag:

2. Add an opening HTML comment tag just below the <script> tag:

<script>
<!--

3. Add the language=" " attribute to identify what scripting language you are using. In this case it will be the language called "JavaScript"

4. Add the type=" " attribute to give the MIME type for the script. For JavaScript, use type="text/javascript"

5. Add a closing HTML comment tag:

6. Type the closing </script> tag.

7. Insert a line of script on the line between the comment tags.

Save the file as javatest.html and display it in your browser. You should see the text "Testing a JavaScript script" displayed in your browser.

Here are some more simple scripts that you can use for your site:

Last Modified Script

Have you ever seen a web page that displays the date of the last time the page was modified? This is JavaScript. The webmaster doesn't go in and change this date every time, the script automatically updates the date for the webmaster. Here's the code:

<SCRIPT LANGUAGE="JavaScript">  </SCRIPT>

You just insert this code in the place you want the "last modified" message displayed.

Inserting Date and Time

Simply copy this script inside the <body> of your HTML document.

<SCRIPT>
document.write(Date()+".")
</SCRIPT>

Digital Clock Script

Here is a clock program written in JavaScript.

The source code for it is given below.

<TABLE BORDER=1 BGCOLOR=black>
    <TR><TD>
        <FORM NAME="clock_form">
            <INPUT TYPE=TEXT NAME="clock" SIZE=35>
        </FORM>

        <SCRIPT LANGUAGE="JavaScript">
            <!-- Hide from non JavaScript browsers
            function clockTick()
            {
                currentTime = new Date();
                document.clock_form.clock.value = " "+currentTime;
                document.clock_form.clock.blur();
                setTimeout("clockTick()", 1000);
            }
            clockTick();
           // End of clock -->
        </SCRIPT>
    </TD></TR>
</TABLE>

So those are some simple scripts that will get you going.

For more detail on JavaScript, here are some good sites:

http://javaboutique.internet.com/
http://www.geocities.com/SiliconValley/Station/4320/
http://www.javascript.com/
http://www.javascriptsearch.com/

If you liked this, please share. Thanks!