Skip to content

Commit 9f47b26

Browse files
alexrobincrabbealexrobincrabbe
committed
add lesson 14
1 parent 0359a2d commit 9f47b26

3 files changed

Lines changed: 210 additions & 1 deletion

File tree

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
<section data-markdown="lesson11.md" data-charset="utf-8"></section>
4242
<section data-markdown="lesson12.md" data-charset="utf-8"></section>
4343
<section data-markdown="lesson13.md" data-charset="utf-8"></section>
44+
<section data-markdown="lesson14.md" data-charset="utf-8"></section>
4445
<!-- NEW_SECTION_HERE -->
4546
</div>
4647
</div>

‎lesson14.md‎

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
<!-- .slide: id="lesson14" -->
2+
3+
# JavaScript Course - Fall 2025
4+
5+
Lesson 14, Tuesday, 2025-11-13
6+
7+
---
8+
9+
### Lesson overview
10+
11+
- Recap
12+
- Libraries
13+
- Libraries + fetch examples and tasks
14+
15+
---
16+
17+
### Recap
18+
19+
- JSON is a string representation of a JavaScript object
20+
- It stands for **J**ava**S**cript **O**bject **N**otation
21+
- JSON can be easily transferred (and stored)
22+
23+
---
24+
25+
### Recap
26+
27+
**async** and **await** keywords in JavaScript provide a modern syntax to help us handle asynchronous operations.
28+
29+
```js
30+
async function fetchDataFromApi() {
31+
let res = await fetch("https://v2.jokeapi.dev/joke/Programming?type=single");
32+
let json = await res.json();
33+
console.log(json.joke);
34+
}
35+
```
36+
37+
---
38+
39+
<!-- .slide: id="libraries" -->
40+
41+
# Libraries
42+
43+
---
44+
45+
What is a library?
46+
47+
- General definition: A collection of resources used for software development
48+
- More specifically, libraries usually relate to one specific type of functionality that you require for your app to function that (usually) someone else has written.
49+
- Examples: chart.js, d3.js, Plotly, Leaflet, ....
50+
51+
---
52+
53+
### Loading a library
54+
55+
Up until now, this was our standard pattern:
56+
57+
```html
58+
<html>
59+
<body>
60+
Hello from HTML!
61+
<script>
62+
console.log("Hello from JavaScript!");
63+
</script>
64+
</body>
65+
</html>
66+
```
67+
68+
---
69+
70+
Javascript can also be loaded from a file inside the same directory as the HTML file:
71+
72+
```html
73+
<html>
74+
<body>
75+
<script src="main.js"></script>
76+
</body>
77+
</html>
78+
```
79+
80+
You can now write all your JavaScript in `main.js`.
81+
82+
---
83+
84+
### Multiple scripts
85+
86+
We can add as many scripts as we want:
87+
88+
```html
89+
<html>
90+
<body>
91+
<script src="utilities.js"></script>
92+
<script src="recipes.js"></script>
93+
<script src="main.js"></script>
94+
</body>
95+
</html>
96+
```
97+
98+
This allows us to split long scripts into pieces
99+
100+
---
101+
102+
### Multiple scripts
103+
104+
- If we have multiple script tags, we can use all global variables and global functions from all scripts that are added _before_ our script.
105+
- Scripts are run in order!
106+
- In the example on the last slide, `recipes.js` can use all globals from `utilities.js`, and `main.js` can use all globals from `recipes.js` and `utilities.js`
107+
108+
---
109+
110+
### Scripts in header vs. body
111+
112+
<!-- .slide: style="font-size:80%" -->
113+
114+
We put our _own_ scripts at the bottom of the `<body>` tag. This allows us to access all HTML elements via DOM API
115+
116+
We can put scripts also in the `<head>` tag. These are loaded _before_ the page is rendered:
117+
118+
```html
119+
<html>
120+
<head>
121+
<script src="utilities.js"></script>
122+
</head>
123+
<body>
124+
<div id="myDiv">
125+
<!-- Elements go here -->
126+
</div>
127+
<script src="main.js"></script>
128+
</body>
129+
</html>
130+
```
131+
132+
---
133+
134+
### Remote scripts
135+
136+
Scripts can also be remote addresses. In the example below, we load the `plotly.js` library:
137+
138+
```html
139+
<html>
140+
<head>
141+
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
142+
</head>
143+
</html>
144+
```
145+
146+
---
147+
148+
### Library example: Plotly
149+
150+
- Plotly is a graphing library
151+
- When we load `plotly-latest-min.js`, we have access to a single global object called `Plotly`
152+
- Documentation: https://plotly.com/javascript/getting-started/
153+
154+
---
155+
156+
### Plotly usage example
157+
158+
```html
159+
<html>
160+
<head>
161+
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
162+
</head>
163+
<body>
164+
<div id="myGraph"></div>
165+
<script>
166+
let dataSet1 = {
167+
x: [1, 2, 3, 4],
168+
y: [0, 12, 8, 17],
169+
type: "scatter",
170+
};
171+
Plotly.newPlot("myGraph", [dataSet1]);
172+
</script>
173+
</body>
174+
</html>
175+
```
176+
177+
---
178+
179+
### Task 1
180+
181+
Here is an array of the temperature data for Berlin for 15th of November, 2024. Can you plot them using Plotly?
182+
183+
```js
184+
let temperatures = [
185+
9.9, 9.7, 9.6, 9.5, 9.6, 8.9, 7.9, 7.2, 7.5, 7.8, 7.9, 8.1, 8.6, 8.6, 8.8,
186+
8.4, 7.4, 6.5, 6.1, 6.0, 6.2, 6.3, 6.3,
187+
];
188+
```
189+
190+
---
191+
192+
### Bonus - Task 2
193+
194+
Create a new graph of the forecast of the new hourly temperature in Berlin for the next 3 days.
195+
196+
you can fetch the data by using the following URL
197+
198+
```
199+
https://api.open-meteo.com/v1/forecast?latitude=52.50&longitude=13.48&hourly=temperature_2m&forecast_days=3
200+
```
201+
202+
more information about the API: https://open-meteo.com/en/docs
203+
204+
---
205+
206+
### Bonus
207+
208+
Let the user choose the number of days to be shown in the graph.

‎toc.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@
99
9. [Loops](#lesson12)
1010
10. [fetch](#lessson13)
1111

12-
Direct link to lessons: [1](#lesson1) [2](#lesson2) [3](#lesson3) [4](#lesson4) [5](#lesson5) [6](#lesson6) [7](#lesson7) [8](#lesson8) [9](#lesson9) [10](#lesson10) [11](#lesson11) [12](#lesson12) [13](#lesson13)
12+
Direct link to lessons: [1](#lesson1) [2](#lesson2) [3](#lesson3) [4](#lesson4) [5](#lesson5) [6](#lesson6) [7](#lesson7) [8](#lesson8) [9](#lesson9) [10](#lesson10) [11](#lesson11) [12](#lesson12) [13](#lesson13) [14](#lesson14)
1313

1414
NOTE: when we have too many entries that don't fit on one screen we can use this <!-- .slide: style="font-size:80%" -->

0 commit comments

Comments
 (0)