diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..19f35c2d4 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index d734b9ed9..371029faf 100644 --- a/README.md +++ b/README.md @@ -1,32 +1,79 @@ -> 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/JavaScript2/pulls). +# DEPRECATED - JavaScript 2 +This module has been replace with the Browsers module, find it [here](https://github.com/HackYourFuture/Browsers) -# HackYourFuture - JavaScript 2 -Here you can find course content and homework for the JavaScript2 module +```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. -| Week | Topic | Read | Homework | -| ---- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------- | -| 1. | • Capturing user input through forms
• [Events](http://javascript.info/introduction-browser-events)
• [Basic DOM manipulations](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/DOM_manipulation.md)
• [Code debugging using the browser](http://javascript.info/debugging-chrome)
• [Code commenting](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/code_commenting.md)
• Structuring code files
• [Code formatting](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/code_formatting.md)
• [Handing in homework via PR](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md) | [Reading Week 1](/Week1/README.md) | [Homework Week 1](/Week1/MAKEME.md) | -| 2. | • Functions + JSON/Arrays
• [Array Manipulations](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/array_manipulation.md)
• JSON
• [Map and filter](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/map_filter.md)
• Arrow functions | [Reading Week 2](/Week2/README.md) | [Homework Week 2](/Week2/MAKEME.md) | -| 3. | • [Closures](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/scope_closures_this.md)
• Callbacks | [Reading Week 3](/Week3/README.md) | [Homework Week 3](/Week3/MAKEME.md) | +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. -## Test +## Learning goals -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. +In order to successfully complete this module you will need to master the following: -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. +- 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 -Also important to note: this test is done for 2 reasons only. +## How to use this repository -(1) **HackYourFuture wants to know** what skill level you are at. +### Repository content -(2) The test will **give you an indication** of what skill level you are at. +This repository consists of 3 essential parts: -### Overall +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! -A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/README.md) and research/ ask for help (Slack!) with the concepts that are not entirely clear. +### 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) + +HYF Video + +## 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 :)_ -Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. +Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.``` diff --git a/Week1/LESSONPLAN.md b/Week1/LESSONPLAN.md new file mode 100644 index 000000000..de741d2b6 --- /dev/null +++ b/Week1/LESSONPLAN.md @@ -0,0 +1,160 @@ +# Lesson Plan JavaScript2 Week 1 + +## Agenda + +The purpose of this class is to introduce to the student: + +- How a webpage is made up of objects (DOM) +- How JavaScript can be used to manipulate those objects (DOM manipulation) +- Commonly used browser defined functions and properties + +## Core concepts + +FIRST HALF (12.00 - 13.30) + +> Is this your first lecture for this class? +> Please introduce yourself briefly: +> +> - Job +> - Education +> - City +> - Why you love programming (if you do) + +## 1. Document Object Model (DOM) + +### Explanation + +The [Document Object Model (DOM)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) is an _object-oriented representation_ of a web page (HTML document). Every HTML element (ex. `h1`, `p` or `img`) is corrected first and then converted into a JavaScript object by the browser, making it possible for us to use JavaScript to change the contents. Using JavaScript code we can access the `DOM` through a global object called `document` or `window.document`. + +### Example + +> Show the student the following HTML in the browser, and then refer to it in the browser console. + +```html + + + + Codestin Search App + + + +

My header

+

This is a nice paragraph

+ + My link + + +``` + +![Pictorial Representation of DOM](./../assets/domtree.png) + +Notice how the DOM is structured in a tree-like manner. It goes from top (highest) to bottom (lowest) level. It's very much like a family tree: the highest level is the great-great-great-grandparent, while the lowest level is the grand-grand-grand-child. + +### Exercise + +1. Create an HTML file including the structure of a basic webpage (including `!DOCTYPE`, `html`, `head` and `body`, 1 `h1` and 1 `p`) +2. Find out how to target the `head`, `body` and `h1` elements using the browser console +3. Present your solution and how you figured it out (_Teacher chooses two people_) + +### Essence + +**The DOM is created by the browser: it reads your HTML file and transforms the elements into objects. We use JavaScript to select these elements in order to change them.** + +## 2. Commonly used browser defined functions and properties + +### Explanation + +As developers we can use code others have written. The browser contains predefined functions that we can use in order to get certain things done. For example, we can add/update/remove new HTML elements to the DOM. The browser also offers us properties, so that we can also play with the user's viewing experience. For example, we can modify the browser's width programmatically so we can offer a responsive website. + +### Example + +```js +// 1. Print the current page +window.print(); + +// 2. Get the URL from the address bar +window.location.href; + +// 3. Make a XHR request to an external service +window.fetch('https://dog.ceo/api/breeds/image/random'); +``` + +### Exercise + +Find browser functions or properties to show how we can... + +1. display an alert box? +2. find out what the browser's name is? +3. go back one page? + +### Essence + +**We can use by the browser predefined functions and properties to shape the user's experience of our application.** + +SECOND HALF (14.00 - 16.00) + +## 3. DOM manipulation + +### Explanation + +`DOM manipulation` refers to the act of using JavaScript to select and modify elements within the DOM. We do this in order to provide users interactivity with the page: for example, if a button is clicked the background color changes, or if a menu item is hovered over it becomes bigger. + +### Example + +```html + + + + Codestin Search App + + + +

My header

+

This is a nice paragraph

+ + + My link + + +``` + +```js +// 1. Make body background color red +const body = document.body; +body.style.background = 'red'; + +// 2. Change paragraph content +const p = document.querySelector('p'); +p.innerHtml = 'This paragraph has changed!'; + +// 3. Create and add a new element to an existing HTML element +const thirdLi = document.createElement('li'); +const ul = document.querySelector('ul'); +ul.appendChild(thirdLi); + +// 4. On button click alert the user! +const button = document.querySelector('button'); +button.addEventListener('click', function() { + alert('You clicked the button!'); +}); +``` + +### Exercise + +Write JavaScript code that... + +1. changes the `href` value to `https://www.hackyourfuture.net/` +2. changes the `button` text to `Make background colored!` +3. colors the `body` background to your favorite color, when the button is clicked + +Present your solution and how you figured it out (_Teacher chooses two people_) + +### Essence + +**Using JavaScript we can select and modify DOM elements. In this way we can provide the user useful interactions with the webpages they're engaged in.** diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 5e378788b..01621ec96 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -1,87 +1,168 @@ -# Homework Week 1 +# Homework JavaScript2 Week 1 -``` -Topics discussed in class this week: -• Capturing user input -• Events -• Basic DOM manipulations (img src, innerHTML) -• Code debugging using the browser -• Code commenting -• Structuring code files -• Code formatting -• Handing in homework via PR -``` +## **Todo list** -> [Here](/Week2/README.md) you find the readings you have to complete before the second lecture. +1. Practice the concepts +2. JavaScript exercises +3. Code along +4. PROJECT: Random Quote Generator -## Step 0: Make a small dance +## **1. Practice the concepts** -Give yourself (or your neighbor) a little tap on the shoulder, you've made it to JS2! :muscle: +Before we head into the exercises, it might be nice to do some interactive exercises first! In the following resource you'll find some exercises that'll teach you the basics of the interaction between JavaScript and the DOM: -## Step 1: Custom DOM manipulation challenge :mortar_board: +- [Making webpages interactive](https://www.khanacademy.org/computing/computer-programming/html-css-js) -_Deadline Thursday evening_ +## **2. JavaScript exercises** -Modify the (mostly empty) files in the `Week1/homework` folder for this step. +> Inside of your `JavaScript2` fork, find the folder called `Week1`. Inside of that folder, find the folder called `js-exercises`. In this folder you will find five `.js` files (sometimes with a matching `.html` file), one for each exercise where you need to write your code. Please use the correct file for the respective exercise. -**1.1** Open the `apps.js` and start by declaring an array that contains 10 strings. These strings should be of book titles you have read (or made up) and be lowercase without spaces so that you can use these later as HTML `id` attributes. (Example: _Harry Potter's - The Chamber of Secrets_ -> `harry_potter_chamber_secrets`). Add a console.log statement to output this array to console. (This is for debugging and making sure everything is in order. Delete it later when you're done :)) +**Exercise 1: The book list** -**1.2** Open the empty `index.html` and add the required HTML to load the `app.js` file. Open `index.html` in the browser and confirm that the `console.log` statement shows the array. (Open the Chrome Developer Tools and inspect the console.) +I'd like to display my three favorite books inside a nice webpage! + +```js +const books = [ + { + title: 'The Design of Everyday Things', + author: 'Don Norman', + alreadyRead: false + }, + { + title: 'The Most Human Human', + author: 'Brian Christian', + alreadyRead: true + }, + { + title: 'The Pragmatic Programmer', + author: 'Andrew Hunt', + alreadyRead: true + } +]; +``` -**1.3** Remove the temporary `console.log` from step 1.1. Make a function (or functions) that generate a `ul` with `li` elements for each book title in the array using a `for` loop. Make sure that the function names you choose are an accurate reflection of what they do. As a reminder, here are the recommended [Naming Conventions](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md). +1. Iterate through the array of books. +2. For each book, create a `

` element with the book title and author and append it to the page. +3. Use a `