JavaScript Browser APIs Course

Browser APIs Course Overview

Table of Contents

• Content
• Standards
• Aspects
  • 👶 Introduction
  • 💪 Workout
  • 🦑 Deep
  • ✨ New
  • 🔮 Obscura
  • Content without aspects

Content

Below you can find the ordered content of the topic, in a linear progression

The linear progression of content aims to cover all content, course by course, workout by workout as follows:

• first course is the only core one, denoted by its manifest
• the next course is denoted by the first item of the next array in each course manifest
• each course has its order of workouts designated by the sections field in the same aforementioned manifest

1. intro-browser-js

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	using-javascript-on-a-web-page	✅	👶 introduction	javascript-syntax.2: 10	✅	✅	❌	✅
2	what-is-the-document-object	✅	👶 introduction 💪 workout	dom.2: 10	✅	✅	❌	✅
3	modifying-the-body	✅	👶 introduction 💪 workout	dom.2: 10	✅	✅	❌	✅
4	get-elements	✅	👶 introduction 💪 workout	dom.4: 10	✅	✅	❌	✅
5	modify-elements	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌

Exercises:

no	name	type	aspects	standards	done
1	js-practice-using-javascript-on-a-webpage-inline	jsfiddle	👶 introduction 💪 workout	javascript-syntax.2: 10	✅
2	js-practice-using-javascript-on-a-webpage	jsfiddle	👶 introduction 💪 workout	javascript-syntax.2: 10	✅
3	js-practice-modify-body-background-color	codepen	👶 introduction 💪 workout	dom.2: 10	✅
4	js-practice-modify-element	codepen	👶 introduction 💪 workout	dom.2: 10	✅

Game:

⚠️ There is no game in this workout.

2. dom-manipulation

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	creating-elements	✅	👶 introduction 💪 workout	dom.0: 10	✅	✅	❌	✅
2	overwriting-dom-nodes-contents	✅	👶 introduction 💪 workout	dom.0: 10 dom.2: 10	✅	✅	❌	✅
3	write-a-function-to-return-an-element	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌
4	write-a-function-to-return-a-complex-element	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌
5	appending-nodes-to-the-document	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌

Exercises:

no	name	type	aspects	standards	done
1	js-practice-create-a-complex-element-given-an-object	codepen	❌	dom.0: 1000 dom.1: 1000	❌
2	js-practice-create-elements-modify-and-append-to-the-dom	codepen	❌	dom.0: 10 dom.2: 10	❌

Game:

⚠️ There is no game in this workout.

3. navigation

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	form-a-url-from-its-parts	✅	👶 introduction 💪 workout 🔮 obscura	browser-apis-browser.1: 10 identify-network-protocols.9: 10 identify-network-protocols.10: 10	✅	✅	❌	✅
2	navigating-the-browser-history	✅	👶 introduction 💪 workout 🦑 deep 🔮 obscura	browser-apis-browser.1: 10 identify-network-protocols.9: 10 identify-network-protocols.10: 10	✅	✅	❌	✅
3	modify-a-website-s-url	✅	👶 introduction 💪 workout 🦑 deep 🔮 obscura	browser-apis-browser.1: 10 identify-network-protocols.9: 10 identify-network-protocols.10: 10	✅	✅	❌	✅
4	warn-user-if-back-button-is-pressed	✅	👶 introduction 💪 workout 🔮 obscura	browser-apis-browser.1: 10	✅	✅	❌	✅
5	top-location-href	✅	👶 introduction 💪 workout 🔮 obscura	browser-apis-browser.1: 10 identify-network-protocols.9: 10 identify-network-protocols.10: 10	✅	✅	❌	✅

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

4. toolbox-i

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	notifications-api	✅	👶 introduction ✨ new 💪 workout 🦑 deep	browser-apis-device.0: 10 browser-apis-browser.2: 10	✅	✅	❌	✅
2	geolocation	✅	👶 introduction ✨ new 💪 workout 🦑 deep	browser-apis-browser.0: 10 browser-apis-device.1: 10	✅	✅	❌	✅
3	vibration-api	✅	👶 introduction ✨ new 💪 workout 🦑 deep 🔮 obscura	browser-apis-device.3: 10	✅	✅	❌	✅
4	battery-api	✅	👶 introduction ✨ new 💪 workout 🦑 deep 🔮 obscura	browser-apis-device.0: 10	✅	✅	❌	✅
5	page-visibility-api	✅	👶 introduction ✨ new 💪 workout 🦑 deep 🔮 obscura	browser-apis-device.0: 10 browser-apis-browser.1: 10	✅	✅	❌	✅

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

5. measuring-performance

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	async-and-defer-scripts	✅	✨ new 💪 workout 🦑 deep 🔮 obscura	browser-tooling.0: 10	✅	✅	❌	✅
2	high-resolution-time-api	✅	✨ new 💪 workout 🦑 deep 🔮 obscura	browser-tooling.0: 10 browser-tooling.2: 10	✅	✅	❌	✅
3	navigation-timing-api	✅	✨ new 💪 workout 🦑 deep 🔮 obscura	❌	✅	✅	❌	❌
4	user-timing-api	✅	✨ new 💪 workout 🦑 deep 🔮 obscura	browser-tooling.0: 10 browser-tooling.2: 10	✅	✅	❌	✅
5	progress-event	✅	✨ new 💪 workout 🦑 deep 🔮 obscura	browser-tooling.0: 10 dom.3: 10	✅	✅	❌	✅

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

6. reading-writing

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	blobs	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	❌	❌
2	filereader-readasdataurl	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	❌	❌
3	filereader-readastext	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	❌	❌
4	filereader-readasarraybuffer	✅	👶 introduction 💪 workout 🦑 deep	browser-store-data.6: 10	✅	✅	❌	✅
5	window-localstorage	✅	👶 introduction 💪 workout 🦑 deep	browser-store-data.1: 10	✅	✅	❌	✅

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

7. toolbox-ii

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	allow-an-element-to-go-fullscreen	✅	👶 introduction ✨ new 💪 workout 🦑 deep 🔮 obscura	browser-apis-browser.1: 10	✅	✅	❌	✅
2	drawing-with-html5-canvas-api	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
3	fetch-api	✅	👶 introduction ✨ new 💪 workout	browser-connect-to-remote-hosts.3: 10	✅	✅	❌	✅
4	permission-api	✅	👶 introduction ✨ new 💪 workout	browser-apis-device.3: 10	✅	✅	❌	✅
5	network-information-api	✅	👶 introduction ✨ new 💪 workout	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

8. user-interaction

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	interaction-with-the-user	✅	👶 introduction ✨ new 💪 workout	dom.3: 10	✅	✅	❌	✅
2	handling-click-events	✅	👶 introduction 💪 workout	dom.3: 10	✅	✅	❌	✅
3	drag-and-drop-api	✅	👶 introduction ✨ new 💪 workout 🦑 deep 🔮 obscura	dom.3: 10	✅	✅	❌	✅
4	mediadevices-getusermedia	✅	👶 introduction ✨ new 💪 workout 🦑 deep 🔮 obscura	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

Standards

✅ - At least one insight covers this

❌ - Nothing covers this

🛠️ - This standard has no objectives yet

❌ Use the Document object to programmatically create and alter layouts

0. ✅ Create and append elements to the Document
1. ❌ Create complex elements from structured data
2. ✅ Modify the style or state of elements
3. ✅ Create events handlers for events relating to Document elements
4. ✅ Find elements in the DOM with Document methods

❌ Use modern Browser APIs to interact with the device

0. ✅ Use modern browser APIs to interact with device performance information, like battery level, memory usage, or storage availability
1. ✅ Use modern browser APIs to interact with device location information, like location or accelerometer data
2. ❌ Use modern browser APIs to interact with device ports, such as serial or usb
3. ✅ Use other device APIs to take advantage of device capabilities

✅ Use built-in Browser APIs to control the browser

0. ✅ Use the Geolocation API to determine a browser's physical location
1. ✅ Use browser APIs to manage windows and tabs
2. ✅ Use browser APIs to send notifications

❌ Use browser APIs to store and manage data on the client

0. ❌ Use localstorage to store data
1. ✅ Use WebSQL to store data
2. ❌ Use Cookies to store data
3. ❌ Use Session storage to store data
4. ❌ Direct the browser to cache responses
5. ❌ Direct the browser to clear data from persistent stores
6. ✅ Interact with stored data on the device

❌ Use built-in Browser APIs to connect to remote hosts

0. ❌ Use the XMLHttpRequest API to send and receive data from a remote host
1. ❌ Use the WebSocket API to maintain a stateful connection between a browser and remote host
2. ❌ Use the WebRTC API to create a real-time communication channel between two browsers
3. ✅ Use the Fetch API to request resources from a remote host

❌ Use modern browser tooling and APIs to improve load performance

0. ✅ Use in-browser tooling to measure resource loading times to identify network bottlenecks
1. ❌ Use in-browser tooling to profile memory issues and identify memory leaks
2. ✅ Use in-browser tooling to analyze runtime performance and improve efficiency

❌ Use the 2D and 3D drawing contexts to create images on a canvas

0. ❌ Create and use the canvas element
1. ❌ Initialize a 2D drawing context from a Canvas element
2. ❌ Initialize a 3D drawing context from a Canvas element
3. ❌ Create shapes with a drawing context
4. ❌ Use images on a Canvas
5. ❌ Put text on a Canvas
6. ❌ Transform a shape on a Canvas
7. ❌ Modify the style of elements on a Canvas

Aspects

Given the insights are tagged with aspects, we can filter over the linear content progression and create learning sub-paths.

These sub-path progressions will most likely not cover all content, but they will ensure and enforce an unified learning experience, tailor for the user wish.

For example, a user might be interested in new additions and updates of a language, rather than introduction lessions. Note that these sub-paths don't take games into consideration

👶 Introduction

If you are being introduced to the topic for the first time

Insights:

1. using-javascript-on-a-web-page
2. what-is-the-document-object
3. modifying-the-body
4. get-elements
5. modify-elements
6. creating-elements
7. overwriting-dom-nodes-contents
8. write-a-function-to-return-an-element
9. write-a-function-to-return-a-complex-element
10. appending-nodes-to-the-document
11. form-a-url-from-its-parts
12. navigating-the-browser-history
13. modify-a-website-s-url
14. warn-user-if-back-button-is-pressed
15. top-location-href
16. notifications-api
17. geolocation
18. vibration-api
19. battery-api
20. page-visibility-api
21. blobs
22. filereader-readasdataurl
23. filereader-readastext
24. filereader-readasarraybuffer
25. window-localstorage
26. allow-an-element-to-go-fullscreen
27. fetch-api
28. permission-api
29. network-information-api
30. interaction-with-the-user
31. handling-click-events
32. drag-and-drop-api
33. mediadevices-getusermedia

Exercises:

1. js-practice-using-javascript-on-a-webpage-inline
2. js-practice-using-javascript-on-a-webpage
3. js-practice-modify-body-background-color
4. js-practice-modify-element

⚠️ There are no games tagged with this aspect in browser-apis.

💪 Workout

Theory put into practice/that’s how you achieve X points

Insights:

1. what-is-the-document-object
2. modifying-the-body
3. get-elements
4. modify-elements
5. creating-elements
6. overwriting-dom-nodes-contents
7. write-a-function-to-return-an-element
8. write-a-function-to-return-a-complex-element
9. appending-nodes-to-the-document
10. form-a-url-from-its-parts
11. navigating-the-browser-history
12. modify-a-website-s-url
13. warn-user-if-back-button-is-pressed
14. top-location-href
15. notifications-api
16. geolocation
17. vibration-api
18. battery-api
19. page-visibility-api
20. async-and-defer-scripts
21. high-resolution-time-api
22. navigation-timing-api
23. user-timing-api
24. progress-event
25. blobs
26. filereader-readasdataurl
27. filereader-readastext
28. filereader-readasarraybuffer
29. window-localstorage
30. allow-an-element-to-go-fullscreen
31. drawing-with-html5-canvas-api
32. fetch-api
33. permission-api
34. network-information-api
35. interaction-with-the-user
36. handling-click-events
37. drag-and-drop-api
38. mediadevices-getusermedia

Exercises:

1. js-practice-using-javascript-on-a-webpage-inline
2. js-practice-using-javascript-on-a-webpage
3. js-practice-modify-body-background-color
4. js-practice-modify-element

⚠️ There are no games tagged with this aspect in browser-apis.

🦑 Deep

Prerequisite knowledge consisting of 2 or more 👶/💪 workouts

Insights:

1. navigating-the-browser-history
2. modify-a-website-s-url
3. notifications-api
4. geolocation
5. vibration-api
6. battery-api
7. page-visibility-api
8. async-and-defer-scripts
9. high-resolution-time-api
10. navigation-timing-api
11. user-timing-api
12. progress-event
13. blobs
14. filereader-readasdataurl
15. filereader-readastext
16. filereader-readasarraybuffer
17. window-localstorage
18. allow-an-element-to-go-fullscreen
19. drawing-with-html5-canvas-api
20. drag-and-drop-api
21. mediadevices-getusermedia

⚠️ There are no exercises tagged with this aspect in browser-apis. :warning: There are no games tagged with this aspect in browser-apis.

✨ New

Recently added/gained traction feature

Insights:

1. notifications-api
2. geolocation
3. vibration-api
4. battery-api
5. page-visibility-api
6. async-and-defer-scripts
7. high-resolution-time-api
8. navigation-timing-api
9. user-timing-api
10. progress-event
11. allow-an-element-to-go-fullscreen
12. fetch-api
13. permission-api
14. network-information-api
15. interaction-with-the-user
16. drag-and-drop-api
17. mediadevices-getusermedia

⚠️ There are no exercises tagged with this aspect in browser-apis. :warning: There are no games tagged with this aspect in browser-apis.

🔮 Obscura

Stories, obscure details that don’t specifically relate to a learning objective

Insights:

1. form-a-url-from-its-parts
2. navigating-the-browser-history
3. modify-a-website-s-url
4. warn-user-if-back-button-is-pressed
5. top-location-href
6. vibration-api
7. battery-api
8. page-visibility-api
9. async-and-defer-scripts
10. high-resolution-time-api
11. navigation-timing-api
12. user-timing-api
13. progress-event
14. allow-an-element-to-go-fullscreen
15. drag-and-drop-api
16. mediadevices-getusermedia

⚠️ There are no exercises tagged with this aspect in browser-apis. :warning: There are no games tagged with this aspect in browser-apis.

Content without aspects

1. js-practice-create-a-complex-element-given-an-object
2. js-practice-create-elements-modify-and-append-to-the-dom