Javascript Inheritance

In the world of javascript, everything is object. There is no class. There are two kind of object, one can not create object, let's call it non-constructor object, and one can create object constructor object. Here when I mention constructor, it mean consturctor object. When I mention object, it means all objects including both kinds.

First let's talk about constructor. All object has a constructor, a constructor has a constructor. So can we traverse like this o.constructor.constructor.constructor.... and on and on? Yes, but the final constructor is function Function { [native code] }. Function constructor is itself.

    function Dog() { };
    var d = new Dog(); 
    alert(d.constructor); //function Dog() {} 
    alert(d.constructor.constructor); //function Function { [native code] }; 
    alert(d.constructor.constructor.constructor); //function Function { [native code] }; 
    alert(d.constructor.constructor.constructor.constructor); //function Function{ [native code] };

Inheritance implementation in javascript is different from "classical" world. Because there is no such thing "class" in javascript. It use prototype to simulate inheritance. We should know this.

• A constructor has prototype.
• A non-constructor object has no prototype
• A prototype is non-constructor object so it has no prototype

The first user defined constructor is the constructor has no parent. Let call it first level constructor. The prototype of first level consturctor is [object Object], which is non-constructor object, but it has contructor which is the first level constructor itself, which means the prototype is of the constructor created by the constructor. So we can say the first level constructor's prototype is created by the constructor.

    function Dog() { this.name = "fred"; }
    var d = new Dog(); 
    alert(Dog.prototype); //[object Object] 
    alert(Dog.prototype.constructor); //function Dog() {} 

Now want to simulate the inheritance. So we create second level constructor like this.

    function Puppy() { this.age = 18; }
    Puppy.prototype = new Dog(); // its prototype is a dog
    alert(Puppy.constructor.prototype); //function (){}, but it is actually a dog
    
    var p = new Puppy(); 
    alert(p.name); //it can assess member "name" of it is prototype
    alert(p.age);
    
    var p2 = new Puppy(); 
    p2.name = "jeff"; 
    alert(p2.name); //jeff
    alert(p.name); 

Please note that the object created by the second level constructor can assess the members of of its prototype, which is created by first level constructor. And These members are shared at the beginning, but if it is changed, then a private copy is created at the second level. But the shared copy in the prototype is not changed. In this way, it is memory efficent.

Above we use the pseduoclassical to simulate the inheritance, there is another way to do that, closure. Below is the demo code.

    function Dog() {
        return { name: "fred" }
    }

CSS specialty

<img style=”cursor:pointer; cursor:hand;width: 400px; height: 230px;” src=”http://4.bp.blogspot.com/_yUba7cqllFE/SSovQx-kXuI/AAAAAAAAAPA/2s5G3o9wIGU/s400/css+specialty.bmp” border=”0” alt=”“id=”BLOGGER_PHOTO_ID_5272078279130767074” />

LoVe:HAte and links

a:link, a:visited, a:hover, a:active, this order can not be reversed, otherwise it won't work. This is due to the cascade rule. If two rules have the same specificity, the last rule to be defined wins out.

a:link, a:visited {text-decoration: none;}
a:hover, a:active {text-decoration: underline;}

Make you web more semantic

Here are some guidline how to make your web page more sematic.

1. Use only one

   tag per page, and use it to identify the main topic of the page. Think of it as a chapter title: you only put one title per chapter. Using

   correctly has the added benefit of helping the page get properly indexed by search engines </li>

   Use headings to indicate the relative importance of text. Again, think outline. When two headings have equal importance in the topic of your page, use the same level header on both. If one is less important or a subtopic of the other, then use the next level header. For example, follow a

   with a

   tag. In general, it's good to use headings in order and try not to skip heading numbers. For example, don't follow a

   tag with a

   tag. </li>

   Use the

   tag for, duh, paragraphs of text.</li>

   Use numbered lists to indicate steps in a process, or define the order of a set of items.

   To create a glossary of terms and their definitions or descriptions, use the

   (definition list) tag in conjunction with the

   (definition term) and

   (definition description) tags.

               
    
                   
   Coffee
                   
   Black hot drink
    
                   
   Milk
    
                   
   White cold drink
               
    
           

   </li>

   If you want to include a quotation like a snippet of text from another Web site, a movie review, or just some wise saying of your grandfather's, try the

   tag for long passages, or the tag for one-liners. </li>

   Take advantage of obscure tags like the tag for referencing a book title, newspaper article or Web site, and the

   tag to identify and supply contact information for the author of a page (great for a copyright notice). </li>

   steer clear of any tag or attribute aimed just at changing the appearance of a text or image.

   When there just isn't an HTML tag that fits the bill, but you want to identify an element on a page or a bunch of elements on a page so that you can apply a distinctive look, use the

   and tags . </li>

   Remember to close tags. The opening

   tag needs its partner in crime (the closing

   tag), as do all other tags, except the few self-closers like
   and .

   Validate your pages with the W3C validator. Poorly written or typo-ridden HTML causes many weird browser errors.

   </ol>