javascript intro - object - function

by johnpapa

HTML

<div>
    <input text="John" id="nameTxt"/>
    <button id="btn">Change it</button>
</div>

<p>Name: <span id="msg"></span></p>

JavaScript

//person constructor
var Person = function() {
    // manage 'this'
    var self = this;
    self.firstName = 'John';
    self.lastName = 'Papa';
    self.changeMyName = function() {
        self.firstName = $('#nameTxt').val();
    };
};

// create a person
var p = new Person();

//extend the person with an age property
p.age = 21;

var displayName = function() {
    $('#msg').text(p.firstName);
};


// display the name
displayName();

$('#btn').click(function() {
    //change the name to Brad
    p.changeMyName();
    displayName();
});