update js planning class12 and class13 by mkruijt · Pull Request #21 · HackYourFuture/JavaScript1

mkruijt · 2017-11-29T13:23:01Z

No description provided.

Planning class12

Removed `reduce` dependencies in assigments

…planningClass12 remove reduce

remarcmij · 2017-11-29T14:17:28Z

+|2.|• Intro JavaScript (What is it, where can you use it for)<br>• Variables [var, let, const]<br>• Basic Data types [Strings, Numbers, Arrays, Booleans]<br>• Operators <br>• Naming conventions|[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|[Review](/master/Week2/REVIEW.md)|
+|3.|• Git work flow :smiling_imp:<br>• Advanced data types [Objects] <br>• Conditions <br>• Statements vs Expressions<br> • Loops (for/while)<br>• Functions |[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)|[Review](/Week3/REVIEW.md)|
+|4.|• Capturing user input <br>• Basic DOM manipulations[img src, innerHTML] <br>• Code debugging using the browser <br>• Code commenting <br>• Structuring code files |[Reading Week 4](/Week4/README.md)|[Homework Week 4](/Week4/MAKEME.md)|Review|
+|5.|• Functions + JSON/Arrays<br>• Array Manipulations<br>• JSON<br>• Map and filter<br>• Arrow functions |[Reading Week 5](/Week5/README.md)|[Homework Week 5](/Week5/MAKEME.md)|[Review](/Week5/REVIEW.MD)|


Do we want to add some more ES6 goodies here? Or do we wait until React?

String template literals

Array and object destructuring

Array spread

Object shorthand notation

@joostlubach what do you think? You did this class last week. Is there some room for more ES6 or is it ok to do this in react?

remarcmij · 2017-11-29T14:25:58Z


-### Here are resources that we like you to read as a preparation for the coming lecture:
+## How to get started
+1. Download and install the latest Current version of NodeJS - from https://nodejs.org/en/download/current/


Now that Node version 8 LTS is out, I would recommend that, for the time being, we ask students to install the LTS version. This already has all the ES6 features we want. Last time I checked there were still NPM packages that complained about version 9.

yes agreed.

remarcmij · 2017-11-29T14:31:49Z

+All share a video or a resource (this can be a drawing, article or a pod cast) that was helpful for you the last few weeks with learning JavaScript. Please share this in the channel of your class in Slack. Also write as small note about what the resource i about and why you think it's so helpful (you can share more than one if you like).

-> 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. All these 
+## Step 2: Feedback


Is there any home work from the preview from Week 0? Or is it the last HTML/CSS homework? Because that is mentioned as Step 2 in Homework Week 2.

yep, this refers to the homework of the third week of html/css/cli

remarcmij · 2017-11-29T14:46:08Z

+5\.6 Console.log the highest value.  
+
+6\. *Arrays!*  
+6\.1 Declare an empty array (you can decide on how to call it yourself, but read on a bit here and see if you can find a good name that exactly describes what this variable will hold).  


Move the comment about a good name to step 6.4. I would like to see that students come up with a name like myFavoriteAnimals in 6.4.

remarcmij · 2017-11-29T14:56:03Z

@@ -1,20 +1,14 @@
 # Reading material for the fourth lecture:


I think we should bundle call, apply and bind with the discussion of this which I think should be in Week 7 as part of OOP. I don't think any of these methods is required in homework before week 7. In fact, of the three we have limited use for bind only (in the React module, but even then we could avoid it with fat arrow functions assigned to class properties).

remarcmij · 2017-11-29T15:04:30Z

 2\.10 Log the index of meerkat to the console. Add a message so it says: "The item you are looking for is at index: " (here you should show the index of the item)

-## Step 4: Custom DOM manipulation challenge :mortar_board:
+## Step 6: Custom DOM manipulation challenge :mortar_board:


This step is not about DOM manipulation. Moved to Week 4?

yes, the actual assignment is moved, but i forgot to move the header 🙂

remarcmij · 2017-11-29T15:09:45Z

+
+9. Change the function `vehicle` to use the list of question 7. 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.)


Previous classes found this assignment difficult or failed to read it carefully and implement it precisely. In my view the output should be correct English with all the punctuation in place (that's the challenge). So plurals for the vehicle types, commas followed by a single space, the word and to replace the final comma and closed off by a period.

i've put your text in as a hint with the question

remarcmij · 2017-11-29T15:11:14Z

- https://www.freecodecamp.com/challenges/make-object-properties-private
+14. Add a property to the object you just created that contains the languages that they have taught you.

+15. 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. 


This assignment is about callbacks which we now have scheduled for week 6. Move it there?

remarcmij · 2017-11-29T15:22:12Z


- `1 x -1 = -1`, and
- `-1 x -1 = 1`
+## Step 3: String and Array challenges


It looks like Step 3 was already done in Week 3.

remarcmij · 2017-11-29T15:28:45Z

-6. Here are two functions that look like they do the something similar but they print different results. Please explain what's going on here.
+- Collect two days' worth of tasks.
+- Convert the task durations to hours, instead of minutes.
+- Filter out everything that took two hours or more


I'm not entirely sure what is asked for. Does filter out mean: remove from the collection or keep in the collection?

yes it means remove, I will clarify it.

I think we can further improve on this assignment by introducing a third property for each task: billable (boolean). We can ask to filter on billable tasks, rather than on an arbitrary task duration (just to make a bit more realistic).

We can also prescribe the expected output, e.g.:

The bill for Maartje's work totals € nn.nn.

In the home work in class 12 I see that some people put the €-sign after the amount and do not round the number to two decimals.

remarcmij · 2017-11-29T15:34:52Z

-  - Your `callback` functions should accept two parameters so it can handle both errors: `err` and `response`.
-  So based on your users actions (input, hovering, clicking) you want to call `makeRequest` with a different `url` and supply it with a function that handles both errors (display an error message to the user for example) and responses (render it correctly, as described below). 
- - Make your functions small and reusable (modular)! That means create separate functions to handle certain steps. 
+    Then the function should iterate over the array and call the second argument if the array value is divisible by 3


call the second argument -> call the first callback

remarcmij · 2017-11-29T15:35:31Z

+    Then the function should iterate over the array and call the second argument if the array value is divisible by 3

-11) GO WILD
+    The function should call the second argument if the array value is divisible by 5 


call the second argument -> call the second callback

remarcmij · 2017-11-29T15:45:19Z

-• Closures
-• Promises
+• Structure for a basic SPA
+• XHTTP Requests


XMLHttpRequests

remarcmij · 2017-11-29T15:45:58Z

- [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)
+#### XHTTP requests
+- XHTTP requests: https://www.kirupa.com/html5/making_http_requests_js.htm


XMLHttpRequests

remarcmij · 2017-11-29T15:54:43Z

+

 ```
 If you feel you need preparation for the test we recommend to do the following:


Do we still do tests? I haven't seen it mentioned in the curriculum overview.

nope we don't I'm working on making take home tests

remarcmij · 2017-11-29T16:13:51Z

->[Here](https://github.com/HackYourFuture/JavaScript/tree/master/Week7/README.md) you find the readings you have to complete before the eighth lecture.
+```
+Topics discussed this week:
+• Object Oriented Programming


Do we teach about ES6 Classes in this lecture? If so, we need to add it to the homework. This would also allow practicing this.

remarcmij · 2017-11-29T16:17:52Z

+- More about [closures](https://www.reddit.com/r/learnjavascript/comments/1v6n8p/closure_explain_likei_am_in_high_school/?st=ixsp0mbe&sh=5526d150)
+- A VERY popular [StackOverflow article](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work)
+
+## Step 4: Scope and Closures


Closures is now done in Week 6.

remarcmij · 2017-11-29T16:20:47Z

+```js
+for (var i = 0; i < 3; i++) {
+      setTimeout(function() { alert(i); }, 1000 + i);
+}


This example no longer make sense as replacing the var by let (as we are recommending all along) no longer gives the problem for which a closure is a solution.

remarcmij · 2017-11-29T16:23:55Z

+addSix(21); // returns 27
+```
+
+4. You will need to create an HTML document out of the below snippet to run the below code. A hint - the code is syntactically correct but doesn't do what you would expect. Can you see why and fix it?


Because we changed var by let in the for loop the expected problem no longer occurs!

remarcmij · 2017-11-29T16:29:38Z

+```js
+1.
+
+let sum = calculateSum(2, 6);


What are we asking here? There is no async involved unless we require student to bolt on some setTimeout. If the idea is to pass the result in a callback, e.g.

calculateSum(2, 6, result => { console. log(result) })

then we shouldn't call it async because it is synchronous, but perhaps callback style(?)

remarcmij · 2017-11-29T16:30:16Z

+
+2.
+
+let results = $.getJSON('http://myapi.com');


It looks like this expects jQuery. We're not doing jQuery, right?

remarcmij · 2017-11-29T16:36:54Z


- Create at least 2 issues (bug / feature / code improvement) on another teams github repository. Do this in pairs. 
-  Solve the issue proposed by another students in your github repo. More info [here](https://hackyourfuture.slack.com/files/michahell/F31BX1XT6/Merging_a_local_branch_into_master)
+- (one of your team mates should) Fork this repository: https://github.com/HackYourFuture/PromisessObjectsAndStringRendering


This repo defines an object constructor using prototype definitions. Do we want to use ES6 classes instead?

I will ask Mauro to update it. It couls also be part of the assignment that the students have to make it work with es6 classes

remarcmij

This is a major piece of work, Maartje. I think we need to review the REVIEWS because they no longer match up with the new schedule. I'm happy to help with that if you like. Some homework assignments also need to be updated. See my comments.

mkruijt

I agree Jim, some assignments need to be updated. My plan was to merge the new planning and create issues that maybe some of the teachers can help with. This will also make te process a bit faster. It would be awesome if you can help with the reviews, I like your idea of splitting up the topics, so if we rearrange things again it is easier to link to the review. Please don't feel obliged to do all of the review topics, it would be already really helpful if you can make a start with this.

mkruijt · 2017-12-05T12:13:35Z

-|8.|• (re)writing data structures (in JSON)<br> • Closures <br>• Promises <br>|[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)<br>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)|
-
+|0.|Preparation for your first JavaScript session|[Pre-reading](/Week0/README.md) + [CLI Reading Week 1](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md)|-|-|


right, that makes sense. Would you like to help me with this @remarcmij ? Or maybe make a start?

mkruijt · 2017-12-05T12:14:33Z

+|2.|• Intro JavaScript (What is it, where can you use it for)<br>• Variables [var, let, const]<br>• Basic Data types [Strings, Numbers, Arrays, Booleans]<br>• Operators <br>• Naming conventions|[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|[Review](/master/Week2/REVIEW.md)|
+|3.|• Git work flow :smiling_imp:<br>• Advanced data types [Objects] <br>• Conditions <br>• Statements vs Expressions<br> • Loops (for/while)<br>• Functions |[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)|[Review](/Week3/REVIEW.md)|
+|4.|• Capturing user input <br>• Basic DOM manipulations[img src, innerHTML] <br>• Code debugging using the browser <br>• Code commenting <br>• Structuring code files |[Reading Week 4](/Week4/README.md)|[Homework Week 4](/Week4/MAKEME.md)|Review|
+|5.|• Functions + JSON/Arrays<br>• Array Manipulations<br>• JSON<br>• Map and filter<br>• Arrow functions |[Reading Week 5](/Week5/README.md)|[Homework Week 5](/Week5/MAKEME.md)|[Review](/Week5/REVIEW.MD)|


@joostlubach what do you think? You did this class last week. Is there some room for more ES6 or is it ok to do this in react?

mkruijt · 2017-12-05T12:16:25Z

+|4.|• Capturing user input <br>• Basic DOM manipulations[img src, innerHTML] <br>• Code debugging using the browser <br>• Code commenting <br>• Structuring code files |[Reading Week 4](/Week4/README.md)|[Homework Week 4](/Week4/MAKEME.md)|Review|
+|5.|• Functions + JSON/Arrays<br>• Array Manipulations<br>• JSON<br>• Map and filter<br>• Arrow functions |[Reading Week 5](/Week5/README.md)|[Homework Week 5](/Week5/MAKEME.md)|[Review](/Week5/REVIEW.MD)|
+|6.|• Closures <br>• Scope <br>• Events <br>• Callbacks|[Reading Week 6](/Week6/README.md)|[Homework Week 6](/Week6/MAKEME.md)|[Review](/Week6/REVIEW.md)|
+|7.|• Object Oriented Programming <br>• Code flow (order of execution) <br>• Async VS Sync|[Reading Week 7](/Week7/README.md)|[Homework Week 7](/Week7/MAKEME.md)|[Review](/Week7/REVIEW.md)|


I will aks Mauro to elaborate on what to teach during the OOP class. I agree it is now to generalised. He is teaching this class on Sunday so I will add more specific guidelines after

mkruijt · 2017-12-05T12:30:21Z

- https://www.freecodecamp.com/challenges/make-object-properties-private
+14. Add a property to the object you just created that contains the languages that they have taught you.

+15. 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. 


mkruijt · 2017-12-05T12:35:24Z

-6. Here are two functions that look like they do the something similar but they print different results. Please explain what's going on here.
+- Collect two days' worth of tasks.
+- Convert the task durations to hours, instead of minutes.
+- Filter out everything that took two hours or more


yes it means remove, I will clarify it.

mkruijt · 2017-12-05T12:59:03Z

+

 ```
 If you feel you need preparation for the test we recommend to do the following:


nope we don't I'm working on making take home tests

mkruijt · 2017-12-05T13:00:20Z


- Create at least 2 issues (bug / feature / code improvement) on another teams github repository. Do this in pairs. 
-  Solve the issue proposed by another students in your github repo. More info [here](https://hackyourfuture.slack.com/files/michahell/F31BX1XT6/Merging_a_local_branch_into_master)
+- (one of your team mates should) Fork this repository: https://github.com/HackYourFuture/PromisessObjectsAndStringRendering


I will ask Mauro to update it. It couls also be part of the assignment that the students have to make it work with es6 classes

remarcmij

Let's merge

mkruijt and others added 30 commits November 10, 2017 16:05

added branch versionOne which holds the old planning

0c576b5

first attempt new planning and changing homwork accordinly

bfdb81c

fix table

15cddd7

attempt2 fix table

c5b1d9e

yep almost there

b92dd6e

table is fixed

86f82d0

added new planning to master

772bfea

table fix

0ae128a

fixed homework week3/4

5fa9ac4

Updated MAKEME for Week 4

db0fff0

corrected typo

dca9da8

Merge pull request #2 from remarcmij/planningClass12

c871d1c

Planning class12

some progress in changing shedule

cfd2c79

added homework week4

883ea44

homework week4

819c344

moved resources

1f8ecab

added homwork week5

13269c7

fixed links and steps in homework

3e90399

fixed indentation

ab35356

fixed indentation?

d0f36bb

fixed indentation?

d06363e

fixed indentation?

465d245

fixed indentation?

0cb5426

fixed indentation?

2a37d2e

Removed reduce dependencies in assigments

53e6799

Merge pull request #4 from remarcmij/planningClass12

9b8ab7e

Removed `reduce` dependencies in assigments

finished planningclass12

1cfb702

Merge branch 'planningClass12' of github.com:mkruijt/JavaScript into …

0f0b7be

…planningClass12 remove reduce

removed reduce from homework

11f2ffc

fixed planning class13

fb8cab2

remarcmij reviewed Nov 29, 2017

View reviewed changes

mkruijt added 4 commits December 4, 2017 14:28

added video's git and cli and implemented a part of Jim's feedback

386c84d

added right reference to feedback

5fbd33c

implemeted Jim's feedbacl

f673863

last changes according to jim's feedback

a593368

mkruijt commented Dec 5, 2017

View reviewed changes

remarcmij approved these changes Dec 5, 2017

View reviewed changes

mkruijt merged commit fa0d024 into HackYourFuture:master Dec 6, 2017


		9. Change the function `vehicle` to use the list of question 7. 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.)



		```
		If you feel you need preparation for the test we recommend to do the following:

Uh oh!

Conversation

mkruijt commented Nov 29, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

remarcmij Nov 29, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

remarcmij Dec 5, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

remarcmij Nov 29, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

remarcmij Nov 29, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

remarcmij Nov 29, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

remarcmij Nov 29, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

remarcmij Nov 29, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

remarcmij Nov 29, 2017 •

edited

Loading

remarcmij Dec 5, 2017 •

edited

Loading

remarcmij Nov 29, 2017 •

edited

Loading

remarcmij Nov 29, 2017 •

edited

Loading

remarcmij Nov 29, 2017 •

edited

Loading

remarcmij Nov 29, 2017 •

edited

Loading

remarcmij Nov 29, 2017 •

edited

Loading

remarcmij Nov 29, 2017 •

edited

Loading

remarcmij left a comment •

edited

Loading