JavaScript

Here are some JavaScript references. Check them out!

The JavaScript debugger Firebug not only helps you debug Javascript but shows everything that happens under the hood. If you ever need to find out what's going on or wrong Firebug is THE TOOL
The Aptana IDE is a free, open-source, cross-platform, JavaScript-focused development environment for building Ajax applications.
JavaScript School at w3schools.com www.w3schools.com/js/
JavaScript resource at www.javascript.com
Web DevCenter www.oreillynet.com/javascript/ at O'Reilly Network
Foothill College COIN 070 - JavaScript sislands.com/coin70/
Foothill College COIN 062 - HTML, DHTML, CSS, JavaScript sislands.com/salim/
JavaScript for the Total Non-Programmer - a tutorial by Rob Young webteacher.com/javascript/
Coding/JavaScript at ZDNet Developer www.zdnet.com/devhead/filters/0,9429,2133214,00.html
JavaScript Authoring Guide The Complete Netscape® JavaScript Docs http://developer.netscape.com/docs/manuals/index.html?content=javascript.html
Netscape Navigator 4.0 JavaScript Guide
JavaScript Guide for older versions of JavaScript http://developer.netscape.com/docs/manuals/archive.html/
JavaScript Reserved Words . JavaScript has a number of words reserved for use by the language. You cannot use one of these words as a variable or function name.
JavaScript Basics at Developer Zone www.projectcool.com/developer/jsz/jsbasics/
Programming & Scripting Languages Help webbuilder.netscape.com/webbuilding/0-3882.html?tag=st.bl.3880.dir.3882
Animation With JavaScript www.netmechanic.com/news/vol3/design_no10.htm
Excellent resource for JavaScript, DHTML, CSS, JAVA, CGI & PERL, HTML www.irt.org/
Another resource for JavaScript: Kurt's Free DHTML JavaScript http://www.btinternet.com/~kurt.grigg/javascript/
JavaScript Bookmarklets tech.irt.org/articles/js170/
Bookmarklets.com web site run by Steve Kangas www.bookmarklets.com/
Create bookmarklets for quick and easy searches article by Beth Blakely at TechRepublic (Nov 19, 2001)
If you're looking for Java, go to TechRepublic for their article Taking advantage of Java programming resources on the Web with many links and information.

JavaScript comments

Because JavaScript must ignore comments, there is an appropriate syntax for demarcating text as a comment. For single line comments, simply precede the line with two slashes //. For multi-line comment blocks, begin the comment with /* and close with */.

Use Cookies To Stop FORM Submission Duplicates

At NetMechanic they use a method that works in all browsers that have cookies turned on. Just insert this JavaScript code in the HEAD section of your document:

<script>  </script> -->

You'll call the function inside the opening FORM tag like this:
<FORM onSubmit="return AllowNoDups();">

When a visitor submits the form, the function sets an identifying cookie. Before the form processes, the function checks to see if there is already a cookie set. If not, the form handles the submission as normal. If there is a cookie, the visitor gets an alert box that says "You've already submitted your answers" and the form submission is blocked. This is a good, cross-browser way to avoid duplicate submissions, but be aware that the visitor's browser must accept cookies and have JavaScript turned on for this method to work.

Last Updated code

Take a look at the footer of this page (view the frame source). There is a JavaScript that gives the "last updated" value, based on when the page was saved. It's simple, and is much easier than trying to remember to do it manually every time you update a page. Here's the code: <script language="JavaScript" type="text/javascript">  </script>

With HTML 4.0, in order to avoid the CDATA enclosure requirements for scripts and stylesheets, an external JavaScript script file is recommended. SPAUG uses one named spaug_util.js that contains the code for the above:
function updated () {document.write("This page was last updated " + document.lastModified);}
which, when used in conjunction with the call to the script:
<script language="JavaScript" type="text/javascript">updated ()</script>
will write the last saved date of the document.

Break out of Frame code

Roll-overs

In a roll-over, the appearence of a link changes when you move the mouse over or off it. In the most common form, a roll-over consists of an image serving as a hypertext link. While the mouse pointer is over the image, it changes appearence to attract attention to the link. For example, you could add a glow effect, a drop shadow or simply change the background color. Here is an example at W3org:

         <script type="text/javascript">
         if (document.images)
         {
             image1 = new Image;
             image2 = new Image;
             image1.src = "enter1.gif";
             image2.src = "enter2.gif";
         }

         function chgImg(name, image)
         {
             if (document.images)
             {
                 document[name].src = eval(image+".src");
             }
         }
         </script>

         ...

         <a href="/" onMouseOver='chgImg("enter", "image2")' 
         onMouseOut='chgImg("enter", "image1")'><img name="enter" 
         src="enter1.gif" border="0" alt="Enter if you dare!"></a>

A JavaScript bug in recent versions (5 and 6) of Internet Explorer may cause problems with JavaScript rollovers. When you use an absolute image path link inside your JavaScript rollover code, these versions of Explorer ignore the cached copy and request the file from the browser each time it's needed.

This problem only happens when you use an absolute image path to refer to the rollover image. If you use relative links for your rollover images, Explorer checks the cache and retrieves them without a problem.

Here is an example on the WebSIG site of three different mouseOver effects, and info about detecting browser versions, and hiding JavaScript from older browsers.

Open Window function

Use it in the body to open a web page in a new window using the parameters, for example:
<a href="javascript:OpenWindow('dailynews.html','ltwin','width=600, height=500, left=20, top=20, screenX=20, screenY=20, outerwidth=604, outerheight=504, resizable, scrollbars')">Click Here For Breaking News</a>
For another version, see www.netmechanic.com/news/vol4/javascript_no7.htm.

Adding JavaScript Events to an HTML Tag

Sometimes you'll need to have JavaScript events and event handlers within HTML tags, in the body of your page. An event is a way of identifying certain actions that happen in the browser. An event handler is a way of performing an action when a specified event occurs.

The most common application of this is mouseovers. The JavaScript you use within the HMTL anchor tag generates a value that is passed back to another script in the file which controls the graphics or messages that appear when the reader mouses over an item on your page.

For example, when you move your mouse over the menu options at the side of this section you'll see that the little bar changes from red to purple as you move the mouse. This is controlled with a script. In the body of the file, at each link, there is an eventhandler that watches for the mouse to move atop a menu item. The JavaScript elements which are inserted into the anchor tag look like this: <a href="home.html" onMouseOver="msover(0); return true" onMouseOut="msout(0); return true">

Remember, in most cases where you use JavaScript elements within an HTML tag, you have another script elsewhere in your page, defining the variables, arrays or other required elements. For example, in the mouseover example above, there is another script earlier in the page that defines the placement of the red and purple lines based on the state of the mouseover events.

Adding JavaScript through the Anchor Tag

Sometimes you'll use the anchor tag to call a JavaScript function. Typically, you'll do this when you want to perform some action when the reader clicks on a link.

In order to use a JavaScript function in an anchor tag, it must either be a standard, pre-defined function or a function that you created earlier in the page. The function you create will be within the script tags in the head of your file. Once it is created, you can call it from the standard HTML anchor tag.

For example, you may have a script that opens a new window of a certain size when the reader clicks on a linked word. The new window might contain a definition of that word.
<a href='javascript:openAWindow("example.html",150,150,1)'>green iguna</a>

When the reader clicks on the linked words green iguna, the anchor tag looks for a JavaScript function named openAwindow, and opens a window that is 150 by 150 pixels in size.

Basically, you are just substituting the phrase "javascript:", the name of a function, and that function's attributes for the URL that you would normally call.

Hide Email Addresses With JavaScript

Consider using JavaScript to parse the email address components to hide them from email spiders. Be sure to change the variable names to reflect your site and email address! Also, remember to keep the document.write statement on one line in your HTML code to avoid getting a JavaScript error message on your Web page.

Place the script in the BODY section of your document.
<p>Send your comments and questions to our <script language="JavaScript" type="text/javascript">  </script> </p>
Looks like this:

Send your comments and questions to our

This works great if you only have a couple of email addresses on your page. A long list of contacts is harder to easily manage and maintain.

A more minimalist version follows (yes, you need all four lines; replace emailID with the part of the email in front of the @ sign, and host.domain with the part after the @ sign; the code @ inserts the @ sign in the mail and . inserts the . [dot]:
<script language="JavaScript" type="text/javascript">  </script>
and will render like this:

Creating External JavaScript Files

External JavaScript files are a great way to use the same JavaScript functions on every page and reduce space and maintenance problems. The URL and last updated message at the bottom of most SPAUG pages is an example of this in action.

You may think external JavaScript files hide the source code, because the code doesn't display with the View Source option. But the script file can be opened as a text file from the browser cache - look for a .js extension on a recent file, and open it with NotePad. So if you see a JavaScript that is really cool, you can examine and dissect it, and perhaps use it on your own site.

Remember to validate your JavaScript code before you put it into the external file. That means include it in the HEAD and BODY as required. Once the code works, create your external file like this:

Open a text editor such as Notepad or Word (or open the current .js file, if you want to add it to your collection).
Either cut and paste your existing JavaScript code or create new code. Don't include opening and closing SCRIPT tags inside the external file.
Save the file in text-only format with a .js extension. The SPAUG .js file looks something like this:

function updated () {document.write("This page was last updated " + document.lastModified);}

function webmaster () {document.write("<a href="+"mail"+"to:"+"info@pa-spaug.org?cc=stan.hutchings"+"@"+"lmco.com&cc=sleemanj@earthlink.net&subject=Comment For Webmaster>Send Comments to the Webmaster</"+"a>");}

function clubprez () {document.write("<a href="+"mail"+"to:"+"jimdinkey@jimdinkey.com&subject=Comment For the Prez>Send email to the Club President</"+"a>");}

function footer () {document.write("<address><br><strong>URL:</strong> "+document.URL+"<br>was last updated "+document.lastModified+"<br> </address>");}
Call the file in the HEAD section on each of the Web pages that will use the JavaScript. You can include more than one external JavaScript file in the HEAD, although SPAUG does not. Just call each separately like this:
- <script src="spaug_util.js" language="javascript" type="text/javascript">
- <script src="special.js" language="javascript" type="text/javascript">
Call the function in the document where you want the script run, with a line like:
<script language="JavaScript" type="text/javascript">footer ()</script>
Check with your hosting provider if you're having trouble getting your external JavaScript files to work. Servers must be configured to serve .js files.

Placing the Cursor in the Search Box by Default

This technique was provided by AtomZ for their search form. You can easily place the focus of your cursor in your search form by default. This will enable your visitors to be able to type their query without clicking in the search field first. To add this functionality to a Web page, follow the two steps below.

1. Copy and paste this code into the HEAD section of the page. <SCRIPT LANGUAGE= "Javascript">  </SCRIPT>

This code is written to look for the sp-q value in your search form. If you're using something other than sp_q, you'll need to modify the JavaScript to match. Also note that this code specifies form.document(0). That indicates the first form on the page. If you have other forms on your page, you'll need to specify the correct number for your search form.

2. Add the following OnLoad command into your BODY tag.
<BODY OnLoad="placeFocus()">

When you set this up on your Web pages, you might also want to do the same in your template for your search results page. To modify your search results template, follow the Templates link to "Template Editor" and do the following:
1. Paste the JavaScript code from Step 1 above into the HEAD section.
2. Find the <SEARCH-BODY> tag in your template and add the OnLoad command to it, like this:
<SEARCH-BODY OnLoad="placeFocus()">

Dynamic-FX slide in menu v6.5 (By maXimus, maximus@nsimail.com)

Dynamic Content with DOM-2

An advanced article at O'Reilly Network by Scott Andrew LePera (Aug '01). Document Object Model (DOM) provides a scriptable interface for a document structure. With the DOM, an HTML document is described as a series of nodes, each node representing an object in the document, including all text, tags, comments, and other data. Altering these nodes through JavaScript, a developer can alter the visual display of the page in a browser. Learn how to use DOM methods to create, insert, and remove elements and text nodes from the page in part I, and how to use the JavaScript node interface to alter element attributes with DOM element methods, and change an element's style properties through the DOM Level 2 (DOM2) Style specification interface in part II. Part I of II and Part II of II.