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)
- Define this function
- Call this function twice with different
a
andb
values - 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
.
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.
- Define this function
- Call this function in dev tools
- 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).
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.
There is some very simple starter code in this repo. Please complete the following steps to reinforce your jQuery skills.
- Fork and clone this repo.
- Include a jQuery
script
tag from a CDN. - Do a "hello world" test in
app.js
. - Open the page and verify you have a blue square.
- Change the color of the square to red on page load.
- Add a button with a click handler (console.log fine for now).
- Make the button's click handler remove the red square from the page.
- Finally, make the red square fade out as it gets removed from the page.
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.