Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 2596f95

Browse files
NoerGitKatNoerGitKat
authored
Merge branch 'master' into gajduk-patch-1
2 parents 91f4686 + 732ccbf commit 2596f95

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+4584
-3104
lines changed

‎README.md

Lines changed: 40 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,23 +14,54 @@ You might be one of those people right now, but after this module no more. In **
1414

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

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

2323
## How to use this repository
2424

25+
### Repository content
26+
2527
This repository consists of 3 essential parts:
2628

27-
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.
28-
2. `Homework`: this document contains the instructions for each week's homework.
29-
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!
29+
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
30+
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.
31+
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!
32+
33+
### How to study
34+
35+
Let's say you are just starting out with the JavaScript2 module. This is what you do...
36+
37+
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)
38+
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)
39+
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)
40+
4. You spend **Friday** and **Saturday** playing around with the exercises and write down any questions you might have
41+
5. **DEADLINE 1**: You'll submit any questions you might have before **Saturday 23.59**, in the class channel
42+
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
43+
7. You spend **Monday** and **Tuesday** finalizing your homework
44+
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
45+
9. Start the new week by going back to point 1!
46+
47+
In summary:
48+
49+
![Weekflow](assets/weekflow.png)
50+
51+
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!
52+
53+
### Video lectures
54+
55+
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!
56+
57+
You can find out more about him here:
58+
59+
- [GitHub](https://github.com/wilgert)
60+
- [@Wilgert on Slack](https://hackyourfuture.slack.com/team/UGTGC0T41)
3061

31-
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.
62+
Learn from Wilgert in the following playlist of videos he has made for you! (Click on the image to open the link)
3263

33-
If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack!
64+
<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>
3465

3566
## Planning
3667

‎Week1/LESSONPLAN.md

Lines changed: 124 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,160 @@
11
# Lesson Plan JavaScript2 Week 1
22

33
## Agenda
4-
Is this your first lecture for this class?
5-
Please introduce yourself briefly.
6-
- Job
7-
- Education
8-
- City
9-
- Why you love programming (if you do)
10-
4+
115
The purpose of this class is to introduce to the student:
6+
127
- How a webpage is made up of objects (DOM)
138
- How JavaScript can be used to manipulate those objects (DOM manipulation)
14-
- Show a list of commonly used browser defined functions
15-
- How to combine add and remove DOM elements
9+
- Commonly used browser defined functions and properties
1610

1711
## Core concepts
1812

1913
FIRST HALF (12.00 - 13.30)
2014

15+
> Is this your first lecture for this class?
16+
> Please introduce yourself briefly:
17+
>
18+
> - Job
19+
> - Education
20+
> - City
21+
> - Why you love programming (if you do)
22+
2123
## 1. Document Object Model (DOM)
2224

2325
### Explanation
24-
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`.
2526

26-
**It is not a programming language but without it JavaScript would not have any knowledge of our web page/HTML document.**
27+
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`.
28+
2729
### Example
28-
```HTML
29-
<!DOCTYPE html>
30-
<html>
31-
<head>
32-
<title>My title</title>
33-
</head>
34-
35-
<body>
36-
<h1>My header</h1>
37-
<a href="https://www.w3schools.com/js/pic_htmltree.gif">My link</a>
38-
</body>
39-
</html>
40-
```
41-
42-
![Pictorial Representation of DOM](https://www.w3schools.com/js/pic_htmltree.gif)
30+
31+
> Show the student the following HTML in the browser, and then refer to it in the browser console.
32+
33+
```html
34+
<!DOCTYPE html>
35+
<html>
36+
<head>
37+
<title>My title</title>
38+
</head>
39+
40+
<body>
41+
<h1>My header</h1>
42+
<p>This is a nice paragraph</p>
43+
<ul>
44+
<li>Item 1</li>
45+
<li>Item 2</li>
46+
</ul>
47+
<a href="https://www.w3schools.com/js/pic_htmltree.gif">My link</a>
48+
</body>
49+
</html>
50+
```
51+
52+
![Pictorial Representation of DOM](./../assets/domtree.png)
53+
54+
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.
55+
4356
### Exercise
57+
58+
1. Create an HTML file including the structure of a basic webpage (including `!DOCTYPE`, `html`, `head` and `body`, 1 `h1` and 1 `p`)
59+
2. Find out how to target the `head`, `body` and `h1` elements using the browser console
60+
3. Present your solution and how you figured it out (_Teacher chooses two people_)
61+
4462
### Essence
4563

64+
**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.**
65+
66+
## 2. Commonly used browser defined functions and properties
4667

47-
## 2. DOM manipulation
4868
### Explanation
69+
70+
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.
71+
4972
### Example
5073

51-
1. Finding DOM elements in HTML page
52-
- `document.getElementById(id)` - Find an element by element id
53-
- `document.getElementsByTagName(name)` - Find elements by tag name
54-
- `document.getElementsByClassName(name)` - Find elements by class name
55-
56-
2. Adding and Deleting elements in HTML page
57-
- `document.createElement(element)` - Create a new HTML element
58-
- `document.removeChild(element)` - Remove an HTML element
59-
- `document.appendChild(element)` - Add an HTML element
60-
61-
3. Changing existing HTML elements
62-
- `element.innerHTML` - Change the content/layout of the element
63-
- `element.innerText` - Change just the text of the element
64-
- `element.setAttribute(attribute, value)` - Set/Change attribute of an element
65-
66-
* 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).
67-
### Exercise
68-
1. Create an HTML form element
69-
2. Create an HTML input(type text) element and set its placeholder as "First Name"
70-
3. Create another HTML input(type text) element and set its placeholder as "Last Name"
71-
4. Add both these elements to the form element
72-
5. Create a button element and add these properties to it:
74+
```js
75+
// 1. Print the current page
76+
window.print();
7377

74-
a. Set its text to "Click Me"
78+
// 2. Get the URL from the address bar
79+
window.location.href;
7580

76-
b. Set its id to "button"
81+
// 3. Make a XHR request to an external service
82+
window.fetch('https://dog.ceo/api/breeds/image/random');
83+
```
7784

78-
c. Set its type to "button"
85+
### Exercise
86+
87+
Find browser functions or properties to show how we can...
88+
89+
1. display an alert box?
90+
2. find out what the browser's name is?
91+
3. go back one page?
7992

80-
6. Add button element to the form
81-
7. Add the form element to main element
8293
### Essence
8394

95+
**We can use by the browser predefined functions and properties to shape the user's experience of our application.**
96+
8497
SECOND HALF (14.00 - 16.00)
8598

86-
## 3. Show a list of commonly used browser defined functions
87-
### Explanation
88-
### Example
89-
### Exercise
90-
### Essence
99+
## 3. DOM manipulation
91100

92-
## 4. How to combine add and remove DOM elements
93101
### Explanation
102+
103+
`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.
104+
94105
### Example
106+
107+
```html
108+
<!DOCTYPE html>
109+
<html>
110+
<head>
111+
<title>My title</title>
112+
</head>
113+
114+
<body>
115+
<h1>My header</h1>
116+
<p>This is a nice paragraph</p>
117+
<ul>
118+
<li>Item 1</li>
119+
<li>Item 2</li>
120+
</ul>
121+
<button>My button</button>
122+
<a href="https://www.w3schools.com/js/pic_htmltree.gif">My link</a>
123+
</body>
124+
</html>
125+
```
126+
127+
```js
128+
// 1. Make body background color red
129+
const body = document.body;
130+
body.style.background = 'red';
131+
132+
// 2. Change paragraph content
133+
const p = document.querySelector('p');
134+
p.innerHtml = 'This paragraph has changed!';
135+
136+
// 3. Create and add a new element to an existing HTML element
137+
const thirdLi = document.createElement('li');
138+
const ul = document.querySelector('ul');
139+
ul.appendChild(thirdLi);
140+
141+
// 4. On button click alert the user!
142+
const button = document.querySelector('button');
143+
button.addEventListener('click', function() {
144+
alert('You clicked the button!');
145+
});
146+
```
147+
95148
### Exercise
149+
150+
Write JavaScript code that...
151+
152+
1. changes the `href` value to `https://www.hackyourfuture.net/`
153+
2. changes the `button` text to `Make background colored!`
154+
3. colors the `body` background to your favorite color, when the button is clicked
155+
156+
Present your solution and how you figured it out (_Teacher chooses two people_)
157+
96158
### Essence
159+
160+
**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.**

‎Week1/MAKEME.md

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Before we head into the exercises, it might be nice to do some interactive exerc
1515

1616
## **2. JavaScript exercises**
1717

18-
> 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`.
18+
> 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.
1919
2020
**Exercise 1: The book list**
2121

@@ -26,13 +26,18 @@ const books = [
2626
{
2727
title: 'The Design of Everyday Things',
2828
author: 'Don Norman',
29-
alreadyRead: false,
29+
alreadyRead: false
3030
},
3131
{
3232
title: 'The Most Human Human',
3333
author: 'Brian Christian',
34-
alreadyRead: true,
34+
alreadyRead: true
3535
},
36+
{
37+
title: 'The Pragmatic Programmer',
38+
author: 'Andrew Hunt',
39+
alreadyRead: true
40+
}
3641
];
3742
```
3843

@@ -42,9 +47,12 @@ const books = [
4247
4. Add an `<img>` to each book that links to a URL of the book cover.
4348
5. Change the style of the book depending on whether you have read it (green) or not (red).
4449

50+
The end result should look something like this:
51+
https://hyf-js2-week1-makeme-ex1-demo.herokuapp.com/
52+
4553
**Exercise 2: About me**
4654

47-
Start with this HTML and save it as "about_me.html":
55+
Given this HTML:
4856

4957
```html
5058
<!DOCTYPE html>
@@ -78,16 +86,15 @@ No homepage is safe from the logo bandit! Everytime he sees a Google Logo he rep
7886

7987
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).
8088

81-
1. Inside a JavaScript file, called `hijackGoogleLogo.js`, create a function called hijackGoogleLogo
82-
2. Find out how to select the element that contains the Google logo, and store it in a variable
83-
3. Modify the source and sourceset of the logo so that it's replaced by the HackYourFuture logo instead
89+
1. Find out how to select the element that contains the Google logo, and store it in a variable
90+
2. Modify the source and sourceset of the logo so that it's replaced by the HackYourFuture logo instead
8491

8592
**Exercise 4: What's the time?**
8693

8794
Why wear a watch when you can check the time, live in your webpage?
8895

89-
1. Create an empty HTML file, called `time.html`
90-
2. Create a JavaScript file called `showCurrentTime.js` and include it in the HTML file
96+
1. Create a basic HTML file
97+
2. Include a script tag and link the JavaScript file
9198
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
9299
4. Have the function execute when it's loading in the browser
93100

@@ -108,13 +115,15 @@ Start with this webpage, which has a single img tag of an animated GIF of a cat
108115
</html>
109116
```
110117

111-
1. Add a script tag at the bottom of the page, where you'll put all your code.
112-
2. Create a variable to store a reference to the img.
113-
3. Change the style of the img to have a "left" of "0px", so that it starts at the left hand of the screens.
114-
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.
115-
5. Call that function every 50 milliseconds. Your cat should now be moving across the screen from left to right. Hurrah!
116-
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.
117-
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.
118+
1. Create a variable to store a reference to the img.
119+
2. Change the style of the img to have a "left" of "0px", so that it starts at the left hand of the screens.
120+
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.
121+
4. Call that function every 50 milliseconds. Your cat should now be moving across the screen from left to right. Hurrah!
122+
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.
123+
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.
124+
125+
126+
The end result should look and behave similar to [https://dancingcat-sandbox.mxapps.io](https://dancingcat-sandbox.mxapps.io)
118127

119128
## **3. Code along**
120129

@@ -128,7 +137,7 @@ Enjoy!
128137

129138
> 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.
130139
131-
> Before you start, create a new folder called `project` that includes the files for the following app you'll be building.
140+
> Write the project code in the folder `Week1 \ project`.
132141
133142
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:
134143

0 commit comments

Comments
 (0)