# JavaScript för programmerare Nivå: beginner | Målgrupp: Web programmerare | Förkunskaper: Kunnande i något program/script-språk https://www.ribomation.se/programmerings-kurser/javascript/ 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. JavaScript (JS) är helt klart det primära programspråket för applikationsutveckling. Det finns flera bidragande 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. - 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