diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 1c22490..1176529 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,104 @@ -# JavaScript -This repository contains all the material for the HackYourFuture JavaScript module +> If you are following the HackYourFuture curriculum we recommend you to start with module 1: [HTML/CSS/GIT](https://github.com/HackYourFuture/HTML-CSS). To get a complete overview of the HackYourFuture curriculum first, click [here](https://github.com/HackYourFuture/curriculum). + +> Please help us improve and share your feedback! If you find better tutorials +> or links, please share them by [opening a pull request](https://github.com/HackYourFuture/JavaScript1/pulls). + +# Module #2 - JavaScript + +![JavaScript](./assets/javascript.png) + +In this module you'll make a start into wonderful world of programming. We will be using the programming language `JavaScript` to do so. You'll learn about the basic building blocks of programming: `loops`, `functions`, `control flow` and more. Consider these as the ABC's of programming, without them it's impossible to write working software! + +You'll be learning two main things: + +1. **Fundamental concepts in programming**. While we're using JavaScript to illustrate these concepts, it's important to keep in mind that what you will learn is applicable to **any** programming language. They might differ in syntax (a fancy term for the arrangement of words in a language in order for it to make sense), but the functionality will be the same: a loop will always be a loop. + +This should be your mindset when you're learning concepts: **I'm learning how to become a software developer that can adjust to any language used, because I know what the underlying principles and concepts are**. + +2. **How to think like a programmer**. In one sentence this means: knowing how to solve problems computationally. Let's split that up in two parts: `how to solve problems` refers to the ability to identify issues and find effective solutions. `computationally` refers to the ability to think in logical steps that the computer can understand and execute. + +This should be your mindset when you're learning how to think : **I'm learning how to think in logical steps, identifying cause and effect, and always looking for solutions**. + +## Before you start! + +### Install some new software! + +In order to test your JavaScript code, you'll be using software that will execute your files from the command line. This software is called [Node.js](https://nodejs.org/en/download/). Download the Long-Term Support (LTS) version for your specific operating system. + +After you've installed it, go to your command line interface. Type in the following command: + +``` +node --version +``` + +It should show you version `v12.16.1` or higher. + +### First 3 weeks + +The first three weeks of this module you will be moving at your own pace. That means that we have split up the material into three sections, but feel free to go faster or slower depending on if you feel comfortable you understood the material or not. These weeks are very important, so put in the time to practice as much as possible. The homework for week 3 covers all the material in the other weeks as by then you will know all the basic building blocks that JavaScript has to offer. + +After those weeks we will be going into the more tricky parts of JavaScript and start solving more complex and realistic problems that you will be facing as a developer. + +### New way of working! + +Starting from this module we will be using a class repository in GitHub to get used to some of the features of GitHub as well. When the first week starts you will be invited to a new GitHub repository and will be given a first issue there to enter your information. + +You will also be handing in your homework by creating issues there, starting from week 3. + +## Learning goals + +In order to successfully complete this module you will need to master the following: + +- Have an idea of what `computer programming` is +- Know the basic building blocks of `JavaScript` +- Correctly write and use `variables`, `functions` and `loops` +- Understand the `control flow` + +## How to use this repository + +### Repository content + +This repository consists of 2 essential parts for each week: + +1. `README`: this document contains all the required theory you need to understand **while** working on the homework. It contains the list of concepts that you will want to study this week and points you to your study book to read all about them. This is the **first thing** you should start with every week +2. `MAKEME`: this document contains the instructions for each week's practical tasks / homework. Start with the exercises rather quickly, so that you can ground the concepts you read about earlier. In the first two weeks we do not expect you to hand in any homework as the online resources already check the code automatically, from week 3 our mentors will start giving you feedback on your homework. + +### How to study + +Let's say you are just starting out with the JavaScript module. This is what you do... + +1. The week always starts on **Wednesday**. First thing you'll do is open the `README.md` for that week. For the first week of `JavaScript`, that would be [Week1 Reading](/Week1/README.md) +2. You spend **Wednesday** and **Thursday** going over the resources and try to get a basic understanding of the concepts. In the meanwhile, you'll also implement any feedback you got on last week's homework (from the HTML-CSS module) +3. On **Friday** you start with the homework, found in the `MAKEME.md`. For the first week of `JavaScript`, that would be [Week1 Homework](/Week1/MAKEME.md) +4. You spend **Friday** and **Saturday** playing around with the exercises and write down any questions you might have +5. **DEADLINE 1**: You'll submit any questions you might have before **Saturday 23.59**, in the class channel +6. On **Sunday** you'll attend class. It'll be of the Q&A format, meaning that there will be no new material. Instead your questions shall be discussed and you can learn from others +7. You spend **Monday** and **Tuesday** finalizing your homework +8. **DEADLINE 2**: You submit your homework to the right channels (GitHub) before **Tuesday 23.59**. If you can't make it on time, please communicate it with your mentor +9. Start the new week by going back to point 1! + +In summary: + +![Weekflow](assets/weekflow.png) + +To have a more detailed overview of the guidelines, please read [this document](https://docs.google.com/document/d/1JUaEbxMQTyljAPFsWIbbLwwvvIXZ0VCHmCCN8RaeVIc/edit?usp=sharing) or ask your mentor/class on Slack! + + +## Planning + +| Week | Topic | Reading Materials | Homework | +| ---- | ---------------------------------------------------------- | --------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | +| 1. | Variables, Variable Types, Operators, Objects, Arrays | [Reading W1](/Week1/README.md) | [Homework W1](/Week1/MAKEME.md) | +| 2. | Loops, Control Flow, If/Else, Incremental coding | [Reading W2](/Week2/README.md) | [Homework W2](/Week2/MAKEME.md) | +| 3. | Functions, Scope, DRY principle | [Reading W3](/Week3/README.md) | [Homework W3](/Week3/MAKEME.md) | +| 4. | Higher Order Functions, Array functions, Closures | [Reading W4](/Week4/README.md) | [Homework W4](/Week4/MAKEME.md) | + +## Finished? + +Did you finish the module? Good job! You're doing great! + +If you feel ready for the next challenge, click [here](https://www.github.com/HackYourFuture/Browsers) to go to Browsers! + +_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 :)_ + +Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md new file mode 100644 index 0000000..f3246b3 --- /dev/null +++ b/Week1/MAKEME.md @@ -0,0 +1,23 @@ +# Homework JavaScript Week 1 + +Practice, practice, practice. This week you are not handing in any homework, but are going to practice as much javascript as you can. Play around with the exercises mentioned below, remember that you can copy the code into [JS Tutor](http://pythontutor.com/javascript.html#mode=edit) to step through the code. Or look at it in the debugger in the browser/vscode. + +## Practice the concepts + +Before we learn how to build actual applications, we first need to gain experience using JavaScript in a computational way. This teaches us how to think like a programmer, and gives us more experience with the language itself. + +In the following exercises you'll learn how to use different JavaScript concepts to solve common computational problems. + +- [Learn-js](https://www.learn-js.org/). Do all the `Learn the basics` exercises. +- [Codecademy: Introduction to JavaScript](https://www.codecademy.com/learn/introduction-to-javascript/modules/learn-javascript-introduction). Do all the exercises (#1 to #10). +- [jshero.net](https://www.jshero.net/en/success.html). Do the first 5 exercises. +- [HYF Belgium](https://github.com/HackYourFutureBelgium/debugging/tree/master/isolate). Our friends over at HYF Belgium have made some really nice exercises. Do exercises 00 through 04 of these. You can clone the [repository](https://github.com/HackYourFutureBelgium/debugging) and work on it locally. + +The above should give you a nice basis. If you have extra time and are still a little unsure, have a look at the following: +- [FreeCodeCamp: Introduction to JavaScript](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript). Do at least 20 exercises, you can choose whichever ones you feel are challenging enough. +- There is a practice-exercises folder in this week's repository that is filled with exercises to try out. The solutions are in a separate folder so you can check if you did it correctly. Clone this repository to your computer and have a go! + +## Done early? + +Have a look at some of the week2 concepts already and try to do more exercises in the links above. The first weeks of the JavaScript modules are very important as understanding the basics will make the rest of the curriculum that much easier to follow. So keep reading and writing code! + diff --git a/Week1/README.md b/Week1/README.md new file mode 100644 index 0000000..814c278 --- /dev/null +++ b/Week1/README.md @@ -0,0 +1,40 @@ +# Reading Material JavaScript Week 1 + +## Agenda + +These are the topics for week 1. + +1. [What is programming?](https://study.hackyourfuture.net/#/programming/README) + - Software + - What is a programming language? +2. [What is web development?](https://study.hackyourfuture.net/#/the-internet/web-development) + - Web development vs. software development + - Web development vs. web design + - Website vs. web application +3. [What is JavaScript?](https://study.hackyourfuture.net/#/javascript/README) +4. [What are variables?](https://study.hackyourfuture.net/#/javascript/variables) + - The keywords: let, const, var + - values +5. [What are values?](https://study.hackyourfuture.net/#/javascript/values) +6. [Statements vs. Expressions](https://study.hackyourfuture.net/#/javascript/statements-vs-expressions) +7. [Operators](https://study.hackyourfuture.net/#/javascript/operators) +8. Tools to help understand code + - [JSTutor](https://study.hackyourfuture.net/#/tools/jstutor) + - [The browser debugger](https://study.hackyourfuture.net/#/tools/debugging) +9. Testing code + - [Assertion](https://study.hackyourfuture.net/#/testing/assertion) + +## Week goals +All of the detailed information about every concept is in your study book. The following goal explanation will link you to the correct place to get studying. Read through the goal description once to get an idea of what you will be learning, then go through the different links (either from the agenda or this goal list). + +This week is all about getting you started in the world of JavaScript. For that we have to go a little broad and first explain the difference between what you have been doing until now (very visual, one line does one thing coding) to actually programming. Start by opening your study book to the [What is programming](https://study.hackyourfuture.net/#/programming/README) section and reading through it to get a feel for the world you are going to embark into. Once you know what programming is it is time to learn about the programmer niche this curriculum is built for which is [Web development](https://study.hackyourfuture.net/#/the-internet/web-development). Now let's talk about JavaScript, which is the programming language the whole rest of the curriculum will be done in. First read up on what JavaScript is in your studybook [here](https://study.hackyourfuture.net/#/javascript/README). + +Time to start learning the language with the first building blocks: variables! Have a look at what variables are [here](https://study.hackyourfuture.net/#/javascript/variables) and what values are [here](https://study.hackyourfuture.net/#/javascript/values). Then let's go over some syntax with the difference between statements and expressions [here](https://study.hackyourfuture.net/#/javascript/statements-vs-expressions). And finally let's look at what we can do with variables and values by using what's called operators. Read about them [here](https://study.hackyourfuture.net/#/javascript/operators). + +To help learn the language we also want to introduce you to some tools that you can use to look under the hood of your code. Have a look at the JSTutor explanation [here](https://study.hackyourfuture.net/#/tools/jstutor) and how you can use it. Also have a look at the first part of the debugging explanation [here](https://study.hackyourfuture.net/#/tools/debugging). You won't understand a lot of what's there yet, but debugging is so important we want you to look at it early. Read through it once and play around a bit in the debugger. We will be telling you to revisit the debugging section over the next few weeks as you start learning more and more about what is possible. + +Lastly we want to introduce the first steps to testing code with some code you will find in your exercises. Have a look at what assertion is [here](https://study.hackyourfuture.net/#/testing/assertion), the `console.assert` lines in your practice exercises uses this to check that your code does the right thing. + +## Finished? + +Are you finished with going through the materials? You're doing great! If you feel ready to get practical, click [here](./MAKEME.md). If you have finished the exercises, then start working on week 2! The first 3 weeks of this module cover all the basic building blocks of JavaScript and getting familiar with them is of the utmost importance! diff --git a/Week1/practice-exercises/1-hello-world.js b/Week1/practice-exercises/1-hello-world.js new file mode 100644 index 0000000..e345354 --- /dev/null +++ b/Week1/practice-exercises/1-hello-world.js @@ -0,0 +1,12 @@ +/** + * Write a statement, using the console.log() function. It should fulfill the following requirements: + * It takes a string as an argument + * The string should contain the message "Hello world!" + * Execute the file 10 times, each time using the phrase in different languages + * + * For example: + * Halo, dunia! // Indonesian + * Ciao, mondo! // Italian + * Hola, mundo! // Spanish + */ + diff --git a/Week1/practice-exercises/2-syntax-error.js b/Week1/practice-exercises/2-syntax-error.js new file mode 100644 index 0000000..a0005dd --- /dev/null +++ b/Week1/practice-exercises/2-syntax-error.js @@ -0,0 +1,6 @@ +/** + * Consider this code, it has a syntax error in it. + * Fix it so that when running this file it shows the message 'I'm awesome!' + */ + +console.log('I'm awesome'!; \ No newline at end of file diff --git a/Week1/practice-exercises/3-log-number.js b/Week1/practice-exercises/3-log-number.js new file mode 100644 index 0000000..c29038c --- /dev/null +++ b/Week1/practice-exercises/3-log-number.js @@ -0,0 +1,23 @@ +/** + * Follow the commented steps to write a piece of code. + * Then run it to see if you are correct! + */ + +// 1. Declare your variable numberX. Do not initialize it (which means, don't give it a starting value) yet + + +// 2. Add a console.log statement that explains in words what you think the value of x is + + +// 3. Add a console.log statement that logs the value of numberX. + + +// 4. Now initialize your variable numberX with a number (also called an integer in computer science terms) + + +// 5. Next, add a console.log statement that explains what you think the value of numberX is + + +// 6. Add a console.log statement that logs the value of numberX + + diff --git a/Week1/practice-exercises/4-log-string.js b/Week1/practice-exercises/4-log-string.js new file mode 100644 index 0000000..8e38cb3 --- /dev/null +++ b/Week1/practice-exercises/4-log-string.js @@ -0,0 +1,23 @@ +/** + * Follow the commented steps to write a piece of code. + * Then run it to see if you are correct! + */ + +// 1. Declare a variable myString and assign a string to it. Use your full name, including spaces, as the content for the string. + + +// 2. Write a console.log statement in which you explain in words what you think the value of the string is. + + +// 3. Now console.log the variable myString. + + +// 4. Now reassign to the variable myString a new string. + + +// 5. Just like what you did before write a console.log statement that explains in words what you think will be logged to the console. + + +// 6. Now console.log myString again. + + diff --git a/Week1/practice-exercises/5-round-number.js b/Week1/practice-exercises/5-round-number.js new file mode 100644 index 0000000..602c5f1 --- /dev/null +++ b/Week1/practice-exercises/5-round-number.js @@ -0,0 +1,17 @@ +/** + * Follow the commented steps to write a piece of code + */ + + // 1. Declare a variable z and assign the number 7.25 to it. + + + // 2. Write a console.log statement in which you log the value of z. + + + // 3. Declare another variable a that has the value of z but rounded to the nearest integer. + + + // 4. Write a console.log statement in which you log the value of a. + + + // 5. So now we have z and a find a way to compare the two values and log true if a is greater than z or false if a is smaller than z. diff --git a/Week1/practice-exercises/6-log-animals.js b/Week1/practice-exercises/6-log-animals.js new file mode 100644 index 0000000..65c2e41 --- /dev/null +++ b/Week1/practice-exercises/6-log-animals.js @@ -0,0 +1,25 @@ +/** + * Follow the commented steps to write a piece of code. + */ + +// 1. Declare variable and assign to it an empty array. Make sure that the name of the variable indicates it contains more than 1 item. For example items instead of item. + + +// 2. Write a console.log statement that explains in words what you think the value of the array is. + + +// 3. Write a console.log statement that logs the array. + + +// 4. Create a new variable with an array that has 3 of your favorite animals, each in a different string. Make sure the name of the variables says something about what the variable contains. + + +// 5. Write a console.log statement that logs the second array. + + +// 6. Add a statement that adds another string ("Piglet)" to the array of animals. + + +// 7. Write a console.log statement that logs the second array! + + diff --git a/Week1/practice-exercises/7-log-string-length.js b/Week1/practice-exercises/7-log-string-length.js new file mode 100644 index 0000000..b1ee540 --- /dev/null +++ b/Week1/practice-exercises/7-log-string-length.js @@ -0,0 +1,9 @@ +/** + * Follow the commented steps to write a piece of code. + */ + +// 1. Declare a variable called mySentence and initialize it with the following string: "Programming is so interesting!". + + +// 2. Figure out (using Google) how to get the length of mySentence. Then write a console.log statement to log the length of mySentence. + diff --git a/Week1/practice-exercises/solutions/1-hello-world.js b/Week1/practice-exercises/solutions/1-hello-world.js new file mode 100644 index 0000000..4853c8e --- /dev/null +++ b/Week1/practice-exercises/solutions/1-hello-world.js @@ -0,0 +1,10 @@ +console.log('Hello world!'); // English +console.log('Привет, мир!'); // Russian +console.log('Hallo Wereld'); // Dutch +console.log('أهلان و سهلان يا دنيا'); // Arabic +console.log('Bonjour le monde'); // French +console.log('Сәлем Әлем'); // Kazakh +console.log('Selam Dünya'); // Turkish +console.log('你好，世界') // Chinese +console.log('こんにちは世界'); // Japanese +console.log('Salamu, Dunia'); // Swahili \ No newline at end of file diff --git a/Week1/practice-exercises/solutions/2-syntax-error.js b/Week1/practice-exercises/solutions/2-syntax-error.js new file mode 100644 index 0000000..b5a6589 --- /dev/null +++ b/Week1/practice-exercises/solutions/2-syntax-error.js @@ -0,0 +1 @@ +console.log("I'm awesome'!"); \ No newline at end of file diff --git a/Week1/practice-exercises/solutions/3-log-number.js b/Week1/practice-exercises/solutions/3-log-number.js new file mode 100644 index 0000000..ff6b240 --- /dev/null +++ b/Week1/practice-exercises/solutions/3-log-number.js @@ -0,0 +1,18 @@ +// 1. Declare your variable numberX. Do not initialize it (which means, don't give it a starting value) yet +let numberX; + +// 2. Add a console.log statement that explains in words what you think the value of x is +console.log('I think numberX will be undefined, because we have not given it a value'); + +// 3. Add a console.log statement that logs the value of numberX. +console.log(numberX); + +// 4. Now initialize your variable numberX with a number (also called an integer in computer science terms) +numberX = 4; + +// 5. Next, add a console.log statement that explains what you think the value of numberX is +console.log('I think numberX will now be 4 as I have explicitely set it to 4'); + +// 6. Add a console.log statement that logs the value of numberX +console.log(numberX); + diff --git a/Week1/practice-exercises/solutions/4-log-string.js b/Week1/practice-exercises/solutions/4-log-string.js new file mode 100644 index 0000000..0badf9e --- /dev/null +++ b/Week1/practice-exercises/solutions/4-log-string.js @@ -0,0 +1,18 @@ +// 1. Declare a variable myString and assign a string to it. Use your full name, including spaces, as the content for the string. +let myString = 'John Doe'; + +// 2. Write a console.log statement in which you explain in words what you think the value of the string is. +console.log('I think the value of the string is John Doe as I assigned it immediately'); + +// 3. Now console.log the variable myString. +console.log(myString); + + +// 4. Now reassign to the variable myString a new string. +myString = 'Jane'; + +// 5. Just like what you did before write a console.log statement that explains in words what you think will be logged to the console. +console.log('I think the value of the string is Jane as I reassigned it'); + +// 6. Now console.log myString again. +console.log(myString); \ No newline at end of file diff --git a/Week1/practice-exercises/solutions/5-round-number.js b/Week1/practice-exercises/solutions/5-round-number.js new file mode 100644 index 0000000..c7139a9 --- /dev/null +++ b/Week1/practice-exercises/solutions/5-round-number.js @@ -0,0 +1,18 @@ +/** + * Follow the commented steps to write a piece of code + */ + + // 1. Declare a variable z and assign the number 7.25 to it. +const z = 7.25; + + // 2. Write a console.log statement in which you log the value of z. +console.log(z); + + // 3. Declare another variable a that has the value of z but rounded to the nearest integer. +const a = Math.round(z); + + // 4. Write a console.log statement in which you log the value of a. +console.log(a); + + // 5. So now we have z and a find a way to compare the two values and log true if a is greater than z or false if a is smaller than z. +console.log(a > z); \ No newline at end of file diff --git a/Week1/practice-exercises/solutions/6-log-animals.js b/Week1/practice-exercises/solutions/6-log-animals.js new file mode 100644 index 0000000..8641080 --- /dev/null +++ b/Week1/practice-exercises/solutions/6-log-animals.js @@ -0,0 +1,25 @@ +/** + * Follow the commented steps to write a piece of code. + */ + +// 1. Declare variable and assign to it an empty array. Make sure that the name of the variable indicates it contains more than 1 item. For example items instead of item. +const items = []; + +// 2. Write a console.log statement that explains in words what you think the value of the array is. +console.log('I think the items array will be an empty array as it has been initialised like that'); + +// 3. Write a console.log statement that logs the array. +console.log(items); + +// 4. Create a new variable with an array that has 3 of your favorite animals, each in a different string. Make sure the name of the variables says something about what the variable contains. +const animals = ['Dog', 'Cat', 'Mouse']; + +// 5. Write a console.log statement that logs the second array. +console.log(animals); + +// 6. Add a statement that adds another string ("Piglet)" to the array of animals. +animals.push('Piglet'); + +// 7. Write a console.log statement that logs the second array! +console.log(animals); + diff --git a/Week1/practice-exercises/solutions/7-log-string-length.js b/Week1/practice-exercises/solutions/7-log-string-length.js new file mode 100644 index 0000000..e4da70c --- /dev/null +++ b/Week1/practice-exercises/solutions/7-log-string-length.js @@ -0,0 +1,9 @@ +/** + * Follow the commented steps to write a piece of code. + */ + +// 1. Declare a variable called mySentence and initialize it with the following string: "Programming is so interesting!". +const mySentence = "Programming is so interesting!"; + +// 2. Figure out (using Google) how to get the length of mySentence. Then write a console.log statement to log the length of mySentence. +console.log(mySentence.length); diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md new file mode 100644 index 0000000..cc1df00 --- /dev/null +++ b/Week2/MAKEME.md @@ -0,0 +1,18 @@ +# Homework JavaScript Week 2 + +Practice, practice, practice. Same as week 1, you are not handing in any homework, but are going to practice as much javascript as you can. Play around with the exercises mentioned below, remember that you can copy the code into [jsTutor](http://pythontutor.com/javascript.html#mode=edit) to step through the code, or look at it in the debugger in the browser/vscode. + +## Practice the concepts + +In this section you will be doing interactive exercises, that will allow you to practice with the concepts you've learned about this week! Do as many as you need to feel comfortable with the concepts. + +- Do all parts of [Codecademy: Arrays](https://www.codecademy.com/courses/introduction-to-javascript/lessons/arrays) (Signup required!) +- Do 5 exercises of [FreeCodeCamp: Basic data structures](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-data-structures) +- [HYF Belgium](https://github.com/HackYourFutureBelgium/behavior-strategy-implementation/tree/master/isolate/). Our friends over at HYF Belgium have even more great exercises. Do 06, 08-14. You probably already have cloned this from last week, you can use the same one. +- [HYF Belgium #2](https://github.com/HackYourFutureBelgium/behavior-strategy-implementation/tree/master/isolate). HYF Belgium also has another module that has some exercises. Clone the [behaviour-strategy-implementation module](https://github.com/HackYourFutureBelgium/behavior-strategy-implementation) and do the `01-arrays` exercise. +- There is a practice-exercises folder in this week's repository that is filled with exercises to try out. The solutions are in a separate folder so you can check if you did it correctly. Clone this repository to your computer and have a go! + +## Done early? + +Have a look at some of the week3 concepts already and try to do more exercises in the links above. The first weeks of the JavaScript modules are very important as understanding the basics will make the rest of the curriculum that much easier to follow. So keep reading and writing code! + diff --git a/Week2/README.md b/Week2/README.md new file mode 100644 index 0000000..f7469a8 --- /dev/null +++ b/Week2/README.md @@ -0,0 +1,23 @@ +# Reading Material JavaScript1 Week 2 + +## Agenda + +These are the topics for week 2: + +1. [Conditional statements](https://study.hackyourfuture.net/#/javascript/conditional-statements) +2. [Loops](https://study.hackyourfuture.net/#/javascript/loops) +3. [Revisit debugging](https://study.hackyourfuture.net/#/tools/debugging) +4. [Naming conventions](https://study.hackyourfuture.net/#/programming/naming-conventions) + +## Week goals +All of the detailed information about every concept is in your study book. The following goal explanation will link you to the correct place to get studying. Read through the goal description once to get an idea of what you will be learning, then go through the different links and look at them in detail. + +This week we are going to go a little deeper and get some extra building blocks to work with. That way we can make some more interesting pieces of code that actually have some logic in them. At this point we can determine things with our values and manipulate them, but the real power of programming comes when we can make 'decisions' to do something different based on our value. That way we can actually build logic into our code! Read all about conditional statements [here](https://study.hackyourfuture.net/#/javascript/conditional-statements). Another cool thing we can do in JavaScript is repeat actions, we can do that using a concept called loops, read more about that [here](https://study.hackyourfuture.net/#/javascript/loops). + +There are a lot of things you can do with just these building blocks (next week you will get to know the last few to complete your arsenal). You will undoubtedly already have encountered the difficulty of reading code, and all the things we learned this week will make it even more difficult to follow. It is a good idea to revisit the debugging section with this new knowledge [here](https://study.hackyourfuture.net/#/tools/debugging). Although it is called debugging, a lot of the process of finding 'bugs' in your code is trying to understand what is happening in the code. So keep using the debugger to understand pieces of code! + +This is also the week we are going to start learning about best practices surrounding programming. These are general rules programmers follow so that code remains readable for others. The first will be about naming conventions, read more about that [here](https://study.hackyourfuture.net/#/programming/naming-conventions). It will mention the term `functions`, which you haven't learned about yet, but keep that in mind for next week when you will be introduced to them! + +## Finished? + +Are you finished with going through the materials? You're doing great! If you feel ready to get practical, click [here](./MAKEME.md). diff --git a/Week2/practice-exercises/1-remove-the-comma.js b/Week2/practice-exercises/1-remove-the-comma.js new file mode 100644 index 0000000..b71cffd --- /dev/null +++ b/Week2/practice-exercises/1-remove-the-comma.js @@ -0,0 +1,14 @@ +/** + * We want to remove the comma's in the given string (myString), replace them with a space and log it to the console. + * + * The end result should be: + * hello this is a difficult to read sentence + */ + +let myString = 'hello,this,is,a,difficult,to,read,sentence'; + + + +/* --- Code that will test your solution, do NOT change. Write above this line --- */ + +console.assert(myString === 'hello this is a difficult to read sentence', 'There is something wrong with your solution'); \ No newline at end of file diff --git a/Week2/practice-exercises/2-even-odd-reporter.js b/Week2/practice-exercises/2-even-odd-reporter.js new file mode 100644 index 0000000..6edf23e --- /dev/null +++ b/Week2/practice-exercises/2-even-odd-reporter.js @@ -0,0 +1,9 @@ +/** + * Report whether or not a number is odd/even! + * + * Create a for loop, that iterates from 0 to 20. + * Create a conditional statement that checks if the value of the counter variable is odd or even. + * If it's odd, log to the console The number [PUT_NUMBER_HERE] is odd!. + * If it's even, log to the console The number [PUT_NUMBER_HERE] is even!. + */ + diff --git a/Week2/practice-exercises/3-recipe-card.js b/Week2/practice-exercises/3-recipe-card.js new file mode 100644 index 0000000..24bcb54 --- /dev/null +++ b/Week2/practice-exercises/3-recipe-card.js @@ -0,0 +1,14 @@ +/** + * Ever wondered how to make a certain meal? Let's create a recipe list with JavaScript! + * + * Declare a variable that holds an empty object literal (your meal recipe). + * Give the object 3 properties: a title (string), a servings (number) and an ingredients (array of strings) property. + * Log each property out separately, using a loop (for, while or do/while) + * + * Expected result: + * + * Meal name: Omelette + * Serves: 2 + * Ingredients: 4 eggs, 2 strips of bacon, 1 tsp salt/pepper + */ + diff --git a/Week2/practice-exercises/4-reading-list.js b/Week2/practice-exercises/4-reading-list.js new file mode 100644 index 0000000..f535657 --- /dev/null +++ b/Week2/practice-exercises/4-reading-list.js @@ -0,0 +1,11 @@ +/** + * Keep track of which books you read and which books you want to read! + * + * Follow the steps: + * Declare a variable that holds an array of 3 objects, where each object describes a book and has properties for the title (string), author (string), and alreadyRead (boolean indicating if you read it yet). + * Loop through the array of books. + * For each book, log the book title and book author like so: "The Hobbit by J.R.R. Tolkien". + * Create a conditional statement to change the log depending on whether you read it yet or not. If you read it, log a string like You already read "The Hobbit" right after the log of the book details + * If you haven't read it log a string like You still need to read "The Lord of the Rings" + */ + diff --git a/Week2/practice-exercises/5-who-wants-a-drink.js b/Week2/practice-exercises/5-who-wants-a-drink.js new file mode 100644 index 0000000..f37f02b --- /dev/null +++ b/Week2/practice-exercises/5-who-wants-a-drink.js @@ -0,0 +1,11 @@ +/** + * You're at a party and you feel thirsty! However, you've got 5 friends who are also in need of a drink. Let's go get them a drink. + * + * Declare a variable that holds an empty array, called drinkTray. + * Create a loop that runs 5 times. On each iteration, push a drink into the drinkTray variable. The drinkTray can only hold at most two instances of the same drink type, for example it can only hold 2 colas, 2 lemonades, 2 waters. + * + * Log to the console: "Hey guys, I brought a [INSERT VALUES FROM ARRAY]!" (For example: "Hey guys, I brought a cola, cola, lemonade, lemonade, water!") + */ + +// There are 3 different types of drinks: +const drinkTypes = ['cola', 'lemonade', 'water']; \ No newline at end of file diff --git a/Week2/practice-exercises/solutions/1-remove-the-comma.js b/Week2/practice-exercises/solutions/1-remove-the-comma.js new file mode 100644 index 0000000..0839202 --- /dev/null +++ b/Week2/practice-exercises/solutions/1-remove-the-comma.js @@ -0,0 +1,14 @@ +/** + * We want to remove the comma's in the given string (myString), replace them with a space and log it to the console. + * + * The end result should be: + * hello this is a difficult to read sentence + */ + +let myString = 'hello,this,is,a,difficult,to,read,sentence'; + +myString = myString.split(',').join(' '); + +/* --- Code that will test your solution, do NOT change. Write above this line --- */ + +console.assert(myString === 'hello this is a difficult to read sentence', 'There is something wrong with your solution'); \ No newline at end of file diff --git a/Week2/practice-exercises/solutions/2-even-odd-reporter.js b/Week2/practice-exercises/solutions/2-even-odd-reporter.js new file mode 100644 index 0000000..520d16a --- /dev/null +++ b/Week2/practice-exercises/solutions/2-even-odd-reporter.js @@ -0,0 +1,16 @@ +/** + * Report whether or not a number is odd/even! + * + * Create a for loop, that iterates from 0 to 20. + * Create a conditional statement that checks if the value of the counter variable is odd or even. + * If it's odd, log to the console The number [PUT_NUMBER_HERE] is odd!. + * If it's even, log to the console The number [PUT_NUMBER_HERE] is even!. + */ + +for (let i = 0; i < 21; i++) { + if (i % 2 == 0) { + console.log(`The number ${i} is even!`); + } else { + console.log(`The number ${i} is odd!`); + } +} \ No newline at end of file diff --git a/Week2/practice-exercises/solutions/3-recipe-card.js b/Week2/practice-exercises/solutions/3-recipe-card.js new file mode 100644 index 0000000..4ae2b7a --- /dev/null +++ b/Week2/practice-exercises/solutions/3-recipe-card.js @@ -0,0 +1,17 @@ +const myRecipe = { + title: 'Omelette', + servings: 2, + ingredients: ['4 eggs', '2 strips of bacon', '1 tsp salt/pepper'], +}; + +for (let item in myRecipe) { + if (item == 'title') { + console.log(`Meal name: ${myRecipe[item]}`); + } else if (item == 'servings') { + console.log(`Serves: ${myRecipe[item]}`); + } else { + const ingredientList = myRecipe[item]; + + console.log(`Ingedients: ${ingredientList.join(', ')}`); + } +} \ No newline at end of file diff --git a/Week2/practice-exercises/solutions/4-reading-list.js b/Week2/practice-exercises/solutions/4-reading-list.js new file mode 100644 index 0000000..6d70fb3 --- /dev/null +++ b/Week2/practice-exercises/solutions/4-reading-list.js @@ -0,0 +1,27 @@ +const listOfBooks = [ + { + title: 'Hard Times', + author: 'Charles Dickens', + alreadyRead: true + }, + { + title: 'The Grapes of Wrath', + author: 'John Steinbeck', + alreadyRead: true + }, + { + title: 'The Fellowship of the Ring', + author: 'Peter Jackson', + alreadyRead: false + } +]; + +for (let bookIndex in listOfBooks) { + const book = listOfBooks[bookIndex]; + + if (book.alreadyRead) { + console.log(`${book.title} by ${book.author}. You already read "${book.title}".`); + } else { + console.log(`${book.title} by ${book.author}. You still need to read "${book.title}".`); + } +} \ No newline at end of file diff --git a/Week2/practice-exercises/solutions/5-who-wants-a-drink.js b/Week2/practice-exercises/solutions/5-who-wants-a-drink.js new file mode 100644 index 0000000..5db1ea2 --- /dev/null +++ b/Week2/practice-exercises/solutions/5-who-wants-a-drink.js @@ -0,0 +1,24 @@ +/** + * You're at a party and you feel thirsty! However, you've got 5 friends who are also in need of a drink. Let's go get them a drink. + * + * Declare a variable that holds an empty array, called drinkTray. + * Create a loop that runs 5 times. On each iteration, push a drink into the drinkTray variable. The drinkTray can only hold at most two instances of the same drink type, for example it can only hold 2 colas, 2 lemonades, 2 waters. + * + * Log to the console: "Hey guys, I brought a [INSERT VALUES FROM ARRAY]!" (For example: "Hey guys, I brought a cola, cola, lemonade, lemonade, water!") + */ + +// There are 3 different types of drinks: +const drinkTypes = ['cola', 'lemonade', 'water']; +const drinkTray = []; + +// This is one way of doing it, there are many more. It hopefully showcases a nice use case of the double for loop +// It could also have been written with a while loop that would be a little more efficient +for (let i = 0; i < drinkTypes.length; i++) { + for (let j = 0; j < 2; j++) { + if (drinkTray.length < 5) { + drinkTray.push(drinkTypes[i]); + } + } +} + +console.log(`Hey guys, I brought a ${drinkTray.join(', ')}!`); \ No newline at end of file diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md new file mode 100644 index 0000000..f255c63 --- /dev/null +++ b/Week3/MAKEME.md @@ -0,0 +1,21 @@ +# Homework JavaScript Week 3 +# Homework JavaScript Week 3 + +This will be the first week you are expected to hand in some homework when we combine all of the concepts you have been practicing the last 3 weeks. + +## **Todo list** + +1. Practice the concepts +2. Homework exercises + +## **1. Practice the concepts** + +In this section you will be doing interactive exercises that will allow you to practice with the concepts you've learned about this week. In the first course you'll learn about functions, the structure and how they're used. They are a fundamental part of understanding programming and you should become very familiar with them! Do as many of the things in the following list to feel comfortable with the concepts. + +- [Codecademy: Functions ](https://www.codecademy.com/courses/introduction-to-javascript/lessons/functions) +- [HYF Belgium](https://github.com/HackYourFutureBelgium/debugging/tree/master/isolate). Our friends over at HYF Belgium have even more great exercises. Do 15,16,17. You probably already have cloned this from last week, you can use the same one. +- There is a practice-exercises folder in this week's repository that is filled with exercises to try out. The solutions are in a separate folder so you can check if you did it correctly. Clone this repository to your computer and have a go! + +## **2. Homework exercises** + +It is time to combine everything we have learned the past couple of weeks and get some feedback from experienced developers. This will be the first week you are working with the homework repository so reserve some time to set it up. This week we expect you to do the exercises in the corresponding module/week folder (JavaScript / Week 3). Have a look at your class repository on how to get the homework repository set up and how to hand in the homework. diff --git a/Week3/README.md b/Week3/README.md new file mode 100644 index 0000000..eb39ad4 --- /dev/null +++ b/Week3/README.md @@ -0,0 +1,20 @@ +# Reading Material JavaScript Week 3 + +## Agenda + +These are the topics for week 3: + +1. [Functions](https://study.hackyourfuture.net/#/javascript/functions) +2. [Scope](https://study.hackyourfuture.net/#/javascript/scope) +3. [DRY Principle](https://study.hackyourfuture.net/#/programming/dont-repeat-yourself) + +## Week goals +This week is the last week of explaining all the basic building blocks that JavaScript offers for you to work with. The last one is called functions, read all about them [here](https://study.hackyourfuture.net/#/javascript/functions). Functions bring along with them a concept called the scope that you may have encountered a bit last week but we want to explicitely explain now. Read about scope [here](https://study.hackyourfuture.net/#/javascript/scope). + +These things will take the power of what you can do to another level, as it allows you to group a certain set of lines of code into a single 'action' to take. Making it reusable in other places as well helping you organise your code, which will help a lot when you start writing more and more code. This also brings us to another principle of programming that we want you to get into the habit of doing, that is the DRY (Don't Repeat Yourself) principle. Read about that [here](https://study.hackyourfuture.net/#/programming/dont-repeat-yourself)! + +It is time to combine everything you have learned and start practicing them vigorously. Have a look at the exercises [here](./MAKEME.md) and try to make as many of them as you can. This week there will be homework to do and hand in, so don't forget to do that! + +## Finished? + +Are you finished with going through the materials? Give yourself a pat on the back because you rock! When you feel ready to get practical, click [here](./MAKEME.md). diff --git a/Week3/practice-exercises/1-dog-years.js b/Week3/practice-exercises/1-dog-years.js new file mode 100644 index 0000000..2b2b5ba --- /dev/null +++ b/Week3/practice-exercises/1-dog-years.js @@ -0,0 +1,23 @@ +/** + * You know how old your dog is in human years, but what about dog years? Let's calculate it! + * + * Write a function named calculateDogAge. + * It takes 1 argument: your (fictional) puppy's age (number). + * Calculate your dog's age based on the conversion rate of 1 human year to 7 dog years. + * Return a string: "Your doggie is [CALCULATED_VALUE] years old in dog years!" + * Call the function three times with different sets of values. + * + * Expected output: + * calculateDogAge(1); // Returns "Your doggie is 7 years old in dog years!" + * calculateDogAge(2); // Returns "Your doggie is 14 years old in dog years!" + * calculateDogAge(3); // Returns "Your doggie is 21 years old in dog years!" + */ + + + + +/* --- Code that will test your solution, do NOT change. Write above this line --- */ + +console.assert(calculateDogAge(1) === "Your doggie is 7 years old in human years!", 'The solution does not work for calculateDogAge(1)'); +console.assert(calculateDogAge(2) === "Your doggie is 14 years old in human years!", 'The solution does not work for calculateDogAge(2)'); +console.assert(calculateDogAge(3) === "Your doggie is 21 years old in human years!", 'The solution does not work for calculateDogAge(3)'); \ No newline at end of file diff --git a/Week3/practice-exercises/2-type-checker.js b/Week3/practice-exercises/2-type-checker.js new file mode 100644 index 0000000..0842987 --- /dev/null +++ b/Week3/practice-exercises/2-type-checker.js @@ -0,0 +1,10 @@ +/** + * Create a function that fulfills the following requirements: + * + * Takes in 2 arguments + * Check the data type of each + * Compares each data type + * Logs to the console the message 'SAME TYPE' if they are the same type. If they are different types log 'Not the same....' + */ + + \ No newline at end of file diff --git a/Week3/practice-exercises/3-fortune-teller.js b/Week3/practice-exercises/3-fortune-teller.js new file mode 100644 index 0000000..ab473ce --- /dev/null +++ b/Week3/practice-exercises/3-fortune-teller.js @@ -0,0 +1,15 @@ +/** + * Why pay a fortune teller when you can just program your fortune yourself? + * + * Write a function named tellFortune. + * It takes 4 arrays as arguments: number of children (number), partner's name (string), geographic location (string), job title (string). + * Randomly select values from the arrays. + * Return a string: "You will be a [JOB_TITLE] in [LOCATION], married to [PARTNER_NAME] with [NUMBER_KIDS] kids." + * Call the function 3 times, by passing the arrays as the argument. + */ + + const numChildren = [0, 1, 2, 3, 4]; + const partnerNames = ['John', 'Saeed', 'Jane', 'Marwa', 'Kim']; + const locations = ['France', 'The Netherlands', 'Russia', 'South Africa', 'Singapore']; + const jobs = ['Frontend developer', 'Product owner', 'Scrum master', 'CTO', 'Backend developer']; + diff --git a/Week3/practice-exercises/4-shopping-cart.js b/Week3/practice-exercises/4-shopping-cart.js new file mode 100644 index 0000000..1dd627f --- /dev/null +++ b/Week3/practice-exercises/4-shopping-cart.js @@ -0,0 +1,19 @@ +/** + * + * Let's do some grocery shopping! We're going to get some things to cook dinner with. However, you like to spend your money and always buy too many things. So when you have more than 3 items in your shopping cart the first item gets taken out. + * + * Write a function named addToShoppingCart + * It takes 1 argument: a grocery item (string) + * Add grocery item to shoppingCart. If the amount of items is more than 3 remove the first one in the array + * Loops through the array in order to list out the items + * Return a string: "You bought [LIST_OF_GROCERY_ITEMS]!" + */ + +const shoppingCart = ['bananas', 'milk']; + + + +// Expected output +addToShoppingCart('chocolate'); // Returns "You bought bananas, milk, chocolate!" +addToShoppingCart('waffles'); // Returns "You bought milk, chocolate, waffles!" +addToShoppingCart('tea'); // Returns "You bought chocolate, waffles, tea!" \ No newline at end of file diff --git a/Week3/practice-exercises/5-total-cost.js b/Week3/practice-exercises/5-total-cost.js new file mode 100644 index 0000000..8a57a77 --- /dev/null +++ b/Week3/practice-exercises/5-total-cost.js @@ -0,0 +1,20 @@ +/** + * You want to buy a couple of things from the supermarket to prepare for a party. After scanning all the items the cashier wants to give you the total price, but the machine is broken! Let's write her a function that does it for her instead! + * + * Write a function called calculateTotalPrice + * It takes 1 argument: an object that contains properties that only contain number values + * Loop through the object and add all the number values together + * Return a string: "Total: €[TOTAL_PRICE_ITEMS]" + */ + +const cartForParty = { + beer: 1.45, + chips: 0.99, + hulaHoop: 3.66, + hats: 2.32, + cake: 3.99, +} + + +// Expected result: +console.log(calculateTotalPrice(cartForParty)); // Returns "Total: €12.41" \ No newline at end of file diff --git a/Week3/practice-exercises/solutions/1-dog-years.js b/Week3/practice-exercises/solutions/1-dog-years.js new file mode 100644 index 0000000..ee970bd --- /dev/null +++ b/Week3/practice-exercises/solutions/1-dog-years.js @@ -0,0 +1,24 @@ +/** + * You know how old your dog is in human years, but what about dog years? Let's calculate it! + * + * Write a function named calculateDogAge. + * It takes 1 argument: your (fictional) puppy's age (number). + * Calculate your dog's age based on the conversion rate of 1 human year to 7 dog years. + * Return a string: "Your doggie is [CALCULATED_VALUE] years old in human years!" + * Call the function three times with different sets of values. + * + * Expected output: + * calculateDogAge(1); // Returns "Your doggie is 7 years old in human years!" + * calculateDogAge(2); // Returns "Your doggie is 14 years old in human years!" + * calculateDogAge(3); // Returns "Your doggie is 21 years old in human years!" + */ + +const calculateDogAge = (age) => { + return `Your doggie is ${age * 7} years old in human years!`; +} + +/* --- Code that will test your solution, do NOT change. Write above this line --- */ + +console.assert(calculateDogAge(1) === "Your doggie is 7 years old in human years!", 'The solution does not work for calculateDogAge(1)'); +console.assert(calculateDogAge(2) === "Your doggie is 14 years old in human years!", 'The solution does not work for calculateDogAge(2)'); +console.assert(calculateDogAge(3) === "Your doggie is 21 years old in human years!", 'The solution does not work for calculateDogAge(3)'); \ No newline at end of file diff --git a/Week3/practice-exercises/solutions/2-type-checker.js b/Week3/practice-exercises/solutions/2-type-checker.js new file mode 100644 index 0000000..7a2206c --- /dev/null +++ b/Week3/practice-exercises/solutions/2-type-checker.js @@ -0,0 +1,16 @@ +/** + * Create a function that fulfills the following requirements: + * + * Takes in 2 arguments + * Check the data type of each + * Compares each data type + * Logs to the console the message 'SAME TYPE' if they are the same type. If they are different types log 'Not the same....' + */ + +const compareTypes = (parameter1, parameter2) => { + if (typeof parameter1 == typeof parameter2) { + console.log('SAME TYPE'); + } else { + console.log('Not the same...'); + } +} \ No newline at end of file diff --git a/Week3/practice-exercises/solutions/3-fortune-teller.js b/Week3/practice-exercises/solutions/3-fortune-teller.js new file mode 100644 index 0000000..008268f --- /dev/null +++ b/Week3/practice-exercises/solutions/3-fortune-teller.js @@ -0,0 +1,19 @@ +const numChildren = [0, 1, 2, 3, 4]; +const partnerNames = ['John', 'Saeed', 'Jane', 'Marwa', 'Kim']; +const locations = ['France', 'The Netherlands', 'Russia', 'South Africa', 'Singapore']; +const jobs = ['Frontend developer', 'Product owner', 'Scrum master', 'CTO', 'Backend developer']; + +const getRandomElement = (arrayArgument) => { + return arrayArgument[Math.floor(Math.random() * arrayArgument.length)]; +} + +const tellFortune = (numberOfChildrenOptions, partnerNameOptions, locationOptions, jobTitleOptions) => { + const randomNumberOfChildren = getRandomElement(numberOfChildrenOptions); + const randomPartnerName = getRandomElement(partnerNameOptions); + const randomLocation = getRandomElement(locationOptions); + const randomJobTitle = getRandomElement(jobTitleOptions); + + console.log(`You will be a ${randomJobTitle} in ${randomLocation}, married to ${randomPartnerName} with ${randomNumberOfChildren} kids.`) +} + +tellFortune(numChildren, partnerNames, locations, jobs); \ No newline at end of file diff --git a/Week3/practice-exercises/solutions/4-shopping-cart.js b/Week3/practice-exercises/solutions/4-shopping-cart.js new file mode 100644 index 0000000..3feeab7 --- /dev/null +++ b/Week3/practice-exercises/solutions/4-shopping-cart.js @@ -0,0 +1,16 @@ +let shoppingCart = ['bananas', 'milk']; + +const addToShoppingCart = (item) => { + shoppingCart.push(item); + + if (shoppingCart.length > 3) { + shoppingCart.shift(); + } + + return `You bought ${shoppingCart.join(', ')}!`; +} + +// Expected output +console.log(addToShoppingCart('chocolate')); // Returns "You bought bananas, milk, chocolate!" +console.log(addToShoppingCart('waffles')); // Returns "You bought milk, chocolate, waffles!" +console.log(addToShoppingCart('tea')); // Returns "You bought chocolate, waffles, tea!" \ No newline at end of file diff --git a/Week3/practice-exercises/solutions/5-total-cost.js b/Week3/practice-exercises/solutions/5-total-cost.js new file mode 100644 index 0000000..67afac8 --- /dev/null +++ b/Week3/practice-exercises/solutions/5-total-cost.js @@ -0,0 +1,20 @@ +const cartForParty = { + beer: 1.45, + chips: 0.99, + hulaHoop: 3.66, + hats: 2.32, + cake: 3.99, +} + +const calculateTotalPrice = (object) => { + let sum = 0; + + for (let item in object) { + sum = sum + object[item]; + } + + return `Total: €${sum}`; +} + +// Expected result: +console.log(calculateTotalPrice(cartForParty)); // Returns "Total: €12.41" \ No newline at end of file diff --git a/Week4/MAKEME.md b/Week4/MAKEME.md new file mode 100644 index 0000000..ba306ad --- /dev/null +++ b/Week4/MAKEME.md @@ -0,0 +1,16 @@ +# Homework JavaScript Week 4 + +## **Todo list** + +1. Practice the concepts +2. Homework exercises + +## **1. Practice the concepts** + +Before we head into the homework exercises, it might be nice to do some interactive exercises first! In the following resource you'll find some exercises that'll teach you all about higher order and array functions! + +- [Learn JavaScript: Iterators](https://www.codecademy.com/learn/introduction-to-javascript/modules/learn-javascript-iterators) + +## **2. Homework exercises** + + This week we expect you to do the exercises in the corresponding module/week folder (JavaScript / Week 4). Have a look at your class repository on how to hand in the homework. \ No newline at end of file diff --git a/Week4/README.md b/Week4/README.md new file mode 100644 index 0000000..2bd45a3 --- /dev/null +++ b/Week4/README.md @@ -0,0 +1,22 @@ +# Reading Material JavaScript Week 4 + +## Agenda + +These are the topics for week 4: + +1. [Higher Order Functions](https://study.hackyourfuture.net/#/javascript/higher-order-functions) + - Array methods + - Arrow functions +2. [Closures](https://study.hackyourfuture.net/#/javascript/closures) + - Execution context + - Why do we need closures? + +## Week goals + +This week we are going to keep practicing coding and introducing a few more advanced topics that you will encounter. So a little less reading, more practicing! Firstly, higher order functions are a way functions are being used regularly in the real world, most notably in the methods `Array`'s provide us. Read all about it [here](https://study.hackyourfuture.net/#/javascript/higher-order-functions). Secondly, JavaScript has a thing called closures which you should know about. You will not encounter issues with them any time soon, but it is good to have in the back of your mind that this exists. So read all about them [here](https://study.hackyourfuture.net/#/javascript/closures). + +After that it is time to start practicing again, make as many exercises as you can in the list [here](./MAKEME.md) and don't forget to hand in your homework. There will also be a test coming up for this module. What and when will be announced in your class channel, so keep an eye on that as usual! The best way to prepare is to keep programming! + +## Finished? + +Are you finished with going through the materials? Give yourself a pat on the back because you rock! When you feel ready to get practical, click [here](./MAKEME.md). diff --git a/Week4/practice-exercises/1-refactor-double-even-numbers.js b/Week4/practice-exercises/1-refactor-double-even-numbers.js new file mode 100644 index 0000000..d526e8b --- /dev/null +++ b/Week4/practice-exercises/1-refactor-double-even-numbers.js @@ -0,0 +1,23 @@ +/** + * Consider this function. Let's refactor it so that it uses the 'map' and 'filter' functions that array gives us. + * + * The output should be the same, but the function should be easier to read + */ + +function doubleEvenNumbers(numbers) { + const newNumbers = []; + for (let i = 0; i < numbers.length; i++) { + if (numbers[i] % 2 === 0) { + newNumbers.push(numbers[i] * 2); + } + } + return newNumbers; +} + +const myNumbers = [1, 2, 3, 4]; +console.log(doubleEvenNumbers(myNumbers)); // Logs "[4, 8]" to the console + +/* --- Code that will test your solution, do NOT change. Write above this line --- */ + +console.assert(doubleEvenNumbers(myNumbers)[0] === 4); +console.assert(doubleEvenNumbers(myNumbers)[1] === 8); \ No newline at end of file diff --git a/Week4/practice-exercises/2-monday-worth.js b/Week4/practice-exercises/2-monday-worth.js new file mode 100644 index 0000000..23873ed --- /dev/null +++ b/Week4/practice-exercises/2-monday-worth.js @@ -0,0 +1,30 @@ +/** + * When you're a developer at a big company your Monday could look something like the mondayTasks array describes. + * + * Let's assume your hourly rate is €25. How much would you earn on that day? + * + * Write a program that finds out what your hourly rate on a Monday would be + * Use the map array function to take out the duration time for each task. + * Multiply each duration by a per-hour rate for billing and sum it all up. + * Output a formatted Euro amount, rounded to Euro cents, e.g: €11.34. + * Make sure the program can be used on any array of objects that contain a duration property with a number value + */ + +const mondayTasks = [ + { + name: 'Daily standup', + duration: 30, // specified in minutes + }, + { + name: 'Feature discussion', + duration: 120, + }, + { + name: 'Development time', + duration: 240, + }, + { + name: 'Talk to different members from the product team', + duration: 60, + }, +]; \ No newline at end of file diff --git a/Week4/practice-exercises/3-lemon-allergy.js b/Week4/practice-exercises/3-lemon-allergy.js new file mode 100644 index 0000000..e4d3793 --- /dev/null +++ b/Week4/practice-exercises/3-lemon-allergy.js @@ -0,0 +1,11 @@ +/** + * Your mom bought you a basket of fruit, because you're doing so well in HackYourFuture. How sweet of her! + * + * However, she forgot that you are allergic to lemons! Let's quickly dispose of them before you get an attack. + * + * Write a function + * Use the filter array function to take out the lemons + * Output a string that says: "My mom bought me a fruit basket, containing [array of fruits] !" + */ + +const fruitBasket = ['Apple', 'Lemon', 'Grapefruit', 'Lemon', 'Banana', 'Watermelon', 'Lemon']; diff --git a/Week4/practice-exercises/4-collective-age.js b/Week4/practice-exercises/4-collective-age.js new file mode 100644 index 0000000..30cbcfd --- /dev/null +++ b/Week4/practice-exercises/4-collective-age.js @@ -0,0 +1,17 @@ +/** + * Have you ever wondered how old the HackYourFuture team members are? Or better yet: what the collective age is? Let's find out! + * + * Write a program that calculates the combined age of every member + * Make use of the map function to get the ages + * It should contain a function that takes a callback + * The callback adds all the ages together and returns the number + * The main function should log the string "The collective age of the HYF team is: [number]" to the console, and afterwards return the number + */ + +const hackYourFutureMembers = [ + { name: 'Wouter', age: 33 }, + { name: 'Federico', age: 32 }, + { name: 'Rob', age: 36 }, + { name: 'Tjebbe', age: 22 }, +]; + diff --git a/Week4/practice-exercises/solutions/1-refactor-double-even-numbers.js b/Week4/practice-exercises/solutions/1-refactor-double-even-numbers.js new file mode 100644 index 0000000..7eaeb37 --- /dev/null +++ b/Week4/practice-exercises/solutions/1-refactor-double-even-numbers.js @@ -0,0 +1,17 @@ +/** + * Consider this function. Let's refactor it so that it uses the 'map' and 'filter' functions that array gives us. + * + * The output should be the same, but the function should be easier to read + */ + +function doubleEvenNumbers(numbers) { + return numbers.filter(number => number % 2 === 0).map(resultNumber => resultNumber * 2); +} + +const myNumbers = [1, 2, 3, 4]; +console.log(doubleEvenNumbers(myNumbers)); // Logs "[4, 8]" to the console + +/* --- Code that will test your solution, do NOT change. Write above this line --- */ + +console.assert(doubleEvenNumbers(myNumbers)[0] === 4); +console.assert(doubleEvenNumbers(myNumbers)[1] === 8); \ No newline at end of file diff --git a/Week4/practice-exercises/solutions/2-monday-worth.js b/Week4/practice-exercises/solutions/2-monday-worth.js new file mode 100644 index 0000000..39952d8 --- /dev/null +++ b/Week4/practice-exercises/solutions/2-monday-worth.js @@ -0,0 +1,32 @@ +const mondayTasks = [ + { + name: 'Daily standup', + duration: 30, // specified in minutes + }, + { + name: 'Feature discussion', + duration: 120, + }, + { + name: 'Development time', + duration: 240, + }, + { + name: 'Talk to different members from the product team', + duration: 60, + }, +]; + +const earnings = (tasks) => { + const hourlyRate = 25; + const durations = tasks.map(task => task.duration); + + const earning = durations.reduce((currentValue, duration) => { + console.log(duration); + return currentValue + (duration / 60 * hourlyRate); + }, 0); + + return `€${earning.toFixed(2)}`; +} + +console.log(earnings(mondayTasks)) \ No newline at end of file diff --git a/Week4/practice-exercises/solutions/3-lemon-allergy.js b/Week4/practice-exercises/solutions/3-lemon-allergy.js new file mode 100644 index 0000000..e73815c --- /dev/null +++ b/Week4/practice-exercises/solutions/3-lemon-allergy.js @@ -0,0 +1,9 @@ +const fruitBasket = ['Apple', 'Lemon', 'Grapefruit', 'Lemon', 'Banana', 'Watermelon', 'Lemon']; + +const removeLemons = (fruitList) => { + const fruitListWithoutLemons = fruitList.filter(fruit => fruit !== 'Lemon'); + + return `My mom bought me a fruit basket, container ${fruitListWithoutLemons.join(', ')}!`; +} + +console.log(removeLemons(fruitBasket)); diff --git a/Week4/practice-exercises/solutions/4-collective-age.js b/Week4/practice-exercises/solutions/4-collective-age.js new file mode 100644 index 0000000..b4e09d1 --- /dev/null +++ b/Week4/practice-exercises/solutions/4-collective-age.js @@ -0,0 +1,18 @@ +const hackYourFutureMembers = [ + { name: 'Wouter', age: 33 }, + { name: 'Federico', age: 32 }, + { name: 'Rob', age: 36 }, + { name: 'Tjebbe', age: 22 }, +]; + +const getAge = (member) => { + return member.age; +} + +const collectiveAge = (members) => { + return members.reduce((total, member) => { + return total + getAge(member); + }, 0); +} + +console.log('The collective age of the HYF team is: ' + collectiveAge(hackYourFutureMembers)); \ No newline at end of file diff --git a/assets/black-box-input-output.png b/assets/black-box-input-output.png new file mode 100644 index 0000000..193dfd6 Binary files /dev/null and b/assets/black-box-input-output.png differ diff --git a/assets/do_while.jpg b/assets/do_while.jpg new file mode 100644 index 0000000..cf75f96 Binary files /dev/null and b/assets/do_while.jpg differ diff --git a/assets/for_loop.jpg b/assets/for_loop.jpg new file mode 100644 index 0000000..4966f6b Binary files /dev/null and b/assets/for_loop.jpg differ diff --git a/assets/humanbody.jpg b/assets/humanbody.jpg new file mode 100644 index 0000000..e7b4274 Binary files /dev/null and b/assets/humanbody.jpg differ diff --git a/assets/image-datatypes.jpg b/assets/image-datatypes.jpg new file mode 100644 index 0000000..100a954 Binary files /dev/null and b/assets/image-datatypes.jpg differ diff --git a/assets/javascript.png b/assets/javascript.png new file mode 100644 index 0000000..7d0351d Binary files /dev/null and b/assets/javascript.png differ diff --git a/assets/new-pull-request.png b/assets/new-pull-request.png new file mode 100644 index 0000000..374766b Binary files /dev/null and b/assets/new-pull-request.png differ diff --git a/assets/scopes.png b/assets/scopes.png new file mode 100644 index 0000000..a5f7bef Binary files /dev/null and b/assets/scopes.png differ diff --git a/assets/submit-homework.png b/assets/submit-homework.png new file mode 100644 index 0000000..9d577a5 Binary files /dev/null and b/assets/submit-homework.png differ diff --git a/assets/week1-uday.png b/assets/week1-uday.png new file mode 100644 index 0000000..93f88c6 Binary files /dev/null and b/assets/week1-uday.png differ diff --git a/assets/weekflow.png b/assets/weekflow.png new file mode 100644 index 0000000..9da0971 Binary files /dev/null and b/assets/weekflow.png differ diff --git a/assets/while-loop.jpg b/assets/while-loop.jpg new file mode 100644 index 0000000..1cfc049 Binary files /dev/null and b/assets/while-loop.jpg differ diff --git a/review/README.md b/review/README.md new file mode 100644 index 0000000..016be8d --- /dev/null +++ b/review/README.md @@ -0,0 +1,47 @@ +> UNDER CONSTRUCTION: This is still a WIP, feel free to add questions. As soon as there are enough we can open it up to students. + +# Review + +Test yourself with this review quiz to make sure you've learned the most important concepts from this module + +--- + +## What is JavaScript + +Which of these is true? + +1. JavaScript is Java, but for browsers +1. Node.js is a popular browser +1. JavaScript can be used to make websites interactive + +
+answer + +3 is the correct answer: JavaScript works with HTML & CSS to create interactive websites: + +- HTML defines how the site is structured +- CSS defines how the website looks +- JavaScript defines what the site does + +
+ +--- + +## basic syntax + +### loops + +How do you write a for loop to log the numbers from 0 to 9? + +
+answer + +```js +for (let i = 0; i < 10; i++) { + console.log(i); +} +``` + +
+ +---