## Planning
@@ -49,4 +76,4 @@ If you feel ready for the next challenge, click [here](https://www.github.com/Ha
_The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it :)_
-
+
## 1. What is a web browser?
A web browser is software that allows you to access websites.
### How a browser works
-In your journey into becomeing a web developer it's important to know the tools you'll be using intimately. One such is the browser, which will be used to display your websites. In the following resources you'll learn about the many parts any web browser consists of and what their use is:
+In your journey into becoming a web developer it's important to know the tools you'll be using intimately. One such is the browser, which will be used to display your websites. In the following resources you'll learn about the many parts any web browser consists of and what their use is:
- [How a web browser functions](https://www.youtube.com/watch?v=z0HN-fG6oT4)
- [How do web browsers work?](https://medium.com/@monica1109/how-does-web-browsers-work-c95ad628a509)
@@ -110,11 +117,11 @@ body.appendChild(newParagraph);
In this example we're executing the following steps:
-1. We're first selecting the body: this is always necessary, as we can only add or remove elements from the body of the document
-2. Secondly, we're creating a new DOM element: a `` element -3. Thirdly, we're injecting content into the element -4. Fourthly, we give our element a background color -5. Finally, we add the `
` element in the body +1. Selecting the body: this is always necessary, as we can only add or remove elements from the body of the document +2. Creating a new DOM element: a paragraph i.e. a `
` element +3. Injecting content into the newly create paragraph element +4. Setting the background color for the newly create paragraph element +5. Adding the newly create paragraph element element to the body Test this code out by copying and pasting it in the Developer Console of your browser. After you've pressed the Enter/Return key you will find your new `
` at the end of the page!
@@ -143,7 +150,7 @@ Take a look at this code:
```js
const body = document.querySelector('body');
-body.addEventListener('click', function() {
+body.addEventListener('click', function () {
body.style.background = 'black';
});
```
diff --git a/Week2/README.md b/Week2/README.md
index 808de176e..6709d9098 100644
--- a/Week2/README.md
+++ b/Week2/README.md
@@ -13,6 +13,12 @@ These are the topics for week 2:
3. Array Functions
4. Event Loop
+## 0. Video Lectures
+
+Your teacher Wilgert has made video lectures for this week's material. You can find them here: [Videos 11 - 21](https://www.youtube.com/playlist?list=PLVYDhqbgYpYU-7_oyPBkUuuis5bL1Dk8n)
+
+
+
## 1. Synchronous vs. asynchronous
### Synchronous
@@ -60,7 +66,7 @@ function higherOrderFunction(anotherFunction) {
// Example 2
function anotherHigherOrderFunction() {
- return function() {
+ return function () {
return;
};
}
diff --git a/Week2/js-exercises/ex4-collectiveAge.js b/Week2/js-exercises/ex4-collectiveAge.js
index d17275cdc..1ab2bd1f5 100644
--- a/Week2/js-exercises/ex4-collectiveAge.js
+++ b/Week2/js-exercises/ex4-collectiveAge.js
@@ -30,4 +30,4 @@ const hackYourFutureMembers = [{
},
];
-console.log("The collective age of the HYF team is: " + collectiveMembers(hackYourFutureMembers));
\ No newline at end of file
+console.log("The collective age of the HYF team is: " + collectiveAge(hackYourFutureMembers));
diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md
index 21e861b76..e3a993961 100644
--- a/Week3/MAKEME.md
+++ b/Week3/MAKEME.md
@@ -17,7 +17,7 @@ Let's get familiar with basic Javascript concepts, with interactive exercises! C
> Inside of your `JavaScript2` fork, navigate to the folder `Week3`. Then to the folder `js-exercises`. In this folder you will find separate files for each exercise. Please put your code in the correct file.
-**Exercise 1: Add six**
+**Exercise 1: Add nine**
Declare a function called `createBase`. The function takes a number as a parameter and return a closure, that adds a number to the base number argument.
@@ -34,10 +34,10 @@ function createBase() {
// Put here your logic...
}
-const addSix = createBase(6);
+const addNine = createBase(6);
// Put here your function calls...
-addSix();
+addNine();
```
**Exercise 2: Take out the duplicates**
diff --git a/Week3/README.md b/Week3/README.md
index 439539c98..c4a41dd4f 100644
--- a/Week3/README.md
+++ b/Week3/README.md
@@ -14,6 +14,12 @@ These are the topics for week 3:
- Why do we need closures?
4. Thinking like a programmer II
+## 0. Video Lectures
+
+Your teacher Wilgert has made video lectures for this week's material. You can find them here: [Videos 22 - 30](https://www.youtube.com/playlist?list=PLVYDhqbgYpYU-7_oyPBkUuuis5bL1Dk8n)
+
+
+
## 1. Scope
One of the central concepts in programming is the idea of `context`: the meaning of any particular thing is only determined in relation to its direct surroundings. Let's take language for example. If I say the following sentence:
@@ -122,7 +128,7 @@ The second time is called `run-time`, which is where it actually executes your c
For more research, check out the following:
-- [What is Hoisting in JavaScript?](https://medium.com/javascript-in-plain-english/https-medium-com-javascript-in-plain-english-what-is-hoisting-in-javascript-a63c1b2267a1h)
+- [What is Hoisting in JavaScript?](https://medium.com/javascript-in-plain-english/https-medium-com-javascript-in-plain-english-what-is-hoisting-in-javascript-a63c1b2267a1)
## 3. Closures
@@ -140,7 +146,7 @@ The execution context roughly equates to the 'environment' a function executes i
Checkout the following to learn more about why this is important:
-- [What is the Execution Context & Stack in JavaScript?](http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/)
+- [What is the Execution Context & Stack in JavaScript?](https://blog.bitsrc.io/understanding-execution-context-and-execution-stack-in-javascript-1c9ea8642dd0)
### Why do we need closures?
diff --git a/Week3/js-exercises/ex1-AddSix.js b/Week3/js-exercises/ex1-AddSix.js
index a801a72fd..67e8bb63f 100644
--- a/Week3/js-exercises/ex1-AddSix.js
+++ b/Week3/js-exercises/ex1-AddSix.js
@@ -6,7 +6,7 @@ Declare a function called `createBase`.The function takes a number as a paramete
return a closure, that adds a number to the base number argument.
Call the function three times. The return values should be:
- 15, 24, 36
+ 15, 24, 33
*/
@@ -17,4 +17,3 @@ function createBase( /* ???? */ ) {
const addSix = createBase(6);
// Put here your function calls...
-console.log(addSix());
\ No newline at end of file
diff --git a/Week3/js-exercises/ex2-RemoveDuplicates.js b/Week3/js-exercises/ex2-RemoveDuplicates.js
index aa9d0d7d0..f1eea3b8c 100644
--- a/Week3/js-exercises/ex2-RemoveDuplicates.js
+++ b/Week3/js-exercises/ex2-RemoveDuplicates.js
@@ -1,21 +1,35 @@
/**
** Exercise 2: The lottery machine **
+ Write a function called removeDuplicates. This function accept an array as an argument
+ does not return anything but removes any duplicate elements from the array.
-Write a function called removeDuplicates. This function accept an array as an argument
-does not return anything but removes any duplicate elements from the array.
+ The function should remove duplicate elements. So the result should be:
+ ['a', 'b', 'c', 'd', 'e', 'f']
- The function should remove duplicate elements.So the result should be:
+ */
-
+/**
+ * Checks your solution against correct solution
+ * @param {Array} array your solution
+ * @returns boolean
*/
+function checkSolution(array) {
+ const solution = ['a', 'b', 'c', 'd', 'e', 'f'];
+ if (array == null) return false;
+ if (array.length !== solution.length) return false;
+ for (let i = 0; i < solution.length; i++) {
+ if (array[i] !== solution[i]) return false;
+ }
+ return true;
+}
// WRITE YOUR FUNCTION HERE
const letters = ['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c', 'b'];
+removeDuplicates(letters);
-removeDuplicates(letter);
-
-if (letters === ['a', 'b', 'c', 'd', 'e', 'f'])
- console.log("Hooray!")
\ No newline at end of file
+if (checkSolution(letters)) {
+ console.log("Hooray!");
+}
\ No newline at end of file
diff --git a/assets/array-methods-exercises.js b/assets/array-methods-exercises.js
new file mode 100644
index 000000000..29e0adc9a
--- /dev/null
+++ b/assets/array-methods-exercises.js
@@ -0,0 +1,22 @@
+const flowers = [
+ { name: 'tulip', color: 'red' },
+ { name: 'dandelion', color: 'yellow' },
+ { name: 'rose', color: 'red' },
+ { name: 'daisy', color: 'white' },
+ { name: 'lily', color: 'white' },
+];
+
+// Exercise 1
+// use `map` to make the first letter of al flowers a capital.
+// so 'tulip' becomes 'Tulip' etc.
+
+// Exercise 2
+// use `filter` to get only the flowers with a name of 4 characters
+
+// Exercise 3
+// use `reduce` to create an object that contains
+// the total number of flowers for each color
+
+// Exercise 4 (bonus)
+// use `some` or `every` in combination with another array method
+// to find out if all flowers with five letters are red
diff --git a/assets/sync-async.js b/assets/sync-async.js
new file mode 100644
index 000000000..8ccda654d
--- /dev/null
+++ b/assets/sync-async.js
@@ -0,0 +1,80 @@
+const greenGrocer = {
+ buyApples: function(quantity) {
+ return quantity + ' apples';
+ },
+ buyTomatoes: function(quantity) {
+ return quantity + ' tomatoes';
+ },
+ buyCauliflower: function(quantity) {
+ return quantity + ' cauliflower';
+ },
+};
+
+const cheeseShop = {
+ buyCheese: function(type, weight) {
+ this.cutCheese(type, weight);
+
+ return weight + 'gr ' + type + ' cheese';
+ },
+
+ cutCheese: function(type, weight) {
+ const stopTime = Date.now() + 100;
+ while (Date.now() < stopTime);
+ },
+};
+
+const bakery = {
+ buyBread: function(breadReadyCallback, type, quantity) {
+ setTimeout(function() {
+ breadReadyCallback(quantity + ' ' + type);
+ }, 1000);
+ },
+};
+
+function visitGreengrocer() {
+ console.log('=== Greengrocer ===');
+
+ const beforeBuy = Date.now();
+
+ const fruitsAndVegetables = [
+ greenGrocer.buyApples(2),
+ greenGrocer.buyTomatoes(2),
+ greenGrocer.buyCauliflower(1),
+ ];
+
+ const timeTaken = (Date.now() - beforeBuy).toFixed(2);
+
+ console.log('You bought: ', fruitsAndVegetables);
+ console.log('This took: ' + timeTaken + 'ms\n');
+}
+
+function visitCheeseShop() {
+ console.log('=== Cheese Shop ===');
+ const beforeBuy = Date.now();
+
+ const cheese = cheeseShop.buyCheese('belegen', 500);
+
+ const timeTaken = (Date.now() - beforeBuy).toFixed(2);
+
+ console.log('You bought: ' + cheese + '');
+ console.log('This took: ' + timeTaken + 'ms\n');
+}
+
+function visitBakery() {
+ console.log('=== Bakery ===');
+ const beforeBuy = Date.now();
+
+ const breadReady = function(bread) {
+ const timeTaken = (Date.now() - beforeBuy).toFixed(2);
+ console.log('--- Callback from Bakery ---');
+ console.log('You bought: ' + bread + '');
+ console.log('This took: ' + timeTaken + 'ms\n');
+ };
+
+ bakery.buyBread(breadReady, 'fijn volkoren', 1);
+ console.log(`We'll call you back!\n`);
+}
+
+visitGreengrocer(); // ?.
+visitBakery(); // ?.
+visitCheeseShop(); // ?.
diff --git a/assets/weekflow.png b/assets/weekflow.png
new file mode 100644
index 000000000..9da097126
Binary files /dev/null and b/assets/weekflow.png differ
diff --git a/assets/wilgert.png b/assets/wilgert.png
new file mode 100644
index 000000000..f9c1b703c
Binary files /dev/null and b/assets/wilgert.png differ
diff --git a/test/README.md b/test/README.md
index cb8f4dae6..fa484357c 100644
--- a/test/README.md
+++ b/test/README.md
@@ -1,11 +1,9 @@
# JavaScript1 and JavaScript2 Test
-You’ll be doing a comprehension test **on paper**. It will be about the most important JavaScript concepts you’ve learned about so far (JavaScript1 and JavaScript2).
+You’ll be doing a comprehension test. It will be about the most important JavaScript concepts you’ve learned about so far (JavaScript1 and JavaScript2).
## Practical information
-- The test will start at **10.30 until 11.30**. The door will open at 10.15. **Be on time!**
-- It will be done on paper so please bring a pencil and eraser.
-- There will be 5 questions
+Practical information about the test will be shared in the class channel prior to the test. Keep an eye on it!
## Purpose of the test
The purpose of this exam is to test your comprehension of JavaScript 1 and JavaScript 2 concepts.
@@ -29,9 +27,9 @@ These are the most important concepts that will be tested:
Advice on how to optimally prepare:
- Find out 2 things about each concepts listed above: (1) how does the basic structure look and (2) what is the most common use case.
-- Ask questions through Slack to your teachers and/or your classmates
+- Be familiar with creating a new project repository in github. For the test you will get some files to edit and they will need to be uploaded to your github.
-- Practice coding WITHOUT Google and on paper. This is very important because the test will be on paper. You can practise this by making your old homework again; but than on paper. Make sure that you can write down functions and loops without syntax errors.
+- Ask questions through Slack to your teachers and/or your classmates
- Practice for understanding (why something is the case), NOT just for repetition’s sake (and hoping ‘you will understand it one day’).
@@ -42,7 +40,6 @@ Advice on how to optimally prepare:
## During the test
Advise on how to make a test:
- **Look for low hanging fruit**. Which of the assignments is easiest for you to do? Tackle that one first.
-- Make sure that all **syntax is correct** when writing code on paper. For instance: don’t forget brackets or semicolons.
- **If you get stuck in an assignment, move on to the next one**. You can always come back later if time permits.
- After finishing an assignment, read the question again to **make sure you actually gave an answer to the question**.
- Before handing in the test, read it all over again to pick out the small mistakes. **Double check your work!**
@@ -50,19 +47,8 @@ Advise on how to make a test:
## Sample questions
1. Write and call a function that creates and appends a
tag to the
of an HTML file. Make use of the already predefined DOM methods createElement() and appendChild(). The innerText of theshould be “hello HackYourFuture!”. -2. Correct the code to make it work, by filling in the grey boxes: -``` -…………… multiplyNumbers( …….. , …….. ) { - const …………… = …….. * …….. ; - return …………… ; - …. - multiplyNumbers( 6 , …………… -// Return value should be 30 -``` -3. Transform the given array of strings named letters into a new array with numbers (for example: `numbers = [0, 1, 2, 3 ]` ), by creating a new function called lettersToNumbers. Log the new array to the console. Return the new array. Make use of the map() array function. +2. Transform the given array of strings named letters into a new array with numbers (for example: `numbers = [0, 1, 2, 3 ]` ), by creating a new function called lettersToNumbers. Log the new array to the console. Return the new array. Make use of the map() array function. `const letters = [ ‘a’ , ‘b’ , ‘c’ , ‘d’ ];` - - If there’s anything unclear please let us know. Also, if any of you need additional support, now is the moment to let us know as we could pair you up with someone to answer any questions you may have.