Main /

Javascript

Javascript

/ HomePage / Computer / Software / Programmierung/

Javascript

nodejs

Hier mal eine kurze Einführung zu Javascript Sprache und dessen Einbindung in HTML Seiten.

Javascript in HTML einbetten

Javascript einzubinden ist recht einfach. Dafür gibt es das <script type="text/javascript"> Tag. Das language Attribute gilt als veraltet.

Um mit Javascript zu programmieren wird ein vernünftiger Editor empfohlen, Eclipse, IntelliJ von IDEA, Visual Studio Code vielleicht auch Netbeans. Ich nutze zwar auch noch den Emacs, aber ob es das gelbe vom Ei ist, wage ich zu bezweifeln. Fürs erste reicht dann noch ein Browser, der die eigene HTML Datei läd und per F12 erlaubt einen Firebug oder ähnliches zu laden/benutzen.

Programme muss man starten, um diese auszuführen. Javascript wird per Script Tag in HTML Seiten eingebettet und startet sofort, noch während die HTML Seite geladen wird. Da bedeutet, das evtl. der DOM-Tree den HTML beschreibt noch nicht komplett geladen ist. Das muss man wissen. Genauso gibt es in Javascript nur einen Thread. Braucht ein Javascript also sehr lange um interpretiert zu werden wird die Seite noch nicht angezeigt, da die Interpretation noch nicht abgeschlossen ist. Gibt es eine Endlosschleife, wird die Seite nie angezeigt.

Es gibt entsprechende Erweiterungen, um Javascript genau dann laufen zu lassen, wenn die HTML Seite komplett geladen ist.

Ausgaben auf Konsole oder in einer Dialogbox

  • console.log(...) ist ganz hilfreich für Ausgaben auf einer Konsole z.B. im Firebug. Sollte im IE nicht verwendet werden... , da dieser mit einer Exception aussteigt.
  • alert(...) ist auch hilfreich für Ausgaben, wenn man keine Konsole hat.

Variablen

Wie in Programmiersprachen üblich, beginnt eine Variable mit einem x beliebigen Buchstaben oder einem Unterstrich und erlaubt danach auch Zahlen.

Datentypen

Javascript ist keine statisch typisierte Sprache also kann eine Variable mal eine Zahl dann wieder ein String oder ein Array oder ein Objekt sein.

  • Numerisches, ist immer vom Typ double
  • Strings mit Quote oder double Quote. '...' oder "..."
  • Arrays 
 var a =[1,2,3];
 var x = a[2]; // x enthält den Wert 3
  • Objekte als Liste von Key:Value Werten 
 var a = { a:1, b:2, c:"String" };
 x = a.c;    // x ist jetzt ein String mit Wert 'String'
 x = a['c']; // ist eine alternative Möglichkeit.
  • Funktionen 
 x = function() {...}

x ist jetzt eine Funktion, die weitergegeben werden und auch aufgerufen werden kann.

Schleifen

  • while Schleife while (...) ...
  • do while do ... while (...)
  • for Schleife for (var i=0;i<n;i++) ...
  • for in 
 var a={a:1,b:2};
 for (var key in a) {
    var value = a[key];
    ...
 }

Bedingungen

  • if (condition) ... else ...

Scoping

Wann ist eine Variable sichtbar, wann nicht.

  • Eine Variable ist auch schon vor dessen Definierung mit var bekannt, nur dann halt mit Wert undefined
  • Es endet für lokale Funktionen beim verlassen diese, sonst sind Variablen im globalen Scope immer bekannt. D.H. auch wenn ein Script Tag verlassen wird und ein neues Script Tag startet, ist die Variable noch bekannt.

Funktionen

  • Definition einer Funktion 
 var name = function() {...}

Dann ist die Variable name eine Funktion die per name() aufgerufen werden kann, oder als Parameter weitergegeben werden kann.

  • andere bekanntere Definition einer Funktion 
 function name() {...}
  • Parameter 
 function name(arg) {
   var x = arg;
 }

Damit bekommt die lokale Variable x den Wert von arg übergeben. Es gibt innerhalb von Funktionen das Array arguments, so kann man auch auf die übergebenen Parameter zugreifen. 

 var x = arguments[0];

Damit bekommt x den Wert des ersten Parameters. Kann hilfreich sein, da man die Namen von Parametern nicht angeben muss, genauso ist es nicht nötig alle Parameter beim Funktionsaufruf anzugeben. 

 function f(a,b) {...}

Legale Aufrufe sind: 

 f(1,2);
 f(1);
 f();
 f(1,2,3,4);
 ...

Es gibt kein Function-Overloading wie in Java oder C++ wo eine Funktion mit dem selben Namen anhand der unterschiedlichen Parametertypen unterschieden wird.

Anonyme Funktion nebst dessen Aufruf 

 (function () {
    ...
 })();

JSON

Ein Javascript Objekt läßt sich ganz einfach in einen JSON String verwandeln 

 JSON.stringify({a:1,b:2});

Oder ein String in ein Java Objekt 

 var autoString = '{"auto":{"marke":"vw","model":"golf"}}';
 var container = JSON.parse(auto);
 var marke = container.auto.marke; // vw

Das geht, solange es keine Funktionen im Objekt gibt.

== vs ===

Da man in Javascript ständig den Typ eines Objektes prüfen muss, sollte man dafür '===' verwenden, das macht keine explizite Typkonvertierung.

Exceptions

Es gibt nur eine Exception, die abgefangen werden kann 

 try {
   ...
 } catch (e) { ... }

Man kann alles werfen auch throw 1; Damit gäbe es eine Exception und die Variable e hätte den Wert 1.

this

In Java ist das this ein Zeiger auf das eigene Objekt, in Javascript ist mit this eher der Kontext gemeint. 

 var Person = function (name, vorname) {
     this.name = name;
     this.vorname = vorname;

     this.print = function () {
         console.log("Person: " + this.vorname + " " + this.name);
     }
 };
 var luke = new Person('Luke', 'Skywalker');
 luke.print();  // Person: Luke Skywalker

window

Es gibt ein Globales Objekt, das window dieses enthält sehr viele Informationen über das zugrunde liegende Browserfenster, Größe (innerWidth, innerHeight), ...

document

Das document enthält den sog. DOM-Tree, es ist die HTML Seite, die dargestellt wird. Da die Bearbeitung mittels Plain Javascript stark vom Browser und dessen Version abhängt, soll hier nicht weiter darauf eingegangen werden, dazu gibt es eine sehr gute Hilfslibrary, jQuery, die viele Browserinkompatiblitäten kapselt. So das man sich nicht darum kümmern muss ob man einen Google Chrome oder einen Mozilla Firefox oder womöglich einen IE unter sich hat.

Nur soviel, man greift meist mittels id Attribut in den DOM ein, da diese eindeutig sind.

Nützliche Erweiterungen

ECMAScript 6

Das neue Javascript

Endlich richtige Klassen, lambda Ausdrücke, ...

Online Editoren

Um mal schnell etwas auszuprobieren gibt es Online Editoren, die alles bieten, was man zum schnellen austesten braucht. Nebst Weitergabe an andere.

Links

Frische Änderungen | Menü editieren
zuletzt geändert am 16.05.2018 10:16 Uhr von Lars
Edit Page | Page History