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>
<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