JavaScript and OOP for the DOM

I wanted a color transition effect on web page elements when the mouse cursor passed over them – like a:hover, but for any element, not just a link, and a transition over say 0.8 seconds, not just an abrupt change. onmouseout should transition to the original color of the element.

This can be done using onmouseover and onmouseout, but I wanted to set it up for elements of a given tag, class or id. So (after only 2 days) I did it using OOP in JavaScript – listing below. I define a class (strictly a prototype) called ColorP, which will have the behaviour I want, and associate some web page elements with instances of this class.   One tricky point is that the method to change the color has to be recursive, and it was difficult to find the syntax for this. Thanks to Pablo Cabrera for ‘arguments.callee’, which must be one of the obscurer backwaters of JavaScript.

The web page body is:

<p id=”test” style=”color: rgb(0,255,0);  background: #ff00ff” Hello</p>

<h1 id=”two” “>Goodbye</h1>

The body onload calls:

function start()
{
obj1 = new ColorP(“test”);
obj2=new ColorP(“two”);
return;
}

So 2 objects are created associated with these two elements. We could have traversed the document tree and done this for given tags or classes. The code for ColorP objects is:

function ColorP(id)
{
// data members ///////////////////////////////////////////
var obj;
// time in mS delay before each recursive call
var timeStep;
// initial colors
var red, green, blue;
// color change each step
var rDiff, gDiff, bDiff;
// current color
var red1, green1, blue1;
// target colours and time for transition
var r,g,b,time;
// count and count1 count the transition steps
var count, count1;

// two methods /////////////////////////////////////////////
this.fadeIn = function()
{
if (count==10) {
count=0;
return;
}
count++;
red1+=rDiff;
green1+=gDiff;
blue1+=bDiff;
// set colors to integer values
intR = Math.round(red1);
intG = Math.round(green1);
intB = Math.round(blue1);
obj.style.color=”rgb(“+intR+”,”+intG+”,”+intB+”)”;
setTimeout(arguments.callee, timeStep);
}

this.fadeBack = function()
{
if (count1==10) {
count1=0;
return;
}
count1++;
red1-=rDiff;
green1-=gDiff;
blue1-=bDiff;
// set colors to integer values
intR = Math.round(red1);
intG = Math.round(green1);
intB = Math.round(blue1);
obj.style.color=”rgb(“+intR+”,”+intG+”,”+intB+”)”;
setTimeout(arguments.callee, timeStep);
}

// cnstructor code ///////////////////////////////////////
r=255; // could be passed as constructor parameters
g=0;
b=45;
time=0.7;
// we will do this in 10 steps
// so time for each step = time * 100 milliseconds
timeStep = time*100;
count=0;
count1=0;
obj=document.getElementById(id);
// get colors
styles=obj.getAttribute(“style”);
cols=getColorFromStyles(styles);
if (cols==null) return; // do nothing if can’t obtain color’
// change to numbers
red=parseFloat(cols[0]);
green=parseFloat(cols[1]);
blue=parseFloat(cols[2]);
// work out colour change amounts
rDiff=(r-red)/10.0;
gDiff=(g-green)/10.0;
bDiff=(b-blue)/10.0;
// set current colors to the initial ones
red1=red;
green1=green;
blue1=blue;

obj.onmouseover=this.fadeIn;
obj.onmouseout=this.fadeBack;

}

Unfortunately the code to get the color style is different for IE:

// get foreground color from a set of style attributes
// this returns an array of 3 values – the rgb components
// it works for colors ONLY in the form rgb(a,b,c). If there
// are no styles, or no color defined, it returns
// the equivalent of black
function getColorFromStyles(styles)
{
// in IE, styles is a style object, and styles.color yields the color
// in FF and Opera, styles is a string like ‘color:rgb(1,2,3); background: rgb(4,5,6)’
c=styles.color;
if ( c == undefined ) // NOT IE, so get color:.. out of the string
{
if (styles==null)
return new Array(0,0,0);
// split on ; to separate attributes

pairs=styles.split(“;”);
// search for color
for (i=0; i<pairs.length; i++)
if (pairs[i].search(“color”)!=-1) break;
if (i==pairs.length) // no color..
return new Array(0,0,0);
// separate style from substance (!)
value=pairs[i].split(“:”);
// value[1] is rgb…
col=value[1].slice(5,value[1].length-1);
colours=col.split(“,”);
return colours;
}
else // for IE, so c is like ‘rgb(12,3,4)
{
if (c==”") // no color defined
return new Array(0,0,0);
col=c.slice(4,c.length-1); // slice from rgb(…
// split 3 parts on ,
colours=col.split(“,”);
return colours;
}

}

This works on FireFox, Opera and IE – maybe others

How people learn

This is an attempt to describe how ‘adults’ learn new concepts in a formal setting, such as a college course. I’m mostly thinking about ’scientific’ subjects like maths physics and computing. I’m using learning Java as the source of examples.

It uses some other ideas. Two crucial ones are frames and mental spaces . Read that link if you are interested in this and want to make sense of this blog.  It also uses the idea of a compression.

Psychologists have usually treated concepts as categories, delineated by a definition. Work by people like Rosch showed this was simplistic, with ‘real’ concepts being more complex than this. This led to the idea of concept being based on an ‘ideal’ instance (prototype theory), a set of remembered examples (exemplars), and degree of possession of typical features (typicality).

Moving beyond concept as category, Neisser and others developed the idea of concept as implicit theory – which is very relevant to ‘understanding’ an idea. To understand what a Java object is, we need a lot more than simply to be able to decide if something is an object or not.

Typical college teaching shows all of the aspects of concepts. Often definitions are given, examples, descriptions (usually of typical instances) and so on. In addition, students will usually work through ‘exercises’ in which they are obliged to engage actively with some examples.

There is a particular problem if there is no definition of a concept. For example, the Java class/object concept has no semantic definition ( the syntax of a class definition is available, but it is no use to a student trying to understand what a class is). In this situation there is usually some teaching discourse (in a textbook or lecture) which tries to deliver an understanding of the idea through prose – but this is extremely difficult. For example one standard Java student text says that ‘objects belong to classes’. But this strongly suggests that a class is a set, and an object is an element in the set, which supports the partonomy/taxonomy confusion.

In these situations we have general concepts (class/object, or type) and examples ( JButtons, JFrames, classes developed by the student in lab sessions, or for type, ints, chars, doubles, booleans and so on).

A student coming to understand these general concepts does so by taking the examples (a multiplicity of mental spaces which include the examples), and compressing them into a frame. That’s it.

Students are individuals, and there are individual differences. For example one student may be slow to do this – he may be very fluent handling ints and doubles, while denying any recognition of the idea of type. Other students may actually do this too fast – rather as infants over-generalize terms. For example one student had absorbed the idea of inheritance, and had then assumed that ActionListener, WindowListener, MouseMotionListener and so on were sub-classes of a common base class ( semantically correct but syntactically wrong, since these are interfaces and not classes).

An example blend

How do we really understand ideas? How do we make sense of things beyond the purely concrete? Like time, or jokes, or freedom, or software? That’s my question.

And I think at least part of the answer is as conceptual blends. Not my idea – it comes largely from Gilles Fauconnier. Let me outline one of his examples.

The idea of a ‘computer virus’. An irritating idea, but also creative and imaginative.

Blends have (usually) 2 input spaces. In this case, one is a computer program. This space has several ’slots’
Made by a human (programmer)
Useful
Needs computer hardware to run on

The other input space is a biological virus
Made by evolution
Harmful
Needs host living cell
Reproduces

Then we do a selective projection of these slots. In other words, we pick some from one input and some from the other. This is very precise – its not a blend as in food blender – we don’t get mush. In the output space we have

Made by a programmer
Harmful
Needs host hardware
Reproduces

And there you have a new idea.

But this is not at a conscious explicit level – the first people to write viruses did not work it out like this, in the sense that they were aware of what they were doing in this way. The hypothesis is that the human central nervous system holds, uses and transforms concepts in a way somehow related to the process described here.

What a Java class really is

At the heart of OOP is a statement like
someObject.someMethod();
This is usually decribed as ‘calling’ or ‘invoking’ someMethod on the object someObject.

It is an imperative, and it is usually described as sending a ‘message’ to someObject, telling it to do someMethod. This is a more or less explict metaphor, built on top of metaphors we are probably unaware of – unless we have read Lakoff. But there are big problems with it. As a minor point, the ‘message’ metaphor has two difficulties
1. Messages are asynchronous. If I send you a message by email or SMS or post, it might be several days before you read it.
2. Messages are optional – they can be ignored.

But the big problem is who is the agent – that is, who is the imperative addressed to – who is supposed to do it? In English, this is implicit, as in
“Stand up!”
or explicit, as in
“No-one leaves the hall, Sargeant!”
Usually the Java form
someObject.someMethod();
is thought of as a message TO someObject, telling IT to do its someMethod. This is wrong, since the agent which executes the method is actually the ’system’, the JRE. Futher, it breaks the metaphor, since often the method is something which happens TO the object, not carried out by him. Eg in a personnel system we might have a method to fire an employee, and we would say
joe.dismiss();
but Joe does not dismiss himself – it is done to him.

So what does the . actually mean? It is to identify the namespace of the method, and the object primarily affected. That is, someMethod() might occur in several classes. Which one do we want? The one in the class that someObject belongs to. And which object will someMethod() primarily affect? someObject.

So a class is a namespace.