ECMAScript-Einführung

Link zur Norm ECMAScript-262 (pdf 2.5MB)
JavaScript (Historie) Wie entstand ECMAScript aus JavaScript?

ECMAScript ging aus proprietären JavaScript-Spezifikationen hervor. Proprietär kommt vom lateinischen proprietas und meint etwa Eigentümlichkeit, Eigentum, Closed Source, umfassenden Vorbehalt des Urhebers. JavaScript wurde ab 1998 zu einem internationalen Standard ECMA-262. Dadurch wurden die proprietären Spezifikationen, wie z.B. JavaScript (Netscape) und JScript (Microsoft), usw. vereinheitlicht und genormt.

Derzeit gibt es die ECMAScript Language Specificationen (ECMA-262):

1th Edition: NOT AVAILABLE
2th Edition: August 1998
3th Edition: December 1999
4th Edition: NOT EXISTING
5th Edition: December 2009 

Aktuelle Spezifikation ECMAScript-262 (pdf 2.5MB)   Versionen- Korrespondenzen

Einige Jahreszahlen zur JavaScript-Historie:

JavaScript-Historie
1995 Offizielle Verkündigung von JavaScript durch Sun und Netscape (früher LiveScript). Netscape Navigator 2.0-Vorversion (LiveWire, LivePayment, LiveAudio, LiveScript Brendan Eich).
1996 Netscape stellt den Enterprise Server 2.0 vor, der erste Server, der JavaScript beherrscht. Navigator 3.0 und Netscape Enterprise Server 2.0 (LiveConnect-Schnittstelle für Kommunikation zwischen JavaScript, Java und Plugins). Netscape und ECMA wollen JavaScript standardisieren
1996 Microsoft Internet Explorer 3 (MSIE3, JScript, VBScript)
1997 Microsoft verknüpft HTML, Scripting and Style Sheets zu DHTML.
1997 Communicator (Navigator 4.0, mit JavaScript 1.2)
1997 Die European Computer Manufacturers Association (ECMA) veröffentlicht ECMAScript als standardisierte Version von JavaScript und reicht den Standard bei der ISO ein. Draft International Standard ECMA-262: ECMAScript (entspricht JavaScript)
1997 W3C Note zu XSL (ECMAScript wird Scriptingsprache für XSL und XML)
1997 MSIE 4 (JavaScript 1.1, DOM)
1998 VRML97 wird ISO-Standard (ECMAScript)
1998 Adobe-PDF-Webformulare dürfen JavaScript enthalten
1998 Navigator-Source-Code-Freigabe (Mozilla)
1998 Netscape zeigt, dass JavaScript in 3,5 Millionen Webseiten eingesetzt wird
1998 ECMAScript wird Norm ISO/IEC 16262
1998 Communicator 4.5
1998 Netscape JavaScript 1.4 (kompatibel mit ECMA-262, Exception handling, New operators in and instanceof, Changes to LiveConnect, Changes to the Function object)
1999 Standard ECMA-262, Language Specification,3th Edition: December 1999
2009 Standard ECMA-262, Language Specification, 5th Edition: December 1999
ECMAScript (Übersicht) ECMAScript im Browser
ECMAScript is an object-oriented programming language for performing computations and manipulating computational objects within a host environment.

ECMAScript definiert eingebaute Objekte (built-in objects), die global sind (Object object, Function object, Array object, String object, Boolean object, Number object, Math object, Date object, RegExp object, JSON object, Error objects). ECMAScript definiert eingebaute Operatoren (unary operations, multiplicative operators, additive operators, bitwise shift operators, relational operators, equality operators, binary bitwise operators, binary logical operators, assignment operators, comma operator).
Link zur Norm ECMAScript-262 (pdf 2.5MB)

ECMAScript wird im allgemeinen Sprachgebrauch auch JavaScript genannt. ECMAScript kann Objekte erstellen und verwenden. Mit ECMAScript können (Browser-, DOM- und User-) Objekte benutzt und Formulare, Buttons, HTML-Text erzeugt und manipuliert werden. Interaktionen mit der Tastatur und Maus sind möglich.

ECMAScript 262 beschreibt einen standardisierten JavaScript-Sprachkern. ECMAScript ist eine schlanke, dynamisch typisierte, objektorientierte, aber klassenlose Skriptsprache. Auf der Basis von Prototypen (und weiterem) sind alle objektorientierten Programmierparadigmen möglich. Mit ECMAScript kann objektorientiert und auch prozedural und auch rein funktional programmiert werden.

  1. Die objektorientierte Programmiersprache Java ist von der objektbasierten JavaScript-Sprache zu unterscheiden.
  2. ECMAScript (JavaScript) ist zwar syntaktisch an Java angelehnt und entspricht einer case-sensitiven, objektbasierten Sprache.
  3. Die Script-Sprache ist hinsichtlich der Typisierung (schwache Typprüfung, loosely-typed-language) hat aber die Möglichkeit der typeof()-Typprüfung
  4. ECMAScript wird meist clientseitig verwendet, benötigt ein zugehöriges Anzeige-Programm (WWW-Browser, ggf. auch Webserver), das den Script-Code interpretiert
  5. Im Browser sind schreibende Festplattenzugriffe (Arbeitsspeicherverwaltung, Dateioperationen) verboten
  6. Script-Code verwendet "garbage collection"
  7. Script-Code kann in den Header und Body-Tag einer HTML-Datei stehen oder aus separaten .js-Dateien importiert werden
  8. Script-Code kann in eine HTML-Page geschrieben werden und dient vielfach der dynamischen Seitengestaltung.
ECMAScript (Einsatzgebiete) Wo wird ECMAScript verwendet?

ECMAScript (siehe ECMAScript-262-Standard (pdf 2.5MB) ) wird in Millionen von Webseiten verwendet (Browser-Voreinstellung).

ECMAScript

ECMAScript (Cloud, Zusammenhänge) historische Zusammenhänge von ECMAScript
Bildgröße 608 x 456
Zusammenhänge von ECMAScript
Bildgröße 981 x 736
Zusammenhänge von ECMAScript
ECMAScript (Environment, Sicherheit) Wie sicher ist ECMAScript?

JavaScript braucht eine ausführende Umgebung (Environment, Browser) das den JavaScript-Code interpretiert, d.h. JavaScript im Browser läuft wie in einer "Sandbox", die die Programmiersprache in eine Art Sicherheitskäfig eingesperrt. Dadurch wird verhindert werden, dass ECMAScript-Code beim Surfen auf dem Rechner von Anwendern (Client-Rechnern) Schaden verursachen können. Der Sicherheitskäfig verhindert gefährliche (Schreib-) Zugriffe aus das Dateisystem. ECMAScript kann (i.a.) im Browser deaktiviert werden.

Achtung! Der User kann (i.a.) auch Sicherheitseinstellungen setzen, die Beschränkungen bedingt umgehen (Upates, ActiveX, rein lokale Browser-Applikationen, RPC).

Unter Windows kann ein javaScriptFile.js auch ohne Browser von der Console aus (WSH = Windows Scripting Host; mit Hilfe von cscript.exe oder wscript.exe) ausgeführt werden. Dadurch sind Admistrationen und Zugriffe auf das Dateisystem von Windows möglich. Aus JavaScript können keine Nativ-Applikationen erzeugen werden.

ECMAScript (Einsatz, allgemein) Wie wird ECMAScript verwendet?

ECMAScript (=JavaScript) kann Objekte erstellen und verwenden. Mit JavaScript können (Browser-) Objekte benutzt werden. Mit JavaScript können Formulare, Buttons, HTML-Text erzeugt und manipuliert werden. Interaktionen mit der Tastatur und Maus sind möglich.

ECMAScript hat eingebaute Objekte und es kann objektorientiert programmiert werden. Funktionen, Arrays, Strings, Booleans, Date Objects, Math Objects, Regular Expression, Pattern sind Objekte.

ECMAScript ist eine Script-Sprache, die innerhalb von HTML-Dokumenten verwendet werden kann. Der anzeigende Browser interpretiert die Script-Statements. Mit ECMAScript können HTML-Seiten interaktiv gestaltet werden (Animationen, Lauftexte, Marquees, Statuszeile, Events, onMouseOver, usw.) und mehrere Fenster (Framesets) gleichzeitig aktualisiert werden.

Mit ECMAScript können Formularprüfungen während der Eingabe durchgeführt werden. Die neuen Browser unterstützen mit Hilfe von ECMAScript dynamische WWW - Seiten. Z.B. können die Hintergrund / Vordergrund - Farben während dem Laden der Seite automatisch oder im Dialog geändert, die aktuelle Uhrzeit benutzt, formatierter WWW - Text erstellt werden. ECMAScript - Programme werden direkt in die HTML - Datei gestellt und ähnlich zu Batch-Dateien oder Shell-Scripts ausgeführt. Weil der ECMAScript interpretiert wird, werden nur kleine Script-Programme verwendet. Die Ausführung von großen Programmen ist langsam. Der Client - Anwender hat keinen Schutz vor Programmfehlern ( Endlosschleife ).

Beispiele: Vergleich zwischen ECMAScript und Java

Dieses Beispiel findet sich hier (Vergleich zwischen JavaScript und Java, Creating the Hierarchy).

beispiel-vergleich-js-java
JavaScript Java
function Employee () {
  this.name = "";
  this.dept = "general";
}
public class Employee {
   public String name;
   public String dept;
   public Employee () {
      this.name = "";
      this.dept = "general";
   }
}
JavaScript Java
function Manager () {
  this.reports = [];
}
Manager.prototype = new Employee;

function WorkerBee () {
  this.projects = [];
}
WorkerBee.prototype = new Employee;
public class Manager extends Employee {
   public Employee[] reports;
   public Manager () {
      this.reports = new Employee[0];
   }
}

public class WorkerBee extends Employee {
   public String[] projects;
   public WorkerBee () {
      this.projects = new String[0];
   }
}
JavaScript Java
function SalesPerson () {
   this.dept = "sales";
   this.quota = 100;
}
SalesPerson.prototype = new WorkerBee;

function Engineer () {
   this.dept = "engineering";
   this.machine = "";
}
Engineer.prototype = new WorkerBee;
public class SalesPerson extends WorkerBee {
   public double quota;
   public SalesPerson () {
      this.dept = "sales";
      this.quota = 100.0;
   }
}

public class Engineer extends WorkerBee {
   public String machine;
   public Engineer () {
      this.dept = "engineering";
      this.machine = "";
   }
}

ECMAScript-Beispiele

ECMAScript (Einbettung in XHTML) ECMAScript-Einbettung in eine Page

ECMAScript-Code kann in eine *.js- Datei ausgelagert werden. Der ausgelagerte Code ist ohne umschließende <script> ... </script>-Tags und kann in die aktuelle Seite "includiert" (geladen) werden. Eine HTML-Seite kann auch seiteninterner ECMAScript-Code verwenden, der zwischen <script> und </script> steht. ECMAScript-Code kann im HTML-Body und/oder im HTML-Head stehen.

Code Snippet
  1. <script type="text/javascript" src="my_init_variablen.js"></script>
  2. <script type="text/javascript" src="my_functions.js"></script>
  3.     <script type="text/javascript">
  4.   // hier steht seiteninterne ECMAScript-Code
  5. </script>

JavaScript-Funktionen werden oft im Head definiert und im Body verwendet. Die Prüfung, ob im Browser JavaScript aktiviert ist erfolgt im Body etwa gemäss:

 <noscript>
    Bitte beim Browser JavaScript aktivieren!
 </noscript>

JavaScript und XHTML:

Code Snippet
  1. <script type="text/javascript">
  2. // <![CDATA[
  3.   /* JavaScript-Kommentar: jetzt folgt ein kleines Script */
  4.   if(parseInt(navigator.appVersion) < 4) {
  5.     alert("ein alter Browser");
  6.   }
  7. // ]]>
  8. </script>
ECMAScript (Geltungsbereich von Variablen) Block-Sichtbarkeit?

Die meisten Sprachen mit c-ähnlicher Syntax haben einen Block-Geltungsbereich. ECMAScript verwendet einen Funktions-Geltungsbereich.

Hier ein Beispiel, das die Sichtbarkeit der globalen Variablen x zeigt. Achtung! Eine Verbundanweisung schafft keine neue Sichtbarkeit von inneren Variablen.

Code Snippet (teste x als globale Variable)
  1. <script type="text/javascript">//<![CDATA[
  2.  
  3. var x = 4, s = ""; // teste x als globale Variable
  4.  
  5. function test1() {
  6.    s += "\n test1: glob. x=" + x;
  7. }
  8.  
  9. function test2() {
  10.    s += "\n test2: glob. x=" + x;
  11.    var x = 1;
  12.    s += " und nach var x = 1 ist x=" + x;
  13. }
  14. function test3() {
  15.    s += "\n test3: glob. x=" + x;
  16.    var x = x;
  17.    s += " und nach var x = x ist x=" + x;
  18. }
  19.  
  20. test1(); test2(); test3(); document.write(s);
  21. //]]>
  22. </script>

Hier die Ausgabe:

ECMAScript (Programmier-Reinfälle) Typische Programmierfehler ...

Siehe z.B. http://javascript.crockford.com/style2.html





||



===
==



true ?
'on'
: 'off'


++
--

>>
<<
>>>
Code Snippet
  1. <script type="text/javascript">//<![CDATA[
  2. var x = 11.1, y = -1;
  3. var a, b = 'B', c='', def='D';
  4. var s = ""
  5. +"<br /> // || setzt ggf. default-Wert:"
  6. +"<br /> (a || b || def) = " + (a || b || def)
  7. +"<br /> (def || a || b ) = " + (def || a || b )
  8. +"<br />"
  9. +"<br /> (1 === true) = " + (1 === true)
  10. +"<br /> (1 ==  true) = " + (1 ==  true)
  11. +"<br />"
  12. +"<br /> //'?:' Auswahl 1 aus 2 Werten:"
  13. +"<br /> (true ? 'on' : 'off') = " + (true ? 'on' : 'off')
  14. +"<br /> (c ? 'true' : 'false')="+ (c ? 'true' : 'false')
  15. +"<br />"
  16. +"<br />    x++    = " + x++
  17. +"<br />    (++x)  = " + (++x)
  18. +"<br />    x--    = " + x--
  19. +"<br />    (--x)  = " + (--x)
  20. +"<br />"
  21. +"<br /> x <<  1 = " + (x << 1)
  22. +"<br /> x >>  1 = " + (x >> 1)
  23. +"<br /> x >>> 3 = " + (x >>> 3)
  24. +"<br /> x >>> 4 = " + (x >>> 4)
  25. +"<br /> x >>> 5 = " + (x >>> 5)
  26. +"<br />"
  27. +"<br /> y <<  1 = " + (y << 1)
  28. +"<br /> y >>  1 = " + (y >> 1)
  29. +"<br /> y >>> 29 = " + (y >>> 29)
  30. +"<br /> y >>> 30 = " + (y >>> 30)
  31. +"<br /> y >>> 31 = " + (y >>> 31)
  32. +"<br /> y >>> 32 = " + (y >>> 32)
  33. +"<br /> hex y.toString(16) = " + y.toString(16)
  34. document.write(s);
  35. //]]>
  36. </script>
Anzeige:
ECMAScript (einführende Beisp) parseInt(), substring(), typeof(), undefined, null

Im einfachsten Fall wird ein Text-Editor und ein Browser benötigt. Für die ECMAScript -Programmierung sind HTML-Kenntnisse erforderlich. ECMAScript ist case-sensitive (unterscheidet Groß/Klein-Schreibung). Verbundanweisungen ({...}, blocks of statements) fassen mehrere Anweisungen zusammen.

Hier einige einführende Beispiele:

  ECMAScript-Code Ausgabe
Kommentare
Comments
Code Snippet
  1. <script type="text/javascript">//<![CDATA[
  2. // Kommentar bis Zeilenende
  3. /*
  4.   MultiLine -
  5.   Kommentar
  6. */
  7. </script>
Viele elementare Sprachkonstrukte sind "recht ähnlich" zur C++- und Java-Syntax
ECMAScript-
Anweisungen

parseInt()
substring()
typeof()
Code Snippet
  1. <script type="text/javascript">//<![CDATA[
  2.            // 012345678901234
  3. var aStr1  = "43_Dies ist der";
  4. var aStr2  = " erste Satz.";
  5. var aNum1  = parseInt(aStr1) - 42;
  6. var aSatz  = aNum1;
  7.     aSatz += aStr1.substring(<span class="blaui">2</span>, aStr1.length);
  8.     aSatz += aStr2;
  9. document.write(aSatz + "<br />");
  10. document.write("typeof(aNum1)=" + typeof(aNum1)+"<br />");
  11. document.write("typeof(aStr1)=" + typeof(aStr1));
  12. //]]>
  13. </script>
Anzeige:

undefined
null
typeof()
Code Snippet
  1. var a=1, b=new Array(2), c=null, d;
  2. function wrt(s,v) {
  3.   var str = "<br />";
  4. //if (v !== undefined) { ... }
  5.   str +="typeof("+s+")=";
  6.   str += typeof(v);
  7.   document.write(str);
  8. }
  9. wrt("a",a); wrt("b[1]",b[1]);
  10. wrt("c",c); wrt("d",d);
Anzeige:
Bookmarklet (auch: Favelet) javascript:.. in Kommandozeile?

Ein Bookmarklet ist ein kleines JavaScript-Makro, das als Bookmark gespeichert wird und dadurch die Funktionen eines Webbrowsers erweitert. Ein Bookmarklet entspricht einem Lesezeichen auf das Pseudoprotokoll javascript:, das ermöglicht, Code durch den Browser auszuführen.

Beispiel für Browser-Adresseingabe:
javascript:i=3;alert('erg='+4*i)

Kleine ECMAScript-Codestücke können in der Adresszeile des Browsers ausgeführt werden. Bookmarklets sind solche kleine Hilfsmittel, die ECMAScript benutzen und Fähigkeiten des Browsers erweitern. Bookmarklets sind klein, einfach, gratis, ungefährlich. Bookmarklets können in der Adresszeile des Browsers (bei aktivem ECMAScript) ausgeführt werden. Bookmarks (Favoriten, Lesezeichen) speichern Internet-Adresse. Bookmarklets können als Bookmark gespeichert werden ("Zu Favoriten hinzufügen...").

Beispiele: