Informatik ist die Wissenschaft von der systematischen Verarbeitung von codierten Informationen ( siehe z.B. de.wikipedia: Informatik ). Weltweit sind Zeichen-Codierungen, Zeichen-Ketten und Zeichen-Darstellungen von grundlegender Bedeutung. Sinn ( Pragmatik ) entsteht im Interpretieren.
Das zu erstellende Toolchen 2 kann "Zeichen-Manipulationen" genannt werden und soll in vielfältiger Weise Zeichen anzeigen, mit Stringfunktionen veränder und anwendungsbezogen manipulieren können. Zeichen-Manipulationen können bei Fragen zur Codierung von Schriftzeichen und deren Darstellungen und den eingebauten ECMAScript-String-Funktionen recht hilfreich ein.
Dieser Seite hier enthält auch eingestreute Code-Beispiele, die lediglich als Hinweis gedacht sind, diese können als ungeprüfte Hinweise durchaus fehlerhaft und verbesserbar sein.
Diese Aufgabe 2 baut auf dem vorher erstellten "Grundtool" auf und beinhaltet
Genaueres kommt weiter unten.
Zwischen die textarea's "TA0" und "TA1" wird eine horizontale Zeile mit 3 a-Tags eingefügt,
die
a) mit dem "TA0"-Content den "TA1"-Content überschreiben,
b) den "TA0"-Content und den "TA1"-Content vertauschen,
c) mit dem "TA1"-Content den "TA0"-Content überschreiben.
Als innerHTML der a-Tags werden die folgenden Unicode-Zeichen ( ↓ ↑↓ ↑ )verwendet, etwa:
<a href="javascript:void(0);" onclick="set_string('TA1',get_string('TA0'));"> ↓ </a>
<a href="javascript:void(0);" onclick="???"> ↑↓ </a>
<a href="javascript:void(0);" onclick="???"> ↑ </a>
Die Steuerung der Sichtbarkeiten ist ein mächtiges Desing-Verfahren, das insbesondere bei modless Dialogen verwendet wird. Auch wenn ein Element (DOM-Objekt) unsichtbar ist, so bleiben doch die Daten des Objektes erhalten.
Zwischenduch befragende mentale Hinweise: Bei Events, die durchaus zeitversetzt auftreten, ist auf eine interne "Restrukturierung" zu achten! Was meint das wohl? Auf welchen Objektzustand greift dann eine Funktion zu?
Hat z.B. ein (div-) Element id='ziel_id',
so soll durch einen Klick auf [+] ( "+ = mehr = sichtbar gewünscht" )
in ein [-] ( "- = weniger = unsichtbar gewünscht" )
gewandelt werden.
Das vorher unsichtbare Element id='ziel_id' wird mit [+] - Klick sichtbar geschalten.
Das vorher sichtbare Element id='ziel_id' wird mit [-] - Klick unsichtbar geschalten.
Es wird ein a-Tag mit onclick verwendet, etwa
<a href="javascript:void(0)" onclick="toggle(['ziel_id',this])"><em>[+]</em>on/off-Umschaltung</a>
Die nachfolgende Funktion toggle(['ziel_id',this]) ermöglicht die Umschaltung (sichtbar/unsichtbar). Werden stets die default-Werte visu = 'block'; s1 = '[-]'; s2 = '[+]'; verwendet, so können bei dem Aufruf diese Parameter weggelassen werden, etwa toggle(['ziel_id', this])
Für a_delegate wird ein Array verwendet, um auch mehrere a-Tags, die an verschiedenen Stellen des Bildschirmes die 'ziel_id' umschalten könnten, benachrichtigen zu können. In diesem Fall erhalten diese a-Tags eine eigene id, wie z.B. toggle(['ziel_id','a_id0','a_id1','a_id2'])
Hier ist eine Funktion (selbsterklärend):
function toggle(a_delegate, visu, s1, s2) {
var i, a, arr = [ ];
for( i = 0; i < a_delegate.length; i += 1) { a = a_delegate[i];
if(typeof a === 'string') { a = document.getElementById(a_delegate[i]); }
if( a ) { arr.push(a); } else { alert("ERR: toggle(["+a+"? ...]"); return; }
}
visu = visu || 'block'; s1 = s1 || '[-]'; s2 = s2 || '[+]'; // default-Werte
for( i = 1; i < arr.length; i += 1) { s = arr[i].innerHTML;
if (s.indexOf(s2) === -1) { // s2 ist nicht in s
arr[i].innerHTML = s.replace(s1,s2); if(i === 1) {arr[0].style.display = 'none';}
} else { // s2 ist in s
arr[i].innerHTML = s.replace(s2,s1); if(i === 1) { arr[0].style.display = visu;}
}
}
}
Die Funktionen toggle() und popup() kommen (später) in die visu-Bibliothek.
Vor "TA1" kommt das a-Tag:
<a class="float_right" href="javascript:void(0)" onclick="toggle(['TA1',this])"><em>TA1[-]</em></a>
Bei dieser Aufgabe gibt es zahlreiche Funktionalitäten und damit zahlreiche Menü-Auswahlmöglichkeiten. Damit die Übersicht nicht verloren geht, wird ein Haupt-Menü umd mehrere Unter-Menüs verwendet. Haupt-Menü etwa
Vorschau [+] Code-Muster [+] Uni-Code [+] Uni-Zeichen [+] Funktionen [+] Zeichen [+] Sortieren
das die Sub-Menüs sichtbar/unsichtbar schaltet. Zu jedem Haupt-Menü-Punkt gehört ein Tag
<a href="javascript:void(0)" onclick="toggle(['ziel_id',this])"><em>[+]</em>ziel-name</a>
Hier kommt ein ungeprüftes Code Snippet, das lediglich der Orientierung dient.
Bei zahlreichen HTML-CSS-Design-Aufgaben (wie z.B. hier) ist ein Arbeiten mit "float" günstig, z.B. wenn inline-Text-Punkt (jeder) in einen Rahlen fester Längen soll, oder wenn Marker ganz recht sichtbar ein sollen. Hier grobe, ungeprüfte Vorschläge:
form, div {clear: both;}
div > em {float: left; width: 100px;
vertical-align: text-bottom;
margin: 1px; padding: 3px 1px;
font: 14px/15px 'Courier New',monospace !important;
}
div a em { float: left; background-color: #191999; color:#fff;
font: 14px/17px 'Courier New',monospace !important;
}
dfn {float: right;}
.float_left { float: left;}
.float_right { float: right;}
.float_clear { clear: both !important;}
.pre_uni_zeichen { font-size:24px;
font:bold 24px/26px 'Courier New',monospace;
min-width:25px; line-height:25px;
vertical-align:middle; text-align:center;
margin:1px; border:3px inset #ccf;
background-color:#191999; color:#fff;
}
Der Multiline-Text von "TA0" soll mit popup(get_string('TA0')) als Browser-Vorschau in einem popup-Fenster erscheinen. Ein script-Tag wird ausgeführt. Styles werden interprtiert. Ein HTML-Seiten-Quelltext erscheint als Browseransicht. Die Funktion popup() ist zu schreiben und kann dann etwa so aufgerufen werden:
<a href="javascript:void(0)" onclick="popup(get_string('TA0'));"> Vorschau </a>
Die Funktionen toggle() und popup() gehören in die visu-Bibliothek.
Die Funktion popup() kann in 2 Arten aufgerufen werden. a) wenn der str-Quelltext mit popup(str) als Browser-Vorschau angezeigt werden soll, oder b) wenn eine url-Seite im popup-Fenster popup(null,url) angezeigt werden soll.
Die globale Variable var hwin; ist außerhalb der popup-Funktion, damit bei einem öffnenden popup-Fenster das vorherige popup-Fenster geschlossen wird. Es gibt somit stets höchstens ein Popup-Fenster.
Es gibt zahlreiche Möglichkeiten, wie Bibliotheken erstellt werden. Hier wird eine robuste Möglichkeit beschrieben. Die Funktionen und Daten werden in einen privaten Bereich, d.h. im Namespace-Objekt dom, gekapselt Es wird das folgendes Scenario angenommen:
var win = window, doc = win.document;
function f0 (x, y, z) { /* f0 verwendet intern win, doc, x,y,z */ }
function f1 ( o ) { /* f1 verwendet intern win, doc, o */ }
function f2 ( ) { /* f2 verwendet intern win und doc */ } ...
var win = window, doc = win.document;ersetzt durch
var dom = (function (win) { var doc = win.document;
Am Ende der globalen Funktionssammlung wird angefügt
return {f0:f0, f1:f1, f2:f2};
} (window));
var dom = (function (win) { var doc = win.document;
function f0 (x, y, z) { /* f0 verwendet intern win, doc, x,y,z */ }
function f1 ( o ) { /* f1 verwendet intern win, doc, o */ }
function f2 ( ) { /* f2 verwendet intern win und doc */ }
return {f0:f0, f1:f1, f2:f2};
} (window));
typeof dom ist 'object'.
Was meint ( function() {...} ) ? Die Außenklammerung der Funktion bewirkt, daß die Ausführung der Funktion ohne Wirkungen auf den Kontext ist.
Bei der initialisierenden Funktion-Ausführung infolge der (window)-Argument-Aufrufklammer kommt die globale window-Referenz als win-Parameter in den privaten Bereich hinein.
var dom = (function (win) { var doc = win.document; /* privater Bereich für Funktionsdeklarationen mit win und dom */ return {/*objekt als rückgabe-Objekt, das dom zugewiesen wird*/}; } (window));
Im privaten Bereich von dom wird nun win anstelle von window verwendet. Am Ende der initialisierenden Funktion-Ausführung für das dom-Objekt gibt return ein Objekt zurück, etwa
return {/*objekt als rückgabe-Objekt, das dom zugewiesen wird*/};
das dann nach der Initialisierung wegen var dom = ... ein Namespace-Objekt ist.
Hier geht es um noch zu schreibende Bibliotheken. Wie sollte das Bibliothek-Software-Design aussehen? Wieviele ECMAScript-Bibliotheken werden gebraucht? Es könnte z.B. eine einzige, umfangreiche Bibliotheken konzipiert werden, die alle Funktionen aufnimmt. Es können aber auch z.B. viele kleine Bibliotheken konzipiert werden, die nur bei Bedarf includiert werden. Wieviele Bibliotheken werden gebraucht? Wieviele Funktionen je Bibliothk sind günstig? Wie werden die Bibliotheken erstellt?
Unter Berücksichtigung der bisherigen Erfahrungen wird das folgende Erstellungsverfahren vorgeschlagen. Jede Bibliothek soll klein, robust, einfach erweiterbar und gut verwendbar sein. Zur besseren Übersicht soll der Objektname (Namespace) auch als Dateiname.js verwendet werden. Die folgenden "Includes" eines Toolchens würden dann auf die Nutzung hinweisen.
Das Vorgehen zum Erstellen einer Bibliothek wurde oben beschrieben. Anstelle der Funktionen f0(), f1(), f2() werden für die daten-Bibliothek die Funktionen set (key, o) und get (key) verwendet. Die daten-Bibliothek wird später durch "gute localStore Funktionen" erweitert. Wie sieht diese daten-Bibliothek dann zunächst etwa aus?
var daten = (function ( ) {
var data_objekte = { }; // privat
function set (key, o) { data_objekte[key] = o; }
function get (key) { return data_objekte[key]; }
return {set:set, get:get};
} ());
Dieser Code wird in der Datei /tools/incl/daten.js gespeichert.
Zum Benutzen kann der ECMAScript-Code mit
<script type="text/javascript" src="./incl/daten.js"></script>
im Header der HTML-Seite includiert werden. Steht die Bibliotkek zur Verfügung, so können Pattern-Muster oder andere Daten auch übersichtlich ausgelagert werden, wie z.B. mit
daten.set('Policy für Präsentation', '%3Ch1%3E%20Policy...');
Bitte beachten! Der Key (hier 'Policy für Präsentation') darf Leerzeichen und Uni-Code-Zeichen enthalten und kann somit die Daten gut beschreiben.
Key's sollten eindeutig sein. Z.B. bei
daten.set('key1', 'uvw') und irgendwo nachfolgend
daten.set('key1', 'xyz')
wird die 'uvw'-Zeichenkette durch 'xyz' überschrieben.
Wie werden die hinterlegten Daten, wie z.B. daten.set('Policy für Präsentation', '%3Ch1%3E%20Policy...'); verwendet? Es gibt zahlreiche Wiederverwendungsarten und Möglichkeiten, im HTML-Body etwa
<a href="javascript:void(0)"
onclick="set_string('TA0',unescape(daten.get('Policy für Präsentation')));">
Policy ↓
</a>
Das Vorgehen zum Erstellen der dom-Bibliothek wurde oben beschrieben. Anstelle der Funktionen f0(), f1(), f2() werden die Funktionen get_node (id), get_string (id), set_string (id, str) verwendet. Dies ergibt etwa die Bibliothek
var dom = (function (win) { "use strict"; var doc = win.document; function get_node (id) { ... } function get_string (id) { ... } function set_string (id, str) { ... } return { get_node:get_node, get_string:get_string, set_string:set_string }; } (window));
Bevor der ECMAScript-Code ( ohne umschließendes <script>...</script> - Tag ) in der Datei /tools/incl/dom.js gespeichert wird, ist der Quellcode mit Hilfe von JSLint ( JavaScript Code Quality Tool) und "use strict"; zu untersuchen, zu verbessern.
Ein "Self-made-Toolchen" includiert die ./incl/dom.js - Bibliothek im Header
|
<script type="text/javascript" src="./incl/dom.js"></script> | |
|
Wo vorher im Toolchen globale Funktion get_node (...); get_string (...); set_string (...); aufgerufen wurden ... |
... werden nun die includierte Bibliotheksfunktionen dom.get_node (...); dom.get_string (...); dom.set_string (...); aufgerufen. |
Die visu-Bibliothek tools/incl/visu.js soll zunächst ledig die Funktion toggle(...) und popup() enthalten. Die visu-Bibliothek wird später weiter erweitert. toggle soll die Sichtbarkeitsänderung von id='id_dst' bewirken. dst steht für "Ziel-Element" (Destination). Es ist eine visu-Bibliothek ( tools/incl/visu.js ) mit der Funktion toggle zu schreiben.
Beim Toolchen 2 ( Zeichen-Manipulationen ) ist dann im HTML-Header tools/incl/visu.js zu includieren. Das a-Tag soll unmittelbar vor der Textarea "TA1" stehen.
<a href="javascript:void(0)" onclick="visu.toggle(this,'TA1');">[-]</a>
Um Verschlüsselungsverfahren z.B. mit den Zeichen zu 1, 2, 3, ..., 32, 33, ..., 255 zu testen, werden diese Zeichen in "TA0" gebraucht. Schreiben und testen sie eine Funktion "alle_8_bit_zeichen", die den erzeugten String ta0 in "TA0" schreibt.
// nicht getestet:
var i, i1 = 1; i2 = 255, ta0 = '';
for(i = i1; i < i2; i += 1) {
ta0 += String.fromCharCode(i);
}
Warum wird i = 0 weggelassen?
Zahlreiche Unicode-Zeichen können als "Icon-Ersatz" dienen. Gebraucht werden z.B. grafische und mathematische Zeichen (siehe de.wikipedia Unicode-Böcke ).
Die Funktion set_unicode_zeichen(id_dst, i1, i2) soll lediglich solche Unicode-Zeichen vergrößert in ein div mit id="DIV_CONTENT" schreiben. Das gewünschte Zeichen kann dann herauskopiert werden.
function set_unicode_zeichen(id_dst, i1, i2, style) { // für Ausgabe in div
style = style || 'pre_uni_zeichen w30';
var i, arr = [ ], span1="<span class='"+style+"'>", span2="</span>",
div = document.getElementById(id_dst);
for (i = i1; i <= i2; i += 1) {
arr.push(span1);
arr.push(String.fromCharCode(i));
arr.push(span2);
} // div.style.display = 'block'; div.className = "my_cs_class1 my_class2";
div.innerHTML = arr.join(' ');
}
Die Funktion build_unicode(i1, i2) soll eine Zeichenkette erstellen, der die Unicode-Zeichen von i1 bis i2 enthält. Welche Zeichen kann der Browser derzeit darstellen? Wie kann die Code-Zahl Bsp: \u0041 und die benummerte Zeichendarstellung für HTML erhalten werden?
function build_unicode(i1, i2) { // für textarea
var i, step = 1, arr = [ ];
for (i = i1; i <= i2; i += step) {
arr.push('\n');
arr.push(String.fromCharCode(i)); // dargestelltes Zeichen
arr.push('\\u'+ ('0000'+i.toString(16)).slice(-4));// Bsp: \u0041
arr.push('&#' + i+';'); // Bsp: A
arr.push('&#x' + i.toString(16)+';'); // Bsp: A
} return arr.join(' ');
}
Hier ein Aufruf-Beispiel für einen Unicode-Block. i1 ist die Start-Nummer und i2 ist die Endnummer.
<a href="javascript:void(0)" onclick="set_string('TA0',build_unicode(0x0001,0x007F));">Basis-Lateinisch </a>
Der Array a enthält Paare aus Anfang-/End-Index für umschlossenen-Unicode-Zeichen. Diese Zeichen sind in div id="DIV_CONTENT" auszugeben.
var i, j, ta1='', // nicht geprüfter ECMAScript-Code:
a = [0x2460,0x2473,0x2780,0x2793,0x3251,0x325F,0x32B1,0x32BF];
for( j = 0; j < a.length-1; j += 2) {
for( i = a[j]; i < a[j+1]; i += 1) {
ta1 += String.fromCharCode(i);
}
}
Im DOCTYPE einer XHTM-Seite steht http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd. Mit Hilfe dieser Datei sind die Dateiel lat1.ent, special.ent, symbol.ent auffindbar, die die benamten HTML-Entities enthalten.
http://www.w3.org/TR/xhtml1/dtds.html#dtdentry_xhtml1-strict.dtd_HTMLlat1 http://www.w3.org/TR/xhtml1/dtds.html#dtdentry_xhtml1-strict.dtd_HTMLsymbol http://www.w3.org/TR/xhtml1/dtds.html#dtdentry_xhtml1-strict.dtd_HTMLspecial
Das folgende, ungeprüfte Objekt enthält diese Zuorgnungen.
var xhtml_entities = { '160':'nbsp','161':'iexcl','162':'cent','163':'pound','164':'curren','165':'yen','166':'brvbar', '167':'sect','168':'uml','169':'copy','170':'ordf','171':'laquo','172':'not','173':'shy','174':'reg', '175':'macr','176':'deg','177':'plusmn','178':'sup2','179':'sup3','180':'acute','181':'micro', '182':'para','183':'middot','184':'cedil','185':'sup1','186':'ordm','187':'raquo','188':'frac14', '189':'frac12','190':'frac34','191':'iquest','192':'Agrave','193':'Aacute','194':'Acirc', '195':'Atilde','196':'Auml','197':'Aring','198':'AElig','199':'Ccedil','200':'Egrave','201':'Eacute', '202':'Ecirc','203':'Euml','204':'Igrave','205':'Iacute','206':'Icirc','207':'Iuml','208':'ETH', '209':'Ntilde','210':'Ograve','211':'Oacute','212':'Ocirc','213':'Otilde','214':'Ouml','215':'times', '216':'Oslash','217':'Ugrave','218':'Uacute','219':'Ucirc','220':'Uuml','221':'Yacute','222':'THORN', '223':'szlig','224':'agrave','225':'aacute','226':'acirc','227':'atilde','228':'auml','229':'aring', '230':'aelig','231':'ccedil','232':'egrave','233':'eacute','234':'ecirc','235':'euml','236':'igrave', '237':'iacute','238':'icirc','239':'iuml','240':'eth','241':'ntilde','242':'ograve','243':'oacute', '244':'ocirc','245':'otilde','246':'ouml','247':'divide','248':'oslash','249':'ugrave','250':'uacute', '251':'ucirc','252':'uuml','253':'yacute','254':'thorn','255':'yuml','402':'fnof','913':'Alpha', '914':'Beta','915':'Gamma','916':'Delta','917':'Epsilon','918':'Zeta','919':'Eta','920':'Theta', '921':'Iota','922':'Kappa','923':'Lambda','924':'Mu','925':'Nu','926':'Xi','927':'Omicron','928':'Pi', '929':'Rho','931':'Sigma','932':'Tau','933':'Upsilon','934':'Phi','935':'Chi','936':'Psi','937':'Omega', '945':'alpha','946':'beta','947':'gamma','948':'delta','949':'epsilon','950':'zeta','951':'eta', '952':'theta','953':'iota','954':'kappa','955':'lambda','956':'mu','957':'nu','958':'xi','959':'omicron', '960':'pi','961':'rho','962':'sigmaf','963':'sigma','964':'tau','965':'upsilon','966':'phi','967':'chi', '968':'psi','969':'omega','977':'thetasym','978':'upsih','982':'piv','8226':'bull','8230':'hellip', '8242':'prime','8243':'Prime','8254':'oline','8260':'frasl','8472':'weierp','8465':'image','8476':'real', '8482':'trade','8501':'alefsym','8592':'larr','8593':'uarr','8594':'rarr','8595':'darr','8596':'harr', '8629':'crarr','8656':'lArr','8657':'uArr','8658':'rArr','8659':'dArr','8660':'hArr','8704':'forall', '8706':'part','8707':'exist','8709':'empty','8711':'nabla','8712':'isin','8713':'notin','8715':'ni', '8719':'prod','8721':'sum','8722':'minus','8727':'lowast','8730':'radic','8733':'prop','8734':'infin', '8736':'ang','8743':'and','8744':'or','8745':'cap','8746':'cup','8747':'int','8756':'there4','8764':'sim', '8773':'cong','8776':'asymp','8800':'ne','8801':'equiv','8804':'le','8805':'ge','8834':'sub','8835':'sup', '8836':'nsub','8838':'sube','8839':'supe','8853':'oplus','8855':'otimes','8869':'perp','8901':'sdot', '8968':'lceil','8969':'rceil','8970':'lfloor','8971':'rfloor','9001':'lang','9002':'rang','9674':'loz', '9824':'spades','9827':'clubs','9829':'hearts','9830':'diams','34':'quot','38':'amp','60':'lt', '62':'gt','39':'apos','338':'OElig','339':'oelig','352':'Scaron','353':'scaron','376':'Yuml','710':'circ', '732':'tilde','8194':'ensp','8195':'emsp','8201':'thinsp','8204':'zwnj','8205':'zwj','8206':'lrm', '8207':'rlm','8211':'ndash','8212':'mdash','8216':'lsquo','8217':'rsquo','8218':'sbquo','8220':'ldquo', '8221':'rdquo','8222':'bdquo','8224':'dagger','8225':'Dagger','8240':'permil','8249':'lsaquo', '8250':'rsaquo','8364':'euro'};
Schreiben sie bitte eine Funktion xhtml_entities(), die zeilenweise a) das Zeichen, b) die benumerte und c) die benamte Entity-Schreibweise des Zeichens ausgibt.
Wie sieht eine Funktion aus die alle Unicode-Zeichen möglichst in benamte Entities ersetzt?
Bei Zeichen-Ersetzungen und Zeichen-Umwandlungen kann sich die Zahl der Zeichen ändern. Der Sub-Menü-Eintrag "Anz Zeichen" zeigt die Anzahl der Zeichen in TA0 an.
<a href="javascript:void(0)" onclick="alert(get_string('TA0').length);">Anz Zeichen</a>
Submenu Zeichen-Transformationen: Im Text von TA0 kommen auch dezimale Zahlen vor. Jede Zahl kann aus mehreren Ziffern bestehen. Im Text von TA0 sollen alle dezimalen Zahlen in hex-Zahlen gewandelt und in TA1 ausgegeben werden.
// Hinweis:
ta0 = get_string(id_ta0);
ta1 = ta0.replace(/\r/g,'').replace(/(\d+)/g,
function(d) {
return '\x'+parseInt(d,10).toString(16);
}
);
Wie kann mit .toString(?) in binär-Zahlen gewandelt werden?
Wie kann von Basis b0 = 2,3,4,...32 mit Hilfe von .parseInt(d,?) in eine Basis b1 = 2,3,4,...32 mit Hilfe von .toString(?) gewandelt werden?
Submenu Zeichen-Transformationen: Ein Text in "TA0" soll in numerierte HTML-Zeichen-Kette gewandelt und in "TA1" ausgegeben werden.
// nicht geprüfter ECMAScript-Code:
function get_string_bas(id_ta0, bas) { // bas = 10 oder 16
var i, pre, ta1, ta0 s2 = '';
if(bas===10) {pre = '&#';} else if(bas===16) {pre = '&#x';} else {return;}
ta0 = get_string(id_ta0);
ta1 = ta0.replace(/\r/g, '');
for (i = 0; i < ta1.length; i += 1) {
s2 += pre + ta1.charCodeAt(i).toString(bas) + ';';
} return s2;
}
Jedes Zeichen aus "TA0" soll mit XOR 43 verschlüsselt werden. Ergebnisstring soll in "TA1" ausgegeben werden
// nicht geprüfte Funktion:
function get_string_bas(id_ta0, n) { var ta0, ta1; n = n || 43;
ta0 = get_string(id_ta0);
ta1 = ta0.replace(/\r/g,'').replace(/[\s\S]/g,
function(c){
return String.fromCharCode(c.charCodeAt(0)^n);
}
);
return ta1;
}
Soll z.B. der Code einer Programmiersprache (z.B. ECMAScript) in einer HTML-Seite erscheinen, so würde beim direkten reinkopieren von z.B. if( 3 < 4 ) { ... } in den HTML-Body das Markup-Zeichen < nicht validen HTML-Code erzeugen, d.h. die zu schreibenden Funktion code_to_html_einfach (s) und code_to_html_mit_zeilen_nummern (s) können hierfür hilfreich sein. Achtung! Die folgenden 2 Varianten sind nicht getestet.
code_to_html_einfach(s) ist eine einfache Version, die reguläre Ausdrücke und .replace() verwendet, um einen HTML-Code zurück zu liefern.
Sind Bezüge auf auf einzelne Codezeilen gewünscht, so sollte das Ergebnis mit Zeilen-Nummern versehen sein. Hierfür ist code_to_html_mit_zeilen_nummern(s) gedacht.
function code_to_html_einfach (s) {
s = s.replace(/\046/g,'&').replace(/\</g,'<').replace(/\>/g,'>');
s = '\n<pre class="dir">\n' + s + '\n\<\/pre>';
return s;
}
Submenu Sortieren: Jede Zeile von "TA0" enthalte einen Zeilenstring, der auch leer sein darf. Der gesamte "TA0"-Text wird bei jedem Zeilenumbruch getrennt und erzeugt den Array arr geschrieben. Der Array arr wird sortiert und mit .join() wieder zu einem Gesamtstring zusammen gesetzt. Das Ergebnis soll in "TA1" ausgegeben werden. Nach dem Sortieren von "TA0"
Werner Abel
(leer)
Hans Schlaumeier
wird in "TA1"
(leer)
Hans Schlaumeier
Werner Abel
// Hinweis, nicht geprüft:
var ta1, arr = get_string('TA0').split('\n'); // Zeilen-Array
ta1 = arr.join('\n'); // ta1 ist ein String
Wie kann zeilenweise abwärts sortiert werden?
Submenu Sortieren: Am Anfang jeder Zeile von "TA0" stehen dezimale Zahlen. Der gesamte "TA0"-Text wird bei jedem Zeilenumbruch getrennt und in arr geschrieben. "white-Character" unmittelbar nach jedem Zeilenanfang werden gelöscht. Der Array wird sortiert und wieder zu einem Gesamtstring zusammen gesetzt. Das Ergebnis soll in "TA1" ausgegeben werden. Nach dem Sortieren von "TA0"
123 12 21
wird in "TA1"
12 21 123
Hinweis: my_arr.sort() sortiert dem Array my_arr. Bei my_arr.sort(fn) muß die Funktion fn angeben, was als größer gilt.
// Hinweis, nicht geprüft:
var ta1, arr = get_string('TA0').split('\n\s+'); // Zeilen-Array
arr.sort(
function(a,b) {
return ( parseFloat(a) - parseFloat(b));
}
).join('\n');
ta1 = arr.join('\n'); // ta1 ist ein String
Wie kann numerisch abwärts sortiert werden?
ECMAScript hat unmittelbar verfügbare Stringfunktionen. Als Eingabe-String diene der "TA0"-Content. Das Ergebnis der Stringfunktion wird in "TA1" geschrieben. Hier einige Beispiele:
escape() und unescape(), ... encodeURI() und decodeURI(), ... encodeURIComponent() und decodeURIComponent()
Beispiel: Wieviel Zeichen hat "äöü" bei UTF-8? Wieviele Byte hat "äöü" in einem Byte-Stream?
var win = window;
function encode_utf8 (s) {
try { s = win.unescape(win.encodeURIComponent(s));
} catch (e) { win.alert('ERR: encode_utf8()'); }
return s;
}
function decode_utf8 (s) {
try { s = win.decodeURIComponent(win.escape(s));
} catch (e) { win.alert('ERR: decode_utf8()'); }
return s;
}
Wichtiger Hinweis!
Diese Augabe kann vielfältiges ECMAScript-Wissen aufbauen.
Studieren hat bekanntlich mit dem eigenen Wissenszuwachs zu tun.
Identischen Kopien entsprechen einem zu geringen Wissenszuwachs und werden mit 0 Punkten bewertet.
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine (wie besprochen)