ECMAScript-Praktikum 2011: Problemstellung 2
(Show/Hide, Code-Schnipsel, Template)
Diese praktische Aufgabe zur Veranstaltung beinhaltet die Erstellung eines ECMAScript-Tool2,
das 2 Textareas (d.h. 2 Editoren) nutzt und mit allen "gängigen" Browsern funktionieren soll.
Der Editor1 dient dem Schreiben und Modifizieren von Quellcode, Editor2 entspricht einer Zwischenablage.
Die Editoren sollen sichtbar/unsichtbar geschalten werden können.
Es sollen Code-Schnipsel erstellt und getestet werden,
die wesentliche "Pattern" aus einem der Gebiete
wie z.B. ECMAScript, SMILE, SVG, HTML5-Canvas, JSON, Silverlight, AJAX, XML-Muster, usw. abdecken.
Das gewählte Muster soll mit ECMAScript zusammenhängen und ggf. ECMAScript-Code enthalten.
Wie können umfangreiche Sammlungen extern bereitgestellt und bei Bedarf geladen werden?
Es soll eine Browser-Vorschau möglich sein.
Das zu erstellende Tool2 soll praxistauglich und gut verwendbar sein
und als Teil der eigenen Homepage eingestellt werden.
Viel Freude bei der Ausarbeitung!
- Wie ist der Tool-2-Aufbau?
Was soll das Tool-2 tun?
-
Tool-2 baut auf Tool-1 auf und kann
get_node: function (id)
,
get_string: function (id)
und
set_string: function (id, str)
verwenden.
Hinzu kommen nun die (zu schreibenden) Funktionen zu Steuerung der Sichtbarkeit:
show: function (id)
,
is_visible: function (id)
,
toggle: function (id, that)
.
Günstig ist es, z.B. die jeweiligen Formulare (mit allen inneren Elementen)
sichtbar/unsichtbar zu stellen.
Hinzu kommt eine (neu zu schreibenden) Funktion
popup: function (str, url, o)
,
die den Editor-String als Browservorschau anzeigen kann.
- Hinweis Namespace-Module-Pattern
Objektorientiert oder was?
-
Es soll ein Objekt-Pattern tool2
mit private- und public-Bereich verwendet werden
(jeweils für Daten und Funktionen, siehe
Namespaces).
- Hinweis Sichtbarkeitsumschaltung
Wie wird show/hide umgeschalten?
-
Das folgende Beispiel soll mit einem a-Tag und tool2.toggle('DIV1',this)
die Sichtbarkeit eines DIV1-Tags umschalten, hiebei entspricht bei den Funktionsparametern
this dem a-Tag-Objekt.
<a href="javascript:void(0)"
onclick="tool2.toggle('DIV1',this);return false;">
[+]
show/hide DIV1
</a>
<div id="DIV1" style="display:none;
background: #fee;">
DIV1 (am Anfang verborgen)
</div>
Das folgende Beispiel soll mit einem select-Tag und tool2.toggle('DIV1','SEL1')
die Sichtbarkeit eines DIV1-Tags umschalten, hiebei entspricht der String 'SEL1' dem id des Select-Tags.
<option value="tool2.toggle('DIV1','SEL1');">
[+]
show/hide DIV1
</option>
<div id="DIV1" style="display:none;
background: #fee;">
DIV1 (am Anfang verborgen)
</div>
Code Snippet: Show/Hide id-Element mit [+]/[-] a-Tag
- var tool2 = (function (win) { // privat
- var doc = win.document, flags, hwin,
- max_height = 660 - 200, ed1_height = 330, ed2_height = 130,
-
- o1 = { re: /\[\−\]/, repl: "[+]" },
- o2 = { re: /\[\+\]/, repl: "[−]" },
- o3 = { re: /⨉/, repl: "⌻" },
- o4 = { re: /⌻/, repl: "⨉" };
-
- return { // public
-
- show: function (id) {
- doc.getElementById(id).style.display = "block";
- },
- hide: function (id) {
- doc.getElementById(id).style.display = "none";
- },
- is_visible: function (id) {
- return doc.getElementById(id).style.display.toLowerCase() === "block";
- },
-
- toggle: function (id, that) {
- var i, s;
- if (typeof that === 'string') { // falls select-Tag
- that = doc.getElementById(that);
- that = that.options[that.selectedIndex];
- }
- s = that.innerHTML;
- if (tool2.is_visible(id)) {
- that.innerHTML = s.replace(o1.re, o1.repl);
- that.innerHTML = s.replace(o3.re, o3.repl); tool2.hide(id);
- } else {
- that.innerHTML = s.replace(o2.re, o2.repl);
- that.innerHTML = s.replace(o4.re, o4.repl); tool2.show(id);
- }
- },
-
- popup: function (str, url, o) { //aufruf: .popup(str) oder .popup(null,url)
- url = url || null; o = o || { top: 0, left: 150, width: 800, height: 600 };
- // popup_params = "directories=yes,location=yes,menubar=yes,toolbar=yes,resizable=yes,scrollbars=yes,status=yes,",
- flags = "resizable=yes,scrollbars=yes,top=" + o.top + ",left=" + o.left + ",width=" + o.width + ",height=" + o.height;
- if (hwin && !hwin.closed) { hwin.close(); } hwin = null;
- if (url) {
- hwin = win.open(url, "popup", flags);
- } else if (typeof str === 'undefined') {
- return;
- } else {
- hwin = win.open("", "popup", flags);
- hwin.document.write(str);
- }
- if (hwin.opener) { hwin.opener = self; }
- if (hwin.focus) { hwin.focus(); }
- hwin.document.close();
- },
-
- get_node: function (id) {
- var o;
- if (typeof id === 'string') { o = doc.getElementById(id); }
- if (!!(o && o.nodeType !== 1)) { win.alert('ERR: get_node(' + id + '???)'); }
- return o;
- },
-
- get_string: function (id) {
- var o = tool2.get_node(id), tg = o.tagName.toLowerCase();
- if (tg === 'input' || tg === 'textarea') { return o.value; } else { return o.innerHTML; }
- },
-
- set_string: function (id, str) {
- var o = tool2.get_node(id), tg = o.tagName.toLowerCase();
- if (tg === 'input' || tg === 'textarea') {
- o.value = str; o = tool2.get_node(id); o.setAttribute('value', o.value);
- } else {
- o.innerHTML = str;
- }
- },
-
- ende: 'ende'
- }; // ende return
DIV1 (am Anfang verborgen)
DIV2 (am Anfang sichtbar)
- Hinweis Tipparbeit
Ist das nicht zuviel Tippen?
-
Dieser
Anfang
ist noch fehlerbehaftet, zeigt den Aufbau für tool-2 und kann aber die Schreibarbeit reduzieren.
- Hinweis Ästetik
Kann das nicht besser ausschauen?
-
Ein geeigneter Style hilft weiter.
Hier ist ein
Anfang,
der noch fehlerbehaftet ist, aber den CSS-Aufbau zeigen kann und die Schreibarbeit reduziert.