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:

• Netscape node [ "on" + type] = f;
• Microsoft node.attachEvent ( "on" + Art, f);
• W3C node.addEventListener (Typ, f, false);

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 <script type="text/javascript">//<![CDATA[ // Kommentar bis Zeilenende /*   MultiLine -   Kommentar */ //]]></script>	Viele elementare Sprachkonstrukte sind "recht ähnlich" zur C++- und Java-Syntax
ECMAScript- Anweisungen parseInt() substring() typeof()	Code Snippet <script type="text/javascript">//<![CDATA[            // 012345678901234 var aStr1  = "43_Dies ist der"; var aStr2  = " erste Satz."; var aNum1  = parseInt(aStr1) - 42; var aSatz  = aNum1;     aSatz += aStr1.substring(<span class="blaui">2</span>, aStr1.length);     aSatz += aStr2; document.write(aSatz + "<br />"); document.write("typeof(aNum1)=" + typeof(aNum1)+"<br />"); document.write("typeof(aStr1)=" + typeof(aStr1)); //]]> </script>	Anzeige:
undefined null typeof()	Code Snippet var a=1, b=new Array(2), c=null, d; function wrt(s,v) {   var str = "<br />"; //if (v !== undefined) { ... }   str +="typeof("+s+")=";   str += typeof(v);   document.write(str); } wrt("a",a); wrt("b[1]",b[1]); 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 <script type="text/javascript">//<![CDATA[ var x = 11.1, y = -1; var a, b = 'B', c='', def='D'; var s = "" +"<br /> // || setzt ggf. default-Wert:" +"<br /> (a || b || def) = " + (a || b || def) +"<br /> (def || a || b ) = " + (def || a || b ) +"<br />" +"<br /> (1 === true) = " + (1 === true) +"<br /> (1 ==  true) = " + (1 ==  true) +"<br />" +"<br /> //'?:' Auswahl 1 aus 2 Werten:" +"<br /> (true ? 'on' : 'off') = " + (true ? 'on' : 'off') +"<br /> (c ? 'true' : 'false')="+ (c ? 'true' : 'false') +"<br />" +"<br />    x++    = " + x++ +"<br />    (++x)  = " + (++x) +"<br />    x--    = " + x-- +"<br />    (--x)  = " + (--x) +"<br />" +"<br /> x <<  1 = " + (x << 1) +"<br /> x >>  1 = " + (x >> 1) +"<br /> x >>> 3 = " + (x >>> 3) +"<br /> x >>> 4 = " + (x >>> 4) +"<br /> x >>> 5 = " + (x >>> 5) +"<br />" +"<br /> y <<  1 = " + (y << 1) +"<br /> y >>  1 = " + (y >> 1) +"<br /> y >>> 29 = " + (y >>> 29) +"<br /> y >>> 30 = " + (y >>> 30) +"<br /> y >>> 31 = " + (y >>> 31) +"<br /> y >>> 32 = " + (y >>> 32) +"<br /> hex y.toString(16) = " + y.toString(16) document.write(s); //]]> </script>

Anzeige: