Javascript-3

README.md

@@ -6,31 +6,31 @@ This challenge focuses on using the `this` keyword as well as getting comfortabl
 
 **Follow these steps to set up and work on your project:**
 
-* [ ] Create a forked copy of this project.
-* [ ] Add your project manager as collaborator on Github.
-* [ ] Clone your OWN version of the repository (Not Lambda's by mistake!).
-* [ ] Create a new branch: git checkout -b `<firstName-lastName>`.
-* [ ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
-* [ ] Push commits: git push origin `<firstName-lastName>`.
+- [x] Create a forked copy of this project.
+- [x] Add your project manager as collaborator on Github.
+- [x] Clone your OWN version of the repository (Not Lambda's by mistake!).
+- [x] Create a new branch: git checkout -b `<firstName-lastName>`.
+- [x] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
+- [x] Push commits: git push origin `<firstName-lastName>`.
 
 **Follow these steps for completing your project.**
 
-* [ ] Submit a Pull-Request to merge <firstName-lastName> Branch into master (student's  Repo). **Please don't merge your own pull request**
-* [ ] Add your project manager as a reviewer on the pull-request
-* [ ] Your project manager will count the project as complete by merging the branch back into master.
+- [ ] Submit a Pull-Request to merge <firstName-lastName> Branch into master (student's Repo). **Please don't merge your own pull request**
+- [ ] Add your project manager as a reviewer on the pull-request
+- [ ] Your project manager will count the project as complete by merging the branch back into master.
 
 ## Assignment Set Up
 
-* Complete all the exercises as described inside each assignment file.
-* To test your `console.log()` statements, open up the index.html file found in the assignments folder and use the developer tools to view the console.  
+- Complete all the exercises as described inside each assignment file.
+- To test your `console.log()` statements, open up the index.html file found in the assignments folder and use the developer tools to view the console.
 
 ## The `this` keyword
 
 Having a solid understanding of how `this` works will give you a huge advantage when you start building with more advanced frameworks. Use the [this.js](assignments/this.js) file to traverse through a few `this` problems.
 
 ## Prototype
 
-The prototype challenge will focus on building prototypes for a fantasy themed game that includes mages, swordsmen, and archers.  Follow the [prototypes.js](assignments/this.js) instructions closely to create the beginnings of what could be an awesome JavaScript game.
+The prototype challenge will focus on building prototypes for a fantasy themed game that includes mages, swordsmen, and archers. Follow the [prototypes.js](assignments/this.js) instructions closely to create the beginnings of what could be an awesome JavaScript game.
 
-* Read the instructions found within the file carefully to finish the challenges. 
-* Remember to un-comment the objects and console logs to test your work at the bottom of the page.
+- Read the instructions found within the file carefully to finish the challenges.
+- Remember to un-comment the objects and console logs to test your work at the bottom of the page.

assignments/prototypes.js

@@ -1,20 +1,31 @@
 /*
   Object oriented design is commonly used in video games.  For this part of the assignment you will be implementing several constructor functions with their correct inheritance hierarchy.
 
-  In this file you will be creating three constructor functions: GameObject, CharacterStats, Humanoid.  
+  In this file you will be creating three constructor functions: 
+    - GameObject,
+    - CharacterStats,
+    - Humanoid.  
 
   At the bottom of this file are 3 objects that all end up inheriting from Humanoid.  Use the objects at the bottom of the page to test your constructor functions.
 
   Each constructor function has unique properties and methods that are defined in their block comments below:
 */
-  
+
 /*
   === GameObject ===
   * createdAt
   * name
   * dimensions (These represent the character's size in the video game)
   * destroy() // prototype method that returns: `${this.name} was removed from the game.`
 */
+function GameObject(character) {
+    this.createdAt = character.createdAt;
+    this.name = character.name;
+    this.dimensions = character.dimensions;
+}
+GameObject.prototype.destroy = function() {
+    return `${this.name} was removed from the game.`;
+};
 
 /*
   === CharacterStats ===
@@ -23,6 +34,17 @@
   * should inherit destroy() from GameObject's prototype
 */
 
+function CharacterStats(attrs) {
+    GameObject.call(this, attrs);
+    this.healthPoints = attrs.healthPoints;
+}
+CharacterStats.prototype = Object.create(GameObject.prototype); // character stats is a child of Game object
+
+GameObject.prototype.takeDamage = function() {
+    //takeDamage() // prototype method -> returns the string '<object name> took damage.'
+    return `${this.name} took damage.`;
+};
+
 /*
   === Humanoid (Having an appearance or character resembling that of a human.) ===
   * team
@@ -32,79 +54,82 @@
   * should inherit destroy() from GameObject through CharacterStats
   * should inherit takeDamage() from CharacterStats
 */
-
+
+function Humanoid(attrs) {
+    CharacterStats.call(this, attrs);
+    this.team = attrs.team;
+    this.weapons = attrs.weapons;
+    this.language = attrs.language;
+}
+
+Humanoid.prototype = Object.create(CharacterStats.prototype); // this code
+
+CharacterStats.prototype.greet = function() {
+    return `${this.name}offers a greeting in ${this.language}.`;
+};
+
 /*
-  * Inheritance chain: GameObject -> CharacterStats -> Humanoid
-  * Instances of Humanoid should have all of the same properties as CharacterStats and GameObject.
-  * Instances of CharacterStats should have all of the same properties as GameObject.
-*/
+ * Inheritance chain: GameObject -> CharacterStats -> Humanoid
+ * Instances of Humanoid should have all of the same properties as CharacterStats and GameObject.
+ * Instances of CharacterStats should have all of the same properties as GameObject.
+ */
 
 // Test you work by un-commenting these 3 objects and the list of console logs below:
 
-/*
-  const mage = new Humanoid({
+const mage = new Humanoid({
     createdAt: new Date(),
     dimensions: {
-      length: 2,
-      width: 1,
-      height: 1,
+        length: 2,
+        width: 1,
+        height: 1
     },
     healthPoints: 5,
-    name: 'Bruce',
-    team: 'Mage Guild',
-    weapons: [
-      'Staff of Shamalama',
-    ],
-    language: 'Common Tongue',
-  });
-
-  const swordsman = new Humanoid({
+    name: "Bruce",
+    team: "Mage Guild",
+    weapons: ["Staff of Shamalama"],
+    language: "Common Tongue"
+});
+
+const swordsman = new Humanoid({
     createdAt: new Date(),
     dimensions: {
-      length: 2,
-      width: 2,
-      height: 2,
+        length: 2,
+        width: 2,
+        height: 2
     },
     healthPoints: 15,
-    name: 'Sir Mustachio',
-    team: 'The Round Table',
-    weapons: [
-      'Giant Sword',
-      'Shield',
-    ],
-    language: 'Common Tongue',
-  });
-
-  const archer = new Humanoid({
+    name: "Sir Mustachio",
+    team: "The Round Table",
+    weapons: ["Giant Sword", "Shield"],
+    language: "Common Tongue"
+});
+
+const archer = new Humanoid({
     createdAt: new Date(),
     dimensions: {
-      length: 1,
-      width: 2,
-      height: 4,
+        length: 1,
+        width: 2,
+        height: 4
     },
     healthPoints: 10,
-    name: 'Lilith',
-    team: 'Forest Kingdom',
-    weapons: [
-      'Bow',
-      'Dagger',
-    ],
-    language: 'Elvish',
-  });
-
-  console.log(mage.createdAt); // Today's date
-  console.log(archer.dimensions); // { length: 1, width: 2, height: 4 }
-  console.log(swordsman.healthPoints); // 15
-  console.log(mage.name); // Bruce
-  console.log(swordsman.team); // The Round Table
-  console.log(mage.weapons); // Staff of Shamalama
-  console.log(archer.language); // Elvish
-  console.log(archer.greet()); // Lilith offers a greeting in Elvish.
-  console.log(mage.takeDamage()); // Bruce took damage.
-  console.log(swordsman.destroy()); // Sir Mustachio was removed from the game.
-*/
+    name: "Lilith",
+    team: "Forest Kingdom",
+    weapons: ["Bow", "Dagger"],
+    language: "Elvish"
+});
+
+console.log(mage.createdAt); // Today's date
+console.log(archer.dimensions); // { length: 1, width: 2, height: 4 }
+console.log(swordsman.healthPoints); // 15
+console.log(mage.name); // Bruce
+console.log(swordsman.team); // The Round Table
+console.log(mage.weapons); // Staff of Shamalama
+console.log(archer.language); // Elvish
+console.log(archer.greet()); // Lilith offers a greeting in Elvish.
+console.log(mage.takeDamage()); // Bruce took damage.
+console.log(swordsman.destroy()); // Sir Mustachio was removed from the game.
 
-  // Stretch task: 
-  // * Create Villain and Hero constructor functions that inherit from the Humanoid constructor function.  
-  // * Give the Hero and Villains different methods that could be used to remove health points from objects which could result in destruction if health gets to 0 or drops below 0;
-  // * Create two new objects, one a villain and one a hero and fight it out with methods!
+// ========== Stretch task: ==========
+// * Create Villain and Hero constructor functions that inherit from the Humanoid constructor function.
+// * Give the Hero and Villains different methods that could be used to remove health points from objects which could result in destruction if health gets to 0 or drops below 0;
+// * Create two new objects, one a villain and one a hero and fight it out with methods!

assignments/this.js

@@ -1,26 +1,68 @@
 /* The for principles of "this";
 * in your own words. explain the four principle for the "this" keyword below.
 *
-* 1. 
-* 2. 
-* 3. 
-* 4. 
+* 1. Window Binding
+    - a global scope meaning the value of "this" is the entire window.
+* 2. Implicit Binding
+    - whenever a function is followed by a preceding dot, the object to the left of the dot
+* 3. New Binding
+    - contstructor function has to be used
+    - new binding refers to the specific instance of the object being used and returned by the constructor function
+* 4. Explicit Binding
+    - Whenever JS .call or .apply methods are being used
+    - this is explicitly defined
 *
 * write out a code example of each explanation above
 */
 
-// Principle 1
-
+// ===== Principle 1 ======
 // code example for Window Binding
 
-// Principle 2
+function sayName(_name) {
+    console.log(this);
+    return _name;
+}
+
+sayName("Aaron"); // returns all the window
 
+// ===== Principle 2 ======
 // code example for Implicit Binding
 
-// Principle 3
+const users = {
+    name: "aaron",
+    password: "password10",
+    sayHi: function(id) {
+        console.log(
+            `Hello, my name is ${this.name}, the website password is ${this.password}, and your id is ${id}`
+        );
+        console.log(this);
+    }
+};
 
+console.log(users.sayHi(12));
+
+// ===== Principle 3 ======
 // code example for New Binding
 
-// Principle 4
+function CordialPerson(greeter) {
+    this.greeting = "Hello ";
+    this.greeter = greeter;
+    this.speak = function() {
+        console.log(this.greeting + this.greeter);
+        console.log(this);
+    };
+}
+
+const jerry = new CordialPerson("Newman");
+const newman = new CordialPerson("Jerry");
+
+jerry.speak();
+newman.speak();
+
+// function AllUsers()
+
+// ===== Principle 4 ======
+// code example for Explicit Binding
 
-// code example for Explicit Binding
+jerry.speak.call(newman);
+newman.speak.apply(jerry);