From 0c576b52ac6bb9764ec273f6650cfbac073bb0e9 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Fri, 10 Nov 2017 16:05:16 +0100 Subject: [PATCH 001/257] added branch versionOne which holds the old planning --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 423710fec..fe64871ff 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ +*Please note: this is the JavaScript planning/curriculum that was used at HackYourFuture Amsterdam until 10 November 2017. We now use a different planning which can be found in the mater branch.** + >Please help us improve and share your feedback! If you find better tutorials or links, please share them by opening a Pull Request. # HackYourJavaScript From bfdb81c07d58bcce0a30a25f3a7c9c4104be117e Mon Sep 17 00:00:00 2001 From: mkruijt Date: Fri, 10 Nov 2017 16:51:55 +0100 Subject: [PATCH 002/257] first attempt new planning and changing homwork accordinly --- README.md | 32 +++------ Week2/README.md | 10 ++- Week3/MAKEME.md | 37 ++++++----- Week3/README.md | 1 - Week4/MAKEME.md | 29 ++++++--- Week4/README.md | 2 + Week5/MAKEME.md | 168 +++++++++++++++++++++++------------------------- Week5/README.md | 5 ++ Week6/MAKEME.md | 130 +++++++++++++++++++++---------------- Week7/MAKEME.md | 145 ++++++++++++++++++----------------------- Week8/MAKEME.md | 90 ++++++++++++++++++++++---- Week9/MAKEME.md | 90 ++++---------------------- 12 files changed, 371 insertions(+), 368 deletions(-) diff --git a/README.md b/README.md index fe64871ff..90cbd5186 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,9 @@ -*Please note: this is the JavaScript planning/curriculum that was used at HackYourFuture Amsterdam until 10 November 2017. We now use a different planning which can be found in the mater branch.** +*Please note: this is the JavaScript planning/curriculum only for class12, we changed the topic order while they already started JavaScript, because of this reason an additional planning has been made for them* >Please help us improve and share your feedback! If you find better tutorials or links, please share them by opening a Pull Request. # HackYourJavaScript - - Here you can find course content and homework for the JavaScript 1,2 and 3 modules |Week|Topic|Read|Homework|Review| @@ -13,30 +11,20 @@ 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, Booleans]
• 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.|• [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :balloon:
• 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.|• 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.|• 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)|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](https://github.com/HackYourFuture/JavaScript/blob/master/Week5/REVIEW.MD)| -|6.|• Async VS Sync
• Polling
• Structure for a basic SPA
TEST :boom:|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6/MAKEME.md)|Review| -|7.|• Third Git Session (Git Workflow :muscle:)
• Map, reduce, filter
• Arrow functions|[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](https://github.com/HackYourFuture/JavaScript/blob/master/Week7/REVIEW.md)| -|8.|• (re)writing data structures (in JSON)
• Closures
• Promises
|[Reading Week 8](https://github.com/HackYourFuture/JavaScript/tree/master/Week8/README.md)|[Homework Week 8](https://github.com/HackYourFuture/JavaScript/tree/master/Week8/MAKEME.md)|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)| - +|3.|- Capturing user input
- Basic DOM manipulations [img src, innerHTML]
- Code debugging using the browser
- Code commenting
- Structuring code files
- Scope
-State|[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.| Git Session with Unmesh :smiling_imp:|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/Week4)|[JS](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/MAKEME.md)|Review| +|5.| - Functions + JSON/Arrays
- Array Manipulations
- JSON +
- Map and filter
- Arrow functions|[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](https://github.com/HackYourFuture/JavaScript/blob/master/Week5/REVIEW.MD)| +|6.|- Closures
- Events
- Callbacks
- Git [work flow](https://github.com/HackYourFuture/Git/blob/master/Lecture-3.md)|[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.|- (Object Oriented Programming)
- Code flow (order of execution)
+- Async VS Sync|[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](https://github.com/HackYourFuture/JavaScript/blob/master/Week7/REVIEW.md)| +|8.|- Structure for a basic SPA
- XHTTP Requests
- API calls|[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.|- (re)writing data structures (in JSON)
- Promises|[Reading Week 9](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/README.md)|[Homework Week 9](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/REVIEW.md)| __Kind note:__ We expect you to __always__ come prepared to the class on Sunday. -## Module goals: - -### Week 1-3: -A basic program with multiple functions (reacting to user input) - -### Week 4-6: -A tool capable of loading a JSON file and representing it in the DOM - -### Week 7-9: -A web app with external data source using at least one API 《〠_〠》 - ### Overall A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](https://github.com/HackYourFuture/JavaScript/tree/master/fundamentals) and research/ ask for help (Slack!) with the concepts that are not entirely clear. diff --git a/Week2/README.md b/Week2/README.md index 56f7cd01a..3ed862abe 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -2,6 +2,14 @@ ``` In week three we will discuss the following topics: +- Capturing user input +- Basic DOM manipulations [img src, innerHTML] +- Code debugging using the browser +- Code commenting +- Structuring code files + + + • CLI (Command Line Interface) • Closures • Scope @@ -12,8 +20,6 @@ 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/) -- [MDN Closures](https://developer.mozilla.org/en/docs/Web/JavaScript/Closures) - [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype) diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index 955701d54..89834b982 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -2,7 +2,6 @@ >[Here](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/README.md) you find the readings you have to complete before the fourth lecture. -Go here to see the [Git Homework](https://github.com/HackYourFuture/Git/blob/master/Lecture-1.md) ## 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:) @@ -23,34 +22,34 @@ Your fellow students have provided you with feedback in Trello. Your teachers ha _Deadline Monday_ -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. +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: String and Array challenges _Deadline Wednesday_ -1. Strings! - 1.1 Let's consider the following string: `let myString = "hello,this,is,a,difficult,to,read,sentence"` - 1.2 Add the string to your file and console.log it. - 1.4 Console.log the length of `myString`. - 1.5 The comma's make that the sentence is quite hard to read. Find a way to remove the comma's from the sting and replace them with a spaces - 1.6 Console.log `myString` to see if you succeeded. +1. Strings! + 1. Let's consider the following string: `let myString = "hello,this,is,a,difficult,to,read,sentence"` + 2. Add the string to your file and console.log it. + 3. Console.log the length of `myString`. + 4. The comma's make that the sentence is quite hard to read. Find a way to remove the comma's from the sting and replace them with a spaces + 5. Console.log `myString` to see if you succeeded. -2. Arrays! +2. Arrays! consider the following array: ```js let favoriteAnimals = ['blowfish', 'capricorn', 'giraffe']; ``` - 2.6 Add a statement that adds Mauro's favorite animal (turtle) to the existing array - 2.7 Log your new array! - 2.8 Now add Jim's favorite animal to the array, its a meerkat, but make sure it will be placed after 'blowfish' and before 'capricorn'. - 2.9 Write a console.log statement that explains in words _you think_ the new value of the array is. - 2.10 Log your new new array! - 2.11 Log the length of the array, add a message: "The array has a length of: "(here you should show the length of the array) - 2.12 Jason does not like giraffes, delete this animal from the array - 2.13 Again log your new array. - 2.14 Now if unlike Jim, you don't like meerkats and you want to delete it from the array, but you don't know the position or the `index` of the item in the array, how can you find it? - 2.15 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) + 1. Add a statement that adds Mauro's favorite animal (turtle) to the existing array + 2. Log your new array! + 3. Now add Jim's favorite animal to the array, its a meerkat, but make sure it will be placed after 'blowfish' and before 'capricorn'. + 4. Write a console.log statement that explains in words _you think_ the new value of the array is. + 5. Log your new new array! + 6. Log the length of the array, add a message: "The array has a length of: "(here you should show the length of the array) + 7. Jason does not like giraffes, delete this animal from the array + 8. Again log your new array. + 9. Now if unlike Jim, you don't like meerkats and you want to delete it from the array, but you don't know the position or the `index` of the item in the array, how can you find it? + 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: diff --git a/Week3/README.md b/Week3/README.md index 413fb2d0d..f4dc563f8 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -13,7 +13,6 @@ In week four we will discuss the following topics: ### Here are resources that we like you to read as a preparation for the coming lecture. -- [JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) (MDN) - In you next lecture **Unmesh** will give you your first Git session, please look through the [GIT](https://github.com/HackYourFuture/Gitrepository) and read the learning goals. - Chrome DevTools [Debugging](https://developers.google.com/web/tools/chrome-devtools/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3) diff --git a/Week4/MAKEME.md b/Week4/MAKEME.md index 2e080dc1e..3b6918ff2 100644 --- a/Week4/MAKEME.md +++ b/Week4/MAKEME.md @@ -5,17 +5,30 @@ ## Step 0: Give yourself (or your neighbour) a little tap on the shoulder, you've made it to JS2! :muscle: +#### GIT +Go here to see the [Git Homework](https://github.com/HackYourFuture/Git/blob/master/Lecture-1.md) + +### Step 4: Git branching homework + +1) Use the unmeshvrije/MyFirst repository (the one you cloned) for this homework. + +2) Make a branch. + +3) Name it YOUR-GITHUB-NAME-dev + +4) Create a file commands.txt in your branch. + +5) Add bash commands that you have learnt with descriptions + +6) Then git add, commit and push them in a remote branch. + +**Do not merge the changes to master branch. + +** Do not make any changes to master branch. + ## Step 1: Some Challenges 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 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 `