You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+96Lines changed: 96 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -1,3 +1,4 @@
1
+
<<<<<<< HEAD
1
2
# Prep exercise - Traffic light
2
3
3
4
In the previous week we started with our traffic light. Now that we also know what a function is we have one last look at the workings of a traffic light in a different way. Take a look at the `traffic-light.js` file and implement the same requirements as last week again, but then with another different way of organising.
@@ -7,3 +8,98 @@ In the previous week we started with our traffic light. Now that we also know wh
7
8
- This time the loop was changed to a for loop that will run the code 6 times. Why was that needed?
8
9
- Why was the trafficLight added to the `main` function and not left at the top of the file?
9
10
- What do you think is the advantage of having the `getCurrentTrafficLightState` and `getNextStateIndex` functions?
11
+
=======
12
+
> 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).
13
+
14
+
> Please help us improve and share your feedback! If you find better tutorials
15
+
> or links, please share them by [opening a pull request](https://github.com/HackYourFuture/JavaScript/pulls).
16
+
17
+
# Module #2 - JavaScript
18
+
19
+
20
+
21
+
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!
22
+
23
+
You'll be learning two main things:
24
+
25
+
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.
26
+
27
+
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**.
28
+
29
+
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.
30
+
31
+
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**.
32
+
33
+
## Before you start!
34
+
35
+
### Install some new software!
36
+
37
+
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.
38
+
39
+
After you've installed it, go to your command line interface. Type in the following command:
40
+
41
+
```
42
+
node --version
43
+
```
44
+
45
+
It should show you the version you are working with.
46
+
47
+
## Learning goals
48
+
49
+
In order to successfully complete this module you will need to master the following:
50
+
51
+
- Have an idea of what `computer programming` is
52
+
- Know the basic building blocks of `JavaScript`
53
+
- Correctly write and use `variables`, `functions` and `loops`
54
+
- Understand the `control flow`
55
+
- Be able to solve worded problems using code
56
+
57
+
## How to use this repository
58
+
59
+
### Repository content
60
+
61
+
This repository consists of 2 essential parts for each week:
62
+
63
+
1.`README`: this document contains all the required theory you need to understand **while** working on the weekly assignment. 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
64
+
2.`MAKEME`: this document contains the instructions for each week's practical tasks / assignment. 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 assignment as the online resources already check the code automatically, from week 3 our mentors will start giving you feedback on your assignments.
65
+
66
+
### How to study
67
+
68
+
Let's say you are just starting out with the JavaScript module. This is what you do...
69
+
70
+
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)
71
+
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 assignment (from the HTML-CSS module)
72
+
3. On **Friday** you start with the assignment, found in the `MAKEME.md`. For the first week of `JavaScript`, that would be [Week1 Assignment](/Week1/MAKEME.md)
73
+
4. You spend **Friday** and **Saturday** playing around with the exercises and write down any questions you might have.
74
+
5.**DEADLINE 1**: You'll submit any questions you might have before **Saturday 23.59**, in the cohort channel.
75
+
6. On **Sunday** you'll attend the Q&A session. 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.
76
+
7. You spend **Monday** and **Tuesday** finalizing your assignment.
77
+
8.**DEADLINE 2**: You submit your assignment to the right channels (GitHub) before **Tuesday 23.59**. If you can't make it on time, please communicate it with your mentor
78
+
9. Start the new week by going back to point 1!
79
+
80
+
In summary:
81
+
82
+
83
+
84
+
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/cohort on Slack!
Did you finish the module? Good job! You're doing great!
99
+
100
+
If you feel ready for the next challenge, click [here](https://www.github.com/HackYourFuture/Browsers) to go to Browsers!
101
+
102
+
_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 :)_
103
+
104
+
<arel="license"href="http://creativecommons.org/licenses/by/4.0/"><imgalt="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 <arel="license"href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
Practice, practice, practice. This week you are not handing in any assignment, 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.
13
+
14
+
## **2. Practice the concepts**
15
+
16
+
In this section you will be doing interactive exercises, that will allow you to practice with the concepts you've learned about this week! We provide a lot of possible exercises here and you probably can't do everything, but do as many as you need to feel comfortable with the concepts. Also feel free to come back to them later.
17
+
18
+
- Do all parts of [Codecademy: Arrays](https://www.codecademy.com/courses/introduction-to-javascript/lessons/arrays) (Signup required!)
19
+
- Do 5 exercises of [FreeCodeCamp: Basic data structures](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#basic-data-structures)
-[JSchallenger](https://www.jschallenger.com/) - Do all of the Javascript Basics section except for `scope` and `asynchronous javascript`.
22
+
- 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!
23
+
24
+
## **3. Prep exercises**
25
+
26
+
> Prep exercises are exercises that you should work on _before_ the session on Sunday. These are a little more difficult or show an important concept and as such are a great exercise to talk about with your cohort and your Q&A mentor. Have a solution ready by Sunday as you may be asked to show what you did.
27
+
28
+
Inside your `JavaScript` fork, go to the folder `Week1`. Inside that folder, navigate to `/prep-exercises`. For each exercise, you will find a separate folder. The `README` explains what needs to be done. There will also be some questions at the bottom to think about. Go through them _before_ the session on Sunday as it will be covered then.
29
+
30
+
## **4. Practice practice practice**
31
+
32
+
Done with the above? Then it is time to practice practice practice! Below you will find huge lists of practice exercises to keep practicing. The better you get at JavaScript, the easier the rest of the curriculum is so try to do as much as you can. Some of these solutions use some of the concepts of next week so if something looks weird, have a quick look at next week's topics to see what it means:
33
+
34
+
-[W3Resource Basic exercises](https://www.w3resource.com/javascript-exercises/javascript-basic-exercises.php)_(Note that the given solutions to these exercises use old JS syntax, we will learn more about this later. Most important now is that we don't use `var` anymore, so make sure you use `let` or `const`!)_
35
+
36
+
There are also multiple websites that provide constant challenges to practice your skills. These go from beginner to advanced and you should bookmark them and return every once in awhile. In some interview processes these kinds of exercises are given nowadays. We suggest to start with Edabit as they are more geared to beginners, the others start at a higher level:
37
+
38
+
-[Edabit](https://edabit.com/challenges) - You can choose JavaScript as a language and then try solving as many challenges as you can. If you find the level too easy then you can choose a higher difficulty.
39
+
-[leetcode](https://leetcode.com/) - Sign up and start solving!
40
+
-[Code Wars](https://www.codewars.com/) - Once you feel comfortable with the JavaScript syntax sign up for code wars to practice. It is a website where you can solve exercises and rank up! When signing up, only choose JavaScript to really focus the problems on learning to solve problems in it. You can later change it to other technologies when you get more familiar.
41
+
42
+
## No assignment to hand in (for now)
43
+
44
+
For the first week of JavaScript there is no assignment to hand in as the exercises already give you all the feedback you need.
45
+
46
+
## Done early?
47
+
48
+
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!
The first week of JavaScript we do not have an assignment and we encourage trainees to follow all the material at their own pace. So trainees can ask questions about any week. Expect questions about:
- The Debugger (both browser/vscode) and how to debug
8
+
- Naming conventions
9
+
- DRY principle
10
+
11
+
In these first weeks, we want to get the trainees to create the right mental model for JavaScript constructs, so try to go back to basics as much as possible. However easy it comes to the mentors, this is the first time trainees encounter all the syntax of a programming language. So try to go slowly and use the debugger / [JSTutor](http://pythontutor.com/javascript.html#mode=edit) as much as possible.
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.
23
+
24
+
Welcome to week 1 of JavaScript! Time to get coding, let's start with refreshing the things we learned during the explore module. Have a look at [week 3](https://github.com/HackYourFuture/explore/tree/main/Week3) there again to remind yourself what the following concepts mean again:
25
+
26
+
- Variables
27
+
- Values
28
+
- Statements / Expressions
29
+
- Operators
30
+
- Conditional Statements
31
+
32
+
Then have a look at functions again over [here](https://study.hackyourfuture.net/#/javascript/functions).
33
+
34
+
This week we are going to go a little deeper and get some extra building blocks to work with. 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).
35
+
36
+
You now have all of the basic building blocks that form the basis of all code! You will undoubtedly already have encountered the difficulty of reading code, and combining everything this week will make it even more difficult to follow. It is a good idea to revisit the debugger section with this new knowledge [here](https://study.hackyourfuture.net/#/tools/debuggers). 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 that you are not 100% comfortable with yet!
37
+
38
+
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) and try to make it a habit to follow them.
39
+
40
+
Lastly we want to introduce the first steps to testing code. Let's first have a look at what software testing is and why we do it [here](https://www.ministryoftesting.com/articles/e463d4ba?s_id=14519957). The simplest form of testing is using assertions, have a look what that is [here](https://study.hackyourfuture.net/#/testing/assertion), we will introduce this more in your assignment so you will see how it works.
41
+
42
+
## Finished?
43
+
44
+
Are you finished with going through the materials? You're doing great! If you feel ready to get practical, click [here](./MAKEME.md).
* Keep track of which books you read and which books you want to read!
3
+
*
4
+
* Follow the steps:
5
+
* 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).
6
+
* Loop through the array of books.
7
+
* For each book, log the book title and book author like so: "The Hobbit by J.R.R. Tolkien".
8
+
* 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
9
+
* If you haven't read it log a string like You still need to read "The Lord of the Rings"
* 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.
3
+
*
4
+
* Declare a variable that holds an empty array, called drinkTray.
5
+
* 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.
6
+
*
7
+
* 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!")
0 commit comments