« Back to the index

Objects and Nodes methods examples

The core contains some extra methods for all purpose need:
For objects:
WA.extend: Will extends an object from another (inheritance).
WA.clone: Will clone an object and all its children.
WA.sizeof: Will calculates the size (number of attributes) of an object.
For DOM nodes:
WA.createDomNode: Will create a DOM Node of specified type, and apply classname if defined.
WA.getDomNode: Will get the DOM node of the specified Id.
WA.toDOM: Will get the DOM node from a string ID or a node itself.

Let's play with some objects:
// A basic people object with name, age, sex as atributes. function people(n,a,s) { this.name = n; this.age = a; this.sex = s; } // Some methods of the class, methods to extend should be declared as prototypes. people.prototype.setname = function(n) { this.name = n; } people.prototype.setage = function(a) { this.age = a; } people.prototype.setsex = function(s) { this.sex = s; } people.prototype.getname = function() { return this.name; } people.prototype.getage = function() { return this.age; } people.prototype.getsex = function() { return this.sex; } people.prototype.print = function() { return this.name + ' = age: ' + this.age + ', sex: ' + this.sex; } // An extended class // C or PHP could be like: // class employee extends people {} function employee(n,a,s, pos,sal) { this.position = pos; this.salary = sal; employee.sourceconstructor.call(this, n,a,s); this.setposition = function(p) { this.position = p; } this.setsalary = function(s) { this.salary = s; } this.getposition = function() { return this.position; } this.getsalary = function() { return this.salary; } this.print = function() { return employee.source.print.call(this) + ', position: ' + this.position + ', salary: ' + this.salary; } } // We extend the employee from people // employee will inherit all the attributes and prototyped methods from people WA.extend(employee, people); function test1() { // lets create some employees WA.get('#test1').append('<b>e1 is the director, e2 is a subdirector, e3 is a clerc:</b>\n'); var e1 = new employee('Fred', 45, 'Male', 'director', 10000); var e2 = new employee('Silvia', 37, 'Female', 'sub-director', 8000); var e3 = new employee('Gladis', 29, 'Female', 'clerc', 6000); WA.get('#test1').append(e1.print() + '\n' + e2.print() + '\n' + e3.print() + '\n'); WA.get('#test1').append('<b>Let\'s the subdirector fired:</b>\n'); e2.setposition('fired'); e2.setsalary(0); WA.get('#test1').append(e1.print() + '\n' + e2.print() + '\n' + e3.print() + '\n'); WA.get('#test1').append('<b>Let\'s promote the clerc to subdirector:</b>\n'); e3.setposition('sub-director'); e3.setsalary(8000); WA.get('#test1').append(e1.print() + '\n' + e2.print() + '\n' + e3.print() + '\n'); WA.get('#test1').append('<b>Our new subdirector is just getting older, happy birthday:</b>\n'); e3.setage(e3.getage()+1); WA.get('#test1').append(e1.print() + '\n' + e2.print() + '\n' + e3.print() + '\n'); WA.get('#test1').append('<b>Our new subdirector is excellent, let\'s raise her salary by 800:</b>\n'); e3.setsalary(e3.getsalary()+800); WA.get('#test1').append(e1.print() + '\n' + e2.print() + '\n' + e3.print() + '\n'); WA.get('#test1').append('<b>Let\'s clone Gladis, she is very good at work:</b>\n'); var e4 = WA.clone(e3); e4.setsex('Cloned'); WA.get('#test1').append(e1.print() + '\n' + e2.print() + '\n' + e3.print() + '\n' + e4.print() + '\n'); WA.get('#test1').append('<b>Size of (attributes in) our employee object:</b>'); WA.get('#test1').append(' ' + WA.sizeof(e1) + '\n'); }
Show the result

Let's play with some DOM nodes:
function test2() { // 1. Lets create some nodes var n1 = WA.createDomNode('div', 'title1', ''); var n2 = WA.createDomNode('div', 'body1', ''); var n3 = WA.createDomNode('p', 'text1', ''); // 2. lets fill the nodes n1.innerHTML = 'The new One Page Applications:'; n3.innerHTML = 'Web 3.0 tendency, the One Page Application is the edge techology slowly invading the Internet high-end systems.'; // 3. lets append the childs finding the father nodes WA.getDomNode('test2').appendChild(n1); WA.getDomNode('test2').appendChild(n2); n2.appendChild(n3); // 4. Lets access the nodes, we "don't know" (as in a variable for instance) if we access with the ID or with the DOMNode directly WA.toDOM('title1').style.color = 'red'; WA.toDOM(n1).style.fontSize = '14px'; WA.toDOM(n2).style.border = '1px solid #ccf'; WA.toDOM('text1').style.backgroundColor = '#fd8'; }
Show the result

« Back to the index