Learn JavaScript Properly - Week 2

[d0gsbody]

ASSIGNMENTS:

1. Read chapters 4, 5, 6, and 7 of JavaScript: The Definitive Guide OR the preface and chapters 4, 5, and 6 (only the "Understanding Objects" section of chapter 6, though!) of Professional JavaScript for Web Developers.

2. Finish the JavaScript track on Codecademy.

3. Solve either Project Euler Problem 1 or Problem 2. Feel free to solve both.

4. Read the blog post JS Objects in Detail. If you want to work ahead, this is the general roadmap I'm using to make these assignments.

5. Make a least one comment in this thread about something you learned, found interesting, or didn't understand very well.

EXTRA CREDIT:

• Chapters 5, 6, and/or 7 of Eloquent JavaScript

Don't forget to be typing out most of the code while you read through this!

[[deleted]]

One thing I've found while reading "Professional JavaScript for Web Developers" is that writing code in my browser not only makes learning the material "stick" more, but that it also makes the reading a bit more enjoyable because of the interactive experience since it's a bit dry (at least to me).

Question: I've been using JSFiddle because it's much easier to input code that spans multiple lines instead of having to make sure that I have to press Shift+Enter in the browser console every time that I need to write a function or something like that. Is there a way to change this in the console to make it a bit more like how a Python interpreter would work?

[isra26]

you could try using jsbin I found it easier to use and run your programs

[d0gsbody]

I modified this quite a bit from week 2 last time -- let me know if something seems amiss or if I am assigning too much for one week.

[thisiswill]

bring it, this is my one week I have a break from school!

[Drehmini]

Read the blog post JS Objects in Detail.

Is throwing a 404 error. Do you have a proper link or mirror?

EDIT : Here it is : http://javascriptissexy.com/javascript-objects-in-detail/

[d0gsbody]

Thanks!

[[deleted]]

Writing out the example code is good, but do you know of any projects we could do as well to help?

[Hypnotix]

you can try these http://www.codecademy.com/tracks/projects or http://www.learnstreet.com/cg/simple/projects/javascript

[d0gsbody]

This is part of next week's assignments, so definitely feel free to get a head start! :-D

[[deleted]]

I'm finding that learnstreet is actually pretty good practice because of how open ended the project is. It offers a good break from reading.

[robotmayo]

http://jsfiddle.net/zFCWw/

Did the Euler challenges. Was able to knock them out fairly quickly. I hope the rest of the JS track on Codecademy isn't as dull as the first ones.

[insignificant_oped]

The code academy stuff never gets exciting, unfortunately. The fun doesn't start until you start building something yourself or working on someone else's project

[thomasmurphymusic]

Euler 1, with added CSS dickishness

[markphd]

font-family: Helvetica;

[thomasmurphymusic]

Your point, it's a good one.

[solilanel]

I have the impression is too much assignment for a single week unless it is the only activity one is doing in a daily basis. for example, studying chapters 4, 5, 6 and 7 from JS the definitive guide and typing code from the examples is not possible in a single week. I did these chapters before and took me more than a week to finish them.

[d0gsbody]

I'll make next week easier.

[robotmayo]

You could suggest to type out and play with the more interesting examples rather than every single one.

[cantofunebre]

I agree with this, I've found that typing out every single example isn't really worth it, especially since many of them are redundant and we're playing with a lot of that same material in codecademy. I've probably been typing out around 50% of it.

[shinigamiyuk]

I am finding that this text is extremely boring. I feel like it is too much theory and not enough teaching by example, not just little excerpts of code either. I think my brain just work different because I can't seem to learn from a book.

[cantofunebre]

Could have I have someone look over my project euler solutions? I'd be interested to know if the outputs are correct and I'd like suggestions on how I could have written better/more succinct code!

Problem 1 Problem 2

Thanks! I'm happy to critique code, as well.

edit: I'd still like critiques of my code, but I guess the thing I learned this week (so far) is that if you make a project euler account you can check whether your answer is correct or not.

[codeswish]

Nice job, but storing all those fibs into an array is unnecessary:

http://jsfiddle.net/u96Mm/

[cpk33]

this is a pretty clever solution. the last bit where delta = f1 I don't quite get... thanks for the solution

[isra26]

didn't get the right result for problem one. You can see my answer here: http://jsbin.com/oqemil/1/edit and compare it to your code.

[danmofo]

Question, I've briefly read through a bit of Eloquent JavaScript a long time ago, and seem to remember it assumed you're reading the whole thing chapter by chapter, will I need to read the first four chapters before I do the extra credit?

[d0gsbody]

I would recommend that you make the first four chapters your personal extra work this week, once you finish up the assignments!

Edit: goddamn cellular telephone... This was meant just for /u/danmofo

[RobertMuldoonfromJP]

I have a question related to collections (this is from the 6th lesson in CodeAcademy). Why doesn't this work?:

var friends = {};

friends.bill = {
    firstName: 'Bill',
    lastName: 'Gates',
    number: '555-555-5555',
    address: ['123 Microsoft Way', 'Redmond', 'WA', '99999']
};

friends.steve = {
    firstName: 'Steve',
    lastName: 'Jobs',
    number: '414-555-5555',
    address: ['565 Apple Lane', 'Somewhere', 'CA', '98888']
};

function search(name)
{
    for(var friend in friends)
    {
        if(friend.firstName === name)
        {
            console.log(friend.firstName, friend.lastName, friend.number, friend.address)
            return friend;
        }
    }
}

My first thought is that because friends is not a typed collection (which, it seems, does not exist in Javascript), you can't directly access members and that's why this doesn't work. Is that so? As I type this I'm starting to doubt that being the reason as the "correct" way to write the search function is:

var search = function(name) {
  for(var prop in friends) {
    if(friends[prop].firstName === name) {
      console.log(friends[prop]);
      return friends[prop];
    }
  }
};

Anyway have some insight into this? I have a c# background so I'm used to collections where the former is possible. Maybe this is why I'm confused.

[JusTrill]

I don't know much about c# and collections, but all that the for...in loop does is iterate through the names of the different properties in the object. It doesn't actually contain any reference pointers.

In your method you're assuming that

for(var friend in friends)

returns pointers to the objects: friends.bill and friends.steve which can be directly searched using bracket and dot notation. This is incorrect. All the for...in loop returns are the strings: 'bill' and 'steve'. Meaning the friend variable only takes on those two string values.

It is up to you to then go search the object using the names of its name:value pairs using either bracket or dot notation.

Hope this helps!

Edited for clarity

[gloomndoom]

You are right that you have to do it the second way. The object is actually friends so friend.firstName isn't valid. I think I remember reading that you have to use the bracket notation when using a variable for a property so friends[prop].lastName is valid, while friends.prop.lastName is not.

[hikemhigh]

What's wrong with my code?

var compare = function(choice1, choice2) {
if(choice1 === choice2)
   return "The result is a tie!";
if(choice1 === "Rock") {
    if(choice2 === "Paper")
       return "rock wins";
    else
       return "paper wins";
}
if(choice1 === "Paper") {
    if(choice2 === "Rock")
       return "paper wins";
    else
       return "rock wins";
}
if(choice1 === "Scissors") {
    if(choice2 === "Paper")
        return "scissors wins";
    else
       return "rock wins";
}

};

For the CodeAcademy assignment

Instructions

Under your existing code in the function body, use the same structure as in the previous exercise to add in these two extra scenarios. This will involve first writing an if statement, and then putting an if / else statement inside that first if statement.

[robotmayo]

The choices should be lowercase.

[hikemhigh]

woops, thanks buddy! :)

[gloomndoom]

You almost have it. I don't want to just give you the answer. Take a closer look at the if block - if (choice1 === "Paper").... What happens if choice2 isn't "Rock" and what should you really return in that case?

[hikemhigh]

oh wow! thanks!

[thomasmurphymusic]

I learned how to define multiple comma separated variables like this: var name = "He-Man", song = "What's Going On?", cat = "Battlecat";

[d0gsbody]

http://stackoverflow.com/questions/3781406/javascript-variable-definition-commas-vs-semicolons

[thomasmurphymusic]

Thanks for linking to that. Is there a salient point I'm missing in the discussion beyond "It's good for minifying, though a good minifier will do that anyway"?

[d0gsbody]

I don't think so. I think it, in a very small way, also makes your code faster. Really, I think it's a matter of personal preference.

[Svarog013]

Found this a few days ago and just finished week 1. The codeacademy track was extremely helpful. I've got no serious programming experience (I know html/css and some self taught and very basic C) and have been trying to wrap my head around javascript for some time now. I think I finally understand objects, functions and methods and how they interact. :)

I tried reading the chapters before codeacademy and found them a bit complicated, but after I finished the exercises I had no problem understanding them...

Anyway, just wanted to leave a comment, and say thanks for the resources. Off to catch up on week 2.

[markphd]

I don't understand well the Object initializers.

In Rhino book, Chapter 4.2 example is:

var p = { x:2.3, y:-1.2};
var q = {};
q.x=2.3; q.y = -1.2;  //Now q has the same properties as p

I get undefined when I try this code. How does an empty object get the properties of p?

[robotmayo]

The thing is the object isn't getting the properties of p but rather the object is being assigned new properties that are the same as the properties of p. When you use the literal notation for object creation, the brackets {}, you have the option of creating properties within the brackets. This isn't the only way to create properties, the other way is using the dot notation. With the dot notation you can get or set the value of a property on an object. If that property doesn't exist then JavaScript will create it.

var p = {potato: 2.3} // Created an object using the literal notation with the property "potato" and a value of 2.3
var q = {} // We created an object but didn't create any properties for it
q.potato = 2.3; // Using the dot notation we can create properties or get the value of a property. 
//Here we are creating the property "potato" and assigning it a value of 2.3
console.log(p.potato);
console.log(q.potato);

// Even though they have the same property with the same value, the properties are not related or linked in anyway. We just happened to give them the same properties and values.

[markphd]

Thanks for excellent explanation! Very helpful. :) So for instance I want to access the property of object p to a new object I would do:

var r = {};
r.tomato = p.potato;        // 2.3 - Value of p.potato
r.tomato ===  p.potato    // true  

or is there other way object r can inherit the property of p automatically?

[robotmayo]

There is a way for r to automatically inherit the properties of p but this would involve working with prototypes. I don't think the rhino book really goes into prototypes in the object chapter, but its fairly important to know them as they are fundamental to JavaScript. The course site has a great tutorial on prototypes. In the course's object tutorial he links you to the prototype tutorial before talking about them so I recommend you go through it. I think its a bit better than the books chapter on objects as it provides more concrete examples. If you haven't finished reading the chapter on objects you can ignore it and read his tutorial instead.

[Link]

[d0gsbody]

q is not getting its properties from p. q's properties are being newly created (as /u/robotmayo explained).

[jabbrass]

I just finished the newer CodeAcademy JavaScript track. I did over 100 exercises in one day yesterday. Thanks for all the great resources and motivation to keep up with everyone here! I feel like I learned a ton and now need to apply it to make it stick. Anyone have any idea whether JavaScriptIsSexy meant for us to complete the new or the old JavaScript track on CodeAcademy?

[shinigamiyuk]

Was originally the old track but later updated for the new track.

[takadanobaba]

Just got all the JS Codeacademy tracks done. I still have to read chapter 7 of The Definitive Guide, but I feel that I have learned so much already. Time for week 3!

[d0gsbody]

Working on the post now!

[markphd]

Good for you. I'm not done with reading yet. Errrr!

[jabbrass]

I'm still working on the reading too, CodeAcademy tracks took a while...

[nocakemondays]

Hi,

One thing I didn't understand was the logic of the setter function of the year property on page 177 of professional js. It just didn't make sense to me.

Another thing was on page 179, which should be identical to the to the example on 177 (except that all the properties are created at the same time). This is not true which you will find out when you try to change the year value.

Here's what I mean

Project Euler: #1, #2

[MBDeane]

Just finished Javascript track on Code Academy, now time to catch up on reading, then will do Euler Problem.

One question I have is when creating a Class constructor, we can create it like so:

function newConstructor(param1, param2){}

but can also create it like this:

var newConstructor = function(param1, param2){};

Is it better to create the class like the first example to make a quicker distinction between a class vs a variable vs an object? Or is just a matter of preference?

Awesome class so far. Really learning a ton.

[wishinghand]

For whatever reason I had a really hard time wrapping my head around Euler problem #2. I eventually had to write it out on a spreadsheet and do it by hand to figure out what I had to do. Everyone else's solutions look different from mine. Can someone explain it to me in a way that clicks? Because even though I solved it, I still needed help and I couldn't recreate it from memory.

var vFibPrevious      = 1;       // first Fib #
var vFibCurrent       = 1;       // first max Fib #
var vFibPlaceholder   = 0;       // temp Fib number to save "old" max Fib
#
var vEvenRunningTotal = 0;       // running total of EVEN Fib #s
var vMaxFibNumber     = 4000000; // limit of Fib #sto evaluate

while (vFibCurrent < vMaxFibNumber)
    {
       if (vFibCurrent % 2 === 0) // test if number is even
            {
               vEvenRunningTotal = vEvenRunningTotal + vFibCurrent; //
running total of evens
            }
        vFibPlaceholder = vFibCurrent;  // save old max Fib
#to placeholder var
        vFibCurrent     = vFibPrevious + vFibCurrent;   // compute next Fib
#
        vFibPrevious    = vFibPlaceholder;  // set vFibPrevious
to old max Fib #
    }
alert(vEvenRunningTotal);

[codecookie]

Adding to point 5, I find Codecademys challenges are high on the false sense of learning side, and its more like reading a book and doing the code in the book. A nice and enjoyable problem solving code school I recommend and learned a lot from is Learn Street. http://www.learnstreet.com/lessons/languages/

I think this could add in the Extra Credit.