hannabeasiam · hannabeasiam · Feb 27, 2018 · Nov 13, 2017 · Nov 13, 2017
diff --git a/lesson08/ToyCustomObject.html b/lesson08/ToyCustomObject.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Toy Custom Object</title>
+    <script type="text/javascript">
+    </script>
+  </head>
+  <body>
+    <h2>CIW JavaScript Specialist</h2>
+    <h3>Toy Custom Object</h3>
+    <script type="text/javascript">
+      //use new keyword and object constructor. The constructor defines the properties and methods of your object.
+      var toy = new Object();
+      //the toy object has been created and this constructed object will need properties to hold values for (toy name, toy color, toy shape)
+      toy.name = 'Lego';
+      toy.color = 'Red';
+      toy.shape = 'rectangle';
+      document.write('The toy is a ' + toy.name + '.');
+      document.write('<br/>It is a ' + toy.color + ' '
+        + toy.shape + '.');
+    </script>
+  </body>
+</html>
diff --git a/lesson08/animals.html b/lesson08/animals.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>JavaScript ES6 Classes</title>
+    <script type="text/javascript" src="animals.js"></script>
+    <script type="text/javascript">
+      var myAnimal = new Animal('Blaze');
+      var myCat = new Cat('Echo');
+      var myDog = new Dog('Misty');
+      var myGoat = new Goat('JoJo', 2);
+    </script>
+  </head>
+  <body style="margin-bottom: 25px;">
+    <h2>CIW JavaScript Specialist</h2>
+    <h3>JavaScript ES6 Classes</h3>
+    <button onClick="alert(myAnimal.toString());">Animal</button>
+  	<button onClick="alert(myCat.toString());">Cat</button>
+    <button onClick="alert(myDog.toString());">Dog</button>
+    <button onClick="alert(myGoat.toString());">Goat</button>
+  </body>
+</html>
diff --git a/lesson08/animals.js b/lesson08/animals.js
@@ -0,0 +1,44 @@
+class Animal {
+  constructor(name) {
+    // Property
+    this.name = name;
+  }
+  // Methods
+  speak() {
+    return (this.name + ' makes a noise.');
+  }
+  toString() {
+    return (this.name + ' is an animal. ' + this.speak());
+  }
+}
+// Subclass
+class Cat extends Animal {
+  speak() {
+    return (this.name + ' meows.');
+  }
+  toString() {
+    return (this.name + ' is a cat. ' + this.speak());
+  }
+}
+// Subclass
+class Dog extends Animal {
+  speak() {
+    return (this.name + ' barks.');
+  }
+  toString() {
+    return (this.name + ' is a dog. ' + this.speak())
+  }
+}
+// Subclass
+class Goat extends Animal {
+  constructor(name, age) {
+    super(name);
+    this.age = age;
+  }
+  speak() {
+    return (this.name + ' bleats.');
+  }
+  toString() {
+    return (this.name + ' is a goat. ' + this.speak() + ' ' + this.name + ' is ' + this.age + ' years old.');
+  }
+}
diff --git a/lesson08/book.js b/lesson08/book.js
@@ -0,0 +1,21 @@
+//Define book constructor pass three parameter
+function Book(theTitle,theAuthor,thePrice) {
+  //assign parameter to properties of custom object
+  this.title = theTitle;
+  this.author = theAuthor;
+  this.price = thePrice;
+  //define method call show, which call function showProps
+  this.show = showProps;
+};
+
+function showProps() {
+  var result = '';
+  //for i in this statement, display all the properties
+  for (var i in this) {
+    //however it will not display when(i is 'show' which is book object, or i is 'addTax' )
+    if (i == 'show' || i == 'addTax') continue;
+    //assign result : property name = value of property, and increment
+    result += i + '=' + this[i] + '<br>';
+  }
+  return result;
+};
diff --git a/lesson08/dropDownArray.html b/lesson08/dropDownArray.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Employee Database</title>
+    <script type="text/javascript" src="employee.js"></script>
+    <script type="text/javascript">
+      var employees = new Array();
+      //first array store place holder message
+      employees[0] = 'Select an employee';
+      employees.push(new employeeObject('George','IT',661));
+      employees.push(new employeeObject('Mai Li', 'Sales', 551));
+      employees.push(new employeeObject('Maria Alvarez', 'Human Resources', 441));
+      employees.push(new employeeObject('Tom Smith', 'Marketing', 331));
+      //number of element emplpyees object saved under variable len
+      var len = employees.length;
+    </script>
+  </head>
+  <body>
+    <h2>CIW JavaScript Specialist</h2>
+    <h3>Employee Database</h3>
+    <form name="empForm" id="empForm">
+      <strong>Select a name to view information:</strong>
+      <!--onChange event handler, change option is selected that occur-->
+      <select name="empName" onChange="if (this.selectedIndex!=0) employees[this.selectedIndex].showEmployee()">
+        <script type="text/javascript">
+          for (i=0;i<len;i++) {
+            if (i==0) {
+              document.write('<option>'+employees[i] + '</option>');
+            } else {
+              document.write('<option>'+ employees[i].name + '</option>');
+            }
+          }
+        </script>
+      </select>
+      <p><input type="button" value="Show All Employees" onClick="showAllEmployees();"></p>
+    </form>
+  </body>
+</html>
diff --git a/lesson08/employee.js b/lesson08/employee.js
@@ -0,0 +1,22 @@
+function employeeObject(theName,theDepartment,theExtension) {
+  this.name = theName;
+  this.department = theDepartment;
+  this.extension = theExtension;
+  this.showEmployee = showEmployee;
+};
+function showEmployee() {
+  var info = '';
+  info += 'Employee: '+this.name+'\n';
+  info += 'Department: '+this.department+'\n';
+  info += 'Extension: '+this.extension+'\n';
+  alert(info);
+};
+function showAllEmployees() {
+  var info = '';
+  for (var i=1;i<len;i++) {
+    info += 'Employee: '+employees[i].name+'\n';
+    info += 'Department: '+employees[i].department+'\n';
+    info += 'Extension: '+employees[i].extension+'\n\n';
+  };
+  alert(info);
+}
diff --git a/lesson08/house.js b/lesson08/house.js
@@ -0,0 +1,19 @@
+/* define fuction House, pass 4 parameters
+object constructor house
+1. output some info about myhouse in HTML, */
+function House(theRooms, theStyle, theYearBuilt, doesHaveGarage) {
+  //this being a House object rooms: defining a property in the house object and assigning it to the parameter that passed
+  this.rooms = theRooms;
+  this.style = theStyle;
+  this.yearBuilt = theYearBuilt;
+  this.hasGarage = doesHaveGarage;
+  //to define methods, name of method, and assign name of fuction
+  this.livingSpace = livingSpace; //no opengint closing parenthesis
+  this.maintain = maintain; //system will automatically look for an identifier named maintain, weather variable or function founded will be use
+}
+function livingSpace(length, width, numFloors) {
+  return (length * width * numFloors);
+};
+function maintain() {
+  alert('Keep the house in top shape');
+}
diff --git a/lesson08/jsObjectNotation.html b/lesson08/jsObjectNotation.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Soldier Custom Object</title>
+    <script type="text/javascript">
+    //Define custom object in Javascript use javascript object notation : JSON
+      var soldier = {
+        //property : value separate them with comma, 
+        name: undefined,
+        rank: 'captain',
+        //define method anonymous function, does not have name, but has action to occur 
+        fallIn: function() {
+          alert('At attention, arms at the side, head and eyes forward.');
+        },
+        fallOut: function() {
+          alert('Drop out of formation, step back, about face!');
+        } //last method of property should not follow by comma, may cause runtime error (js interpreter is expecting an identifier)
+      }
+    </script>
+  </head>
+  <body>
+    <h2>CIW JavaScript Specialist</h2>
+    <h3>Soldier Custom Object</h3>
+    <script type="text/javascript">
+      //soldier object name property is undefined, we can assign that value by referencing
+      soldier.name = 'Tina Savage';
+      document.write('The name of the soldier is ' +
+        soldier.name + '.<br/>');
+      document.write('The rank of ' + soldier.name + ' is ' +
+        soldier.rank+'.<br/>');
+      //make a call to the fallin object
+      soldier.fallIn();
+      soldier.fallOut();
+    </script>
+  </body>
+</html>
diff --git a/lesson08/language.js b/lesson08/language.js
@@ -0,0 +1,30 @@
+function WebLanguages(myName,myBestPart,myEaseToLearn,myRating) {
+  this.name = myName;
+  this.bestPart = myBestPart;
+  this.easeToLearn = myEaseToLearn;
+  this.rating = myRating;
+};
+function show(languageShow) {
+  document.write('Language Name: '+languageShow.name+'<br>');
+  document.write('Best Part: '+languageShow.bestPart+'<br>');
+  document.write('Ease of Learning: '+languageShow.easeToLearn+
+    '<br>');
+  document.write('Rating 1 to 10: '+languageShow.rating+'<br>');
+  document.write('<br>');
+};
+
+var JS = new WebLanguages('JavaScript','Makes cool effects',
+  'Moderate',10);
+var JV = new WebLanguages('Java',
+  'Makes platform-independent applications','Hard',8);
+var HT = new WebLanguages('HTML5/CSS',
+  'Makes pretty pages','Easy',9);
+
+function start() {
+  document.write('<h2>JavaScript Specialist</h2>');
+  document.write('<h3>Rating Web Languages</h3>');
+  //show object passing HT variable which contains webLangagues custom object. 
+  show(HT);
+  show(JS);
+  show(JV);
+};
diff --git a/lesson08/multipleCustomObject.html b/lesson08/multipleCustomObject.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>House Custom Object</title>
+    <script type="text/javascript" src="house.js"></script>
+  </head>
+  <body>
+    <h2>CIW JavaScript Specialist</h2>
+    <h3>House Custom Object</h3>
+    <script type="text/javascript">
+      /*using new object constructor and JSON to create custom object is not efficient when multiple instantiation of object need to 
+      be created. Here, instantiate an object and store it in a variable myhouse, new keyword say find function call House and extend
+      object  */
+      var myHouse = new House(5,'colonial',1990,true);
+      document.write('My house has ' + myHouse.rooms +
+        ' rooms.<br/>');
+      document.write('My house style is ' + myHouse.style +
+        '.<br/>');
+      document.write('My house was built in ' +
+        myHouse.yearBuilt + '.<br/>');
+      document.write('My house has a garage: ' +
+        myHouse.hasGarage + '.<br/>');
+      document.write('My house livingSpace is ' +
+        myHouse.livingSpace(30,70,2) + ' square feet.<br/>');// passing length, width, numFloors as argument
+      myHouse.maintain();
+      //we can use same House object to referencing instaciate another objact yourHouse
+      var yourHouse = new House(4,'spanish',2003,false);
+      document.write('<hr>Your house has ' + yourHouse.rooms +
+        ' rooms.<br/>');
+      document.write('Your house style is ' + yourHouse.style +
+        '.<br/>');
+      document.write('Your house was built in ' +
+        yourHouse.yearBuilt + '.<br/>');
+      document.write('Your house has a garage: ' +
+        yourHouse.hasGarage + '.<br/>');
+      document.write('Your house livingSpace is ' +
+        yourHouse.livingSpace(40,50,1) + ' square feet.<br/>');
+    </script>
+  </body>
+</html>
diff --git a/lesson08/ratingWebLanguages.html b/lesson08/ratingWebLanguages.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Web Languages Custom Object</title>
+    <script type="text/javascript" src="language.js"></script>
+  </head>
+  <body onLoad="start()">
+  </body>
+</html>
diff --git a/lesson08/usePrototype.html b/lesson08/usePrototype.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Book Custom Object</title>
+    <script type="text/javascript" src="book.js"></script>
+  </head>
+  <body>
+    <h2>CIW JavaScript Specialist</h2>
+    <h3>Book Custom Object</h3>
+    <script type="text/javascript">
+      //referring Book object, adding to the prototype the method called addTax()
+      Book.prototype.addTax = function addTax() {
+        var taxAdded = this.price * 1.18;
+        return (taxAdded.toFixed(2))
+        //again, we added addTax method under Book object by using prototype feature
+      };
+      //define two instance of Book object pass parameter (theTitle,theAuthor,thePrice)
+      var famousBook = new Book('War and Peace',
+        'Leo Tolstoy',30.00);
+      var myBook = new Book('JavaScript by Example',
+        'Ellie Quigley',25);
+      document.write(famousBook.show()+'<br/>');
+      document.write(myBook.show()+'<br/>');
+      document.write('With tax '+ famousBook.title +
+        ' costs ' + famousBook.addTax() + '<br/>');
+      document.write('With tax ' + myBook.title +
+        ' costs ' + myBook.addTax() + '<br/>');
+    </script>
+  </body>
+</html>