4. Aufgabe (Pattern, Code-Muster, Zeichen-Transformationen)

Es soll ein Toolchen für Code-Muster und Zeichen-Transformationen erstellt werden. das Code-Pattern-Toolchen soll leicht erweitert und an persönliche Bedürfnisse angepaßt werden können.

Ausgangspunkt ist das HTML5-Grundgerüst einer Seite, das als Basis des Toolchen für Code-Muster und Zeichen-Manipulationen dienen soll. Diese Seite wird unter tools/pattern-tool.htm gespeichert.

Auch ist eine stete Erweiterung und Verbesserung der Homepage möglich, indem z.B. eine Info-Seite tools/pattern-infos.htm erstellt wird, die die Bedienung und Möglichkeiten des Pattern-Toolchens beschreibt.

Wie fange ich mit der Entwicklung an?

Für die Entwicklung eines Pattern-Toolchen wird im body ein Formular verwendet, das 2 Textareas mit den globalen id0='ta0' und id1='ta1' hat.

<h1> Code-Pattern </h1>

<span class="screenreader"> tue-beginn </span>
<a href="javascript:void(0)"
   onclick="tue('vertauschen');"> vertausche 
   <span class="screenreader"> ta0 und ta1-inhalt </span> 
</a> 
<span class="screenreader"> tue-ende </span>


<form action="#">
<label for="ta0" class="screenreader">ta0 ist hier</label>
<textarea id="ta0" cols="90" rows="20"> 0 text im ta0 </textarea>

<label for="ta1" class="screenreader">ta1 ist hier</label>
<textarea id="ta1" cols="90" rows="10"> 1 text im ta1 </textarea>
</form>

Was bedeutet die Style-Klasse .screenreader?

Für Screenreader kann z.B. mit <span class="screenreader"> tue-beginn </span> HTML-Text eingefügt werden, der hörbar, aber nicht sehbar ist.

<style>
.screenreader {position: absolute; top:0; left:-999em;}
/* oder */
.screenreader {position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);}
</style>

Wie geht das mit dem Zugriff auf den teaxare-Inhalt?

Für die Entwicklung eines Pattern-Toolchen kann zunächst mit globalen ECMAScript-Funktionen gearbeiten werden. Hat ein Tag eine globale id0="ta0", so kann (nach dem Laden der Seite) auf dieses Tag zugegriffen werden mit var objekt = doc.getElementById(id0);

Nachfolgend sind die ('abgesicherten') Funktionen var obj = get_obj(id); und var str = get_string(id); und set_string(id, str);

Die Funktion tue(was) "ist das Arbeitstier". Mit var s0 = get_string(id0); kann z.B. der Text von id0 geholt, dann gewandelt und mit set_string(id1, str); wird das Ergebnis str in die Textarea id1 geschrieben.

Die Funktion tue(was) kann leicht erweitert werden. Existiert z.B. im switch(was) {...} ein case 'vertauschen', so lautet der Funktionsaufruf tue('vertauschen'); der die Inhalte von id0 und id1 vertauscht.

<script>
var win = window;
var doc = win.document; 
var id0 = 'ta0'; // id0 identifiziert textarea0
var id1 = 'ta1'; // id1 identifiziert textarea1
var data_objekte = {}; // fuer das Hinterlegen von bel. Daten

function set_data(key, daten) {// hinterlege daten unter key
  data_objekte[key] = daten;
}

function get_data(key) {var r; // gibt zu key hinterlegte Daten r zurueck
  try { r = data_objekte[key]; // try, damit eine Fehlermeldung kommt, wenn key falsch ist
  } catch (e) {
    win.alert("Error: get_data("+key+" ???)" +e); return null;
  }
  return  r; 
}
function get_obj(id) { var r; //gibt in r das zugehoerige id-Objekt zurueck
  try { // try, damit bei falschen id eine Fehlermeldung kommt
    r = doc.getElementById(id);
  } catch (e) {
    win.alert("Error: get_obj("+id+" ???) " + e); return null; 
  }
  return r;
}

function set_string(id, str) { // schreibt (bei input oder textarea) den str in idobj.value=str, sonst in idobj.innerHTML=str
  var typ, obj = get_obj(id); if (!obj) { return; }
  typ = obj.tagName.toLowerCase();
  if (typ === 'input' || typ === 'textarea') {
    obj.value = str; 
    obj.setAttribute('value', obj.value);
  } else {
    obj.innerHTML = str;
  }
}

function get_string(id) { // gibt (bei input oder textarea) den str von idobj.value zurueck, sonst idobj.innerHTML
  var typ, obj = get_obj(id); if (!obj) { return ''; }
  typ = obj.tagName.toLowerCase();
  if (typ === 'input' || typ === 'textarea') {
    return obj.value;
  } else {
    return obj.innerHTML; 
  }
}

function tue(was, use_key) { // diese Funktion tut-was reinprogramiert wird 
var temp, s1, s0 = get_string(id0); if (!s0) { return; }

switch (was) {
case 'vertauschen': // vertausche ta0-Inhalt mit ta1-Inhalt
  s1 = get_string(id1); 
  set_string(id1, s0);
  set_string(id0, s1);
return;

case 'content_escapen': // wandelt s0 in einen %hexhex-String und schreibt diesen in ta1
//???
return;

default: return;// default-case 
} // ende switch
} // ende function tue

</script>