From 9b69c262bb26bf6d80e61555bbc766f5857654a3 Mon Sep 17 00:00:00 2001 From: Noer Paanakker Date: Mon, 4 Nov 2019 17:27:37 +0100 Subject: [PATCH 01/41] raw notes lesson plans w1-3 --- Week1/LESSONPLAN.md | 47 +++++++++++++++++++++++++++++++++++++++++++++ Week2/LESSONPLAN.md | 42 ++++++++++++++++++++++++++++++++++++++++ Week3/LESSONPLAN.md | 43 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 132 insertions(+) diff --git a/Week1/LESSONPLAN.md b/Week1/LESSONPLAN.md index e69de29bb..1c5e1f403 100644 --- a/Week1/LESSONPLAN.md +++ b/Week1/LESSONPLAN.md @@ -0,0 +1,47 @@ +# Lesson Plan JavaScript3 Week 1 + +## Agenda + +The purpose of this class is to introduce to the student: + +- What are `APIs` and how to interact with them +- What is `AJAX` and how to apply it (`XMLHttpRequest`) +- How to use libraries (`axios`) + +## Core concepts + +FIRST HALF (12.00 - 13.30) + +1. What are APIs and how to interact with them + +Notes: + +- Part of an application that can be communicated with from an outside source +- Connect to it using "endpoints" +- Mostly used to request data from some service + +**Show examples** + +2. What is `AJAX` and how to apply it (`XMLHttpRequest`) + +Notes: + +- It's a technique, not a technology +- `AJAX` stands for Asynchronous JavaScript and XML +- Nowadays we use `JSON` instead of `XML` +- Fetch data without reloading the page + +**Do exercise** + +SECOND HALF (14.00 - 16.00) + +3. How to use libraries (`axios`) + +Notes: + +- A library is a code solution a developer (or a team) has written to a common problem +- Usually open-source +- Helps to solve a problem within an application +- Read the documentation on how to use it + +**Do Exercise** diff --git a/Week2/LESSONPLAN.md b/Week2/LESSONPLAN.md index e69de29bb..4e0d19aaa 100644 --- a/Week2/LESSONPLAN.md +++ b/Week2/LESSONPLAN.md @@ -0,0 +1,42 @@ +# Lesson Plan JavaScript3 Week 2 + +## Agenda + +The purpose of this class is to introduce to the student: + +- How to use the `fetch` API to do AJAX calls +- The structure and use of `Promises` +- The `this` keyword and its relationship with `scope` + +## Core concepts + +FIRST HALF (12.00 - 13.30) + +1. The structure and use of `Promises` + +Notes: + +- It's the accepted solution to [callback hell](http://callbackhell.com/) +- It's a way to introduce asynchronicity to your application +- Makes asynchronous code read like it's synchronous + +**Show examples** + +2. How to use the `fetch` API to do AJAX calls + +Notes: + +- Modern replacement of XMLHttpRequest +- Uses Promise structure +- The Fetch API is defined in the browser +- Only modern browsers support it (show [caniuse.com](https://caniuse.com/#feat=fetch)) + +**Do exercise** + +SECOND HALF (14.00 - 16.00) + +3. The `this` keyword and its relationship with `scope` + +Notes: + +- \ No newline at end of file diff --git a/Week3/LESSONPLAN.md b/Week3/LESSONPLAN.md index e69de29bb..222d8827b 100644 --- a/Week3/LESSONPLAN.md +++ b/Week3/LESSONPLAN.md @@ -0,0 +1,43 @@ +# Lesson Plan JavaScript3 Week 3 + +## Agenda + +The purpose of this class is to introduce to the student: + +- The purpose and use of `async/await` +- What is `Object-Oriented Programming` (OOP) is and how it's applied to JavaScript +- How to use ES6 `classes` + +## Core concepts + +1. The purpose and use of `async/await` + +Notes: + +- It's an upgrade to `Promises` +- Makes writing an asynchronous function more readable + +**Do exercise** + +2. What is `Object-Oriented Programming` (OOP) is and how it's applied to JavaScript + +Notes: + +- It's a programming style; it defines how to organise your application +- In OOP each program would be split up into self-contained objects, that then communicate with each other +- Each object represents a part of the application: it contains its own data and logic +- OOP is meant to make thinking about your applications easier, by having each object represent a real-life entity (i.e. Users, Profiles, Products) + +**Show examples** + +FIRST HALF (12.00 - 13.30) + +3. How to use ES6 `classes` + +Notes: + +- `classes` are a modern way of creating objects in JavaScript +- It's `syntactical sugar` for object constructors +- A `class` is a blueprint of an object, that can be instantiated + +**Do exercise** From ae8ddda93dc4574d6746f4d3fbff887de11a1e21 Mon Sep 17 00:00:00 2001 From: Noer Paanakker Date: Tue, 12 Nov 2019 11:39:50 +0100 Subject: [PATCH 02/41] replaced apis in exercises w1 --- Week1/MAKEME.md | 34 ++++++++++++++++++---------------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index b14adadd4..7b3cb47b8 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -17,38 +17,40 @@ This week's concepts can be challenging, therefore let's get an easy introductio > Inside of your `JavaScript3` fork and inside of the `Week1` folder, create a folder called `homework`. Inside of that folder, create a folder called `js-exercises`. For all the following exercises create a new `.js` file in that folder (3 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be placeKitten.js. -**Exercise 1: Place the kitten** +**Exercise 1: Who do we have here?** -Who doesn't love kittens on their screen? +Wouldn't it cool to make a new friend with just the click of a button? -Write an function that makes an API call to https://wwww.placekitten.com/api +Write a function that makes an API call to `https://www.randomuser.me/api` -- Inside the same file write two programs: one with `XMLHttpRequest`, and the other with `axios` -- Each function should make an API call to the given endpoint: `https://wwww.placekitten.com/api` +- Inside the same file write two functions: one with `XMLHttpRequest`, and the other with `axios` +- Each function should make an API call to the given endpoint: `https://www.randomuser.me/api` - Log the received data to the console - Incorporate error handling -**Exercise 2: Who do we have here?** +**Exercise 2: Programmer humor** -Wouldn't it cool to make a new friend with just the click of a button? +Who knew programmers could be funny? -Write a function that makes an API call to https://www.randomuser.me/api +Write an function that makes an API call to `https://xkcd.com/info.0.json` -- Inside the same file write two functions: one with `XMLHttpRequest`, and the other with `axios` -- Each function should make an API call to the given endpoint: `https://www.randomuser.me/api` +- Inside the same file write two programs: one with `XMLHttpRequest`, and the other with `axios` +- Each function should make an API call to the given endpoint: `https://xkcd.com/info.0.json` - Log the received data to the console +- Render the `img` property into an `` tag in the DOM - Incorporate error handling -**Exercise 3: Photo gallery** +**Exercise 3: Dog photo gallery** -Let's make a randomized photo gallery! +Let's make a randomized dog photo gallery! -Write a function that makes an API call to https://picsum.photos/400 +Write a function that makes an API call to `https://dog.ceo/api/breeds/image/random`. It should trigger after clicking a button in your webpage. Every time the button is clicked it should append a new dog image to the DOM. - Create an `index.html` file that will display your random image -- Write two programs: one with `XMLHttpRequest`, and the other with `axios` -- Each function should make an API call to the given endpoint: `https://picsum.photos/400` -- After receiving the data, render it to the page in a `` +- Add 2 `