|
| 1 | +# Lesson plan |
| 2 | +``` |
| 3 | +> Focus on having lots of in class exercises. |
| 4 | +
|
| 5 | +> DONT teach everything, let the students investigate topics on their own aswell! |
| 6 | +
|
| 7 | +> Focus on how to read documentation, google answers and google errors!! |
| 8 | +
|
| 9 | +> Teach towards the students being able to solve the homework |
| 10 | +``` |
| 11 | + |
| 12 | +Remember to add the code you wrote in the class to the relevant class branch's class work folder. If the branch has not been created just create and push it :) If you dont have access, write to one from the core team. You can see an example below! |
| 13 | + |
| 14 | +To find examples of what teachers have taught before go to the class branches in the classwork folder, Fx [class 07](https://github.com/HackYourFuture-CPH/JavaScript/tree/class07/JavaScript1/Week1/classwork) |
| 15 | + |
| 16 | +If you find anything that could be improved then please create a pull request! We welcome changes, so please get involved if you have any ideas!!! |
| 17 | + |
| 18 | +--- |
| 19 | + |
| 20 | +- Intro JavaScript |
| 21 | + - What is it, what can you use it for |
| 22 | +- Setup js either via browser or via node. |
| 23 | + - Mentors decision. |
| 24 | +- Console.log |
| 25 | + - Depending on node or browser explain where the logs can be found. |
| 26 | +- Variable declaration and assignment |
| 27 | + - `var` |
| 28 | + - `let` |
| 29 | + - `const` - Always use `const` until it won't `let` you |
| 30 | +- Variable types |
| 31 | + - Typeof |
| 32 | + - `String` |
| 33 | + - Indexes - low priority |
| 34 | + - `.length` - low priority |
| 35 | + - `.toLowerCase` - low priority |
| 36 | + - `Number` |
| 37 | + - Show float and int is just a number in js |
| 38 | + - `Array` |
| 39 | + - Creation |
| 40 | + - Indexing |
| 41 | + - Items |
| 42 | + - No map, filter, push etc! |
| 43 | + - `Boolean` - Students investigate `boolean` and explain for fellow students |
| 44 | + - [Code inspiration](#variable-types) |
| 45 | + - [Exercises](#variable-types-1) |
| 46 | +- Comparison operators |
| 47 | + - Equality operators |
| 48 | + - Equality `==` |
| 49 | + - Inequality `!=` |
| 50 | + - Identity / strict equality `===` |
| 51 | + - Non-identity / strict inequality `!==` |
| 52 | + - Why does `7 == '7'` returns true and `9 === '9'` returns false? |
| 53 | + - Relational operators |
| 54 | + - Greater than operator `>` |
| 55 | + - Greater than or equal operator `>=` |
| 56 | + - Less than operator `<` |
| 57 | + - Less than or equal operator `<=` |
| 58 | + - [Code inspiration](#Equality) |
| 59 | +- Arithmetic operators |
| 60 | + - Addition `+` - also for strings |
| 61 | + - Subtraction `-` |
| 62 | + - Multiplication `*` |
| 63 | + - Division `/` |
| 64 | + - Remainder (sometimes called modulo) `%` - Students investigate how modulo works |
| 65 | + - [Code inspiration](#arithmetic-operators) |
| 66 | + - [Exercise](#follow-up-exercises) |
| 67 | +- Errors |
| 68 | + - How to read and fix errors. Show some practical examples. |
| 69 | + - [Exercise](#fix-the-errors) |
| 70 | +- [Last exercise, pizza project](#pizza-project) |
| 71 | + |
| 72 | + |
| 73 | +## Code inspiration |
| 74 | + |
| 75 | +### Variable types |
| 76 | + |
| 77 | +```js |
| 78 | +console.log('Hello world'); |
| 79 | + |
| 80 | +var x; |
| 81 | +x = 22; |
| 82 | + |
| 83 | + |
| 84 | +x = 33; |
| 85 | +var x = 22; |
| 86 | + |
| 87 | + |
| 88 | +const test = 1; |
| 89 | +// Bad, we get an error! |
| 90 | +test = 2; |
| 91 | + |
| 92 | +let letTest = 4; |
| 93 | +console.log(letTest); |
| 94 | +letTest = 20; |
| 95 | +console.log(letTest); |
| 96 | + |
| 97 | +// types: |
| 98 | +// Number |
| 99 | +let numberConst = 2; |
| 100 | +console.log(numberConst); |
| 101 | +console.log(typeof numberConst); |
| 102 | +// BAD BAD BAD NAMING!!!! |
| 103 | +numberConst = 'hello'; |
| 104 | +console.log(typeof numberConst); |
| 105 | + |
| 106 | +// String |
| 107 | +const stringConst = 'Write some text'; |
| 108 | +console.log(stringConst); |
| 109 | + |
| 110 | +// Boolean |
| 111 | +const booleanConst = false; |
| 112 | +console.log(booleanConst); |
| 113 | +console.log(typeof booleanConst); |
| 114 | + |
| 115 | +// Array |
| 116 | +const arrayConst = []; |
| 117 | +const shoppingList = ['egg', 'apples', 'flour', 3, false]; |
| 118 | +console.log(shoppingList); |
| 119 | +const shoppingListType = typeof shoppingList; |
| 120 | +console.log(typeof shoppingListType); |
| 121 | + |
| 122 | +console.log(shoppingList[1]); |
| 123 | +console.log(typeof shoppingList[4]); |
| 124 | + |
| 125 | +const shoppingListApples = shoppingList[1]; |
| 126 | +const lastItemShoppingList = shoppingList[4]; |
| 127 | +console.log(lastItemShoppingList); |
| 128 | +console.log(typeof lastItemShoppingList); |
| 129 | + |
| 130 | +// undefined |
| 131 | +const undefinedExample = shoppingList[5]; |
| 132 | + |
| 133 | +let undefined1; |
| 134 | +console.log(undefined1); |
| 135 | +console.log(typeof undefined1); |
| 136 | + |
| 137 | +console.log(typeof '0'); |
| 138 | +const stringConst2 = " asd"; |
| 139 | +console.log(stringConst2); |
| 140 | + |
| 141 | +console.log(stringConst2[0]); |
| 142 | +console.log(shoppingList.length); |
| 143 | +console.log(stringConst2.length); |
| 144 | +``` |
| 145 | + |
| 146 | +### Equality |
| 147 | +```js |
| 148 | +console.log(1 == 1); |
| 149 | +console.log(1 == 2); |
| 150 | + |
| 151 | +console.log(1 != 2); |
| 152 | + |
| 153 | +console.log('HELLO' == 2); |
| 154 | + |
| 155 | +console.log('1' == 1); |
| 156 | +// both value and type should be true |
| 157 | +console.log('1' !== 1); |
| 158 | + |
| 159 | +console.log(1 > 8); |
| 160 | + |
| 161 | +console.log(1 < 8); |
| 162 | + |
| 163 | +console.log(1 <= 1); |
| 164 | + |
| 165 | + |
| 166 | +console.log(1 === 1 && 3 === 4); |
| 167 | +console.log((1 !== 1 || 3 === 4) && true ); |
| 168 | +``` |
| 169 | + |
| 170 | +### Arithmetic operators |
| 171 | +```js |
| 172 | +console.log(1 + 2); |
| 173 | + |
| 174 | +console.log(1 - 2); |
| 175 | + |
| 176 | +console.log(10 / 5); |
| 177 | + |
| 178 | +console.log(10 * 5); |
| 179 | +console.log(21 / 5); |
| 180 | +console.log(21 % 5); |
| 181 | + |
| 182 | +console.log("hello " + 23); |
| 183 | +console.log("hello " + "23"); |
| 184 | +``` |
| 185 | + |
| 186 | +## Exercises |
| 187 | + |
| 188 | +## Variable types |
| 189 | +With pen and paper write down what is logged out: |
| 190 | + |
| 191 | +```js |
| 192 | +// Types |
| 193 | +console.log(typeof 3); |
| 194 | +console.log(typeof -33); |
| 195 | +console.log(typeof '3'); |
| 196 | +const threeConst = 3; |
| 197 | +console.log(threeConst); |
| 198 | +let threeLet = 3; |
| 199 | +console.log(threeLet); |
| 200 | +console.log(typeof 'console.log("console.log(console.log(""))")'); |
| 201 | +console.log(typeof typeof 45); |
| 202 | +const names = ['benjamin', 'Christopher']; |
| 203 | +console.log(typeof names[0]); |
| 204 | +console.log(typeof [3][0]); |
| 205 | +console.log(typeof true); |
| 206 | +``` |
| 207 | + |
| 208 | +### Follow up exercises |
| 209 | +1. Create a variable that is 24 times 55 |
| 210 | +2. Create a const and set it to be equal to your name |
| 211 | +3. With javascript `console.log` the first character in your name |
| 212 | +4. Create an array with 3 strings, three numbers and three booleans |
| 213 | +5. `console.log` the 4. element in the array made above |
| 214 | +6. *Optional* with javascript `console.log` the last character in your name. |
| 215 | + |
| 216 | + |
| 217 | +### Fix the errors |
| 218 | +Fix the errors in this script: |
| 219 | + |
| 220 | +```js |
| 221 | +const name = 'benjamin'; |
| 222 | +name = 'benjamin-better'; |
| 223 | + |
| 224 | +const pizzaPrice = 78; |
| 225 | +const pizzaPriceDiscounted = pizzaprice - 10; |
| 226 | + |
| 227 | +const users = ['peter', 'Johnny', 'Børge']; |
| 228 | + |
| 229 | +const lastUser = users[3]; |
| 230 | + |
| 231 | +``` |
| 232 | + |
| 233 | +### Pizza project |
| 234 | + |
| 235 | +#### Part 1 |
| 236 | +1. Create a special new folder called "pizza-exercise" |
| 237 | +2. Inside the folder create a new html file called "index.html" |
| 238 | +3. Also inside the folder create a new JavaScript file called "pizza.js" |
| 239 | +4. Remember to Include the pizza.js script in the html file |
| 240 | +5. Write a log statement, so you know that your javascript code is running: |
| 241 | +```console.log("I love pizza");``` |
| 242 | +6. Create a variable to store the name of your favourite pizza |
| 243 | +7. Create a variable to store the price of the pizza |
| 244 | +8. Now log at statement to the console that will show the pizza man the entire pizza order in a language he understands, eg. like this: |
| 245 | +```New pizza order: <name of pizza>. The price of the pizza is: <price of pizza>``` |
| 246 | + |
| 247 | + |
| 248 | +#### Part 2 |
| 249 | +Now we will modify the program so that you can order multiple pizzas and also decide if the pizzas should be family size |
| 250 | + |
| 251 | +1. Create a new variable to store the amount of pizzas you would like to order |
| 252 | + |
| 253 | +2. Create a new variable to store whether or not you would to order a family size pizza. |
| 254 | + |
| 255 | +3. Now write a formula to calculate the total price of your pizza order, and save it in a variable called totalPrice (if the pizza is family size the prize of the pizza is doubled. |
| 256 | + |
| 257 | +4. Modify the log statement for the pizza man so it includes wether or not the pizza is family size, and now show the total price of the order |
| 258 | +```New pizza order: <amount of pizzas> <family or not?> <name of pizza>. Total cost for the order is: <total price>``` |
| 259 | + |
| 260 | +5. Try to change the price of the pizza and if the pizza should be family size, and then check if the total price is calculated correctly. |
| 261 | + |
0 commit comments