JavaScript is very useful, but there is no reason to go overboard with it. Not all users can, or choose to allow JavaScript to run, and there are other ways to do things on a web page, so choose your scripts with care and remember to provide for the JavaScript disabled out there.

Common JavaScripts to do right by your users

For backward compatibility, and the JavaScript impaired
Setting focus to the input box
Code for an onscreen 'Back' link.
Opening a new window from an on-screen click
Closing a regular window.
Open and close a popup window
Protect your email address from SPAM harvesting robots
Prepared "email me" button.

 


For backward compatibility, and the JavaScript impaired

<script language="JavaScript" type="text/javascript">
<!-- hide the following script from old browsers
...
// end of hiding -->
</script>

<noscript>
This page requires JavaScript. Sorry if your browserdoesn't support it. Instead you may...
</noscript>

Note: JavaScript code is shown in red, inline HTML code shown in green, and my comments in black.

 


Setting focus to the input box

The most ignored, and simple to do script on the web !  Don't piss people off, put the cursor in the first input box for them so they don't have to waste a click, or worse.

<script language="JavaScript" type="text/javascript">

function InputFocus() {
  myForm.1stInputBox.focus();
  }

</script>

<body onload="InputFocus()">
...
<form name="myForm" method="POST">
...
<input name="1stInputBox" type="text" size="10">
...
</form>

Or, if you don't know, or care, about the form's input element(s) name...

<script language="JavaScript" type="text/javascript">

function InputFocus2() {
  if (document.forms.length > 0) {
    var field = document.forms[0];
    for (i = 0; i < field.length; i++) {
      if ((field.elements[i].type == "text") || 
      (field.elements[i].type == "textarea") || (field.elements[i].type.toString().charAt(0) == "s")) {
        document.forms[0].elements[i].focus();
        break;
        }
      }
    }
  }
</script>


<BODY OnLoad="InputFocus2()">


Code for an onscreen 'Back' link

<a href = "javascript:window.history.go(-1);">

...or

<script language="JavaScript" type="text/javascript">
  function back_button(){
   history.go(-1);
  }
</script>


<form>
<input type=button onClick= "back_button();" value="Back">
</form>>

 


Opening a New Window from an on-screen click


<a href="any_url" target="newwindowname"> descriptive link text </a> 

...or

<a href="#" onClick="window.open('full_url')"> descriptive link text </a>

...or

<a href="JavaScript:window.open('full_url')"> descriptive link text </a>

...or

<script language="JavaScript" type="text/javascript">
function OpenWindow1(url) {
  windowprops = "top=0,left=0,resizable=yes" + ",width=" + screen.width + ",height=" + screen.height;
  window.open(url, "popupPage", windowprops);
  }

function OpenWindow2(url) {
  windowprops = "toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes";
  OpenWin = this.open(url,"NewWindowName",windowprops);
  }
</script>


<a href="javascript:OpenWindow2('full_url')";> descriptive link text </a>

...or

<form>
<input type=button onClick="OpenWindow1('full_url');" value="descriptive link text">
</form>

Note: many variations are possible in implementing this behavior, length of code, new window characteristics, etc. Use what's best for your situation.


Closing a regular Window from a Link Click or form button


<a href="javascript:window.close()">Close</a>

...or

<form>
<input type="button" value="Close" onClick="window.close()">
</form>


Open a popup window, and be a good net citizen by closing it after a certain number of seconds


<script language="JavaScript" type="text/javascript">
function popupWin() {
  htmltext = "<html>\n<head>\n<title>Pop Window</title>\n<body>\n";
  htmltext += "<center>\n<br>";
  htmltext += "<a href='http://javascript.internet.com/new' target='_blank'><h2>New JavaScripts</h2></a>";
  htmltext += "</center>\n</body>\n</html>\n";
  setTimeout('windowProp(htmltext)', 1000);         // wait 1 second before opening
}

function windowProp(text) {
  newWindow = window.open('','newWin','width=300,height=100');
  newWindow.document.write(text);
  setTimeout('closeWin(newWindow)', 3000);        // wait 3 seconds then close window
}

function closeWin(newWindow) {
  newWindow.close();
}
</script>

<BODY onLoad="popupWin">

 


Protect your email address's from SPAM harvesting robots

<script language="JavaScript" type="text/javascript">
  user = "username";
  domain = "yourdomain.com";
  document.write('<a href=\"mailto:' + user + '@' + domain + '\">');
  document.write(user + '@' + domain + '</a>');
</script>

Note: Those individuals who have turned off Javascript, will not be able to see or use your email address.

 


Prepared "email me" button

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
function MailMe() {
  mailname = "yourname";
  ccname = "othername";
  domain = "yourdomain.com";
  carbonc = "?cc=" + ccname + "@" + domain;
  subject = "&subject=" + "subject text here"; 
  bodytext = "&body=" + "body text here"; 
  parent.location = "mailto:" + mailname + "@" + domain + carbonc + subject + bodytext ;
}
</SCRIPT>

<FORM>
<INPUT TYPE="button" onClick="MailMe();"VALUE="Contact Us">
</FORM>


Note: All parameters after the '?' are optional, use as needed.