|
1 | 1 | # Homework Week 3 |
2 | 2 |
|
3 | 3 | ## Read: |
4 | | -- https://en.wikipedia.org/wiki/Object-oriented_programming |
5 | | -- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this |
6 | | -- https://developer.mozilla.org/en-US/docs/Glossary/Scope |
7 | | -- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions |
| 4 | +- https://github.com/HackYourFuture/JavaScript/blob/laurens_thomas/Week3/README.md |
8 | 5 |
|
9 | 6 | ## Challenges: |
10 | 7 | - https://www.freecodecamp.com/challenges/declare-javascript-objects-as-variables |
11 | 8 | - https://www.freecodecamp.com/challenges/make-instances-of-objects-with-a-constructor-function |
12 | 9 | - https://www.freecodecamp.com/challenges/make-unique-objects-by-passing-parameters-to-our-constructor |
13 | 10 | - https://www.freecodecamp.com/challenges/make-object-properties-private |
14 | 11 |
|
15 | | -And just for fun ... https://www.freecodecamp.com/challenges/sum-all-numbers-in-a-range |
16 | | - |
17 | | -Loops practice - https://www.freecodecamp.com/challenges/iterate-with-javascript-for-loops |
18 | | -https://www.freecodecamp.com/challenges/iterate-with-javascript-while-loops |
19 | | -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 | | - |
| 12 | +And a custom DOM manipulation challenge :mortar_board: |
| 13 | +1. Make a list of >= 10 books you've read, store it in an array, log the array |
| 14 | +2. Create a basic html file called inxed.html and use it to load the js file, confirm the console.log show the lists |
| 15 | +3. Generate a `ul` with a `li` for each book in the array using a forloop and a function |
| 16 | +4. Use a forloop to generate objects for each book, then add at least the following properties to each object: title, language, author. Change the function generating the `ul` so that it now generates a section for each object. |
| 17 | +5. Fill each section with the details you have for each book using a function. Make sure you choose the right html elements for each piece of info, for instance, a heading for the title. |
| 18 | +6. Download book covers for each book, give each book object a property storing the location of the cover image for that book. write a function that uses a query selector to select each of the previously generated sections and insert a generated `img` element that shows the books cover. |
| 19 | +7. Beautify your html page with css, add sources and alts to each of the images. |
0 commit comments