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.

clean-up js branches and documentation #3

Merged
merged 46 commits into from
Aug 22, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
46 commits
Select commit Hold shift + click to select a range
c50cd0d
Updated homework
Razpudding May 25, 2017
dab4136
Fixed the thing
Razpudding May 27, 2017
b975f63
added files for week 8 and 9
Razpudding May 28, 2017
23593e4
Initial homework filler
Razpudding May 28, 2017
251b708
Updated links for week 8 and 9
Razpudding May 28, 2017
4f4507d
Updated the reading material for this week
Razpudding May 28, 2017
8b3f18d
Update README.md
May 28, 2017
929ab09
Updated hw
Razpudding May 28, 2017
92e0683
Update MAKEME.md
Razpudding May 28, 2017
debe240
Fixed layout
Razpudding May 28, 2017
160d5aa
Updated for week 9
Razpudding Jun 5, 2017
78ae5eb
Initial
Razpudding Jun 5, 2017
0e4e333
Updated linkes
Razpudding Jun 5, 2017
4adbe05
update
mkruijt Jun 6, 2017
5e8218f
clean up
mkruijt Jun 6, 2017
3befe29
update
mkruijt Jun 6, 2017
e88e3bd
Fixed broken link
Razpudding Jun 6, 2017
e030c77
Updated to include reviewing each others code
Razpudding Jun 6, 2017
1a8c569
Style fix
Razpudding Jun 6, 2017
45f859d
Create MAKEME.md
tkaria Jun 13, 2017
711b360
Update MAKEME.md
tkaria Jul 3, 2017
623e175
branch links
mkruijt Jul 3, 2017
7ac8510
moved homework for week 2 to week 3 + some cosmetics
remarcmij Jul 3, 2017
2424d65
Week 2 homework tweaks
remarcmij Jul 3, 2017
b3672f0
Week 3 readme cosmetical changes
remarcmij Jul 3, 2017
3f04410
Week 3 readme typo corrected
remarcmij Jul 3, 2017
e5c3674
Examples from Week 3 class
tkaria Jul 6, 2017
f58c3d2
added closure write-up and examples
remarcmij Jul 9, 2017
0577748
replaced gists with inline code
remarcmij Jul 9, 2017
eaefb3f
text tweaks
remarcmij Jul 9, 2017
62276f7
text tweaks
remarcmij Jul 9, 2017
fda8472
text tweaks
remarcmij Jul 10, 2017
40b50bf
text tweaks
remarcmij Jul 10, 2017
39453c1
text tweaks
remarcmij Jul 10, 2017
0949b99
text tweaks
remarcmij Jul 10, 2017
f6ae327
text tweaks
remarcmij Jul 10, 2017
8d81a33
Updated MAKEME with HYF Movies custom challenge
remarcmij Jul 18, 2017
c11ebca
Updated MAKEME Week5 for class 10
remarcmij Jul 19, 2017
86b6c1c
compare object based on Halim's homework
remarcmij Jul 20, 2017
56d5809
Updated Halim's object compare
remarcmij Jul 20, 2017
0feaa89
Use triple form of equality in Halim's object compare
remarcmij Jul 20, 2017
5975038
merged branches
mkruijt Aug 22, 2017
b94ad3c
merged branches mauro_timir and MandT
mkruijt Aug 22, 2017
f3737ed
changed shedule added review
mkruijt Aug 22, 2017
72f3d1a
added review week2
mkruijt Aug 22, 2017
429e834
spaces
mkruijt Aug 22, 2017
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 7 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,22 @@
> Please help us improve and share your feedback! If you find better tutorials or links, please share them by opening a Pull Request.

# HackYourJavaScript

**Class 10: please visit this [link](https://github.com/HackYourFuture/JavaScript/tree/MandT) (your specific branch "MandT") for the most recent information relevant to your class.**
<!-- **Class 10: please visit this [link](https://github.com/HackYourFuture/JavaScript/tree/master) (your specific branch "master") for the most recent information relevant to your class.** -->


# Hack Your JavaScript
Here you can find course content and homework for the JavaScript 1,2 and 3 modules

|Week|Topic|Read|Homework|
|----|-----|----|--------|
|0.|Preparation for your first JavaScript session|[Reading Week 0](https://github.com/HackYourFuture/JavaScript/tree/master/Week0)|-|
|1.|• Intro JavaScript (What is it, where can you<br> use it for)<br>• Basic Data types [Strings, Numbers, Arrays]<br>• Variables<br>• Operators<br>• Conditions <br>• Naming conventions| [CLI Reading Week 1](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md)| [Homework Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/MAKEME.md)|
|2.| • [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :heart: <br>Loops (for/while)<br>• Functions <br>• Closures <br>• Scope |[Reading Week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2)|[JS](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/MAKEME.md) + [CLI Homework Week 2](https://github.com/HackYourFuture/CommandLine/blob/master/HomeWork.md)|
|3.|• [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :balloon:<br>• Advanced data types [Objects] <br>• Array Manipulations <br>• Basic DOM manipulations [img src, innerHTML]<br>• Code commenting|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/MAKEME.md)|
|0.|Preparation for your first JavaScript session|[Pre-reading](https://github.com/HackYourFuture/JavaScript/tree/master/Week0) + [CLI Reading Week 1](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md)|-|
|1.|• [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :heart: <br>• Intro JavaScript (What is it, where can you use it for)<br>• Variables [var, let, const]<br>• Basic Data types [Strings, Numbers, Arrays]<br>• Operators| TBA | [Homework Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/MAKEME.md) + [CLI Homework Week 1](https://github.com/HackYourFuture/CommandLine/blob/master/HomeWork.md)|
|2.|• [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :balloon: <br>• Conditions <br>• Statements vs Expressions<br> • Loops (for/while)<br>• Functions <br>• Naming conventions|[Reading Week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2)|[Homework week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/MAKEME.md)|
|3.|• Advanced data types [Objects] <br>• Closures <br>• Scope <br>• Array Manipulations <br>• Basic DOM manipulations [img src, innerHTML]<br>• Code commenting|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/MAKEME.md)|
|4.|• First Git Session with Unmesh :smiling_imp:<br>• JSON<br>• Code debugging using the browser<br>• Functions + JSON/Arrays<br>• Code flow (order of execution) <br>• (capturing user input) <br>• Structuring code files|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/Week4)|[JS](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/MAKEME.md) + [Git Homework Week 4](https://github.com/HackYourFuture/Git/blob/master/Lecture-1.md)|
|5.|• Second Git Session :see_no_evil:<br>• Events<br>• Callbacks <br>• XHTTP Requests <br>• API calls|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5)|[Homework Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5/MAKEME.md) |
|6.|• Async VS Sync <br>• Polling<br>• Structure for a basic SPA <br> TEST :boom:|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6/MAKEME.md)|
|7.|• Third Git Session (Git Workflow :muscle:) <br>• Map, reduce filter|[Reading Week 7](https://github.com/HackYourFuture/JavaScript/tree/master/Week7)|[Homework Week 7](https://github.com/HackYourFuture/JavaScript/tree/master/Week7/MAKEME.md)|
|8.|• (re)writing data structures (in JSON)<br> • Closures <br>• Promises <br>|[Reading Week 8](https://github.com/HackYourFuture/JavaScript/tree/master/Week8/README.md)|[Homework Week 8](https://github.com/HackYourFuture/JavaScript/tree/master/Week8/MAKEME.md)|
|9.|ES6 :hatching_chick: <br>• Object Literals (and other patterns)<br>TEST :boom:|[Reading Week 9](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/README.md)|[Homework Week 9](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/MAKEME.md)|
|9.| • Object Literals (and other patterns)<br>TEST :boom:|[Reading Week 9](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/README.md)|[Homework Week 9](https://github.com/HackYourFuture/JavaScript/blob/master/Week9/MAKEME.md)|


__Kind note:__
Expand Down
40 changes: 28 additions & 12 deletions Week1/MAKEME.md
Original file line number Diff line number Diff line change
@@ -1,32 +1,48 @@
## Assignments week 1:

We covered a bit of command line usage in the first class and got a program running which is great. If you need a refresher for the command line please have a look here: https://github.com/HackYourFuture/CommandLine

### Homework

1. Create a `.js` file that prints `Hello` when you run it from the command line. (Hint: `node` is the program that can run your JavaScript files.)

2. Create a function that takes 3 arguments and returns the sum of the three arguments.
2. Write a program (like we did in class) that checks the types of two varibales and prints out `SAME TYPE` if they are the same type.
For example:
```js
let x = 9;
let y = 'Hello';

if () {
console.log('SAME TYPE');
}

```

3. Create a function that takes 3 arguments and returns the sum of the three arguments.

3. Create a function named `colorCar` that receives a color, and prints out, "a red car" for example. (Hint: put it in your file and run it like before.)
4. Create a function named `colorCar` that receives a color, and prints out, "a red car" for example. (Hint: put it in your file and run it like before.)

4. Create an object and a function that takes the object as a parameter and prints out all of its names and values.
5. Create an object and a function that takes the object as a parameter and prints out all of its names and values.

3. 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)`
6. 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)`

4. Create a function called `vehicle`, like before, but takes another parameter called age, so that `vehicle("blue", 1, 5)` prints "a blue used car"
7. Create a function called `vehicle`, like before, but takes another parameter called age, so that `vehicle("blue", 1, 5)` prints "a blue used car"

5. Make a list of vehicles, you can add `"motorbike"`, `"caravan"`, `"bike"`, or more.
8. Make a list of vehicles, you can add `"motorbike"`, `"caravan"`, `"bike"`, or more.

6. How do you get the third element from that list?
9. How do you get the third element from that list?

7. Change the function `vehicle` to use the list of question 5. So that `vehicle("green", 3, 1)` prints "a green new caravan".
10. Change the function `vehicle` to use the list of question 5. So that `vehicle("green", 3, 1)` prints "a green new caravan".

8. Use the list of vehicles to write an advertisment. So that it prints something like: `"Amazing Joe's Garage, we service cars, motorbikes, caravans and bikes."`. (Hint: use a `for` loop.)
11. Use the list of vehicles to write an advertisment. So that it prints something like: `"Amazing Joe's Garage, we service cars, motorbikes, caravans and bikes."`. (Hint: use a `for` loop.)

9. What if you add one more vehicle to the list, can you have that added to the advertisement without changing the code for question 8?
12. What if you add one more vehicle to the list, can you have that added to the advertisement without changing the code for question 8?

10. Write a program to answer the following questions:
13. Write a program to answer the following questions:
* Can you store multiple types in an array? Numbers and strings?
* Can you compare inifities? (Not in Eyad's world) - does 6/0 == 10/0? How can you test this?

11. Can you write the following without the `if` statement, but with just as a single line with `console.log(...);`?
14. 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")
Expand Down
121 changes: 121 additions & 0 deletions Week1/REVIEW.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
# REVIEW JavaScript Basics week 1

## Variables

A "variable" is a place where you can store information, such as a string, or a number. New variables in JavaScript are declared using one of three keywords: let, const, or var.

### Variable declaration

Variables are "declared" using the `var`, `let` or `const` keyword:

```js
var x;
let foo;
const bar;
```

### let and const
- read about [let](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
- read about [const](https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Statements/const)
- [let vs const] (http://wesbos.com/let-vs-const/)

Here, we say: "declare variable x and initialize it with the integer (number) 5".

```js
let foo; // declare variable `foo`
let foo = 6; // declare and assign a variable at the same time
```

You can also assign a value to an existing variable:
```js
foo = 4; // change variable `foo`

```


Basic Data types [Strings, Numbers, Arrays]

## Variable types

All variables have a type. In our example above, the variable `x` is a `number`. JavaScript supports the following types:

* `string`, e.g. "HackYourFuture"
* `number`, e.g. 5, or 10.6
* `boolean`, e.g. `true` or `false`
* `array`\*, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']`
* `object`, e.g. `{name: 'John', age: 24}`, or the special object `null`
* `function`, e.g. `function () { return 4; }`
* `symbol`

In addition, a variable may be `undefined`. This is also a special type.

To get the type of a variable, use the following code:

```js
let x = 5;
let typeOfX = typeof x; // -> "number"
```

Note that I've put an asterisk behind 'array'. That is because in JavaScript, array is a special kind of object:

```js
let arr = [1, 2, 3];
let typeOfArr = typeof arr; // -> "object"
```

However, in our communication, we will call these variables arrays.

### Null & 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".

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.

```js
let x;
console.log(typeof x); // -> "undefined"
```


## Arrays

Variables that are arrays contain a list of things, instead of just one thing. What's inside the array, we typically call "elements". So, the array `[1, 2, 3]` has three elements. The array `[]` has no elements and is therefore empty. The number of elements in an array is called its "length".

When you want to access an element inside an array, you use an "index". This is the number that you put between brackets (`[]`).

Given the following code:

```js
var arr = ['john', 'jane', 'jack'];
console.log(arr[0]);
```

The number `0` is the "index of the first element of array `arr`". Conversely, the element "at index 0 in array `arr` is `'john'`".

Instead of a number, you can also use a variable to access elements in an array, *as long as this variable is a number*:

```js
let arr = ['john', 'jane', 'jack'];
let a = 1;
console.log(arr[a]); // -> jane
```

If the index you use is not an integer (a whole number), or if it's less than `0` or if it's greater than or equal to the array's length, you will get back `undefined`.


### 2.3 Basic operators

>Note the two different uses of the equals sign:
A single equals sign (=) is used to assign a value to a variable.
A triple equals sign (===) is used to compare two values (see Equality Operators).

### 2.5 Operator precedence

There are compound assignment operators such as +=. The following two assignments are equivalent:

```js
x += 1;
x = x + 1;
```


107 changes: 59 additions & 48 deletions Week2/MAKEME.md
Original file line number Diff line number Diff line change
@@ -1,69 +1,80 @@
## Assignment week 2
## Homework Week 2

1. Create a function that takes two objects as parameters and compares them. You will actually need to write two functions - one that compares with == and one that compares with ===. Remember that objects can have objects inside of them so you'll need to find a way to compare every element of every object (types and values). For example:
1. Create a function that takes two objects as parameters and compares them. You will actually need to write two functions one that compares with `==` and one that compares with `===`. Remember that objects can have objects inside of them so you'll need to find a way to compare every element of every object (types and values). For example:

```js
var obj1 = {
a: 1,
b: 'this is the letter b',
c: { foo: 'what is a foo anyway',
bar: [1,2,3,4]
```js
var obj1 = {
a: 1,
b: 'this is the letter b',
c: { foo: 'what is a foo anyway',
bar: [1,2,3,4]
}
}
}

var obj2 = {
a: '1',
b: 'this is the letter b',
c: { foo: 'what is a foo anyway',
bar: [1,2,3,4]
var obj2 = {
a: '1',
b: 'this is the letter b',
c: { foo: 'what is a foo anyway',
bar: [1,2,3,4]
}
}
}
```
```

in our example we'll say that obj1 == obj2 is true and obj1 === obj2 is false. Make sure you can see why before you write any code!
In our example we'll say that `obj1 == obj2` is `true` and `obj1 === obj2` is `false`. Make sure you can see why before you write any code!

Note: give this exercise your best shot but don’t spend more than, say, one hour on it.

2. 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?
}
```js
function foo(func) {
// What to do here?
}

function bar() {
console.log('Hello, I am bar!');
}

foo(bar);
```

function bar() {
console.log('Hello, I am bar!');
}

foo(bar);
```
Write some code to test two arrays for equality using `==` and `===`. Test the following:

```js
var x = [1,2,3];
var y = [1,2,3];
var 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.

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).

Write some code to test two arrays for equality using == and ===. Test the following:
var x = [1,2,3];
var y = [1,2,3];
var 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.
http://jsfiddle.net/jimschubert/85M4z/
http://stackoverflow.com/questions/22395357/how-to-compare-two-arrays-are-equal-using-javascript
**Some freeCodeCamp challenges:**

3. https://www.freecodecamp.com/challenges/comparisons-with-the-logical-and-operator
3. [Comparisons with the Logical And Operator](https://www.freecodecamp.com/challenges/comparisons-with-the-logical-and-operator)

4. https://www.freecodecamp.com/challenges/record-collection
4. [Record Collection](https://www.freecodecamp.com/challenges/record-collection)

5. https://www.freecodecamp.com/challenges/iterate-over-arrays-with-map
5. [Iterate over Arrays with map](https://www.freecodecamp.com/challenges/iterate-over-arrays-with-map)

6. We did the following example in class:

```js
var o1 = { foo: 'bar' };
var o2 = { foo: 'bar' };
var o3 = o2;
```
Show that changing o2 changes o3 (or not) and changing o2 changes o3 (or not).

Does the order that you assign (o3 = o2 or o2 = o3) matter?
```js
var o1 = { foo: 'bar' };
var o2 = { foo: 'bar' };
var 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: ???}

### Some further reading:
Have a look at https://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/

Have a look at [The Secret Life of JavaScript Primitives](https://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/)

'Coerce' means to try to change - so coercing `var x = '6'` to number means means trying to change the type to number temporarily.
> ‘Coerce' means to try to change - so coercing `var x = '6'` to number means trying to change the type to number temporarily.
2 changes: 1 addition & 1 deletion Week2/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
# Reading material for the third lecture:

TBA
## TODO
Loading