left-pointing arrow for navigating to previous page

HTML Tutorial: JavaScript

right-pointing arrow for navigating to next page

JavaScript is a computer language created by Brendan Eich at Netscape. (It's not related to Java, a computer language from Sun Microsystems.) It first appeared in 1995, offering the webmaster a host of new capabilities. Try clicking this button:

In this topic, I'll introduce a couple JavaScript tools that you can use without learning a whole programming language. You'll also become savvy enough to use the thousands of JavaScript functions that you can find on the Internet.

Alert Boxes

Alert boxes, like the one that pops up when you click the "Tickle Me" button, can be used to display information requested by the user. They vary, depending on the browser, from a "Here's your info." style to a "Run for your life, the sky is falling!" style so you shouldn't use them if that's an issue.

To call the alert function, you just write:

alert( 'Any character string you want.' )

Spacing and format are yours to choose. Single or double quotes are fine. Use a backslash followed by the letter "n" where you want a new line. Use a plus sign to combine multiple strings into one. For example:


alert(
    "Here's a poem\n"+
    'About HTML\n\n'+

    'Learn it now\n'+
    'And it will serve you well'
    )

This button pops up that alert:

Invoking JavaScript

This is the HTML that created the "Tickle Me" button:


<form>
    <center> <input
        name='buttonTickle'
        onclick='JavaScript:alert("Hee, Hee! That tickles!")'
        type='button'
        value='Tickle Me'
    > </center>
</form>

There are lots of different events. The onclick event, very sensibly, runs its JavaScript when a button is clicked. For the poem, I wrote a JavaScript function (how to coming next) so I could call it from anywhere.

This is the HTML that creates the Poem button:


<form>
    <center> <input
        name='buttonPoem'
        onclick='Javascript:poem()'
        type='button'
        value=' Poem, Please '
    > </center>
</form>

Another way to invoke JavaScript functions is to use href="Javascript:whatever_func()" ... in a link. Try this one:

Poem, Please

This is the HTML:


<table align=center border=5 cellpadding=3> <tr> <td>

    <a href="JavaScript:poem()"> Poem, Please </a>

</td> </tr> </table>

JavaScript Functions

You write your functions between script (<script>) and end script (</script>) tags. This is the script that creates the poem() function:


<script type='text/JavaScript'>
    function poem() {
        alert(
            "Here's a poem\n"+
            'About HTML\n\n'+

            'Learn it now\n'+
            'And it will serve you well'
        )
    }
</script>

You can use script tags in either the head or the body section of your HTML. You can write as many functions as you like within a single script section. (Warning: one little syntax errror in any function will disable every function in a script section. If you write every function between separate script/end script tags, one little syntax error disables just one function, giving you a fighting chance of finding the error.)

JavaScript Function Parameters

You've already seen one. The alert() method has a parameter that receives the text you pass it. You can also write functions that take one or more parameters. You can also search the Internet for functions that someone else has written and is willing to share.

Here's the HTML surrounding my mugshot in the banner of this site:


            <a href="javascript:popup( 'html-tutorial-email-martin', 450, 300 )">
                <img
                    alt="icon-sized snapshot of Martin Rinehart"
                    border=0
                    style='height:80' width='82'
                    src="graphics/martin-82-80.jpg"
                >
            </a>

The popup() function has three parameters. First is the name of the page to pop up (minus the ".html" extension). Then width and height.

`Final Experiment`

You probably don't realize how powerful this tiny introduction to JavaScript is. Let me show you. Begin by creating a small page that has a fact someone might want to know. Call it explain.html. Keep it small.

You are hereby given permission to copy my popup function and use it in your own site. It's in the head section of the banner page (mouse over banner, right click This Frame/View Frame Source). Copy it, including the script tags, and paste it into the head section of one of your pages.

Assuming your explain.html will fit in a 300px by 200px popup window, use this tag to pop up your explanatory page when requested:

<a href='JavaScript:popup( "explain", 300, 200 )'> Explain, please </a>

Got it? Pretty simple stuff if you're not intimidated by the JavaScript part. Now go ask Google where you can find some JavaScript functions ready to use. They're all over the web and many are free.

The End

You've reached the end of the tutorials. Last I've included a page that explains how the trickier bits of some of the pages in this tutorial are put together. I don't recommend reading it straight through. Use it for reference when you come something that you don't understand. (It is a good example of a long page with intra-page navigation.)

The final topic on the navigation bar is Web Hosting. Go there when your site is looking good enough to make its debut in cyberspace. Do send me a link.

Explain the tricky bits!