Skip to content

Commit d2cca76

Browse files
joemulljoemull
committed
DOM prep and workshop
1 parent cabf23a commit d2cca76

File tree

8 files changed

+106
-2
lines changed

8 files changed

+106
-2
lines changed

‎lectures/dom-live-coding.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Live coding: The Document Object Model
2+
3+
## Changing the DOM with JavaScript
4+
5+
[View in browser](/web-development/sandbox/js-dom/index.html){target="_blank"}
6+
7+
<<< @/public/sandbox/js-dom/index.html{html}
8+
9+
<<< @/public/sandbox/js-dom/app.js{js}
10+
11+
## Creating a webpage from scratch from a data file
12+
13+
[View in browser](/web-development/sandbox/js-dom-data/index.html){target="_blank"}
14+
15+
<<< @/public/sandbox/js-dom-data/index.html{html}
16+
17+
<<< @/public/sandbox/js-dom-data/data.js{js}
18+
19+
<<< @/public/sandbox/js-dom-data/app.js{js}

‎lectures/dom.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Prep: The Document Object Model
2+
3+
## Session goals
4+
5+
By the end of this session students will be able to do the following:
6+
7+
- Use the Document Object Model to read and modify an HTML page with
8+
JavaScript
9+
- Combine JS objects, functions, and rendered HTML in a single application
10+
11+
## Videos and readings
12+
13+
Please set aside time to watch the following priority video tutorial before
14+
class, up to 1:04.
15+
16+
If you learn best by reading, check out the assigned chapter of the online
17+
textbook _Eloquent JavaScript_.
18+
19+
## Priority
20+
21+
Watch up to 1:04, through the “Working with Attributes” section, stopping before the “Events” section. [JavaScript DOM Manipulation Mastery: A Comprehensive Guide](https://www.youtube.com/watch?v=BGkc6dKUZ84), 1h 25m, Envato Tuts (Jeremy McPeak), YouTube, 11 Jul 2023.
22+
23+
[JavaScript Modules with Import/Export Syntax (ES6)](https://www.youtube.com/watch?v=s9kNndJLOjg), 12m 37s, dcode, YouTube, 9 July 2019.
24+
25+
[The Document Object Model](https://eloquentjavascript.net/14_dom.html), chapter from book _Eloquent JavaScript_, 3rd ed. (2018), Marijn Haverbeke
26+
27+
## Also recommended
28+
29+
Watch the rest of the above DOM video tutorial, including “Events” and “Using Event
30+
Delegation...”

‎outline.js‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ export const outline = [
173173
},
174174
{
175175
text: 'JavaScript Values and Variables',
176-
collapsed: false,
176+
collapsed: true,
177177
lecturer: 'Joseph Muller',
178178
items: [
179179
{
@@ -232,6 +232,25 @@ export const outline = [
232232
},
233233
]
234234
},
235+
{
236+
text: 'The Document Object Model',
237+
collapsed: false,
238+
lecturer: 'Joseph Muller',
239+
items: [
240+
{
241+
text: 'Prep',
242+
link: '/lectures/dom.html',
243+
},
244+
{
245+
text: 'Live coding',
246+
link: '/lectures/dom-live-coding.html',
247+
},
248+
// {
249+
// text: 'Workshop',
250+
// link: '/workshops/dom/index.html',
251+
// },
252+
]
253+
},
235254
// {
236255
// text: 'JavaScript in the browser',
237256
// collapsed: true,

‎public/sandbox/js-dom-data/app.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import { data } from './data.js';
2+
console.log(data);

‎public/sandbox/js-dom-data/data.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const data = [];

‎public/sandbox/js-dom-data/index.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
body {
2+
font-family: sans-serif;
3+
font-size: 1.2rem;
4+
color: #fdf3e3;
5+
background-color: #36565f;
6+
}
7+
8+
h1,
9+
h2 {
10+
font-family: monospace;
11+
}

‎public/sandbox/js-dom-data/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!doctype html>
2+
<html lang="en-GB">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Creating a webpage from data with JS</title>
8+
<link rel="stylesheet" href="index.css" />
9+
<script defer type="module" src="app.js"></script>
10+
</head>
11+
12+
<body>
13+
<h1 style="place-self: center">Creating a webpage from data with JS</h1>
14+
<p style="place-self: center">
15+
Open the browser console to see the program outputs.
16+
</p>
17+
</body>
18+
</html>

‎public/sandbox/js-dom/index.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,11 @@
1010
</head>
1111
<body>
1212
<main class="container">
13-
<a href="index.html"><h1>Sandbox: Changing the DOM with JavaScript</h1></a>
13+
<h1>
14+
<a href="index.html">
15+
Sandbox: Changing the DOM with JavaScript
16+
</a>
17+
</h1>
1418
<section class="flex-container">
1519

1620
</section>

0 commit comments

Comments
 (0)