Gunther Oracle APEX und Datenbank Wiki

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
=====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