Skip to content

Commit 71a7526

Browse files
committed
added homework week5
1 parent a1e42dc commit 71a7526

7 files changed

Lines changed: 294 additions & 19 deletions

File tree

README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ This is the description of the classes for JavaScript fundamentals.
1010
|0.|Preparation for first JavaScript session|[Reading Week 0](https://github.com/HackYourFuture/JavaScript/tree/master/Week0)|-|
1111
|1.|Values, Operators and Variables. Primitives Types ( Strings, Numbers, Arrays, Functions, Objects literals) Conditions|[Reading Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1)| [Homework Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/MAKEME.md)|
1212
|2.|Functions, For and While Loops,String and Array Manipulations |[Reading Week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2)|[Homework Week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/MAKEME.md)|
13-
|3.|String and Array Manipulations, Closures, Scope and Immediately Invoked function expression, Call Backs and Promises|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/MAKEME.md)|
14-
|4.|Async VS Sync, XHTTP Requests|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/README.md)|[Homework Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/MAKEME.md)|
15-
|5.|Objects and Instances|TBA|TBA|
16-
|6.|TBA|TBA|TBA|
13+
|3.|String and Array Manipulations|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/MAKEME.md)|
14+
|4.|Closures, Scope and Immediately Invoked function expression, Call Backs and Promises|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/README.md)|[Homework Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/MAKEME.md)|
15+
|5.|Async VS Sync, XHTTP Requests|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5/README.md)|[Homework Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5/MAKEME.md)|
16+
|6.|Objects and Instances|TBA|TBA|
1717
|7.|Test Driven Development|TBA|TBA|
1818
|8.|Test Driven Development|TBA|TBA|
1919
|9.|Test Driven Development|TBA|TBA|

Week1/MAKEME.md

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,20 @@
1-
##Assignments week 2:
1+
##Assignments week 1:
2+
3+
Create a .js file that prints something to the console
4+
Create a function that takes 3 arguments and returns the sum of the three arguments.
5+
Write a program to answer the following questions:
6+
* Can you store multiple types in an array? Numbers and strings?
7+
* Can you compare inifities? (Not in Eyad's world) - does 6/0 == 10/0? How can you test this?
8+
Create an object and a function that takes the object as a parameter and prints out all of its names and values.
9+
On freecodecamp.com please try to do all [Basic JavaScript](https://www.freecodecamp.com/challenges/learn-how-free-code-camp-works) exercies (there are some topics we did not cover but you can do it). Please make sure you REALLY understand the exercies below:
10+
11+
https://www.freecodecamp.com/challenges/multiply-two-decimals-with-javascript
12+
13+
https://www.freecodecamp.com/challenges/store-multiple-values-in-one-variable-using-javascript-arrays
14+
15+
https://www.freecodecamp.com/challenges/build-javascript-objects
16+
17+
https://www.freecodecamp.com/challenges/add-new-properties-to-a-javascript-object
18+
19+
https://www.freecodecamp.com/challenges/delete-properties-from-a-javascript-object
220

3-
Finish these [Basic JavaScript](https://www.freecodecamp.com/challenges/learn-how-free-code-camp-works) exercises in FreeCodeCamp:
4-
from _Comment your JavaScript_ to the _Golf code_ exercise

Week2/MAKEME.md

Lines changed: 74 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,76 @@
11
##Assignment week 2
22

3-
Finish these [Basic JavaScript](https://www.freecodecamp.com/challenges/learn-how-free-code-camp-works) exercises in FreeCodeCamp:
4-
from _Iterate with JavaScript For Loops_ to the _Invert Regular Expression Matches with JavaScript_ exercise
3+
1.
4+
Create a function that takes two objects as parameters and compares them. You will actually need to write two functions - one that compares with == and one that compares with ===. Remember that objects can have objects inside of them so you'll need to find a way to compare every element of every object (types and values). For example:
5+
6+
```
7+
var obj1 = {
8+
a: 1,
9+
b: 'this is the letter b',
10+
c: { foo: 'what is a foo anyway',
11+
bar: [1,2,3,4]
12+
}
13+
}
14+
15+
var obj2 = {
16+
a: '1',
17+
b: 'this is the letter b',
18+
c: { foo: 'what is a foo anyway',
19+
bar: [1,2,3,4]
20+
}
21+
}
22+
```
23+
24+
in our example we'll say that obj1 == obj2 is true and obj1 === obj2 is false. Make sure you can see why before you write any code!
25+
26+
2.
27+
We saw that we can pass functions as arguments to other functions. Your task is to write a function that takes another function as an argument and runs it.
28+
29+
```
30+
function foo(func) {
31+
// What to do here?
32+
}
33+
34+
function bar() {
35+
console.log('Hello, I am bar!');
36+
}
37+
38+
foo(bar);
39+
```
40+
41+
42+
Write some code to test two arrays for equality using == and ===. Test the following:
43+
var x = [1,2,3];
44+
var y = [1,2,3];
45+
var z = y;
46+
What do you think will happen with x == y, x === y and z == y and z == x? Prove it!
47+
Don't cheat! Seriously - try it first.
48+
http://jsfiddle.net/jimschubert/85M4z/
49+
http://stackoverflow.com/questions/22395357/how-to-compare-two-arrays-are-equal-using-javascript
50+
51+
3.
52+
https://www.freecodecamp.com/challenges/comparisons-with-the-logical-and-operator
53+
54+
4.
55+
https://www.freecodecamp.com/challenges/record-collection
56+
57+
5.
58+
https://www.freecodecamp.com/challenges/iterate-over-arrays-with-map
59+
60+
6.
61+
We did the following example in class:
62+
63+
```
64+
var o1 = { foo: 'bar' };
65+
var o2 = { foo: 'bar' };
66+
var o3 = o2;
67+
```
68+
Show that changing o2 changes o3 (or not) and changing o2 changes o3 (or not).
69+
70+
Does the order that you assign (o3 = o2 or o2 = o3) matter?
71+
72+
-------------------------------------
73+
### Some further reading:
74+
Have a look at https://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/
75+
76+
'Coerce' means to try to change - so coercing `var x = '6'` to number means means trying to change the type to number temporarily.

Week3/MAKEME.md

Lines changed: 109 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
- https://developer.mozilla.org/en-US/docs/Glossary/Scope
77
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions
88

9-
109
## Challenges:
1110
- https://www.freecodecamp.com/challenges/declare-javascript-objects-as-variables
1211
- https://www.freecodecamp.com/challenges/make-instances-of-objects-with-a-constructor-function
@@ -15,13 +14,115 @@
1514

1615
And just for fun ... https://www.freecodecamp.com/challenges/sum-all-numbers-in-a-range
1716

18-
## Further reading:
19-
Function call() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call
20-
Function apply() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
21-
Function bind() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
22-
Arguments - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/arguments
23-
24-
2517
Loops practice - https://www.freecodecamp.com/challenges/iterate-with-javascript-for-loops
2618
https://www.freecodecamp.com/challenges/iterate-with-javascript-while-loops
2719
https://developer.mozilla.org/en/docs/Web/JavaScript/Closures
20+
21+
22+
### Refresher
23+
https://forum.freecodecamp.com/t/javascript-callback-functions/14658/2
24+
25+
http://www.learn-js.org/en/Callbacks
26+
27+
### Homework
28+
29+
1.
30+
We learned a little bit about callbacks in JS. A callback is simply a function passed to another function that gets executed (run) after a potentially long running operation has completed. There is another function called `setTimeout` that will wait a specified period of time and then execute a function. For example:
31+
32+
```
33+
function doIt() {
34+
console.log('I am done');
35+
}
36+
setTimeout(doIt, 5000)
37+
```
38+
If you run the above code it will wait 5 seconds and print `I am done`. Please read something about setTimeout on MDN. The first argument to the `setTimeout` call is the callback (`doIt`)
39+
40+
You must write a function that takes 4 arguments.
41+
- A start value
42+
- An end value
43+
- A callback to call if the number is divisible by 3
44+
- A callback to use if the number is divisible by 5
45+
46+
The function should generate an array containing values from start value to end value (inclusive).
47+
48+
Then the function should itereate over the array and call the second argument if the array value is divisible by 3
49+
50+
The function should call the second argument if the array value is divisible by 5
51+
52+
Both functions should be called if the array value is divisible by both 3 and 5
53+
54+
```
55+
THIS IS FAKE CODE
56+
function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) {
57+
// make array
58+
// start at beginning of array and check if you should call threeCallback or fiveCallback or go on to next
59+
}
60+
threeFive(10, 15, sayThree, sayFive);
61+
62+
// Should create an array [10,11,12,13,14,15]
63+
// and call sayFive, sayThree, sayThree, sayFive - please make sure you see why these calls are made before you start coding
64+
```
65+
66+
67+
2.
68+
Please solve this problem using:
69+
https://www.freecodecamp.com/challenges/repeat-a-string-repeat-a-string
70+
1. A for loop
71+
2. A while loop
72+
3. A do loop
73+
74+
3.
75+
Some practice with objects
76+
https://www.freecodecamp.com/challenges/construct-javascript-objects-with-functions
77+
78+
4.
79+
Nested loops
80+
https://www.freecodecamp.com/challenges/nesting-for-loops
81+
82+
83+
5.
84+
We did some work with arrays - `var arr = [1,2,3]`
85+
We can also nest arrays inside arrays like this `var arr2d = [[1,2], [3,4], [5,6]]` (for math people you can think of this as a matrix)
86+
How would you print all the items of an array with 3 dimensions?
87+
How about with K dimensions?
88+
What if you didn't know how deep the array was nested? (You don't have to write code for this but think about it)
89+
90+
6.
91+
Here are two functions that look like they do the something similar but they print different results. Please explain what's going on here.
92+
93+
```
94+
var x = 9;
95+
function f1(val) {
96+
val = val+1;
97+
return val;
98+
}
99+
f1(x);
100+
console.log(x);
101+
102+
103+
var y = { x: 9 };
104+
function f2(val) {
105+
val.x = val.x + 1;
106+
return val;
107+
}
108+
f2(y);
109+
console.log(y);
110+
```
111+
If you are confused please run the code and then consult the Google for "javascript pass by value pass by reference"
112+
113+
7.
114+
Next time we're going to cover the following Javascript topics:
115+
- Immediately Invoked Function Execution (IIFE) and anonymous functions
116+
- The this variable
117+
- Scope and closures
118+
- Promises (callbacks part 2)
119+
- Using APIs
120+
121+
Please read up on these topics
122+
123+
124+
125+
126+
127+
128+

Week3/README.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11

2-
#Reading material for the fourth lecture
2+
# Reading material for the fourth lecture
33

4-
TBA
4+
Function call() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call
5+
Function apply() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
6+
Function bind() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
7+
Arguments - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/arguments

Week5/MAKEME.md

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
## Homework week 5
2+
3+
### Refresher
4+
http://conceptf1.blogspot.nl/2013/11/javascript-closures.html
5+
https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/
6+
http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html
7+
https://medium.freecodecamp.com/5-javascript-bad-parts-that-are-fixed-in-es6-c7c45d44fd81
8+
9+
https://www.reddit.com/r/learnjavascript/comments/1v6n8p/closure_explain_likei_am_in_high_school/?st=ixsp0mbe&sh=5526d150
10+
A VERY popular StackOverflow article:
11+
http://stackoverflow.com/questions/111102/how-do-javascript-closures-work
12+
13+
### Homework
14+
15+
1.
16+
Let's continue to learn a little more about scope and Closures.
17+
18+
Please solve the following three questions as a warm up to thinking about scope.
19+
20+
https://www.freecodecamp.com/challenges/global-scope-and-functions
21+
https://www.freecodecamp.com/challenges/local-scope-and-functions
22+
https://www.freecodecamp.com/challenges/global-vs-local-scope-in-functions
23+
24+
2.
25+
What will be the output of the following code - and more importantly - WHY?
26+
27+
```
28+
for (var i = 0; i < 3; i++) {
29+
setTimeout(function() { alert(i); }, 1000 + i);
30+
}
31+
```
32+
33+
3.
34+
Write a function that would allow you to do this:
35+
36+
```
37+
var addSix = createBase(6);
38+
addSix(10); // returns 16
39+
addSix(21); // returns 27
40+
```
41+
42+
4.
43+
You will need to create an HTML document out of the below snippet to run the below code. A hint - the code is syntactically correct but doesn't do what you would expect. Can you see why and fix it?
44+
45+
Don't cheat - but if you get stuck ... http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example
46+
47+
```
48+
<button id="btn-0">Button 1!</button>
49+
<button id="btn-1">Button 2!</button>
50+
<button id="btn-2">Button 3!</button>
51+
52+
<script type="text/javascript">
53+
var prizes = ['A Unicorn!', 'A Hug!', 'Fresh Laundry!'];
54+
for (var btnNum = 0; btnNum < prizes.length; btnNum++) {
55+
// for each of our buttons, when the user clicks it...
56+
document.getElementById('btn-' + btnNum).onclick = function() {
57+
// tell her what she's won!
58+
alert(prizes[btnNum]);
59+
};
60+
}
61+
</script>
62+
```
63+
64+
65+
## TODO:
66+
67+
Create a game!
68+
* The game uses JSON as input
69+
* The game should have user interaction
70+
* Have at least 7 different functions
71+
* Have at least one callback function
72+
* Use objects (this can also be a source of inspiration for what kind of game to make)
73+
* The game has to run on an HTML page (live on Github using pages.github.io using this tutorial https://pages.github.com/ and share your link on Trello)
74+
* All the code needs to be commented
75+
* The Github page should have a README.md describing how the game/code works and a whishlist of features to be added in the future
76+
77+
- Create at least 1 issue (bug / feature / code improvement) on another students github game repository. Do this in pairs.
78+
- solve the issue proposed by another student in your github game repo. More info [here](https://hackyourfuture.slack.com/files/michahell/F31BX1XT6/Merging_a_local_branch_into_master)
79+
- use a local non-tracking branch and merge into master
80+
- or use a local tracking branch tracking your master, and push directly to master (slightly harder / more advanced)
81+
82+
[Example](https://www.w3schools.com/graphics/game_intro.asp) of a simple js game on w3schools

Week5/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
## Reading for lecture 6

0 commit comments

Comments
 (0)