diff --git a/README.md b/README.md index 7e90c241d..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/JavaScript2/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. @@ -22,15 +18,46 @@ In order to successfully complete this module you will need to master the follow ## 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/MAKEME.md b/Week1/MAKEME.md index 97fcb029f..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** @@ -52,7 +52,7 @@ https://hyf-js2-week1-makeme-ex1-demo.herokuapp.com/ **Exercise 2: About me** -Start with this HTML and save it as "about_me.html": +Given this HTML: ```html @@ -86,16 +86,15 @@ No homepage is safe from the logo bandit! Everytime he sees a Google Logo he rep In this exercise you're expected to write a JavaScript function that can be executed in the console of the [Google website](https://www.google.com). -1. Inside a JavaScript file, called `hijackGoogleLogo.js`, create a function called hijackGoogleLogo -2. Find out how to select the element that contains the Google logo, and store it in a variable -3. Modify the source and sourceset of the logo so that it's replaced by the HackYourFuture logo instead +1. Find out how to select the element that contains the Google logo, and store it in a variable +2. Modify the source and sourceset of the logo so that it's replaced by the HackYourFuture logo instead **Exercise 4: What's the time?** Why wear a watch when you can check the time, live in your webpage? -1. Create an empty HTML file, called `time.html` -2. Create a JavaScript file called `showCurrentTime.js` and include it in the HTML file +1. Create a basic HTML file +2. Include a script tag and link the JavaScript file 3. Inside the JS file, write a function that adds the current time to the webpage. Make sure it's written in the HH:MM:SS notation (hour, minute, second). Hint: use `setInterval()` to make sure the time stays current 4. Have the function execute when it's loading in the browser @@ -116,13 +115,15 @@ Start with this webpage, which has a single img tag of an animated GIF of a cat ``` -1. Add a script tag at the bottom of the page, where you'll put all your code. -2. Create a variable to store a reference to the img. -3. Change the style of the img to have a "left" of "0px", so that it starts at the left hand of the screens. -4. Create a function called catWalk() that moves the cat 10 pixels to the right of where it started, by changing the "left" style property. -5. Call that function every 50 milliseconds. Your cat should now be moving across the screen from left to right. Hurrah! -6. When the cat reaches the right-hand of the screen, restart them at the left hand side ("0px"). So they should keep walking from left to right across the screen, forever and ever. -7. When the cat reaches the middle of the screen, replace the img with an image of a cat dancing (use this URL: https://tenor.com/StFI.gif), keep it dancing for 5 seconds, and then replace the img with the original image and have it continue the walk. +1. Create a variable to store a reference to the img. +2. Change the style of the img to have a "left" of "0px", so that it starts at the left hand of the screens. +3. Create a function called catWalk() that moves the cat 10 pixels to the right of where it started, by changing the "left" style property. +4. Call that function every 50 milliseconds. Your cat should now be moving across the screen from left to right. Hurrah! +5. When the cat reaches the right-hand of the screen, restart them at the left hand side ("0px"). So they should keep walking from left to right across the screen, forever and ever. +6. When the cat reaches the middle of the screen, replace the img with an image of a cat dancing (use this URL: https://tenor.com/StFI.gif), keep it dancing for 5 seconds, and then replace the img with the original image and have it continue the walk. + + +The end result should look and behave similar to [https://dancingcat-sandbox.mxapps.io](https://dancingcat-sandbox.mxapps.io) ## **3. Code along** @@ -136,7 +137,7 @@ Enjoy! > Every week ends with a project you have to build on your own. Instead of getting clear-cut instructions, you'll get a list of criteria that your project needs to measure up to. -> Before you start, create a new folder called `project` that includes the files for the following app you'll be building. +> Write the project code in the folder `Week1 \ project`. In this week's project you'll be making a Random Quote Generator! It includes a text box and a simple button that, when clicked, take a random quote out of a set amount of quotes and show it in the page. Here's how it should look: diff --git a/Week1/README.md b/Week1/README.md index 659fdabda..38a672a9b 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -13,17 +13,24 @@ These are the topics for week 1: - The Critical Rendering Path - Traversing the DOM 3. What is DOM Manipulation? + - Manipulating elements - Browser events - Event listeners and handlers +## 0. Video Lectures + +Your teacher Wilgert has made video lectures for this week's material. You can find them here: [Videos 1 - 10](https://www.youtube.com/playlist?list=PLVYDhqbgYpYU-7_oyPBkUuuis5bL1Dk8n) + +HYF Video + ## 1. What is a web browser? A web browser is software that allows you to access websites. ### How a browser works -In your journey into becomeing a web developer it's important to know the tools you'll be using intimately. One such is the browser, which will be used to display your websites. In the following resources you'll learn about the many parts any web browser consists of and what their use is: +In your journey into becoming a web developer it's important to know the tools you'll be using intimately. One such is the browser, which will be used to display your websites. In the following resources you'll learn about the many parts any web browser consists of and what their use is: - [How a web browser functions](https://www.youtube.com/watch?v=z0HN-fG6oT4) - [How do web browsers work?](https://medium.com/@monica1109/how-does-web-browsers-work-c95ad628a509) @@ -78,7 +85,7 @@ The Document-Object Model (DOM) is a tree-like representation of the structure o ![Simple DOM](./../assets/simple-dom.png) -JavaScript is made accessible to the DOM by embedding it into an HTML file. You might've seen the before; well, this is how the browser becomes aware of JavaScript. +JavaScript is made accessible to the DOM by embedding it into an HTML file. You might've seen the `` before; well, this is how the browser becomes aware of JavaScript. - [What exactly is the DOM](https://bitsofco.de/what-exactly-is-the-dom/) - [JavaScript and the browser](https://eloquentjavascript.net/13_browser.html) @@ -110,13 +117,13 @@ body.appendChild(newParagraph); In this example we're executing the following steps: -1. We're first selecting the body: this is always necessary, as we can only add or remove elements from the body of the document -2. Secondly, we're creating a new DOM element: a

element -3. Thirdly, we're injecting content into the element -4. Fourthly, we give our element a background color -5. Finally, we add the

element in the body +1. Selecting the body: this is always necessary, as we can only add or remove elements from the body of the document +2. Creating a new DOM element: a paragraph i.e. a `

` element +3. Injecting content into the newly create paragraph element +4. Setting the background color for the newly create paragraph element +5. Adding the newly create paragraph element element to the body -Test this code out by copying and pasting it in the Developer Console of your browser. After you've pressed the Enter/Return key you will find your new

at the end of the page! +Test this code out by copying and pasting it in the Developer Console of your browser. After you've pressed the Enter/Return key you will find your new `

` at the end of the page! Learning how to write JavaScript that targets the DOM is an essential part of being a web developer. In the following resources you'll more about how to do that: @@ -143,12 +150,12 @@ Take a look at this code: ```js const body = document.querySelector('body'); -body.addEventListener('click', function() { +body.addEventListener('click', function () { body.style.background = 'black'; }); ``` -Test this code out by copying and pasting it in the Developer Console of your browser. After you've pressed the Enter/Return click the website. You should see the whole becoming black! +Test this code out by copying and pasting it in the Developer Console of your browser. After you've pressed the Enter/Return click the website. You should see the whole `` becoming black! This is DOM manipulation in its simplest form. It goes in three essential steps: diff --git a/Week1/js-exercises/ex1-bookList.html b/Week1/js-exercises/ex1-bookList.html new file mode 100644 index 000000000..b3864ac18 --- /dev/null +++ b/Week1/js-exercises/ex1-bookList.html @@ -0,0 +1,17 @@ + + + + + + + Codestin Search App + + + +

My Book List

+
+ +
+ + + \ No newline at end of file diff --git a/Week1/js-exercises/ex1-bookList.js b/Week1/js-exercises/ex1-bookList.js new file mode 100644 index 000000000..2db54ba5e --- /dev/null +++ b/Week1/js-exercises/ex1-bookList.js @@ -0,0 +1,42 @@ +/** + + ** Exercise 1: The book list ** + + I 'd like to display my three favorite books inside a nice webpage! + + 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 `