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

Skip to content

Commit 38642f6

Browse files
authored
Merge pull request HackYourFuture#3 from mkruijt/master
clean-up js branches and documentation
2 parents 432e175 + 429e834 commit 38642f6

24 files changed

+997
-131
lines changed

README.md

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
1-
> Please help us improve and share your feedback! If you find better tutorials or links, please share them by opening a Pull Request.
21

2+
# HackYourJavaScript
33

4-
**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.**
4+
<!-- **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.** -->
55

6-
7-
# Hack Your JavaScript
86
Here you can find course content and homework for the JavaScript 1,2 and 3 modules
97

108
|Week|Topic|Read|Homework|
119
|----|-----|----|--------|
12-
|0.|Preparation for your first JavaScript session|[Reading Week 0](https://github.com/HackYourFuture/JavaScript/tree/master/Week0)|-|
13-
|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)|
14-
|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)|
15-
|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)|
10+
|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)|-|
11+
|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)|
12+
|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)|
13+
|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)|
1614
|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)|
1715
|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) |
1816
|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)|
1917
|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)|
2018
|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)|
21-
|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)|
19+
|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)|
2220

2321

2422
__Kind note:__

Week1/MAKEME.md

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,48 @@
11
## Assignments week 1:
22

3+
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
4+
5+
### Homework
6+
37
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.)
48

5-
2. Create a function that takes 3 arguments and returns the sum of the three arguments.
9+
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.
10+
For example:
11+
```js
12+
let x = 9;
13+
let y = 'Hello';
14+
15+
if () {
16+
console.log('SAME TYPE');
17+
}
18+
19+
```
20+
21+
3. Create a function that takes 3 arguments and returns the sum of the three arguments.
622

7-
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.)
23+
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.)
824

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

11-
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)`
27+
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)`
1228

13-
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"
29+
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"
1430

15-
5. Make a list of vehicles, you can add `"motorbike"`, `"caravan"`, `"bike"`, or more.
31+
8. Make a list of vehicles, you can add `"motorbike"`, `"caravan"`, `"bike"`, or more.
1632

17-
6. How do you get the third element from that list?
33+
9. How do you get the third element from that list?
1834

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

21-
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.)
37+
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.)
2238

23-
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?
39+
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?
2440

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

29-
11. Can you write the following without the `if` statement, but with just as a single line with `console.log(...);`?
45+
14. Can you write the following without the `if` statement, but with just as a single line with `console.log(...);`?
3046
```js
3147
if (3 == 3) {
3248
console.log("true")

Week1/REVIEW.md

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
# REVIEW JavaScript Basics week 1
2+
3+
## Variables
4+
5+
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.
6+
7+
### Variable declaration
8+
9+
Variables are "declared" using the `var`, `let` or `const` keyword:
10+
11+
```js
12+
var x;
13+
let foo;
14+
const bar;
15+
```
16+
17+
### let and const
18+
- read about [let](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
19+
- read about [const](https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Statements/const)
20+
- [let vs const] (http://wesbos.com/let-vs-const/)
21+
22+
Here, we say: "declare variable x and initialize it with the integer (number) 5".
23+
24+
```js
25+
let foo; // declare variable `foo`
26+
let foo = 6; // declare and assign a variable at the same time
27+
```
28+
29+
You can also assign a value to an existing variable:
30+
```js
31+
foo = 4; // change variable `foo`
32+
33+
```
34+
35+
36+
Basic Data types [Strings, Numbers, Arrays]
37+
38+
## Variable types
39+
40+
All variables have a type. In our example above, the variable `x` is a `number`. JavaScript supports the following types:
41+
42+
* `string`, e.g. "HackYourFuture"
43+
* `number`, e.g. 5, or 10.6
44+
* `boolean`, e.g. `true` or `false`
45+
* `array`\*, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']`
46+
* `object`, e.g. `{name: 'John', age: 24}`, or the special object `null`
47+
* `function`, e.g. `function () { return 4; }`
48+
* `symbol`
49+
50+
In addition, a variable may be `undefined`. This is also a special type.
51+
52+
To get the type of a variable, use the following code:
53+
54+
```js
55+
let x = 5;
56+
let typeOfX = typeof x; // -> "number"
57+
```
58+
59+
Note that I've put an asterisk behind 'array'. That is because in JavaScript, array is a special kind of object:
60+
61+
```js
62+
let arr = [1, 2, 3];
63+
let typeOfArr = typeof arr; // -> "object"
64+
```
65+
66+
However, in our communication, we will call these variables arrays.
67+
68+
### Null & undefined
69+
70+
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".
71+
72+
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.
73+
74+
```js
75+
let x;
76+
console.log(typeof x); // -> "undefined"
77+
```
78+
79+
80+
## Arrays
81+
82+
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".
83+
84+
When you want to access an element inside an array, you use an "index". This is the number that you put between brackets (`[]`).
85+
86+
Given the following code:
87+
88+
```js
89+
var arr = ['john', 'jane', 'jack'];
90+
console.log(arr[0]);
91+
```
92+
93+
The number `0` is the "index of the first element of array `arr`". Conversely, the element "at index 0 in array `arr` is `'john'`".
94+
95+
Instead of a number, you can also use a variable to access elements in an array, *as long as this variable is a number*:
96+
97+
```js
98+
let arr = ['john', 'jane', 'jack'];
99+
let a = 1;
100+
console.log(arr[a]); // -> jane
101+
```
102+
103+
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`.
104+
105+
106+
### 2.3 Basic operators
107+
108+
>Note the two different uses of the equals sign:
109+
A single equals sign (=) is used to assign a value to a variable.
110+
A triple equals sign (===) is used to compare two values (see Equality Operators).
111+
112+
### 2.5 Operator precedence
113+
114+
There are compound assignment operators such as +=. The following two assignments are equivalent:
115+
116+
```js
117+
x += 1;
118+
x = x + 1;
119+
```
120+
121+

Week2/MAKEME.md

Lines changed: 59 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,80 @@
1-
## Assignment week 2
1+
## Homework Week 2
22

3-
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:
3+
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:
44

5-
```js
6-
var obj1 = {
7-
a: 1,
8-
b: 'this is the letter b',
9-
c: { foo: 'what is a foo anyway',
10-
bar: [1,2,3,4]
5+
```js
6+
var obj1 = {
7+
a: 1,
8+
b: 'this is the letter b',
9+
c: { foo: 'what is a foo anyway',
10+
bar: [1,2,3,4]
11+
}
1112
}
12-
}
13-
14-
var obj2 = {
15-
a: '1',
16-
b: 'this is the letter b',
17-
c: { foo: 'what is a foo anyway',
18-
bar: [1,2,3,4]
13+
14+
var obj2 = {
15+
a: '1',
16+
b: 'this is the letter b',
17+
c: { foo: 'what is a foo anyway',
18+
bar: [1,2,3,4]
19+
}
1920
}
20-
}
21-
```
21+
```
2222

23-
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!
23+
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!
24+
25+
Note: give this exercise your best shot but don’t spend more than, say, one hour on it.
2426
2527
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.
2628
27-
```js
28-
function foo(func) {
29-
// What to do here?
30-
}
29+
```js
30+
function foo(func) {
31+
// What to do here?
32+
}
33+
34+
function bar() {
35+
console.log('Hello, I am bar!');
36+
}
37+
38+
foo(bar);
39+
```
3140
32-
function bar() {
33-
console.log('Hello, I am bar!');
34-
}
3541
36-
foo(bar);
37-
```
42+
Write some code to test two arrays for equality using `==` and `===`. Test the following:
43+
44+
```js
45+
var x = [1,2,3];
46+
var y = [1,2,3];
47+
var z = y;
48+
```
49+
What do you think will happen with `x == y`, `x === y` and `z == y` and `z == x`? Prove it!
50+
51+
> Don't cheat! Seriously - try it first.
52+
53+
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.
3854

55+
More insights from this [Stack Overflow question](http://stackoverflow.com/questions/22395357/how-to-compare-two-arrays-are-equal-using-javascript).
3956

40-
Write some code to test two arrays for equality using == and ===. Test the following:
41-
var x = [1,2,3];
42-
var y = [1,2,3];
43-
var z = y;
44-
What do you think will happen with x == y, x === y and z == y and z == x? Prove it!
45-
Don't cheat! Seriously - try it first.
46-
http://jsfiddle.net/jimschubert/85M4z/
47-
http://stackoverflow.com/questions/22395357/how-to-compare-two-arrays-are-equal-using-javascript
57+
**Some freeCodeCamp challenges:**
4858

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

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

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

5565
6. We did the following example in class:
5666

57-
```js
58-
var o1 = { foo: 'bar' };
59-
var o2 = { foo: 'bar' };
60-
var o3 = o2;
61-
```
62-
Show that changing o2 changes o3 (or not) and changing o2 changes o3 (or not).
63-
64-
Does the order that you assign (o3 = o2 or o2 = o3) matter?
67+
```js
68+
var o1 = { foo: 'bar' };
69+
var o2 = { foo: 'bar' };
70+
var o3 = o2;
71+
```
72+
Show that changing `o2` changes `o3` (or not) and changing ~~`o2` changes `o3`~~ `o1` changes `o3`(or not).
73+
74+
Does the order that you assign (`o3 = o2` or `o2 = o3`) matter? {Jim Cramer: ???}
6575

6676
### Some further reading:
67-
Have a look at https://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/
77+
78+
Have a look at [The Secret Life of JavaScript Primitives](https://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/)
6879

69-
'Coerce' means to try to change - so coercing `var x = '6'` to number means means trying to change the type to number temporarily.
80+
>Coerce' means to try to change - so coercing `var x = '6'` to number means trying to change the type to number temporarily.

Week2/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
# Reading material for the third lecture:
22

3-
TBA
3+
## TODO

0 commit comments

Comments
 (0)