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

Skip to content

Commit 3ba32e5

Browse files
author
Noer Paanakker
committed
2 parents bf5bca3 + 74a89a4 commit 3ba32e5

File tree

4 files changed

+131
-83
lines changed

4 files changed

+131
-83
lines changed

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯
6565
| ---- | --------------------------------------------------------------------------------- | ------------------------------ | ------------------------------- | -------------------------------------- |
6666
| 1. | What is JavaScript?, Variables, Data Structures & Naming Conventions | [Reading W1](/Week1/README.md) | [Homework W1](/Week1/MAKEME.md) | [Lesson Plan W1](/Week1/LESSONPLAN.md) |
6767
| 2. | Statements vs. Expressions, Control flow, Loops, Operators, Conditional statement | [Reading W2](/Week2/README.md) | [Homework W2](/Week2/MAKEME.md) | [Lesson Plan W2](/Week1/LESSONPLAN.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/LESSONPLAN.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](/Week3/LESSONPLAN.md) |
6969

7070
## Finished?
7171

Week2/LESSONPLAN.md

Lines changed: 110 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -11,34 +11,44 @@ The purpose of this class is to introduce to the student:
1111

1212
## Core concepts
1313

14-
FIRST HALF (12.00 - 13.30)
14+
FIRST HALF (12.05 - 13.30)
1515

1616
## 1. Q&A about last week's concepts & homework
17+
1718
### Explanation
18-
- static vs. dynamic
19+
20+
- static vs. dynamic websites
1921
- Variables in JavaScript: `var`, `let`, `const`, declaration, initialization, assignment
2022
- Basic Data Types in JavaScript: `number`, `string`, `boolean`, `undefined`, `null`
2123
- Compound Data Types in JavaScript: `array`, `object`
24+
2225
### Exercise
26+
2327
Let the students explain the concepts themselves.
2428

2529
## 2. The difference between statements & expressions
30+
2631
### Explanation
27-
An expression is a piece of code that resolves in a value (becomes a value)
32+
33+
An expression is a piece of code that resolves to a value (becomes a value)
2834

2935
A statement is an instruction
36+
3037
### Example
3138

3239
#### Expressions
33-
* `sum(a, b)`
34-
* `a`
35-
* `a > 4 ? "yes" : "no"`
36-
* `a + b`
37-
* `a && b || c`
40+
41+
- `sum(a, b)`
42+
- `a`
43+
- `a > 4 ? "yes" : "no"`
44+
- `a + b`
45+
- `a && b || c`
3846

3947
#### statements
40-
* `let x;`
41-
* `if (a > 4) { return "yes"; } else { return "no"; }`
48+
49+
- `let x;`
50+
- `if (a > 4) { console.log("larger than 4"); } else { console.log("not larger than 4"); }`
51+
4252
### Exercise
4353

4454
#### Indicate for each of these whether it is an expression or a statement:
@@ -56,84 +66,106 @@ A statement is an instruction
5666
#### Given the following code:
5767

5868
```js
59-
let s = "Hello".toLowerCase();
69+
let s = 'Hello'.toLowerCase();
6070
let l = s.length;
6171

6272
function sum(a, b) {
6373
return a + b;
6474
}
65-
let max = function (a, b) {
75+
let max = function(a, b) {
6676
return a > b ? a : b;
67-
}
77+
};
6878

6979
let s1 = sum(4, 5);
7080
let s2 = 4 + 5;
7181

7282
if (s2 == s1) {
73-
console.log("same");
83+
console.log('same');
7484
} else {
75-
console.log("not same");
85+
console.log('not same');
7686
}
7787
```
7888

79-
List all 11 *statements* in the code above
80-
List all 28 *expressions* in the code above (BONUS!)
89+
List 5 statements from all 11 _statements_ in the code above
90+
91+
List 5 expressions of all 28 _expressions_ in the code above (BONUS!)
8192

8293
### Essence
94+
8395
It's important to know the difference between expressions and statement because:
84-
1. It will give you an overview on what the code is about (is it an instruction or is code that resolves in a value)
85-
2. While writing code you'll not mix up the two and therefore make sure that you do not write wrong code.
8696

97+
1. It will give you an overview on what the code is about (is it an instruction or is code that resolves to a value)
98+
2. While writing code you'll not mix up the two and therefore make sure that you do not write wrong code.
8799

88100
## 3. What are operators (comparison, arithmetic, logical, assignment)
101+
89102
### Explanation
90-
An operator is capable of manipulating a certain value or operand. Operators are used to perform specific mathematical and logical computations on operands. In other words, we can say that an operator operates the operands. In JavaScript operators are used for compare values, perform arithmetic operations etc. There are various operators supported by JavaScript:
91-
92-
* Arithmetic Operators
93-
take numerical values (either literals or variables) as their operands and return a single numerical value.
94-
* Comparison Operators
95-
Two diferent types of comparison operators; They will always return a logical value,
96-
- Equality Operators
97-
checks if the operands are 'the same'
98-
diffference in '=' '==' '==='
99-
- Relational Operators
100-
checks if the specific relation between two operands is true or false
101-
102-
* Logical Operators
103-
Mostly 'comparing'boolean values, but it can be used with any type.
104-
105-
* Assignment Operators
106-
assigns a value to its left operand based on the value of its right operand. The simple assignment operator is equal '='
107-
108-
(https://www.geeksforgeeks.org/javascript-operators/)
103+
104+
- Arithmetic Operators
105+
- take numerical values (either literals or variables) as their operands and return a single numerical value.
106+
- `19 + 13`, `126 / 3`, `397 % 71`
107+
- Comparison Operators
108+
- Two different types of comparison operators; They will always return a logical value,
109+
- Equality Operators
110+
- checks if the operands are 'the same'
111+
- difference in '=' '==' '==='
112+
- Relational Operators
113+
- checks if the specific relation between two operands is true or false
114+
- `>`, `<`, `<=`, `>=`
115+
116+
117+
- Logical Operators
118+
- Mostly 'comparing' boolean values, but it can be used with any type.
119+
- `true || false`, `false && true`, `!true`
120+
121+
- Assignment Operators
122+
- assigns a value to its left operand based on the value of its right operand. The simple assignment operator is equal '='
123+
- `+=`, `-=`, `*=`, `/=`
124+
125+
(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
126+
109127
### Example
128+
110129
https://www.tutorialsteacher.com/javascript/javascript-operators
130+
111131
### Exercise
132+
112133
See example
113-
### Essence
114-
Operators are very important in a programming language, because this is how we manipulate values.
115-
In fact, operators are the buildingblocks of all possible actions.
116134

135+
### Essence
117136

137+
Operators are very important in a programming language, because this is how we manipulate values.
138+
In fact, operators are the building blocks of all possible actions.
118139

119140
SECOND HALF (14.00 - 16.00)
120141

121142
## 4. What are loops (do/while & for loop)
143+
122144
### Explanation
123-
Programming loops are about doing the same thing over and over again. Another term for that is: iteration
145+
146+
Programming loops are about doing the same thing over and over again, without typing the code over and over again. Another term for that is: iteration
124147

125148
Wikipedia: In most computer programming languages, a while loop is a (control flow) statement that allows (a block of) code to be executed repeatedly based on a given Boolean condition.
126149

127150
### Example
151+
152+
```javascript
153+
```
154+
128155
### Exercise
156+
129157
Make a for loop with a do-while loop
158+
130159
### Essence
131-
In programming you have to do a lot of (alomst) similar calculations over and over again. Using loops makes it iesier (and less boring) to code. Next to that it makes sure the the code is much more compact.
160+
161+
In programming you have to do a lot of (almost) similar calculations over and over again. Using loops makes it easier (and less boring) to code. Next to that it makes sure the the code is much more compact.
132162

133163
You can check: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code as well. underneath the paragraph: 'Why bother'
134164

135165
## 5. What are conditional statements (if/else & switch)
166+
136167
### Explanation
168+
137169
The normal order of execution of statements in a computer program is in straight-line order, from top to bottom. However, sometimes it is desirable to execute one or more statements conditionally, i.e. depending on whether some condition – determined by the state of your program – holds true (Boolean expression).
138170

139171
In its simplest form the `if` statement looks like this:
@@ -143,69 +175,88 @@ if () {
143175
}
144176
```
145177

146-
Then we have:
178+
Then we have:
179+
147180
```js
148181
if() {
149182
} else {
150183
}
151184
```
185+
152186
At last we have:
187+
153188
```js
154189
if() {
155190
} else if {
156191
}
157192
```
158193

159-
The switch statement can sometimes be a useful alternative to a concatenation of if statements. This is the case when the condition is an expression that can be decomposed into a number of distinct values or cases, as shown in the example below.
194+
The switch statement can sometimes be a useful alternative to a long list of if statements. This is the case when the condition is an expression that can be decomposed into a number of distinct values or cases, as shown in the example below.
160195
Depending on the value of the expression specified in the `switch` clause, one of the `case` statement blocks is executed. Each statement block should end with a `break` statement to ensure that a `case` doesn't 'fall through' into the next `case`.
161196

162197
The `default` statement at the end is executed when none of the preceding cases hold true. The `default` statement is not strictly required, but is a best practice to always specify one.
163198

164199
### Example
200+
165201
```js
166202
if (distance < 10) {
167-
console.log('I will take the bike.');
203+
console.log('I will take the bike.');
168204
}
169205
```
170206

171207
```js
172208
const hyfModule = 'JavaScript-1';
209+
let message = '';
173210

174211
switch (hyfModule) {
175212
case 'HTML/CSS':
176-
console.log('In this module you will learn HTML and CSS.');
213+
message = 'In this module you will learn HTML and CSS.';
177214
break;
178215
case 'JavaScript-1':
179-
console.log('In this module you will learn Git and JavaScript basics.');
216+
message = 'In this module you will learn Git and JavaScript basics.';
180217
break;
181218
case 'JavaScript-2':
182-
console.log('In this module you will learn about JavaScript in the browser with HTML and CSS.');
219+
message = 'In this module you will learn about JavaScript in the browser with HTML and CSS.';
183220
break;
184221
case 'JavaScript-3':
185-
console.log('In this module you will learn about Async and API calls.');
222+
message = 'In this module you will learn about Async and API calls.';
186223
break;
187224
case 'Node':
188-
console.log('This module is about building server and CLI applications using Node.');
225+
message = 'This module is about building server and CLI applications using Node.';
189226
break;
190227
case 'Database':
191-
console.log('In this module is about Relational and Non-Relational Data and Database Systems.');
228+
message = 'In this module is about Relational and Non-Relational Data and Database Systems.';
192229
break;
193230
case 'React':
194-
console.log('In this module you will to build Single Page Applications using React.');
231+
message = 'In this module you will to build Single Page Applications using React.';
195232
break;
196233
case 'Project':
197-
console.log('In this final module you will do your graduation project.');
234+
message = 'In this final module you will do your graduation project.';
198235
break;
199236
default:
200-
console.log('This module is unknown: ' + hyfModule);
201-
}}
237+
message = 'This module is unknown: ' + hyfModule;
238+
}
239+
240+
console.log(message);
202241
```
203242

243+
### Exercise
204244

245+
Create a Switch/Case that will log the season based on the month.
205246

206-
### Exercise
207-
https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Statements/if...else
247+
```javascript
248+
const month = 'January';
249+
let season = '';
208250

251+
switch (month) {
252+
case 'January':
253+
season = 'winter';
254+
break;
255+
}
209256

210-
### Essence
257+
console.log(season); // 'winter'
258+
```
211259

260+
https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Statements/if...else
261+
262+
### Essence

Week2/MAKEME.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ In this project you'll write a `function` that calculates grades, based on the A
128128
In this example this is what we would expect the `function` to return in the command line:
129129

130130
```markdown
131-
You got a B (85%)!
131+
You got a D (60%)!
132132
```
133133

134134
When writing the `function`, make use of the following grade scores:

0 commit comments

Comments
 (0)