Initial commit

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 :)_
+
+<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.

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!
+

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!

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
+ */
+

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'!;

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

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

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.

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!
+
+

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

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

Week1/practice-exercises/solutions/2-syntax-error.js

@@ -0,0 +1 @@
+console.log("I'm awesome'!");

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);
+