ECMAScript-Übungsbeispiele 3 (Klausurvorbereitung, ohne Lösung)

Wie können existierende HTML-Seiten mit Hilfe von RegExp in eine "Pseudo PowerPoint Slide Show" gewandelt werden?

Es soll von (vorhandenen) "Standard-HTML"-Seiten ausgegangen werden. Die visuelle Seitenstruktur sei wesentlich durch die h1, h2, h3-Überschriften festgelegt. Eine Überschrift und der zugehörigen Text bilde eine Einheit. Es liege keine "kreuzende Überschneidung" von div-Tags vor.

Die Umwandlung des document.body-Strings der gegebenen HTML-Seite in einen "PowerPoint Slide Show"-HTML-String soll mit Hilfe von regulären Ausdrücken erfolgen. Hier ist ein Demo-Beispiel, das das Ergenis zeigt.

Einfach ausgedrückt wird jedes h-Tag zu einem a-Tag, das der Auswahl des zugehörigen Informationen dient. Alle a-Tags sollen durchnummeriert werden und oben auf dem Bildschirm stets sichtbar sein. Es ist jeweils nur ein h-Kontext (= "ein Slide") sichtbar.

Zum bequemen Vorgehen, Enwickeln und Testen werden die Quelltexte nach jedem Umwandlungsschritt zunächst in Textareas angezeigt:

 <form method="post" action="">
 <textarea id='TA1' rows='5' style='width:100%'></textarea>
 <textarea id='TA2' rows='5' style='width:100%'></textarea>
 <textarea id='TA3' rows='5' style='width:100%'></textarea>
 <textarea id='TA4' rows='5' style='width:100%'></textarea>
 </form>

 <div id="TEST_ID">
 <h2> Titel 0 </h2><p> Text zu 0 </p><!-- Kommentar -->
 <h2> Titel 1 </h2><p> Text zu 1 </p>
 <h3> Titel 2 </h3><p> Text zu 2 </p>
 </div>

(1) Code-Pattern-Gerüst

Zunächst wird das Grundmuster für ein gebräuchliches "Code-Pattern-Gerüst" eingerichtet.

 var ppps = (function (win) { // ppps erinnert an "PowerPoint Slide Show"
     var doc = win.document,
     s = '',      // s: pseudo globaler body.innerHTML-String 
     h_nr = 0,    // h_nr: zaehlt die h-tags 
     ID = '"NR',  // ID fuer h-Kontext, der dem h-Tags nachfolgt
     style = '';  // 

 return {
   // hierher kommen die zu entwickelnden Funktionen

 version:'000000'
 };} (this));

Die Test-Aufrufe der entwickelnden Funktionen kommen in window.onload = function() {...};

 window.onload = function() { 
   // Hierher kommen die Aufrufe nach dem Laden der Seite 
 };

(2) Hole gegebenen Quelltext

Für die Transformation des document.body-String in einen "PowerPoint Slide Show" wird stets die private Variable s verwendet. Das einfache test_obj (siehe id="TEST_ID") ist an Anfang sinnvoll (wegen der besseren Übersichtlichkeit). Bitte ergänzen:

 get_body_str: function (test_obj) {
   s = test_obj.innerHTML || document.body.innerHTML;

   return ____________;
 },

(3) Zwischenergebnisse anzeigen

Nach der Funktionsausführung von
ppps.get_body_str(document.getElementById("TEST_ID")).ta(1);
soll durch .ta(1) die private Variable s (HTML-Source-Code) in der Textarea "TA1" angezeigt werden. Bitte ergänzen:

 ta: function (nr) { // zeige s in textarea an:

   doc.getElementById(_________ + nr).value = s;

   return ___________;
 },

Ein Aufruf von ppps.get_body_str(document.getElementById("TEST_ID")).ta(1); zeigt den aktuellen Quelltext von "TEST_ID" in TA1 an.

(4) Lösche alle HTML-Kommentare

Vorhanden HTML-Kommentare werden nicht mehr benötigt, können stören und sollen aus dem document.body-Quelltext (HTML-Source-Code) gelöscht werden. Bitte ergänzen:

del_kommentare: function () {// loesche alle HTML-Kommentare

  s = s.replace(___________________________________,  '');

  return this;
},

(5) Baue div-wrapper

Die gegebene Seite habe eine visuelle Seitenstruktur, bei der nach jedem h-Tag der zugehörige Informationskontext folgt. Ein div-Tag ( "wrapper_div") soll das h-Tag und den zugehörigen Informationskontext (beim letzten h-Tag bis dokument-Ende) eingerahmen.

Jedes "wrapper_div" wird mit class-, style-, id-Attribut versehen.

Jedes "wrapper_div" sieht etwa so aus:
<class="ppps_div" style='display:block/none;' id="ID ...

Achtung!
Bei regulären Ausdrücken kann mit $& links und recht vom (gesamten) Suchausdruck pre- und post-Text gemäß pre$&post eingefügt werden. Bitte ergänzen.

div_wrapper: function () {
  s += ___________________;  // ergänze am body-ende ein schliessendes div

  // baue wrapper_div
  // (siehe Wirkung von $&)
  s = s.replace(/<h[1-6]_________________________________________<\/\1>/g,
     '</div>\n<div class="ppps_div" style="display:none;" id=' + ID + '>\n$&');

  // loesche den body-anfang bis einschließlich dem ersten <\/div>

  s = s.replace(/______________________________/g, '');
  return this;
},

Ein Aufruf von ppps.get_body_str(document.getElementById("TEST_ID")).ta(1).del_kommentare().div_wrapper().ta(2) ergibt in TA2 etwa aus:

<div class="ppps_div" style="display:none;" id = "NR>
<h2> Titel 0 </h2><p> Text zu 0 </p>
</div>
<div class="ppps_div" style="display:none;" id = "NR>
<h2> Titel 1 </h2><p> Text zu 1 </p>
</div>
<div class="ppps_div" style="display:none;" id = "NR>
<h3> Titel 2 </h3><p> Text zu 2 </p>
</div>

(6) Eindeutige wrapper_div's

Für die Auswahl eines "wrapper_div" werden eindeutige "wrapper_div"-Identifizierungen (id="ID0", id="ID1", id="ID2", ...) gebraucht. Hierzu kann die private Variable h_nr verwendet werden. h_nr wird in Closure hochgezählt. Bitte ergänzen.

numeriere_ID: function () {
  h_nr = 0;
  s = s.replace(/__________________________/g, function (a, b) {

    a = _____________________________________;

    h_nr += 1; 

    return ___________;
  });
  return this;
},

(7) a-Tags aus h-Tags extrahieren

Ein gefundener Suchausdruck enthält gespeicherte Teil-Suchausdrücke, die an den runden Klammern erkennbar sind. Mit diesen Teil-Suchausdrücken b, c, d, e, f, g, h für ein h-Tag kann das neue a-Tag zusammen gesetzt werden, etwa

'<a class="ppps_a" title="' + _______________ + 

  '" href="javascript:ppps.show_slide(\'' ______________ '\')">'

In der Closure wird der a-Tag-String in r gepush't. Die Funktion function (a, b, c, d, e, f, g, h) gibt einfach den ungeänderten Gesamt-find-String a zurück.

Mit r.join('\n ') können alle Array-Elemente zu einen String verbunden werden, der dann im ppps_top-div an den Anfang des neu erstellten document.body-Strings kommen.

h_tags_to_a: function () {
  var pre, r = []; // r-elemente fuer innerHTML-strings der h-tags, die zu a-tags werden
  //                   b              c       d     e            f           g         h
  s = s.replace(/(<div [\s\S]*?)(NR)(\d+)([\s\S]*?)(<h[1-6][^>]*>)([\s\S]*?)(<\/h\d>)/g,
  function (a, b, c, d, e, f, g, h) {


    ___________________________________________________________________________________________
    return a;
  });
  ppps_top = '<div class="ppps_top">Präsentation\n  ' + ____________________ + '\n</div>';
  s = unescape(style) + ppps_top + s;
  return this;
},

Der folgende Aufruf sollte (im Erfolgsfall) gewünschte Ausgaben ergeben...

ppps.get_body_str(document.getElementById("TEST_ID")).ta(1)
    .del_kommentare()
    .div_wrapper().ta(2)
    .numeriere_ID().ta(3)
    .h_tags_to_a().ta(4);

(8) Ergänzung ( globale show_slide-Funktion )

Anstelle der Verwendung ppps.show_slide(id) bei einem a-Tag-Aufruf kann eine globale Funktion show_slide (id) verwendet werden. In diesem Fall wird dann für die Seiten der "pseudo PowerPoint Slide Show" kein ppps-Objekt mehr benötigt.

 function show_slide (id) { var i=0;
     while(document.getElementById('NR'+i)) {  
       document.getElementById('NR'+i).style.display='none'; 
       i += 1;
    } document.getElementById(id).style.display='block';
  }

Wie kann diese Funktion (im script-Tag) vor den Quelltext eingefügt werden?

Antwort: _______________________________________________________


         _______________________________________________________


         _______________________________________________________

(8) Ergänzungen ( Style-escape für Präsentation )

Wie kann ein geeigneter Präsentationsstyle vor den Quelltext eingefügt werden?

Antwort: _______________________________________________________


         _______________________________________________________


         _______________________________________________________