You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> Please help us improve and share your feedback! If you find better tutorials
2
-
or links, please share them by [opening a pull request](https://github.com/HackYourFuture/JavaScript2/pulls).
1
+
> If you are following the HackYourFuture curriculum we recommend you to start with module 1: [HTML/CSS/GIT](https://github.com/HackYourFuture/HTML-CSS). To get a complete overview of the HackYourFuture curriculum first, click [here](https://github.com/HackYourFuture/curriculum).
3
2
4
-
# HackYourFuture - JavaScript 2
3
+
> Please help us improve and share your feedback! If you find better tutorials or links, please share them by [opening a pull request](https://github.com/HackYourFuture/JavaScript1/pulls).
5
4
6
-
Here you can find course content and homework for the JavaScript2 module
5
+
# Module #3 - JavaScript 2: DOM Manipulation (Frontend)
7
6
8
-
|Week|Topic|Read|Homework|
9
-
|----|-----|----|--------|
10
-
|1.|• Capturing user input through forms <br>• [Events](http://javascript.info/introduction-browser-events)<br>• [Basic DOM manipulations](../../../fundamentals/blob/master/fundamentals/DOM_manipulation.md)<br>• [Code debugging using the browser](http://javascript.info/debugging-chrome) <br>• [Code commenting](../../../fundamentals/blob/master/fundamentals/code_commenting.md)<br>• Structuring code files<br>• [Code formatting](../../../fundamentals/blob/master/fundamentals/code_formatting.md)<br>• [Handing in homework via PR](../../..//fundamentals/blob/master/fundamentals/homework_pr.md)|[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)|
If you were to ask a random person on the street the question "What is a browser?", you'll most likely get a variety of (incorrect) answers. For proof, check [this](https://www.youtube.com/watch?v=o4MwTvtyrUQ) out.
10
+
11
+
You might be one of those people right now, but after this module no more.
12
+
13
+
## Learning goals
14
+
15
+
In order to successfully complete this module you will need to master the following:
16
+
17
+
-
18
+
19
+
- Learn how to think like a programmer
20
+
21
+
## How to use this repository
22
+
23
+
This repository consists of 3 essential parts:
24
+
25
+
1.`Reading materials`: this document contains all the required theory you need to know _**while**_ you're coding. It's meant as both study material and as a reference to understand what you're doing.
26
+
2.`Homework`: this document contains the instructions for each week's homework.
27
+
3.`Lesson Plans`: this part is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well!
28
+
29
+
After your first class you should start off with checking the `reading materials` for that week. At the beginning that would be the [Week 1 Reading](/Week1/README.md). Study all the concepts and try to get the gist of everything. After, you can get started with the `homework` for that week.
30
+
31
+
If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack!
| 1. | Document-Object Model (DOM), DOM manipulation |[Reading W1](/Week1/README.md)|[Homework W1](/Week1/MAKEME.md)|[Lesson Plan W1](/Week1/MAKEME.md)|
38
+
| 2. | , Cookies & Sessions |[Reading W2](/Week2/README.md)|[Homework W2](/Week2/MAKEME.md)|[Lesson Plan W2](/Week1/MAKEME.md)|
At the end of this module you'll be doing a formative test. It will be done on **paper** and will consist of **4 exercises** that will test your JavaScript1 and JavaScript2 knowledge.
16
42
17
-
Why on paper, you might ask? Fundamental understanding should become intuitive. Only after having learned and mastered a concept deeply will you be able to use it creatively. If you rely too much on others, or Google, you'll make it very hard to cultivate the habit to think for yourself.
43
+
At the end of this module you'll be doing a formative test. It will be done on **paper** and will consist of **4 exercises** that will test your JavaScript1 and JavaScript2 knowledge.
44
+
45
+
Why on paper, you might ask? Fundamental understanding should become intuitive. Only after having learned and mastered a concept deeply will you be able to use it creatively. If you rely too much on others, on Google or your code editor to do your thinking you'll make it very hard to cultivate the habit to think for yourself.
18
46
19
47
Also important to note: this test is done for 2 reasons only.
20
48
21
-
(1) **HackYourFuture wants to know** what skill level you are at.
49
+
(1) **HackYourFuture wants to know** what skill level you are at.
22
50
23
51
(2) The test will **give you an indication** of what skill level you are at.
24
52
53
+
## Finished?
54
+
55
+
Did you finish the module? Good job! You're doing great!
25
56
26
-
### Overall
27
-
A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](../../../fundamentals/blob/master/fundamentals/README.md) and research/ ask for help (Slack!) with the concepts that are not entirely clear.
57
+
If you feel ready for the next challenge, click [here](https://www.github.com/HackYourFuture/JavaScript3) to go to JavaScript3!
28
58
29
-
*The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it :)*
59
+
_The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it :)_
30
60
31
61
<arel="license"href="http://creativecommons.org/licenses/by/4.0/"><imgalt="Creative Commons License"style="border-width:0"src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <arel="license"href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
2. Modify the VSCode User Settings to include the settings listed below. If a particular setting is already present in your User Settings, make sure that the setting value listed below is used and change it if necessary.
22
+
A browser is software that allows you to access websites.
29
23
30
-
To open your user and workspace settings, use the following VS Code menu command:
24
+
### How a browser works
31
25
32
-
- On Windows/Linux - **File** > **Preferences** > **Settings**
33
-
- On macOS - **Code** > **Preferences** > **Settings**
26
+
[How a web browser functions](https://www.youtube.com/watch?v=z0HN-fG6oT4)
34
27
35
-
Then, click on the `{ }` button in the top-right corner of the settings screen to access the settings in JSON format.
28
+
## 2. What is the Document-Object Model (DOM)?
36
29
37
-
38
-
```json
39
-
/// Place your settings in this file to overwrite the default settings
40
-
{
41
-
"editor.detectIndentation": false,
42
-
"editor.formatOnSave": true,
43
-
"editor.minimap.enabled": false,
44
-
"editor.renderIndentGuides": true,
45
-
"editor.tabSize": 2,
46
-
"editor.codeActionsOnSave": {
47
-
"source.fixAll": true
48
-
},
49
-
"eslint.autoFixOnSave": true,
50
-
"files.autoSave": "onFocusChange",
51
-
"prettier.printWidth": 100,
52
-
"prettier.singleQuote": true,
53
-
"prettier.trailingComma": "all"
54
-
}
55
-
```
30
+
### JavaScript and the browser
56
31
57
-
3. Install the ESLint CLI tool globally by issuing the following command from the command line:
32
+
### Traversing the DOM
58
33
59
-
```
60
-
npm install -g eslint-cli
61
-
```
34
+
-[Traversing the DOM with JavaScript](https://zellwk.com/blog/dom-traversals/)
62
35
63
-
4. Fork this repository (i.e., **JavaScript2**) and clone your fork to your laptop.
64
-
65
-
5. Open the `JavaScript2` folder from the cloned repository in VSCode.
66
-
67
-
6. Open a terminal window in VSCode and type the following command:
68
-
69
-
```
70
-
npm install
71
-
```
72
-
73
-
## Review of JavaScript1
74
-
75
-
As a refresher, go through the topics of JavaScript1:
76
-
77
-
### Week 2
78
-
79
-
-[Variables (var, let, const)](./../../../../fundamentals/blob/master/fundamentals/variables.md)
80
-
-[Basic Data types (Strings, Numbers, Arrays, Booleans)](./../../../../fundamentals/blob/master/fundamentals/values.md)
* Chapter 13: [JavaScript and the Browser](http://eloquentjavascript.net/13_browser.html)
112
57
113
-
These chapters from _Eloquent JavaScript_ give in-depth explanations of the topics that will be discussed during the lecture. Highly recommended (if time permits).
114
-
115
-
- Chapter 13: [JavaScript and the Browser](http://eloquentjavascript.net/13_browser.html)
This chapter from _Eloquent JavaScript_ gives in-depth explanations of the topics that will be discussed during the lecture. Highly recommended (if time permits).
-[Learning JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#detailnamespacing) up to and including chapter 3
19
+
## Finished?
20
20
21
-
_Please go through the material and come to class prepared!_
21
+
Are you finished with going through the materials? High five! If you feel ready to get practical, click [here](./MAKEME.md).
0 commit comments