JavaScript 2

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.

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ä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

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

v.7

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

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

• Scope & Context
• Closures

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

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

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

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

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

v.8

• JavaScript Design Patterns
  • Module Pattern
  • Revealing Module Pattern

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

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

• JavaScript ES6
• JavaScript ES6 Classes

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

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

v.9

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

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

v.10

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

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

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

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

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

• 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

• 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

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

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

• Ö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

• Slides: JavaScript Summary
• Slides PDF: JavaScript Summary

• 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

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

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

v.13

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

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

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