Day 134: Ch. 69 "A Smarter Way to Learn JavaScript"

Today I'm starting on Chapter 69 Objects.  Properties are just variables attached to an object.  Here's an example of how to define an object and its properties:

var plan 1 = {
  name: "Basic",
  price: 3.99,
  space: 100,
  transfer: 1000,
  pages: 10
};

The code above is very different from what we've done prior to this.  There's no semicolon at the end of every statement, only after the closing curly bracket.  Also, the last property does not have a comma after it, but all the other properties prior to the last do.  Note that the code begins with a variable being defined, as an object is a variable.  Note also the use of colons preceded by a property and followed by a property value.  You can add another property to the same variable, for example, like so:

plan1.discountMonths = [6, 7, 11];

The code above declares that July, August, and December are discount months (remember that arrays are indexed with 0 first, so item with an index value of 6, for example, would actually be the 7th item in the array).  To refer to an item in this array, you would use this code, for example:

var mo = plan1.discountMonths[2];

That statement would assign the third element in the array, the number representing December, to the variable mo.

Now I'm working on Chapter 70 Objects: Properties.  You can delete properties in an object like so:

delete objectName.propertyName;

You can check to see if an object has a property like so:

"propertyName" in objectName;

A true or false boolean value will be returned.

Now I'm working on Chapter 71 Objects: Methods.  A method is a function that's attached to an object.  This chapter was lengthier than most of the chapters and pretty intricate, as it dealt with functions.

Here's some of the code I worked on:

var theObject = {
  theMethod: function(x){
    if (x === 10) {
      alert("It's a 10");
    }
    else {
      alert("It's not a 10");
    }
  }
};

theObject.theMethod(10);

It's an object with a method that tests if a number is a 10 or not, and then produces an alert with a string that says it is a 10 or it is not a 10.

Now I'm on Chapter 72 Objects: Constructors.  The chapter went over something called a constructor function.  Here's a constructor function, it's really neat, it saves you from having to create an object and properties over and over.

function Plan(name, price, spare, transfer, pages) {
  this.name = name;
  this.price = price;
  this.space = space;
  this.transfer = transfer;
  this.pages = pages;
}

Note that the function name is capitalized.  It's conventional to do this to disctinguis constructor functions from regular functions.  Note that the name of the object hasn't been specified yet, in regards to what "this" refers to.  This is the calling code that creates the object for the Basic plan:

var plan1 = new Plan("Basic", 3.99, 100, 1000, 10);

The name of the object is plan1, while  "new" is the keyword that tells JavaScript to create a new object.  You could do this:

var plan1 = new Plan("Basic", 3.99, 100, 1000, 10);
var plan2 = new Plan("Basic", 3.99, 100, 1000, 10);
var plan3 = new Plan("Basic", 3.99, 100, 1000, 10); 

And then you'd have a bunch of objects produced quickly.  I love how the author of this books walks us through all of this step by step, it's an amazing book.  Presumably, your values would be different for each object.  It's common to use the same names for parameters and properties, but you don't have to, JavaScript assigns the inputs to the properties in the function by their order, not by whether the input variable name matches the name of the property, so this would work fine:

function Plan(name, price, spare, transfer, pages) {
  this.what = name;
  this.why = price;
  this.how = space;
  this.when = transfer;
  this.whatelse = pages;
}

Now I'm on Chapter 73 Objects: Constructors for Methods.
   
SUMMARY OF CODING SKILLS

Total Treehouse Points: 5,385
Treehouse Points by Subject Matter (Miscellaneous not included): 
HTML:                                663 
CSS:                                1,599 
Design:                            1,193 
Development Tools:            747 
Javascript:                      1,120

Treehouse Ranking (%): "You have more total points than 94% of all students."

Treehouse Badge(s) Earned Today:

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
Javascript Basics

Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy) 

Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman
In Progress: "Eloquent JavaScript," by Marijn Haverbeke (On pg 27)
In Progress: "Head First Javascript," by Eric Freeman and Elisabeth Robson (On pg 56)
In Progress: "A Smarter Way to Learn Javascript," by Mark Myers (on pg 240)

My Progress on The Odin Project:

1.  Introduction to Web Development             100% Complete

2.  Web Development 101                                29% Complete

3.  Ruby Programming                                       0% Complete

4.  Ruby on Rails                                               0% Complete

5.  HTML5 and CSS3                                           0% Complete

6.  Javascript and JQuery                                  0% Complete

7.  Getting Hired as a Web Developer                 0% Complete

Hours Spent Coding Today: 3

Total Hours Coding: 602