info/Web-Dev-For-Beginners
1
0
Fork 0
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git synced 2025-09-03 03:32:55 +02:00
Code Issues Projects Releases Wiki Activity

preliminary work for docsify implementation (up to space game)

Browse Source
This commit is contained in:
Jen Looper
2020-11-14 12:54:54 -05:00
parent 6e6419f280
commit a02eea3f47
22 changed files with 183 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
3-terrarium/3-intro-to-DOM-and-closures/LICENSE
View File

@@ -1,21 +0,0 @@
MIT License
Copyright (c) 2020 WebDev-For-Beginners
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

34
3-terrarium/3-intro-to-DOM-and-closures/README.md
View File

@@ -3,9 +3,11 @@
![DOM and a closure](images/webdev101-js.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
## Pre-Lecture Quiz
### Introduction:
[Pre-lecture quiz](3-terrarium/3-intro-to-DOM-and-closures/.github/pre-lecture-quiz.md)
### Introduction
Manipulating the DOM, or the "Document Object Model", is a key aspect of web development. According to [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction), "The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web." The challenges around DOM manipulation on the web have often been the impetus behind using JavaScript frameworks instead of vanilla JavaScript to manage the DOM, but we will manage on our own!
@@ -21,11 +23,11 @@ We will use a closure to manipulate the DOM.
In this lesson, we will complete our interactive terrarium project by creating the JavaScript that will allow a user to manipulate the plants on the page.
### Prequisite:
### Prequisite
You should have the HTML and CSS for your terrarium built. By the end of this lesson you will be able to move the plants into and out of the terrarium by dragging them.
### Task:
### Task
In your terrarium folder, create a new file called `script.js`. Import that file in the `<head>` section:
@@ -36,11 +38,11 @@ In your terrarium folder, create a new file called `script.js`. Import that file
> Note: use `defer` when importing an external JavaScript file into the html file so as to allow the JavaScript to execute only after the HTML file has been fully loaded. You could also use the `async` attribute, which allows the script to execute while the HTML file is parsing, but in our case, it's important to have the HTML elements fully available for dragging before we allow the drag script to be executed.
---
## 1. The DOM elements
## The DOM elements
The first thing you need to do is to create references to the elements that you want to manipulate in the DOM. In our case, they are the 14 plants currently waiting in the side bars.
### Task:
### Task
```html
dragElement(document.getElementById('plant1'));
@@ -65,7 +67,7 @@ What's going on here? You are referencing the document and looking through its D
---
## 2. The Closure
## The Closure
Now you are ready to create the dragElement closure, which is an outer function that encloses an inner function or functions (in our case, we will have three).
@@ -87,7 +89,7 @@ In this example, the displayCandy function surrounds a function that pushes a ne
✅ How can you make the `candy` array accessible? Try moving it outside the closure. This way, the array becomes global, rather than remaining only available to the closure's local scope.
### Task:
### Task
Under the element declarations in `script.js`, create a function:
@@ -110,11 +112,11 @@ In addition, the terrariumElement that is passed to this function is assigned a
---
## 3. The Pointerdrag function
## The Pointerdrag function
The terrariumElement is ready to be dragged around; when the `onpointerdown` event is fired, the function pointerDrag is invoked. Add that function right under this line: `terrariumElement.onpointerdown = pointerDrag;`:
### Task:
### Task
```javascript
function pointerDrag(e) {
@@ -143,11 +145,11 @@ document.onpointerup = stopElementDrag;
```
Now you are indicating that you want the plant to be dragged along with the pointer as you move it, and for the dragging gesture to stop when you deselect the plant. `onpointermove` and `onpointerup` are all parts of the same API as `onpointerdown`. The interface will throw errors now as you have not yet defined the `elementDrag` and the `stopElementDrag` functions, so build those out next.
## 4. The elementDrag and stopElementDrag functions
## The elementDrag and stopElementDrag functions
You will complete your closure by adding two more internal functions that will handle what happens when you drag a plant and stop dragging it. The behavior you want is that you can drag any plant at any time and place it anywhere on the screen. This interface is quite un-opinionated (there is no drop zone for example) to allow you to design your terrarium exactly as you like it by adding, removing, and repositioning plants.
### Task:
### Task
Add the `elementDrag` function right after the closing curly bracket of `pointerDrag`:
@@ -170,7 +172,7 @@ As you drag, you reassign `pos1` by making it equal to `pos3` (which you set ear
All this recalculation of positioning allows you to fine-tune the behavior of the terrarium and its plants.
### Task:
### Task
The final task to complete the interface is to add the `closeElementDrag` function after the closing curly bracket of `elementDrag`:
@@ -195,7 +197,9 @@ Now you have completed your project!
Add new event handler to your closure to do something more to the plants; for example, double-click a plant to bring it to the front. Get creative!
## [Post-lecture quiz](.github/post-lecture-quiz.md)
## Post-Lecture Quiz
[Post-lecture quiz](3-terrarium/3-intro-to-DOM-and-closures/.github/post-lecture-quiz.md)
## Review & Self Study
@@ -207,5 +211,5 @@ Always check browser capabilities using [CanIUse.com](https://caniuse.com/).
## Assignment
[Work a bit more with the DOM](assignment.md)
[Work a bit more with the DOM](3-terrarium/3-intro-to-DOM-and-closures/assignment.md)