From 8f769b941125b83842432765d3501a30b8367a11 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Wed, 30 Aug 2017 14:38:21 +0200 Subject: [PATCH 001/355] updated review week1 --- Week0/README.md | 1 + Week1/README.md | 2 + Week1/REVIEW.md | 98 +++++++++++++++++++++++- Week1/assets/box.png | Bin 0 -> 35456 bytes Week2/MAKEME.md | 2 +- Week2/REVIEW.md | 172 +++++++++++++++++++++++++++---------------- Week3/REVIEW.md | 12 +++ Week8/README.md | 2 +- 8 files changed, 219 insertions(+), 70 deletions(-) create mode 100644 Week1/assets/box.png create mode 100644 Week3/REVIEW.md diff --git a/Week0/README.md b/Week0/README.md index a698af2b2..33e674c5f 100644 --- a/Week0/README.md +++ b/Week0/README.md @@ -6,6 +6,7 @@ In week one we will discuss the following topics: • Intro JavaScript (What is it, where can you use it for) • Variables [var, let, const] • Basic Data types [Strings, Numbers, Arrays] +• Operators ``` ### Here are resources that we like you to read as a preparation for the coming lecture: diff --git a/Week1/README.md b/Week1/README.md index 9d5888cd3..c57dcb108 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -14,6 +14,8 @@ In week two we will discuss the following topics: - 'Functions' of _A Smarter Way To Learn JavaScript_ : Chapters 35 - 38 - Functions ~ http://eloquentjavascript.net/03_functions.html +- 'Objects' of _A Smarter Way To Learn JavaScript_ : Chapters 35 - 38 +- 'Conditions' of _A Smarter Way To Learn JavaScript_ : Chapters 35 - 38 - Program structure ~ http://eloquentjavascript.net/02_program_structure.html _Please go through the material and come to class prepared!_ diff --git a/Week1/REVIEW.md b/Week1/REVIEW.md index 29a1e15e5..32477fbc6 100644 --- a/Week1/REVIEW.md +++ b/Week1/REVIEW.md @@ -1,5 +1,14 @@ # REVIEW JavaScript Basics week 1 +``` +This review covers: +• some commands thought by Unmesh in class today :white_check_mark: +• Intro JavaScript (What is it, where can you use it for) +• Variables [var, let, const] :white_check_mark: +• Basic Data types [Strings, Numbers, Arrays] :white_check_mark: +• Operators +``` + ## CLI ``` pwd : present working directory @@ -33,6 +42,12 @@ man : Display manual of the COMMAND A "variable" is a place where you can store information, such as a string, or a number. New variables in JavaScript are declared using one of three keywords: let, const, or var. +> Think of variables names like **labels** on boxes, while the value of the variable are the **contents** of the box - you could change the contents of a box and leave the label intact, the contents of the boxes can have different types, the boxes should have good labels (a box of books being labeled pens would be very confusing), +> +![Variables are like boxes](./assets/box.png) +> Photo from [Khan Academy](http://cs-blog.khanacademy.org/2013/09/teaching-variables-analogies-and.html) + + ### Variable declaration Variables are "declared" using the `var`, `let` or `const` keyword: @@ -62,8 +77,6 @@ foo = 4; // change variable `foo` ``` -Basic Data types [Strings, Numbers, Arrays] - ## Variable types All variables have a type. In our example above, the variable `x` is a `number`. JavaScript supports the following types: @@ -105,6 +118,13 @@ let x; console.log(typeof x); // -> "undefined" ``` +## Strings + +>TODO + +## Numbers + +>TODO ## Arrays @@ -131,14 +151,84 @@ console.log(arr[a]); // -> jane If the index you use is not an integer (a whole number), or if it's less than `0` or if it's greater than or equal to the array's length, you will get back `undefined`. +More about [arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) -### 2.3 Basic operators +### Comparison operators >Note the two different uses of the equals sign: A single equals sign (=) is used to assign a value to a variable. A triple equals sign (===) is used to compare two values (see Equality Operators). -### 2.5 Operator precedence +#### Equality operators +* Equality `==` +* Inequality `!=` +* Identity / strict equality `===` +* Non-identity / strict inequality `!==` + +How does this work in practice? + +```js +1 == 1 // true +7 == '7' // true +1 != 2 // true +5 === 5 // true +9 === '9' // false +3 !== 3 // true +3 !== '3' // true +``` + +> why does `7 == '7'` returns true and `9 === '9'` returns false? + +#### Relational operators +* Greater than operator `>` +* Greater than or equal operator `>=` +* Less than operator `<` +* Less than or equal operator `<=` + +```js +4 > 3 // returns true +3 >= 3 // returns true +13 < 12 //returns false +3 <= 4 // returns true +``` + +More about [comparison operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) + +### Arithmetic operators + +* Addition `+` +* Subtraction `-` +* Multiplication `*` +* Division `/` +* Remainder (sometimes called modulo) `%` +
Returns the remainder left over after you've shared the left number out into a number of integer portions equal to the right number. + +```js +8 + 9 //returns 17, adds two numbers together. +20 - 12 //returns 8, subtracts the right number from the left. +3 * 4 //returns 12, multiplies two numbers together. +10 / 5 //return 2, divides the left number by the right. +8 % 3 //returns 2, as three goes into 8 twice, leaving 2 left over. +``` + +More about [Arithmetic_Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#.25_.28Modulus.29) + +### Logical operators + +* AND `&&` +* OR `||` +* NOT `!` + +Given that x = 6 and y = 3 +```js +x < 10 && y > 1 // returns true +x == 5 || y == 5 // returns false +x !== y // returns true +``` + +More about [logical operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators) + +### Operator precedence There are compound assignment operators such as +=. The following two assignments are equivalent: diff --git a/Week1/assets/box.png b/Week1/assets/box.png new file mode 100644 index 0000000000000000000000000000000000000000..872c8022118fa2ac94e46264d487423d44c42d63 GIT binary patch literal 35456 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

2Cv6Wu=Giy5T%yX~d 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 4 ? "yes" : "no"` -* `a + b` -* `a && b || c` -* `arr.length` -* `obj["name"]` -* `[1, 2, 3]` -* `arr[1]` -* `[1]` (this is an array with one element!) -* `function a() { return 4; }` - -The last one requires a bit of explanation. If you write: - -```js -function a() { return 4; } ``` - -by itself, this is a *statement* (a function declaration statement). However, if you write it as part of a statement, such as: - -```js -let b = function a() { return 4; } +This review covers: +• Loops (for/while) +• Functions :white_check_mark: +• Advanced data types [Objects] :white_check_mark: +• Conditions +• Statements vs Expressions :white_check_mark: +• Naming conventions ``` -now it is an expression. This is an exceptional situation where something can be a statement or an expression. - -### Examples of not-expressions - -The following are not expressions: - -* `var` -> this is a keyword, see below -* `var x;` -> this is a statement -* `+` -> this is only an operator -* `if (a > 4) { return "yes"; } else { return "no"; }` - -`if` is also a statement. However, it is quite a complex statement. It is also referred to as a "construct", just like `for`, `while`, `try`, etc. - ## Functions A function is a reusable piece of code. Functions are *very* important in JavaScript, to the extent that some people call JavaScript a "function-oriented" language. As mentioned above, variables can be of type function. In fact, *every function is a variable*. @@ -144,3 +87,104 @@ myArray.slice(); myNumber.toString(); ... ``` + + +## Objects + +Variables that are objects also contain a list of things, but instead of them being in some specific order, they can be assigned to words, called "keys". Instead of "elements" the things that are inside objects are called "properties". + + +```js +var obj = {name: 'John', age: 24}; +``` + +This object has two properties: `name` and `age`. The "value" of the property `name` is the string `'John'`. The "value" of the property `age` is the number `24`. + +When accessing object properties, you can use the dot-notation: `obj.name` or the bracket-notation: `obj["name"]`. Note that the latter looks a lot like the way to access array elements. However, here what's inside the bracket (called "key" for objects, instead of "index") must be a string. + +```js +console.log(obj.name); // -> 'John' +console.log(obj['name']); // -> 'John' +``` + +Just like with arrays, you can also use a variable to access properties, as long as these variables are strings. In this case you cannot use the dot-notation! + +```js +var ageKey = 'age'; +console.log(obj[ageKey]); // -> 24 +``` + +Remember that there is a very big difference between `obj[name]` and `obj["name"]`. + +> Note: +> +> Thinking back of arrays, the length of an array can be retrieved by `arr.length`. So as mentioned before, arrays are just like other JavaScript objects. You could even write `arr['length']` to access the `length` property of the array. JavaScript will look: is what we put between brackets a number? Then it is an index and we'll look up the correct array element. If it's a string, it's a key and we will look up the corresponding property. + + +## Statements & expressions + +Most programming languages that you'll encounter in real life are called "imperative" programming languages. JavaScript is such an imperative programming language. Imperative is another word for command-like. That is, you give the computer a bunch of commands after each other. First do this, then do that, etc. + +These individual commands are called "statements" in imperative programming languages. You can compare them with sentences in the English language. They have a use by themselves, and do not need something else. "The man eats bread." is a full sentence, it conveys a meaning by itself. A sentence in English is always terminated by a period. + +Similarly, a statement in JavaScript should provide a command by itself. JavaScript-statements are (almost always) terminated by a semicolon. + +This is a complete statement: + +```js +let s = "HackYourFuture"; +``` + +It is a full command: declare a variable `s` and initialize it with `"HackYourFuture"`. JavaScript doesn't need any other information to know what we want. The statement is terminated with a semicolon. + +However, this is not a complete statement: + +```js +4 + 5 +``` + +This equals `9`, but what is JavaScript to do with it? It doesn't provide a command. You'd need to do something with it, e.g. `var x = 4 + 5;` or `callFunction(4 + 5)`. We call these parts of statements "expressions". Expressions are not terminated by semicolons. Expressions always "evaluate into a value". In our example, the expression `4 + 5` "evaluates into `9`". If expressions cannot be evaluated into a value, they are invalid. For instance, `4 +` is not a valid expression, it is incomplete, because we need something else after the plus sign. + +So, statements can *contain* expressions. Can expressions contain statements? No, they cannot. However, they can themselves contain expressions. Think about `4 + 5`: it contains the expressions `4` and `5`, as these both evaluate into a value: the expression `4` evaluates into the number `4`, it is a very simple expression. Similarly, `true`, `null`, `undefined` are all expressions. + +### Examples of expressions + +Here are some examples of expressions. Remember: expressions evaluate into a value, but do not provide a command: + +* `sum(a, b)` +* `a` +* `a > 4 ? "yes" : "no"` +* `a + b` +* `a && b || c` +* `arr.length` +* `obj["name"]` +* `[1, 2, 3]` +* `arr[1]` +* `[1]` (this is an array with one element!) +* `function a() { return 4; }` + +The last one requires a bit of explanation. If you write: + +```js +function a() { return 4; } +``` + +by itself, this is a *statement* (a function declaration statement). However, if you write it as part of a statement, such as: + +```js +let b = function a() { return 4; } +``` + +now it is an expression. This is an exceptional situation where something can be a statement or an expression. + +### Examples of not-expressions + +The following are not expressions: + +* `var` -> this is a keyword, see below +* `var x;` -> this is a statement +* `+` -> this is only an operator +* `if (a > 4) { return "yes"; } else { return "no"; }` + +`if` is also a statement. However, it is quite a complex statement. It is also referred to as a "construct", just like `for`, `while`, `try`, etc. + diff --git a/Week3/REVIEW.md b/Week3/REVIEW.md new file mode 100644 index 000000000..009d2546e --- /dev/null +++ b/Week3/REVIEW.md @@ -0,0 +1,12 @@ +# REVIEW JavaScript week 3 + +``` +This review covers: +• More CLI +• Closures +• Scope +• Array Manipulations +• Basic DOM manipulations [img src, innerHTML] +• Code commenting +``` + diff --git a/Week8/README.md b/Week8/README.md index ce1fb85ab..7672ec957 100644 --- a/Week8/README.md +++ b/Week8/README.md @@ -1,4 +1,4 @@ -# Reading material for the ningth lecture: +# Reading material for the ninth lecture: ``` In week nine we will discuss the following topics: From a80195f8f88a3001fc918532cd210fa452ff8c33 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Wed, 30 Aug 2017 14:40:26 +0200 Subject: [PATCH 002/355] clean up --- Week1/REVIEW.md | 6 +++--- Week2/REVIEW.md | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/Week1/REVIEW.md b/Week1/REVIEW.md index 32477fbc6..6e6825744 100644 --- a/Week1/REVIEW.md +++ b/Week1/REVIEW.md @@ -2,10 +2,10 @@ ``` This review covers: -• some commands thought by Unmesh in class today :white_check_mark: +• some commands thought by Unmesh in class today • Intro JavaScript (What is it, where can you use it for) -• Variables [var, let, const] :white_check_mark: -• Basic Data types [Strings, Numbers, Arrays] :white_check_mark: +• Variables [var, let, const] +• Basic Data types [Strings, Numbers, Arrays] • Operators ``` diff --git a/Week2/REVIEW.md b/Week2/REVIEW.md index cc8f0b2b9..819e6f8a5 100644 --- a/Week2/REVIEW.md +++ b/Week2/REVIEW.md @@ -3,10 +3,10 @@ ``` This review covers: • Loops (for/while) -• Functions :white_check_mark: -• Advanced data types [Objects] :white_check_mark: +• Functions +• Advanced data types [Objects] • Conditions -• Statements vs Expressions :white_check_mark: +• Statements vs Expressions • Naming conventions ``` From 142d1cfca6cb79b1b4630fa4193843c7b9e9e4bf Mon Sep 17 00:00:00 2001 From: mkruijt Date: Wed, 30 Aug 2017 14:43:04 +0200 Subject: [PATCH 003/355] fixed returns --- Week1/REVIEW.md | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/Week1/REVIEW.md b/Week1/REVIEW.md index 6e6825744..7dc2d683e 100644 --- a/Week1/REVIEW.md +++ b/Week1/REVIEW.md @@ -168,13 +168,13 @@ A triple equals sign (===) is used to compare two values (see Equality Operators How does this work in practice? ```js -1 == 1 // true -7 == '7' // true -1 != 2 // true -5 === 5 // true -9 === '9' // false -3 !== 3 // true -3 !== '3' // true +1 == 1 // -> true +7 == '7' // -> true +1 != 2 // -> true +5 === 5 // -> true +9 === '9' // -> false +3 !== 3 // -> true +3 !== '3' // -> true ``` > why does `7 == '7'` returns true and `9 === '9'` returns false? @@ -186,10 +186,10 @@ How does this work in practice? * Less than or equal operator `<=` ```js -4 > 3 // returns true -3 >= 3 // returns true -13 < 12 //returns false -3 <= 4 // returns true +4 > 3 // -> true +3 >= 3 // -> true +13 < 12 // -> false +3 <= 4 // -> true ``` More about [comparison operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) @@ -204,11 +204,11 @@ More about [comparison operators](https://developer.mozilla.org/en-US/docs/Web/J
Returns the remainder left over after you've shared the left number out into a number of integer portions equal to the right number. ```js -8 + 9 //returns 17, adds two numbers together. -20 - 12 //returns 8, subtracts the right number from the left. -3 * 4 //returns 12, multiplies two numbers together. -10 / 5 //return 2, divides the left number by the right. -8 % 3 //returns 2, as three goes into 8 twice, leaving 2 left over. +8 + 9 // -> 17, adds two numbers together. +20 - 12 // -> 8, subtracts the right number from the left. +3 * 4 // -> 12, multiplies two numbers together. +10 / 5 // -> 2, divides the left number by the right. +8 % 3 /// -> 2, as three goes into 8 twice, leaving 2 left over. ``` More about [Arithmetic_Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#.25_.28Modulus.29) @@ -221,9 +221,9 @@ More about [Arithmetic_Operators](https://developer.mozilla.org/en-US/docs/Web/J Given that x = 6 and y = 3 ```js -x < 10 && y > 1 // returns true -x == 5 || y == 5 // returns false -x !== y // returns true +x < 10 && y > 1 // -> true +x == 5 || y == 5 // -> false +x !== y // -> true ``` More about [logical operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators) From a0aea7a6d854f6effda6fd0f5f6fa11328f3d0d1 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Wed, 30 Aug 2017 16:06:01 +0200 Subject: [PATCH 004/355] added review to agenda --- README.md | 38 ++++++++++++++++++++++++++++---------- 1 file changed, 28 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 43ede55e5..aa9db7382 100644 --- a/README.md +++ b/README.md @@ -6,16 +6,34 @@ Here you can find course content and homework for the JavaScript 1,2 and 3 modules -|Week|Topic|Read|Homework| -|----|-----|----|--------| -|0.|Preparation for your first JavaScript session|[Pre-reading](https://github.com/HackYourFuture/JavaScript/tree/master/Week0) + [CLI Reading Week 1](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md)|-| -|1.|• [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :heart:
• Intro JavaScript (What is it, where can you use it for)
• Variables [var, let, const]
• Basic Data types [Strings, Numbers, Arrays]
• Operators|[Reading Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/README.md) | [Homework Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/MAKEME.md)| -|2.|• Advanced data types [Objects]
• Conditions
• Statements vs Expressions
• Loops (for/while)
• Functions
• Naming conventions|[Reading Week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/README.md)|[Homework week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/MAKEME.md)| -|3.|• [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :balloon:
• Closures
• Scope
• Array Manipulations
• Basic DOM manipulations [img src, innerHTML]
• Code commenting|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/MAKEME.md)| -|4.|• First Git Session with Unmesh :smiling_imp:
• JSON
• Code debugging using the browser
• Functions + JSON/Arrays
• Code flow (order of execution)
• (capturing user input)
• Structuring code files|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/Week4)|[JS](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/MAKEME.md) + [Git Homework Week 4](https://github.com/HackYourFuture/Git/blob/master/Lecture-1.md)| -|5.|• Second Git Session :see_no_evil:
• Events
• Callbacks
• XHTTP Requests
• API calls|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5)|[Homework Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5/MAKEME.md) | -|6.|• Async VS Sync
• Polling
• Structure for a basic SPA
TEST :boom:|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6/MAKEME.md)| -|7.|• Third Git Session (Git Workflow :muscle:)
• Map, reduce filter|[Reading Week 7](https://github.com/HackYourFuture/JavaScript/tree/master/Week7)|[Homework Week 7](https://github.com/HackYourFuture/JavaScript/tree/master/Week7/MAKEME.md)| +|Week|Topic|Read|Homework|Review| +|----|-----|----|--------|------| +|0.|Preparation for your first JavaScript session +|[Pre-reading](https://github.com/HackYourFuture/JavaScript/tree/master/Week0) + [CLI Reading Week 1](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md) +|-| +|1.|• [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :heart:
+• Intro JavaScript (What is it, where can you use it for)
+• Variables [var, let, const]
+• Basic Data types [Strings, Numbers, Arrays]
+• Operators +|[Reading Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/README.md) +|[Homework Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/MAKEME.md) +|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md)| +|2.|• Advanced data types [Objects]
• Conditions
• Statements vs Expressions
• Loops (for/while)
• Functions
• Naming conventions|[Reading Week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/README.md)|[Homework week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week2/REVIEW.md)| +|3.|• [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :balloon:
• Closures
• Scope
• Array Manipulations
• Basic DOM manipulations [img src, innerHTML]
• Code commenting|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/MAKEME.md)|Review| +|4.|• First Git Session with Unmesh :smiling_imp:
• JSON
• Code debugging using the browser
• Functions + JSON/Arrays
• Code flow (order of execution)
• (capturing user input)
• Structuring code files|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/Week4)|[JS](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/MAKEME.md) + [Git Homework Week 4](https://github.com/HackYourFuture/Git/blob/master/Lecture-1.md)|Review| +|5.|• Second Git Session :see_no_evil:
• Events
• Callbacks
• XHTTP Requests
• API calls|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5)|[Homework Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5/MAKEME.md)|Review| +|6.|• Async VS Sync
+ • Polling
+ • Structure for a basic SPA
+ TEST :boom: + |[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6) + |[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6/MAKEME.md) + |Review| +|7.|• Third Git Session (Git Workflow :muscle:)
+ • Map, reduce filter + |[Reading Week 7](https://github.com/HackYourFuture/JavaScript/tree/master/Week7) + |[Homework Week 7](https://github.com/HackYourFuture/JavaScript/tree/master/Week7/MAKEME.md)| |8.|• (re)writing data structures (in JSON)
• Closures
• Promises
|[Reading Week 8](https://github.com/HackYourFuture/JavaScript/tree/master/Week8/README.md)|[Homework Week 8](https://github.com/HackYourFuture/JavaScript/tree/master/Week8/MAKEME.md)| |9.| • Object Literals (and other patterns)
TEST :boom:|[Reading Week 9](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/README.md)|[Homework Week 9](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/MAKEME.md)| From 59652b8f831dbbdf72872e3ce06b5f666b689c23 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Wed, 30 Aug 2017 16:07:40 +0200 Subject: [PATCH 005/355] added review to agenda --- README.md | 30 ++++++------------------------ 1 file changed, 6 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index aa9db7382..bd529da67 100644 --- a/README.md +++ b/README.md @@ -8,34 +8,16 @@ Here you can find course content and homework for the JavaScript 1,2 and 3 modul |Week|Topic|Read|Homework|Review| |----|-----|----|--------|------| -|0.|Preparation for your first JavaScript session -|[Pre-reading](https://github.com/HackYourFuture/JavaScript/tree/master/Week0) + [CLI Reading Week 1](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md) -|-| -|1.|• [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :heart:
-• Intro JavaScript (What is it, where can you use it for)
-• Variables [var, let, const]
-• Basic Data types [Strings, Numbers, Arrays]
-• Operators -|[Reading Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/README.md) -|[Homework Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/MAKEME.md) -|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md)| +|0.|Preparation for your first JavaScript session|[Pre-reading](https://github.com/HackYourFuture/JavaScript/tree/master/Week0) + [CLI Reading Week 1](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md)|-| +|1.|• [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :heart:
• Intro JavaScript (What is it, where can you use it for)
• Variables [var, let, const]
• Basic Data types [Strings, Numbers, Arrays]
• Operators|[Reading Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/README.md) | [Homework Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md)| |2.|• Advanced data types [Objects]
• Conditions
• Statements vs Expressions
• Loops (for/while)
• Functions
• Naming conventions|[Reading Week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/README.md)|[Homework week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week2/REVIEW.md)| |3.|• [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :balloon:
• Closures
• Scope
• Array Manipulations
• Basic DOM manipulations [img src, innerHTML]
• Code commenting|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/MAKEME.md)|Review| |4.|• First Git Session with Unmesh :smiling_imp:
• JSON
• Code debugging using the browser
• Functions + JSON/Arrays
• Code flow (order of execution)
• (capturing user input)
• Structuring code files|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/Week4)|[JS](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/MAKEME.md) + [Git Homework Week 4](https://github.com/HackYourFuture/Git/blob/master/Lecture-1.md)|Review| |5.|• Second Git Session :see_no_evil:
• Events
• Callbacks
• XHTTP Requests
• API calls|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5)|[Homework Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5/MAKEME.md)|Review| -|6.|• Async VS Sync
- • Polling
- • Structure for a basic SPA
- TEST :boom: - |[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6) - |[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6/MAKEME.md) - |Review| -|7.|• Third Git Session (Git Workflow :muscle:)
- • Map, reduce filter - |[Reading Week 7](https://github.com/HackYourFuture/JavaScript/tree/master/Week7) - |[Homework Week 7](https://github.com/HackYourFuture/JavaScript/tree/master/Week7/MAKEME.md)| -|8.|• (re)writing data structures (in JSON)
• Closures
• Promises
|[Reading Week 8](https://github.com/HackYourFuture/JavaScript/tree/master/Week8/README.md)|[Homework Week 8](https://github.com/HackYourFuture/JavaScript/tree/master/Week8/MAKEME.md)| -|9.| • Object Literals (and other patterns)
TEST :boom:|[Reading Week 9](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/README.md)|[Homework Week 9](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/MAKEME.md)| +|6.|• Async VS Sync
• Polling
• Structure for a basic SPA
TEST :boom:|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6/MAKEME.md)|Review| +|7.|• Third Git Session (Git Workflow :muscle:)
• Map, reduce filter|[Reading Week 7](https://github.com/HackYourFuture/JavaScript/tree/master/Week7)|[Homework Week 7](https://github.com/HackYourFuture/JavaScript/tree/master/Week7/MAKEME.md)|Review| +|8.|• (re)writing data structures (in JSON)
• Closures
• Promises
|[Reading Week 8](https://github.com/HackYourFuture/JavaScript/tree/master/Week8/README.md)|[Homework Week 8](https://github.com/HackYourFuture/JavaScript/tree/master/Week8/MAKEME.md)|Review| +|9.| • Object Literals (and other patterns)
TEST :boom:|[Reading Week 9](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/README.md)|[Homework Week 9](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/MAKEME.md)|Review| __Kind note:__ From 8f02ef51012daf6789e79a21977eeb2b7bec046c Mon Sep 17 00:00:00 2001 From: mkruijt Date: Wed, 30 Aug 2017 17:15:02 +0200 Subject: [PATCH 006/355] reorganized reading material --- README.md | 2 +- Week0/README.md | 2 ++ Week1/MAKEME.md | 2 +- Week1/README.md | 9 ++++++--- Week1/REVIEW.md | 2 +- Week2/MAKEME.md | 3 +++ Week2/README.md | 3 +++ Week3/README.md | 4 +++- Week4/README.md | 3 ++- Week5/README.md | 2 +- Week5/REVIEW.MD | 14 ++++++++++++++ Week6/README.md | 8 +++++--- Week7/README.md | 9 ++++++--- Week8/README.md | 6 ------ 14 files changed, 48 insertions(+), 21 deletions(-) create mode 100644 Week5/REVIEW.MD diff --git a/README.md b/README.md index bd529da67..18fd908b9 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ Here you can find course content and homework for the JavaScript 1,2 and 3 modul |----|-----|----|--------|------| |0.|Preparation for your first JavaScript session|[Pre-reading](https://github.com/HackYourFuture/JavaScript/tree/master/Week0) + [CLI Reading Week 1](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md)|-| |1.|• [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :heart:
• Intro JavaScript (What is it, where can you use it for)
• Variables [var, let, const]
• Basic Data types [Strings, Numbers, Arrays]
• Operators|[Reading Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/README.md) | [Homework Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md)| -|2.|• Advanced data types [Objects]
• Conditions
• Statements vs Expressions
• Loops (for/while)
• Functions
• Naming conventions|[Reading Week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/README.md)|[Homework week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week2/REVIEW.md)| +|2.|• Advanced data types [Objects]
• Conditions
• Statements vs Expressions
• Loops (for/while)
• Functions
• Naming conventions|[Reading Week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/README.md)|[Homework Week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week2/REVIEW.md)| |3.|• [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :balloon:
• Closures
• Scope
• Array Manipulations
• Basic DOM manipulations [img src, innerHTML]
• Code commenting|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/MAKEME.md)|Review| |4.|• First Git Session with Unmesh :smiling_imp:
• JSON
• Code debugging using the browser
• Functions + JSON/Arrays
• Code flow (order of execution)
• (capturing user input)
• Structuring code files|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/Week4)|[JS](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/MAKEME.md) + [Git Homework Week 4](https://github.com/HackYourFuture/Git/blob/master/Lecture-1.md)|Review| |5.|• Second Git Session :see_no_evil:
• Events
• Callbacks
• XHTTP Requests
• API calls|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5)|[Homework Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5/MAKEME.md)|Review| diff --git a/Week0/README.md b/Week0/README.md index 33e674c5f..046590af1 100644 --- a/Week0/README.md +++ b/Week0/README.md @@ -17,4 +17,6 @@ In week one we will discuss the following topics: - Helpful resource: http://jsbooks.revolunet.com/ (here you can find tons of free JavaScript books online) +:star: You can also already go through the [review](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md) of the upcoming lecture. + _Please go through the material and come to class prepared!_ diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index c4c126138..447475939 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -83,5 +83,5 @@ On freeCodeCamp.com please do all [Basic JavaScript](https://www.freecodecamp.co > Hint, if you solve the FreeCodeCamp challenges and they are new concepts to you and you would like to take a look at them later on in the program, Copy your answers from FCC in a .js file and upload them to Github for future reference. In this way you build your own little documentation, if you look back at them first try to understand what it does before you run them. -Additional resources and review: [here](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/REVIEW.md) (work in progress) +:star: Additional resources and review: [here](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/REVIEW.md) (work in progress):star: diff --git a/Week1/README.md b/Week1/README.md index c57dcb108..ee520eca9 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -5,17 +5,20 @@ In week two we will discuss the following topics: • Loops (for/while) • Functions • Advanced data types [Objects] -• Conditions +• Conditions (if/else statements) • Statements vs Expressions • Naming conventions ``` ### Here are resources that we like you to read as a preparation for the coming lecture: +- 'Loops' of _A Smarter Way To Learn JavaScript_ : Chapters 18-20 - 'Functions' of _A Smarter Way To Learn JavaScript_ : Chapters 35 - 38 - Functions ~ http://eloquentjavascript.net/03_functions.html -- 'Objects' of _A Smarter Way To Learn JavaScript_ : Chapters 35 - 38 -- 'Conditions' of _A Smarter Way To Learn JavaScript_ : Chapters 35 - 38 +- 'Objects' of _A Smarter Way To Learn JavaScript_ : Chapters 69 - 75 +- 'Conditions' of _A Smarter Way To Learn JavaScript_ : Chapters 10 - 14 - Program structure ~ http://eloquentjavascript.net/02_program_structure.html +:star: You can also already go through the [review](https://github.com/HackYourFuture/JavaScript/blob/master/Week2/REVIEW.md) of the upcoming lecture. + _Please go through the material and come to class prepared!_ diff --git a/Week1/REVIEW.md b/Week1/REVIEW.md index 7dc2d683e..32b1d8151 100644 --- a/Week1/REVIEW.md +++ b/Week1/REVIEW.md @@ -36,7 +36,7 @@ tail -n : display last n lines of file man : Display manual of the COMMAND ``` -:star:Highly recommended:star: :take a look at the Command Line [repository](https://github.com/HackYourFuture/CommandLine) and especially review the preparations of the first lecture: https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md +:star: Highly recommended :star: :take a look at the Command Line [repository](https://github.com/HackYourFuture/CommandLine) and especially review the preparations of the first lecture: https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md ## Variables diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 61ad6e341..6258d883a 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -114,3 +114,6 @@ More insights from this [Stack Overflow question](http://stackoverflow.com/quest Have a look at [The Secret Life of JavaScript Primitives](https://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/) > ‘Coerce' means to try to change - so coercing `var x = '6'` to number means trying to change the type to number temporarily. + +:star: Additional resources and review: [here](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/REVIEW.md) (work in progress):star: + diff --git a/Week2/README.md b/Week2/README.md index e311a9701..c5fa78db6 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -12,6 +12,9 @@ In week three we will discuss the following topics: ### Here are resources that we like you to read as a preparation for the coming lecture. +- Closures: http://javascriptissexy.com/understand-javascript-closures-with-ease/ +- [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype) + Refresher: * Objects (*important to really understand them, read this if you are unsure! You may also read chapters 72, 73 and 74 if you have time and want to learn more*):
Chapters 70-71, 75 diff --git a/Week3/README.md b/Week3/README.md index 8d29f76b2..67c8aa714 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -24,9 +24,11 @@ Links to MDN (Mozilla Developer Network) topics: - [Function.prototype.apply()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) - [Function.prototype.bind()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) - [Arguments object](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/arguments) -- [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype) - [Strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode) +- If you want to find out more about (mouse) events, check out this resource: https://www.quirksmode.org/js/events_mouse.html + + _Please go through the material and come to class prepared!_ diff --git a/Week4/README.md b/Week4/README.md index c4f77c8c6..03d0273a3 100644 --- a/Week4/README.md +++ b/Week4/README.md @@ -14,10 +14,11 @@ In week five we will discuss the following topics: ### Here are resources that we like you to read as a preparation for the coming lecture. +- Read about APIS: https://www.programmableweb.com/api-university/what-are-apis-and-how-do-they-work - Code conventions: http://javascript.crockford.com/code.html - Objects continued: http://eloquentjavascript.net/06_object.html - XHTTP requests: https://www.kirupa.com/html5/making_http_requests_js.htm -- Closures: http://javascriptissexy.com/understand-javascript-closures-with-ease/ + ### Refresher: Read your book ('A Smarter Way To Learn JavaScript')! If you don't do it on yourself, here's the chapters to read next for next week: diff --git a/Week5/README.md b/Week5/README.md index c310d3cca..1cf4a245b 100644 --- a/Week5/README.md +++ b/Week5/README.md @@ -10,6 +10,7 @@ In week six we will discuss the following topics: ### Here are resources that we like you to read as a preparation for the coming lecture: +- Read about Asynchronous vs. Synchronous programming: http://www.hongkiat.com/blog/synchronous-asynchronous-javascript/ - [Learning JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#detailnamespacing) up to and including chapter 3 - [JavaScript Variable Scope and Hoisting Explained](http://javascriptissexy.com/javascript-variable-scope-and-hoisting-explained/) @@ -24,4 +25,3 @@ If you feel you need preparation for the test we recommend to do the following: _Please go through the material and come to class prepared!_ - diff --git a/Week5/REVIEW.MD b/Week5/REVIEW.MD new file mode 100644 index 000000000..2f6486c33 --- /dev/null +++ b/Week5/REVIEW.MD @@ -0,0 +1,14 @@ +# REVIEW week 5 + +``` +this review covers: +• Git Session +• Events +• Callbacks +• XHTTP Requests +• API calls +``` + +## Callbacks + +- JavaScript callback functions tutorial: https://www.youtube.com/watch?v=pTbSfCT42_M&index=17&list=WL \ No newline at end of file diff --git a/Week6/README.md b/Week6/README.md index 4ecc3a3ce..43833508e 100644 --- a/Week6/README.md +++ b/Week6/README.md @@ -8,9 +8,11 @@ In week seven we will discuss the following topics: ### Here are resources that we like you to read as a preparation for the coming lecture: -- Read about APIS: https://www.programmableweb.com/api-university/what-are-apis-and-how-do-they-work -- Read about Asynchronous vs. Synchronous programming: http://www.hongkiat.com/blog/synchronous-asynchronous-javascript/ -- If you want to find out more about (mouse) events, check out this resource: https://www.quirksmode.org/js/events_mouse.html +Some nice resources about map, filter, reduce +- :dizzy: [Fun fun functional](https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84) :dizzy: Check the first 3-4 videos. +- Wes Bos' awesome free tutorials. Just make a free account and do Array Cardio #1 [here](https://javascript30.com/) + +- Check out this video of Daan to see how we use Git Workflow to hand in Homework (from now on): https://www.youtube.com/watch?v=-o0yomUVVpU&index=2&list=PLVYDhqbgYpYUGxRdtQdYVE5Q8h3bt6SIA _Please go through the material and come to class prepared!_ diff --git a/Week7/README.md b/Week7/README.md index faba5d174..2641606ea 100644 --- a/Week7/README.md +++ b/Week7/README.md @@ -9,6 +9,9 @@ In week eight we will discuss the following topics: ### Here are resources that we like you to read as a preparation for the coming lecture: -Some nice resources about map, filter, reduce -- :dizzy: [Fun fun functional](https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84) :dizzy: Check the first 3-4 videos. -- Wes Bos' awesome free tutorials. Just make a free account and do Array Cardio #1 [here](https://javascript30.com/) +Some nice resources about promises :ring: +- [Googles post about Promises](https://developers.google.com/web/fundamentals/getting-started/primers/promises) +- [A nice article from David Walsh](https://davidwalsh.name/promises) +- [A real life example](https://github.com/mdn/js-examples/blob/master/promises-test/index.html) + +- [Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) diff --git a/Week8/README.md b/Week8/README.md index 7672ec957..da90c8683 100644 --- a/Week8/README.md +++ b/Week8/README.md @@ -9,12 +9,6 @@ In week nine we will discuss the following topics: ### Here are resources that we like you to read as a preparation for the coming lecture: -Some nice resources about promises :ring: -- [Googles post about Promises](https://developers.google.com/web/fundamentals/getting-started/primers/promises) -- [A nice article from David Walsh](https://davidwalsh.name/promises) -- [A real life example](https://github.com/mdn/js-examples/blob/master/promises-test/index.html) - -- [Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) ``` If you feel you need preparation for the test we recommend to do the following: From 8121282810097af9de19a51a60acbc22c32b99c9 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Wed, 30 Aug 2017 17:21:43 +0200 Subject: [PATCH 007/355] added reading material --- README.md | 2 +- Week7/README.md | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 18fd908b9..01c39b477 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ Here you can find course content and homework for the JavaScript 1,2 and 3 modul |6.|• Async VS Sync
• Polling
• Structure for a basic SPA
TEST :boom:|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6/MAKEME.md)|Review| |7.|• Third Git Session (Git Workflow :muscle:)
• Map, reduce filter|[Reading Week 7](https://github.com/HackYourFuture/JavaScript/tree/master/Week7)|[Homework Week 7](https://github.com/HackYourFuture/JavaScript/tree/master/Week7/MAKEME.md)|Review| |8.|• (re)writing data structures (in JSON)
• Closures
• Promises
|[Reading Week 8](https://github.com/HackYourFuture/JavaScript/tree/master/Week8/README.md)|[Homework Week 8](https://github.com/HackYourFuture/JavaScript/tree/master/Week8/MAKEME.md)|Review| -|9.| • Object Literals (and other patterns)
TEST :boom:|[Reading Week 9](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/README.md)|[Homework Week 9](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/MAKEME.md)|Review| +|9.| • Object Literals (and other patterns)
TEST :boom:|[Reading Week 9](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/README.md)|[Homework Week 9](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/REVIEW.md)| __Kind note:__ diff --git a/Week7/README.md b/Week7/README.md index 2641606ea..658aa6fd0 100644 --- a/Week7/README.md +++ b/Week7/README.md @@ -13,5 +13,9 @@ Some nice resources about promises :ring: - [Googles post about Promises](https://developers.google.com/web/fundamentals/getting-started/primers/promises) - [A nice article from David Walsh](https://davidwalsh.name/promises) - [A real life example](https://github.com/mdn/js-examples/blob/master/promises-test/index.html) +- [stackoverflow]http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript - [Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) +- [Why closures are helpful with async code](http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript) + +The last one about [promises](https://www.youtube.com/watch?v=WBupia9oidU)... \ No newline at end of file From 10788515b0118b537ac89b2caa6af359a4ccd6b5 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Sun, 3 Sep 2017 11:35:56 +0200 Subject: [PATCH 008/355] mistake review --- Week1/REVIEW.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week1/REVIEW.md b/Week1/REVIEW.md index 32b1d8151..421c8a8b9 100644 --- a/Week1/REVIEW.md +++ b/Week1/REVIEW.md @@ -173,7 +173,7 @@ How does this work in practice? 1 != 2 // -> true 5 === 5 // -> true 9 === '9' // -> false -3 !== 3 // -> true +3 !== 3 // -> false 3 !== '3' // -> true ``` From e4692fa57b428b78a2da05ea4a468d6df6dea72c Mon Sep 17 00:00:00 2001 From: mkruijt Date: Sun, 3 Sep 2017 15:10:47 +0200 Subject: [PATCH 009/355] homework update --- Week1/MAKEME.md | 8 +---- Week2/MAKEME.md | 43 +++++++++++++++++-------- Week2/REVIEW.md | 85 ++++++++++++++++++++++++++++++------------------- Week3/MAKEME.md | 3 ++ Week7/MAKEME.md | 10 ++++++ 5 files changed, 97 insertions(+), 52 deletions(-) diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 447475939..c59a259ee 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -73,13 +73,7 @@ For example: ### Step 3: **Some freeCodeCamp challenges (10 hours):** -On freeCodeCamp.com please 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: - -- https://www.freecodecamp.com/challenges/multiply-two-decimals-with-javascript -- https://www.freecodecamp.com/challenges/store-multiple-values-in-one-variable-using-javascript-arrays -- https://www.freecodecamp.com/challenges/build-javascript-objects -- https://www.freecodecamp.com/challenges/add-new-properties-to-a-javascript-object -- https://www.freecodecamp.com/challenges/delete-properties-from-a-javascript-object +On freeCodeCamp.com please do the [Basic JavaScript](https://www.freecodecamp.com/challenges/learn-how-free-code-camp-works) exercises up and until the __"Shopping List"__ exercise (there are some topics we did not cover but you can do it). > Hint, if you solve the FreeCodeCamp challenges and they are new concepts to you and you would like to take a look at them later on in the program, Copy your answers from FCC in a .js file and upload them to Github for future reference. In this way you build your own little documentation, if you look back at them first try to understand what it does before you run them. diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 6258d883a..08ae2b70e 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -1,6 +1,22 @@ ## Homework Week 2 -### Step 1: JavaScript +### Step 1: Recap/Read + +- Have a look at [The Secret Life of JavaScript Primitives](https://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/) +- Go through the review of [last week](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md) (Work in progress, update this week :wrench:) +- Go through the review of [this week](https://github.com/HackYourFuture/JavaScript/blob/master/Week2/REVIEW.md) (work in progress, update this week :nut_and_bolt:) + +### Step 2: Watch + +Please watch the following parts of the course, [Programming Foundations Fundamentals](https://www.lynda.com/Programming-Foundations-tutorials/Welcome/83603/90426-4.html) on Lynda.com (if you don't have access to Lynda yet ask Gijs): + 4. Writing Conditional Code + 5. Modular Code + 6. Iteration: Writing Loops + 7. More About Strings + 8. Collections + 11. When Things Go Wrong + +### Step 3: JavaScript > For all the following exercises create a new .js file. Try to find a proper name for each file or make a small comment about what it does inside for future reference 1. Create a function that takes 3 arguments and returns the sum of the three arguments. @@ -28,7 +44,7 @@ if (3 == 3) { 9. Change the function `vehicle` to use the list of question 5. So that `vehicle("green", 3, 1)` prints "a green new caravan". -10. Use the list of vehicles to write an advertisment. So that it prints something like: `"Amazing Joe's Garage, we service cars, motorbikes, caravans and bikes."`. (Hint: use a `for` loop.) +10. Use the list of vehicles to write an advertisement. So that it prints something like: `"Amazing Joe's Garage, we service cars, motorbikes, caravans and bikes."`. (Hint: use a `for` loop.) 11. 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? @@ -88,15 +104,8 @@ Check out this [Fiddle](http://jsfiddle.net/jimschubert/85M4z/). You need to ope More insights from this [Stack Overflow question](http://stackoverflow.com/questions/22395357/how-to-compare-two-arrays-are-equal-using-javascript). -### Step 2: **Some freeCodeCamp challenges:** - -1. [Comparisons with the Logical And Operator](https://www.freecodecamp.com/challenges/comparisons-with-the-logical-and-operator) - -2. [Record Collection](https://www.freecodecamp.com/challenges/record-collection) -3. [Iterate over Arrays with map](https://www.freecodecamp.com/challenges/iterate-over-arrays-with-map) - -4. We did the following example in class: +14. Take a look at the following code: ```js var o1 = { foo: 'bar' }; @@ -109,11 +118,19 @@ More insights from this [Stack Overflow question](http://stackoverflow.com/quest Does the order that you assign (`o3 = o2` or `o2 = o3`) matter? {Jim Cramer: ???} -### Some further reading: - -Have a look at [The Secret Life of JavaScript Primitives](https://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/) > ‘Coerce' means to try to change - so coercing `var x = '6'` to number means trying to change the type to number temporarily. +### Step 4: **Finish basic freeCodeCamp challenges:** + +Go back to FreeCodeCamp, start where you left of and finish the rest of the Basic JavaScript challenges. + +Please make sure you REALLY understand the exercises below: +- https://www.freecodecamp.com/challenges/multiply-two-decimals-with-javascript +- https://www.freecodecamp.com/challenges/store-multiple-values-in-one-variable-using-javascript-arrays +- https://www.freecodecamp.com/challenges/build-javascript-objects +- https://www.freecodecamp.com/challenges/add-new-properties-to-a-javascript-object +- https://www.freecodecamp.com/challenges/delete-properties-from-a-javascript-object + :star: Additional resources and review: [here](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/REVIEW.md) (work in progress):star: diff --git a/Week2/REVIEW.md b/Week2/REVIEW.md index 819e6f8a5..101807c5b 100644 --- a/Week2/REVIEW.md +++ b/Week2/REVIEW.md @@ -10,6 +10,59 @@ This review covers: • Naming conventions ``` +### Recap Logical operators: + +```js +0 = false +1 = true +``` + +#### AND `&&` + +|`&&`|0|1| +|----|-|-| +|0|0|0| +|1|0|1| + +#### OR `||` + +|`||`|0|1| +|----|-|-| +|0|0|1| +|1|1|1| + +## Objects + +Variables that are objects also contain a list of things, but instead of them being in some specific order, they can be assigned to words, called "keys". Instead of "elements" the things that are inside objects are called "properties". + + +```js +let obj = {name: 'John', age: 24}; +``` + +This object has two properties: `name` and `age`. The "value" of the property `name` is the string `'John'`. The "value" of the property `age` is the number `24`. + +When accessing object properties, you can use the dot-notation: `obj.name` or the bracket-notation: `obj["name"]`. Note that the latter looks a lot like the way to access array elements. However, here what's inside the bracket (called "key" for objects, instead of "index") must be a string. + +```js +console.log(obj.name); // -> 'John' +console.log(obj['name']); // -> 'John' +``` + +Just like with arrays, you can also use a variable to access properties, as long as these variables are strings. In this case you cannot use the dot-notation! + +```js +var ageKey = 'age'; +console.log(obj[ageKey]); // -> 24 +``` + +Remember that there is a very big difference between `obj[name]` and `obj["name"]`. + +> Note: +> +> Thinking back of arrays, the length of an array can be retrieved by `arr.length`. So as mentioned before, arrays are just like other JavaScript objects. You could even write `arr['length']` to access the `length` property of the array. JavaScript will look: is what we put between brackets a number? Then it is an index and we'll look up the correct array element. If it's a string, it's a key and we will look up the corresponding property. + + ## Functions A function is a reusable piece of code. Functions are *very* important in JavaScript, to the extent that some people call JavaScript a "function-oriented" language. As mentioned above, variables can be of type function. In fact, *every function is a variable*. @@ -89,38 +142,6 @@ myNumber.toString(); ``` -## Objects - -Variables that are objects also contain a list of things, but instead of them being in some specific order, they can be assigned to words, called "keys". Instead of "elements" the things that are inside objects are called "properties". - - -```js -var obj = {name: 'John', age: 24}; -``` - -This object has two properties: `name` and `age`. The "value" of the property `name` is the string `'John'`. The "value" of the property `age` is the number `24`. - -When accessing object properties, you can use the dot-notation: `obj.name` or the bracket-notation: `obj["name"]`. Note that the latter looks a lot like the way to access array elements. However, here what's inside the bracket (called "key" for objects, instead of "index") must be a string. - -```js -console.log(obj.name); // -> 'John' -console.log(obj['name']); // -> 'John' -``` - -Just like with arrays, you can also use a variable to access properties, as long as these variables are strings. In this case you cannot use the dot-notation! - -```js -var ageKey = 'age'; -console.log(obj[ageKey]); // -> 24 -``` - -Remember that there is a very big difference between `obj[name]` and `obj["name"]`. - -> Note: -> -> Thinking back of arrays, the length of an array can be retrieved by `arr.length`. So as mentioned before, arrays are just like other JavaScript objects. You could even write `arr['length']` to access the `length` property of the array. JavaScript will look: is what we put between brackets a number? Then it is an index and we'll look up the correct array element. If it's a string, it's a key and we will look up the corresponding property. - - ## Statements & expressions Most programming languages that you'll encounter in real life are called "imperative" programming languages. JavaScript is such an imperative programming language. Imperative is another word for command-like. That is, you give the computer a bunch of commands after each other. First do this, then do that, etc. diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index 6436582ba..8b5c86136 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -15,6 +15,9 @@ https://developer.mozilla.org/en/docs/Web/JavaScript/Closures And just for fun ... https://www.freecodecamp.com/challenges/sum-all-numbers-in-a-range + + + ## And a custom DOM manipulation challenge :mortar_board: 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`). diff --git a/Week7/MAKEME.md b/Week7/MAKEME.md index 4c83998cc..bea33c710 100644 --- a/Week7/MAKEME.md +++ b/Week7/MAKEME.md @@ -11,6 +11,16 @@ - Add polling to your app so that it checks every minute or so if a new repo has been made and if it has, adds it to the DOM without reloading the page. - Add a readme to your repo explaining what your app does and how to use your app. Here's a [template](https://gist.github.com/jxson/1784669) and here you can see how to make [your readme awesome](https://gist.github.com/rrgayhart/91bba7bb39ea60136e5c). +### Step 2: **Some freeCodeCamp challenges:** + +1. [Comparisons with the Logical And Operator](https://www.freecodecamp.com/challenges/comparisons-with-the-logical-and-operator) + +2. [Record Collection](https://www.freecodecamp.com/challenges/record-collection) + +3. [Iterate over Arrays with map](https://www.freecodecamp.com/challenges/iterate-over-arrays-with-map) + + + ## What we did in lecture 1: Code Kata Race From 16bb68389b0c2a7ac288258cf82d2ab601d33e52 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Sun, 3 Sep 2017 15:12:25 +0200 Subject: [PATCH 010/355] homework update --- Week2/MAKEME.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 08ae2b70e..36d9ccaf7 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -9,12 +9,12 @@ ### Step 2: Watch Please watch the following parts of the course, [Programming Foundations Fundamentals](https://www.lynda.com/Programming-Foundations-tutorials/Welcome/83603/90426-4.html) on Lynda.com (if you don't have access to Lynda yet ask Gijs): - 4. Writing Conditional Code - 5. Modular Code - 6. Iteration: Writing Loops - 7. More About Strings - 8. Collections - 11. When Things Go Wrong +
4. Writing Conditional Code +
5. Modular Code +
6. Iteration: Writing Loops +
7. More About Strings +
8. Collections +
11. When Things Go Wrong ### Step 3: JavaScript > For all the following exercises create a new .js file. Try to find a proper name for each file or make a small comment about what it does inside for future reference From 3f332718257d5b399a9266423bfbaf4f65893919 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Sun, 3 Sep 2017 15:13:57 +0200 Subject: [PATCH 011/355] homework update --- Week2/MAKEME.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 36d9ccaf7..06c8e1051 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -8,13 +8,13 @@ ### Step 2: Watch -Please watch the following parts of the course, [Programming Foundations Fundamentals](https://www.lynda.com/Programming-Foundations-tutorials/Welcome/83603/90426-4.html) on Lynda.com (if you don't have access to Lynda yet ask Gijs): -
4. Writing Conditional Code -
5. Modular Code -
6. Iteration: Writing Loops -
7. More About Strings -
8. Collections -
11. When Things Go Wrong +1. Please watch the following parts of the course, [Programming Foundations Fundamentals](https://www.lynda.com/Programming-Foundations-tutorials/Welcome/83603/90426-4.html) on Lynda.com (if you don't have access to Lynda yet ask Gijs): + 4. Writing Conditional Code + 5. Modular Code + 6. Iteration: Writing Loops + 7. More About Strings + 8. Collections + 11. When Things Go Wrong ### Step 3: JavaScript > For all the following exercises create a new .js file. Try to find a proper name for each file or make a small comment about what it does inside for future reference From f6b19d0f886e21d7409fa42aa27e67c95cb86fc8 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Sun, 3 Sep 2017 15:14:56 +0200 Subject: [PATCH 012/355] homework update --- Week2/MAKEME.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 06c8e1051..18fe44c16 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -9,12 +9,12 @@ ### Step 2: Watch 1. Please watch the following parts of the course, [Programming Foundations Fundamentals](https://www.lynda.com/Programming-Foundations-tutorials/Welcome/83603/90426-4.html) on Lynda.com (if you don't have access to Lynda yet ask Gijs): - 4. Writing Conditional Code - 5. Modular Code - 6. Iteration: Writing Loops - 7. More About Strings - 8. Collections - 11. When Things Go Wrong + 4. Writing Conditional Code + 5. Modular Code + 6. Iteration: Writing Loops + 7. More About Strings + 8. Collections + 11. When Things Go Wrong ### Step 3: JavaScript > For all the following exercises create a new .js file. Try to find a proper name for each file or make a small comment about what it does inside for future reference From 9224930ee094dcf776b22dd1e3d30296348c4c64 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Sun, 3 Sep 2017 15:16:11 +0200 Subject: [PATCH 013/355] homework update --- Week2/MAKEME.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 18fe44c16..6b92c3e74 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -8,7 +8,8 @@ ### Step 2: Watch -1. Please watch the following parts of the course, [Programming Foundations Fundamentals](https://www.lynda.com/Programming-Foundations-tutorials/Welcome/83603/90426-4.html) on Lynda.com (if you don't have access to Lynda yet ask Gijs): +1. If you haven't done already, watch: [What is programming](https://www.khanacademy.org/computing/computer-programming/programming/intro-to-programming/v/programming-intro) Just watch the 2 min video, you do not have to do the entire JavaScript course (It could be useful later on though). +2. Please watch the following parts of the course, [Programming Foundations Fundamentals](https://www.lynda.com/Programming-Foundations-tutorials/Welcome/83603/90426-4.html) on Lynda.com (if you don't have access to Lynda yet ask Gijs): 4. Writing Conditional Code 5. Modular Code 6. Iteration: Writing Loops From 34c3461b4888e8b75b6223994d6af8df65992e7b Mon Sep 17 00:00:00 2001 From: mkruijt Date: Sun, 3 Sep 2017 15:16:54 +0200 Subject: [PATCH 014/355] homework update --- Week2/MAKEME.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 6b92c3e74..93da5a9cd 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -10,12 +10,12 @@ 1. If you haven't done already, watch: [What is programming](https://www.khanacademy.org/computing/computer-programming/programming/intro-to-programming/v/programming-intro) Just watch the 2 min video, you do not have to do the entire JavaScript course (It could be useful later on though). 2. Please watch the following parts of the course, [Programming Foundations Fundamentals](https://www.lynda.com/Programming-Foundations-tutorials/Welcome/83603/90426-4.html) on Lynda.com (if you don't have access to Lynda yet ask Gijs): - 4. Writing Conditional Code - 5. Modular Code - 6. Iteration: Writing Loops - 7. More About Strings - 8. Collections - 11. When Things Go Wrong +
4. Writing Conditional Code +
5. Modular Code +
6. Iteration: Writing Loops +
7. More About Strings +
8. Collections +
11. When Things Go Wrong ### Step 3: JavaScript > For all the following exercises create a new .js file. Try to find a proper name for each file or make a small comment about what it does inside for future reference From e4803e20bc640c9d79ea36855289572e605d9468 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Mon, 4 Sep 2017 18:28:12 +0200 Subject: [PATCH 015/355] review update --- Week1/REVIEW.md | 48 +++++++++++++++++++++++++++++++++++++++++++----- Week2/MAKEME.md | 18 ++++++++++++++---- Week2/README.md | 2 ++ Week2/REVIEW.md | 23 +++++++++++++++++++++++ Week3/MAKEME.md | 32 +++++++++++++++----------------- 5 files changed, 97 insertions(+), 26 deletions(-) diff --git a/Week1/REVIEW.md b/Week1/REVIEW.md index 421c8a8b9..e1f089257 100644 --- a/Week1/REVIEW.md +++ b/Week1/REVIEW.md @@ -95,14 +95,14 @@ To get the type of a variable, use the following code: ```js let x = 5; -let typeOfX = typeof x; // -> "number" +let typeOfX = typeof x; // -> 'number' ``` Note that I've put an asterisk behind 'array'. That is because in JavaScript, array is a special kind of object: ```js let arr = [1, 2, 3]; -let typeOfArr = typeof arr; // -> "object" +let typeOfArr = typeof arr; // -> 'object' ``` However, in our communication, we will call these variables arrays. @@ -115,16 +115,54 @@ Whenever you declare a variable, but you don't set a value, the variable will be ```js let x; -console.log(typeof x); // -> "undefined" +console.log(typeof x); // -> 'undefined' ``` + +### Typeof + +You can use `typeof` to get the type of a certain variable as you have seen in the above section 'Variable types'. As you can see in the following examples it returns the type of data that you have stored in your variable. + ## Strings ->TODO +In JavaScript you can store a series of characters inside a variable, you then call this a string. You can store all sorts of characters (text/numbers, spaces or phrases) in strings. By using the `''` you define that something is a string. You can also use `""` to create a string. Both are fine as long as you are consistent (just make a choice on which one you prefer and stick to it). + +```js +let foo = '42'; +typeof foo //-> 'string' + +let bar = 'I\'m 99 years old '; +typeof bar //-> 'string' +``` + +### String indexes and string properties +The index of a string always starts at 0. +Strings also have properties, for example `.length` you can use this to find the length of a string. + +So for example: +```js +let baz = 'Hello World'; +baz[0]; //-> "H" +baz.length; //-> 11 +``` + +### String methods + +>Todo ## Numbers ->TODO +All numbers in JavaScript are considered numbers with or without decimal + +```js +let quux = 42; +typeof quux //-> 'number' + +let quuux = 3.3333; +typeof quuux //-> 'number' + +``` + ## Arrays diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 93da5a9cd..ad8794762 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -1,5 +1,7 @@ ## Homework Week 2 +>[Here](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/README.md) you find the readings you have to complete before the third lecture. + ### Step 1: Recap/Read - Have a look at [The Secret Life of JavaScript Primitives](https://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/) @@ -49,7 +51,9 @@ if (3 == 3) { 11. 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? -12. 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: +12. Create an empty object + +13. 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: ```js var obj1 = { @@ -73,7 +77,7 @@ if (3 == 3) { Note: give this exercise your best shot but don’t spend more than, say, one hour on it. -13. 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. +14. 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. ```js function foo(func) { @@ -88,7 +92,7 @@ if (3 == 3) { ``` -14. Write some code to test two arrays for equality using `==` and `===`. Test the following: +15. Write some code to test two arrays for equality using `==` and `===`. Test the following: ```js var x = [1,2,3]; @@ -106,7 +110,7 @@ Check out this [Fiddle](http://jsfiddle.net/jimschubert/85M4z/). You need to ope More insights from this [Stack Overflow question](http://stackoverflow.com/questions/22395357/how-to-compare-two-arrays-are-equal-using-javascript). -14. Take a look at the following code: +16. Take a look at the following code: ```js var o1 = { foo: 'bar' }; @@ -119,6 +123,12 @@ More insights from this [Stack Overflow question](http://stackoverflow.com/quest Does the order that you assign (`o3 = o2` or `o2 = o3`) matter? {Jim Cramer: ???} +17. What does the following code return? (And why?) +```js +let bar = 42; +typeof typeof bar; +``` + > ‘Coerce' means to try to change - so coercing `var x = '6'` to number means trying to change the type to number temporarily. diff --git a/Week2/README.md b/Week2/README.md index c5fa78db6..ed33a643d 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -13,8 +13,10 @@ In week three we will discuss the following topics: ### Here are resources that we like you to read as a preparation for the coming lecture. - Closures: http://javascriptissexy.com/understand-javascript-closures-with-ease/ +- https://developer.mozilla.org/en/docs/Web/JavaScript/Closures - [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype) + Refresher: * Objects (*important to really understand them, read this if you are unsure! You may also read chapters 72, 73 and 74 if you have time and want to learn more*):
Chapters 70-71, 75 diff --git a/Week2/REVIEW.md b/Week2/REVIEW.md index 101807c5b..fcc7473c2 100644 --- a/Week2/REVIEW.md +++ b/Week2/REVIEW.md @@ -2,6 +2,8 @@ ``` This review covers: +• Recap Logical operators +• Typeof • Loops (for/while) • Functions • Advanced data types [Objects] @@ -31,6 +33,27 @@ This review covers: |0|0|1| |1|1|1| +So you can say that false in combination with `&&` always returns true +```js +true && false //-> false +false && true //-> false +false || true //-> true +true || false //-> true +``` + +### Typeof + +`typeof` always returns the data type in a string. + +So for example: +```js +let bar = 42; +typeof bar //-> 'number' +typeof typeof bar; //-> 'string' +``` + +So the data type of what `typeof` returns is always a string, bar on the other hand is still a number. + ## Objects Variables that are objects also contain a list of things, but instead of them being in some specific order, they can be assigned to words, called "keys". Instead of "elements" the things that are inside objects are called "properties". diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index 8b5c86136..ee634ac3d 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -1,24 +1,12 @@ -# Homework Week 3 - -## Read: -- https://github.com/HackYourFuture/JavaScript/blob/master/Week3/README.md - -## Challenges: -- https://www.freecodecamp.com/challenges/declare-javascript-objects-as-variables -- https://www.freecodecamp.com/challenges/make-instances-of-objects-with-a-constructor-function -- https://www.freecodecamp.com/challenges/make-unique-objects-by-passing-parameters-to-our-constructor -- https://www.freecodecamp.com/challenges/make-object-properties-private - -Loops practice - https://www.freecodecamp.com/challenges/iterate-with-javascript-for-loops -https://www.freecodecamp.com/challenges/iterate-with-javascript-while-loops -https://developer.mozilla.org/en/docs/Web/JavaScript/Closures - -And just for fun ... https://www.freecodecamp.com/challenges/sum-all-numbers-in-a-range +## Homework Week 3 +>[Here](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/README.md) you find the readings you have to complete before the fourth lecture. +### Step 1: Recap/Read +### Step 2: Watch -## And a custom DOM manipulation challenge :mortar_board: +### Step 3: Custom DOM manipulation challenge :mortar_board: 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`). @@ -33,3 +21,13 @@ And just for fun ... https://www.freecodecamp.com/challenges/sum-all-numbers-in- 6. Beautify your html page with css, add sources and alts to each of the images. 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_) + +### Step 4: **FreeCodeCamp challenges:** + +- https://www.freecodecamp.com/challenges/declare-javascript-objects-as-variables +- https://www.freecodecamp.com/challenges/make-instances-of-objects-with-a-constructor-function +- https://www.freecodecamp.com/challenges/make-unique-objects-by-passing-parameters-to-our-constructor +- https://www.freecodecamp.com/challenges/make-object-properties-private + + +And just for fun ... https://www.freecodecamp.com/challenges/sum-all-numbers-in-a-range \ No newline at end of file From 90ebda4ac00f27e76d4844026ff3c60a1a186474 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Mon, 4 Sep 2017 18:47:52 +0200 Subject: [PATCH 016/355] shema fix --- Week2/REVIEW.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Week2/REVIEW.md b/Week2/REVIEW.md index fcc7473c2..0f85c52aa 100644 --- a/Week2/REVIEW.md +++ b/Week2/REVIEW.md @@ -21,15 +21,15 @@ This review covers: #### AND `&&` -|`&&`|0|1| -|----|-|-| +| `&&` |0|1| +|------|-|-| |0|0|0| |1|0|1| #### OR `||` -|`||`|0|1| -|----|-|-| +| `||` |0|1| +|------|-|-| |0|0|1| |1|1|1| From 40b321636dff4fad7f65a58d74d21aea6ed94b0c Mon Sep 17 00:00:00 2001 From: mkruijt Date: Mon, 4 Sep 2017 22:44:54 +0200 Subject: [PATCH 017/355] homework fix --- Week2/MAKEME.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index ad8794762..097f46139 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -45,11 +45,11 @@ if (3 == 3) { 8. How do you get the third element from that list? -9. Change the function `vehicle` to use the list of question 5. So that `vehicle("green", 3, 1)` prints "a green new caravan". +9. Change the function `vehicle` to use the list of question 4. So that `vehicle("green", 3, 1)` prints "a green new caravan". 10. Use the list of vehicles to write an advertisement. So that it prints something like: `"Amazing Joe's Garage, we service cars, motorbikes, caravans and bikes."`. (Hint: use a `for` loop.) -11. 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? +11. What if you add one more vehicle to the list, can you have that added to the advertisement without changing the code for question 7? 12. Create an empty object From 89863c6ca97313d0b5846afd87fe7aa986e1e4d6 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Sun, 10 Sep 2017 15:58:49 +0200 Subject: [PATCH 018/355] homework update --- README.md | 6 +++--- Week1/REVIEW.md | 4 +++- Week3/MAKEME.md | 19 +++++++++++++++---- Week3/REVIEW.md | 3 ++- Week4/REVIEW.md | 11 +++++++++++ 5 files changed, 34 insertions(+), 9 deletions(-) create mode 100644 Week4/REVIEW.md diff --git a/README.md b/README.md index 01c39b477..edd2c42f0 100644 --- a/README.md +++ b/README.md @@ -12,9 +12,9 @@ Here you can find course content and homework for the JavaScript 1,2 and 3 modul |1.|• [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :heart:
• Intro JavaScript (What is it, where can you use it for)
• Variables [var, let, const]
• Basic Data types [Strings, Numbers, Arrays]
• Operators|[Reading Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/README.md) | [Homework Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md)| |2.|• Advanced data types [Objects]
• Conditions
• Statements vs Expressions
• Loops (for/while)
• Functions
• Naming conventions|[Reading Week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/README.md)|[Homework Week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week2/REVIEW.md)| |3.|• [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :balloon:
• Closures
• Scope
• Array Manipulations
• Basic DOM manipulations [img src, innerHTML]
• Code commenting|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/MAKEME.md)|Review| -|4.|• First Git Session with Unmesh :smiling_imp:
• JSON
• Code debugging using the browser
• Functions + JSON/Arrays
• Code flow (order of execution)
• (capturing user input)
• Structuring code files|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/Week4)|[JS](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/MAKEME.md) + [Git Homework Week 4](https://github.com/HackYourFuture/Git/blob/master/Lecture-1.md)|Review| -|5.|• Second Git Session :see_no_evil:
• Events
• Callbacks
• XHTTP Requests
• API calls|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5)|[Homework Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5/MAKEME.md)|Review| -|6.|• Async VS Sync
• Polling
• Structure for a basic SPA
TEST :boom:|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6/MAKEME.md)|Review| +|4.|• JSON
• Code debugging using the browser
• Functions + JSON/Arrays
• Code flow (order of execution)
• (capturing user input)
• Structuring code files|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/Week4)|[JS](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/MAKEME.md) + [Git Homework Week 4](https://github.com/HackYourFuture/Git/blob/master/Lecture-1.md)|Review| +|5.|• First Git Session with Unmesh :smiling_imp:
• Events
• Callbacks
• XHTTP Requests
• API calls|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5)|[Homework Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5/MAKEME.md)|Review| +|6.|• Second Git Session :see_no_evil:
• Async VS Sync
• Polling
• Structure for a basic SPA
TEST :boom:|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6/MAKEME.md)|Review| |7.|• Third Git Session (Git Workflow :muscle:)
• Map, reduce filter|[Reading Week 7](https://github.com/HackYourFuture/JavaScript/tree/master/Week7)|[Homework Week 7](https://github.com/HackYourFuture/JavaScript/tree/master/Week7/MAKEME.md)|Review| |8.|• (re)writing data structures (in JSON)
• Closures
• Promises
|[Reading Week 8](https://github.com/HackYourFuture/JavaScript/tree/master/Week8/README.md)|[Homework Week 8](https://github.com/HackYourFuture/JavaScript/tree/master/Week8/MAKEME.md)|Review| |9.| • Object Literals (and other patterns)
TEST :boom:|[Reading Week 9](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/README.md)|[Homework Week 9](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/REVIEW.md)| diff --git a/Week1/REVIEW.md b/Week1/REVIEW.md index e1f089257..b97e46057 100644 --- a/Week1/REVIEW.md +++ b/Week1/REVIEW.md @@ -67,13 +67,15 @@ Here, we say: "declare variable x and initialize it with the integer (number) 5" ```js let foo; // declare variable `foo` +``` + +```js let foo = 6; // declare and assign a variable at the same time ``` You can also assign a value to an existing variable: ```js foo = 4; // change variable `foo` - ``` diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index ee634ac3d..a4b132741 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -2,9 +2,16 @@ >[Here](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/README.md) you find the readings you have to complete before the fourth lecture. -### Step 1: Recap/Read +### Step 1: Implement feedback -### Step 2: Watch +Your fellow students have provided you with feedback in Trello. Your teachers have provided you with feedback in issues in Github. + +- Implement both feedback from Trello and Github. +- Check on one of your fellow students code and issues and see if her or she implemented their feedback correctly. If there are some things that can be improved make an issue suggesting further improvements. If you think that the feedback has been implemented correctly create a issue saying something like: "nice work you can clear your issues". + +### Step 2: Reorganize your Github + +Your Github should contain two repositories called JavaScript1 and CommandLine . Inside the JavaScript repository you should have three folders, called week1, week2, and week3 (or something similar). Inside these folders you should have the different assignments (a file per exercises). Ty and find proper names for the exercises that reflect somehow what is going on in the code. Avoid using spaces in your file names, this makes it harder to "run" you files. Also make sure that all your JavaScript files have a .js extension. ### Step 3: Custom DOM manipulation challenge :mortar_board: @@ -20,7 +27,7 @@ 6. Beautify your html page with css, add sources and alts to each of the images. -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_) +7. 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_) ### Step 4: **FreeCodeCamp challenges:** @@ -30,4 +37,8 @@ - https://www.freecodecamp.com/challenges/make-object-properties-private -And just for fun ... https://www.freecodecamp.com/challenges/sum-all-numbers-in-a-range \ No newline at end of file +And just for fun ... https://www.freecodecamp.com/challenges/sum-all-numbers-in-a-range + +__Optional (expert)__ + + diff --git a/Week3/REVIEW.md b/Week3/REVIEW.md index 009d2546e..502c8dce8 100644 --- a/Week3/REVIEW.md +++ b/Week3/REVIEW.md @@ -3,10 +3,11 @@ ``` This review covers: • More CLI -• Closures +• Closures • Scope • Array Manipulations • Basic DOM manipulations [img src, innerHTML] • Code commenting ``` +Check out the CLI review here: https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-2.md \ No newline at end of file diff --git a/Week4/REVIEW.md b/Week4/REVIEW.md new file mode 100644 index 000000000..b5aaffe29 --- /dev/null +++ b/Week4/REVIEW.md @@ -0,0 +1,11 @@ +# REVIEW JavaScript week 4 + +``` +This review covers: +• JSON +• Code debugging using the browser +• Functions + JSON/Arrays +• Code flow (order of execution) +• (capturing user input) +• Structuring code files +``` From bd00ea64aa0d8148e767943a7b9c558f2348c71a Mon Sep 17 00:00:00 2001 From: mkruijt Date: Mon, 11 Sep 2017 11:45:47 +0200 Subject: [PATCH 019/355] homework update --- .../resources}/ASmarterWaytoLearnJavaScript.pdf | Bin Week2/{ => code_examples}/conditional_example_1.js | 0 Week2/{ => code_examples}/conditional_example_2.js | 0 Week2/{ => code_examples}/debug_example.js | 0 Week2/{ => code_examples}/initialization_example.js | 0 Week3/MAKEME.md | 1 + Week4/{ => code_examples}/Closures (class 10).md | 0 Week4/{ => code_examples}/closure1.js | 0 Week4/{ => code_examples}/closure2.js | 0 Week4/{ => code_examples}/equal.js | 0 Week4/{ => code_examples}/object.js | 0 11 files changed, 1 insertion(+) rename {Week4 => Week1/resources}/ASmarterWaytoLearnJavaScript.pdf (100%) rename Week2/{ => code_examples}/conditional_example_1.js (100%) rename Week2/{ => code_examples}/conditional_example_2.js (100%) rename Week2/{ => code_examples}/debug_example.js (100%) rename Week2/{ => code_examples}/initialization_example.js (100%) rename Week4/{ => code_examples}/Closures (class 10).md (100%) rename Week4/{ => code_examples}/closure1.js (100%) rename Week4/{ => code_examples}/closure2.js (100%) rename Week4/{ => code_examples}/equal.js (100%) rename Week4/{ => code_examples}/object.js (100%) diff --git a/Week4/ASmarterWaytoLearnJavaScript.pdf b/Week1/resources/ASmarterWaytoLearnJavaScript.pdf similarity index 100% rename from Week4/ASmarterWaytoLearnJavaScript.pdf rename to Week1/resources/ASmarterWaytoLearnJavaScript.pdf diff --git a/Week2/conditional_example_1.js b/Week2/code_examples/conditional_example_1.js similarity index 100% rename from Week2/conditional_example_1.js rename to Week2/code_examples/conditional_example_1.js diff --git a/Week2/conditional_example_2.js b/Week2/code_examples/conditional_example_2.js similarity index 100% rename from Week2/conditional_example_2.js rename to Week2/code_examples/conditional_example_2.js diff --git a/Week2/debug_example.js b/Week2/code_examples/debug_example.js similarity index 100% rename from Week2/debug_example.js rename to Week2/code_examples/debug_example.js diff --git a/Week2/initialization_example.js b/Week2/code_examples/initialization_example.js similarity index 100% rename from Week2/initialization_example.js rename to Week2/code_examples/initialization_example.js diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index a4b132741..c677c6ff6 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -42,3 +42,4 @@ And just for fun ... https://www.freecodecamp.com/challenges/sum-all-numbers-in- __Optional (expert)__ + diff --git a/Week4/Closures (class 10).md b/Week4/code_examples/Closures (class 10).md similarity index 100% rename from Week4/Closures (class 10).md rename to Week4/code_examples/Closures (class 10).md diff --git a/Week4/closure1.js b/Week4/code_examples/closure1.js similarity index 100% rename from Week4/closure1.js rename to Week4/code_examples/closure1.js diff --git a/Week4/closure2.js b/Week4/code_examples/closure2.js similarity index 100% rename from Week4/closure2.js rename to Week4/code_examples/closure2.js diff --git a/Week4/equal.js b/Week4/code_examples/equal.js similarity index 100% rename from Week4/equal.js rename to Week4/code_examples/equal.js diff --git a/Week4/object.js b/Week4/code_examples/object.js similarity index 100% rename from Week4/object.js rename to Week4/code_examples/object.js From 5c8e4361ebf61a21853a303628db099d8ff6ca2e Mon Sep 17 00:00:00 2001 From: mkruijt Date: Mon, 11 Sep 2017 11:54:07 +0200 Subject: [PATCH 020/355] added bonus challenges --- Week3/MAKEME.md | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index c677c6ff6..2de989658 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -2,6 +2,12 @@ >[Here](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/README.md) you find the readings you have to complete before the fourth lecture. +### Step 0 review: +- Go through the review of [the first week](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md) (Work in progress, update this week :wrench:) +- Go through the review of [the second week](https://github.com/HackYourFuture/JavaScript/blob/master/Week2/REVIEW.md) (work in progress, update this week :nut_and_bolt:) +- Daan will update the review of this week soon, keep an eye on that! + + ### Step 1: Implement feedback Your fellow students have provided you with feedback in Trello. Your teachers have provided you with feedback in issues in Github. @@ -39,7 +45,21 @@ Your Github should contain two repositories called JavaScript1 and CommandLine . And just for fun ... https://www.freecodecamp.com/challenges/sum-all-numbers-in-a-range -__Optional (expert)__ +### :boom: Bonus homework :boom: +the Bonus homework for this week (for those of you want an extra challenge) do the following: + +- Sign up on codewars.com +- In you account setting under “clan” write “Hack Your Future” +- Go do the challenges in the following playlist: https://www.codewars.com/collections/fun-fun-fundamentals + +Codewars is really a lot of fun, and you can compete against each other who has the most points :trollface: +it’s a great way to really practice JavaScript a lot in various problems. + +Please note, there are various challenges all sorted on difficultly called KIU. Kiu 8 is the easiest, Kiu 1 is the hardest, we expect you to do challenges around level 8, 7 maybe. + +enjoy! + +:star: Additional resources and review: [here](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/REVIEW.md) (work in progress):star: From 34dd848ac75b2191c31cf07c157cf1e0fc0f11f3 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Mon, 11 Sep 2017 12:12:10 +0200 Subject: [PATCH 021/355] added review format week 7 --- Week7/REVIEW.md | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 Week7/REVIEW.md diff --git a/Week7/REVIEW.md b/Week7/REVIEW.md new file mode 100644 index 000000000..5dac5c731 --- /dev/null +++ b/Week7/REVIEW.md @@ -0,0 +1,9 @@ +# REVIEW JavaScript week 7 + +``` +This review covers: + • Git Workflow + • Map, + • Reduce + • Filter +``` \ No newline at end of file From 4177b08f5716ca5e610055def5f51da73e6dbaf4 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Tue, 12 Sep 2017 16:52:08 +0200 Subject: [PATCH 022/355] added instructions for git homework hand in --- Week1/MAKEME.md | 24 +++++++++++++++--------- Week2/MAKEME.md | 13 +++++++++---- Week3/MAKEME.md | 17 +++++++++++------ Week4/MAKEME.md | 14 +++++++++----- Week5/MAKEME.md | 8 ++++++++ Week6/MAKEME.md | 9 ++++++++- Week7/MAKEME.md | 7 ++++++- Week8/MAKEME.md | 6 +++++- Week9/MAKEME.md | 6 ++++++ 9 files changed, 77 insertions(+), 27 deletions(-) diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index c59a259ee..700fa7ea7 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -2,14 +2,6 @@ >[Here](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/README.md) you find the readings you have to complete before the second lecture. -## How to hand in Homework: ->steps: -- Create a github account -- Create a new repository (name it something like hyf-js) make sure you select the option: initialize with readme -- Upload the file you created on your computer, write a description for this “commit” -- Open the file in your readme to check if this all worked -- Post the link here if it worked - We covered a bit of command line usage in the first class and got a program running which is great. If you need a refresher for the command line please have a look here: https://github.com/HackYourFuture/CommandLine ## Before you start with the homework: @@ -75,7 +67,21 @@ For example: On freeCodeCamp.com please do the [Basic JavaScript](https://www.freecodecamp.com/challenges/learn-how-free-code-camp-works) exercises up and until the __"Shopping List"__ exercise (there are some topics we did not cover but you can do it). -> Hint, if you solve the FreeCodeCamp challenges and they are new concepts to you and you would like to take a look at them later on in the program, Copy your answers from FCC in a .js file and upload them to Github for future reference. In this way you build your own little documentation, if you look back at them first try to understand what it does before you run them. +### How to hand in Homework: +>steps: +- Create a Github account +- Create a new repository (name it something like hyf-javascript1) make sure you select the option: initialize with README +- inside this repository create a folder "week1" +- Upload the files you created on your computer inside the week1 folder, write a description for this “commit” +- Open the file in your README to check if this all worked + +>Create a new repository "hyf-javascript1". Also create a new folder "week1" inside this repository. +Upload your homework files inside the week1 folder and write a description for this “commit”. +Your hyf-javascript1/week1 should now contain all your homework files. +Place the link to your repository folder in Trello. + +### Hint +If you solve the FreeCodeCamp challenges and they are new concepts to you and you would like to take a look at them later on in the program, Copy your answers from FCC in a .js file and upload them to Github in a repository for future reference. In this way you build your own little documentation, if you look back at them first try to understand what it does before you run them. :star: Additional resources and review: [here](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/REVIEW.md) (work in progress):star: diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 097f46139..fe58ecea8 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -2,13 +2,13 @@ >[Here](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/README.md) you find the readings you have to complete before the third lecture. -### Step 1: Recap/Read +## Step 1: Recap/Read - Have a look at [The Secret Life of JavaScript Primitives](https://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/) - Go through the review of [last week](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md) (Work in progress, update this week :wrench:) - Go through the review of [this week](https://github.com/HackYourFuture/JavaScript/blob/master/Week2/REVIEW.md) (work in progress, update this week :nut_and_bolt:) -### Step 2: Watch +## Step 2: Watch 1. If you haven't done already, watch: [What is programming](https://www.khanacademy.org/computing/computer-programming/programming/intro-to-programming/v/programming-intro) Just watch the 2 min video, you do not have to do the entire JavaScript course (It could be useful later on though). 2. Please watch the following parts of the course, [Programming Foundations Fundamentals](https://www.lynda.com/Programming-Foundations-tutorials/Welcome/83603/90426-4.html) on Lynda.com (if you don't have access to Lynda yet ask Gijs): @@ -19,7 +19,7 @@
8. Collections
11. When Things Go Wrong -### Step 3: JavaScript +## Step 3: JavaScript > For all the following exercises create a new .js file. Try to find a proper name for each file or make a small comment about what it does inside for future reference 1. Create a function that takes 3 arguments and returns the sum of the three arguments. @@ -132,7 +132,7 @@ typeof typeof bar; > ‘Coerce' means to try to change - so coercing `var x = '6'` to number means trying to change the type to number temporarily. -### Step 4: **Finish basic freeCodeCamp challenges:** +## Step 4: **Finish basic freeCodeCamp challenges:** Go back to FreeCodeCamp, start where you left of and finish the rest of the Basic JavaScript challenges. @@ -143,5 +143,10 @@ Please make sure you REALLY understand the exercises below: - https://www.freecodecamp.com/challenges/add-new-properties-to-a-javascript-object - https://www.freecodecamp.com/challenges/delete-properties-from-a-javascript-object +>Upload your homework in your "hyf-javascript1" Github repository. Make sure to create a new folder "week2" first. +Upload your homework files inside the week2 folder and write a description for this “commit”. +Your hyf-javascript1/week2 should now contain all your homework files. +Place the link to your repository folder in Trello. + :star: Additional resources and review: [here](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/REVIEW.md) (work in progress):star: diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index 2de989658..51a43473a 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -2,24 +2,24 @@ >[Here](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/README.md) you find the readings you have to complete before the fourth lecture. -### Step 0 review: +## Step 0 review: - Go through the review of [the first week](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md) (Work in progress, update this week :wrench:) - Go through the review of [the second week](https://github.com/HackYourFuture/JavaScript/blob/master/Week2/REVIEW.md) (work in progress, update this week :nut_and_bolt:) - Daan will update the review of this week soon, keep an eye on that! -### Step 1: Implement feedback +## Step 1: Implement feedback Your fellow students have provided you with feedback in Trello. Your teachers have provided you with feedback in issues in Github. - Implement both feedback from Trello and Github. - Check on one of your fellow students code and issues and see if her or she implemented their feedback correctly. If there are some things that can be improved make an issue suggesting further improvements. If you think that the feedback has been implemented correctly create a issue saying something like: "nice work you can clear your issues". -### Step 2: Reorganize your Github +## Step 2: Reorganize your Github -Your Github should contain two repositories called JavaScript1 and CommandLine . Inside the JavaScript repository you should have three folders, called week1, week2, and week3 (or something similar). Inside these folders you should have the different assignments (a file per exercises). Ty and find proper names for the exercises that reflect somehow what is going on in the code. Avoid using spaces in your file names, this makes it harder to "run" you files. Also make sure that all your JavaScript files have a .js extension. +Your Github should contain two repositories called hyf-javascript1 and hyf-commandline . Inside the JavaScript repository you should have three folders, called week1, week2, and week3 (or something similar). Inside these folders you should have the different assignments (a file per exercises). Ty and find proper names for the exercises that reflect somehow what is going on in the code. Avoid using spaces in your file names, this makes it harder to "run" you files. Also make sure that all your JavaScript files have a .js extension. -### Step 3: Custom DOM manipulation challenge :mortar_board: +## Step 3: Custom DOM manipulation challenge :mortar_board: 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`). @@ -35,7 +35,12 @@ Your Github should contain two repositories called JavaScript1 and CommandLine . 7. 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_) -### Step 4: **FreeCodeCamp challenges:** +>Upload your homework in your "hyf-javascript1" Github repository. Make sure to create a new folder "week3" first. +Upload your homework files inside the week3 folder and write a description for this “commit”. +Your hyf-javascript1/week3 should now contain an index.html, main.css and a script.js file (and the images folder) +Place the link to your repository folder in Trello. + +## Step 4: **FreeCodeCamp challenges:** - https://www.freecodecamp.com/challenges/declare-javascript-objects-as-variables - https://www.freecodecamp.com/challenges/make-instances-of-objects-with-a-constructor-function diff --git a/Week4/MAKEME.md b/Week4/MAKEME.md index 4109ce649..ffced771c 100644 --- a/Week4/MAKEME.md +++ b/Week4/MAKEME.md @@ -1,18 +1,17 @@ # Homework Week 4 -## Read: -- https://github.com/HackYourFuture/JavaScript/blob/master/Week4/README.md +>[Here](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/README.md) you find the readings you have to complete before the fourth lecture. -## Challenges: +## Step 1: Some Challenges: - https://www.freecodecamp.com/challenges/using-objects-for-lookups - https://www.freecodecamp.com/challenges/manipulating-complex-objects - https://www.freecodecamp.com/challenges/convert-json-data-to-html -### Custom Challenge +## Step 2: Custom Challenge In the HYF Movies Hands-On, we created the function `sortByImdbRating(movies)` to sort the list of movies by IMDB rating. Replace this function by a generalised version that takes the name of the property (`propName`) to sort on and a number `order` (allowed values 1 or -1, default value = 1) to indicate respectively ascending or descending sort order: -```js +``` function sortMovies(movies, propName, order) ``` @@ -32,3 +31,8 @@ Notes: 1. Do not bother to make this work for the `Ratings` property which refers to an object rather than a simple value. 2. It is not necessary to convert property values containing dates or numbers formatted with embedded commas to facilitate sorting for this challenge (but you're welcome to try). You can leave the value 'as is'. +>Create a new repository "hyf-javascript2". Also create a new folder "week1" inside this repository. +Upload your homework files inside the week1 folder and write a description for this “commit”. +Your hyf-javascript2/week1 should now contain the files of your homework. +Place the link to your repository folder in Trello. + diff --git a/Week5/MAKEME.md b/Week5/MAKEME.md index 3f35b00ff..ee3849339 100644 --- a/Week5/MAKEME.md +++ b/Week5/MAKEME.md @@ -1,5 +1,7 @@ ## Homework Week 5 +>[Here](https://github.com/HackYourFuture/JavaScript/tree/master/Week5/README.md) you find the readings you have to complete before the fourth lecture. + ### Git 1. Create a branch called `MyBranch` in the repository `MyFirst`. @@ -109,3 +111,9 @@ console.log(y); ``` If you are confused please run the code and then consult the Google for "javascript pass by value pass by reference" +>Upload your homework in your "hyf-javascript2" Github repository. Make sure to create a new folder "week2" first. +Upload your homework files inside the week2 folder and write a description for this “commit”. +Your hyf-javascript2/week2 should now contain all your homework files. +Place the link to your repository folder in Trello. + + diff --git a/Week6/MAKEME.md b/Week6/MAKEME.md index 2d5176a0a..434a75530 100644 --- a/Week6/MAKEME.md +++ b/Week6/MAKEME.md @@ -1,5 +1,6 @@ # Homework Week 6 -You can find the [reading material here](https://github.com/HackYourFuture/JavaScript/blob/master/Week6/README.md) + +>[Here](https://github.com/HackYourFuture/JavaScript/tree/master/Week6/README.md) you find the readings you have to complete before the fourth lecture. - Add your github/repositories link to [this slack file](https://slack-files.com/T0EJTUQ87-F5DAMGML5-cd687fd9b6) - Fix the issues from the last week and make sure you explain how you fixed the issue in a comment (or commit message) @@ -24,3 +25,9 @@ __Requirements__: 5. Change the function your previously wrote that handles the hovering event and add functionality to it that shows the collaborators of that repo. Note: to do this, you will need to make ANOTHER API call to https://api.github.com/repos/user/repo/events and that lists the 3 last events. Show the type of the event and if the type is 'PushEvent' show the commit message. Take a look at this [API call](https://api.github.com/repos/Razpudding/realtime-slack/events) to see some sample data. 6. Make sure that when a user goes to your app, your github account info is loaded. They can then use the search field to find info about other github accounts. 7. BONUS: Look through the data that Github sends back to you on your first API call and think about what other info would be usefull. Add more functionalities to your app like showing how many people starred a repositories or showing the names of the people followed by the current user. + +>Upload your homework in your "hyf-javascript2" Github repository. Make sure to create a new folder "week3" first. +Upload your homework files inside the week3 folder and write a description for this “commit”. +Your hyf-javascript2/week3 should now contain an index.html, main.css and a script.js file (and the images folder) +Place the link to your repository folder in Trello. + diff --git a/Week7/MAKEME.md b/Week7/MAKEME.md index bea33c710..529dd790d 100644 --- a/Week7/MAKEME.md +++ b/Week7/MAKEME.md @@ -1,5 +1,7 @@ # Homework Week 7 +>[Here](https://github.com/HackYourFuture/JavaScript/tree/master/Week7/README.md) you find the readings you have to complete before the fourth lecture. + ## Git Homework: [Make these assignments](https://github.com/HackYourFuture/Git/blob/master/Lecture-3.md) @@ -46,4 +48,7 @@ Remember the person with the most kata points gets a prize from Gijs (and you ca 1. [Stacks/Queues](https://www.youtube.com/watch?v=wjI1WNcIntg) (5 mins) 2. [JS Event Loops](https://www.youtube.com/watch?v=8aGhZQkoFbQ) (26 mins, watch this one twice or until you understand it) - +>Create a new repository "hyf-javascript3". Also create a new folder "week1" inside this repository. +Upload your homework files inside the week1 folder and write a description for this “commit”. +Your hyf-javascript3/week1 should now contain the files of your homework. +Place the link to your repository folder in Trello. diff --git a/Week8/MAKEME.md b/Week8/MAKEME.md index a7d8caac9..65cb48920 100644 --- a/Week8/MAKEME.md +++ b/Week8/MAKEME.md @@ -1,7 +1,7 @@ # Homework Week 8 This week you will work on finishing your application so it's actually useful!! -[Read this](https://github.com/HackYourFuture/JavaScript/tree/master/Week8/README.md) +>[Here](https://github.com/HackYourFuture/JavaScript/tree/master/Week8/README.md) you find the readings you have to complete before the fourth lecture. ## The tools we used in the second lecture - [metajs](http://int3.github.io/metajs/) @@ -25,3 +25,7 @@ This week you will work on finishing your application so it's actually useful!! If you get stuck, remember we have Slack and you can ask questions. --> +>Upload your homework in your "hyf-javascript3" Github repository. Make sure to create a new folder "week2" first. +Upload your homework files inside the week2 folder and write a description for this “commit”. +Your hyf-javascript3/week2 should now contain all your homework files. +Place the link to your repository folder in Trello. \ No newline at end of file diff --git a/Week9/MAKEME.md b/Week9/MAKEME.md index bb0fba3f8..57e96436f 100644 --- a/Week9/MAKEME.md +++ b/Week9/MAKEME.md @@ -103,3 +103,9 @@ https://github.com/HackYourFuture/TicTacToeTDD https://github.com/HackYourFuture/OOP-Student-and-Teacher rewatch the Hangouts session here: https://www.youtube.com/watch?v=oc9ogCJz9rYs +``` + +>Upload your homework in your "hyf-javascript3" Github repository. Make sure to create a new folder "week3" first. +Upload your homework files inside the week3 folder and write a description for this “commit”. +Your hyf-javascript3/week3 should now contain all your homework files. +Place the link to your repository folder in Trello. \ No newline at end of file From 6b28860e2508201f82815aa7a0383e58bc9ffbe8 Mon Sep 17 00:00:00 2001 From: Gijs C Date: Tue, 12 Sep 2017 16:59:16 +0200 Subject: [PATCH 023/355] Update MAKEME.md --- Week3/MAKEME.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index 51a43473a..2e9648eff 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -21,9 +21,9 @@ Your Github should contain two repositories called hyf-javascript1 and hyf-comma ## Step 3: Custom DOM manipulation challenge :mortar_board: -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`). +1. Open a new js file and start by declaring an array that contains 10 strings. These strings should be of book titles 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`). -2. Create a basic html file called inxed.html and use it to load the js file, confirm the console.log show the array. (This is for debugging and making sure everything is in order. Delete it later when you're done :)) +2. Create a basic html file called index.html and use it to load the js file, confirm the console.log show the array. (This is for debugging and making sure everything is in order. Delete it later when you're done :)) 3. Make a function (or functions) that generate a `ul` with `li` elements for each book ID in the array using a for loop. From e944375780c59f268e41f86fbc61436919283e77 Mon Sep 17 00:00:00 2001 From: Daan Aerts Date: Tue, 12 Sep 2017 17:19:16 +0200 Subject: [PATCH 024/355] week3 review --- Week3/REVIEW.md | 253 +++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 249 insertions(+), 4 deletions(-) diff --git a/Week3/REVIEW.md b/Week3/REVIEW.md index 502c8dce8..ca7791298 100644 --- a/Week3/REVIEW.md +++ b/Week3/REVIEW.md @@ -3,11 +3,256 @@ ``` This review covers: • More CLI -• Closures -• Scope +• Scope, closures and 'this' • Array Manipulations -• Basic DOM manipulations [img src, innerHTML] +• Basic DOM manipulations • Code commenting ``` -Check out the CLI review here: https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-2.md \ No newline at end of file +## More CLI +Check out the CLI review here: https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-2.md + +## Scope, closures and 'this' +Scope, closure and 'this' are about *context*. + +This post explains things really well: [Recommended read by Todd Motto on Scope](https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/) + +In this review we won't go over how JavaScript implements scope. We would just be rewriting the above post by Todd Motto. + +Instead, let's focus on a couple of important **words** that are used in explaining scope. Understanding the JavaScript side of things can be difficult if we don't fully understand these words. + +### How to think about context? +Consider the following sentences: +> Eyad is a great cook. *He* loves to make ravioli. + +> Gijs is a great cook. *He* loves to make ravioli. + +In both cases, the second sentence is the exact same. However, the word *he* refers to a completely different person. He is defined by the context. + +A second example: +> *He* loves to make ravioli. + +Now, when this sentence is written down without *he* being defined in the context, the sentence doesn't make any sense. + +### Context in programming: +A JavaScript example: +``` +function myFunction() { + const a = 'ravioli' + console.log(a) +} +``` + +``` +function myFunction() { + console.log(a) +} +``` + +In both cases, `console.log(a)` is the exact same. However, the context defines the value of a and whether it is defined at all. + +### The Scope of the Context +Let's first look at a definition of `scope` +> (1) the extent of the area or subject matter that something deals with or to which it is relevant. +> (2) the opportunity or possibility to do or deal with something. + +So in words more applicable to our situation scope means: +> code that is within the reach of our code. + +Consider two completely different JavaScript files +``` +// aFile.js +const a = 10 +``` + +``` +// anotherFile.js +console.log(a) +``` + +When we run these files separately, the `console.log(a)` statement in anotherFile.js of course cannot reach `var a = 10`. Why? It is beyond the scope of our context. When we run a file in JavaScript, the program creates a new top-level context we call the global scope. + +From now on, we'll call 'scoped context' simply 'scope'. + +### Creating Scope within a Program +Just like two programs have an completely different scope, we can also create different scopes within a program. We do the same in our language: +> Eyad is a great cook. *He* loves to make ravioli. Gijs is great at finding the best ingredients. *He* has a real nose for it. + +At school one learns that *he* will refer to the last masculine subject introduced to the text. There are rules constraining this. In programming we rely a lot on context, and the rules are more strict than in natural language. + +There are *five different ways* we can create a new context in JavaScript: +- The global context (as we already saw) +- The simple function context +- The object construction context +- The object method context +- The event listener context + +More info on this in this great post + +## Array Manipulation +[MDN on Arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) +As we know by now, arrays are collections of values. + +As we will see, there are often many ways to achieve the same thing when working arrays. Over time, you will add different techniques to your mental toolbox to achieve the result you want quickly. + +The basics. + +- How do we create an array? +- How do we add items to an array? +- How do we change items of an array? +- How do we remove items from an array? +- How do we know the length of an array? +- How do we iterate over an array? + + +### How do we create an array? +An array can be created multiple ways + +From scratch: +``` +const a = [] // result: [] +const b = ['item1', 'item2'] // result: ['item1', 'item2'] +const c = new Array() // result: [] +const d = new Array('item 1', 'item2') // result: ['item1', 'item2'] +const e = new Array(20) // result: [ <20 empty items> ] +const f = new Array(20, 21) // result: [20, 21] +// Note that `e` and `f` are a beautiful example of how weird and unexpected JavaScript can be. You will probably use `a` most often. +``` + +From value (as an example, many ways to create an array from another value): +``` +const a = 'hello world' // result: 'hello world' +const b = a.split(' ') // result: ['hello', 'world' ] +``` + +### Array length +Every array has as a 'static' property `length`. Meaning that we can easily get the amount of items in an array. +``` +const f = ['hi','there'] +console.log(f.length) // 2 +``` + +### Array index +We can access array elements through the position of the element in the array. This is called an index. Indices (plural of index) are 0-based, meaning that the first item's index is 0, the second element is 1. + +``` +const x = ['first', 'second', 'third'] +console.log(x[0]) // 'first' + +x[3] = 'fourth' +``` + +Note that arrays can have empty values. This should be avoided usually to prevent unexpected behaviour. +``` +x[10] = 'eleventh' +console.log(x) // [ 'first', 'second', 'third', 'fourth', <6 empty items>, 'eleventh' ] +``` + +Next to the index, we have a wide range of tools to manipulate arrays. + +### Array methods +These methods are essential. + +**Extremely important is to remember to always ask these two questions**: +• What is the return value of this method? +• What does this method do to the original array it is used on? + +**Adding items** +• [`.push()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) Add item to end of array +• [`.unshift()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift) Add item to beginning of array + +**Removing items** +• [`.shift()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) Remove first element from array +• [`.pop()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop) Remove last element from array +• [`.splice()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) Remove a specific element from array using index + +**Useful iterators over arrays** +• [`.map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) creates a new array with the results of calling a provided function on every element in the calling array. +• [`.filter()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) creates a new array with all elements that pass the test implemented by the provided function. +• [`.sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) sorts the elements of an array in place and returns the array +``` + +## Basic DOM manipulations +Using JavaScript we can access and manipulate the Document Object Model (DOM). We access the DOM through a global object called `document`. + +HTML +``` + +

+ +``` + +A common method to access the DOM is by giving a HTML element an ID, and then using the `document` method `getElementById()` + +``` +const x = document.getElementById('hello') +``` + +Now we have stored a *reference* of how that HTML element is accessed through the DOM object. We can use this to manipulate the element. + +``` +x.innerHTML = 'hello' +``` + +We can also create elements +``` +const a = document.createElement('li') +x.appendChild(a) +``` + + + +## Code Commenting +First the straightforward part: how do we place comments in our code? + +### JavaScript +Single line comments +``` +// Change heading: +document.getElementById("myH").innerHTML = "My First Page"; +``` + +Single line comments at end of the line: +``` +var x = 5; // Declare x, give it the value of 5 +``` + +Coding **well** in JavaScript: [JSDoc](http://usejsdoc.org/) + +### HTML +[W3Schools](https://www.w3schools.com/html/html_comments.asp) +Comments +``` + + + +``` + + +### CSS +[MDN on CSS comments](https://developer.mozilla.org/en-US/docs/Web/CSS/Comments) +``` +/* Comment */ + +/* +A comment +which stretches +over several +lines +*/ +``` + +### When to comment? +Now for the hard part: when to comment? When you work for different companies, you will see different styles. Embrace something you like, and then learn to let go. Google on "when to comment code?" and you'll find a big bunch of different opinions. + +The general concept is, however, that it is there to help make the code more easy to understand. Note, however, that comments can also make code more difficult to understand when not applied properly. + + + + + + + + + From 5b3bba2782b1b4768e1268b18f81841ed27992b3 Mon Sep 17 00:00:00 2001 From: Daan Aerts Date: Tue, 12 Sep 2017 17:21:51 +0200 Subject: [PATCH 025/355] added missing link --- Week3/REVIEW.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week3/REVIEW.md b/Week3/REVIEW.md index ca7791298..e8e4c08da 100644 --- a/Week3/REVIEW.md +++ b/Week3/REVIEW.md @@ -87,7 +87,7 @@ There are *five different ways* we can create a new context in JavaScript: - The object method context - The event listener context -More info on this in this great post +More info on this [in this great post](https://zellwk.com/blog/this/) ## Array Manipulation [MDN on Arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) From 4d0883dfdc536acf3a984d6d329e993c79a8a458 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Fri, 15 Sep 2017 18:50:02 +0200 Subject: [PATCH 026/355] added review week 3 --- README.md | 2 +- Week3/MAKEME.md | 3 +-- Week3/REVIEW.md | 36 ++++++++++++++++++------------------ 3 files changed, 20 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index edd2c42f0..514b132b9 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ Here you can find course content and homework for the JavaScript 1,2 and 3 modul |0.|Preparation for your first JavaScript session|[Pre-reading](https://github.com/HackYourFuture/JavaScript/tree/master/Week0) + [CLI Reading Week 1](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md)|-| |1.|• [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :heart:
• Intro JavaScript (What is it, where can you use it for)
• Variables [var, let, const]
• Basic Data types [Strings, Numbers, Arrays]
• Operators|[Reading Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/README.md) | [Homework Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md)| |2.|• Advanced data types [Objects]
• Conditions
• Statements vs Expressions
• Loops (for/while)
• Functions
• Naming conventions|[Reading Week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/README.md)|[Homework Week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week2/REVIEW.md)| -|3.|• [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :balloon:
• Closures
• Scope
• Array Manipulations
• Basic DOM manipulations [img src, innerHTML]
• Code commenting|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/MAKEME.md)|Review| +|3.|• [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :balloon:
• Closures
• Scope
• Array Manipulations
• Basic DOM manipulations [img src, innerHTML]
• Code commenting|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week3/REVIEW.md)| |4.|• JSON
• Code debugging using the browser
• Functions + JSON/Arrays
• Code flow (order of execution)
• (capturing user input)
• Structuring code files|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/Week4)|[JS](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/MAKEME.md) + [Git Homework Week 4](https://github.com/HackYourFuture/Git/blob/master/Lecture-1.md)|Review| |5.|• First Git Session with Unmesh :smiling_imp:
• Events
• Callbacks
• XHTTP Requests
• API calls|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5)|[Homework Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5/MAKEME.md)|Review| |6.|• Second Git Session :see_no_evil:
• Async VS Sync
• Polling
• Structure for a basic SPA
TEST :boom:|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6/MAKEME.md)|Review| diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index 2e9648eff..feaadb77a 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -5,8 +5,7 @@ ## Step 0 review: - Go through the review of [the first week](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md) (Work in progress, update this week :wrench:) - Go through the review of [the second week](https://github.com/HackYourFuture/JavaScript/blob/master/Week2/REVIEW.md) (work in progress, update this week :nut_and_bolt:) -- Daan will update the review of this week soon, keep an eye on that! - +- Go through the review of [the third week](https://github.com/HackYourFuture/JavaScript/blob/master/Week3/REVIEW.md) ## Step 1: Implement feedback diff --git a/Week3/REVIEW.md b/Week3/REVIEW.md index e8e4c08da..9928424e2 100644 --- a/Week3/REVIEW.md +++ b/Week3/REVIEW.md @@ -36,14 +36,14 @@ Now, when this sentence is written down without *he* being defined in the contex ### Context in programming: A JavaScript example: -``` +```js function myFunction() { const a = 'ravioli' console.log(a) } ``` -``` +```js function myFunction() { console.log(a) } @@ -60,12 +60,12 @@ So in words more applicable to our situation scope means: > code that is within the reach of our code. Consider two completely different JavaScript files -``` +```js // aFile.js const a = 10 ``` -``` +```js // anotherFile.js console.log(a) ``` @@ -109,7 +109,7 @@ The basics. An array can be created multiple ways From scratch: -``` +```js const a = [] // result: [] const b = ['item1', 'item2'] // result: ['item1', 'item2'] const c = new Array() // result: [] @@ -120,14 +120,14 @@ const f = new Array(20, 21) // result: [20, 21] ``` From value (as an example, many ways to create an array from another value): -``` +```js const a = 'hello world' // result: 'hello world' const b = a.split(' ') // result: ['hello', 'world' ] ``` ### Array length Every array has as a 'static' property `length`. Meaning that we can easily get the amount of items in an array. -``` +```js const f = ['hi','there'] console.log(f.length) // 2 ``` @@ -135,7 +135,7 @@ console.log(f.length) // 2 ### Array index We can access array elements through the position of the element in the array. This is called an index. Indices (plural of index) are 0-based, meaning that the first item's index is 0, the second element is 1. -``` +```js const x = ['first', 'second', 'third'] console.log(x[0]) // 'first' @@ -143,7 +143,7 @@ x[3] = 'fourth' ``` Note that arrays can have empty values. This should be avoided usually to prevent unexpected behaviour. -``` +```js x[10] = 'eleventh' console.log(x) // [ 'first', 'second', 'third', 'fourth', <6 empty items>, 'eleventh' ] ``` @@ -170,13 +170,13 @@ These methods are essential. • [`.map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) creates a new array with the results of calling a provided function on every element in the calling array. • [`.filter()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) creates a new array with all elements that pass the test implemented by the provided function. • [`.sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) sorts the elements of an array in place and returns the array -``` + ## Basic DOM manipulations Using JavaScript we can access and manipulate the Document Object Model (DOM). We access the DOM through a global object called `document`. HTML -``` +```html
@@ -184,18 +184,18 @@ HTML A common method to access the DOM is by giving a HTML element an ID, and then using the `document` method `getElementById()` -``` +```js const x = document.getElementById('hello') ``` Now we have stored a *reference* of how that HTML element is accessed through the DOM object. We can use this to manipulate the element. -``` +```js x.innerHTML = 'hello' ``` We can also create elements -``` +```js const a = document.createElement('li') x.appendChild(a) ``` @@ -207,13 +207,13 @@ First the straightforward part: how do we place comments in our code? ### JavaScript Single line comments -``` +```js // Change heading: document.getElementById("myH").innerHTML = "My First Page"; ``` Single line comments at end of the line: -``` +```js var x = 5; // Declare x, give it the value of 5 ``` @@ -222,7 +222,7 @@ Coding **well** in JavaScript: [JSDoc](http://usejsdoc.org/) ### HTML [W3Schools](https://www.w3schools.com/html/html_comments.asp) Comments -``` +```html @@ -232,7 +232,7 @@ your comments here --> ### CSS [MDN on CSS comments](https://developer.mozilla.org/en-US/docs/Web/CSS/Comments) -``` +```css /* Comment */ /* From b95c4cbeb67057611462e538763342198e203bdb Mon Sep 17 00:00:00 2001 From: mkruijt Date: Sat, 16 Sep 2017 15:12:36 +0200 Subject: [PATCH 027/355] updated homework week4 --- Week1/MAKEME.md | 24 +++++++++++++----------- Week2/MAKEME.md | 11 +++++++---- Week3/MAKEME.md | 11 +++++++---- Week3/REVIEW.md | 2 +- Week4/MAKEME.md | 37 ++++++++++++++++++++++++++++++------- Week5/MAKEME.md | 12 +++++++----- Week6/MAKEME.md | 12 +++++++----- 7 files changed, 72 insertions(+), 37 deletions(-) diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 700fa7ea7..d02722eb4 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -68,17 +68,19 @@ For example: On freeCodeCamp.com please do the [Basic JavaScript](https://www.freecodecamp.com/challenges/learn-how-free-code-camp-works) exercises up and until the __"Shopping List"__ exercise (there are some topics we did not cover but you can do it). ### How to hand in Homework: ->steps: -- Create a Github account -- Create a new repository (name it something like hyf-javascript1) make sure you select the option: initialize with README -- inside this repository create a folder "week1" -- Upload the files you created on your computer inside the week1 folder, write a description for this “commit” -- Open the file in your README to check if this all worked - ->Create a new repository "hyf-javascript1". Also create a new folder "week1" inside this repository. -Upload your homework files inside the week1 folder and write a description for this “commit”. -Your hyf-javascript1/week1 should now contain all your homework files. -Place the link to your repository folder in Trello. +``` +steps: +• Create a Github account +• Create a new repository (name it something like hyf-javascript1) make sure you select the option: initialize with README +• inside this repository create a folder "week1" +• Upload the files you created on your computer inside the week1 folder, write a description for this “commit” +• Open the file in your README to check if this all worked + +• Create a new repository "hyf-javascript1". Also create a new folder "week1" inside this repository. +• Upload your homework files inside the week1 folder and write a description for this “commit”. +• Your hyf-javascript1/week1 should now contain all your homework files. +• Place the link to your repository folder in Trello. +``` ### Hint If you solve the FreeCodeCamp challenges and they are new concepts to you and you would like to take a look at them later on in the program, Copy your answers from FCC in a .js file and upload them to Github in a repository for future reference. In this way you build your own little documentation, if you look back at them first try to understand what it does before you run them. diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index fe58ecea8..efec8f539 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -143,10 +143,13 @@ Please make sure you REALLY understand the exercises below: - https://www.freecodecamp.com/challenges/add-new-properties-to-a-javascript-object - https://www.freecodecamp.com/challenges/delete-properties-from-a-javascript-object ->Upload your homework in your "hyf-javascript1" Github repository. Make sure to create a new folder "week2" first. -Upload your homework files inside the week2 folder and write a description for this “commit”. -Your hyf-javascript1/week2 should now contain all your homework files. -Place the link to your repository folder in Trello. +``` +How to hand in your homework: +• Upload your homework in your "hyf-javascript1" Github repository. Make sure to create a new folder "week2" first. +• Upload your homework files inside the week2 folder and write a description for this “commit”. +• Your hyf-javascript1/week2 should now contain all your homework files. +• Place the link to your repository folder in Trello. +``` :star: Additional resources and review: [here](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/REVIEW.md) (work in progress):star: diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index feaadb77a..2ed148bc1 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -34,10 +34,13 @@ Your Github should contain two repositories called hyf-javascript1 and hyf-comma 7. 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_) ->Upload your homework in your "hyf-javascript1" Github repository. Make sure to create a new folder "week3" first. -Upload your homework files inside the week3 folder and write a description for this “commit”. -Your hyf-javascript1/week3 should now contain an index.html, main.css and a script.js file (and the images folder) -Place the link to your repository folder in Trello. +``` +How to hand in your homework: +• Upload your homework in your "hyf-javascript1" Github repository. Make sure to create a new folder "week3" first. +• Upload your homework files inside the week3 folder and write a description for this “commit”. +• Your hyf-javascript1/week3 should now contain an index.html, main.css and a script.js file (and the images folder) +• Place the link to your repository folder in Trello. +``` ## Step 4: **FreeCodeCamp challenges:** diff --git a/Week3/REVIEW.md b/Week3/REVIEW.md index 9928424e2..f47595fc2 100644 --- a/Week3/REVIEW.md +++ b/Week3/REVIEW.md @@ -214,7 +214,7 @@ document.getElementById("myH").innerHTML = "My First Page"; Single line comments at end of the line: ```js -var x = 5; // Declare x, give it the value of 5 +const x = 5; // Declare x, give it the value of 5 ``` Coding **well** in JavaScript: [JSDoc](http://usejsdoc.org/) diff --git a/Week4/MAKEME.md b/Week4/MAKEME.md index ffced771c..b12ea8092 100644 --- a/Week4/MAKEME.md +++ b/Week4/MAKEME.md @@ -2,14 +2,33 @@ >[Here](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/README.md) you find the readings you have to complete before the fourth lecture. -## Step 1: Some Challenges: +## Step 0: +Give yourself (or your neighbor) a little tap on the shoulder, you've made it to JS2! :muscle: + +## Step 1: Some Challenges - https://www.freecodecamp.com/challenges/using-objects-for-lookups - https://www.freecodecamp.com/challenges/manipulating-complex-objects - https://www.freecodecamp.com/challenges/convert-json-data-to-html -## Step 2: Custom Challenge +## Step 2: Custom challenge +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. +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. +3. Make a ul with a li for each title (just like you did with the books in the previous assignment +4. Use CSS to divide the page in two columns. The left column will have a list of the titles for each movie. The right column will have all the information listed for each movie. +5. Replace the "Poster" property with the actual image of the poster. If you do this correctly, in the right column there will be a picture for each movie. +6. Use the imdbID to create an URL to the IMDB page for that movie (hint: IMDB urls always look like this http://www.imdb.com/title/[imdbId] where [imdbId] would be replaced by the actual Id. If you do this correctly, each movie will have a link to its own IMDB page. Make sure the link opens in a new tab + +## Step 3: + +Give one of you fellow students in Github feedback about their code of step two, create an issue in their repo, telling them what they did great and what they can improve. + +## Step 4: Almost there... -In the HYF Movies Hands-On, we created the function `sortByImdbRating(movies)` to sort the list of movies by IMDB rating. Replace this function by a generalised version that takes the name of the property (`propName`) to sort on and a number `order` (allowed values 1 or -1, default value = 1) to indicate respectively ascending or descending sort order: +Created a function `sortByImdbRating(movies)` to sort the list of movies by IMDB rating. + +### :boom: Bonus homework :boom: + +Replace this function by a generalised version that takes the name of the property (`propName`) to sort on and a number `order` (allowed values 1 or -1, default value = 1) to indicate respectively ascending or descending sort order: ``` function sortMovies(movies, propName, order) @@ -31,8 +50,12 @@ Notes: 1. Do not bother to make this work for the `Ratings` property which refers to an object rather than a simple value. 2. It is not necessary to convert property values containing dates or numbers formatted with embedded commas to facilitate sorting for this challenge (but you're welcome to try). You can leave the value 'as is'. ->Create a new repository "hyf-javascript2". Also create a new folder "week1" inside this repository. -Upload your homework files inside the week1 folder and write a description for this “commit”. -Your hyf-javascript2/week1 should now contain the files of your homework. -Place the link to your repository folder in Trello. +:octocat: +``` +How to hand in your homework: +• Create a new repository "hyf-javascript2". Also create a new folder "week1" inside this repository. +• Upload your homework files inside the week1 folder and write a description for this “commit”. +• Your hyf-javascript2/week1 should now contain the files of your homework. +• Place the link to your repository folder in Trello. +``` diff --git a/Week5/MAKEME.md b/Week5/MAKEME.md index ee3849339..bceb4a5e7 100644 --- a/Week5/MAKEME.md +++ b/Week5/MAKEME.md @@ -22,7 +22,7 @@ Look at the [documentation of the API](https://github.com/typicode/json-server) and see which other query parameters `json-server` support. Mess around with this to see how changing (or adding) parameters modifies your results. -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. +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. 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. @@ -111,9 +111,11 @@ console.log(y); ``` If you are confused please run the code and then consult the Google for "javascript pass by value pass by reference" ->Upload your homework in your "hyf-javascript2" Github repository. Make sure to create a new folder "week2" first. -Upload your homework files inside the week2 folder and write a description for this “commit”. -Your hyf-javascript2/week2 should now contain all your homework files. +``` +How to hand in your homework: +• Upload your homework in your "hyf-javascript2" Github repository. Make sure to create a new folder "week2" first. +• Upload your homework files inside the week2 folder and write a description for this “commit”. +• Your hyf-javascript2/week2 should now contain all your homework files. Place the link to your repository folder in Trello. - +``` diff --git a/Week6/MAKEME.md b/Week6/MAKEME.md index 434a75530..b2bbc0db0 100644 --- a/Week6/MAKEME.md +++ b/Week6/MAKEME.md @@ -26,8 +26,10 @@ __Requirements__: 6. Make sure that when a user goes to your app, your github account info is loaded. They can then use the search field to find info about other github accounts. 7. BONUS: Look through the data that Github sends back to you on your first API call and think about what other info would be usefull. Add more functionalities to your app like showing how many people starred a repositories or showing the names of the people followed by the current user. ->Upload your homework in your "hyf-javascript2" Github repository. Make sure to create a new folder "week3" first. -Upload your homework files inside the week3 folder and write a description for this “commit”. -Your hyf-javascript2/week3 should now contain an index.html, main.css and a script.js file (and the images folder) -Place the link to your repository folder in Trello. - +``` +How to hand in your homework: +• Upload your homework in your "hyf-javascript2" Github repository. Make sure to create a new folder "week3" first. +• Upload your homework files inside the week3 folder and write a description for this “commit”. +• Your hyf-javascript2/week3 should now contain an index.html, main.css and a script.js file (and the images folder) +• Place the link to your repository folder in Trello. +``` From 4913723b93630d04966dbc4e5a15fce3423b30ec Mon Sep 17 00:00:00 2001 From: Daan Aerts Date: Tue, 19 Sep 2017 14:38:32 +0200 Subject: [PATCH 028/355] Update MAKEME.md --- Week4/MAKEME.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/Week4/MAKEME.md b/Week4/MAKEME.md index b12ea8092..8b258e662 100644 --- a/Week4/MAKEME.md +++ b/Week4/MAKEME.md @@ -6,9 +6,7 @@ Give yourself (or your neighbor) a little tap on the shoulder, you've made it to JS2! :muscle: ## Step 1: Some Challenges -- https://www.freecodecamp.com/challenges/using-objects-for-lookups -- https://www.freecodecamp.com/challenges/manipulating-complex-objects -- https://www.freecodecamp.com/challenges/convert-json-data-to-html +Let's practise working with Objects and Arrays. Go to FreeCodeCamp and complete all challenges under "Object Oriented and Functional Programming" and the _first four challenges_ under "Basic Algorithm Scripting", up until 'Find the longest word in a string.' ## Step 2: Custom challenge 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. From 9881c536633b8da8174d5ccfb6c0bd12c6b3dd18 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Tue, 19 Sep 2017 16:39:37 +0200 Subject: [PATCH 029/355] changed json homework --- Week4/MAKEME.md | 24 ++++++++++-------------- Week4/README.md | 2 +- Week5/MAKEME.md | 10 ++++++++-- Week5/README.md | 1 + 4 files changed, 20 insertions(+), 17 deletions(-) diff --git a/Week4/MAKEME.md b/Week4/MAKEME.md index 8b258e662..6f2c335a4 100644 --- a/Week4/MAKEME.md +++ b/Week4/MAKEME.md @@ -6,25 +6,21 @@ Give yourself (or your neighbor) a little tap on the shoulder, you've made it to JS2! :muscle: ## Step 1: Some Challenges -Let's practise working with Objects and Arrays. Go to FreeCodeCamp and complete all challenges under "Object Oriented and Functional Programming" and the _first four challenges_ under "Basic Algorithm Scripting", up until 'Find the longest word in a string.' +Let's practice working with Objects and Arrays. Go to FreeCodeCamp and complete all challenges under "Object Oriented and Functional Programming" and the _first four challenges_ under "Basic Algorithm Scripting", up until 'Find the longest word in a string.' ## Step 2: Custom challenge -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. -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. -3. Make a ul with a li for each title (just like you did with the books in the previous assignment -4. Use CSS to divide the page in two columns. The left column will have a list of the titles for each movie. The right column will have all the information listed for each movie. -5. Replace the "Poster" property with the actual image of the poster. If you do this correctly, in the right column there will be a picture for each movie. -6. Use the imdbID to create an URL to the IMDB page for that movie (hint: IMDB urls always look like this http://www.imdb.com/title/[imdbId] where [imdbId] would be replaced by the actual Id. If you do this correctly, each movie will have a link to its own IMDB page. Make sure the link opens in a new tab +1. Go to https://api.github.com/orgs/HackYourFuture/repos, you will see a list of the repositories our HYF organization has (yes it's a lot of JSON). +2. You can copy the JSON and put it in a string at the top of your `.js` file. Print the name of the 3rd repository in the array to the console. +3. Make a `