Gunther Oracle APEX und Datenbank Wiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Zuletzt angesehen:
prog:modern_javascript

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
prog:modern_javascript [2019/05/15 18:54] – [JavaScript in 2019 - Wie JavaScript heute (2019) implementieren und anwenden] gpipperrprog: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 "richtig" umgesetzt werden?
 +
 +
 +Hier eine kleine Sammlung vom aktuellen/modernen Umgang mit JavaScript für PL/SQL Developer. 
 +=== 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, => [[https://en.wikipedia.org/wiki/ECMAScript|ECMAScript]], aktuell ES7 = ES2016, bald V8 , der JavaScript Interpreter  ( Der [[https://en.wikipedia.org/wiki/Source-to-source_compiler|Transpiler]] ) muss natürlich zu den verwendeten Optionen passen!
 +
 +
 +Siehe daszu TC39 =>   https://www.ecma-international.org/memento/tc39-m.htm
 +
 +
 +----
 +
 +
 +==== Variablen===
 +
 +Früher (ES5) : Standard "**var**" , eine Variable explizit deklarieren, evtl. aber auch noch verfügbar in äußeren Scope der Deklaration, Gültigkeit im Scope nach "Innen"
 +
 +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 "überschrieben" wird, bzw. einen gar nicht so bedachten Wert angenommen hat
 +    * <code javascript>
 +var x=1;
 +if (true) {
 +  let x=0
 +  console.log(x);  
 +}
 +console.log(x); 
 +</code>
 +  * **const** - Eine Konstante definieren 
 +    * <code javascript>
 +const x=0
 +
 +x=1
 +
 +VM876:1 Uncaught TypeError: Assignment to constant variable.
 +    at <anonymous>:1:2
 +    
 +</code> Fehler wird geworfen falls Variable überschrieben werden soll
 +
 +
 +----
 +
 +==== Operatoren ====
 +
 +
 +Spread Operator "**...**" ( Übersetzt wie "verteilen, ausbreiten")
 +
 +Mit dem "..." Operator können Objekte mit einander verknüpft werden.
 +
 +**Array verknüpfen***
 +
 +<code Javascipt>
 +var a = ['a','b','c'];
 +var b = ['x', 'y', 'z'];
 +
 +buchstaben = [...a, ...b]; 
 +
 +
 +// Ergebniss ist ein neues Array mit 
 +// ["a", "b", "c", "x", "y", "z"]
 +
 +</code>
 +
 +
 +=== Destructuring===
 +
 +Linkseitige Zuweisungen, Objekte wieder zerlegen
 +
 +Beispiel:
 +
 +<code javascript>
 +
 +const [a,b,c,d,e]='abcde';
 +
 +console.log(a);
 +
 +</code>
 +
 +==Elision==
 +
 +
 +Werte ignorieren:
 +
 +<code javascript>
 +
 +const [,,w,g]='abcde';
 +
 +console.log(g)
 +
 +d
 +
 +</code>
 +
 +== Rest operator "..." ==
 +
 +Restliches Array in die "hinterste" Variable einfangen.
 +
 +Beispiel:
 +
 +<code javascript>
 +
 + const [x,y,...z]='abcde';
 +
 +console,log(z);
 +
 +
 +["c", "d", "e"]
 +
 +</code>
 +
 +
 +===Exponent infix operator ===
 +
 +Alt: Math.power(1,2)
 +
 +
 +Neu: 1**2
 +
 +
 +=== Template String Literals ===
 +
 +
 +ES2015
 +
 +
 +Stings in Back Ticks '`' mit ${} Syntax formatiert ausgeben. Funktion 
 +
 +
 +=> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
 +
 +
 +
 +<code javascript>
 +
 +const  gpi_printer =  ( text, ...textDetails) => {
 +
 +   return text
 +   
 +   
 +} 
 +
 +</code>
 +
 +
 +
 +----
 +
 +
 +
 +==== Funktions ====
 +
 +===IIFE Immediately Invoked Function Expression ===
 +
 +<code javascript>
 +
 +(function() {
 +   let text= 'called from Immediately Invoked Function Expression';
 +   console.log(text);
 +})();
 +
 +
 +
 +// inkl. Übergabeparameter
 +(function(text) {
 +   console.log(text);
 +})('called from Immediately Invoked Function Expression');
 +
 +
 +// noch kürzer mit Arrow Function
 +(() => {
 +   let text= 'called from Immediately Invoked Function Expression';
 +   console.log(text);
 +})();
 +
 +
 +</code>
 +
 +
 +=> https://medium.com/@vvkchandra/essential-javascript-mastering-immediately-invoked-function-expressions-67791338ddc6
 +
 +
 +=== Arrow Functions ===
 +
 +
 +
 +Seit ES6
 +
 +Der große Unterschied zu einer mit "function () {}" definierten anonymen Funktion ist der Scope, das globale "this"  ist in der Arrow Functions noch referenzierbar.
 +
 +
 +
 +Beispiele:
 +
 +<code javascript>
 +
 +() => { statement }
 +(argument)  => { statement }
 +
 +
 +//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) {
 + return x *2;
 +}
 +
 +x(2)
 +
 +4
 +
 +</code>
 +
 +
 +
 +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
 +
 +<code  javascript>
 +
 +var parts = [ 'NE555','Diode','Transistor','OP']
 +
 +parts.map(listElement => listElement.length);
 +
 +0: 5
 +1: 5
 +2: 10
 +3: 2
 +
 +</code>
 +
 +
 +
 +siehe auch https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
 +
 +
 +
 +
 +=== Default Values für Funktionen ===
 +
 +<code javascript>
 +
 +function myBox( x =1 , y = 1) {
 +  ...
 +}
 +
 +</code>
 +
 +=== Zugriff auf Global this ===
 +
 +V8 !
 +
 +Mit "globalThis" auf den aktuellen This Context zugreigen:
 +<code javascript>
 +const myThis = globalThis
 +
 +
 +//myThis zeigt im Browser nun auf > Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
 +// in Node auf Global etc.
 +
 +</code>
 +
 +
 +Funktioniert nicht im Edge!
 +
 +
 +===Higher-order iterators===
 +
 +watch => https://www.youtube.com/watch?v=GYRMNp1SKXA
 +
 +
 +
 +
 +----
 +
 +=== Array From ===
 +
 +Die Array From Funktion kann über einen zweiten Parameter auch transformieren
 +
 +<code javascript>
 +
 +var o = [1,2,3,4,5,6];
 +
 +var x=Array.from(o,(x) => x-1);
 +
 +//kürzer und noch etwas schlechter zu verstehen .-)
 +var x=Array.from(o, x => x-1);
 +
 +// 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)  );
 +
 +</code>
 +
 +=> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from
 +
 +----
 +
 +==== Async / Await ====
 +
 +Asynchrone Ausführung im Browser
 +
 +
 +
 +
 +
 +----
 +
 +==== Quellen ====
 +
 +==Youtube==
 +
 +Fun Fun Function
 +  * https://www.youtube.com/channel/UCO1cgjhGzsSYb1
 +What the heck is the event loop anyway
 +  * https://www.youtube.com/watch?v=8aGhZQkoFbQ
 +Intro to Modern JavaScript 
 +  * https://www.youtube.com/watch?v=BOSQ8m21oLo
 +JavaScript: Understanding the Weird Parts - The First 3.5 Hours
 +  * https://www.youtube.com/watch?v=Bv_5Zv5c-Ts
 +What’s New in JavaScript
 +  * https://www.youtube.com/watch?v=ALVonT74_gA
 +
 +
 +==Bücher==
 +
 +JavaScript: The Good Parts by Douglas Crockford 
 +  * https://www.goodreads.com/book/show/2998152-javascript
 +
 +
 +Online Buch => https://github.com/getify/You-Dont-Know-JS
 +
 +https://builderbook.org/book
 +
 +
 +==News Letter ==
 +
 +  * https://javascriptweekly.com
 +
 +==Beispiele ==
 +
 +
 +  * https://jsfiddle.net/
 +  * https://codepen.io/
 +
 +  * https://30secondsofcode.org/index#all
  
prog/modern_javascript.txt · Zuletzt geändert: 2019/05/28 16:38 von gpipperr