Das zu erstellende Toolchen soll "String-Manipulationen" genannt werden und möglichst praxisnah der vielfältigen Nutzung von Zeichen und Strings ( Unicode, UTF-8, ECMAScript-Stringfunktionen ) dienen. Bei der Webprogrammierung sind String-Manipulationen allgegenwärtig ( Formulare, internationale Schriftzeichen, Codierungen, Stringmanipulationen und Content-Transformationen mit regulären Ausdrücken, usw. ).
Johann Wolfgang von Goethe:
"Es ist nicht genug zu wissen - man muss auch anwenden.
Es ist nicht genug zu wollen - man muss auch tun."
Zunächst einige Vereinbarungen zur Entwicklung, die der einfachen einfachen Bedienbarkeit und übersichlichen Entwicklung dienen.
Allgemeine Motivation und Hinweise: Es sind Bedienelemente ( Auswahlboxen ) zu verwenden, die aufklppbar sind. Es sind Funktionen zu schreiben und zu testen, die Zeichenketten umwandeln, wie z.B. String in Zahlen und Entities und umgekehrt, wie Text-Zeilen (numerisch und alphanumerisch) sortieren, wie Unicode-Böcken generieren, usw.
Ausgangspunkt ist das unfertige Grundtoolchen , die systematisch erweitert und getestet werden soll.
Beim Entwickeln von HTML der selbst geschrieben Code stets verbessert werden mit Hilfe von http://validator.w3.org/check
Beim Entwickeln mit ECMAScript muß der selbst geschrieben Code stets verbessert werden mit Hilfe von http://www.jslint.com/
Zwischen die textarea's "TA0" und "TA1" wird eine horizontale Zeile mit drei a-Tags eingefügt werden.
a) [ ↓ ] soll den "TA1"-Content mit dem "TA0"-Content überschreiben.
b) [ ↑↓ ] soll den "TA0"-Content mit dem "TA1"-Content vertauschen.
c) [ ↑ ] soll den "TA0"-Content mit dem "TA1"-Content überschreiben.
Als innerHTML der a-Tags werden die folgenden Unicode-Zeichen ( ↓ ↑↓ ↑ )verwendet, etwa:
Was muß dann bei ??? eingesetzt werden?
<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>
Das HTML5 - localStorage-Interface wird heute (2013) bei den "gängigen" Browsern unterstützt. Siehe z.B. save "permanent" . Erklärungen in der Veranstaltung.
Mit einer eigenen Bibliothek soll die Nutzung des
HTML5 - localStorage-Interface erweitert werden.
Die Bibliothek wird in lokal.js gespeichert.
Es ist eine Bibliothek lokal.js zu schreiben und zu testen.
Die Bibliothek soll die folgenden Funktonen enthalten:
del_all(); // loescht gesamten localStorage
set_item (key, val); // speichert value unter key
val = get_item (key); // holt Wert von key-Element
del_item(key); // loescht key-Element
set_array(arr_name, arr);// speichert zu arr_name den arr von strings
arr = get_array(arr_name); // holt zu arr_name den arr von strings
del_array(arr_name); // loescht zu arr_name den arr
push_item(arr_name,str); // speichert str als top-string von arr_name
str = pop_item(arr_name); // holt den top-string von arr_name
save_form_items(); // speichert alle Formularwerte in localStorage
load_form_items(); // laed alle Formularwerte aus localStorage
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.
HTML5-Muster, Policy-Muster, CSS-Muster mit Hilfe von set_string('TA0',unescape(get_data('myMusterName')))
Die Transformationsfunktionen ta1=escape(ta0), ta1=unescape(ta0), ta1=encodeURI(ta0), ta1=unencodeURI(ta0), ta1=encodeURIComponent(ta0), ta1=unencodeURIComponent(ta0)
Transformationsfunktionen für jedes Zeichen
zeichenweise ta1 := 'dez: &#' + s0.charCodeAt(i).toString(10); zeichenweise ta1 := 'hex: &#x' + s0.charCodeAt(i).toString(16); zeichenweise ta1 := 'unicode: \uxxxx der s0-Zeichen zeichenweise ta1 := 'oktal: '|ooo' der s0-Zeichen zeichenweise ta1 := 'base 32: 1..255 ergibt |1|2| ... |7v| der s0-Zeichen zeichenweise ta1 := hexhex-Folge der s0-Zeichen ta1(...char...) := s0 (...base32...) ta1(...hex...) := ta0 (...dez...) ta1(...bin...) := ta0 (...dez...) ta1(...dez...) := ta0 (...hex...) ta1(...dez...) := at0 (...bin...)
Hier ist eine Liste der Unicodeblöcke . Die Funktion build_unicode_html([i1,i2, i1,i2, ...]) und einige popup(build_unicode_html([i1,i2]))- Aufrufe für Unicodeblöcke befinden sich hier .
HTML5 sieht einen Farbwähler, wie z.B. <input type="color" id="color" value="" /> vor, der 2013 von wenigen Browsern unterstützt wird. Teste:
Es ist selbst ein Farbwähler für websichere Farben zu programmieren, der einen HTML-Quelltext erstellt, der als Vorschau präsentiert wird. Bei Mouse-over soll der Farbwert im Tip-Fensterchen als Hex-Zahl und als rgb( ) erscheinen. dif=1 erzeugt 4096 HTML-Farben. dif=3 erzeugt 216 websichere Farben.
// dif = 3 websichere farben
function farbwaehler(dif) { dif = dif|| 1;
var r, g, b, i, col, s = "", nl = "<br style='clear:all;' />",
txt = "<span style='cursor:pointer;font-family:monospace;" +
"float:left;width:16px;color:#fff;background:",
ntxt = txt + "#666'>BGCOL</span>",
temp = txt + "#BGCOL' title='TITLE'> </span>";
for (r = 0; r < 16; r += dif) { s += nl + " use mouse-over ...";
for (i = 0; i < 256; i += dif) { b = i % (dif*16); g = (i - b) / 16;
if (b === 0) { s += nl +
ntxt.replace("BGCOL", "#") +
ntxt.replace("BGCOL", r.toString(16)) +
ntxt.replace("BGCOL", g.toString(16)) +
ntxt.replace("BGCOL", b.toString(16));
}
col = r.toString(16) + g.toString(16) + b.toString(16);
s += temp.replace("BGCOL", col).replace("TITLE", '#' + col);
}
} return s;
}
Erklärungen in der Veranstaltung.
Es soll das Select-Tag verwendet werden. Siehe auch Navigation-Strukturen .
Funktion Farbwaehler(dif) für websichere Farben.
Die Funktionen get_string() und set_string() sollen die Grundlage einer selbst geschriebenen dom-Bibliothek bilden, d.h. anstelle der globalen Aufrufe get_string() und set_string() wird dann dom.get_string() und dom.set_string() verwendet.
Was ist zu machen? Näheres in der Veranstaltung ...
Wie können Blinde für Sehende Styles erstellen und CSS nutzen, obwohl diese weder Farben noch geometrische Kontue-Abstände sehen? Wie kann das Toolchen verbessert und ergänzt werden, damit blinde und sehende Designer einen Mehrwert aus diesem Toolchen ziehen können?
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr