hackyourfuture / javascript2

This repository contains all the material for the HackYourFuture module "JavaScript 2: DOM Manipulation"

DEPRECATED - JavaScript 2

This module has been replace with the Browsers module, find it here

You might be one of those people right now, but after this module no more. In **JavaScript2** you'll learn all about how to use JavaScript within the browser.

## Learning goals

In order to successfully complete this module you will need to master the following:

- Understand what the `DOM` is
- Use the basics of `DOM Manipulation`
- Differentiate between `synchronous` and `asynchronous` operations
- Gain awareness of the inner workings of JavaScript
- Learn to think based on `principles`, instead of libraries and frameworks

## How to use this repository

### Repository content

This repository consists of 3 essential parts:

1. `README`: this document contains all the required theory you need to understand **while** working on the homework. It contains not only the right resources to learn about the concepts, but also lectures done by HackYourFuture teachers. This is the **first thing** you should start with every week
2. `MAKEME`: this document contains the instructions for each week's homework. Start with the exercises rather quickly, so that you can ground the concepts you read about earlier.
3. `LESSONPLAN`: this document is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well!

### How to study

Let's say you are just starting out with the JavaScript2 module. This is what you do...

1. The week always starts on **Wednesday**. First thing you'll do is open the `README.md` for that week. For the first week of `JavaScript2`, that would be [Week1 Reading](/Week1/README.md)
2. You spend **Wednesday** and **Thursday** going over the resources and try to get a basic understanding of the concepts. In the meanwhile, you'll also implement any feedback you got on last week's homework (from the JavaScript1 module)
3. On **Friday** you start with the homework, found in the `MAKEME.md`. For the first week of `JavaScript2`, that would be [Week1 Homework](/Week1/MAKEME.md)
4. You spend **Friday** and **Saturday** playing around with the exercises and write down any questions you might have
5. **DEADLINE 1**: You'll submit any questions you might have before **Saturday 23.59**, in the class channel
6. On **Sunday** you'll attend class. It'll be of the Q&A format, meaning that there will be no new material. Instead your questions shall be discussed and you can learn from others
7. You spend **Monday** and **Tuesday** finalizing your homework
8. **DEADLINE 2**: You submit your homework to the right channels (GitHub) before **Tuesday 23.59**. If you can't make it on time, please communicate it with your mentor
9. Start the new week by going back to point 1!

In summary:

![Weekflow](assets/weekflow.png)

To have a more detailed overview of the guidelines, please read [this document](https://docs.google.com/document/d/1JUaEbxMQTyljAPFsWIbbLwwvvIXZ0VCHmCCN8RaeVIc/edit?usp=sharing) or ask your mentor/class on Slack!

### Video lectures

For each module HackYourFuture provides you with video lectures. These are made by experienced software developers who know what they're talking about. The main teacher for this module will be [Wilgert Velinga](https://hackyourfuture.slack.com/team/UGTGC0T41): senior frontend developer and consultant!

You can find out more about him here:

- [GitHub](https://github.com/wilgert)
- [@Wilgert on Slack](https://hackyourfuture.slack.com/team/UGTGC0T41)

Learn from Wilgert in the following playlist of videos he has made for you! (Click on the image to open the link)

<a href="https://www.youtube.com/playlist?list=PLVYDhqbgYpYU-7_oyPBkUuuis5bL1Dk8n" target="_blank"><img src="./assets/wilgert.png" width="600" height="350" alt="HYF Video" /></a>

## Planning

| Week | Topic                                                                | Reading Materials              | Homework                        | Lesson Plan                            |
| ---- | -------------------------------------------------------------------- | ------------------------------ | ------------------------------- | -------------------------------------- |
| 1.   | Document-Object Model (DOM), DOM manipulation                        | [Reading W1](/Week1/README.md) | [Homework W1](/Week1/MAKEME.md) | [Lesson Plan W1](/Week1/LESSONPLAN.md) |
| 2.   | Synchronous vs. asynchronous, Event Loop, Callbacks, Array Functions | [Reading W2](/Week2/README.md) | [Homework W2](/Week2/MAKEME.md) | [Lesson Plan W2](/Week1/LESSONPLAN.md) |
| 3.   | Scope, Hoisting, Closures, Thinking like a programmer II             | [Reading W3](/Week3/README.md) | [Homework W3](/Week3/MAKEME.md) | [Lesson Plan W3](/Week1/LESSONPLAN.md) |
| 4.   | Test                                                                 | [Details](/test/README.md)     | -                               | -                                      |

## Finished?

Did you finish the module? Good job! You're doing great!

If you feel ready for the next challenge, click [here](https://www.github.com/HackYourFuture/JavaScript3) to go to JavaScript3!

_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 :)_

<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="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 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.```

javascript2's Issues

Problem Solving

Our backgrounds are not in the IT field and many of us have social sciences as a background. We did not practice problem solving technics up to now. It does not mean that we can not solve the problems but to solve the problems we need more time.
Because of above explanation, at the fist week of our programme or immediately after HTML/CSS we need one session for problem solving technics.

I am ready to find the necessary documentation and prepare with all necessary homework and study materials.

It can be added to our curriculum.

Step 1: JavaScript : Closures link is not working

the following link is not working

http://conceptf1.blogspot.com/2012.11/javascript-closures.html
for Step 1: Read
Read:
JavaScript : Closures

I guess the correct ones is
http://conceptf1.blogspot.com/2013/11/javascript-closures.html

for it to be updated.

no arrays & no objects with number as a keys

according to Homework week1 step 2.4 In order to give the student more space for objects practicing we have to make sure that he won't create an object with keys as a numbers so it's almost exactly like an array.

The link "What is Hoisting in JavaScript?" doesn't work

The link "What is Hoisting in JavaScript?" at https://github.com/HackYourFuture/JavaScript2/blob/master/Week3/README.md part "When does hoisting happen?" doesn't work

week 3 read me

In week 3 readme there is a link about Execution context is empty: http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/

Makeme.md

In my opinion, the following step should be added in order to prevent misunderstandings.

1.0 Please download the js documents from

the following link. You will use and make changes on these documents for the following homeworks.
(https://github.com/HackYourFuture/JavaScript2/blob/master/Week2/homework)

Refering to non existing chapter numbers

In the section "Design patterns" of the README of week 2 (https://github.com/HackYourFuture/JavaScript2/blob/master/Week3/README.md)

It says: "Learning JavaScript Design Patterns up to and including chapter 3"

The page linked doesn't have any chapter numbers thought: https://addyosmani.com/resources/essentialjsdesignpatterns/book/#detailnamespacing

Or maybe it's just referring to that sub section of the whole page/document. In that case we should maybe clarify that better.

Add some notes about Prettier

The code formatting page currently only describes ESLint, it should include an explanation on Prettier as well.

n.b. leaving this issue here as a reminder for myself.

Links freecodecamp do not work.

I tried accessing the freecodecamp challenges in the week 1 makeme.md. https://github.com/HackYourFuture/JavaScript2/blob/master/Week1/MAKEME.md

All, except for the last one, seem to have been edited or removed. I will have a look if I can find challenges that can replace these links.

Discrepancy in homework week2

There is a differencies about duration between the tables which present on Week2 homework directions and which present on JavaScript2/Week2/homework/maartjes-work.js. In the one of them there is duration: 1.0, at the other duration:200 instead. Also it is incomprehensible if 1.0 refers one hour or one minute.

Reading Material -- Events

I have seen there is no reading material for the Events in JS2 Week1 I hope this will fit.
https://medium.freecodecamp.org/event-handling-in-javascript-with-examples-f6bc1e2fff57

Homework week 1

Greetings,

I would like to suggest reviewing the description of the first homework in JavaScript2. The instructions for the previous homework's were easy to understand but I couldn't get what should we do in this assignment.

Thank you for your concern.