JavaScript(p2), DOM, AJAX, JSON + an introduction to the Single Page Architecture

Before the start of this period you should:

You can do with NetBeans only for this period, but I (very much) suggest you install node and a new JavaScript editor, to prepare yourself for period 3 (and make this periods JavaScript a bit more fun/realistic)

• Install Node (important, install the LTS-version): https://nodejs.org/en/download/
• Install a new editor/IDE for JavaScript development, we suggest Visual Studio Code: https://code.visualstudio.com/download
• Install Postman (if not already done) before wednesdays lecture (Ajax)

Tuesday - JavaScript/DOM continued

User defined Callbacks, this in JavaScript, Constructor Functions, ES6 and how to use it, closures, var and hoisting.

Wednesday - Ajax, JSON, fetch Same-origin Policy and CORS

Ajax, JSON, fetch Same-origin Policy, CORS and how to use it with a REST-API Backend

Thursday - Single Page Applications

• An introduction to the Single Page Architecture
• How to write Single Page Applications with plain JavaScript
• How to deploy SPA's on separate servers using CORS

Business competences

JavaScript is one of the most demanded programming skills (ref: it.jobindex.dk ).

JavaScript this semester will provide students with the background to join modern front-end teams, using JS and supplementing JS frameworks/libraries.

Exercises

• Tuesday: JavaScript2 Exercises Day 1
• Wednesday: Ajax, fetch and DOM
• Thursday: CORS and Hosting
• Friday: Friday StudyPoint Exercises

Resources:

Our recommended resources for this week:

Day-1 (plain JavaScript)

• Skim/read, whatever you miss from period-1 For the map and filter below, make sure you understand all the arguments you can provide to the callback! If you wan't a more detailed description, just search for the similar article from MDN.
• The JavaScript Array map() method
• The JavaScript Array filter() method
• JavaScript Array reduce() Method
• JavaScript Hosting
• Skim this article, and come back whenever we talk about this: this
• JavaScript closures (yellow/red)

Day-2 (AJAX, Same-origin Policy and CORS)

• Skim this Wikipedia article (it has a large section about drawbacks (relevant) and no section about Pros (problematic) [Ajax](https://en.wikipedia.org/wiki/Ajax_(programming)
• Read this article about how to use fetch with promises, and how to handle error-responses
• GREEN, read this --> Same-origin Policy ---- RED read this same-origin-policy
• GREEN, read this --> CORS ---- RED, read this CORS
• ONLY skim this article, and use it as a reference for fetch

Day-3 (Single Page Applications)

Watch (as in WATCH ;-) this video about Single Page Applications (Whenever he uses the term MPA (multipage application, think WEB as you did it on 2. semester) Read, what you did not have time for yesterday, about Same-origine-policy and CORS