The following block of code contains a series of functions that cover object orientated programming within Javascript. Its based on the third video tutorial by Youtuber, Derek Banas.
He never quite finished his .getStuff method, but I've been attempting to do it with method overloading as well as a switch statement.
Obviously, the print statements after it are not being executed so there appears to be something wrong. What is wrong with my code?
Also, I have a general question, how could I use object orientated programming on a band website? These ideas are fine for games, but I don't see the use in a general website (I've learned OO programming for Pygame so far and it makes total sense for a game setting, but idk the uses in a website).
Here is my code, skip to the bottom for the .getStuff method:
<!DOCTYPE html>
<html>
<head>
<title> Tutorial 3 (Object Orientated Programming) </title>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/>
<script>
// This tutorial will cover OO based programming
// Object: Stores variables and the functions to manipulate these variables in one place
// Class: This is the blueprint that defines what variables and functions each object will
// have
// Property: Names given to variables stored inside of objects
// Methods: Name given to functions that are part of an object
// The following example will create an Animal object
// This is also called a constructor since it is a function that is designed to
// create (construct) a new object
function Animal()
{
// Define all the properties that you want the Animal object to contain:
// this: "This" is a reference to object that you create
this.name = "No Name";
this.sound = "Grrr";
this.owner = "No Owner";
}
// The following will create a prototype for a method that can be used by the Animal
// object
// Format is: nameOfObject.prototype.setOwner: this sets the value for the variable
// function(property that the function will accept)
// Encapsulation: Grouping of properties and their methods needed to manipulate
// those properties
Animal.prototype.setOwner = function(newOwner)
{
// The following checks if a newOwner value has been passed
if(typeof newOwner != 'undefined')
{
// You now want the value of owner to be the value of owner that has been
// passed to it as a parameter:
this.owner = newOwner;
}
else
{
document.write("Please enter a valid owner." + "</br>");
}
}
// This function will return whatever the name of the current owner is
Animal.prototype.getOwner = function()
{
return this.owner;
}
// Set the name of the animal using the previous method:
Animal.prototype.setName = function(newName)
{
if(typeof newName != 'undefined')
{
this.name = newName;
}
else
{
document.write("Please enter a valid name." + "</br>");
}
}
Animal.prototype.getName = function()
{
return this.name;
}
// Set the sound for the object:
Animal.prototype.setSound = function(newSound)
{
if(typeof newSound != 'undefined')
{
this.sound = newSound;
}
else
{
document.write("Please enter a valid sound." + "</br>");
}
}
Animal.prototype.getSound = function()
{
return this.sound;
}
// The following will literally create new Animal objects and probably call these
// function prototypes by passing in parameters for sound, name, and owner
var dog = new Animal();
// ^ This object has now been created and contains the defaults for sound, name, and owner
// according to the original function
// Now we are going to set the properties individually:
dog.setName("Cheyenne");
dog.setSound("Bark!");
dog.setOwner("Sam");
// Now, finally use the get versions of the functions by simply calling them via a document.write
document.write("The name of the dog is: " + dog.getName() + "</br>");
document.write("The sound of the dog is: " + dog.getSound() + "</br>");
document.write("The owner of the dog is: " + dog.getOwner() + "</br>");
// My small goal:
// Make a cat object instead:
var cat = new Animal();
cat.setName("Mr. Buttons")
cat.setSound("Purrrr")
cat.setOwner("Crazy Cat Lady")
// Print the results to screen:
document.write("The name of cat is: " + cat.getName() + "</br>");
document.write("The sound of the cat is: " + cat.getSound() + "</br>");
document.write("The owner of the cat is: " + cat.getOwner() + "</br>");
function Cat()
{
// The following will "inherit" all the attributes of the Animal class:
// This is a reference to the next cat object that you create.
// This forces the animal constructor to be called
Animal.call(this)
this.mood = "Crazy";
}
// Superclass: the class you want your new class to inherit from
// Without the following statement, Cat would become a subclass instead
Cat.prototype = new Animal();
// Here we are making the constructor be of type Cat
Cat.prototype.constructor = Cat();
// Create a getMood method:
Cat.prototype.getMood = function()
{
return this.mood;
}
// Create a setMOood method where the user passed in a mood as a parameter:
Cat.prototype.setMood = function(newMood)
{
if(typeof newMood != 'undefined')
{
this.mood = newMood;
}
else
{
document.write("Please enter a valid mood!</br>");
}
}
// Make a new Panda object:
function Panda()
{
Animal.call(this);
this.mood = "Calm";
}
Panda.prototype = new Animal();
Panda.prototype.constructor = Panda();
// Get Mood:
Panda.prototype.getMood = function()
{
return this.mood;
}
// Set Mood:
Panda.prototype.setMood = function(newMood)
{
if(typeof newMood != 'undefined')
{
this.mood = newMood;
}
else
{
document.write("Please enter a valid mood!</br>");
}
}
myPanda = new Panda();
myPanda.setMood("Excited");
document.write("myPanda's mood is: " + myPanda.getMood() + "</br>");
theGreatOne = new Panda();
theGreatOne.setMood("Courageous");
document.write("theGreatOne's mood is: " + theGreatOne.getMood() + "</br>");
// The following will determine if myPanda is an INSTANCE of the Panda class or
// an actual Panda object:
document.write("Is myPanda an instance of the Panda class?: " + (myPanda instanceof Panda) + "</br>");
// The following will use "typeof" to determine the data type of the myPanda object
// and the Panda class
// As seen by the example, classes are classified as functions in Javascripts
document.write("What is the data type of myPanda?: " + (typeof myPanda) + "</br>");
document.write("What is the data type of Panda?: " + (typeof Panda) + "</br>");
// Method Overloading: Creating multiple different versions or methods that all
// have a different number of attributes
// Aka, a different version of a method will be called depending on how many
// arguments are passed to the function
setStuff(newName);
setStuff(newName, newSound);
setStuff(newName, newSound, newOwner);
Panda.prototype.setStuff = function(newName, newSound, newOwner)
{
if((typeof newName != 'undefined') && (typeof newSound != 'undefined') && (typeof newOwner != 'undefined'))
{
Panda.prototype.setStuff = function(newName, newSound, newOwner)
{
switch(arguments.length)
{
case 3:
this.owner = newOwner;
case 2:
this.sound = newSound;
case 1:
this.name = newName;
}
}
}
else
{
document.write("Please enter a valid name</br>");
}
}
newPanda.setStuff("Jiggly");
document.write("myPanda's new name is: " + myPanda.getName() + "</br>");
// ^ Work on fixing this
// Continue at 15:51
// https://www.youtube.com/watch?v=xVnW7ZMqBus
// Polymorphism:
// doAnimalStuff(Animal){ document.write(Animal.getName() + Animal.getOwner()) };
</script>
<noscript>
</noscript>
</head>
<body>
<p> This is a sample paragraph </p>
</body>
</html>
