JS Fundamentals #1 Slides: Typo on Objects & Suggestions?

[cliffordfajardo]

There shouldn't be " " marks around the property called material on these slides (bottom right):
http://slides.com/biancagandolfo/obj-arr-func#/3/3
http://slides.com/biancagandolfo/obj-arr-func#/3/4
http://slides.com/biancagandolfo/obj-arr-func#/3/5
http://slides.com/biancagandolfo/obj-arr-func#/3/7
http://slides.com/biancagandolfo/obj-arr-func#/3/8
http://slides.com/biancagandolfo/obj-arr-func#/3/9

var box = {};
box.material = "cardboard";
console.log(box); //output below:

[object Object] {
  material: "cardboard"
}

As a JS beginner the aforementioned slides startled me a bit.

NOTE: I didn't attend part 1 in person (yet); I'm reviewing these slides on my own without an instructor. So I may be misinterpreting things.

See you at your 2-day workshop , Feb 3 & 5! #forwardJS

[cliffordfajardo]

For this slide: http://slides.com/biancagandolfo/obj-arr-func#/3/14

I think this slide could be made easier to follow by grouping the bullets to look something like this:

DOTS                                                        Brackets ("" required)
- strings           (X)                                     - "strings              (X)
- wierdcharacters   ()                                      - "wierd characters     (X)
- numbers           ()                                      - numbers               (X)
- expressions       ()                                      - expressions           (X)
- quotations        ()                                      - variables             (X)

Now we can see the features of dots & brackets in a more consistent way. See slide then this!

On this same slide under the differences between object & dot notation , it would be useful to see something like the following, so the reader doesn't have to recall what you were talking about ealier:

//Dots
var car = {};
car.make = "Honda";


//Brackets
var car = {};

car["make"] = "honda";
car["^&*"] = "40mpg";
car[0] = "gas empty";
car[smogCheck()];

var brand = "make";
car[brand] ==== "honda";

[cliffordfajardo]

Another suggestion from a beginner standpoint for this slide:
http://slides.com/biancagandolfo/obj-arr-func#/3/15

This is on the slide:

var box = {};

box["material"] = "cardboard";

box["size"] = {
  "height": 2,
  "width": 80
};

For a person who is new to objects, I was curious as to what the object box's new body would look like. Perhaps, it would help beginners see what they just performed I've been studying Javascript for 4 months and creating an object inside of an object was a foreign concept to me until this slide. Update: Since fitting all of this into a slide may not be feasible, opening a separate window with a console to show the new object body would be nice.

UPDATE: Since fitting this into a slide may not be feasible, opening a separate tab with a console showing the new object body would be nice.

var box = {};

box["material"] = "cardboard";


box["size"] = {
    "height": 2,
    "width": 80
};

//object now looks like this:
box {
    material: "cardboard";
    size: [object Object] {
        height: 2,
        width: 80
    }
}

[cliffordfajardo]

As a beginner, I can't help but wonder what the new object body will look like.

UPDATE: Since fitting this into a slide may not be feasible, opening a separate tab with a console showing the new object body would be nice

Slide link: http://slides.com/biancagandolfo/obj-arr-func#/3/15

var box = {};

box["material"] = "cardboard";

box["size"] = {
  "height": 2,
  "width": 80
};

box.area = function(){
  return box.size.height * box.size.width;
};

Showing what the object now looks like (from console view in jsbin)

box {
      area: function (){
      return box.size.height * box.size.width;
    },
      material: "cardboard",
      size: [object Object] {
        height: 2,
        width: 80
      }
}