IT-info > JavaScript

JavaScript

Javascript OOP - Code reference 2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// Constructor functions (Constructor OOP version)
function myFirstObject(){
    this.iAm = 'an object';
    this.whatAmI = function(){
        document.getElementById("jsbox").innerHTML = 'I am ' + this.iAm;
    };
};

// instantiate (create a new instance of) the object to be able to call it
var myNewObject = new myFirstObject();

// Literal notation (Literal OOP version)
var mySecondObject = {
    iAm : 'another object',
    whatAmI : function(){
    document.getElementById("jsbox").innerHTML = 'I am ' + this.iAm;
    }
}
</script>
</head>
<body>

<div id="jsbox"></div>

<script type="text/javascript">
// Global namespace, literal notation (Literal OOP version)
// var MYAPP = MYAPP || {};
var MYAPP = {};

MYAPP.test = function(){
    var someTxt = "MYAPP test function output";
    return someTxt;
}

document.getElementById("jsbox").innerHTML = MYAPP.test();
</script>

<p><button onclick="myNewObject.whatAmI();">Run script 1</button></p>
<p><button onclick="mySecondObject.whatAmI();">Run script 2</button></p>
</body>
</html>

Sources:
Introduction to Object-Oriented JavaScript
The Basics of Object-Oriented JavaScript