============================   Name : _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
ECMAScript-Testklausur 
============================ Vorname: _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

                       Matikelnummer: _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

                     THM-Userkennung: _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 

Masterkurs CS5313                       Auf. Nr | 1 | 2 | 3 | 4 | 5 |
                                     -----------|---|---|---|---|---|
                                      Soll Pkte | 3 | 3 | 3 | 3 | 3 |
                                     -----------|---|---|---|---|---|
                                       Ist Pkte |   |   |   |   |   |

1.Aufgabe

a) Nenen Sie bitte 5 typische Anwendungsgebiete von ECMAScript:

   _______________________________________________________________

   _______________________________________________________________



b) Welche Organisationen haben ECMAScript definiert?

   _______________________________________________________________


c) Nennen sie bitte 3 properietäre Sprachen, die in gewissem 
   Umfang ECMAScript entsprechen:

   _______________________________________________________________


d) Was meinen die Begriffe Web-/Desktop-Widget, Widgets-Toolbar,
   Gadget?
   _______________________________________________________________

   _______________________________________________________________


e) Erklären sie bitte kurz die folgenden Abkürzungen:

   XSS:   ______________________________________________________

   DOM:   ______________________________________________________

   RIA:   ______________________________________________________

   ARIA:  ______________________________________________________

   JSON:  ______________________________________________________

   WSH:   ______________________________________________________


f) ECMAScript 5 kennt den  "strict mode".
   Geben sie bitte ein kleines Beispiel an, einschliesslich 
   dem Expression-Statement für die "Use Strict Directive".

   ____________________________________________________________

   ____________________________________________________________


g) Geben sie bitte 5 wesentliche Unterschiede zwischen den
   Grafik-Möglichkeiten von HTML5-canvas (2D) und SVG an.

   _______________________________________________________________

   _______________________________________________________________

   _______________________________________________________________

h) W3C DOM Events nutzen Event-Delegation.
   Nennen sie Ereignisse, die eine Capturing-Phase haben, aber  
   keine Bubbling-Phase haben.

   _______________________________________________________________

   _______________________________________________________________

i) Geben sie bitte ein einfaches Code-Beispiel für eine mögliche 
   Verwendung der ECMAScript-eval()-Funktion an:

    ___________________________________________________________


    ___________________________________________________________

2.Aufgabe

Es ist eine kleine Bibliothek mystack zu schreiben, die einen privaten Array arr = [ ] verwendet. Die Bibliotheksfunktionen set(), reset(), push(), pop(), each(), add(), debug() sind zu ergänzen. Die Funktion debug() soll den privaten Array anzeigen.

Für die Aufrufe der Bibliotheksfunktionen sollen Funktionsverkettungen möglich sein, wie z.B.

Das Aufruf-Beispiel 1 
  mystack.debug().push('a').push('b').pop().debug();   zeige [ ] und [a] an.

Das Aufruf-Beispiel 2 
  mystack.reset().push(3).push(4).each(function(el){return el*el;}).debug(); 
  zeige [9, 16] an.

Das Aufruf-Beispiel 3 
  mystack.reset().set(0,0).add(5).add(6).debug();   zeige [11] an.

a) Damit die Funktionsverkettungen möglich werden, soll an allen 

 
   Stellen /* 1 */  der Code  ___________________________ eingesetzt werden.

b) Die Funktion reset() bei /* 2 */ soll den Array arr "leer initialisieren".

c) Bei /* 3 */ soll der Variablenwert v auf den privaten Array arr 
   "gepushed" werden.

d) Bei /* 4 */ soll auf jedes Element von arr eine Funktion fn angewendet 
   werden. Der aktuelle fn-Rückgabewert überschreibt das aktuelle arr-Element.

e) Bei der Funktion set(val, idx), bei /* 5 */ 
   soll idx mit den Index-Grenzen überprüft werden.

f) Fehlt bei /* 6 */ bei einem Aufruf von add(val, idx) der 
   idx-Paramter, wie z.B. bei add(4711), so soll idx = 0 verwendet werden.

g) Bei /* 7 */ bei der Funktion debug() soll jeweils zwischen alle 
   arr-Elemente ein String ', ' einfügt werden und aus arr ein 
   "Gesamt-String" erstellt werden, der in einer alert-Box angezeigt wird.
---code-anfang---

      var mystack = (function() {

       var i, arr = [ ]; 

       function reset() { arr = _______;/* 2 */  /* 1 */ }

       function push(v) { arr._________;/* 3 */  /* 1 */ }

       function pop()   { arr.pop();             /* 1 */ }

       function each(fn) {              /* 4 */
         for( i = 0; i < arr.length; i += 1) {

           ______________________________________________ 
         }                                       /* 1 */
       }

       function set(val, idx) {         /* 5 */

         ________________________________________________ 
         arr[idx] = val;                         /* 1 */
       }

       function add(val, idx) {         /* 6 */

           ______________________________________________
         arr[idx] += val;                        /* 1 */
       }

       function debug() {               /* 7 */

         alert('['+_______________________+']'); /* 1 */ 
       }

       return { set   : set,   // val in idx-Element
                reset : reset, // privaten Array leeren
                push  : push,
                pop   : pop,
                each  : each,  // auf jedem Element fn ausführen
                add   : add,   // Zahlen/Strings auf idx 
                debug : debug  // anzeigen des privaten Array
        };
      }());
---code-ende---

3.Aufgabe

a) Der folgende Array enthält 7 Elemente.

var 
arr = ['HALLO',                 '\u0048\u0041\u004c\u004c\u004f', 
       '\x48\x41\x4c\x4c\x4f',  '&#72;&#65;&#76;&#76;&#79;',
       '\110\101\114\114\117',  '&#x48;&#x41;&#x4c;&#x4c;&#x4f;',
       'H&nbsp;A&#160;L&#32;L O'
     ];

a1) Welche Anzeige wird in die Seite erzeugt, wenn document.write(arr.join('<br />')); im Dokumenten-Body steht? Bitte die Anzeige sorgfältig schreiben:

 








a2) Welche Anzeige wird durch window.alert(arr.join('\n')); in der alert-Box angezeigt? Bitte sorgfältig schreiben:






b) Welche Anzeige ergibt sich?

---code-anfang---
          var a = [ ];
          a.push(typeof ''                        === 'string'); 
          a.push(typeof 'ein String'              === 'string');
          a.push(typeof "eine Zeichenkette"       === 'string');
          a.push(typeof 'eine "weiterer" String'  === 'string');
          a.push(typeof "'noch' eine Zeichenkette"=== 'string');
          a.push(typeof "'noch' eine \"Zeichen\"-Kette"=== 'string');
          window.alert(a.join('\n'));
---code-ende---

In der alert-Box wird angezeigt:

 










c) Eine Applikation, die UTF-8-Strings mit Hilfe von AJAX und PHP übertragen soll, weist fehlerhafte Übertragung bei den Umlauten (äöüÄÖÜ ß) auf. Geben sie als mögliche Fehlerursachen bitte 5 Stichworte an:

    ___________________________________________________________


    ___________________________________________________________





d) Ordnen sie bitte die Variablennamen singleTag, whiteChar, trimStringLeft, notwhiteChar, trimStringRight den folgenden regulären Ausdrücken zu.

  var _________________________ = /\s/;

  var _________________________ = /\S/;     // Grossbuchstabe S

  var _________________________ = /^\s+/;

  var _________________________ = /\s+$/;

  var _________________________ = /^<(\w+)\s*\/?>(?:<\/\1>)?$/; 







e) Welche Rückgabewerte haben die Funktionsaufrufe test1(); und test2(); ?

  function test1 ( ) { } 
  function test2 ( ) { return; }

  test1( )  gibt __________________ zurück

  test2( )  gibt __________________ zurück

f) Normalerweise versucht ein wiederholtes XMLHttpRequest (zur gleichen URL) den erbetenen Content aus dem Browser-Cache zu verwenden. Wie kann bei dem folgenden Code-Fragment erreicht werden, daß der Cache umgangen wird?

var req = new XMLHttpRequest();  
req.open("GET",url+=((/\?/).test(url)?"&":"?")+ ______________________, false);  
req.send(null); 



g1) Mit Hilfe von "prototype" soll die Funktion summe als "quasi eingebaute Funktion" geschrieben werden, so daß z.B. für

  var arr = [ '3',  4 ], 
  erg = arr.summe(); // das Ergebnis erg = 7 ist.

g2) Mit Hilfe von "prototype" soll die "quasi eingebaute Funktion" each geschrieben werden, so daß z.B. für

  var arr = [ '3',  4 ], 
  arr.each( function (x) { return x*x; } ),
  erg = arr.summe(); // das Ergebnis erg = 25 ist.


---code-anfang---

          ______________.prototype.summe = function() { 

            var i, sum = 0, arr = _______________;
  
            for (i = 0; i < ___________.length; i += 1) {

              ___________________________________________
            } return sum;
          }
          //- - - - - - - - Bitte ergänzen - - - - - - - - - - - - - - - -

          ______________.prototype.each = function (fn) { 
            var i, sum = 0, arr = _______________;

            for (i = 0; i < ___________.length; i += 1) {

              ___________________________________________
            }
          } 
---code-ende---



h1) Mit Hilfe von "prototype" soll die "quasi eingebaute Funktion" summe geschrieben werden, so daß z.B. für

  var obj = { a:3, b:"4" }, 
  erg = obj.summe();        // das Ergenis erg = 7 ist.

h2) Mit Hilfe von "prototype" soll die "quasi eingebaute Funktion" each geschrieben werden, so daß z.B. für

  var obj = { a:3, b:"4" },
  obj.each( function (x) { return x*x; } ), 
  erg = obj.summe();       // das Ergebnis erg = 25 ist.   

---code-anfang---

          ________________.prototype.summe = function() {

            var ____________________________

            for (___________________________) {

              if ( obj._______________________(key)) { 
                sum += +obj[key]; 
              }
            } return sum;
          }
          //- - - - - - - - Bitte ergänzen - - - - - - - - - 

          ________________.prototype.each = function(fn) {

            var ____________________________

            for (___________________________) {

              if ( obj._______________________(key)) { 

                 ___________________________________
              }
            }
          } 
---code-ende---

4.Aufgabe

Der Server baue dynamisch, infolge eine HTTP-Request eine HTML-Seite zusammen, die aus zahlreichen, gleich strukturierten form-Tags besteht. Jedes form-Tag enthalte z.B. eine Adresse. Es ist eine Bibliothek myform zu schreiben. Bitte sorgsam ergänzen.

  myform.show_form(i) soll das i-te Formaular sichtbar machen (anzeigen),
  myform.next_form()  soll das nächste und
  myform.prev_form()  das vorhergehende Formular anzeigen.

Hierzu sollen die folgenden a-Tags verwendet werden:

  <a href='javascript:myform.show_form(0)'> show_form(0) </a>
  <a href='javascript:myform.next_form()'> next_form </a>
  <a href='javascript:myform.prev_form()'> prev_form </a>

Für den HTML-Header diese Seite soll eine ECMAScript-Bibliothek myform geschrieben werden. Es soll lediglich ein einziges form-Tag (das aktuelle form-Tag) sichtbar sein. Die Sichtbarkeit soll mit Hilfe von .next_form() und .prev_form() "weitergeschalten" werden können.

          (a) Ergänzen sie die Strict-Mode-Directive.
          (b) Ergänzen sie die "globale" Variable IDX 
              und das window-Objekt. IDX ist der aktuelle 
	          form-Index des einen aktuell-sichtbaren Formulares.
          (c) Schreiben sie eine (interne) Funktion get_forms(), 
              die in einem Array alle form-Tag-Referenzen 
	          der HTML-Seite zurück gibt.
          (d) Schreiben sie eine Funktion hide_forms(), die 
              alle form-Tags der Seite (mit Hilfe von 
	          el.style.display='...') unsichtbar macht.
          (e) Schreiben sie eine Funktion show_form(idx), 
              die zunächst alle  form-Tag unsichtbar macht 
	          und dann das idx-te-form-Tag sichtbar stellt.
          (f) Schreiben sie eine Funktion next_form(), die  
	          das nächste Formular (zyklisch) sichtbar stellt.
          (g) Schreiben sie eine Funktion prev_form(), die
              das vorherige Formular (zyklisch) sichtbar stellt.
          (h) Nach dem Laden de Seite soll das letzte Formular
              sichtbar sein.





          (i) Für eine MDI-Applikation soll die myform-Bibliothek
              in die frameset-Seite. Hierzu muß für get_forms()
	          und show_form(), next_form(), prev_form ein 
	          zusätzlicher Parameter doc eingeführt werden. 
	          Dann erfolgt, anstelle von z.B. myform.next_form(), 
	          der Aufruf in einer Frame-Seite mit

	          _______________ . myform.next_form(___________) 

---code-anfang---

var myform = (function(______) {  // zu (b)
  __________________________      // zu (a)

  var doc = ________________,     // zu (b)

  IDX = ______;  
  
  function get_forms() {          // zu (c)

    return doc.__________________________________('form');
  }

  function hide_forms() {         // zu (d)
    var i, fa = get_forms();
    for(i = 0; i < fa.length; i += 1) { 

      ___________________________________________________
    } return fa;
  }

  function show_form(idx) {       // zu (e)
    var fa = hide_forms(); 
    _____________________________________________________

    _____________________________________________________
  }

  function next_form() {          // zu (f)
    var fa = get_forms();

    _____________________________________________________
    show_form(IDX);
  }

  function prev_form() {          // zu (g)
    var fa = get_forms();
    _____________________________________________________
  show_form(IDX);
  }
  return { show_form : show_form,
           next_form : next_form,
           prev_form : prev_form
  };
} (__________________) );         // zu (b)


window.____________ = function () { // zu (h)

  _______________________________________________________
}
---code-ende---






5.Aufgabe

Es geht um zeitgesteuerte Funktionsausführungen. Hierzu können die Funktionen 
setTimeout und clearTimeout verwendet werden. Die Funktion setTimeout(func, ms) 
führt func aus und startet func nach der Zeit ms neu. 
clearTimeout() löscht den Timer. Hinweis

   var timeout_handle = window.setTimeout(func, ms);
                        window.clearTimeout(timeout_handle);


a) Gegeben sei das HTML-Quellcode-Fragment

           <div id="show_time"></div>
           <a href="#" onclick="my_timer.run(func)" >run timer</a>
           <a href="javascript:my_timer.stop()" >stop timer</a>

    my_timer.run(func) führe zeitgesteuert die Funktion func aus.
    Wie ist beim Aufruf von my_timer.run(func) das Argument func zu ersetzen, 
    damit die Zeit 
                     (new Date()).getTime() 

    im div-Tag erscheint? 
    Ich würde in my_timer.run(func) die namenlose Funktion func einsetzen:

    ___________________________________________________________________________


b) Die Funktionen my_timer.run(func) und my_timer.stop() sollen funktionieren.
    Bitte ergänzen.

---code-anfang---
   var my_timer = (function (win) { 'use strict';
       var timeout_handle = null, fn_intern = null, doc = win.document; 

       return {
         run: function ( fn_von_aufruf ) {

           if (!fn_intern) { ___________________________________________ } 

           _____________________________________________________________

           timeout_handle = win.setTimeout(__________________, 500);
        },

        stop: function () {
          if(timeout_handle) { win.clearTimeout(______________________); }
        }
      };
   } (window));
---code-ende---
c) Hier im Teil c soll die Position eines HTML-Objektes mit Hilfe von 
   setTimeout und clearTimeout zeitgetaktet gesteuert werden. Hierzu 
   diene (die zu ergänzende Funktion) move. Als Argument wird move 
   nun ein Objekt, wie z.B. o1 übergeben. 

   o1.mode  beschreibt die Art der Zeitsteuerung. 
   o1.id    identifiziert das zeitgesteuerte HTML-Element. 
   o1.ms    ist die Zeitrate in Millisekunden.

Beispiel: 

   Ein div-Element mit id = 'DIV1' soll alle 300 Millisekunden
   einen anderen Style (Positionen, Hintergrundbild, usw.) 
   erhalten. Das Objekt o1 hat einen Array o1.styles[], der 
   die gewünschten Styles enthält. Die Array-Elemente von
   styles werden zyklisch wiederholt. o1 könnte so ausschauen:
    
           var o1 = {id:'DIV1', mode:'styles', ms:300,
                     styles:['margin-left:10px; margin-top:10px;',
                             'margin-left:99px; margin-top:10px;',
                             'margin-left:99px; margin-top:99px;',
                             'margin-left:10px; margin-top:99px;'
                            ]
           };


   Das zyklisch neu positionierende Darstellungsmuster beginnt nach dem 
   Laden der Seite infolge von window.onload = function() { move(o1); };

  Bitte ergänzen sie die Funktion move. Durch den Aufruf move(o1) soll
  alle 300 ms zyklisch das nächste Style-Array-Element ausgeführt werden.

---code-anfang---
        var move = function (o) { // Parameter o ist ein Objekt

           var i, step, el = document.getElementById(__________);

           switch(o.mode) {

             case 'styles': 
                 el._____________________________('style', o.styles[_____]);
                 i = 0; 
                 step = function () {
                    i = (i + 1) _____________________; // = zyklischer Index

                    el.______________________('style', __________________);

                    setTimeout(_____________, o.ms);

                 }; ________________________________
            break;

            default: alert('ERR');break;
          } //ende switch
        };
---code-ende---

d) Nun soll zu move ein weiterer case 'lissajou' hinzu gefügt werden.  
    'lissajou' soll eine mathematische Funktion verwenden, die der Anwender 
    in das Argument-Objekt o2 schreibt und die einen berechnten-Style-String
    zurück gibt.  

    Aus o1.mode='styles'   wird nun  o2.mode='lissajou'.
    Aus o1.styles = [...]  wird nun  o2.fn = function () 
                                     { .. return berechnter-Style-String; }; 
 
   Bitte ergänzen sie die obige Funktion move mit case 'lissajou'. 

---code-anfang---

        case 'lissajou':
            step = function () {
               el.setAttribute('style', o._____________ );

               setTimeout(__________, o._____);

            }; setTimeout(step, o._____);
        break;
---code-ende---

e) Das HTML-Objekt soll sich zeitgesteuert auf einem Kreis bewegen.
    Die Funktion fn liefert einen "berechneten Style-String" zurück.
    Ist (x0,y0) der Kreismittelpunkt und r der Kreisradius,
    so berechnet sich mit dem Zentriwinkel w0, der als Laufvariable
    verwendet wird, der Kreispunkt (in mathematischer Schreibweis)
    zu 
          x = x0 + r*cos(w0)
          y = y0 + r*sin(w0)

    dw ist der 'Zuwachs' von w0 bei einem "time-step".
    Bitte o2 ergänzen, insbesondere soll auch nnn richtig gesetzt werden.

---code-anfang---
          var o2 = {id:'DIV2', mode:'lissajou', ms:30, 
                    w0:0,  dw:Math.PI/36,  x0:200,  y0:200,  r:100, 

               fn: function () { 
                 var x, y, nnn = ________________,
                 s = 'margin-left:xxxpx;margin-top:yyypx;';
                 nnn.w0 += nnn.dw;

                 x = nnn.x0 + nnn.r * __________.cos(nnn.w0);

                 y = nnn.y0 + nnn.r * __________.sin(nnn.w0);

                 return s.replace(_________, x).replace(____________, y);
               }
          };
---code-ende---