var object = document.createElement(“button”);
object.id = “button1”;
object.innerHTML = “Click me!”;
document.body.appendChild(object);
object.style.color = “red”;
object.style.width = “30px”;
object.style.height= “50px”;
object.style.border = “solid 1px green”;
object.onclick = function() { alert(“You’ve just clicked on a button!”);}

with(object.style) {
position: “absolute”;
top = “10px”;
left = “10px”;
......
}

// Dòng hơi dài nên mình phải break cho dễ hiển thị trong forum
var object = $ce(“button”, 
              {id: “button1”, html:”Click me!”, size: [30,50], pos: [10,10]}
               ).$jump($body);

var object = $ce(“button”, {id:”button”, html: “Click me!” }).$jump($body).$css({bounds:[10,10,30,50], color: “red”});

$id(“button1”).onclick = function () {alert(“Clicked!”);}

function $id(_id) { return document.getElementById(_id); }
// Đây chỉ là ví dụ, ko phải hàm $id() trong DHTiny

function $ce(tag) { return document.createElement(tag)};
// Đây chỉ là ví dụ, ko phải hàm $ce() trong DHTiny

function $css(object, {loạt thuộc tính}){....};

function setId(_id) {
  this.id = _id;
  return this; // đây là cái cớ để gọi inline
}

function setSize(_width, _height) {
  this.style.width = _width + “px”;
  this.style.height = _height + “px”;
  return this; // đây là cái cớ để gọi inline
}
function setPos() {};  // Cùng dạng như setSize
function setOpacity() {}; // Cùng dạng như setSize

object.setId = setId;
object.setSize = setSize;
object.setPos = setPos;
object.setOpacity = setOpacity;

object.setId(“button1”).setSize(30,50).setPos(3,4).setOpacity(40).onclick=function() {}

function $null(obj) { // Kiểm tra đối tượng có rỗng ko
  return (obj == null || obj == undefined);
}

function $set(_obj,  _props) {
  if ($isNull(_props)) return _obj; // Ko có gì để gán
  if (typeof _props != “object”) {
      _obj = _props; // Gán giá trị kiểu cơ bản
  }
  else {
     for (var x in _props) { // Duyệt qua từng thuộc tính trong collection
        if (!$null(_props[x]))
            try { 
               _obj[x] = $set(_obj[x], _props[p]); // Gọi đệ quy để gán thuộc tính lớp trong
            }
            catch (_error_) {};
    }
  }
  return _obj; // Phục vụ cho gọi inline sau này
}

$set(obj, {id: “button1”, onclick : function() {alert(“hihi”);}, innerHTML: “hahaha” });

function $css(obj, _style) { return $set(obj.style, _style);}

$css(object, {width: “100px”, height:”80%”,  backgroundColor:”red”, border: “solid 1px red”});

$css(object, {width: “100px”, height:”80%”, top:”80px”, left:”30px”});

var shortcut = {size: setSize, pos: setPos, bg: setBackground,....} // Trỏ tập hợp shortcut đến các hàm đã viết sẵn

function $set(_obj,  _props) {
  if ($isNull(_props)) return _obj; // Ko có gì để gán
  if (typeof _props != “object”) {
     _obj = _props;
  }
  else {
     for (var x in _props) {
        if (!$null(_props[x]))
            try { 
               if (shortcut[x]) // Nếu shortcut đã được định nghĩa rồi, ta dùng hàm shortcut
                   _obj[x] = shortcut[x](_props[p]); // Giá trị cần gán được chuyển vào làm tham số cho hàm shortcut.
               else // Gán như bình thường
                     _obj[x] = $set(_obj[x], _props[p]); 
            }
            catch (_error_) {};
    }
  }
  return _obj; // Phục vụ cho gọi inline sau này
}

$set(object, {bg: “red”, size:[30,40], pos: [50,50]});

$set(obj, shorcut); // Nhét 1 loạt hàm tiện ích trong tập hợp shortcut vào trong đối tượng.

function $css(obj, _style) {
  if (arguments.length <2) // Overload nhờ vào số tham số đầu vào
     return $css(this, obj);
  else return $set(obj.style, _style);
}
var object.$css = $css; // Đính hàm $css vào object

$css(obj, {bg: “red”, size:[30,40], pos: [50,50]});

obj.$css({bg: “red”, size:[30,40], pos: [50,50]});

// Một trong số các cách viết để tạo đối tượng DIV
var d = $ce("div", {id: "myDiv", bg:"blue", bounds: [10,10,100,100], opac: 40}).$jump($body);

// Gọi ra để thiết lập thêm vài thuộc tính
$id("myDiv").$css({className: "myClass", color:"red"}).$set({onmousedown: function() { alert("hihi")}});

// Cho nó khả năng drag & drop, khi drag thì nó được đặt độ sáng 100% và chuyển màu
$id("myDiv").$setDrag({opac: 100, bg: "purple"});

// Có thể viết $id(d) nên tham số của hàm là string hay object thì ko cần nhớ rõ cũng được

$('#list > li p:last > a:first').each(function() {});

// Cách 1: Gọi hàm của DHTiny tạo ra một đối tượng trong document body
var myDiv = $ce("div", {id:"myDiv", html:"I am a DIV element"}).$jump($body);
// ..... rồi add event handler cho đối tượng
myDiv.$aev("mousedown", function() {
      $set(this, {html: "I have been clicked", color: "black", bg: "#505050", bounds:[0,0,10,10]});
});
// Truy cập đến element theo ID ra và xử lý theo cách của DHTiny
$id("myElement").$set( { html : "Funny text", style: {opac:30, bg: "blue"} });

// Cách 2:
var myDiv = $ce("div", {id:"myDiv", html:"I am a DIV element"});
$jump(myDiv, $body);
// ..... rồi add event handler cho đối tượng
$aev(myDiv, "mousedown", function() {
      $set(this, {html: "I have been clicked", color: "black", bg: "#505050", bounds:[0,0,10,10]});
});
// Truy cập đến element theo ID ra và xử lý theo cách của DHTiny
$set( $id("myElement"), { html : "Funny text", style: {opac:30, bg: "blue"} });

// _id có thể là ID của đối tượng, hoặc con trỏ đến đối tượng
function $_opac(_id, _opac) { 
    if (arguments.length == 1)     // Nếu chỉ có 1 tham số, tức đang gọi ở object scope
          return $_opac(this, _id);  // ... thì chuyển sang global scope làm việc
    else {
        _id = $id(_id);       // Truy cập đối tượng

        // Đặt thuộc tính độ sáng, thỏa mãn luôn yêu cầu cross-browser
        $set(_id.style, {opacity: _opac/100,               
                               MozOpacity: _opac/100,
                               KhtmlOpacity: _opac/100,
                               filter: "alpha(opacity=" + _opac + ")"});
        return _id;
    }
}

$_opac("myDiv", 40);

$id("myDiv").$_opac(40);

var DHTObjFuncs = {
    $ac : $ac, $rc : $rc, $jump: $jump,          // DOM methods
    $innerTxt: $innerTxt, $_innerTxt:$_innerTxt, 
    $aev: $aev, $rev: $rev,.....             // Event handling methods
    $set: $set, $_set: $_set, // Core 
    $css:$css, $opac:$opac, $_opac:$_opac, 
    $show: $show, $hide:$hide, $hideContent: $hideContent, $showContent: $showContent,
    $extend: $extend
   ......
}

function $DHT(obj) {
    if ($null(obj) || obj.$ac) return obj; // Already be a member of DHT family
    for (var x in DHTObjFuncs) obj[x] = DHTObjFuncs[x];
    return obj;
}

function $ac() {...}
function $jump() {...}
function $css() {...}
function $tag() {...}
function $class() {...}

function $id(_id) {
     return $DHT((typeof _id == "string") ? $doc.getElementById(_id) : _id); 
}

function $ce(_tag, _props) {
    return $DHT($set(document.createElement(_tag), _props));
}
...

$id("myDiv").$[hàm 1]().$[hàm 2].$[....]().....
$ce("textarea", {prop1: value1, prop2: value2, .....}).$[hàm 1]().$[hàm 2].$[....]().....

$DHT(D).$ac(myDiv1, myDiv2, myDiv3).$jump($body) ;

function myClass () {
    this.name = "";
    this.sayHello = function() { alert("Hello, my name is " + this.name)};
}

var myInstance = new myClass();
myInstance.name = "myName";
myInstance.sayHello();

Object.prototype.sayWelcome = function () { alert("Welcome to DHTiny's world!")};

myClass.prototype.showDemo = function () { alert("Let's take a look on some demos!")};

myInstance.guestName = "";
myInstance.sayGoodbye = function () { alert("Goodbye for now, " + this.guestName + "!")};

myInstance.sayWelcome();
myInstance.showDemo();
myInstance.guestName = "myGuest";
myInstance.sayGoodbye();

function $DHT(obj) {
     if ($null(obj) || obj.$ac) return obj; // Already be a member of DHT family
     [color=yellow]for (var x in DHTObjFuncs) obj[x] = DHTObjFuncs[x];[/color]
     return obj;
 }

// Tham số của hàm $newClass(_name, _interfaces, _prototype) - tạo một class mới:
//   +_name:  tên class sắp tạo (string)
//   +_interfaces: mảng  chứa danh sách các "interface" mà class này sẽ "thừa kế" theo thứ tự.
//                 null nếu ko có gì
//   + _prototype: các thuộc tính, phương thức của class

$newClass("A", null, { 
    x: 10, 
    y: 20,
    _constructor: function(_name) { // Contructor của class
        this.name = _name;
        alert("Hello, " + _name);
    },
    doSomething: function() {
        alert(this.name +" is doing something");
    }
});

$newClass("B", A, {
    _funnyB : "laugh",
    _constructor: function(_name) { // Contructor của class
        this.inherit(A, "_constructor", [_name]);
        alert("Welcome to DHTiny's world, " + _name);
    },
    
    doSomething: function() {
        alert("Mr./Mrs. " + this.name + " is doing something");
    },
    
    saySomething: function() {
        alert("Hey, take a look at this!");
    }
});

E = { _funnyE: "VERY BIG LAUGH"}
$newClass("C",[A,B,E],{_funnyC : "  Big laugh"});

var a= new A("aName"); // Output: "Hello, aName"
var b = new B("bName"); // Output: "Welcome to DHTiny's world, bName"
var c = new C("cName"); // Output: "Welcome to DHTiny's world, cName"

alert(a.x == b.x); // Output: "true"
alert(a.y + "  " + b.y); // Output: "20 20"
a.doSomething(); // Output: "aName is doing something"
b.doSomething(); // Output: "Mr./Mrs. bName is doing something"
c.doSomething(); // Output: "Mr./Mrs. cName is doing something"
alert(c._funnyB + " " + c._funnyC + " " + c._funnyE); // Output: "laugh   Big laugh VERY BIG LAUGH"

$instancesOf["B"][0].doSomething(); // Output: "Mr./Mrs. bName is doing something"
alert($inherited(C).length); // Output: 3, số lượng interface mà C thừa kế

function ClassA() {
    this.className = "A"; // Gán giá trị mặc định cho thuộc tính
    this.sayHello = say; // Trỏ đến một hàm ngoại vi
    this.sayGoodbye = function() {  // Định nghĩa luôn một hàm cục bộ
        alert("Thanks for using DHTiny! See ya!");
    }
}

function say() {
    alert("Welcome to DHTiny's world!");
}

var a = new ClassA(); // Khai báo instance
alert(a.className);
a.sayHello();
b.sayGoodbye();

// Mọi thuộc tính đều có thể "tiền trảm hậu tấu", tức là có thể khai báo bất kỳ lúc nào sau khi Function constructor được gọi
A = new Function();
A.prototype.className = "A";
A.prototype.sayHello = say;
A.prototype.sayGoodbye = function () {.... }
[code]

Một vài điểm cần chú ý của việc thao tác trên instance và khai báo/định nghĩa thuộc tính của class sau khi đã tồn tại instance của class
- Trước hết, đương nhiên sau khi gọi [b]new[/b] để tạo ra 1 instance mới, instance của class được thừa kế toàn bộ những gì có trong prototype của class.
- Mọi thuộc tính, phương thức kế thừa từ class đều có thể bị overwrite ở  phạm vi instance
- Những thuộc tính, phương thức không bị overwrite sẽ bị thay đổi một cách "động" theo prototype của class.

Bạn xem ví dụ bên dưới:
[code]
// Khai báo class A và định nghĩa các thuộc tính, phương thức
var A= new Function();
A.prototype.x = 10;
A.prototype.y = 20;
A.prototype.z = function() {alert("I am Z")};
// Khai báo một instance để làm ví dụ
var a = new A();

// Gọi thử các thuộc tính, phương thức từ instance
alert("x="+a.x+ ", y=" + a.y); // Kết quả: x=10, y=10
a.z();  // Kết quả: "I am a Z";

a.x = 123;  // Thử thay đổi thuộc tính x ở instance
A.prototype.x = 200; // Thử thay đổi thuộc tính x ở prototype của class
A.prototype.y = 400; // Thử thay đổi thuộc tính y ở prototype của class
A.prototype.z = function() {alert("I am new Z")}; // Thử thay đổi phương thức z ở prototype của class

alert("x="+a.x+ ", y=" + a.y); // Kết quả: x=123, y=400
a.z(); // Kết quả: "I am new Z"
// Như vậy, x đã bị overwrite tại instance, còn y và z thì bị thay đổi tự động theo prototype của class A

$newClass = function(_name, _interfaces, _props) {
    window[_name] = function() {
        if (this._contructor) // Luôn gọi contructor đầu tiên, hiển nhiên mà :-D
            this._contructor.apply(this,arguments);
        
        // Bổ sung con trỏ instance vào danh sách quản lý
        if ($null($instancesOf[_name])) $instancesOf[_name] = new Array();
        $instancesOf[_name].push(this);
    };
    // Thừa kế interface theo thứ tự <-- Chỉ tham khảo thôi nhé, cái này ko an toàn đâu
    for (var i =0; i < _interfaces.length; i++)
        $extend(window[_name], _interfaces[i]);
}

// Bạn chỉ cần viết dưới đây cũng có thể chạy được rồi, tuy nhiên DHTiny còn có bổ sung chút technique nho nhỏ nữa
$extend = function (_class, _interface) {
    if ($isFunction(_interface))
       $set(window[_name].prototype, _interface.prototype);
    else
       $set(window[_name.prototype, _interface);
}