scottandrew.com

Noteworthy

You're currently viewing a very old version of this website. Follow me to the latest version.

-->

The JavaScript Junkyard

The JavaScript Junkyard is a bunch of silly code I've found useful for one reason or the other. Some of them are truly useful, such as the cookie functions, while others are more like adventuresome like inPoly. Many of the geometry and trig-based functions were designed as components for arcade-style DHTML games.

Example pages are forthcoming, when I have the time.

sortByProperty
addEvent / RemoveEvent
Cookie Functions
getQueryArgs
getRandomColor
readFile
roundTo
getDistance
getAngle
inPoly

Download JS Utilities (3KB, ha ha!)

sortByProperty
sortByProperty(string property, boolean reverse)

This is actually an extension to the JavaScript Array object which enables you to sort the array order based on a specific property of each array element, instead of just the element itself. It also allows you to sort in reverse order. Read about it here.

addEvent
removeEvent

addEvent(object elm, string evType, object fn, boolean useCapture)
removeEvent(object elm, string evType, object fn, boolean useCapture)

These are the unified methods for event handling from my tutorial, Crossbrowser DOM Scripting: Event Handlers.

Cookie Functions
saveCookie(string name, string value, int days)
string readCookie(string name)
eraseCookie(string name)

These cookie functions are mongrels, having evolved from code I originally found at Dan Steinman's site, which itself was written by someone else. I use these functions to save the theme preferences on scottandrew.com.

To save a cookie, pass the name, value and the number of days you want the cookie to "live" to the saveCookie function. Use readCookie and eraseCookie functions to read and erase cookies set with saveCookie.

getQueryArgs
array getQueryArgs([boolean global])

This function parses the query string that accompanies a URL and returns the values as an associative array named args, thus saving you the trouble of having to parse out the query string yourself. For example, given the following URL:

http//yourdomain.com/book.cgi?chapter=10&page=33

...you can get the chapter and page values via JavaScript through the args array:

var current_chapter = args["chapter"];
var current_page = args["page"];

By passing true as the value of global, getQueryArgs will evaluate all name-value pairs in the URL as global JavaScript variables, similar to the way PHP handles query string info. For example, to find the chapter value in the above URL, you can simply reference the variable chapter and skip dealing with the args array. Keep in mind that this approach will overwrite any global variables of the same name you may have already defined, so use global with caution.

I haven't really tested this function on values with crazy URL encodings, so if anyone out there is hip to string encoding and has ideas on how to improve this snippet, feel free to speak up.

getRandomColor
string getRandomColor([bool safe])

Returns a random hexadecimal color. Passing true for safe returns a web safe color.

readFile
string readFile(string url)

This function reads the file at the specified URL and returns its contents as a JavaScript string. The URL must be fully qualified, including the "http:" prefix, host name and port, if applicable. Works in NS4.x with Java enabled (PC, not Mac), IE5+, and Mozilla 0.9.5+

roundTo
int roundTo(int p,int n)

Rounds n to nearest p.

getDistance
int getDistance(int x1,int y1,int x2,int y2)

Returns the average distance between two specified points. Useful for determining the distance between objects on screen in pixels, by comparing the left and top style properties. I've used this for arcade-style DHTML games where I wanted to see if a particular object was "within range" of another. Otherwise, this function is pretty useless.

getAngle
int getAngle(int x1,int y1,int x2,int y2)

Another fun but otherwise useless function that the angle of the radian described by the two specified points. The first point (x1,y1) specifies the origin of the radian.

inPoly
boolean inPoly(array points,int x, int y)

This function borders on super-useless, as it mimics imagemap functionality by determining whether a specified point is inside a defined polygon. It's based on Bob Stein's inpoly() function for the C programming language. The first argument, points, is an array of coordinates that define the vertices of the polygon. You can create this array of points with any imagemap program, provided the follow the typical imagemap coordinate format: x1,y1,x2,y2,...xN,yN.

The second and third arguments are the X and Y coordinates of the point you wish to test. inPoly returns true if the point is determined to be inside the polygon, false if not.

I orginally intended to use inPoly for more finely-tuned collision detection between irregularly-shaped DHTML objects, such as spaceships colliding with asteroids and so on. Unfortunately, while inPoly is hella fast, the overhead involved in invoking inPoly each and every time an object moved proved to be too taxing on the browser's little brain. Still, it was an fun experiment.