diff --git a/VSCodeTips/VSCodeTips.md b/VSCodeTips/VSCodeTips.md
new file mode 100644
index 000000000..e5590d4bd
--- /dev/null
+++ b/VSCodeTips/VSCodeTips.md
@@ -0,0 +1,168 @@
+# VSCode Tips
+
+Here are some tips for getting up to speed with VSCode as you progress through this course.
+
+## Some useful extensions
+
+VSCode can be extended with _extensions_. There are two that we recommend you install from day 1.
+
+**Spell Checker**. We fully understand that you guys sometimes have difficulty with the correct English spelling when choosing names for variables and functions in your JavaScript programs. That is nothing to be ashamed of, but why not get some help from a handy extension?
+
+**ESLint**. This extension can check your JavaScript code for obvious errors, such as undefined variables, unused variables, etc.
+
+### Installation instructions
+
+1. Start up VSCode.
+
+2. Press the last button in the area in left margin (called the Activity Bar), shown below:
+
+
+3. In the input field in the upper left corner, type `code spellchecker` as pictured here:
+
+ 
+
+ (The indication 122K in this picture means that this extension has been downloaded 122,000 times. The five star rating indicates users like it a lot.)
+
+4. Press the green `install` button of **Code Spellchecker**.
+5. When the installation has finished, install the ESLint extension in a similar fashion (1.2 million downloads!):
+
+ 
+
+6. When this second extension has finished installing you will notice that the green `install` button changes to a blue `reload` button. But no need to press this button at this time (no harm done if you did).
+7. You now need to install a global Node package to support ESLint. Open a terminal window in VSCode by selecting **View**, **Integrated Terminal** from the menu bar.
+8. A terminal window opens in the lower half of the VSCode window. In this window, type the command below (on Linux and MacOS systems you may need to prefix this command with `sudo`, e.g. `sudo npm ...`):
+
+ ```
+ npm install -g eslint
+ ```
+
+
+9. Once the installation has finished close VSCode for now.
+
+## Using VSCode for your homework
+
+You’ll get the most out of VSCode if you organise your work in folders, say a folder for each week in the JavaScript module.
+
+(Later in the course you will be “cloning” Git repositories into local folders as the basis for your homework or projects.)
+
+To start work with VSCode in particular folder, start VSCode and open the relevant folder: from the menu, select **File**, **Open Folder**. VSCode will now open this folder to be your "project folder", until you close VSCode or open another folder.
+
+Assuming that you will use the folder for JavaScript work, you need to create a special file inside of it as required by ESlint.
+
+From the menu, select **View**, **Command Palette…** and type `create` as show in the picture below. Select: **Create** '.eslintrc.json' File.
+
+
+
+The `.eslintrc.json` file will now be created in the project folder. No need to touch this file at this time, it just needs to sit in your project folder. Later in the course you may wish to add additional "rules" to this file for more stringent code checking.
+
+## Creating your JavaScript file
+
+You are now ready to start adding your first JavaScript file.
+
+1. From the menu, select **File**, **New File**. This will create a new, empty file named "Untitled-1".
+2. Select **File**, **Save** from the menu and give your file a an appropriate name. Make sure that you give it an extension ".js" to make it a JavaScript file.
+3. Start entering your JavaScript code in the new file. Be on the watch out for green squirly underlines. These are warnings from either ESLint or the Spell Checker that something might be wrong.
+4. If you see green squirly underlines, hover your mouse pointer over the underlined text and a tooltip will appear that explains what might be wrong.
+5. You can also open the "problem" panel by selecting **View**, **Problems** from the menu to see any problems identified.
+6. Pay attention also to the lower left part of the VSCode window, i.e. the status bar. It gives an indication of the number of errors and warnings issued. In the picture below there are zero errors, 7 warnings (usually from ESLint) and 14 informational messages (usually from the spell checker).
+
+ 
+
+## Some useful short-cut commands
+
+In the previous section we frequently referred you to the menu bar to select commands. As you get more proficient with VSCode you may want to inspect these menus a little closer and take note of the short-cut commands listed in their right margin. For example, the short-cut command for **File**, **New** is listed as Ctrl+N (press `Ctrl` and `N` keys simultaneously) on a Windows or Linux PC and ⌘N on a Mac.
+
+Here are some short-cut commands that you will use many times a day and that we recommend you familiarise yourself with from day 1:
+
+| Operation | Windows | Mac | Linux |
+| --------- | ------- | ----- | ----- |
+| **Format Document** (make it pretty) | Shift‑Alt‑F | ⇧⌥F| Ctrl‑Shift‑I |
+| **Search** (Find)| Ctrl+F | ⌘F | Ctrl+F |
+| **Replace** (Find and replace) | Ctrl+H | ⌥⌘F | Ctrl+H |
+| **Rename Symbol** (change all names in file to a different name) | F2 | F2 | F2 |
+| Open an **Integrated Terminal** window in VSCode | Ctrl+' | ⌃\` | Ctrl+' |
+
+- **Format Document**. This command reformats your JavaScript file in a generally accepted standard format, using proper indenting, proper use of spaces, placing of curly braces and more. A neatly formatted document helps you to better understand your own code and your teachers, mentors and fellow students will love your for it too when they review your work.
+
+ *With VSCode at your finger tips there is no longer any excuse for submitting poorly formatted homework!*
+
+- **Search**. Search for specified text.
+- **Replace**. Replace specified text by some other text.
+
+ In the figure below the **Replace** pop-up window is shown. The **Search** pop-up is similar, but with one input field only.
+
+ 
+
+ - The `Aa` button activates the **Match Case** option.
+ - The `Ab|` button matches **Whole Words Only**.
+ - The `.*` button allow you to search using _regular expressions_, which you may encounter in later modules as an advanced JavaScript programming topic.
+ - The `c-b` button next to the second input field replaces the next occurrence of the matched text.
+ - The `ab-ac` button replaces **all** occurrences of the matched text.
+ - The left and right arrows move the cursor to the previous and next match.
+ - To get rid of the pop-up press `Esc` or press the `x` button.
+
+- **Rename Symbol**. This command renames all occurrences of a JavaScript variable or function name. To do so, move the text cursor to the variable or function name and press F2. A small pop-up window will appear in which you can type a new name. Press Enter to finalise the change or Esc to cancel it.
+
+- **Open an Integrated Terminal window**. We already covered this when we mentioned the **View**, **Integrated Terminal** menu command.
+
+## Running and debugging your code with the VSCode Node debugger
+
+If your JavaScript program is contained in a single file the easiest way to run and examine your code is the start straight in VSCode. Before you can run it you need to do a small preparation. This needs to be done only once per project folder.
+
+1. As illustrated in the figure below, press the **Debug** button in the left margin as indicated by the red triangle.
+
+ 
+
+2. You'll see the Debugger Pane in the left hand side of the screen as shown below. Press the "cog" button as indicated by the red triangle.
+
+ 
+
+3. Next you will prompted to select an environment. Choose `Node.js`. This produces a JSON file, displayed in a new editor tab with a contents as shown below.
+
+ ```
+ {
+ // Use IntelliSense to learn about possible Node.js debug attributes.
+ // Hover to view descriptions of existing attributes.
+ // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "type": "node",
+ "request": "launch",
+ "name": "Launch Program",
+ "program": "${file}"
+ }
+ ]
+ }
+ ```
+
+ At this his time no changes are necessary to this file. You can just close the editor tab.
+
+4. Next, press the **Explorer** button in the left margin as indicated by the red triangle in the figure below.
+
+ 
+
+5. Observe that VSCode has created a `.vscode` subfolder in your project folder where it keeps the JSON file just created and potentially other VSCode settings.
+6. You can now run your code in the debugger. Switch to the editor tab contains your program and press the green triangular button or, alternatively, press F5.
+7. Note that when your program finishes execution the debugger is still active. You can stop it by pressing the square red button.
+
+If you do not really need to debug your program (e.g., by placing breakpoints) etc, you may prefer to run your program in a terminal window. You can open an Integrated Terminal as explained earlier and type:
+
+```
+node prog.js
+```
+
+Replace `prog.js` with the actual file name of your program.
+
+If you want to run your program in terminal window independent of VSCode you should make sure you are in the same directory as the program you want to run.
+
+
+### Placing break points and inspecting variables
+
+This is covered in class.
+
+### Further information
+
+Please note that VSCode is actively being developed. At present there is a monthly release cycle, so don't be surprised when you are prompted once a month to update to the latest version. We advise you to update when prompted (naturally, not when you are in the middle something that you don't want interrupted).
+
+You can find detailed information about VSCode at the [VSCode web site](https://code.visualstudio.com/docs).
diff --git a/VSCodeTips/assets/27807986-f1f76762-6044-11e7-831d-dd2a6551f027.PNG b/VSCodeTips/assets/27807986-f1f76762-6044-11e7-831d-dd2a6551f027.PNG
new file mode 100644
index 000000000..f6bb34e60
Binary files /dev/null and b/VSCodeTips/assets/27807986-f1f76762-6044-11e7-831d-dd2a6551f027.PNG differ
diff --git a/VSCodeTips/assets/27807987-f1fa8406-6044-11e7-8284-b51cd1251921.PNG b/VSCodeTips/assets/27807987-f1fa8406-6044-11e7-8284-b51cd1251921.PNG
new file mode 100644
index 000000000..407df8051
Binary files /dev/null and b/VSCodeTips/assets/27807987-f1fa8406-6044-11e7-8284-b51cd1251921.PNG differ
diff --git a/VSCodeTips/assets/27809404-94afa762-604f-11e7-9d77-0d590bfccc19.png b/VSCodeTips/assets/27809404-94afa762-604f-11e7-9d77-0d590bfccc19.png
new file mode 100644
index 000000000..eab70baba
Binary files /dev/null and b/VSCodeTips/assets/27809404-94afa762-604f-11e7-9d77-0d590bfccc19.png differ
diff --git a/VSCodeTips/assets/27809813-64ae6c98-6053-11e7-8b6c-2bec3400ccd3.PNG b/VSCodeTips/assets/27809813-64ae6c98-6053-11e7-8b6c-2bec3400ccd3.PNG
new file mode 100644
index 000000000..a5d9324dd
Binary files /dev/null and b/VSCodeTips/assets/27809813-64ae6c98-6053-11e7-8b6c-2bec3400ccd3.PNG differ
diff --git a/VSCodeTips/assets/27810425-592063d4-605a-11e7-9e29-dfb02f1aed22.png b/VSCodeTips/assets/27810425-592063d4-605a-11e7-9e29-dfb02f1aed22.png
new file mode 100644
index 000000000..e2a193c6a
Binary files /dev/null and b/VSCodeTips/assets/27810425-592063d4-605a-11e7-9e29-dfb02f1aed22.png differ
diff --git a/VSCodeTips/assets/27833250-393c5a82-60d2-11e7-8713-648ec54abbed.png b/VSCodeTips/assets/27833250-393c5a82-60d2-11e7-8713-648ec54abbed.png
new file mode 100644
index 000000000..7afa7a8a8
Binary files /dev/null and b/VSCodeTips/assets/27833250-393c5a82-60d2-11e7-8713-648ec54abbed.png differ
diff --git a/VSCodeTips/assets/27833256-3d44da32-60d2-11e7-8f34-0bc0579a10c3.png b/VSCodeTips/assets/27833256-3d44da32-60d2-11e7-8f34-0bc0579a10c3.png
new file mode 100644
index 000000000..6018dcb0c
Binary files /dev/null and b/VSCodeTips/assets/27833256-3d44da32-60d2-11e7-8f34-0bc0579a10c3.png differ
diff --git a/VSCodeTips/assets/27833921-189a16f4-60d5-11e7-87ee-996cf97921ac.png b/VSCodeTips/assets/27833921-189a16f4-60d5-11e7-87ee-996cf97921ac.png
new file mode 100644
index 000000000..d6c6cb770
Binary files /dev/null and b/VSCodeTips/assets/27833921-189a16f4-60d5-11e7-87ee-996cf97921ac.png differ
diff --git a/VSCodeTips/assets/27857540-5db15d4a-6172-11e7-953f-347c592b4e4f.png b/VSCodeTips/assets/27857540-5db15d4a-6172-11e7-953f-347c592b4e4f.png
new file mode 100644
index 000000000..01747d7c9
Binary files /dev/null and b/VSCodeTips/assets/27857540-5db15d4a-6172-11e7-953f-347c592b4e4f.png differ
diff --git a/Week0/README.md b/Week0/README.md
index 3c6606ebd..8d1878b3d 100644
--- a/Week0/README.md
+++ b/Week0/README.md
@@ -13,6 +13,7 @@ In week one we will discuss the following topics:
## How to get started
1. Download and install the latest Current version of NodeJS - from https://nodejs.org/en/download/current/
To test that it was installed and running properly, go to your terminal and run the command: node -v You should get the node version printed on your terminal, for example, v8.8.0
+2. Although you are free to make you own choice of text/code editor to use during class and homework, we have good experiences with Microsoft's free VSCode editor, which is supported on Windows, Mac and Linux. Please refer to our [VSCode Tips](../VSCodeTips/VSCodeTips.md) for more information.
### Here are resources that we like you to read as a preparation for the coming lecture:
diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md
index 2c1134ce0..455b3d64e 100644
--- a/Week2/MAKEME.md
+++ b/Week2/MAKEME.md
@@ -48,13 +48,14 @@ In each assignment write at least two `console.log` statements to verify if your
4. Create a function named `vehicleType` that receives a color, and a code, 1 for car, 2 for motorbike. And prints "a blue motorbike" for example when called as `vehicleType("blue", 2)`
5. Can you write the following without the `if` statement, but with just as a single line with `console.log(...);`?
-```js
-if (3 == 3) {
- console.log("true")
-} else {
- console.log("false")
-}
-```
+
+ ```js
+ if (3 === 3) {
+ console.log("true")
+ } else {
+ console.log("false")
+ }
+ ```
6. Create a function called `vehicle`, like before, but takes another parameter called age, so that `vehicle("blue", 1, 5)` prints "a blue used car"
@@ -62,93 +63,70 @@ if (3 == 3) {
8. How do you get the third element from that list?
-9. Change the function `vehicle` to use the list of question 4. So that `vehicle("green", 3, 1)` prints "a green new caravan".
+9. Change the function `vehicle` to use the list of question 7. So that `vehicle("green", 3, 1)` prints "a green new caravan".
10. Use the list of vehicles to write an advertisement. So that it prints something like: `"Amazing Joe's Garage, we service cars, motorbikes, caravans and bikes."`. (Hint: use a `for` loop.)
-11. What if you add one more vehicle to the list, can you have that added to the advertisement without changing the code for question 7?
+11. What if you add one more vehicle to the list, can you have that added to the advertisement without changing the code for question 10?
-12. Create an empty object
+12. Create an empty object.
13. Create an object that contains the teachers that you have had so far for the different modules.
14. Add a property to the object you just created that contains the languages that they have taught you.
-
-15. We saw that we can pass functions as arguments to other functions. Your task is to write a function that takes another function as an argument and runs it.
-
-```js
- function foo(func) {
- // What to do here?
- }
-
- function bar() {
- console.log('Hello, I am bar!');
- }
-
- foo(bar);
-```
+
+ foo(bar);
+ ```
16. Write some code to test two arrays for equality using `==` and `===`. Test the following:
-```js
- let x = [1,2,3];
- let y = [1,2,3];
- let z = y;
-```
+ ```js
+ let x = [1,2,3];
+ let y = [1,2,3];
+ let z = y;
+ ```
-What do you think will happen with `x == y`, `x === y` and `z == y` and `z == x`? Prove it!
-
-> Don't cheat! Seriously - try it first.
-
+ What do you think will happen with `x == y`, `x === y` and `z == y` and `z == x`? Prove it!
+
+ > Don't cheat! Seriously - try it first.
+
-Check out this [Fiddle](http://jsfiddle.net/jimschubert/85M4z/). You need to open your browser’s Developer Tools to see the console output. Press the Run button in the upper right corner to run the code.
+ Check out this [Fiddle](http://jsfiddle.net/jimschubert/85M4z/). You need to open your browser’s Developer Tools to see the console output. Press the Run button in the upper right corner to run the code.
-More insights from this [Stack Overflow question](http://stackoverflow.com/questions/22395357/how-to-compare-two-arrays-are-equal-using-javascript).
+ More insights from this [Stack Overflow question](http://stackoverflow.com/questions/22395357/how-to-compare-two-arrays-are-equal-using-javascript).
17. Take a look at the following code:
-```js
- let o1 = { foo: 'bar' };
- let o2 = { foo: 'bar' };
- let o3 = o2;
+ ```js
+ let o1 = { foo: 'bar' };
+ let o2 = { foo: 'bar' };
+ let o3 = o2;
-```
+ ```
-Show that changing `o2` changes `o3` (or not) and changing ~~`o2` changes `o3`~~ `o1` changes `o3`(or not).
-
-Does the order that you assign (`o3 = o2` or `o2 = o3`) matter? {Jim Cramer: ???}
+ Show that changing `o2` changes `o3` (or not) and changing `o1` changes `o3`(or not).
+
+ Does the order that you assign (`o3 = o2` or `o2 = o3`) matter?
18. What does the following code return? (And why?)
-```js
-let bar = 42;
-typeof typeof bar;
-```
+
+ ```js
+ let bar = 42;
+ typeof typeof bar;
+ ```
> ‘Coerce' means to try to change - so coercing `var x = '6'` to number means trying to change the type to number temporarily.
@@ -176,3 +154,27 @@ How to hand in your homework:
:star: Additional resources and review: [here](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/REVIEW.md) (work in progress):star:
+
diff --git a/Week3/REVIEW.md b/Week3/REVIEW.md
index f47595fc2..43f40c245 100644
--- a/Week3/REVIEW.md
+++ b/Week3/REVIEW.md
@@ -2,75 +2,75 @@
```
This review covers:
-• More CLI
-• Scope, closures and 'this'
-• Array Manipulations
-• Basic DOM manipulations
-• Code commenting
+- More CLI
+- Scope, closures and 'this'
+- Array Manipulations
+- Basic DOM manipulations
+- Code commenting
```
## More CLI
Check out the CLI review here: https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-2.md
## Scope, closures and 'this'
-Scope, closure and 'this' are about *context*.
+Scope, closure and 'this' are about *context*.
This post explains things really well: [Recommended read by Todd Motto on Scope](https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/)
In this review we won't go over how JavaScript implements scope. We would just be rewriting the above post by Todd Motto.
-Instead, let's focus on a couple of important **words** that are used in explaining scope. Understanding the JavaScript side of things can be difficult if we don't fully understand these words.
+Instead, let's focus on a couple of important **words** that are used in explaining scope. Understanding the JavaScript side of things can be difficult if we don't fully understand these words.
### How to think about context?
-Consider the following sentences:
+Consider the following sentences:
> Eyad is a great cook. *He* loves to make ravioli.
-> Gijs is a great cook. *He* loves to make ravioli.
+> Gijs is a great cook. *He* loves to make ravioli.
In both cases, the second sentence is the exact same. However, the word *he* refers to a completely different person. He is defined by the context.
A second example:
> *He* loves to make ravioli.
-Now, when this sentence is written down without *he* being defined in the context, the sentence doesn't make any sense.
+Now, when this sentence is written down without *he* being defined in the context, the sentence doesn't make any sense.
### Context in programming:
-A JavaScript example:
+A JavaScript example:
```js
function myFunction() {
- const a = 'ravioli'
- console.log(a)
+ const a = 'ravioli';
+ console.log(a);
}
```
```js
function myFunction() {
- console.log(a)
+ console.log(a);
}
```
-In both cases, `console.log(a)` is the exact same. However, the context defines the value of a and whether it is defined at all.
+In both cases, `console.log(a)` is the exact same. However, the context defines the value of a and whether it is defined at all.
-### The Scope of the Context
+### The Scope of the Context
Let's first look at a definition of `scope`
> (1) the extent of the area or subject matter that something deals with or to which it is relevant.
> (2) the opportunity or possibility to do or deal with something.
So in words more applicable to our situation scope means:
-> code that is within the reach of our code.
+> code that is within the reach of our code.
Consider two completely different JavaScript files
```js
// aFile.js
-const a = 10
+const a = 10;
```
```js
// anotherFile.js
-console.log(a)
+console.log(a);
```
-When we run these files separately, the `console.log(a)` statement in anotherFile.js of course cannot reach `var a = 10`. Why? It is beyond the scope of our context. When we run a file in JavaScript, the program creates a new top-level context we call the global scope.
+When we run these files separately, the `console.log(a)` statement in anotherFile.js of course cannot reach `const a = 10`. Why? It is beyond the scope of our context. When we run a file in JavaScript, the program creates a new top-level context we call the global scope.
From now on, we'll call 'scoped context' simply 'scope'.
@@ -82,8 +82,8 @@ At school one learns that *he* will refer to the last masculine subject introduc
There are *five different ways* we can create a new context in JavaScript:
- The global context (as we already saw)
-- The simple function context
-- The object construction context
+- The simple function context
+- The object construction context
- The object method context
- The event listener context
@@ -91,11 +91,11 @@ More info on this [in this great post](https://zellwk.com/blog/this/)
## Array Manipulation
[MDN on Arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
-As we know by now, arrays are collections of values.
+As we know by now, arrays are collections of values.
-As we will see, there are often many ways to achieve the same thing when working arrays. Over time, you will add different techniques to your mental toolbox to achieve the result you want quickly.
+As we will see, there are often many ways to achieve the same thing when working arrays. Over time, you will add different techniques to your mental toolbox to achieve the result you want quickly.
-The basics.
+The basics.
- How do we create an array?
- How do we add items to an array?
@@ -106,98 +106,98 @@ The basics.
### How do we create an array?
-An array can be created multiple ways
+An array can be created multiple ways
-From scratch:
+From scratch:
```js
-const a = [] // result: []
-const b = ['item1', 'item2'] // result: ['item1', 'item2']
-const c = new Array() // result: []
-const d = new Array('item 1', 'item2') // result: ['item1', 'item2']
-const e = new Array(20) // result: [ <20 empty items> ]
-const f = new Array(20, 21) // result: [20, 21]
+const a = []; // result: []
+const b = ['item1', 'item2']; // result: ['item1', 'item2']
+const c = new Array(); // result: []
+const d = new Array('item 1', 'item2'); // result: ['item1', 'item2']
+const e = new Array(20); // result: [ <20 empty items> ]
+const f = new Array(20, 21); // result: [20, 21]
// Note that `e` and `f` are a beautiful example of how weird and unexpected JavaScript can be. You will probably use `a` most often.
```
From value (as an example, many ways to create an array from another value):
```js
-const a = 'hello world' // result: 'hello world'
-const b = a.split(' ') // result: ['hello', 'world' ]
+const a = 'hello world'; // result: 'hello world'
+const b = a.split(' '); // result: ['hello', 'world' ]
```
### Array length
Every array has as a 'static' property `length`. Meaning that we can easily get the amount of items in an array.
```js
-const f = ['hi','there']
-console.log(f.length) // 2
+const f = ['hi','there'];
+console.log(f.length); // 2
```
### Array index
We can access array elements through the position of the element in the array. This is called an index. Indices (plural of index) are 0-based, meaning that the first item's index is 0, the second element is 1.
```js
-const x = ['first', 'second', 'third']
-console.log(x[0]) // 'first'
+const x = ['first', 'second', 'third'];
+console.log(x[0]); // 'first'
-x[3] = 'fourth'
+x[3] = 'fourth';
```
-Note that arrays can have empty values. This should be avoided usually to prevent unexpected behaviour.
+Note that arrays can have empty values. This should be avoided usually to prevent unexpected behaviour.
```js
-x[10] = 'eleventh'
-console.log(x) // [ 'first', 'second', 'third', 'fourth', <6 empty items>, 'eleventh' ]
+x[10] = 'eleventh';
+console.log(x); // [ 'first', 'second', 'third', 'fourth', <6 empty items>, 'eleventh' ]
```
Next to the index, we have a wide range of tools to manipulate arrays.
### Array methods
-These methods are essential.
+These methods are essential.
**Extremely important is to remember to always ask these two questions**:
-• What is the return value of this method?
-• What does this method do to the original array it is used on?
+- What is the return value of this method?
+- What does this method do to the original array it is used on?
**Adding items**
-• [`.push()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) Add item to end of array
-• [`.unshift()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift) Add item to beginning of array
+- [`.push()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) Add item to end of array
+- [`.unshift()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift) Add item to beginning of array
**Removing items**
-• [`.shift()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) Remove first element from array
-• [`.pop()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop) Remove last element from array
-• [`.splice()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) Remove a specific element from array using index
+- [`.shift()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) Remove first element from array
+- [`.pop()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop) Remove last element from array
+- [`.splice()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) Remove a specific element from array using index
**Useful iterators over arrays**
-• [`.map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) creates a new array with the results of calling a provided function on every element in the calling array.
-• [`.filter()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) creates a new array with all elements that pass the test implemented by the provided function.
-• [`.sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) sorts the elements of an array in place and returns the array
+- [`.map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) creates a new array with the results of calling a provided function on every element in the calling array.
+- [`.filter()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) creates a new array with all elements that pass the test implemented by the provided function.
+- [`.sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) sorts the elements of an array in place and returns the array
## Basic DOM manipulations
-Using JavaScript we can access and manipulate the Document Object Model (DOM). We access the DOM through a global object called `document`.
+Using JavaScript we can access and manipulate the Document Object Model (DOM). We access the DOM through a global object called `document`.
-HTML
+HTML
```html
-
+
```
A common method to access the DOM is by giving a HTML element an ID, and then using the `document` method `getElementById()`
```js
-const x = document.getElementById('hello')
+const x = document.getElementById('hello');
```
Now we have stored a *reference* of how that HTML element is accessed through the DOM object. We can use this to manipulate the element.
```js
-x.innerHTML = 'hello'
+x.innerHTML = 'hello';
```
We can also create elements
```js
-const a = document.createElement('li')
-x.appendChild(a)
+const a = document.createElement('li');
+x.appendChild(a);
```
@@ -223,7 +223,7 @@ Coding **well** in JavaScript: [JSDoc](http://usejsdoc.org/)
[W3Schools](https://www.w3schools.com/html/html_comments.asp)
Comments
```html
-
@@ -244,15 +244,6 @@ lines
```
### When to comment?
-Now for the hard part: when to comment? When you work for different companies, you will see different styles. Embrace something you like, and then learn to let go. Google on "when to comment code?" and you'll find a big bunch of different opinions.
-
-The general concept is, however, that it is there to help make the code more easy to understand. Note, however, that comments can also make code more difficult to understand when not applied properly.
-
-
-
-
-
-
-
-
+Now for the hard part: when to comment? When you work for different companies, you will see different styles. Embrace something you like, and then learn to let go. Google on "when to comment code?" and you'll find a big bunch of different opinions.
+The general concept is, however, that it is there to help make the code more easy to understand. Note, however, that comments can also make code more difficult to understand when not applied properly.