Skip to content

Commit b94ad3c

Browse files
committed
merged branches mauro_timir and MandT
2 parents 432e175 + 5975038 commit b94ad3c

21 files changed

Lines changed: 435 additions & 114 deletions

README.md

Lines changed: 5 additions & 7 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)|
10+
|0.|Preparation for your first JavaScript session|[Pre-reading](https://github.com/HackYourFuture/JavaScript/tree/master/Week0)|-|
11+
|1.|• Intro JavaScript (What is it, where can you 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)|
1412
|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)|
1513
|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)|
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:__

Week0/MAKEME.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
### What do do (summary)
2+
1. Make sure you finish the reading from last week (week0) and *type* the examples to understand what's happening
3+
1. Do the reading for this week (week1)
4+
1. Try the homework listed below
5+
6+
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
7+
8+
### Homework
9+
10+
1. In a file write the commands to type in the console to get to the Desktop of your computer and create a file called "HELLO.TXT"
11+
12+
1. Write the commands to add the string "I love JavaScript" to the HELLO.TXT file
13+
14+
Since we didn't make it as far as I would have liked last week please make sure you have done *all* the reading for week 0. You can find the reading here: https://github.com/HackYourFuture/JavaScript/tree/master/Week0
15+
16+
1. 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.
17+
For example:
18+
```
19+
var x = 9;
20+
var y = 'Hello';
21+
22+
if () {
23+
console.log('SAME TYPE');
24+
}
25+
26+
```
27+
28+
We didn't cover functions in class last week but I think you are all smart enough to try some code and understand what's happening. Here's a good introduction to functions: http://eloquentjavascript.net/03_functions.html which happens to be your reading for next week.
29+
30+
31+
1. I realize that we haven't covered all the topics but it will *really* help next class if you can try the following exercises:
32+
https://github.com/HackYourFuture/JavaScript/blob/master/Week1/MAKEME.md
33+
34+
### Next week
35+
36+
In addition to covering functions and the rest of the types in JavaScript we'll see how to run JS in the browser. If you're curious please have a look here: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions
37+
which shows some functions that are available only in the browser (as well as discussing functions).

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

Week2/conditional_example_1.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
var code = 1;
2+
let someOtherVariable = 'Hello';
3+
const PROGRAM_NAME = 'conditional_test1.js';
4+
5+
let color = 'BLACK';
6+
let age = Math.PI;
7+
8+
console.log(age);
9+
console.log(age = '0'); // What will this line print?
10+
console.log(age == 0); // What will this line print?
11+
// The result of a logical operator like == === < > <= >= || && is a BOOLEAN (true, false)
12+
console.log(age === 0); // What will this line print?
13+
// === checks the TYPE and VALUE of the variable
14+
15+
if (code === 1) {
16+
console.log("a " + color + ((age = 0 || age > 0) ? " used" : " new") + " car")
17+
};
18+
19+
if (code === 1) {
20+
console.log("a " + color + ((age <= 1 || age > 1) ? " used" : " new") + " car")
21+
};
22+
23+
// Maybe simpler and easier to read?
24+
if (code == 1) {
25+
var carState;
26+
if (age > 0) {
27+
carState = " used ";
28+
} else {
29+
carState = " new ";
30+
}
31+
console.log("a " + color + carState + " car");
32+
}
33+

Week2/conditional_example_2.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
2+
condition = true;
3+
// Conditional block
4+
if (condition) {
5+
// Do this thing if condition is true
6+
console.log('condition is true');
7+
} else if (condition2) {
8+
// Do this if condition2 is true
9+
console.log('condition2 is true');
10+
} else {
11+
// finally - end up here
12+
console.log('condition and condition2 are false');
13+
}
14+
15+
16+
// Programmers at some point in their career get LAZY
17+
// They don't want to type so much
18+
// So they make things like vi and shortcuts
19+
20+
// Here's the shortcut for conditional logic - TRY TO NEVER USE IT
21+
22+
// condition ? true thing : false thing
23+
let x = 3;
24+
(x > 2) ? console.log('x is greater than 2') : console.log('x is less than or equal to 2');

Week2/debug_example.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// Three ways to declare (and initialize) variables
2+
var code = 1;
3+
let someOtherVariable = 'Hello';
4+
const PROGRAM_NAME = 'debug_example.js';
5+
6+
let color = 'BLACK';
7+
let age = Math.PI;
8+
9+
console.log(age);
10+
console.log(age = '0'); // What will this line print?
11+
console.log(age == 0); // What will this line print?
12+
// The result of a logical operator like == === < > <= >= || && is a BOOLEAN (true, false)
13+
console.log(age === 0); // What will this line print?
14+
// // === checks the TYPE and VALUE of the variable
15+
function printCarInfo(code, color, age) {
16+
if (code === 1) {
17+
let carState = ' used';
18+
if (age === 0) {
19+
carState = ' new';
20+
}
21+
console.log('a ' + color + carState + ' car');
22+
};
23+
}
24+
// What is the difference between '' and ""
25+
// I use ' because I don't have to press SHIFT to get "
26+
printCarInfo(code, color, age);
27+
printCarInfo(1, 'PINKISH BLUE ORANGE(1)', 0); // expect 'a PINKISH BLUE ORANGE(1) new car'
28+
printCarInfo(0, 'PINKISH BLUE ORANGE(2)', 0); // expect nothing
29+
printCarInfo(1, 'Green', 0); // expect 'a Green new car'
30+
printCarInfo(1, 'Green', 1); // expect 'a Green used car'
31+
printCarInfo(1, 'Green', -999999); //
32+
printCarInfo(1, 'Green', 1000000); //
33+
printCarInfo(-1, null, -999999999); // expect nothing
34+
printCarInfo('1', null, -999999999); // expect nothing
35+
printCarInfo(1, null, -999999999); // expect 'a null used car'
36+
printCarInfo(1, undefined, -999999999); // expect 'a undefined used car'
37+
printCarInfo(1); // ?????? WTF ????? expect 'a undefined used car', 'an error', 'an exception' 'a used car'
38+
printCarInfo(2, 'Cyan', 1); // Expect nothing - code is not === 1

Week2/initialization_example.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
var testValue = '';
2+
console.log('var testValue = \'\'; gives: ', testValue);
3+
4+
var testValue = 0;
5+
console.log('var testValue = 0; gives: ', testValue);
6+
7+
var testValue = null;
8+
console.log('var testValue = null; gives: ', testValue);
9+
10+
var testValue = undefined;
11+
console.log('var testValue = undefined; gives: ', testValue);
12+
13+
var testValue;
14+
console.log('var testValue; gives: ', testValue);
15+
16+
var testValue = '';
17+
console.log('var testValue = \'\'; gives: ', testValue);
18+
19+
var someVar = testValue || 'Default';
20+
console.log('var someVar = testValue || \'Default\' = 0; gives: ', someVar);

Week3/MAKEME.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ And just for fun ... https://www.freecodecamp.com/challenges/sum-all-numbers-in-
1717

1818
And a custom DOM manipulation challenge :mortar_board:
1919

20-
1. Open a new js file and start by declaring in array with in there 10 strings. These strings should be of book title's you have read (or made up) and be lowercase without spaces or special characters so that you can use these later as Id's. (Example: Harry Potter's - The Chamber of Secrets --> `harry_potter_chamber_secrets`).
20+
1. Open a new js file and start by declaring in array with in there 10 strings. These strings should be of book title's you have read (or made up) and be lowercase without spaces or special characters so that you can use these later as Id's. (Example: Harry Potter's - The Chamber of Secrets -> `harry_potter_chamber_secrets`).
2121

2222
2. Create a basic html file called inxed.html and use it to load the js file, confirm the console.log show the array. (This is for debugging and making sure everything is in order. Delete it later when you're done :))
2323

@@ -29,4 +29,4 @@ And a custom DOM manipulation challenge :mortar_board:
2929

3030
6. Beautify your html page with css, add sources and alts to each of the images.
3131

32-
7. __Optional (expert)__ Download book covers for each book, construct a new Object which has as keys the bookId's again, and as value the path to the image source (e.g. `{"harry_potter_blabla": "./img/harry_potter_blabla.jpg", ...}`). Now loop over these entries (_hint: `Object.keys(objectName)` gives you an array containing the keys_). Then write a function which places an image at the corresponding `li` element. Remember that Objects are not ordered, so you cannot guarantee that the first key is the first `li` element. (_Hint: you could give each `li` item an `id` tag by modifying the function you made before_)
32+
7. __Optional (expert)__ Download book covers for each book, construct a new Object which has as keys the bookId's again, and as value the path to the image source (e.g. `{"harry_potter_blabla": "./img/harry_potter_blabla.jpg", ...}`). Now loop over these entries (_hint: `Object.keys(objectName)` gives you an array containing the keys_). Then write a function which places an image at the corresponding `li` element. Remember that Objects are not ordered, so you cannot guarantee that the first key is the first `li` element. (_Hint: you could give each `li` item an `id` tag by modifying the function you made before_)

Week3/README.md

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11

2-
# Refresher:
3-
• Function call() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call
4-
• Function apply() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
5-
• Function bind() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
6-
• Arguments - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/arguments
7-
- Array - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype
8-
- strict mode - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
9-
10-
Next week Unmesh will give you your first Git session, please look through the [GIT](https://github.com/HackYourFuture/Gitrepository) and read the learning goals
11-
12-
### Read this is preparation for the material taught in the upcoming class
13-
- JSON - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON
2+
# Refresher
3+
4+
Links to MDN (Mozilla Developer Network) topics:
5+
6+
- [Function.prototype.call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call)
7+
- [Function.prototype.apply()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)
8+
- [Function.prototype.bind()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)
9+
- [Arguments object](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/arguments)
10+
- [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype)
11+
- [Strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)
12+
13+
Next week **Unmesh** will give you your first Git session, please look through the [GIT](https://github.com/HackYourFuture/Gitrepository) and read the learning goals.
14+
15+
### Read this in preparation for the material taught in the upcoming class
16+
17+
- [JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) (MDN)
1418

0 commit comments

Comments
 (0)