Grundkurs i Modern JavaScript

JavaScript (JS) är helt klart det primära programspråket för applikationsutveckling. Det finns flera bidragade faktorer, såsom att JS finns på både klient-sidan (webbläsaren) och server-sidan (Node.js). Men också att språket har evolverat till ett fullgott sådant under det senaste decenniet. I denna kurs fokuserar vi på de moderna aspekterna av JavaScript och hur du kan ta vara på den mångfald av alternativ som finns. Du får också lära dig att använda transpilers som Babel och bundlers som Parcel, så att du kan programmer med moderna förtecken men ändå kunna exekvera webbapplikationer på äldre webbläsare. Du får också lära dig att använda API:er i moderna webbläsare, såsom kunna använda kameran, ta bilder, ta reda på aktuell GEO position, veta när app:en är offline, kunna utföra AJAX anrop och mycket annat.

Grundkurs i Modern JavaScript
3 dagar
Beginner
Programutvecklare
Kunnande i något program/script-språk
  • Node.js
  • MS Visual Code || JetBrains WebStorm
  • Chrome || Firefox || Edge
Här ser du vilka kursdatum som är tillgängliga. Klicka på en av datumknapparna för att anmäla dig till ett kurstillfälle. På kursen pratar läraren svenska, medan vårt kursmaterial alltid är författat på engelska.

Du sitter bekvämt framför datorn och deltar i kursen via internet. Vi använder programvaran Zoom för alla våra fjärrkurser.

I priset ingår kursmaterial som PDF.

Pris: 15 000 kr + MOMS/VAT (25%)

Du sitter bekvämt i ett av våra klassrum, vilka finns centralt placerade i Stockholms innerstad (Östermalmstorg).

I priset ingår tryckt kursmaterial (och som PDF), samt kaffe/te med smörgås på förmiddagen och kaffe/te med bulle på eftermiddagen.

Pris: 20 000 kr + MOMS/VAT (25%)

Om ni är tre eller fler personer från samma företags, kan ni beställa en företagsanpassad kurs. Då håller vi kursen på ett datum som passar er. Antingen på plats i era lokaler eller som en fjärrkurs. Vi kan även mixa fjärr- och klassrumskurs, om några av er önskar delta på distans medan resten föredrar att ses på plats.

Företagsanpassad Kurs

Här är ett sammandrag av vad du får lära dig på kursen. Du kan också kika på hela kursinnehållet via fliken INNEHÅLL

  • Manage functions and lambda expressions
  • Work efficiently with arrays
  • Be able to create and manage object literals
  • JSON serialization
  • Work with spread operator
  • Can array destructuring
  • Know object destructuring
  • Define classes with fields and getters & setters
  • Using BigInts
  • Understand and be able to use the call-back (continuation) model
  • Be able to handle promise object
  • Understand the concept of promise chain Be able to implement async functions
  • Know what an IIFE is
  • Understand the module concept in Node.js
  • Understand the module concept in ES6
  • Be able to use NPM Be able to use CLI modules with NPX
  • Use Parcel bundler
  • Use Babel trans arrows
  • Use Jasmine unit testing
  • Be able to manipulate DOM nodes
  • Be able to handle DOM events Be able to make AJAX calls Be able to copy to / from the clipboard
  • Be able to read the current GEO position Configure network status notification Be able to take a photo in a web app
  • Be able to handle local / session storage
  • Know the basics of Indexed DB

Background & Overview

  • Language properties
  • EcmaScript
  • ES versions
  • Node.js
  • Browser compatibility

1 - LANGUAGE

Basic Syntax & Types

  • Program structure
  • Identifiers & variablers
  • Function scope vs. block scope
  • Scalar types
  • Operators
  • Statements
  • Functions
  • Functions statement & expression
  • Default parameters
  • Hoisting
  • Lambda expressions (aka fat arrows)

Arrays

  • Array literals
  • Insertions & removals
  • Iterations
  • Manipulations
  • Finder functions
  • Predicate taking functions
  • Sorting
  • Inflating arrays
  • Array streams

Objects

  • Object literal
  • Creating objects
  • Constructor function
  • Object properties
  • Prototype chain
  • The Object object
  • Packing and unpacking objects
  • Immutable objects
  • Cloning objects

JSON

  • JSON syntax and types
  • JSON serialization
  • JSON de-serialization
  • Serialization hooks

Spreading & Destructuring

  • The spread operator
  • Rest parameters
  • Simplified object construction
  • Array destructuring
  • Object destructuring
  • Destructuring in function parameters

Classes

  • Syntax
  • Static variables & functions
  • Getters & setters
  • Public & private fields
  • Subclasses

Library Types

  • Number range and integral values
  • Parsing text with numeric values
  • Formatting numbers
  • The Math object
  • Large integers (BigInt)
  • String creation functions
  • String selectors
  • Regex
  • Date
  • Parsing text with date values
  • Set & Map

2 - ASYNC

Call-backs

  • The JS execution model
  • JS event loop
  • Node.js call-backs
  • The continuation model
  • Postponed computation
  • Periodic computation

Promises

  • Limitations of the call-back model
  • What is a promise object?
  • Creating promises
  • Understanding resolve & reject
  • Promise chains
  • Waiting for many promises at once
  • Using .catch()
  • Call-back taking function to promise returning function

Async Functions

  • What is an async function?
  • Async & await
  • Async lambda
  • Invoking async functions in a loop

3 - MODULES

IIFE - Immediately Invoked Function Expressions

  • What is an IIFE?
  • The module idiom

Node.js Modules

  • Using require()
  • Built-in modules
  • User-defined modules
  • Module folder
  • Briefly about the internals of require()

NPM & NPX

  • What is NPM?
  • Installing a local package
  • Installing a remote package
  • Dependencies
  • Useful NPM commands
  • NVM - Node Version Manager
  • Global NPM modules
  • What is NPX?
  • Recommendations

ES6 Modules

  • What is ES modules?
  • Export forms
  • Import forms
  • Path forms
  • Using ES6 modules in Node.js
  • Using ES6 modules in a modern browser

Transpilers & Bundlers

  • What is a transpiler?
  • What is a pre-processor?
  • What is a post-processor?
  • What is a bundler?
  • Typical operations of a bundler
  • What is a build tool?
  • Gulp.js
  • Parcel
  • Usage of Parcel for development
  • Usage of Parcel for application build
  • Babel
  • Configuration of Babel
  • Translation examples of Babel

Unit Testing

  • Using Jasmine
  • Using Jest
  • Test groups
  • Test functions
  • Matchers
  • Life-cycle functions
  • Test selection

4 - BROWSER

Working with DOM

  • What is DOM?
  • Linking to JS files
  • Script attributes
  • Linking to CSS files
  • Link attributes
  • Finding DOM elements
  • Node contents
  • Manipulating CSS on DOM elements
  • Structurally modifying DOM
  • DOM element attributes

DOM Events

  • What is a DOM event?
  • Registering an event handler
  • Common event properties
  • Click events
  • Form events
  • Keyboard events
  • Key event properties
  • Mouse events
  • Browser events
  • Event propagation
  • User-defined events
  • Dispatching events

AJAX

  • What is AJAX?
  • The XMLHttpRequest API
  • A generic AJAX function
  • The Fetch API

The Browser API

  • What is BOM?
  • The window object
  • The location object
  • Implementing text selection
  • Handling the clipboard
  • Obtaining the current geo position
  • Obtaining network status and information
  • Capturing video and taking a photo
  • Brief about service workers

Browser Storage

  • Key:value storage API
  • Indexed DB concepts
  • Simple Indexed DB usage