You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We expect you to __always__ come prepared to the class on Sunday.
24
22
25
23
## Module goals:
@@ -34,5 +32,6 @@ A tool capable of loading a JSON file and representing it in the DOM
34
32
A web app with external data source using at least one API 《〠_〠》
35
33
36
34
### Overall
37
-
A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/fundamentals) and research/ ask for help (Slack!) with the concepts that are not entirely clear.
35
+
A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](https://github.com/HackYourFuture/JavaScript/tree/master/fundamentals) and research/ ask for help (Slack!) with the concepts that are not entirely clear.
Copy file name to clipboardExpand all lines: Week1/MAKEME.md
+20-1Lines changed: 20 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,11 @@
2
2
3
3
1. Create a `.js` file that prints `Hello` when you run it from the command line. (Hint: `node` is the program that can run your JavaScript files.)
4
4
5
-
2. Create a function named `colorCar` that receives a color, and prints out, "a red car" for example. (Hint: put it in your file and run it like before.)
5
+
2. Create a function that takes 3 arguments and returns the sum of the three arguments.
6
+
7
+
3. Create a function named `colorCar` that receives a color, and prints out, "a red car" for example. (Hint: put it in your file and run it like before.)
8
+
9
+
4. Create an object and a function that takes the object as a parameter and prints out all of its names and values.
6
10
7
11
3. Create a function named `vehicleType` that receives a color, and a code, 1 for car, 2 for motorbike. And prints "a blue motorbike" for example when called as `vehicleType("blue", 2)`
8
12
@@ -18,10 +22,25 @@
18
22
19
23
9. What if you add one more vehicle to the list, can you have that added to the advertisement without changing the code for question 8?
20
24
25
+
10. Write a program to answer the following questions:
26
+
* Can you store multiple types in an array? Numbers and strings?
27
+
* Can you compare inifities? (Not in Eyad's world) - does 6/0 == 10/0? How can you test this?
28
+
29
+
11. Can you write the following without the `if` statement, but with just as a single line with `console.log(...);`?
30
+
```js
31
+
if (3==3) {
32
+
console.log("true")
33
+
} else {
34
+
console.log("false")
35
+
}
36
+
```
37
+
38
+
21
39
On freecodecamp.com please try to do all [Basic JavaScript](https://www.freecodecamp.com/challenges/learn-how-free-code-camp-works) exercises (there are some topics we did not cover but you can do it). Please make sure you REALLY understand the exercises below:
Copy file name to clipboardExpand all lines: Week2/MAKEME.md
+9-16Lines changed: 9 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,9 +1,8 @@
1
1
## Assignment week 2
2
2
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:
3
+
1. 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
4
6
-
```
5
+
```js
7
6
var obj1 = {
8
7
a:1,
9
8
b:'this is the letter b',
@@ -23,10 +22,9 @@ var obj2 = {
23
22
24
23
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
24
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.
25
+
2. 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.
And just for fun ... https://www.freecodecamp.com/challenges/sum-all-numbers-in-a-range
17
+
12
18
And a custom DOM manipulation challenge :mortar_board:
13
19
14
20
1. Open a new js file and start by declaring in array with in there 10 strings. These strings should be of book title's you have read (or made up) and be lowercase without spaces or special characters so that you can use these later as Id's. (Example: Harry Potter's - The Chamber of Secrets --> `harry_potter_chamber_secrets`).
@@ -23,4 +29,4 @@ And a custom DOM manipulation challenge :mortar_board:
23
29
24
30
6. Beautify your html page with css, add sources and alts to each of the images.
25
31
26
-
7.__Optional (expert)__ Download book covers for each book, construct a new Object which has as keys the bookId's again, and as value the path to the image source (e.g. `{"harry_potter_blabla": "./img/harry_potter_blabla.jpg", ...}`). Now loop over these entries (_hint: `Object.keys(objectName)` gives you an array containing the keys_). Then write a function which places an image at the corresponding `li` element. Remember that Objects are not ordered, so you cannot guarantee that the first key is the first `li` element. (_Hint: you could give each `li` item an `id` tag by modifying the function you made before_)
32
+
7.__Optional (expert)__ Download book covers for each book, construct a new Object which has as keys the bookId's again, and as value the path to the image source (e.g. `{"harry_potter_blabla": "./img/harry_potter_blabla.jpg", ...}`). Now loop over these entries (_hint: `Object.keys(objectName)` gives you an array containing the keys_). Then write a function which places an image at the corresponding `li` element. Remember that Objects are not ordered, so you cannot guarantee that the first key is the first `li` element. (_Hint: you could give each `li` item an `id` tag by modifying the function you made before_)
Next week Unmesh will give you your first Git session, please look through the [GIT](https://github.com/HackYourFuture/Gitrepository) and read the learning goals
5
-
6
-
### Here are some reading materials explaining the material of the previous class in more detail.
7
-
- Function call() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call
8
-
- Function apply() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
9
-
- Function bind() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
Next week Unmesh will give you your first Git session, please look through the [GIT](https://github.com/HackYourFuture/Gitrepository) and read the learning goals
11
+
15
12
### Read this is preparation for the material taught in the upcoming class
1. Go to http://www.omdbapi.com/?s=dog and change the word dog in the url to a different common word. You will get as a result, a list of movies with this word in the title. Make sure you get at least 5 results.
13
13
2. You can copy the JSON and put it in a string at the top of your js file. Print the title of the 3rd movie in the array to the console.
14
14
3. Make a ul with a li for each title (just like you did with the books in the previous assignment
Copy file name to clipboardExpand all lines: Week5/MAKEME.md
+86-7Lines changed: 86 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,21 +12,18 @@
12
12
13
13
### JS
14
14
15
-
You are going to continue using your homework from the previous weeks, and we are going to extend it.
16
-
You will have to change some functions you wrote, and depending on how well you did you may or may
17
-
not have to change all your code ;).
18
15
19
16
1. Extend your site with an input element. This is so the user will be able to type in text which will be later used to search the movie database for corresponding movies.
20
17
21
18
2. Also place a button near the input element. Capture the click even for this button and couple it to a function which grabs the user input from the text field and which initially logs the user input.
22
19
23
20
3. Make a function which takes a single argument. The function should make an XHR request to `http://www.omdbapi.com/?s=[SEARCH_TERM]` where the search term will be the argument. This argument will be the input the user has given you, so make sure that when the user clicks the button you call this function with the argument.
24
21
25
-
Look at the [documentation of the API](http://www.omdbapi.com/) and see which other query parameters they support. Mess around with this to see how changing (or adding) parameters modifies your results.
22
+
Look at the [documentation of the API](http://www.omdbapi.com/) and see which other query parameters they support. Mess around with this to see how changing (or adding) parameters modifies your results.
26
23
27
24
Use the code below to make the request (change it if you need to):
28
25
29
-
```
26
+
```js
30
27
functionloadMovies(){
31
28
//This function keeps track of changes to the xhr request
32
29
functionprocessRequest() {
@@ -51,10 +48,92 @@ function loadMovies(){
51
48
```
52
49
53
50
54
-
4. Use the code from your previous assignment to render the new results. If you have already displayed previous results make sure you clear them (hint: `someElement.removeChild(someChild)`). Make sure you style these results, use a stylesheet for this! Also make sure you do not use javascript to construct static elements. This way you can handle the positioning of elements easier.
51
+
4. Use the code from your previous assignment to render the new results. If you have already displayed previous results make sure you clear them (hint: `someElement.removeChild(someChild)`). Make sure you style these results, use a style sheet for this! Also make sure you do not use javascript to construct static elements. This way you can handle the positioning of elements easier.
55
52
56
53
5. Change the layout of the page so that you only show a list of movie titles on the left side of your page. When the user hovers over a link (or maybe with a click) you want to show the additional information about the movie (poster, year etc.) on the right column.
57
54
58
-
6. If you have any questions, ask them on slack in the class 9 channel. We want to see more questions as both you and we can learn from them, also try to help eachother!
55
+
6. If you have any questions, ask them on slack in the class 9 channel. We want to see more questions as both you and we can learn from them, also try to help each other!
56
+
59
57
60
58
__Bonus__: Write a function takes this array `['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c']` and returns an array which only has unique values in it (so it removes the duplicate ones). Make it a 'smart' algorithm that could do it for every array (only strings/number). Try to make it as fast as possible!
59
+
60
+
61
+
### More homework
62
+
63
+
1. 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:
64
+
65
+
```js
66
+
functiondoIt() {
67
+
console.log('I am done');
68
+
}
69
+
setTimeout(doIt, 5000)
70
+
```
71
+
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`)
72
+
73
+
You must write a function that takes 4 arguments.
74
+
- A start value
75
+
- An end value
76
+
- A callback to call if the number is divisible by 3
77
+
- A callback to use if the number is divisible by 5
78
+
79
+
The function should generate an array containing values from start value to end value (inclusive).
80
+
81
+
Then the function should iterate over the array and call the second argument if the array value is divisible by 3
82
+
83
+
The function should call the second argument if the array value is divisible by 5
84
+
85
+
Both functions should be called if the array value is divisible by both 3 and 5
86
+
87
+
```js
88
+
THIS IS FAKE CODE
89
+
function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) {
90
+
// make array
91
+
// start at beginning of array and check if you should call threeCallback or fiveCallback or go on to next
92
+
}
93
+
threeFive(10, 15, sayThree, sayFive);
94
+
95
+
// Should create an array [10,11,12,13,14,15]
96
+
// and call sayFive, sayThree, sayThree, sayFive - please make sure you see why these calls are made before you start coding
-[Learning JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#detailnamespacing) up to and including chapter 3
7
6
-[JavaScript Variable Scope and Hoisting Explained](http://javascriptissexy.com/javascript-variable-scope-and-hoisting-explained/)
8
7
9
-
>If you feel you need preparation for the test I recommend to take a look at the topics listed in the [README](https://github.com/HackYourFuture) of this repo (up to and including week 6) and look up these concepts in your __Smarter Way to Learn JavaScript__ book :books:. It's also useful to go through the reading material and homework of the last weeks.
8
+
>If you feel you need preparation for the test I recommend to take a look at the topics listed in the [README](https://github.com/HackYourFuture) of this repo (up to and including week 6) and look up these concepts in your __Smarter Way to Learn JavaScript__ book :books:. It's also useful to go through the reading material and homework of the last weeks.
0 commit comments