Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit a238a19

Browse files
authored
Merge pull request HackYourFuture#162 from HackYourFuture/v2
V2
2 parents 7be2e14 + 8aff960 commit a238a19

16 files changed

+877
-340
lines changed

.DS_Store

6 KB
Binary file not shown.

README.md

Lines changed: 69 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,78 @@
1+
> 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).
2+
13
> Please help us improve and share your feedback! If you find better tutorials
2-
or links, please share them by [opening a pull request](https://github.com/HackYourFuture/JavaScript1/pulls).
4+
> or links, please share them by [opening a pull request](https://github.com/HackYourFuture/JavaScript1/pulls).
5+
6+
# Module #2 - JavaScript 1: Programming Basics (Frontend)
7+
8+
![JavaScript1](./assets/javascript1.png)
9+
10+
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!
11+
12+
You'll be learning two main things:
13+
14+
1. Fundamental concepts in programming
15+
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.
16+
17+
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**.
18+
19+
2. How to think like a programmer
20+
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.
21+
22+
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**.
23+
24+
## Before you start!
25+
26+
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.
27+
28+
- For Windows, click [here](https://nodejs.org/dist/v10.16.0/node-v10.16.0-x64.msi)
29+
- For Mac, click [here](https://nodejs.org/dist/v10.16.0/node-v10.16.0.pkg)
30+
- For Linux, click [here](https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz)
31+
32+
After you've installed it, go to your command line interface. Type in the following command:
33+
34+
```
35+
node --version
36+
```
37+
38+
It should show you version `v10.14.2` or higher.
39+
40+
## Learning goals
41+
42+
In order to successfully complete this module you will need to master the following:
43+
44+
- Have an idea of what computer programming is
45+
- Know the basic buildingblocks of JavaScript
46+
- Correctly write and use variables, functions and loops
47+
- Understand the control flow
48+
- Think like a programmer
49+
50+
## How to use this repository
51+
52+
This repository consists of 3 parts:
53+
54+
1. `Reading materials`: this document contains all the required theory you need to know _**while**_ you're coding. It's meant as both study material and as a reference to understand what you're doing.
55+
2. `Homework`: this document contains the instructions for each week's homework.
56+
3. `Lesson Plans`: this part is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well!
57+
58+
After your first class you should start with checking the `reading materials` for that week. So, for the first time that is the [Week 1 Reading](/Week1/README.md). Study all the concepts and try to get the gist of everything. After, you can get started with the `homework` for that week.
359

4-
# HackYourFuture - JavaScript 1
60+
If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack!
561

6-
Here you can find course content and homework for the JavaScript 1 module
62+
## Planning
763

8-
|Week|Topic|Read|Homework|
9-
|----|-----|----|--------|
10-
|1.|Git Session|[Reading Week 1](/Week1/README.md) | [Homework Week 1](/Week1/MAKEME.md)|
11-
|2.|• Intro JavaScript (What is it, where can you use it for)<br>• [Variables (var, let, const)](../../../fundamentals/blob/master/fundamentals/variables.md)<br>• [Basic Data types (Strings, Numbers, Arrays, Booleans)](../../../fundamentals/blob/master/fundamentals/values.md)<br>• [Operators](../../../fundamentals/blob/master/fundamentals/operators.md)<br>• [Special characters and their names](../../../fundamentals/blob/master/fundamentals/names_of_special_characters.md)<br>• [Naming conventions](../../../fundamentals/blob/master/fundamentals/naming_conventions.md)|[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|
12-
|3.|• Git work flow :smiling_imp:<br>• [Advanced data types (objects)](../../../fundamentals/blob/master/fundamentals/objects.md) <br>• [Conditional execution](../../../fundamentals/blob/master/fundamentals/conditional_execution.md) <br>• [Statements vs Expressions](../../../fundamentals/blob/master/fundamentals/statements_expressions.md)<br> • [Loops (for/while)](../../../fundamentals/blob/master/fundamentals/loops.md)<br>• [Functions](../../../fundamentals/blob/master/fundamentals/functions.md) <br>• [Scope](../../../fundamentals/blob/master/fundamentals/scope.md)|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)|
64+
| Week | Topic | Reading Materials | Homework | Lesson Plan |
65+
| ---- | --------------------------------------------------------------------------------- | ------------------------------ | ------------------------------- | ---------------------------------- |
66+
| 1. | What is JavaScript?, Variables, Data Structures & Naming Conventions | [Reading W1](/Week1/README.md) | [Homework W1](/Week1/MAKEME.md) | [Lesson Plan W1](/Week1/MAKEME.md) |
67+
| 2. | Statements vs. Expressions, Control flow, Loops, Operators, Conditional statement | [Reading W2](/Week2/README.md) | [Homework W2](/Week2/MAKEME.md) | [Lesson Plan W2](/Week1/MAKEME.md) |
68+
| 3. | Functions, Thinking like a programmer I, How JavaScript relates to HTML/CSS | [Reading W3](/Week3/README.md) | [Homework W3](/Week3/MAKEME.md) | [Lesson Plan W3](/Week1/MAKEME.md) |
1369

14-
__Kind note:__
70+
## Finished?
1571

16-
We expect you to __always__ come prepared to the class on Sunday.
72+
Did you finish the module? Good job! You're doing great!
1773

18-
### Overall
19-
A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](../../../fundamentals/blob/master/README.md) and research/ ask for help (Slack!) with the concepts that are not entirely clear.
74+
If you feel ready for the next challenge, click [here](https://www.github.com/HackYourFuture/JavaScript2) to go to JavaScript2!
2075

76+
_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 :)_
2177

22-
*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 :)*
78+
<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/.DS_Store

6 KB
Binary file not shown.

Week1/LESSONPLAN.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Lesson Plan Week 1
2+
3+
## Agenda
4+
5+
The purpose of this class is to introduce to the student:
6+
7+
(1) what variables are and why they're used
8+
(2) what a data type is, and which ones there are in JavaScript
9+
10+
FIRST HALF:
11+
12+
SECOND HALF:
13+
14+
### Core concepts
15+
16+
FIRST HALF (12.00 - 13.30)
17+
18+
1.
19+
20+
SECOND HALF (14.00 - 16.00)
21+
22+
2.
23+
24+
3)
25+
26+
4.

Week1/MAKEME.md

Lines changed: 172 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,184 @@
1-
## Homework week 1:
1+
# Homework JavaScript1 Week 1
22

3+
## **Todo list**
4+
5+
1. Practice the concepts
6+
2. JavaScript exercises
7+
3. Code along
8+
9+
## **1. Practice the concepts**
10+
11+
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.
12+
13+
In the following exercises you'll learn how to use different JavaScript concepts to solve common computational problems:
14+
15+
- [Learn-js](https://www.learn-js.org/). Do all the `Learn the basics` exercises.
16+
- [Codecademy: Introduction to JavaScript](https://www.codecademy.com/learn/introduction-to-javascript/modules/learn-javascript-introduction). Do all the exercises (#1 to #10).
17+
- [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.
18+
19+
## **2. JavaScript exercises**
20+
21+
Inside of your `JavaScript1` fork, create a folder called `week1`. Inside of that folder, create a folder called `js-exercises`. For all the following exercises create a new `.js` file in that folder (10 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be `logHello.js`.
22+
23+
> In each file, start off with the string `'use strict'`. This will make sure the code interpreter will enforce stronger rules when looking at your code.
24+
25+
> Before starting, make sure you have [Node.js](https://nodejs.org/en/download/) installed on your computer. You'll use this to execute your code to check if it works.
26+
27+
**Exercise 1: Hello world!**
28+
29+
Write a statement, using the `console.log()` function. Give it a string as an argument. The string should contain the message "Hello world!".
30+
31+
Write 10 statements like these, but in different languages.
32+
33+
For example:
34+
35+
```
36+
Halo, dunia! // Indonesian
37+
Ciao, mondo! // Italian
38+
Hola, mundo! // Spanish
39+
```
40+
41+
Using the command line, navigate to your `week1` folder and type in the following to test your code:
42+
43+
```
44+
node FILENAME.js
45+
```
46+
47+
It should show the message `Hello world!` in 10 different languages.
48+
49+
**Exercise 2: Error debugging**
50+
51+
Consider the following code:
52+
53+
```js
54+
console.log('I'm awesome');
55+
```
56+
57+
Copy the code in your `.js` file and run it in the command line using `node`. You will see that you will get a SyntaxError. **Correct the mistake**.
58+
59+
Hint: the SyntaxError message will give you some indication of what the error _might_ be, but figure out yourself how to correct it!
60+
61+
When done right, it should show the message `I'm awesome`.
62+
63+
**Exercise 3: Log the number**
64+
65+
Follow the steps. Make sure that each step is written on the line after.
66+
67+
1. First, declare your variable `numberX`. Do not _initialize_ it (which means, don't give it a value) yet.
68+
2. Add a `console.log` statement that explains in words _what you think_ the value of `x` is, like in this example.
69+
3. Add a `console.log` statement that logs the value of `numberX`.
70+
4. Now _initialize_ your variable `numberX` with a number (also called an `integer` in computer science terms).
71+
5. Next, add a `console.log` statement that explains _what you think_ the value of `numberX` is.
72+
6. Add a `console.log` statement that logs the value of `numberX`.
73+
74+
**Exercise 4: Log the string**
75+
76+
Follow the steps. Make sure that each step is written on the line after.
77+
78+
1. Declare a variable `myString` and assign a string to it. Use your full name, including spaces, as the content for the string.
79+
2. Write a `console.log` statement in which you explain in words _what you think_ the value of the string is.
80+
3. Now `console.log` the variable `myString`.
81+
4. Now reassign to the variable `myString` a new string.
82+
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.
83+
6. Now console.log `myString` again.
84+
85+
**Exercise 5: Round a number and log it**
86+
87+
Follow the steps. Make sure that each step is written on the line after.
88+
89+
1. Declare a variable `z` and assign the number 7.25 to it.
90+
2. Write a `console.log` statement in which you log the value of `z`.
91+
3. Declare another variable `a` that has the value of `z` but rounded to the nearest integer.
92+
4. Write a `console.log` statement in which you log the value of `a`.
93+
5. So now we have `z` and `a` find a way to compare the two values and store the highest of the two in a new variable.
94+
6. Write a `console.log` statement in which you log the value of the highest value.
95+
96+
**Exercise 6: Log an array of animals**
97+
98+
Follow the steps. Make sure that each step is written on the line after.
99+
100+
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`.
101+
2. Write a `console.log` statement that explains in words _what you think_ the value of the array is.
102+
3. Write a `console.log` statement that logs the array.
103+
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.
104+
5. Write a `console.log` statement that logs the second array.
105+
6. Add a statement that adds another string ("Piglet)" to the array of animals.
106+
7. Write a `console.log` statement that logs the second array!
107+
108+
**Exercise 7: Log the length of a string**
109+
110+
Follow the steps. Make sure that each step is written on the line after.
111+
112+
1. Declare a variable called `mySentence` and initialize it with the following string: "Programming is so interesting!".
113+
2. Figure out (using Google) how to get the length of `mySentence`.
114+
3. Write a `console.log` statement to log the length of `mySentence`.
115+
116+
**Exercise 8: Type checker**
117+
118+
Write a program that checks the data types of two variables and logs to the console `SAME TYPE` if they are the same type. If they are different types log `Not the same...`.
119+
120+
1. Declare 4 variables: 2 must be `strings` and 2 must be `objects`
121+
2. Create 8 conditional statements, where for each you check if the data type of one variable is the same as the other
122+
3. Find out how to check the type of a variable
123+
4. Write 2 `console.log` statements to log the type of 2 variables, each with a different data type
124+
5. Now compare the types of your different variables with one another
125+
6. Log `Not the same...` when the types are different
126+
127+
Here's an incomplete example of how it could look:
128+
129+
```js
130+
// Declare all variables
131+
let x = 9;
132+
let y = 67;
133+
134+
// Check data type
135+
console.log(...);
136+
137+
// Check if data type is the same
138+
if (...) {
139+
console.log('SAME TYPE');
140+
}
3141
```
4-
Topics discussed in class this week:
5-
• Git
142+
143+
**Exercise 9: Log the remainder**
144+
145+
For each of these, write in comments what the answer is followed by how you came to that conclusion
146+
147+
1. If `x` equals 7, and the only other statement is `x = x % 3`, what would be the value of `x` after the calculation?
148+
2. If `y` equals 21, and the only other statement is `x = x % 4`, what would be the value of `y` after the calculation?
149+
3. If `z` equals 13, and the only other statement is `x = x % 2`, what would be the value of `z` after the calculation?
150+
151+
**Exercise 10: Compare arrays**
152+
153+
1. Declare 2 variables, that each hold an array. The first array should have 4 items, the second 7 items
154+
2. Find out how to get the length of each array. Write a `console.log` statement that shows the length of each array
155+
156+
```js
157+
const array = ["hello", 123, true, { name: "Noer" }];
158+
159+
console.log('The length of the array is...' + ...);
6160
```
7161
8-
> [Here](/Week2/README.md) you find the readings you have to complete before the second lecture.
162+
3. Write a conditional statement that checks if both are of equal length. If they are, log to the console `They are the same!`, if not log `Two different sizes`
163+
164+
## **3. Code along**
165+
166+
We don't want to lose the connection with HTML/CSS, so in the following tutorial you'll learn how to build a simple web application use HTML/CSS and JavaScript.
167+
168+
You'll first write the HTML and CSS, to provide structure and style to the page. When doing so, keep notice of how the developer chooses to do this. Why do they use this tag instead of something else? Why do they give an element a certain class name?
9169
10-
## Step 1: Share a useful resource
170+
After, the developer will write JavaScript code. You'll notice it's different from how you've used JavaScript. It is something we call **DOM Manipulation**. Don't worry, you don't need to master this just yet. Just follow along and do some research yourself if you already want to learn more about it!
11171
12-
_Deadline Monday_
172+
- [Calculator](https://www.youtube.com/watch?v=6v4vBXL-qkY)
13173
14-
All share a video or a resource (this can be a drawing, an article or a podcast) that was helpful for you the last few weeks with learning HTML/CSS. Please share this in the channel of your class in Slack. Also write as small note about what the resource is about and why you think it's so helpful (you can share more than one if you like).
174+
## **SUBMIT YOUR HOMEWORK!**
15175
16-
## Step 2: Git homework
176+
After you've finished your todo list it's time to show us what you got! Starting from this week you'll be submitting all your homework through GitHub. What you'll be doing is upload all your files to a forked repository (a copy from the original, which in this case is the [JavaScript1](https://www.github.com/HackYourFuture/JavaScript1) repository) using GIT.
17177
18-
_Deadline Wednesday_
178+
Take a look at the following [guide](../hand-in-homework-guide.md) to see how it's done.
19179
20-
Git homework for this week:
180+
The homework that needs to be submitted is the following:
21181
22-
Pair up with another student in your class. The homework requires two people to work together. Let's call them admin and user.
182+
1. JavaScript exercises
23183
24-
1. admin creates a new repository on github called **animals**.
25-
2. admin adds a file called “zoo.txt” with some animals generally found in a zoo.
26-
3. admin commits and pushes the changes (in master branch).
27-
4. user forks the repository created by admin and bring it to their machine (covered during classwork).
28-
5. user makes a new branch called user-dev.
29-
6. user adds another file called “pets.txt” with some animals generally found in a home.
30-
7. user commits and pushes his branch to remote.
31-
8. user creates a pull request(PR) to merge changes from user's _user-dev_ branch to admin's _master_ branch.
32-
9. admin reviews the pull request and approves and merges changes.
184+
_Deadline Saturday 23.59 CET_

0 commit comments

Comments
 (0)