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

Skip to content
This repository was archived by the owner on May 14, 2024. It is now read-only.

Commit 496e039

Browse files
NoerGitKatNoerGitKat
authored
Merge pull request #273 from HackYourFuture/revise-module
Revision complete module
2 parents 0feef32 + fa669a0 commit 496e039

File tree

10 files changed

+332
-181
lines changed

10 files changed

+332
-181
lines changed

‎README.md

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,41 +11,38 @@ In this module you'll make a start into wonderful world of programming. We will
1111

1212
You'll be learning two main things:
1313

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

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**.
16+
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**.
1817

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.
18+
2. **How to think like a programmer**. In one sentence this means: knowing how to solve problems using a computer. 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.
2119

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**.
20+
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**.
2321

2422
## Before you start!
2523

2624
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.
2725

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)
26+
- For Windows, click [here](https://nodejs.org/dist/v12.16.1/node-v12.16.1-x86.msi)
27+
- For Mac, click [here](https://nodejs.org/dist/v12.16.1/node-v12.16.1.pkg)
28+
- For Linux, click [here](https://nodejs.org/dist/v12.16.1/node-v12.16.1-linux-x64.tar.xz)
3129

3230
After you've installed it, go to your command line interface. Type in the following command:
3331

3432
```
3533
node --version
3634
```
3735

38-
It should show you version `v10.14.2` or higher.
36+
It should show you version `v12.16.1` or higher.
3937

4038
## Learning goals
4139

4240
In order to successfully complete this module you will need to master the following:
4341

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
42+
- Have an idea of what `computer programming` is
43+
- Know the basic building blocks of `JavaScript`
44+
- Correctly write and use `variables`, `functions` and `loops`
45+
- Understand the `control flow`
4946

5047
## How to use this repository
5148

@@ -55,7 +52,17 @@ This repository consists of 3 parts:
5552
2. `Homework`: this document contains the instructions for each week's homework.
5653
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!
5754

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.
55+
After your first class you should start with checking the `reading materials` for that week. So, for the first time it's 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.
56+
57+
Before you start with the homework, make sure you've made a `fork` of the right repository: [HackYourHomework/JavaScript1](https://www.github.com/hackyourhomework/javascript1). Once you've cloned it to your computer you can proceed by making `GIT` branches for each week. Start at the `master` branch and execute the following (note that they're 3 different commands):
58+
59+
```console
60+
foo@bar:~$ git branch week1-YOURNAME
61+
foo@bar:~$ git branch week2-YOURNAME
62+
foo@bar:~$ git branch week3-YOURNAME
63+
```
64+
65+
Then execute `git checkout week1` and you can get started!
5966

6067
If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack!
6168

‎Week1/LESSONPLAN.md

Lines changed: 58 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ The purpose of this class is to introduce to the student:
1313

1414
## Core concepts
1515

16-
*FIRST HALF (12.00 - 13.30)*
16+
_FIRST HALF (12.00 - 13.30)_
1717

1818
## 1. The 2 types of websites: static vs. dynamic
1919

2020
### Explanation
2121

22-
Static websites usually come with a fixed number of pages that have a specific layout. When the page runs on a browser, the content is literally static and doesn’t change in response to user actions. A static website is usually created with HTML and CSS
22+
Static websites usually come with a fixed number of pages that have a specific layout. When the page runs on a browser, the content is literally static and doesn’t change in response to user actions. A static website is usually created with HTML and CSS
2323
Compared to static websites, which are purely informational, a dynamic website is more functional. It allows users to interact with the information that is listed on the page. Of course, that requires utilizing more than just HTML code.
2424

2525
### Example
@@ -33,37 +33,37 @@ Examples the two different kind of websites
3333

3434
Discuss in class which claim belongs to which type of website:
3535

36-
Content of Web pages can not be change at runtime.
37-
Server side languages such as PHP, Node.js are used.
38-
Content of Web pages can be changed.
39-
No interation with database possible.
40-
Interaction with database is possible
41-
It is faster to load as compared to the other typ of website.
42-
It is slower then static website.
43-
Lower Development costs.
44-
Content may change everytime the page is loaded.
45-
Feature of Content Management System.
46-
HTML, CSS, Javascript is used for developing the website.
47-
Same content is delivered everytime the page is loaded.
48-
36+
- Content of Web pages can not be change at runtime.
37+
- Server side languages such as PHP, Node.js are used.
38+
- Content of Web pages can be changed.
39+
- No interaction with database possible.
40+
- Interaction with database is possible
41+
- It is faster to load as compared to the other typ of website.
42+
- It is slower then static website.
43+
- Lower Development costs.
44+
- Content may change every time the page is loaded.
45+
- Feature of Content Management System.
46+
- HTML, CSS, Javascript is used for developing the website.
47+
- Same content is delivered every time the page is loaded.
48+
4949
### Essence
5050

5151
[In the link is an article with (dis)advantages of both static and dynamic websites.](https://www.spiderwriting.co.uk/static-dynamic.php)
52-
53-
Static:
52+
53+
Static:
5454
Advantage:
5555
- Flexible
5656
- Cheaper
5757
Disadvantages:
5858
- not updating content
5959
- Scalability
60-
60+
6161
Dynamic:
6262
Advantage:
63-
- Easy to pull in data on stuctured and organised way
64-
- Content management system
63+
- Easy to pull in data on structured and organised way
64+
- Content management system
6565
Disadvantage:
66-
- Design is more fixed, becasue the pages are more of a template
66+
- Design is more fixed, because the pages are more of a template
6767
- Costs
6868

6969
## 2. The pillars of web development: HTML/CSS/JavaScript
@@ -98,13 +98,13 @@ These static pages can interact with a visitor only through the use of forms. On
9898

9999
A big disadvantage of web pages like this is that the only way that a visitor has of interacting with the page is by filling out the form and waiting for a new page to load.
100100

101-
It doesn't exhibit any dynamic behaviour like:
101+
It doesn't exhibit any dynamic behavior like:
102102

103103
1. reacting to user actions such as mouse click events or key presses.
104104
1. rendering complex animations
105105
1. sending requests over network to servers and fetching a response
106106
1. and this is where JavaScript steps in.
107-
107+
108108
## 3. What are variables (const & let) & naming conventions
109109

110110
### Explanation
@@ -127,6 +127,7 @@ Three different stages of working with variables are:
127127
- Variable assignment means throwing away the old value of a variable and replacing it with a new one. Initialization can be thought of as a special way of assignment.
128128

129129
https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/variables.md
130+
130131
### Example
131132

132133
```javascript
@@ -142,8 +143,8 @@ console.log(age);
142143

143144
```javascript
144145
// Variable Initialization
145-
var firstName = 'Yash';
146-
let lastName = 'Kapila';
146+
var firstName = "Yash";
147+
let lastName = "Kapila";
147148
const age = 29;
148149

149150
console.log(firstName);
@@ -152,15 +153,15 @@ console.log(age);
152153
```
153154

154155
```javascript
155-
var firstName = 'Tom';
156-
let lastName = 'Hanks';
156+
var firstName = "Tom";
157+
let lastName = "Hanks";
157158

158159
console.log(firstName);
159160
console.log(lastName);
160161

161162
// Assigning variables to a different value
162-
firstName = 'Hanks';
163-
lastName = 'Tom';
163+
firstName = "Hanks";
164+
lastName = "Tom";
164165

165166
console.log(firstName);
166167
console.log(lastName);
@@ -169,12 +170,13 @@ console.log(lastName);
169170
### Exercise
170171

171172
1. Create 2 variables using the `let` keyword
172-
1. make 1 variable contain your first name
173-
1. the second variable should have no value assigned
174-
173+
174+
1. make 1 variable contain your first name
175+
1. the second variable should have no value assigned
176+
175177
1. Make 2 variables using the `const` keyword
176-
1. the first variable should contain the city you currently stay at
177-
1. come up with a value for the second variable yourself
178+
1. the first variable should contain the city you currently stay at
179+
1. come up with a value for the second variable yourself
178180

179181
### Essence
180182

@@ -184,14 +186,15 @@ For example, your name and age are simple pieces of information, a string and a
184186

185187
Variables are simply named storage/pointer for this information.
186188

187-
*SECOND HALF (14.00 - 16.00)*
189+
_SECOND HALF (14.00 - 16.00)_
188190

189191
## 4. The basic data types (string, boolean, number, undefined, null)
190192

191193
### Explanation
194+
192195
Primitive data types are typically types that are built-in or basic to a language implementation.
193196

194-
There are 5 different types of data. The compiler/computer interpretates all the variables we make as one of those datatypes.
197+
There are 5 different types of data. The compiler/computer interprets all the variables we make as one of those data types.
195198
(https://javascript.info/types)
196199

197200
Boolean — true or false
@@ -200,40 +203,48 @@ Undefined — a declared variable but hasn’t been given a value
200203
Number — integers, floats, etc
201204
String — an array of characters i.e words
202205
?? Symbol — a unique value that's not equal to any other value ??
206+
203207
### Example
204-
* `string`, e.g. "HackYourFuture"
205-
* `number`, e.g. 5, or 10.6
206-
* `boolean`, e.g. `true` or `false`
207-
* `array`\*, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']`
208-
* `null and undefined` The values `null` and `undefined` are very similar in JavaScript, but they behave a bit differently. The difference is that `null` always has type "object", and `undefined` always has type "undefined".
208+
209+
- `string`, e.g. "HackYourFuture"
210+
- `number`, e.g. 5, or 10.6
211+
- `boolean`, e.g. `true` or `false`
212+
- `array`\*, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']`
213+
- `null and undefined` The values `null` and `undefined` are very similar in JavaScript, but they behave a bit differently. The difference is that `null` always has type "object", and `undefined` always has type "undefined".
209214

210215
Whenever you declare a variable, but you don't set a value, the variable will become `undefined`. JavaScript will never make a variable `null` unless you explicitly program it.
211-
* `symbol`
212216

217+
- `symbol`
213218

214219
```js
215220
let x = 5;
216221
let typeOfX = typeof x; // -> "number"
217222
```
218223

219-
220224
### Exercise
221-
Everybody has two minutes to find a way to declare all basic data types by making use of the typeof operator:
225+
226+
Everybody has two minutes to find a way to declare all basic data types by making use of the typeof operator:
227+
222228
```js
223229
let x = 5;
224230
let typeOfX = typeof x; // -> "number"
225231
```
232+
226233
### Essence
227-
In this way we can store a lot of data in a compact way, while the computer/compiler knows how to interpretate the 1's and 0's/
234+
235+
In this way we can store a lot of data in a compact way, while the computer/compiler knows how to interpret the 1's and 0's/
228236

229237
## 5. The compound data types (object, array)
230238

231239
### Explanation
232240

233241
### Example
234-
* `array`\*, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']`
235-
* `object`, e.g. `{name: 'John', age: 24}`, or the special object `null`
242+
243+
- `array`\*, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']`
244+
- `object`, e.g. `{name: 'John', age: 24}`, or the special object `null`
245+
236246
### Exercise
247+
237248
### Essence
238249

239250
_Special thanks to Jim Cramer, Yash Kapila, David Nudge for most of the content_

0 commit comments

Comments
 (0)