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();