Various tasks performed in JavaScript

Various tasks performed in JavaScript:

Note: the previous link at this location went to a broader scope. Most people seem to have been headed here, so I've de-elevated that link and elevated this one. The other material is less cross-browser compliant and some (like the tutorial) is quite out of date. --dpd, Spring 2006 .

JavaScript Fun and Games, Various Cool Links, JavaScript References, JavaScript Tutorial(very old) JavaScript and HTML editor

Key: I=works in Internet Explorer 6.0, F=works in Mozilla Firefox 1.5, S=works in Safari 3.1.1; O=works in Opera 9.0(all running under Windows).

- = only partially working

? = not recently tested

I	F	O	S	Ajax -- (asynchronous JavaScript) a simple example that guesses what you are typing. (This involves no real XML, but it is simple.)
I	F	O	S	Animation of arrays of objects and DOM
I	F	O	S	Array management -- push, pop, shift, unshift, sort, concat, slice, splice, split, and join.
I	F	O	S	Associative arrays -- these are really objects that act like associative arrays
I				Bezier curves -- drawn using VML -- a four-step lesson culminating in eeliness (wormishness?).
I	F	O	S	Changing the direction of something moving on a page
I	F	O	S	Clipping pictures.
I	F-	O	S	Colors: Color Scheme Explorer and Rainbows aren't built in a day (IE only: see also, using VML, bivariate sinusoidal containing HSB to RGB conversion and building a random color.)
I	F	O	S	Columns -- a two column layout using CSS (and display of source code)
I	F-	O	S	Creating a div -- using document.createElement("div") and document.body.appendChild()
I	F	O	S-	DOM: Exploring the Document Object Model -- now working in Netscape and Mozilla (they fixed it).
I	F	O	S	DOM -- interrogating certain properties
I	F	O		Probing the DOM -- using nodeName, nodeValue, firstChild, nextSibling, getElementsByTagName
I	F-	O	S	Dragging and making div tags -- using cloneNode and appendChild. Cloning is fine in Firefox; dragging isn't.
I	F-	O	S	Dragging and dropping a picture -- a bit clunky in Netscape 5+, but working. Dragging and making images -- IE and Opera (not Firefox). Another version enables the cursor to become a hand-slider, moving images as it selects them.
I--	F-	O-	S	Drawing Lines -- (and other things) using VML from Microsoft, SVG from W3C and Adobe, funky transparent GIFs, or even funkier tables. I need to fix some broken links here. VML works only in IE. This page is very old and needs work! SVG stuff was done before O, FF, and S had SVG support so it is broken. Does not use <canvas>.
I	F	O-	S	Dynamic use of Sound : Playing the tablas pseudo-randomly with JavaScript. IE only: Dynamic use of Sound Instead of just having one bgsound affiliated with a page, how to let sounds be triggered by events?
I	F-		S-	Editing and running JavaScript, HTML and SVG in the browser
I	F	O	S	Encoding a message -- something known as a polyalphabetic cipher, this takes a plaintext string C=(c1,c2,c3,...,cn), and a key string K=(k1,k2,k3,...,km) and produces a cipher text T=(t1,t2,t3,...,tn) where ti=(ci+k(i%m))%n, or something nearly like it. It was good enough for the first half of WWII, but can be decrypted fairly easily with modern gadgetry. For more flamboyent encryption take a peek here or here.
I	F	O	S	Event trickle and event management
I	F	O	S	Event handlers -- assigning dynamically using function(){}(and traversing nodes)
I	F	O	S	Excerpting material (text and links) from a web page; then making a "bootstrap text" based on lexical frequencies and co-occurrences: deriving in the manner of a given author (e.g., Jane Austen -- IE only).
I	F	O-	S	Font-families -- not an extensive treatment, but it may give some idea of how to use font styles and of what fonts may work where.
I	F	O	S	Functions -- playing with unknown functions, finding which function called another, revealing source, passing functions as arguments to metafunctions and invoking anonymous functions.
I	F	O	S	functions: Self-documenting functions -- building a menu of all the functions in the head of a document so as to allow the viewing of their source code
I	F	O	S	functions: rewriting and running a function on the fly
I	F	O	S	Frameset: Making sure the frameset is there -- What if someone links to a page which requires a frameset?
I	F	O	S	Hiding a button -- Changing the visibility of an object through style.visibility='hidden'
I	F	O	S	Measuring the screen -- how much real estate is available?
I	F	O	S	Mouse coordinates -- knowing the x and y coordinates of the mouse.
I	F	O	S	Simply permuting , Step by step: permutations and sampling without replacement -- using Array.slice() and Array.concat(). See also mapping strings to permutations and the use of Array.splice().
I	F	O		Objects and such -- constructors, methods, inheritance, anonymous functions, classes and instances.
I	F	O	S	Playing with JavaScript objects -- Creating and deleting objects of a user-defined class.
I	F	O	S	Preloading an image
I	F	O	S	Prime factorizing
I	F	O	S	Random number generation and evaluation
I				Recognizing and removing selections from a textarea.
I	F	O	S	Regular expressions in JavaScript
I	F	O	S	Rewriting parts of a document (without document.write): Creating a div Splitting cells of a table (using innerHTML). Cow-plop. Rewriting for IE only fancy bouncing sticky cow-plop The reason this doesn't work in other browsers is because of using insertAdjacentHTML -- I should rewrite using innerHTML or appendChild( ).
I				Random access slide projector. Fading between pictures, using filters.blendTrans.Apply(). IE only. Another IE only approach that attempts to hide the source code. See below ("transparency and opacity") for suggestions on how to make this consistent across browsers.
I	F	O	S	Sorting an array -- using B=A.sort(compare);
I	F	O	S	Sorting objects -- to convert a string to a permutation
I	F	O	S	Sorting an associative array using objects
I	F	O	S	Displaying source code: Self-documenting functions (In IE the <script> elements are located in scriptstring=document.all[4].text. Displaying source code of IE functions.)
I	F	O	S	Source code of an HTML document -- serializing HTML and JavaScript.
I	F	O	S	String handling -- some of the fancier string handling things, like values of keystrokes, string.replace, string.split, ASCII, hexadecimal, regular expressions.
I	F	O	S	building large strings and time efficiency -- why repeated concatenation may not be best at least in IE. Note how fast Opera 9.0 is compared to the others.
I	F-		S	Styles and events -- dragging, resizing, and fading an image -- involves opacity.
I	F-	O	S-	SVG -- several JavaScript animations involving SVG. For IE, these require SVG plugin from Adobe. Opera 9 and Firefox 1.5 provide native SVG support. Firefox lacks SMIL and some filters.
I	F	O	S	Time -- various JavaScript properties for time and date
I	F	O	S	Transparency and opacity -- changing the opacity of an image or div in a simple animation.
I	F	O	S	Table -- should not most tables be field-sortable by clicking on column heads? Also Appending and removing rows of a table
I	F	O	S	Useable Unicode? and Unicode dabble -- is an alphabet of 2¹⁶ characters, really enough? Suppose I want my own range of a few hundred?
I	F	O	S	Warping and weaving
I		O-	S-	waving, dragging to warp and building custom gradients to ripple across an image (using SVG)
I		O	S	Who did that? More precisely: how can a function know which object's event handler was activated. See also event handlers
I				Writing files in JavaScript using execCommand('SaveAs',false, '.txt') in MSIE for Windows.
I				VML -- some exercises using Vector markup language. HTML embedded VML is perhaps easier to work with than SVG, but is less powerful and unlikely to be supported by browsers other than IE.
I				XML: reading files with JavaScript -- much of what is being done here uses IE data islands, or Active X To get it to work in other browsers one uses something like CreateXMLObject and then plunges into the XML DOM through techniques such as here: Serializing HTML
I				zooming -- cute, but very IE specific because of use of VML -- (could be redone without much work to work in other browsers)