Animal class done several ways

trying to understand classes and inheritance in javascript and possibly how to do things differently to achieve the same effect

by Andy Bulka

HTML

<div class="log">
    <a href="#" id="clearlog">Clear</a>
    <div id="log"></div>
</div>
<div>
</div>

<div id="animals1"><span class='log_labels'></span>
</div>
<div id="animals2"><span class='log_labels'></span>
</div> 
<div id="animals3"><span class='log_labels'></span>
</div> 
<div id="animals3A"><span class='log_labels'></span>
</div> 

<p style='clear:left;'>Templates were:</p>
<hr>

<div id="animals_simple_template" class="Animals">
    <div class="Generic" id="some_animal">some animal
    </div>     
    <div class="Bird" id="some_bird">some bird
    </div> 
    <div class="Eagle" id="eagle">eagle
    </div> 
</div>

<div id="animals_nested_template" class="Animals">
    <div class="Generic" id="some_animal">some animal
    </div>     
    <div class="Generic">
        <div class="Bird" id="some_bird">some bird
        </div> 
    </div>     
    <div class="Generic">
        <div class="Bird">
            <div class="Eagle" id="eagle">eagle
            </div> 
        </div> 
    </div>     
</div>

CSS

.log {margin-bottom:8px;}
.Animals { float:left; clear: left; background:Khaki; width:auto; height:auto; margin-bottom:15px;  border-width:2px; border-style:solid; }
.Animals div { width:20; height:20; background:beige; border-width:1px; border-style:dashed; margin:4px; padding:4px; display: block-inline; float:left; }
#animals1 .Animals { background:DarkSeaGreen;}
.Animals#animals3 { background:BurlyWood;}
.Animals .Generic { border-style:dotted; }
.Animals .Bird { background:lightblue; }
.Animals .Eagle { background:CadetBlue; border-color:red; border-width:2px; }
i { font-size:0.7em;}
span.log_labels { font-size:0.7em;}
span.error { color:FireBrick;}

JavaScript

function msg(s) {
    $('<div/>').append(s).appendTo('#log');
}
$('#clearlog').click(function() {
    $("#log").empty();
});

/*
PYTHON CODE (works).  How to replicate in Javascript/DOM?

class Animal:
    def __init__(self, name): self.name = name
    def makenoise(self): return 'ugg'
    def bloodcolor(self): return 'red'
    def report(self): return self.name + ' makes ' + \
                self.makenoise() + ' noise, has ' + self.bloodcolor() + ' blood'
class Bird(Animal):
    def makenoise(self): return 'chirp'

class Eagle(Bird):
    def makenoise(self): return Bird.makenoise(self) + '_CRAAA_'
    def bloodcolor(self): return 'GOLD'

animals = [Animal('some animal'), Bird('some bird'), Eagle('eagle')]
for a in animals:
    print a.report()
*/

function log_labels(s, $span) {
    $span.text(s);
    msg('<i>-------- ' + s + '</i>');
}

function duplicateDiv(id_from, id_to) {
    $(id_from).clone().appendTo(id_to);  // id_from is typically the div template we copy
    $(id_to+' '+id_from).removeAttr('id'); // remove id from the copy of the div
}


// ************************************************************
log_labels("APPROACH 1 - JAVASCRIPT OO with push of results to DOM", $('#animals1 span'));
// ************************************************************

duplicateDiv('#animals_simple_template', '#animals1');

function Animal(name) { this.name = name; }  // Define base class
    Animal.prototype.makenoise = function() { return 'ugg'; }
    Animal.prototype.bloodcolor = function() { return 'red'; }
    Animal.prototype.report = function() { return this.name + ' makes ' +
        this.makenoise() + ' noise, has ' + this.bloodcolor() + ' blood'; }
            
Bird.prototype = new Animal;  // Define sub-class        
Bird.prototype.constructor = Bird;
function Bird(name) { Animal.call(this, name); } // Call super-class constructor
    Bird.prototype.makenoise = function() { return 'chirp'; }
        
Eagle.prototype = new Bird;  // Define sub-sub-class   ...