w-smith / week2_secondpass

Week 2 Second Pass

Functions

Whiteboarding time! On a scale of 1 to 5, how confident are you feeling about functions? Form groups of 3 with numbers similar to yours, then try to attack the following problem on a whiteboard:

The dev team is looking for a function that takes two numbers, a and b, and returns the following value: add a to b, then multiply that value by (b plus 4)

1. Define this function
2. Call this function twice with different a and b values
3. Write out the result for these two calls

Those who are on the 4 or 5 side, try the following challenge:

Do the same three steps as above with the following function description: grab an element with the id "math-result" and add the value to this element.

Callbacks

First, let's look at a simple example of callback use.

Now, team up in your squads. On a scale of 1 to 5, how confident are each of you about callbacks? The lowest number in the squad should type out a solution for the following, and the rest of the team should help out or research:

The dev team is looking for a new function. We want to print out "first part is ready" immediately. We want to print out "second part is ready" 3 seconds later.

1. Define this function
2. Call this function in dev tools
3. Verify the time difference is about three seconds

Those who are looking for a challenge, add the following feature: print out "page is refreshed" every 4 seconds (we update our databse every 4 seconds).

jQuery

A good resource for jQuery commands is the intermediate-jquery. Feel free to utilize this for the upcoming activity and for Project 1 if you are using jQuery.

jQuery Practice

There is some very simple starter code in this repo. Please complete the following steps to reinforce your jQuery skills.

1. Fork and clone this repo.
2. Include a jQuery script tag from a CDN.
3. Do a "hello world" test in app.js.
4. Open the page and verify you have a blue square.
5. Change the color of the square to red on page load.
6. Add a button with a click handler (console.log fine for now).
7. Make the button's click handler remove the red square from the page.
8. Finally, make the red square fade out as it gets removed from the page.

OOP and Prototypal Inheritance

OOP is hard.

Looking for a good example to explain prototypal inheritance with JS? This article is a good one.

Looking for a full re-coverage of all the things we covered in the first couple weeks, with a different approach? Check this one out, at least the first section.

Want to dive deeper into constructor functions? This article goes into more specifics than our earlier lesson.