prog:modern_javascript
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende Überarbeitung | ||
prog:modern_javascript [2019/05/13 17:19] – [Quellen] gpipperr | prog:modern_javascript [2019/05/28 16:38] (aktuell) – [Quellen] gpipperr | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | =====JavaScript in 2019 - Wie JavaScript heute (2019) implementieren und anwenden===== | ||
+ | |||
+ | |||
+ | Seit Netscape Zeit verwende ich JavaScript, aber ist das immer noch die richtige Art und Weise mit der Sprache umzugehen? | ||
+ | |||
+ | |||
+ | Welcher Programmier Stil mit JavaScript ist heute modern und wie sollte es " | ||
+ | |||
+ | |||
+ | Hier eine kleine Sammlung vom aktuellen/ | ||
+ | === Eine Kurzer Rückblick === | ||
+ | |||
+ | |||
+ | JavaScript wurde ursprünglich als einfache Script Sprache entwickelt um einfache Aufgaben im Web zu lösen (Throw Away Language) | ||
+ | |||
+ | Nach und Nach wurde immer Standardisiert, | ||
+ | |||
+ | |||
+ | Siehe daszu TC39 => | ||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | |||
+ | ==== Variablen=== | ||
+ | |||
+ | Früher (ES5) : Standard " | ||
+ | |||
+ | Neu (ES6) | ||
+ | |||
+ | * **let** - Variable nur in diesem Scope definieren | ||
+ | * ähnlich **var**, nur in dem Block Scope! , damit wird das Risiko vermindert, das eine Variable fälschlich in einem anderen Scope plötzlich " | ||
+ | * <code javascript> | ||
+ | var x=1; | ||
+ | if (true) { | ||
+ | let x=0 | ||
+ | console.log(x); | ||
+ | } | ||
+ | console.log(x); | ||
+ | </ | ||
+ | * **const** - Eine Konstante definieren | ||
+ | * <code javascript> | ||
+ | const x=0 | ||
+ | |||
+ | x=1 | ||
+ | |||
+ | VM876:1 Uncaught TypeError: Assignment to constant variable. | ||
+ | at < | ||
+ | | ||
+ | </ | ||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | ==== Operatoren ==== | ||
+ | |||
+ | |||
+ | Spread Operator " | ||
+ | |||
+ | Mit dem " | ||
+ | |||
+ | **Array verknüpfen*** | ||
+ | |||
+ | <code Javascipt> | ||
+ | var a = [' | ||
+ | var b = [' | ||
+ | |||
+ | buchstaben = [...a, ...b]; | ||
+ | |||
+ | |||
+ | // Ergebniss ist ein neues Array mit | ||
+ | // | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | === Destructuring=== | ||
+ | |||
+ | Linkseitige Zuweisungen, | ||
+ | |||
+ | Beispiel: | ||
+ | |||
+ | <code javascript> | ||
+ | |||
+ | const [a, | ||
+ | |||
+ | console.log(a); | ||
+ | |||
+ | </ | ||
+ | |||
+ | ==Elision== | ||
+ | |||
+ | |||
+ | Werte ignorieren: | ||
+ | |||
+ | <code javascript> | ||
+ | |||
+ | const [,, | ||
+ | |||
+ | console.log(g) | ||
+ | |||
+ | d | ||
+ | |||
+ | </ | ||
+ | |||
+ | == Rest operator " | ||
+ | |||
+ | Restliches Array in die " | ||
+ | |||
+ | Beispiel: | ||
+ | |||
+ | <code javascript> | ||
+ | |||
+ | const [x, | ||
+ | |||
+ | console, | ||
+ | |||
+ | |||
+ | [" | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | ===Exponent infix operator === | ||
+ | |||
+ | Alt: Math.power(1, | ||
+ | |||
+ | |||
+ | Neu: 1**2 | ||
+ | |||
+ | |||
+ | === Template String Literals === | ||
+ | |||
+ | |||
+ | ES2015 | ||
+ | |||
+ | |||
+ | Stings in Back Ticks ' | ||
+ | |||
+ | |||
+ | => https:// | ||
+ | |||
+ | |||
+ | |||
+ | <code javascript> | ||
+ | |||
+ | const gpi_printer = ( text, ...textDetails) => { | ||
+ | |||
+ | | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | |||
+ | |||
+ | ==== Funktions ==== | ||
+ | |||
+ | ===IIFE Immediately Invoked Function Expression === | ||
+ | |||
+ | <code javascript> | ||
+ | |||
+ | (function() { | ||
+ | let text= ' | ||
+ | | ||
+ | })(); | ||
+ | |||
+ | |||
+ | |||
+ | // inkl. Übergabeparameter | ||
+ | (function(text) { | ||
+ | | ||
+ | })(' | ||
+ | |||
+ | |||
+ | // noch kürzer mit Arrow Function | ||
+ | (() => { | ||
+ | let text= ' | ||
+ | | ||
+ | })(); | ||
+ | |||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | => https:// | ||
+ | |||
+ | |||
+ | === Arrow Functions === | ||
+ | |||
+ | |||
+ | |||
+ | Seit ES6 | ||
+ | |||
+ | Der große Unterschied zu einer mit " | ||
+ | |||
+ | |||
+ | |||
+ | Beispiele: | ||
+ | |||
+ | <code javascript> | ||
+ | |||
+ | () => { statement } | ||
+ | (argument) | ||
+ | |||
+ | |||
+ | //implicit return | ||
+ | () => expression | ||
+ | einArgument => expression | ||
+ | |||
+ | |||
+ | //explicit return | ||
+ | () => { return expression } | ||
+ | (arg1,arg2) => { return expression } | ||
+ | |||
+ | |||
+ | // Einsatz | ||
+ | |||
+ | // funktion x definieren | ||
+ | |||
+ | x = (x) = > x*2 | ||
+ | |||
+ | x(2) | ||
+ | |||
+ | 4 | ||
+ | |||
+ | // das gleiche wie | ||
+ | |||
+ | function x (x) { | ||
+ | | ||
+ | } | ||
+ | |||
+ | x(2) | ||
+ | |||
+ | 4 | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | Das bedeutet mehr das ein oder mehr Argument auf eine bestimmte Art verarbeitet werden sollen, auf das return der impliziten Funktion dahinter kann direkt verwiesen werden. | ||
+ | |||
+ | |||
+ | Einsatz besonders mit Funktionen wie wiederum eine Funktion als Argument erwarten, wie map auf einer Collection | ||
+ | |||
+ | < | ||
+ | |||
+ | var parts = [ ' | ||
+ | |||
+ | parts.map(listElement => listElement.length); | ||
+ | |||
+ | 0: 5 | ||
+ | 1: 5 | ||
+ | 2: 10 | ||
+ | 3: 2 | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | siehe auch https:// | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | === Default Values für Funktionen === | ||
+ | |||
+ | <code javascript> | ||
+ | |||
+ | function myBox( x =1 , y = 1) { | ||
+ | ... | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | |||
+ | === Zugriff auf Global this === | ||
+ | |||
+ | V8 ! | ||
+ | |||
+ | Mit " | ||
+ | <code javascript> | ||
+ | const myThis = globalThis | ||
+ | |||
+ | |||
+ | //myThis zeigt im Browser nun auf > Window {postMessage: | ||
+ | // in Node auf Global etc. | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | Funktioniert nicht im Edge! | ||
+ | |||
+ | |||
+ | ===Higher-order iterators=== | ||
+ | |||
+ | watch => https:// | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | === Array From === | ||
+ | |||
+ | Die Array From Funktion kann über einen zweiten Parameter auch transformieren | ||
+ | |||
+ | <code javascript> | ||
+ | |||
+ | var o = [1, | ||
+ | |||
+ | var x=Array.from(o, | ||
+ | |||
+ | //kürzer und noch etwas schlechter zu verstehen .-) | ||
+ | var x=Array.from(o, | ||
+ | |||
+ | // ergibt x | ||
+ | //[0, 1, 2, 3, 4, 5] | ||
+ | |||
+ | |||
+ | //ein Array mit 5 Zufallszahlen zwischen 0 und 99 erzeugen | ||
+ | var x=Array.from( { length: 5 } , () => Math.floor(Math.random()*100) | ||
+ | |||
+ | </ | ||
+ | |||
+ | => https:// | ||
+ | |||
+ | ---- | ||
+ | |||
+ | ==== Async / Await ==== | ||
+ | |||
+ | Asynchrone Ausführung im Browser | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | ==== Quellen ==== | ||
+ | |||
+ | ==Youtube== | ||
+ | |||
+ | Fun Fun Function | ||
+ | * https:// | ||
+ | What the heck is the event loop anyway | ||
+ | * https:// | ||
+ | Intro to Modern JavaScript | ||
+ | * https:// | ||
+ | JavaScript: Understanding the Weird Parts - The First 3.5 Hours | ||
+ | * https:// | ||
+ | What’s New in JavaScript | ||
+ | * https:// | ||
+ | |||
+ | |||
+ | ==Bücher== | ||
+ | |||
+ | JavaScript: The Good Parts by Douglas Crockford | ||
+ | * https:// | ||
+ | |||
+ | |||
+ | Online Buch => https:// | ||
+ | |||
+ | https:// | ||
+ | |||
+ | |||
+ | ==News Letter == | ||
+ | |||
+ | * https:// | ||
+ | |||
+ | ==Beispiele == | ||
+ | |||
+ | |||
+ | * https:// | ||
+ | * https:// | ||
+ | |||
+ | * https:// | ||
prog/modern_javascript.txt · Zuletzt geändert: 2019/05/28 16:38 von gpipperr