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. Webseiten bestehen wesentlich aus Zeichen. Sinn ( Pragmatik ) entsteht im Interpretieren.
Das zu erstellende Toolchen soll "String-Manipulationen" genannt werden und möglichst praxisnah der vielfältigen Nutzung von Zeichen und Strings ( ECMAScript-Stringfunktionen ) dienen. Bei der Webprogrammierung sind String-Manipulationen allgegenwärtig ( Codierung von internationalen Schriftzeichen, Stringmanipulationen 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, die der einfachen klaren Bedienbarkeit und der Entwickler-Teamfähigkeit 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 vorherige Toolchen. Dieses wird systematisch erweitert ( siehe z.B. Grundtoolchen ).
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>
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 soll das Select-Tag verwendet werden. Siehe auch Navigation-Strukturen .
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. Siehe z.B. daten.js .
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
Hier ist ein Anfang: local.js
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 ...
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr