JavaScript, the Document Object Model (DOM) and AJAX

Plan

Day 1 - An introduction to JavaScript

Day 2 - Document Object Model (DOM)

Day 3 - JavaScript and DOM continued

Day 4 - AJAX, with fetch() and JSON

Day 5 - Study point exercises

Learning objectives

• Learn the fundamentals of modern JavaScript, including features from ES6.
• Learn how to create modern pages than can update the DOM, with no need to refresh the whole page, using plain JavaScript Dom, and AJAX.
• Get a basic understanding of the term Single Page Application, and how it differs from server-side rendered app's as introduced on 2. Semester.
• Get the necessary skills to, later use a modern JavaScript SPA-library like REACT.

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

Day 1-2: The JavaScript Array , JavaScript Ex-1

Day 2-3 Dom Manipulation and Events

Day 4 Ajax and Dom Manipulation

Day 5 StudyPoint Exercise 2

Resources:

There are tons of JavaScript articles on the Web. The two major resources are https://www.w3schools.com/ and MDN (Mozilla). Usually, articles from the first, are easier to read, more light weight, and often not quite as up to date as MDN. MDN should be considered like reference documentation. Often when you google; articles from w3schools will pop up first. If you prefer MDN, add this to you search term, for example "javascript array MDN". If you prefer w3, where you often can try things out, do "javascript array w3". Important: Don't always add W3 or MDN to your search queries, there are lots of other great sources out there.

Our recommended resources for this week:

• JavaScript (W3) , JavaScript (MDN)
• Document Object Model (W3) , Document Object Model (MDN)
• Course on Lynda.com
• Codecademy course

AJAX, and JSON: Both W3, and MDN uses the XMLHttpRequest() for server requests, a function that ships with "all" browsers today. Newer browsers however, provide a function fech(..) which is the one we will use. So the AJAX link below is for the Wikipedia article (which are very general) and to info about fetch:

• [Ajax] https://en.wikipedia.org/wiki/Ajax_(programming)
• JSON
• fetch(..)