JavaScript 2

Kursens innehåll

Kursen är en fördjupning inom främst vanilla JavaScript med fokus på Prototyper, scope, context, designmönster samt mycket AJAX mot slutet av kursen.

Examination

Examinationen kommer att vara uppdelad i två olika obligatoriska inlämningar med tillhörande labbtid. Den ena som kommer att fokusera på uppläggning av kod samt olika designmönster inom JavaScript och den andra som kommer att fokusera på att hämta data från APIer men där vi även ska implementera ett designmönster.

Inlämningsupgifter

Examination 1: Design Patterns

Examination 2: AJAX

Inlämningar

Inlämningarna kommer att bedömas på hur väl du lägger upp din kod och håller dig till de riktlinjer för att skriva väl fungerande kod. Användande av designmönster, välskrivna funktioner, kodkommentarer och namngivning av variabler är något som premieras över att man lyckats implementera alla funktioner som din applikation ska ha.

• Inlämningarna ska versionshanteras med GIT
• Inlämningarna ska ha rätt filformat, filstruktur och filnamn annars kommer de inte att bli betygsatta i tid. Man blir i så fall tvungen att skicka in en komplettering

Kurslitteratur

Till kursen kommer främst You Don't Know JavaScript samt JavaScript Design Patterns att användas. Dessa är de huvudsakliga böckerna för fördjupning inom området. Sedan kommer det vara webbaserade länkar till varje enskilt tillfälle med extra information.

• You Don't Know JavaScript | Kyle Simpson
• JavaScript Design Patterns | Addy Osmani

Schema

---

v.7

Måndag 13/2

• Introduktion
  • Kursens innehåll
  • Examination
  • Kursens mål
  • Kriterier
• Repetition av JavaScript

Lektionsmaterial

• Slides: JavaScript 2 Intro
• Exercise: 01 World Stats
• Solutions: 01 World Stats Regular Loops
• Solutions: 01 World Stats Map, Reduce, Filter

Onsdag 15/2

• Scope & Context
• Closures

Lektionsmaterial

• Slides: Scope & Context
• Exercise: 02 Scope & Closures

Litteratur

• YDKJ | Scopes & Closures | Fördjupning
• Ryan Morr | Scopes, Context & Closures

Torsdag 16/2

• Objects
  • Constructor functions
  • Prototypes
  • Object.create();
• .this

Lektionsmaterial

• Slides: Prototypes
• Exercise: Objects & Prototypes
• Solutions: 03 Objects & Prototypes

Litteratur

• YDKJ | .this & object prototypes | Fördjupning
• JavaScript Prototypes in Plain Language
• Common Misconceptions about Inheritance in JavaScript

---

v.8

Måndag 20/2

• JavaScript Design Patterns
  • Module Pattern
  • Revealing Module Pattern

Lektionsmaterial

• Slides: Design Patterns
• Exercise: 04 Design Patterns
• Solutions: 04 Design Patterns
• Code: Design Patterns

Litteratur

• JavaScript Design Patterns: Constructor Pattern
• JavaScript Design patterns: Module Pattern
• JavaScript Desing Patterns: Revealing Module Pattern
• StackOverflow | OLOO Pattern

Tisdag 21/2

• JavaScript ES6
• JavaScript ES6 Classes

Examinerande uppgift

Lektionsmaterial

• Slides
• Exercise: 05 - ES6 Classes
• Solutions: 05 - ES6 Classes
• Code: ES6 Exempel

Litteratur

• ES6 Classes | Exploring JS ES6
• ES6 Features
• ES6 Cheat Sheet

---

v.9

Måndag 27/2

• Designmönster & ES6 dag 1
• Arbete med Obligatorisk inlämning
• Lämna in första utkast på onsdag 1/3 7.00

Tisdag 28/2

• Designmöster & ES6 dag 2
• Arbete med Obligatorisk inlämning
• Lämna in första utkast på onsdag 1/3 7.00

---

v.10

Måndag 6/3

• Node, npm och byggverktyg
  • Introduktion till Nodes ekosystem
  • Sätta upp ett enklare byggsystem med Gulp
  • Gulp-recept
  • Alternativ till gulp

Lektionsmaterial

• Slides: Node, npm & Gulp
• gulp-boilerplate
• Exercises: 06_node

Litteratur

• npmjs.com | npm repository
• Gulp Tutorial
• CSS-tricks | Gulp Tutorial
• nodeschool.io

Tisdag 7/3

• DOM-manipulation med vanillaJS
  • Repetition
  • Viktiga metoder
• Introduktion till jQuery
  • Selektorer
  • Viktiga metoder
• AJAX
  • Vanilla AJAX
  • jQuery AJAX
  • Fetch AJAX

Lektionsmaterial

• Slides: jQuery & AJAX
• Exercise: 07_ajax
• Code: 07_ajax

Litteratur

• json-server
• Egghead | Creating Demo APIs with json-server
• Call Me Nick | Basic DOM-manipulation
• Call Me Nick | Some jQuery Functions And Their JavaScript Equivalents
• jQuery API Reference
• jQuery CDN
• David Walsh | Fetch
• jQuery AJAX
• SitePoint | jQuery AJAX
• W3Schools.com | AJAX Tutorial

---

v.11

Måndag 13/3

• AJAX fortsättning
• Asynchronus JavaScript
• Promises
• ReST API
  • Hämta data från API
  • Vilket API ska man välja Repetition, vad man ska tänka på när man skriver sin app

Lektionsmaterial

Examinerande uppgift: AJAX

• Slides: Async & API
• Slides PDF: Async & API

Litteratur

• toddmotto@github | Public APIs
• APIKatalogen
• Programmable Web API Directory
• Callback Hell
• ReST API Tutorial

Tisdag 14/3

• Öppet pass, kom gärna med förslag om vad ni vill göra annars så lägger jag in ett pass om sånt som jag tycker är bra att kunna och ytterligare fördjupning. Eventuellt fördjupning inom node och npm.

• Programmeringsparadigm

• Designprinciper

Lektionsmaterial

• Slides: JavaScript Summary
• Slides PDF: JavaScript Summary

Litteratur

• 10 Interview questions every JavaScript Developer Should Know by Eric Elliott
• Composition > Inheritance by funfunfunctions
• Understanding Prototypes, Delegation and Composition by Dave Atchley
• Making sense of front end build tools by Roneesh
• Comparison of Programming Paradigms
• TODOMVC.COM
• Vanilla MVC Implementation

---

v.12

Torsdag 21/3

• Ajax & Design Pattern
• Arbete med Obligatorisk inlämning

Fredag 24/3

• Ajax & Design Pattern
• Arbete med Obligatorisk inlämning

---

v.13

Tisdag 28/3

• Ajax & Design Pattern
• Arbete med Obligatorisk inlämning

Onsdag 29/3

• Ajax & Design Pattern
• Arbete med Obligatorisk inlämning

Torsdag 30/3

• Presentation av båda inlämningsuppgifterna för läraren, sker individuellt.
• Inlämning av kod.