AJAX GUI: Week 01

aaaargh

Exc 1: Everybody should design a simple page HTML by hand! It doesn’t need to look fancy, it’s much more important that you learn how to build a page from scratch and add link to your stylesheet and your javascript code. There should be no styling information in the HTML only in the CSS. Set up a onload function that calls a javascript function that does something interesting. It change at least one thing on the page by using document.getElementById along with changing the returned node’s style property.

http://cwwang.com/ITP/GUIAJAX/exc1.html

var init=function (){
var title=document.getElementById( “title” );

title.style.color=”white”;
title.style.fontSize=”152px”;

var title=document.getElementById( “subtitle” );

title.style.color=”red”;
title.style.fontSize=”50px”;

var title=document.getElementById( “description” );

title.style.color=”red”;
title.style.fontSize=”35px”;
}

Exc 2: Purely in javascript design a class and subclass to demonstrate that you understand the concept. The subclass should utilize the inheritance code that I showed in class. This should just be a javascript file which I can copy and paste into Firebug and run.

function Vector( x, y )
{
this.x = x;
this.y = y;
}

Vector.prototype.setXY = function( x, y )
{
this.x=x;
this.y=y;
}

Vector.prototype.multiply = function ( m )
{
this.x=x*m;
this.y=y*m;
}

Vector.prototype.print = function()
{
return “( ” + this.x + “, ” + this.y + ” )”;
}

var a=new Vector(3,4);
a.setXY(2,5);
console.log( a.print() );

a.multiply(3);//something weird happening
console.log( a.print() );

Vector.prototype.add=function( addVector){
return new Vector(this.x+addVector.x,this.y+addVector.y);
}
var b=new Vector(7,6);
var c= a.add(b);
console.log( c.print() );

Kev = {};
Kev.extend = function(subClass, baseClass)
{
function inheritance() {} // create a new object
inheritance.prototype = baseClass.prototype; // get reference to the base class prototype

subClass.prototype = new inheritance(); // inherit all properties from the base class
subClass.prototype.constructor = subClass; // keep a reference to our constructor
subClass.baseConstructor = baseClass; // keep a reference to the base constructor
subClass.superClass = baseClass.prototype; // keep a reference to the super class
}

function subVector (x,y,n){
divide.baseConstructor.call(this,x,y);
this.n=n;
}

Kev.extend (subVector, Vector);

subVector.prototype.divide= function(n)
{
this.x=x/n;
this.y=y/n;
}

var d= a.divide(4); //doesn’t work
console.log( d.print());

Exc 3: Write a short script that modifies a popular site in an interest way. This should be a javascript file that I can run on a URL that you specify.

nytimes
//replace all ’story’ text with dots
function dots(tag){
var allDivs, thisDiv;
allDivs = document.evaluate(
“//div[@class='"+tag+"']“,
document,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null);
for (var i = 0; i < allDivs.snapshotLength; i++) {
thisDiv = allDivs.snapshotItem(i);
var k;
var text=” •”;

for(k=0;k<thisDiv.innerHTML.length;k++){
text=text+” •”;
}

thisDiv.innerHTML=text;
}
}

dots(’story’);

//make all images black
var i;
for(i=0;i<document.images.length;i++){
document.images[i].src=’http://cwwang.com/ITP/GUIAJAX/black-1.gif’;
var w=document.images[i].width;
}

Challenge 1: Incorporate closures into one of your exercises. Probably the easiest thing to do would be to create a new kind of animation using the closure code for this class. Leave a comment in your code where you employed this technique.

Challenge 2: Incorporate eval into one of your exercises. Leave a comment in your code where you employed this technique.