ECMAScript-Übungsbeispiele (Klausurvorbereitung) Gibt es Beispiele? ...

Einstein (1934): "[Es] sprießen aus der menschlichen Gesellschaft nur dann wertvolle Leistungen hervor, wenn sie genügend gelockert ist, um dem Einzelnen freie Gestaltung seiner Fähigkeiten zu ermöglichen."

Ü: a-Tags modifizieren Was ist ein "Default-Ereignis"?

Nachdem ECMAScript die folgenden a-Tags modifiziert hat, ändern sich die Wirkung der a-Tags. Was wird bewirkt?

<a id="id_ziel_1"></a>
<a id="id_ziel_2"></a>
<a id="id_ziel_3"></a>

<a id="id_src_1" onclick="alert(this.href);return true;"> test1 </a>
<a id="id_src_2" onclick="alert(this.href.replace(/^.*?#/,''));return false;"> test2 </a>
<a id="id_src_3" onclick="alert(this.hash.substring(1));return false;"> test3 </a>

<script>
var url = '' + window.location;
document.getElementById("id_src_1").href = url + "#id_ziel_1";
document.getElementById("id_src_2").href = url + "#id_ziel_2";
document.getElementById("id_src_3").href = url + "#id_ziel_3";
</script>
a) test1-Klick zeigt infolge der alert-Anzeige 

  __________________________________________________________ an und springt 

  in der gleichen Seite zur Zielposition __________________________________

b) test2-Klick zeigt infolge der alert-Anzeige 

  __________________________________________________________ an und springt 

  in der gleichen Seite zur Zielposition __________________________________

c) test3-Klick zeigt infolge der alert-Anzeige 

  __________________________________________________________ an und springt 

  in der gleichen Seite zur Zielposition __________________________________
Ü: Textmuster in Editor einfügen ... auswählen und einfügen

Bei einem modernen Browser können in einer textarea ("Editor") Textbereiche per drag und drop verschoben werden.

Anstelle der Texteingabe per Hand kann eine vorgefertigte Auswahl von Unicode-Textmustern sinnvoll sein. Eine select-Box soll das Auswählen von vorgegebenen Textmustern emöglichen. Der ausgewählte Text soll "oben im Editor" eingefügt werden. Textmustern dürfen auch mehrzeiliges UTF-8 sein.

Für das Auswählen eines Textmusterns soll ein select-Element ("Seleckt-Box") mit mehreren option's verwendet werden. Ein Klick auf das option-Tag soll

  1. den ausgewählten (einzeiligen) Text ...
  2. (oder) den ausgewählten (mehrzeiligen UTF-8-) Text (mit '\n') ...
  3. (oder) den ausgewählten (HTML-Source-) Text (erkennbar an '%%...')...

... in die nachfolgende textarea kopieren.

<form method="post" action="">

<select size="1" onchange="add_select_value_to(this, 'textarea');">
  <option value="alert('Bitte andere Wahl')"> Textmuster-Auswahl </option> 
  <option value="ein erster Einfügetext."> ein erster Einfügetext </option>
  <option value="`·.·T·O·P· .·´¯`··*V*o*r*t*r*a*g*··´¯`·._.·´¯`·. ">TOP VORTRAG</option>
  <option value="%%3C%21doctype%20html%3E%0A%3Chtml%20lang"> 5. HTML5-Source</option>
</select><br />

<textarea rows="5" cols="100" style="width:99%"></textarea>
</form>

Nachfolgend ist ein lückenhafte Funktion add_select_value_to(this, 'textarea'), die es zu ergänzen gilt:

<script>
 function add_select_value_to (that, dst_tag_name) 
 {
   var el = that, val = el.options[_______________].value;

   that.selectedIndex = _____; //... mehrmalige Auswahl zulassen

   if ('%%' === val._______(0, 2)) { val = ___________(val.slice(1)); }

   while ((el = el._____________) && 

          (dst_tag_name !== el._______________ . ______________)
   );

   if (el) { // Einfuegung am Anfang der textarea

     el.value = _______________________________________; 

   } else { // Fehlermeldung

     __________________________________________________
   }
 }
</script>

Bitte testen:

Ü: textarea (filtern von Eingabetasten) Wie kann return-Taste ignoriert werden?

Als Beispiel soll bei einer textarea die Eingabe der return-Taste ignoriert werden. Die return-Taste bewirkt dann keinen Zeilenvorschub. Als Demo-Form kann dienen:

<form method="post" action="">
  <textarea rows="5" cols="100" onkeypress="alert('onkeypress');">
    Textarea soll return-Taste ignorieren
  </textarea>
</form>

Wie können bei dem textarea-Element (möglichst einfach) bestimmte Tasten gesperrt werden?
Wie kann die Lösung leicht (experimentell) herausgefunden werden?
Wie ruft textarea die onkeypress-Funktion auf?

Dies soll in der folgenden Reihenfolge herausgefunden werden:

  1. Bitte testen sie experimentell bei einer textarea: onkeypress="alert(this.onkeypress);"
  2. Was bewirken bei onkeypress-Funktion die Rückgabewerte true/false?
  3. Falls var e=event||window.event das Event-Objekt ist, so kann mit alert(e.keyCode||e.charCode) der Tastencode angezeigt werden
  4. Warum werden e.keyCode oder e.charCode verwendet?
  5. Die onkeypress-Funktion soll true/false zurück geben, wenn (e.keyCode || e.charCode) verschieden vom Code der Reurn-Taste ist.

Teste textarea mit blockierte return-Taste:

Ü: Beispiel ('static'-Konzept) ECMAScript kennt kein 'static' ...

Zahlreiche Programmiersprachen verwenden das 'static'-Konzept (Datensegment, feste Speicherreservierung beim Programmstart). Eine C-Funktion könnte z.B. so aussehen:

uint32_t myfunc(void) {
  static uint32_t x = 123456789;
  return (x+1);
}

Schreiben und testen sie ein ECMAScript-Äquivalent (Closure).

Ü: Beispiel (Zufallzahlen) Random

ECMAScript verwendet intern stets 64 Bit Fließkommazahlen (double, IEEE 754). ECMAScript hat die eigebaute Pseudo-Zufallsfunktion Math.random() (kein Argument). Ein Aufruf von Math.random() liefert eine positive Zahl (0 <= Zahl < 1) zurück. Die Zahlen sind imlementationsabhängig (Browser) und sollen näherungsweise gleichverteilt sein. Es gibt keine "Seeds" für eine gewünschte Folge von Zufallszahlen.

Es sind folgende Funktionen zu schreiben und zu testen:

  1. Schreiben sie eine Funktion get_random(xmin, xmax), die eine "float-zahl x" zurück liefert, für die gilt xmin <= x < xmax
  2. Schreiben sie eine Funktion get_random_int(imin, imax), die eine "int-zahl x" zurück liefert, für die gilt imin <= i < imax i = Math.foor(x) wandelt x in eine ganze Zahl (abrunden nach unter).
Ü: Beispiel (Yi-Silbenzeichen) Darstellung, Random, Verschlüsselung
  1. Die Yi-Silbenzeichen des Unicodes sind:
    ꀀꀁꀂꀃꀄꀅꀆꀇꀈꀉꀊꀋꀌꀍꀎꀏꀐꀑꀒꀓꀔꀕꀖꀗꀘꀙꀚꀛꀜꀝꀞꀟꀠꀡꀢꀣꀤꀥꀦꀧꀨꀩꀪꀫꀬꀭꀮ
    ꀯꀰꀱꀲꀳꀴꀵꀶꀷꀸꀹꀺꀻꀼꀽꀾꀿꁀꁁꁂꁃꁄꁅꁆꁇꁈꁉꁊꁋꁌꁍꁎꁏꁐꁑꁒꁓꁔꁕꁖꁗꁘꁙꁚꁛꁜꁝ
    ꁞꁟꁠꁡꁢꁣꁤꁥꁦꁧꁨꁩꁪꁫꁬꁭꁮꁯꁰꁱꁲꁳꁴꁵꁶꁷꁸꁹꁺꁻꁼꁽꁾꁿꂀꂁꂂꂃꂄꂅꂆꂇꂈꂉꂊꂋꂌ
    ꂍꂎꂏꂐꂑꂒꂓꂔꂕꂖꂗꂘꂙꂚꂛꂜꂝꂞꂟꂠꂡꂢꂣꂤꂥꂦꂧꂨꂩꂪꂫꂬꂭꂮꂯꂰꂱꂲꂳꂴꂵꂶꂷꂸꂹꂺꂻ
    
  2. Schreiben sie eine Funktion, die diese Zeichen darstellt.
  3. Schreiben und testen sie eine weitere Funktion, die 600 zufällige Yi-Silbenzeichen auswählt und als Zeichen-Block mit 10 Zeilen und 60 Zeichen je Zeile darstellt.
  4. Die Yi-Silbenzeichen können für eine "Geheimschrift" verwendet werden. Dies könnte dann z.B. so aussehen:
    ꋀꁴꌦꄬꃩꃌꉐꉫꎀꎈꋨꊠꉙꂀꎸꇐꂛꎰꈝꊐꏿꁾꂀꄐꊑꄠꀞꁆꈀꎀꍤꎠꉶꅰꀡꊰꁀꁌꂍꈀꈣꊩꋀꑤꌐꊇꌁꅐꆣꐸꌐꁷꀾꋐꆗꌃꄠ꒎ꍒꀠ
    ꂞꐑꁀꂆꄰꂕꎺꅠꃊꄰꍥꋚꃀꑄꌀꌰꀊꅐꊳꎯꃀꀴꃈꋠꅲꆻꑐꊳꎳꎀꈨꑐꉃꐀꁐꀉꎰꄽꅰꌁꋬꌠꂎꃳꐰꐉꄠꎮꂐꈯꃱꐠꁞꑐꎣꄠꀆꎁꂀꌸ
    ꁰꋀꄤꊉꐰꎵꂚꀐꄗꄠꎎꐀꑀꄼꁰꍑꉢꈐꍷꃒꌰꏭꋐꍻꎇꄠꄎꄠꎞꏀꁴꅰꏁꁼꑐꌃꁒꏰꆹꋐꉃꈽꂠꐦꌚꀐꃻꉠꋶꐐꋇꋐꃋꈷꋐꋫꍝꅐꆓꆠ
    ꐶꈓꃠꍒꇷꇠꑂꑉꌰꎅꄀꋰꅘꇐꋛꉻꀐꑗꏿꆰꋹꈃꉠꍂꑀꇈꁠꁚꇽꊀꄤꎫꃐꎫꋴꋰꆹꃠꏂꄊꒀꐘꌞꋰꎻꇺꌰꈕꅙꏰꅉꌁꁰꌁꂰꌭꈪꑰꆱꄀ
    ꏐꀰꋥꂐꉟꂀꍀꇀꌤꀠꀮꐦꉐꃧꐜꆠꄆꏰꂹꄄꊰꀻꃻꏠꃒꈠꉞꂀꃖꉄꐠꀾꇍꀠꅮꌰꁅꈘꍀꐼꄽꊀꎈꃹꅐꐃꉉꁠꆪꑐꉓꁏꉠꐊꎠꋐꑛꅾꅠꁪ
    ꇏꄰꂵꀐꆇꉝꋠꆒꀏꋐꁛꃠꆂꇶꉐꋛꅚꉠꉺꏱꇰꅡꋾꌐꑷꆠꂦꐹꉀꃬꍠꍚꎠꀦꍲꂐꀏꀃꐠꍐꃮꂰꇹꀞꌠꐎꍵꒀꁼꂶꎰꉭꑣꆀꑨꎼꂀꐈꑓꎠ
    ꅦꄭꊐꄯꊗꅰꄹꏰꌷꁒꍀꆌꎌꊠꎶꄐꂗꉠꈊꇐꄻꊅꋠꇒꃰꉥꉣꉐꉳꄰꐅꈰꎕꍐꅣꁃꀰꒅꑱꀠꏮꐢꃐꃣꎰꐍꇀꅴꃐꃋꈠꄞꊍꋠꇢꃰꄉꎠꍶꌛ
    ꈰꀥꈽꐠꂎꄤꋀꄺꒀꍨꄭꏠꌒꀃꆐꌃꄅꏐꄛꀀꊰꀐꊇꎌꀠꋎꈮꍀꀜꁞꐀꇀꁂꉀꊜꍠꍚꊀꆘꊀꏈꈠꊞꆭꍠꍪꎠꐖꃸꇠꐒꆮꐰꄥꑹꊠꄖꐃꆠꉆ
    ꅰꄡꃀꆔꂌꅐꂳꀎꄰꆕꉠꅚꌀꎬꁀꌌꌰꊅꂾꑀꂪꐀꑠꑊꂊꅰꊩꎻꇀꉄꎮꋠꆢꃐꆛꅸꁀꂌꅊꊐꃯꅾꉀꒌꂷꃰꈹꃰꋩꐐꏧꅀꉜꀐꍿꂮꀐꍷꐩꁀ
    ꌌꈠꁮꁠꋚꈡꁀꇜꀠꄀꃐꍟꃀꅔꁀꐼꋖꁀꉜꉸꈀꍐꂳꆰꎍꐃꍠꁺꌨꎐꑿꌇꃠꃲꐍꍸꃌꌰꐅꂈꅀꂼꄕꄘꏻꏀꍄꇀꇔꀀꂰꏸꄠꋞꋖꊀꂈꋒꉰꊁ
    
  5. Beschreiben sie Möglichkeiten für Verschlüsselungen, die diese Yi-Silbenzeichen verwenden.
Ü: Objekt in Objekt einmischen ... flache Objekte

Um mehrere Objekte "zusammen zu mischen" müssen elementweise Objekt-Objekt-Ersetzungen/Erweiterungen durchgeführt werden. Zum Ausgabgsobjekt { } werden die weiteren Objekte hinzu gemischt, wobei hier lediglich eine "flache Objekt-Komponenten-Struktur" betrachtet wird.

a) Die Funktion extend() kann mehrere Objekte als Parameter haben. Alle Objekte sollen in das 0-te Objekt eingemischt werden.

b) Die Funktion show_obj(o) soll das Objekt o anzeigen. show_obj({a0:0,a1:1,a2:2}) soll {a0:0, a1:1, a2:2} anzeigen.

Bitte ergänzen und testen. Zum Testen kann z.B. verwendet werden:

<a onclick="var obj1={a0:0,a1:1,a2:2};show_obj(obj1);return false;"> var obj1={a0:0,a1:1,a2:2}; </a> 
<a onclick="var obj2={a3:'33',a2:'22'};show_obj(obj2);return false;"> var obj2={a3:'33',a2:'22'}; </a> 
<a onclick="var o=extend({},{a0:0,a1:1,a2:2},{a3:'33',a2:'22'});show_obj(o);return false;"> 
 extend({}, {a0:0,a1:1,a2:2}, {a3:'33',a2:'22'} )
</a> 
<script>
function extend() { var r = arguments[_____] || {}, oi, p;

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

    oi = arguments[_____];
    if (oi) { 
      for ( p in oi ) {
        if (oi[p] !== undefined) { r[p] = __________; }
      }
    }
  } return r;
};

function show_obj(o) { var p, s='';
  for (p in o) { 
    if (____.hasOwnProperty(______) && 

        typeof _________ !== 'function') { 

      s += p + ':' + ________ +', '; 
    }
  } alert('{' + s.replace(/([\s\S]+),\s*________/, '$1')  + '}');
}
</script>

Teste:

Objekt 1 sei var obj1={a0:0,a1:1,a2:2}; (Anzeige ist {a0:0, a1:1, a2:2} )
Objekt 2 sei var obj2={a3:'33',a2:'22'}; (Anzeige ist {a3:33, a2:22} )

Dann ist das zusammengemischte Objekt
extend({}, {a0:0,a1:1,a2:2}, {a3:'33',a2:'22'} ) (Anzeige ist {a0:0, a1:1, a2:22, a3:33} )