From f476157a0a0b8c114aa4602d8bc118fdc28accf9 Mon Sep 17 00:00:00 2001 From: Kimberley Cook Date: Tue, 27 Apr 2021 12:06:56 +0100 Subject: [PATCH 1/2] copy for Js tutorial 2 --- js/lesson2/tutorial.md | 35 ++++++++++++++++++++++++++--------- 1 file changed, 26 insertions(+), 9 deletions(-) diff --git a/js/lesson2/tutorial.md b/js/lesson2/tutorial.md index 77501305..904c59e8 100644 --- a/js/lesson2/tutorial.md +++ b/js/lesson2/tutorial.md @@ -42,7 +42,7 @@ var person = { console.log('Hello ' + person.first_name + '!'); ``` -We're going to introduce one more important type: **booleans**. A +We are now going to introduce one more important type: **booleans**. A boolean can only be `true` or `false`, for example: ```js @@ -84,7 +84,7 @@ console.log('Division: x / y = ' + division); // Division: x / y = 2 #### More maths -Other basic but useful math operators are `%`, `**`, `++` and `--`: +Other useful math operators are `%`, `**`, `++` and `--`: > The modulus `%` operator returns the remainder when dividing one operand by another. @@ -137,7 +137,7 @@ console.log('Apples and oranges are different: ' + notEqual); ``` > You may also see `==` and `!=`, these are similar but have some quirks so it's generally recommended to avoid them. -> You can just use `===` and `!==` and they will +> You can simply use `===` and `!==` and they will > always do what you expect. The `>` and `<` operators are "greater than" and "less than". You can @@ -155,6 +155,7 @@ var lessStudents = students < pizzas; console.log('Are there fewer students than pizzas?' + lessStudents); ``` +> Play around with changing the `coaches`, `students` and `pizzas` variable numbers to familiarise yourself with it more. You can also combine operators. @@ -177,6 +178,8 @@ if (codebarIsAwesome) { } ``` +> Change the `codebarIsAwesome` variable to false, what happens now? + You can use an expression inside an if statement. ```js @@ -205,6 +208,18 @@ if (totalPeople > pizzas) { } ``` +#### Ternaries - Additional learning + +In the latest versions of JavaScript you may see if/else statements written slighlty differently. We believe teaching the above way first helps cement how they work, however if you're working with a code base that uses the latest JavaScript you will see it written this way. + +The condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:) and finally the expression to execute if the condition is falsy. For example: + +```js +totalPeople > pizzas + ? console.log('We have more people than pizzas.') + : console.log('We have waaay too much pizza. That can never be bad! :)') +``` + ## Loops A loop is used to execute a set of statements repeatedly until a condition is met. @@ -219,9 +234,9 @@ while (test) { } ``` -When the while loop starts, the test is checked. If it is false, then the while loop is skipped. If the test is true, then just like an `if` block the statements in the curly braces are executed. +When the while loop starts, the test is checked. If it is false, then the while loop is skipped. If the test is true, then like an `if` block the statements in the curly braces are executed. -The difference is in what happens after the statements in the block. With an `if`, everything is finished and the statements below the if block are executed. With a `while`, we go back up to the test. If the test is still true, the statements in the block are executed again, and so on until the test is false. This is why we call it a loop. +The difference is what happens after the statements in the block. With an `if`, everything is finished and the statements below the if block are executed. With a `while`, we go back up to the test. If the test is still true, the statements in the block are executed again, and so on until the test is false. This is why we call it a loop. For example, if we wanted to set a timer on an online ticket outlet, we could count the timer down and while it hasn't reached zero, the option to buy the ticket could still be available. @@ -263,7 +278,7 @@ for (/* before loop starts */; /* test before each iteration */; /* after each i The stuff in the round brackets is split into three parts by `;`. The first part is used once, before the loop begins. It's a good place to set an initial value for a counter (like `x = 1` in the `while` loop example). -The second part is a test, and just like in the `while` loop it is checked before each iteration. +The second part is a test, and like in the `while` loop it is checked before each iteration. The third part is executed after each loop iteration. It's useful for incrementing the loop counter. @@ -283,13 +298,13 @@ console.log('Total: ' + total); ``` > Another way to write the for loop is `for (var i = 1; i <= 10; i++)`. The `i++` is a short way of writing "increase i by one". -Even though `while` loops are more simple than `for` loops, it is more common to see `for` loops. This is because loops are often used to do something with arrays, which are introduced in the next section. +Even though `while` loops are simpler than `for` loops, it is more common to see `for` loops. This is because loops are often used to do something with arrays, which are introduced in the next section. ## Arrays An array is a simple *data structure*. It can hold a list of elements of the same or different types (e.g. strings, numbers, booleans). In an array each element can be accessed using the **index**. -It may be a bit confusing, but the first index of an array is 0, not 1. +Confusingly, the first index of an array is 0, not 1. To understand this better, let's create an array of strings. @@ -304,6 +319,8 @@ To retrieve an item from the array, we use **square bracket notation** To get the first item `animals[0]`, the second `animals[1]` etc. +> Create an array that includes 5 names and then access the 3rd item in the array? (don't forget to access the third item in the array you won't be doing [3]) + ### Properties - `length` The `length` property returns the size of the array @@ -341,7 +358,7 @@ var animals = ['dog', 'cat', 'rabbit', 'horse', 'elephant', 'monkey']; animals.unshift('cow'); animals.push('zebra'); -console.log(animals); +console.log(animals); // Expected output: ['cow', 'dog', 'cat', 'rabbit', 'horse', 'elephant', 'monkey', 'zebra'] ``` From 8c488d5b789134162f6de2fc351fd606643a9a1b Mon Sep 17 00:00:00 2001 From: Kimberley Cook Date: Wed, 28 Apr 2021 10:44:46 +0100 Subject: [PATCH 2/2] kriszta feedback --- js/lesson2/tutorial.md | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/js/lesson2/tutorial.md b/js/lesson2/tutorial.md index 904c59e8..413e757c 100644 --- a/js/lesson2/tutorial.md +++ b/js/lesson2/tutorial.md @@ -137,8 +137,7 @@ console.log('Apples and oranges are different: ' + notEqual); ``` > You may also see `==` and `!=`, these are similar but have some quirks so it's generally recommended to avoid them. -> You can simply use `===` and `!==` and they will -> always do what you expect. +> It is safer to use `===` and `!==` as they will always do what you expect. The `>` and `<` operators are "greater than" and "less than". You can use them to tell which of two numbers is bigger. @@ -155,7 +154,7 @@ var lessStudents = students < pizzas; console.log('Are there fewer students than pizzas?' + lessStudents); ``` -> Play around with changing the `coaches`, `students` and `pizzas` variable numbers to familiarise yourself with it more. +> Play around with changing the `coaches`, `students` and `pizzas` variable numbers to familiarise yourself with operators. You can also combine operators. @@ -210,9 +209,15 @@ if (totalPeople > pizzas) { #### Ternaries - Additional learning -In the latest versions of JavaScript you may see if/else statements written slighlty differently. We believe teaching the above way first helps cement how they work, however if you're working with a code base that uses the latest JavaScript you will see it written this way. +You may also see if/else statements written slightly differently. -The condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:) and finally the expression to execute if the condition is falsy. For example: +The condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:) and finally the expression to execute if the condition is falsy. + +```js +condition ? expression1 : expression2 +``` + +Using the people and pizza example we wrote above and using the Ternary Operator instead of if/else it would look like this: ```js totalPeople > pizzas @@ -304,7 +309,7 @@ Even though `while` loops are simpler than `for` loops, it is more common to see An array is a simple *data structure*. It can hold a list of elements of the same or different types (e.g. strings, numbers, booleans). In an array each element can be accessed using the **index**. -Confusingly, the first index of an array is 0, not 1. +Confusingly, the first index of an array in JavaScript is 0, not 1. To understand this better, let's create an array of strings. @@ -319,7 +324,7 @@ To retrieve an item from the array, we use **square bracket notation** To get the first item `animals[0]`, the second `animals[1]` etc. -> Create an array that includes 5 names and then access the 3rd item in the array? (don't forget to access the third item in the array you won't be doing [3]) +> Create an array that includes 5 names and then access the 3rd item in the array. (don't forget to access the third item in the array you won't be doing [3]) ### Properties - `length`