JavaScript

From Devpit

Jump to: navigation, search

Contents

Embedding

The JavaScript itself should be surrounded with this:

<script type="text/javascript"> // <!--
  // code goes here
// --></script>

This is because the characters & < > have special meaning in both HTML and JavaScript, and while JavaScript is embedded in HTML, it cannot be HTML-quoted. So replacing & with &amp; and < with &lt; does not work as it should. This is why the comment kludge is necessary.

Quoting

Because of the strange behaviors described above, some things just can't be quoted without trickyness. Here's an easy trick:

var email = unescape("%22Full%20Name%22%20%3Cemail%40somewhere%3E");
alert(email);

will display the alert box:

"Full Name" <email@somewhere>

This is particularly useful when inserting dynamic strings into JS code on the fly, but it can also be useful if you simply have characters that would mess up a JS string, such as:

<img src="url" onclick="alert('put a quote in here, sucker!');" />

URI encoding is a nice solution because it's nestable (unlike quotes). However, do not use the decodeURI() function in place of unescape(). It does not do what its name implies -- only about half. For example, it decodes %20 to space, but not %40 to at-sign.

Arrays

To construct your own array:

var my_array = [];
my_array.push('element zero');
my_array.push('element one');
my_array[2] = 'element two';

Arrays seem to be constructed out of other things. How this works is irrelevant here. What you need to know is:

  • This always works:
for(count = 0; count < my_array.length; count++)
  • This does not always work, particularly with arrays of objects fetched from the document:
for(count in my_array)

Hashes

Hashes are constructed the same way. I don't really know what the difference is, to be honest.

var my_hash = [];
my_hash['key1'] = 'value1';
my_hash['key2'] = 'value2';
for(key in my_hash) {
  alert(my_hash[key]);
}

Styling

If you assign an id="foo" attribute to an object, you can do some nifty things with it:

document.getElementById("foo").style.color = "red";
document.getElementById("foo").style.background = "black";

To put the color back to whatever its parent element's color is:

document.getElementById("foo").style.color = "";
document.getElementById("foo").style.background = "";

Forms

If you assign an id="foo" attribute to an input object, you can control it:

  • Get the value of an input field, such as a text field:
document.getElementById("foo").value
  • Set a radio button or checkbox to checked:
document.getElementById("foo").checked = "checked";

Or unchecked:

document.getElementById("foo").checked = "";

To reset or submit the form, use the id assigned to the form tag:

document.getElementById("my_form").reset();
document.getElementById("my_form").submit();

Notes

  • If you have a group of radio buttons, they should all share the same name attribute but have unique id attributes. This lets ou control them individually via the id in JavaScript. The name is what is returned to the server as CGI input.

Popups

There are lots of wrong ways to do popups. A correct popup:

  • Will always work, even when JavaScript is off or broken
  • Will be pulled to the front if possible
  • Will not fill the full screen if possible

This can be accomplished like this:

<a href="url" target="popup" onclick="popup('url'); return false;">

Notice that the return false will cancel the href action, which means that if the JavaScript popup works, the href is never followed. However, if the user has JavaScript off, the site is still functional with the old-style somewhat-annoying target popup that isn't pulled forward if it's already open and usually pops up full-screen. The popup() function is as follows:

<script type="text/javascript"> // <!--
  // This pops up a window
  function popup(location) {
    var width = screen.width * 0.75;  // Adjust this or parameterize it as necessary
    var height = screen.height * 0.75;  // Adjust this or parameterize it as necessary
    var newwin = window.open(location, "", "resizable,status,width=" + width + ",height=" + height + ",scrollbars=yes");
    newwin.location = location;  // Kludge around IE 6 bug
    newwin.focus();
  }
// --></script>
Personal tools
sponsored projects
Google AdSense