diff --git a/README.md b/README.md index 3e233895c..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. @@ -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 b40406062..de741d2b6 100644 --- a/Week1/LESSONPLAN.md +++ b/Week1/LESSONPLAN.md @@ -1,96 +1,160 @@ # Lesson Plan JavaScript2 Week 1 ## Agenda -Is this your first lecture for this class? -Please introduce yourself briefly. - - Job - - Education - - City - - Why you love programming (if you do) - + 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) -- Show a list of commonly used browser defined functions -- How to combine add and remove DOM elements +- 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) which the web browsers make available to JavaScript for manipulation. Inside a JavaScript file, we can access the DOM through a global object called `document` or `window.document`. - **It is not a programming language but without it JavaScript would not have any knowledge of our web page/HTML document.** +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 - ```HTML - - - - Codestin Search App - - - -

My header

- My link - - - ``` - - ![Pictorial Representation of DOM](https://www.w3schools.com/js/pic_htmltree.gif) + +> 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 -## 2. DOM manipulation ### 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 -1. Finding DOM elements in HTML page - - `document.getElementById(id)` - Find an element by element id - - `document.getElementsByTagName(name)` - Find elements by tag name - - `document.getElementsByClassName(name)` - Find elements by class name - -2. Adding and Deleting elements in HTML page - - `document.createElement(element)` - Create a new HTML element - - `document.removeChild(element)` - Remove an HTML element - - `document.appendChild(element)` - Add an HTML element - -3. Changing existing HTML elements - - `element.innerHTML` - Change the content/layout of the element - - `element.innerText` - Change just the text of the element - - `element.setAttribute(attribute, value)` - Set/Change attribute of an element - -* Note: `getElementsByTagName` and `getElementsByClassName` returns a list of all matched elements. However, this is not the usual JavaScript array but an HTMLCollection List. A detailed list of APIs available on the DOM can be found [here](https://developer.mozilla.org/en-US/docs/Web/API/Document). -### Exercise -1. Create an HTML form element -2. Create an HTML input(type text) element and set its placeholder as "First Name" -3. Create another HTML input(type text) element and set its placeholder as "Last Name" -4. Add both these elements to the form element -5. Create a button element and add these properties to it: +```js +// 1. Print the current page +window.print(); - a. Set its text to "Click Me" +// 2. Get the URL from the address bar +window.location.href; - b. Set its id to "button" +// 3. Make a XHR request to an external service +window.fetch('https://dog.ceo/api/breeds/image/random'); +``` - c. Set its type to "button" +### 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? -6. Add button element to the form -7. Add the form element to main element ### 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. Show a list of commonly used browser defined functions -### Explanation -### Example -### Exercise -### Essence +## 3. DOM manipulation -## 4. How to combine add and remove DOM elements ### 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 cea2ae636..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,13 +26,18 @@ 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 + } ]; ``` @@ -42,9 +47,12 @@ const books = [ 4. Add an `` to each book that links to a URL of the book cover. 5. Change the style of the book depending on whether you have read it (green) or not (red). +The end result should look something like this: +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 @@ -78,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 @@ -108,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** @@ -128,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 `