ECMAScript (Einführende Beispiele) Crockford: JavaScript is the virtual machine of the Internet.

Einführende Seite en.wikipedia: ECMAScript , Link zur Norm ECMAScript-262 (pdf 2.5MB) .

Wie kann ECMAScript konkret genutzt werden?

Einbettung von ECMAScript in XHTML ECMAScript-Einbettung in eine Page

ECMAScript-Code kann in eine *.js - Datei ausgelagert werden. In der *.js - Datei wird der ausgelagerte Code ohne umschließende <script> ... </script>-Tags geschrieben. 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. Ausgelagerter ECMAScript-Code kann in die aktuelle Seite "includiert" (geladen) werden, etwa:

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 seiteninterner ECMAScript-Code
  5. </script>


Deaktiviertes Javascript Ist JavaScript auf "off"?

Die default-Installation der "gängigen, üblichen" Browser schaltet JavaScript auf "on". Dennoch arbeiten z.B. blinde Menschen, die einen Screen-Reader verwenden, ohne Seitendynamik und schalten JavaScript auf "off".

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 : XML und damit auch XHTML verwendet für die Einbettung von CDATA (Character Data, Zeichendaten) die CDATA-Klammerung <![CDATA[ ... ]]>. Ein XML-Parser und XHTML-Validierer führen in CDATA-Sections keine Interpretation der markup-Zeichen durch.

Bei HTML5 kann <script ...</script> auch ohne eine innerer <![CDATA[ ... ]]>-Klammer verwendet werden.

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>


Unterschiede bei Browsern Unterschiede: Zugriffe, existieren die Elemente?

Ein Browser ist ein komplexes Software-System. Zu jedem Browser gehört eine Timeline, ein Entwicklerteam, eine Timeline, ein Entwicklungsstand, ein Erfüllungsgrad von internen/externen Normen und Fehler.

Browser sind verschieden. Die Bezeichnungen von internen Objekten kann unterschiedlich sein.

Beispiele für Ereignisse sind:

Hier sind z.B. einige ausgewählte interne Browserobjekte mit deren Werten ).



Zugriff auf DOM Existieren die Elemente?

JavaScript-Code wird oft im Head definiert und im Body verwendet. Ein Zugriff von JavaScript-Code auf Elemente des body kann erst erfolgen, wenn die body-Elemente geladen sind. Hierzu dient window.onload = function() { /* body-Elemente existieren */ }



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:



Einführende Beispiele 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:


Programmier-Reinfälle Typische Programmierfehler ...

Siehe z.B. en.wikipedia: JavaScript_syntax , crockford: Elements of JavaScript Style





||



===
==



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: