From e4803e20bc640c9d79ea36855289572e605d9468 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Mon, 4 Sep 2017 18:28:12 +0200 Subject: [PATCH 001/341] 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 002/341] 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 003/341] 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 004/341] 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 005/341] 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 006/341] 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 007/341] 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 008/341] 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 009/341] 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 010/341] 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 011/341] 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 012/341] 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 013/341] 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 014/341] 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 015/341] 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 `