Archive for March, 2010

public and private in JavaScript

Posted in open source on March 31, 2010 by scottdowne

In order to enjoy programming in JavaScript you have to be at least a little crazy. Take this for example:


function Obj() {
var private = {};

this.publicVar = "inside";
private.privateVar = "inside";
this.getPublic = function() {with(this){with(private){
return publicVar;
}}};
this.getPrivate = function() {with(this){with(private){
return privateVar;
}}};
}

This is, I think, the complete way to emulate Java objects with private and public usage. All other ways are close, but always lack some little oddity that makes it less than pure. Another good thing about this method is it’s easily created after parsing Java-like code.

Take this usage for the above object:


var obj = new Obj();
alert(obj.getPublic()); // should alert inside
alert(obj.publicVar); // should alert inside
obj.publicVar = "outside";
alert(obj.publicVar); // should alert outside
alert(obj.getPublic()); // should alert outside

alert(obj.getPrivate()); // should alert inside
alert(obj.privateVar); // should alert undefined
obj.privateVar = "outside";
alert(obj.privateVar); // should alert outside
alert(obj.getPrivate()); // should alert inside

Now, I think I’ve thought of everything, and everything else, but if anyone out there can break this, or find a shortcut, or challenge it in another means, I would be very grateful. Note, if you want to try breaking it, you don’t have to understand the class itself, just how to use it, like I did in the second example.

blog post patch

Posted in open source on March 30, 2010 by scottdowne

Ok, I wasn’t 100% correct in my last post. There was something I didn’t consider.

Where I said:


Considering this class:


class Obj {
private String item;
public void setItem(String str) {
item = str;
}
public String getItem() {
return item;
}
}


and consider this usage:


Obj thing = new Obj();
thing.setItem("this has been set");
println(thing.getItem()); // prints "this has been set"
println(thing.item); // prints undefined, as it's not been used yet


Everything working as intended, until I try this:


thing.item = "if you see this, it's broken";
println(thing.getItem()) // prints "if you see this, it's broken" :(

I was wrong, that should work as I originally had hoped, but what was happening was processing.js would wrap it inside a with(this){…} function, which I’m still looking into, but it was doing things that I figured was just normal JavaScript, so I over looked it.

Here are some comparing classes, to illustrate what I mean:


// What should, and does work as intended.
function Obj() {
var privateMember = "hidden";
this.getMember = function() {
return privateMember;
}
}
var obj = new Obj();
alert(obj.getMember()); // alerts "hidden"
obj.privateMember = "not hidden";
alert(obj.getMember()); // alerts "hidden" :D

Now, what processing.js does:


// Does not work as intended.
function Obj() { with (this) { // This is the only change
var privateMember = "hidden";
this.getMember = function() {
return privateMember;
}
}}
var obj = new Obj();
alert(obj.getMember()); // alerts "hidden"
obj.privateMember = "not hidden";
alert(obj.getMember()); // alerts "not hidden" :(

Now, why not yank “with(this){…}” right out of there? I don’t know what it’s doing, yet. More on that later. But I’m hopeful to say I have a pretty solid direction.

processing.js public members public to everyone but itself

Posted in open source on March 29, 2010 by scottdowne

Ok, here’s what I’m doing. I’m trying to implement the private/public keywords for processing.js

And here are the problems. First attempt was ages ago, and that was to, inside a class, use this.variable; for public, and var variable; for private. This sort of worked, as it allowed me to use public members freely inside and outside the object, and I could not access private members, until they were set from outside the object.

Considering this class:


class Obj {
private String item;
public void setItem(String str) {
item = str;
}
public String getItem() {
return item;
}
}

and consider this usage:


Obj thing = new Obj();
thing.setItem("this has been set");
println(thing.getItem()); // prints "this has been set"
println(thing.item); // prints undefined, as it's not been used yet

Everything working as intended, until I try this:


thing.item = "if you see this, it's broken";
println(thing.getItem()) // prints "if you see this, it's broken" :(

It’s not very useful if private is restrictive but not protective. I thought the whole purpose was to protect you, the person using the object, from themselves, and not just restrict them from, themselves.

Anyway, I wasn’t done there. I spent this weekend rewriting the way processing.js translates a class. I was changing it so when you created an object, instead of returning an object, I would call a function that would set all the private members and functions, then return an object literal that would contain all the public variables and functions, which had access to the members in the preceding function, but those members no longer existed, and it worked! Here is an example of what I mean:


function Obj() {
var privateVariable = "It's a secret to everybody";
function privateFunction() {
...
}
return {
publicVariable: "...",
publicFunction: function() { return privateVariable; }
};
}

Usage of this is like so:


var obj = new Obj();
alert(obj.publicVariable); // alertss "..."
alert(obj.publicFunction()); // alerts "It's a secret to everybody"

Everything as expected until I try this… Consider this modified class:


function Obj() {
return {
publicVariable: "...",
publicFunction: function() { return publicVariable; }
};
}

and this usage:


var obj = new Obj();
alert(obj.publicFunction()); // crashes

So now, a private member is private to everyone but itself, which is good, and a public member is public to everyone… but itself. Two solutions, with two completely opposite caveats.

Final though: while writing this, I was thinking, and organizing my thoughts (kinda the point of blogging, for me) and I have two options I need to explore.

  • Change the public functions to use public variables with a “this.” before it. Example:

    return {
    publicVariable: "...",
    publicFunction: function() { return this.publicVariable; }
    };

    This works, but isn’t very practical as I’m translating Java-like class syntax into the javascript you see now, and I don’t want to go through all the code, just the structure; this method would require looking for the usage of all public variables, once I have a list of public variables, and add “this.”. Not ideal.

  • Another option, which I’ll try, is to add a list of public variables at the top of the code inside a function, like this:

    return {
    publicVariable: "...",
    publicFunction: function() { var publicVariable = this.publicVariable; return publicVariable; }
    };

    Passes the public variable inside this, into a new variable with said name, so I don’t have to touch the code inside the function, just add a header of sorts. I would have to do this with functions too.

JavaScript and multiline regular expressions

Posted in open source on March 28, 2010 by scottdowne

Just something I would like to share, because it was causing me grief :P.

While working on parsing a Java-like class into a JavaScript class, for processing.js. I needed to grab all member variables that are marked as public, using a regular expression, and return them as an object literal. Given this as an example:


public String thingOne;
public String thingTwo;

Into this:


{
thingOne: null,
thingTwo: null
}

This is what I ended up doing:


middle = middle.replace(/(?:(private|public)\s+)?(var[\s|\S]*?;)/g, function(all, access, variable) {
if (access === "private") {
return variable;
} else {
variable = variable.replace(/,\s*/g, ";\nvar ");
publicVars += variable.replace(/(?:var\s+)?(\w+)\s*=?\s*([^;,]*)(?:;)?/g, function(all, name, value) {
if (value) {
return "\n" + name + ": " + value + ",";
} else {
return "\n" + name + ": null,";
}
});
return "";
}
});

Now don’t worry too much about that, just a short background of what I was doing to bring me to the problem. Multiline regular expressions in Javascript.

From my favourite Javascript regex resource “Multiline Input ‘m’ This flag makes the beginning of input (^) and end of input ($) codes also catch beginning and end of line respectively.”. It does NOT do what you would expect, it simply allows code like this:


String one;
String two;

to match both lines with this /^String/gm. Without m, String two; would not match as it does not start at the beginning of the line, but after a \n. Another way to look at it is, m changes the meaning of ^ and $ to also match \n and \r (\r being carriage return). JavaScript regular expression is already multiline, in a way, as all lines are actually one long line with newline characters.

What I wanted to do was match any instance of “var (bunch of stuff) ;” spanning multiple lines. To grab examples like this:


public String thingOne,
thingTwo;

What I was using was something like this /var.*?;/g grabbing anything between var and ;, including whitespace and newlines? right? Nope, apparently not.

There was a trick I found to solve this. /var[\s|\S]*?;/ This uses \s which is any whitespace, including newline, OR \S which is anything NOT a white space, this is the TRUE anything, and a neat little trick.

morning train ride tangent

Posted in open source on March 24, 2010 by scottdowne

This morning, on the train, I wanted to open up processing.js and get back to working on ticket #237. I got into it, earlier and reproduced all the problems that the ticket entails. We have empty classes with no methods or constructors not working, we have constructors following methods working, but the methods above the constructor not working, and we have the hardest problem in overloading only working in terms of number of arguments, and not types of arguments. What I mean is:


void addItem(int item){...}
void addItem(String item){...}

This is valid processing, because the two methods are different, but, in JavaScript, variable types are not important, and the above code will be translated into:


var addItem = function(var item){...};
var addItem = function(var item){...};

The methods are translated into the same method, this also does not work with constructors either, which is a different problem because the way processing.js handles consturctors. What processing.js does is, because you can send any number of arguments into a method or constructor, and access the variable by using arguments[n], in a for loop less than arguments.length. This is how constructor overloading is handled in processing.js. There is only one real constructor, it just has if statements checking how many arguments there are. Here is an example for how processing.js translates a class:


class Obj{
Obj(String item){
item = "in constructor one";
}
Obj(int item, String item2){
item = "in constructor two";
}
}

into this:


function Obj() {with(this){
if ( arguments.length === 1 ) {
var item = arguments[0];


item = "in constructor one";

}

if ( arguments.length === 2 ) {
var item = arguments[0];
var item2 = arguments[1];


item = "in constructor two";

}


}}

If you notice, it’s just one method that filters out the contents of the constructor into various if statements, but it’s only the length of the arguments, and not the types. What I would need to do is grab the types before the types are lost, and then add a type check for all variables at the same time I check the argument length, but methods are not like this.

Funny thing is, while researching this, I came across this blog post, and as soon as I saw the code, I recognized it. This is John Resig’s blog, and he is the creator of processing.js, and his post helped me a lot with how to understand the addMethod, method, and the caveats involved.

Ah shoot, I got off on another tangent. Ok, While I was planning on doing this ticket I have been talking about up to this point on the train, I ended up seeing something in code that made me go back to my last ticke on array initialization. I noticed, later in the code, the use of ArrayList() for more than just creating an array, but initializing. I still cannot get it to initialize the array, but I’ve spend an unexpected morning on this. The idea of ArrayList is to send a size for the array, to create it, but all the values will be empty. Like so:


new ArrayList(2); // creates an arraylist with 2 empty items
new ArrayList(2, 2); // creates a 2D arraylist with an array of two, with two empty items

I saw later in the code something like this


new ArrayList(["Thing 1", "Thing 2"]); // apparently, this is creating and initializing an arraylist

Like I said, I didn’t (yet) get this to work, but I think it would improve the way it’s already being done, with just the array like this:


var things = ["Thing 1", "Thing 2"];

I should get this wrapped up into:


var things = new ArrayList(["Thing 1", "Thing 2"]); // this would be ideal

My train ride tests did not work, but I’m going to reduce it more and see why. First I should get arraylist initialization to work. period. Then I will attempt to add it into processing.js. Anyway, that’s all for today.

Processing.js array initialization

Posted in open source on March 24, 2010 by scottdowne

Just the other day I fixed a bug for processing.js, where creating an array and initializing it at the same time would crash the parser. What was happening was, code like this:


float[] baz;
baz = new float[] {1.0, 2.5};

when parsed, “new float[]” would be converted to “new ArrayList[]” then “{1.0, 2.5};” would get tacked onto the end, and it shouldn’t. “new ArrayList[]” is only for creating an empty array, without initializing it. If you want to initialize, you want the JavaScript to look like this:


baz = [1.0, 2.5];

notice how I no longer use new ArrayList. ArrayList just isn’t setup for initialization that I could see, but the above method works.

Anyway, I got all this working fine and dandy here.

When the parser came across something with the word “new\s(\w)” which translates to “new” + whitespace + any word, it would package it all up, what I did was added a check for the array contents, ie. everything inside {} it even worked for 2D arrays and beyond. I would then simply replace the whole thing with the array initialization, and later in the parser it would be changed from {} to []. So, whatever the array was, {{1.2, 2.1}, {7.6, 8.8}} for a 2D array, would just replace all {}’s with []. The problem was, and I didn’t notice this until after the patch was submitted, noticed it on the train ride home, was that two arrays can be declared on one line. Sometimes things like this just slip everyone’s minds, there are so many ins and outs of a language, and to translate one language to another you have to have good attention to detail. So, something like this:


baz = new float[][] {{1.0, 2.0}, {3.0, 4.0}}; baz2 = new float[][] {{1.0, 2.0}, {3.0, 4.5}};

would break my fix. It would gobble up the whooole thing into one, and the second “new” would get lost, and cause a syntax error. the fix was pretty easy, and I fixed it one the same train I thought of it on. All I had to do was eat all {}’s and everything inside of them until I hit the semi-colon, then stop! the stop is important, and the part I was lacking before. Before I would gobble it all up until I hit the last semi-colon, so, it was greedy.

Here is the fix. Also, I’ll be fitting this work into my 0.2 release as it’s so very close.

Something else I noticed today (hijacking my own blog post here) working in Processing.js has a pretty big advantage over working in other open source projects. We are a community of developers, so when someone finds a bug, half the time, most of the work in finding the bug is done for us, because the person that found the bug can read the code, and reduce it to a acceptable level of code. But, in a project like Firefox, when a user finds a bug, it might just be a description of what they were doing at the time, and that it crashed. Which is an interesting aspect maybe some of the other members of the processing.js team might not of considered, yet.

0.2

Posted in open source on March 19, 2010 by scottdowne

Intro

This release has been weird. My main, original tickets 230 and 133 for this release were not as expected.

Problems and Challenges

230 already existed, but just didn’t have any life, I just needed to breathe some life into it by writing some code to show it works, it was more of a documentation issue. The ticket is still awaiting review. I felt out of place with this one, and still do. I had a lot of fun writing it, and even more fun creating this example, but the fact that my code isn’t really going to be added, just, feels weird. What I think would be best, and I’ll push for this when the time comes. In the original processing there is a place on their website for hacks, basically, lists features, and shows examples, of things that can be done with processing through the use of java, that was not intended. What could happen in processing.js is sort of the same thing, a place on the website, that documents all the hacks that can be used, through the use of JavaScript inside the processing.js code, and this would be a big job, but something that should probably be done much later, maybe even after 1.0 of processing.js has been released. Until then, I feel like my 230 creation is a lost soul.

My other main ticket, ticket #133 also had issues. In the past I struggled with getting the private keyword to work on member functions, but the way processing.js created member functions, through using an addMember function, caused me issues. I would have to intercept the the addMember function, and create it my way. Although, Dave, was showing a trick in JavaScript, on how to make classes, with members, and it seemed to make a lot of sense. This is the code.



var counter = (function (){
var c = arguments[0];
var i = arguments[1];

return {
increase: function(){c+=i;},
getValue: function(){return c;}
};
})(1, 2);

counter.increase();
alert(counter.getValue());

counter.increase();
alert(counter.getValue());

Also, I have mentioned before, that Corban Brook is working on ticket #237 and talked about restructuring the way classes are parsed. I’ve been holding off working on ticket #133 prviate keyword because of possible changes.

Specifications

What I did do for 0.2:
The main one, was the example used for 230, and the ticket itself.

I also did three little ones to to supplement this release.
Tickets:

I’ve done some review of other tickets, and found a ticket that was fixed from my 0.1 that I didn’t see. All easy stuff, but it adds up, and still must be done right.

Conclusion

This release has been very different than my last in terms of the work done, and I spent a lot less time trouble shooting, and more time creating tests and examples. I am still finding my groove. Finally, Corban said I could take a stab at ticket #237, I will probably do that and my private keyword at the same time, for my 0.3, and still try to get my regex parser fit in somehow, it shouldn’t be a problem as it’s really only two tickets, and all related to parsing, stuff I’ve been doing since the beginning of my stay here :)

Follow

Get every new post delivered to your Inbox.