Vielfach werden Informationen weltweit auf Zeichenketten abgebildet. Lesbarer Programmier-Code besteht aus Zeichenketten.
Einige Script-Hinweise:
Dokument-Strukturen
,
Schrift-Zeichen und xml
,
usability-accassibility
Einige Wikipedia-Weblinks:
Zeichenkette
,
Zeichenkodierung
,
UTF-8
.
Einige Wikipedia-Weblinks: Einführung in den
Unicode
Liste der Unicodeblöcke
.
Einige Beispiele:
Verschiedene Symbole
,
Pfeile
,
Pfeile-A
,
Pfeile-B
Johann Wolfgang von Goethe (aus: Wilhelm Meisters Wanderjahre ):
"Es ist nicht genug zu wissen - man muss auch anwenden.
Es ist nicht genug zu wollen - man muss auch tun."
Es wird ein eigenes, leicht erweiterbares, robustes Toolchen entwickelt und getestet. Das Toolchen erhält den Namen "Drag and Drop für Unicode-Blöcke". Das Toolchen soll weitere Eigenschaften haben, wie z.B.
Das Toolchen erhält den Namen "Drag and Drop für Unicode-Blöcke und Templates". Oft werden UTF-8-codierte Zeichen in einer Textarea verwendet. Das Toolchen Eigenschaften haben, wie z.B.
Das Zeichenketten-Toolchen ist für Web-Entwickler, kann Zeichenketten in unterschiedliche Darstellungen wandeln und als Template-Toolchen Code- und Text-Schnipsel zur Verfügung stellen.
Weltweit gibt es zahlreiche Sprachen und damit zahlreiche Unicode-Blöcke. Wie können Unicode-Blöcke ausgewählt werden? Wie können Unicode-Blöcke dargestellt, Zeichen ausgewählt und per Drag and Drop in den Schreibtext eingefügt werden? Hinweis: Siehe Mathematische-Zeichen .
Welche Kenntnisse werden für dieses Projekt benötigt? Gibt es gute Lehr-Hinweise und Code-Mustern? Hier einige Hinweise: a-Tags Formularzugriffe DOM-Zugriffe ( mit CSS-Selektoren ).
Johann Wolfgang von Goethe:
"Es ist nicht genug zu wissen - man muss auch anwenden.
Es ist nicht genug zu wollen - man muss auch tun."
Weltweit gibt es zahlreiche Sprachen und damit zahlreiche Unicode-Blöcke. Wie können Unicode-Blöcke ausgewählt werden? Wie können Zeichen aus Unicode-Blöcken ausgewählt werden und per Drag and Drop in den Schreibtext eingefügt werden? Hinweis: Siehe Mathematische-Zeichen .
Erklärungen in der Veranstaltung. Zum schnelleren Einstieg wurde ein (unfertiges, fehlerhaftes ) Lehr-Muster-Toolchen erstellt, das form-, textarea-, select- und a-Tag nutzt. Als Ausgangspunkt ist das unfertige, fehlerhafte Lehr-Muster-Toolchen geeignet.
Nachfolgend einige unfertigen, fehlerhaften Code-Schnipsel. Erklärungen in der Veranstaltung.
var win = window, doc = win.document, hwin = null, has_localStorage = 0, hwin = null, local_storage = {};
var my_test_obj = { a: "AA", fn: function () { return this.a; } };
// Funktionen für locale Speicherungen ( Daten, Strings, Objekte, usw.)
function get_loc_str(key) { if (has_localStorage) { return window.localStorage.getItem(key); } else { return local_storage[key]; } }
function set_loc_str(key, val) { if (has_localStorage) { window.localStorage.setItem(key, val); } else { local_storage[key] = val; } }
// Zahlreiche Multiline-Templates mit set_loc_str() speichern
// und verwenden gemäß var str = unescape( get_loc_str('HTML5 Muster') );
set_loc_str('HTML5 Muster', '%3C%21DOCTYPE%20html%3E%0A%3Chtml%20lang%3D%22de%22%3E%0A%3Chead%3E%0A%3Ctitle%3E%B7TITEL%20%3C/title%3E%0A%3Cmeta%20charset%3D%22UTF-8%22%20/%3E%0A%3Cmeta%20name%3D%22robots%22%20content%3D%22noindex%22%20/%3E%0A%3Cmeta%20name%3Dviewport%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1%22%3E%0A%3Clink%20rel%3D%22stylesheet%22%20href%3D%22../kern/frame-info.css%22%20/%3E%0A%3Cstyle%3E%20%20/*STYLE%20*/%20%3C/style%3E%0A%3Cscript%3E%20/*SCRIPT*/%20%3C/script%3E%0A%3C/head%3E%0A%3Cbody%3E%0A%0A%3Ch1%3E%B7%B7TITEL%20%3C/h1%3E%0A%0A%3Cp%20class%3D%22dir%22%3E%B7p-Tag%20%3C/p%3E%0A%0A%3Cul%3E%3Cli%3E%20ul-li-item%201%0A%3C/li%3E%3Cli%3E%20ul-li-item%202%0A%3C/li%3E%3Cli%3E%20ul-li-item%203%0A%3C/li%3E%3C/ul%3E%20%0A%0A%3Cp%3E%20Validiere%20Seite%20mit%20%20%0A%20%3Ca%20class%3D%22extern%22%20target%3D%22_blank%22%20href%3D%22http%3A//validator.w3.org/check%22%3E%20%0A%20%20validator.w3.org%0A%20%3C/a%3E%0A%3C/p%3E%0A%0A%0A%3C/body%3E%0A%3C/html%3E');
// Wichtigste DOM-Zugriffsfunktion:
function $(selector_str, parent_ele) { return (parent_ele || doc).querySelectorAll(selector_str); }
// Tag select onchange="do_sel_option(this)"
// soll die func von option[i] aufrufen:
function do_sel_option(sel) {
var idx = sel.selectedIndex,
opts = sel.options,
opt = opts[idx],
val = opt.value;
sel.style.cursor = 'pointer';
try { eval(val); } catch (e) { alert("ERR:" + e); }
sel.selectedIndex = 0;
}
// vorschau('#TA0')
// der Text-Content von textarea id=TA0 enthalte HTML-CSS-ECMAScript
// und wird als Browservorschau angezeigt
function vorschau(id) {
var str = $(id)[0].value,
flags = "toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=600,height=500,left=500,top=200";
if (hwin && !hwin.closed) { hwin.close(); } hwin = null;
hwin = win.open("", "vorschau", flags);
hwin.document.write(str);
}
// get_dom_str('#TA0')
function get_dom_str(id) {
var str = $(id)[0].value;
return str;
}
// set_dom_str('#TA0', str)
function set_dom_str(id, str) {
var el = $(id)[0], tn = el.tagName.toLowerCase();
if (tn === 'input' || tn === 'textarea') {
el.value = str;
} else {
el.innerHTML = str;
}
}
// weblink(href, target) WebLink per ECMAScript aufrufen
// bsp.: weblink("http://www.cilie.org/", "_extern")
// bsp.: weblink("http://www.cilie.org/", "FRAME_INFO")
function weblink(href, target) { // webseite anzeigen
win.open(href, target);
}
// var str = obj2str(obj)
// soll flaches obj in str wandeln ( obj debug ).
// bsp.: var str = obj2str( my_test_obj );
function obj2str(obj) {
var key, arr = [];
for (key in obj) {
if (obj.hasOwnProperty(key)) { arr.push(key + ":" + obj[key]); }
} return "{\n " + arr.join('\n ') + "\n}";
}
Erkärungen gibt es in der Veranstaltung.
Plagiate sind out!
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr