Libr 240-03 How Non-Programmers Can Still Use Javascript

Anyone new to html, css, and basic web page coding can be dismayed at the seemingly impenetrable nature of more complex components like javascript, php, and perl cgi scripts, etc. The good news is, you don't have to know how to actually "program" in these languages in order to start using them in your pages. There are many sites on the web that allow you to "cut and paste" scripts, often with simple instructions as to which variables or values to change in order to make them work for you. That said, you should at least understand how these "pasted" scripts are working within your page code and within the browser. In this entry, I'm going to focus on the very popular javascript coding language, and give you some concepts and tips so that you can utilize scripts right away.

The "chunks of code" are typically defined between the <script> </script> tags. If you put the javascript <script> chunk in the <head></head> section of your web page, it will load before the body and be ready for any action from the user. It can also be in the <body></body> section of your page but, since you usually want the script available before the body loads, it is less desirable to do so.
Here is a typical script that, when placed inside the <head></head> section of your web page, will launch an alert pop-up:

Before the <body></body> section of your page can load, the script will run, create the alert box and wait for the user to "clear" it by pressing the "Push my button!" button.

[See an example of this code in action and a more detailed explanation here]: http://www.musicandlight-unlimited.com/sjsu/240-03_spring_2006/38_alert_example.htm

Another way to utilize this same "alert" script and allow it to be used by other html pages, is to save it as a javascript file with the .js extension (and without the <script> </script> tags), and then call it using the <script> tag. This is similar to the <link> method you use to link to a css stylesheet:

Here is the javascript as an external file which can be named, for example, as "myAlert.js":

window.alert(" Push my button! ");

You include the "myAlert.js" in your web page by using the <script> tag (this time with a source "src" attribute) inside the <head></head> section of your web page like so:

<script language="javascript" type="text/javascript" src="myAlert.js"> </script>

Besides embedding in the <script> tags or using the <script> tags to call it as an external file, javascript may be loaded and activated by certain reserved attributes that may be added to many html tags. For instance, you may add the special javascript event handler onLoad attribute to the <body> tag and, when the body loads, then the javascript value will be loaded:

You should notice that the onLoad value is in regular double quotes but, since the Push my button! text string is also a value (now within another value), it needs to use single quotes so that the code doesn't truncate and cut off when encountering a second double quote before the end.

This is an important concept. Often, you will want to use the power of javascript to react to a user action, or to do something at a certain time. You will want the script to be ready but, you don't want it to start prematurely. So, a useful javascript code chunk may be designated as a function. You can see a special syntax when I create a function from the first alert code example:

window.alert(" Push my button! ");

}

</script>

The function command and { } brackets designate the alert code chunk to be a (custom named) newAlert() function. The parentheses ( ) are sometimes empty as in this example, and sometimes they can carry a variable value to the function. Now, newAlert() can be called via a method like the <body onLoad ... > example you saw before. So long as this script (with the function defined) is embedded in the <head></head> section of your web page or brought in via the <script> tag as an external javascript file, you can call the function like so:

You can also call the function to run by calling it when a user action like onMouseOver or onClick is performed. Here is a hyperlink with an onMouseOver attribute that calls the newAlert() function:

<a href="#" onMouseOver="newAlert()">Bring your cursor over this link to activate the newAlert() function </a>

Bring your cursor over this link to activate the newAlert() function

Now that you know the basics, how a javascript function may be embedded in the <head></head> section of your web page or brought in via the <script> tag as an external javascript file, and how to call that function with a variety of html "javascript handler" attributes, you should be able to take advantage of the many "cut and paste" scripts available on the internet.

Here is a partial list of sites that have some free, interesting, and useful "cut and paste" scripts, along with detailed instructions for installing them into your web page: