Object Oriented Programming in Javascript - A Simple Prompt Box

I'm planning a new program for fun.

First, the user types in something thru a prompt box.

Second, this info is put in a variable.

Third, this variable is manipulated thru object oriented programming. (of course there will be a OOP
javacript between the "head" tags - a sort of OOP constructor)

Finally, this information is displayed in a message box. (This javascript will be in between the "body" tags)

So can anyone make a simple program like that and show me an example? I think I got the object
programming stuff down but the prompt box stuff is a problem.

I'll write more about it later.

 

Make your prompt box have an 'id' then use javascript to get the value of the prompt box through document.getElementById('yourid').value

W3Schools.com has some great javascript tutorials to teach you what you want to know.

 

native / vanilla javascript is not well suited for classic OOP / inheritance. you can, of course, use singletons that share data and you can work with functions prototypes but its painful.

if your background is OOP, then you should look at mootools - a javascript framework (mootools stands for my object orientated tools) - www.mootools.net

an example class that has a constructor and shares methods and data, view it live here: http://www.jsfiddle.net/HpnQ6/

the source looks like this

var ninja = new Class({
    // internal mixins to allow setOption and fireEvent
    Implements: [Options, Events],
    
    // default options for the class
    options: {
        initialStrength: 10,
        dieIfLessThan: 0
    },
    
    // default state
    dead: false,
    
    initialize: function(options) {
        // constructor function
        
        // apply options as overrides to above
        this.setOptions(options);
        
        // get strength prompt
        this.strength = prompt("enter strength", 10).toInt() || this.options.initialStrength;
        
        // allow logging if supplies as option, look below
        this.logger = $(this.options.logger);
    },
    
    damage: function(factor) {
        // method that reduces the strength until critical
        if (this.dead) {
            // already dead.
            this.deadAlready();
            return;
        }
        
        var factor = factor || 1;
        this.strength -= factor;
        
        this.fireEvent("damaged");
        
        if (this.strength <= this.options.dieIfLessThan)
            this.die();
    },
    
    heal: function(factor) {
        // method that ups the strength
        if (this.dead) {
            this.deadAlready();
            return; // can't heal the dead
        }
        
        var factor = factor || 1;
        this.strength += factor;
        this.fireEvent("healed");
    },
    
    die: function() {
        // kill the ninja and notify everyone
        this.dead = true;
        this.log("your ninja is now dead.");
        this.fireEvent("dead");
    },
    
    deadAlready: function() {
        // just a warning
        this.log("your ninja is dead already!");
    },
    
    log: function(message) {
        // allow output of events into an element for debugging
        if (!this.logger)
            return;
        
        this.logger.set("html", message).highlight();
    }

});

// instantiate the class
var dimitar = new ninja({
    onDead: function() {
        // adding custom events for death, damage and healing on the instance
        this.log("your ninja just died! this is a dead event override through the instance");
    },
    onDamaged: function() {
        this.log(this.strength);
    },
    onHealed: function() {
        this.log(this.strength);
    },
    dieIfLessThan: 2, // die if health reaches this
    logger: $("debug") // enable logging of events
});

// click events that control the damage and healing
$("ninjaHurt").addEvents({
    click: function(e) {
        e.stop();
        dimitar.damage($("factor").get("value").toInt());
    }
});

$("ninjaHeal").addEvents({
    click: function(e) {
        e.stop();
        dimitar.heal($("factor").get("value").toInt());
    }
});

Code (javascript):

all in about 10 mins. mootools FTW