diff --git a/README.md b/README.md index 0d350a000..371029faf 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,8 @@ -> 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). +# DEPRECATED - JavaScript 2 +This module has been replace with the Browsers module, find it [here](https://github.com/HackYourFuture/Browsers) -> 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). -# Module #3 - JavaScript 2: DOM Manipulation (Frontend) - -![JavaScript2](./assets/javascript2.png) - -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. +```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. 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. @@ -14,23 +10,54 @@ You might be one of those people right now, but after this module no more. In ** 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 +- 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 +- 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. `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. -2. `Homework`: this document contains the instructions for each week's homework. -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! +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) -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. +Learn from Wilgert in the following playlist of videos he has made for you! (Click on the image to open the link) -If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack! +HYF Video ## Planning @@ -49,4 +76,4 @@ If you feel ready for the next challenge, click [here](https://www.github.com/Ha _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 index e69de29bb..de741d2b6 100644 --- a/Week1/LESSONPLAN.md +++ 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 bf72abd36..01621ec96 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -15,7 +15,7 @@ Before we head into the exercises, it might be nice to do some interactive exerc ## **2. JavaScript exercises** -> Inside of your `JavaScript2` fork, create a folder called `week1`. Inside of that folder, create a folder called `js-exercises`. For all the following exercises create a new `.js` file in that folder (5 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be `bookList.js`. +> 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. **Exercise 1: The book list** @@ -26,25 +26,33 @@ const books = [ { title: 'The Design of Everyday Things', author: 'Don Norman', - alreadyRead: false, + alreadyRead: false }, { title: 'The Most Human Human', author: 'Brian Christian', - alreadyRead: true, + alreadyRead: true }, + { + title: 'The Pragmatic Programmer', + author: 'Andrew Hunt', + alreadyRead: true + } ]; ``` 1. Iterate through the array of books. -2. For each book, create a p element with the book title and author and append it to the page. -3. Use an