Tips zu ECMAScript-Pprogrammierung 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."
Select-Box (functionen) und input-Tag (onkeyup) leider keine DOM-Funktion ...

Mit Hilfe von ECMAScript kann eine Seleckt-Box zur gemachten Auswahl eine zugehörige Funktion ausführen

Bei der eingabe in ein input text-Tag kann mit dem onkeyup-Ereignis eine zugehörige Funktion ausgeführt werden. inpue

Code Snippet
  1. <script type="text/javascript">///<![CDATA[
  2. function hash1_of(wert, base) {
  3.   base = base || 32;
  4.   wert = parent.fsb.hash(wert,32);
  5.   wert = parent.fsb.base64_encode(wert);
  6.   return wert;
  7. }
  8. function hash_of(wert, base) {
  9.   var tit, loc, h1, h2, h3; base = base || 32;
  10.   tit = document.title.replace(/[^a-zA-Z0-9_]/g, '') || 'xxx';
  11.   loc = (""+self.location).replace(/[^a-zA-Z0-9_]/g, '') || 'XXX';
  12.   h1 = hash1_of(wert, base);
  13.   h2 = hash1_of(h1 + tit, base);
  14.   h3 = hash1_of(h1 + loc, base);
  15.   return h1 + h2 + h3;
  16. }
  17. function wert_to(id_dst, wert) {
  18.   document.getElementById(id_dst).value = wert;
  19. }
  20. function hash_wert_to(id_dst, wert) {
  21.   document.getElementById(id_dst).value = hash_of(wert);
  22. }
  23. function copy_value_to(id_dst, id_src) {
  24.   var src = document.getElementById(id_src).value.replace(/^\s+|\s+$/g,'');
  25.   wert_to(id_dst, hash_of(src));
  26. }
  27. ///]]></script>
  28.  
  29.  
  30. <form name="FORMNAME0" method="post" enctype="multipart/form-data"
  31. action="javascript:alert('jetzt ist action dran');"
  32. onsubmit="alert('jetzt ist onsubmit dran...');return true;">
  34. <select size="1" style="width:200px !important;"
  35. onchange="try{eval(this.options[this.selectedIndex].value)}catch(e){alert(e);};this.selectedIndex=0;">
  36.   <option value="alert('Bitte andere Wahl')"> Wähle User-Name ... </option>
  37.   <option value="wert_to('USER1','user-name-0');"> user-name-0 </option>
  38.   <option value="wert_to('USER1','user-name-1');"> user-name-1 </option>
  39.   <option value="wert_to('USER1','user-name-2');"> user-name-2 </option>
  40. </select>
  41.  
  42. <input type="text" name="USER1" id="USER1"
  43. size="55" value="" onkeyup="copy_value_to('USER2','USER1');" />
  44. <br /><br />
  45. <select size="1" style="width:200px !important;"
  46. onchange="try{eval(this.options[this.selectedIndex].value)}catch(e){alert(e);};this.selectedIndex=0;">
  47.   <option value="alert('Bitte andere Wahl')"> Wähle Crypt-User-Name ... </option>
  48.   <option value="hash_wert_to('USER2','user-name-0')"> crypt user-name-0</option>
  49.   <option value="hash_wert_to('USER2','user-name-1')"> crypt user-name-1</option>
  50.   <option value="hash_wert_to('USER2','user-name-2')"> crypt user-name-2</option>
  51. </select>
  52.  
  53. <input type="text" name="USER2" id="USER2"
  54. size="55" value='' onkeyup="copy_value_to('USER1','USER2');" />
  55.  
  56. </form>

Bitte testen! Achtung! Bei Fehlermeldungen
bitte innerhalb der Hompage-Umgebung testen.


getElementsByAttribute leider keine DOM-Funktion ...

Die folgende Funktion dom erzeugt ein Objekt, mit den Funktionen root und getElementsByAttribute. Infolge der Rekursivität können ab dem root-Knoten alle nodes durchlaufen und alle jene nodes aufgesammelt werden, die das gewünschte Attribut haben.

Code Snippet: getElementsByAttribute() nach Crockford
  1. var dom = (function() {
  2.   var root_node = document.body,
  3.   
  4.   get_childs = function walk(node, fn) {
  5.    fn(node);
  6.    node = node.firstChild;
  7.    while(node) {
  8.      walk(node, fn);
  9.      node = node.nextSibling;
  10.    }
  11.   };
  12.   return {
  13.   getElementsByAttribute: function(att, val){ var r = [];
  14.     get_childs(root_node, function(node) {
  15.      var akt = node.nodeType === 1 && node.getAttribute(att);
  16.      if(typeof akt === 'string' && (akt === val || typeof val !== 'string')) {
  17.         r.push(node);
  18.      }
  19.    }); return r;
  20. },
  22. root: function(node) { root_node = node || document.body; return this;}
  23. };}());
dom.getElementsByAttribute(att)

Test p-tag (#eeefff) mit span-tag (#fffeee)

löschen
dom.root(document.getElementById('id_src')) .getElementsByAttribute('title');
dom.root(document.getElementById('id_src')) .getElementsByAttribute('style');
dom.root(document.getElementsByTagname('body')[0]) .getElementsByAttribute('id');
Anzeige:
Sortieren eines Array von Objekten

Ein Array arr, dessen Elemente aus Objekten besteht, soll nach den Objekt-keys's (hier a, b, c) sortiert werden. 

var arr = [ // Beispiel:
 {a:'a1',b:'b5',c:3},{a:'a2',b:'b5',c:2},{a:'a1',b:'b4',c:3},
 {a:'a2',b:'b4',c:1},{a:'a4',b:'b5',c:2},{a:'a9',b:'b4',c:3},
 {a:'a3',b:'b6',c:3},{a:'a3',b:'b5',c:2},{a:'a6',b:'b7',c:3},
];
Code Snippet: Sortiere Array von Objekten nach name
  1. var by = function(name, minor) { // nach crockford
  2.   return function(o,p) { var a,b;
  3.     if(o && p && typeof o === 'object' && typeof p === 'object') {
  4.       a = o[name];
  5.       b = p[name];
  6.       if ( a === b ) { return typeof minor === 'function' ? minor(o,p) : 0; }
  7.       if(typeof a === typeof b) { return a < b ? -1 : 1; }
  8.       return typeof a < typeof b ? -1 : 1;
  9.     } else {
  10.       throw { name: 'Error',
  11.         message: 'Expected an object when sorting by ' + name
  12.       };
  13.     }
  14.   };
  15. };

Bitte testen (Anzeige der Sortierung) lösche
arr.sort(by('a')); by('a',by('b')))
arr.sort(by('b')); by('b',by('a')))    arr.sort(by('c')); by('a',by('c'))) by('c',by('a')))

Beispiel (onclick-Handler, Closure) Was bedeutet Closure?

Mit der folgenden Funktion add_handlers_to sollen DOM-Elementen eines Array's jeweils einige CSS-Attribute und ein onclick-Ereignis hinzu gefügt werden.

Wichtig ist, dass die Handlerfunktion nicht an die Variable i, sondern an den Wert von i beim Click-Ereignis gebunden wird.

Lösung: Es wird eine Funktion = function (i) {...}(i) definiert, die sofort mit i aufgerufen wird. Dadurch wird eine Eventhandler-Funktion zurück gegeben, die an den übergebenen Wert von i gebunden ist (und nicht an add_handlers_to). Diese zurück gegebene Funktion wird dann onclick zugewiesen.

Code Snippet: onclick-Handler (Closure)
  1. var add_handlers_to = function (nodes) { var i;
  2.   for(i = 0; i < nodes.length; i += 1) {
  3.     nodes[i].style.cursor  = 'pointer';
  4.     nodes[i].style.padding = '3px';
  5.     nodes[i].style.border  = '3px outset #ccc';
  6.     
  7.     nodes[i].onclick = function (i) {
  8.       return function (e) {
  9.         var d = document.documentElement, b = document.body;
  10.         if (!e) { e = window.event;} //IE
  11.         // Maus-Position
  12.         if ( e.pageX == null && e.clientX != null ) {
  13.          e.pageX = e.clientX + (d && d.scrollLeft || b && b.scrollLeft || 0)
  14.                              - (d && d.clientLeft || b && b.clientLeft || 0);
  15.          e.pageY = e.clientY + (d && d.scrollTop  || b && b.scrollTop  || 0)
  16.                              - (d && d.clientTop  || b && b.clientTop  || 0);
  17.         }
  18.         alert(e.type+' auf id='+this.id+' mit (x,y)=('+e.pageX+','+e.pageY+')');
  19.       };  // ende  return function (e)
  20.     }(i); // ende  nodes[i].onclick
  21.   }
  22. };
  23. add_handlers_to([
  24. document.getElementById('id0'),
  25. document.getElementById('id1'),
  26. document.getElementById('id2')
  27. ]);

Zum Testen bitte auf die id's klicken. id0  id1  id2