01.06.07
Posted in Coding at 2:47 pm by David Kellogg
- alert() is a native method
- alert() is part of window
- alert() is part of this
- alert() can be rewritten
- alert() can be saved and reused
alert() is a dull function, useful for debugging and annoying users with messages that their password must contain at least one non-alphanumeric character. Let’s spice things up a bit while we find the true essence of this old companion.
1. Alert is a native method. It is not made up simply of other Javascript. This can be confirmed by typing javascript:alert(alert.toString()) into the location bar. We want to rewrite this, but luckily, the native code part will not stop us.
2. Alert is a function of window.
window.alert(”hello!”);
is the same as the non-window.alert() version.
3. alert() is part of ‘this’.
this.alert(”alert from this”);
This agrees with window being at the top level.
4. alert() can be rewritten.
function alert(message) {
document.writeln(message+”<br>”);
}
5. alert() can be saved and reused.
Sometimes while writing extensions, I want to dump some data through alert, but I want to limit the number of times alert can be called. Here is how to do this.
var temp_alert = alert;
alert = function(msg) {
if(alert.count++ < alert.max_alerts) {
temp_alert("Note from alert "+alert.count+": "+msg);
} else {
document.writeln("Max alerts reached!");
}
}
alert.count=0;
alert.max_alerts = 2;
alert("dude");
alert("dude");
alert("dude");
alert("dude");
Result:
Max alerts reached!
Max alerts reached!
Permalink
12.21.06
Posted in Coding at 9:36 pm by David Kellogg
A whole book could be written about the complications of Javascript’s ‘this’. For Javascript coders who are accustomed to C++, Java or even PHP, ‘this’ becomes a mind bending subject quickly. Here’s an example that makes sense.
var global_var = 25;
function Funky(input) {
this.inside = input;
document.writeln(”this.inside: “+this.inside);
function Insider(information, parent) {
this.info = information;
document.writeln(”Inside Insider: info is “+this.info);
document.writeln(”Funky inside is “+this.inside);
document.writeln(”Parent (Funky) inside is “+parent.inside);
}
var inside = new Insider(”Too many secrets”, this);
document.writeln(”info is “+this.info);
document.writeln(”global_var: “+global_var);
document.writeln(”window.global_var: “+window.global_var);
}
var funk = new Funky(”hello funky!”);
Result:
this.inside: hello funky!
Inside Insider: info is Too many secrets
Funky inside is undefined
Parent (Funky) inside is hello funky!
info is undefined
global_var: 25
window.global_var: 25
– DK
Permalink
Posted in Coding at 4:18 pm by David Kellogg
After my ‘watch()’ post, Frozen O pointed out that call and apply need the love, too. The great thing about Javascript is that you can construct classes out of useful functions, then reuse these functions for other classes. Just to make the point, I used ‘this’ to show that the function really does become owned by the calling function.
function show_state(yes_or_no) {
if(yes_or_no) {
document.writeln(”State is “+ this.state);
} else {
document.writeln(”State is not “+ this.state);
}
}
function Puppies(temperature) {
this.state = temperature;
show_state.call(this, true);
show_state.apply(this, new Array(true));
}
function Happiness(mood) {
this.state = mood;
show_state.call(this, true);
show_state.apply(this, new Array(false));
}
var puppy = new Puppies(”warm”);
var marriage = new Happiness(”bliss”);
Result:
State is warm
State is warm
State is bliss
State is not bliss
Permalink
12.17.06
Posted in Coding at 1:16 am by David Kellogg
I recently read The Laws of Simplicity by John Maeda. It proposes an explanation why the iPod is selling so well (you guessed it, simplicity), and why both simplicity and complexity have their place in our lives. I’m sure Maeda already thought of this, but here are my thoughts with respect to writing code.
Too many coders are interested in complexity, and too few in simplicity. While our goal should be to boil it all down to produce a simple API for the others to use, this rarely happens. Consider the following instructions.
1. Install the package, startup.tgz
2. First, read the Sizing Document to assure you are using the correct number of nodes.
3. …
The instructions are already broken. Step 2 should come first, or better, it should not exist. Taking away the obvious helps the instructions work more smoothly.
Here’s a coding example. Once I worked on SOAP (ironically ‘S’ stands for Simple), a standard so complicated, that no two different SOAP implementations ever seem to talk to each other. SOAP seemed to be complexity for the sake of complexity. After running through the hello world example, I had a number of files to deal with.
quote.xml
quoteGetQuote.xml
quoteAddStock.xml
quoteGetMultiQuote.xml
Every function had an xml file to describe it! I responded quickly by erasing every xml file through the Makefile to keep the future coders’ life simple. These files added nothing to the system. The point here is that I always need to delete and delete until nothing is left but working code.
Maeda’s conclusion is one I believed for a while, though he is more articulate than I in making the point. Simplicity is not necessary making the whole simple, but hiding the complexity that does not serve the user.
Permalink
12.14.06
Posted in Coding at 11:32 am by David Kellogg
I don’t know why, but no one seems to use Javascript’s watch(). It’s such a useful function, since it can change other variables when one changes. Here’s some example code.
var ref_count = 2;
watch(”ref_count”, handle_ref);
function handle_ref(id, old_val, new_val) {
if(new_val < 0) {
document.writeln("stopping decrement for "+ id);
return 0;
} else {
return new_val;
}
}
document.writeln("ref now "+ref_count+" ");
ref_count--;
document.writeln("ref now "+ref_count+" ");
ref_count--;
document.writeln("ref now "+ref_count+" ");
ref_count--;
document.writeln("ref is now "+ref_count+" ");
In this case, ref_count never falls below zero. Here’s another.
location.watch(”href”,handle_href);
function handle_href(id, old_val, new_val) {
alert(”next location: “+new_val);
return new_val;
}
setTimeout(”location.href = ‘http://search.yahoo.com/’”, 3000);
location.watch(”href”,handle_href);
function handle_href(id, old_val, new_val) {
alert(”next location: “+new_val);
return new_val;
}
setTimeout(”location.href = ‘http://search.yahoo.com/’”, 3000);
This one waits 3 seconds, warns you about the change of location, and loads the next page. This is interesting in that the ‘location’ object watches for one of its variables, ‘href’. Using watch(), a coder can change more than one AJAX innerHTML element at once or keep separate variables in sync with each other.
Permalink
Next entries »