Color: A Modern Web Development Language
Mark J. Stahl
Advised By: Dr. Mark Burge
Department of Computer Science
Undergraduate Project
IntroductionColor is a prototyped object-oriented language designed specifically for the development of the World Wide Web. The core of the language is based on the message-passing semantics of Self and SmallTalk. Color’s evaluator was inspired by a declarative, logic programming
language called Prolog. And the syntax of Color is taken directly from JavaScript, providing the familiarity and syntactic structures of the C family of languages.
Current Web Language Problems
• Attempt to be everything to everyone
• URI’s (Universal Resource Identifiers) are not linguistically considered
• Relational database access is still reliant upon antiquated standards (i.e. SQL)
• No linguistic support for markup languages (XML, HTML, etc)
Color Addresses These Problems
• Color is not a all-purpose language, and is specific to the Web domain
• URI’s are used for both local and remote resource (daemon, and file) access
• Color uses declarative (Prolog-like) expressions for database querying
• Markup languages are treated the same as other Objects within Color
XML / HTML QueryingThe following examples illustrate the using of declarative statements and predicate logic to
query XML documents
var xmlFamily = <stahlfamily>
<member pos = “child”>
<firstname>Mary</firstname>
<parent>Joseph</parent>
</member>
<member pos = “father”>
<firstname>Joseph</firstname>
<parent>Eleanor</parent>
</member>
<member pos = “child”>
<firstname>Mark</firstname>
<parent>Joseph</parent>
</member>
</stahlfamily>;
// Define an ancestor predicate‘ancestor(?c, ?p) <- ‘parent(?c, ?p);‘ancestor(?c, ?p) <- ‘parent(?c, ?g) && ancestor( ?g, ?p);
The first statement says that ‘p’ is an ancestor of ‘c’ if ‘p’ is a parent of ‘c’. The second statement says ‘p’ is an ancestor of ‘c’ if ‘c’ has some parent ‘g’ and if ‘p’ is an ancestor of ‘g’;
The second line provides a recursive definition whilethe first line provides the simplest definition on an ancestor.
// Is Joseph an ancestor of Mark’s?ancestor(“Mark”, “Joseph”);
» true
// Who are Mary’s ancestors?ancestor(“Mary”, ?tree);
» tree = [“Joseph”, “Eleanor”)
Relational Database QueryingThe following examples illustrate the using of declarative statements and predicate logic to
query relational database without SQL
// Define an ancestor predicate‘ancestor(?c, ?p) <- ‘parent(?c, ?p);‘ancestor(?c, ?p) <- ‘parent(?c, ?g) && ancestor( ?g, ?p);
The first statement says that ‘p’ is an ancestor of ‘c’ if ‘p’ is a parent of ‘c’. The second statement says ‘p’ is an ancestor of ‘c’ if ‘c’ has some parent ‘g’ and if ‘p’ is an ancestor of ‘g’;
The second line provides a recursive definition whilethe first line provides the simplest definition on an ancestor.
// Is Joseph an ancestor of Mark’s?ancestor(“Mark”, “Joseph”);
» true
// Who are Mary’s ancestors?tree = ancestor(“Mary”, ?tree);
» [“Joseph”, “Eleanor”]
firstname
1
2
parentindex
3
Mary
Joseph
Mark
Joseph
Joseph
Eleanor
The members table within the stahlfamilydatabase.
XML / HTML Element AccessThe following examples illustrate using the . And .@ operators in order to return or change a
single value or the entirety of an XML element
var xmlFamily = <stahlfamily>
<member pos = “child”>
<firstname>Mary</firstname>
<parent>Joseph</parent>
</member>
<member pos = “father”>
<firstname>Joseph</firstname>
<parent>Eleanor</parent>
</member>
<member pos = “child”>
<firstname>Mark</firstname>
<parent>Joseph</parent>
</member>
</stahlfamily>;
// Return the first name of the first child in the list.// Returns an XMLList object containing “Mary”.var name = xmlFamily.stahlfamily.member[0].firstname;
// Change Joseph’s name to WalterxmlFamily.stahlfamily.member[1].firstname = “Walter”;
// Return the parent of the third child in the list.// Returns an XML object contain:// <parent>Joseph</parent>.var parent = xmlFamily.stahlfamily.member[2][1];
// Assign a variable with Joseph’s position.// Return a String object containing “father”. var familyPos = xmlFamily.stahlfamily.member[1].@pos;
Relational Database AccessThe following examples illustrate using the . And .@ operators in order to return or change a
single value or the entirety of a relational database
// Obtain a database resource and assign it to xmlFamilyvar xmlFamily = <mysql://user:passwd@localhost/>;
// Return the first name of the first child in the list.// Returns an XMLList object containing “Mary”.var name = xmlFamily.stahlfamily.member[0].firstname;
// Change Joseph’s name to WalterxmlFamily.stahlfamily.member[1].firstname = “Walter”;
// Return the parent of the third child in the list.// Returns an XML object contain:// <parent>Joseph</parent>.var parent = xmlFamily.stahlfamily.member[2][1];
// Assign a variable with Joseph’s position.// Return a String object containing “father”. var familyPos = xmlFamily.stahlfamily.member[1].@pos;
firstname
1
2
parentindex
3
Mary
Joseph
Mark
Joseph
Joseph
Eleanor
The members table within the stahlfamilydatabase.
The Linguistic Ancestry of Color
• Self (http://research.sun.com/self/language.html)– Self provided Color with its prototyped object semantics. Color also used
Self’s message-passing semantics as its core syntactic structure.• Color: 3 + 4 » 3.add(4) » 7
• Self: 3 + 4 or 3 add: 4 » 7
• JavaScript (http://www.mozilla.org/js/)– In order to remain familiar to the majority of programmers, JavaScript
was chosen to used as the main syntactic structure Color.
– With JavaScript’s infix notation and the dot operator (used for object slot access), the learning curve to become proficient with Color would be heavily decreased.
Color Objects and Object Inheritance print
how to print objects
proto
+ how to add points
proto
x 3
x:
y
y:
5
proto
x 7
x:
y
y:
9
clone
point
how to clone an object
proto
proto
x 0
x:
y
y:
0
Each Color point intrinsically describes its own format, but appeals to another object for any behavior that is shared amount points.
To create a new object in Color, the ‘clone’ message is sent to the prototypical point. The ‘clone’ method copies its receiver.
Color Syntax and Objects
Identifiers and Functionint x = 5; // integer object with the value
of 5
x = 5; // variable of type ‘variant’ containing and
// integer object
fun hypo(a , b) { // function can be nested
fun square(x) {
return x * x;
}
}
// functions can act as data as well
fun square (x) { return x * x;)
a = square(4);
b = square;
c = b(5);
Objectsfun Rectangle(w, h) { // Rectangle
constructor
this.width = w;
this.height = h;
}
page = new Rectangle(8, 11);
// assuming a function computer_area
page.area = computer_area;
// assuming and object Circle
// we can define a property available to all Cirlcs
Circle.proto.pi = 3.14159;
// or change an objects prototype at runtime
page.proto = new Circle();