ECMAScript (Beispiele mit Strings)

Beispiel: Zufallszitate auf Hompage stellen

Wenn eine Sprüchesammlung vorliegt, so soll abhängig vom Datum mit Hilfe von ECMAScript ein Spruch ausgewählt und geeignet angezeigt werden.

Zufallszitate mit ECMAScript:

Die Klasse
zuf_zit()
definiert
die Member-
Funktionen
wie add_zitat
(titel,text)
und
show_zitat().

add_zitat
(titel, text)
fügt ein
weiteres
Zitat
in den
inneren
Array ein 
<script type="text/javascript">
  //       zuf_zit meint (Z)ufalls(Z)itate
  function zuf_zit() { 
    this.zuf_zit_arr = new Array();

    zuf_zit.prototype.add_zitat =
    function add_zitat(titel, text) {
      var len = this.zuf_zit_arr.length;
      this.zuf_zit_arr[len+0] = titel;
      this.zuf_zit_arr[len+1] = text;
    }
    zuf_zit.prototype.show_zitat =
    function show_zitat() {
      var sec = (new Date()).getSeconds();
      var len = this.zuf_zit_arr.length;
          len = Math.floor(len/2);
      var idx = (sec % len)*2;
      var titel = this.zuf_zit_arr[idx+0];
      var text  = this.zuf_zit_arr[idx+1];
      var s = "<a href=\"javascript:";
      s += "location.reload();\">weiter...</a>";
      s += "<p class=\"big\">";
      s += titel + "<br \/>";
      s += text  + "</p>";
      document.write(s);
    }

    zuf_zit = zuf_zit.length = this;
  } ////////////////////////////////////////////

  var sammlung = new zuf_zit();
  sammlung.add_zitat(
          "Kinderreim",
          "Ibbe dippe tap<br>"
         +"und du bist ab"
  ); 
  sammlung.add_zitat(
          "Buddha",
          "Es ist der Geist,<br>"
         +"der die Welt erschafft"
  ); 
  sammlung.add_zitat(
          "Unbekannt:",
          "Glück ist stets gegenwärtig <br>"
         +"und ohne Suchen und Finden"
  ); 

  sammlung.show_zitat();
</script>
Ausgabe:




Die Klasse zuf_zit() definiert die Member-Funktionen add_zitat(titel,text) und show_zitat()

add_zitat(titel, text) fügt ein weiteres Zitat in den inneren Array ein


Beispiel: Giutarren-Griffe (Dur/Moll-Giutarren-Akkorde)

Beim Lernen des Giutarre-Spieles werden Akkord-Griffe für Dur, Moll, vermindert, usw. gelernt. Diese Griffe sollen mit Hilfe von als js-Beispiel in einem Formular angezeigt werden.

Einführendes Beispiel
  ECMAScript -Code Ausgabe
Giutarre

Akkorde können ausgewählt und angezeigt werden. Die Funktion html_select("size='1' ") erstellt den HTML-Quelltext für eine Akkord-Auswahlbox. Die Funktion html_guitarre("class='grau1i' ") erstellt den HTML-Quelltext für eine Tabelle, die mithilfe von vielen
<input
   type='checkbox'
   onclick=''>
eine Giutarre mit den Bünden anzeigt. 
function html_select(se_style) {
  var s = "<form name=\'GIUTARRE_SELECT'\>";
  s+="\n<select name=\'GIUTARRE_CHORD\' ";
  s+= se_style + "\n onChange=\'guitarre_akkord";
  s+="(options[selectedIndex].value);\'> ";
  s+="\n<option value=\'(0,0,0,0,0,0)\'>LEER</option>";
  s+="\n<option value=\'(0,3,2,0,1,0)\'>c</option>";
  s+="\n<option value=\'(1,3,3,2,1,1)\'>f</option>";
  s+="\n<option value=\'(1,0,3,2,1,1)\'>f</option>";
  s+="\n<option value=\'(3,2,0,0,0,3)\'>g</option>";
  s+="\n</select>";
  //s+="\n<textarea rows='5' cols='35'"
  //s+=" name='TXT'></textarea>"
  s+="\n</form>"; return s;
}
function wrt_zeilen(n, td_style) { 
  var i, s="";
  for(i=0; i<6*n; i++) {
    if(i%6==0) s+="\n</td></tr>\n <tr>"; 
          else s+="\n</td>"; 
    s+="<td " + td_style + ">"
    s+="<input type=\'checkbox\' onclick=\'\'>";
  } return s;
}
function wrt_bund(td_style) { 
  var s= "\n</td></tr>"
  +"\n <tr><td " + td_style + ">&nbsp;E"
  +"\n</td><td " + td_style + ">&nbsp;a"
  +"\n</td><td " + td_style + ">&nbsp;d"
  +"\n</td><td " + td_style + ">&nbsp;g"
  +"\n</td><td " + td_style + ">&nbsp;h"
  +"\n</td><td " + td_style + ">&nbsp;e";
  s += wrt_zeilen(1, td_style); return s;
}
function html_guitarre(td_style) {
  var s = "\n<form name=\'GUITAR'\>";
  s += "\n<table border=\'1\' width=\'120\' ";
  s += " cellpadding=\'0\' cellspacing=\'0\'";
  s += "\n<tr><td " + td_style;
  s += " colspan=\'6\' align=\'center\'>Bund";
  s += wrt_bund(     td_style);    
  s += wrt_zeilen(8, "class='grau3'");
  s += "\n</td></tr></table>";
  s += "\n</form>";
  return s;
}
function guitarre_akkord(val) {
  var i, j, k, arr=null;
  var len = document.GUITAR.length;
  for (i=0; i < len; i++) {
    document.GUITAR[i].checked=false;
  }
  eval("arr=new Array"+val+";"); 
  for (j = 0; j < 6 ; j++) {  
    k = j + 6*parseInt(arr[j]);
    if(k<len)document.GUITAR[k].checked=true;
  }
} ///////////////////////////////////////////
  var str = html_select  ("size='1'");
     str += html_guitarre("class='grau1i'");
     document.write(str);
Bitte wählen:

Hier einige Giutarren-Akkorde 

<option value="(1,2,3,4,5,6)"> test</option>
<option value="(0,3,2,0,1,0)"> c</option>
<option value="(0,3,5,10,14,19)"> yyy </option>
<option value="(3,5,10,14,19)"> C </option>
<option value="(5,10,14,15,19)"> C6 </option>
<option value="(5,10,14,19,21)"> C7 </option>
<option value="(3,4,5,14,19)"> Cmaj7 </option>
<option value="(5,14,19,21,22)"> C9 </option>
<option value="(3,10,19,20)"> Csus4 </option>
<option value="(4,19,20,21)"> C7sus4</option>
<option value="(8,10,12,15)"> Cdim7 </option>
<option value="(19,28,32,33)"> Cm </option>
<option value="(19,21,28,32)"> Cm7 </option>
<option value="(2,15,17,22)"> D </option>
<option value="(1,2,4,15,17)"> D6 </option>
<option value="(2,10,15,17)"> D7 </option>
<option value="(1,2,15,16,17)"> Dmaj7 </option>
<option value="(26,31,33,34,35)"> D9 </option>
<option value="(1,2,15,22,23)"> Dsus4 </option>
<option value="(1,2,10,15,23)"> D7sus4</option>
<option value="(2,4,9,11)"> Ddim7 </option>
<option value="(2,11,15,22)"> Dm </option>
<option value="(1,2,10,11,15)"> Dm7 </option>
<option value="(20,25,27,28,29)"> Eb9 </option>
<option value="(0,4,5,9,13,14)"> E </option>
<option value="(0,2,4,5,9,13)"> E7 </option>
<option value="(0,2,9,13,17,22)"> E9 </option>
<option value="(0,2,5,9,13,16)"> E13 </option>
<option value="(0,3,4,5,13,14)"> Em </option>
<option value="(0,3,5,13,14,16)"> Em6 </option>
<option value="(0,3,5,13,14,22)"> Em7 </option>
<option value="(10,11,15,20)"> F </option>
<option value="(6,19)"> F5 </option>
<option value="(1,2,6,10,15)"> F6 </option>
<option value="(1,5,6,10,14,15)"> Fmaj7</option>
<option value="(6,9,10,11,19,20)"> Fm </option>
<option value="(6,8,9,10)"> Fm7 </option>
<option value="(12,16,17,21,25,26)"> F# </option>
<option value="(5,12,14,16,21)"> F#7 </option>
<option value="(7,9,12,14,16)"> F#9 </option>
<option value="(12,15,16,17,25,26)"> F#m </option>
<option value="(5,15,16,26)"> F#m7</option>
<option value="(2,3,4,13,18,23)"> G </option>
<option value="(14,18,22,27)"> G6 </option>
<option value="(2,3,4,11,13,18)"> G7 </option>
<option value="(18,22,26,27)"> Gmaj7 </option>
<option value="(4,15,18,20)"> G9 </option>
<option value="(14,15,22,23)"> G6/9</option>
<option value="(2,3,10,18,23)"> Gsus4 </option>
<option value="(3,10,18,20,23)"> G7sus4</option>
<option value="(3,7,14,16,18)"> Gdim7 </option>
<option value="(2,3,7,18,22)"> Gm </option>
<option value="(18,20,21,22)"> Gm7 </option>
<option value="(1,5,14,15,16)"> A </option>
<option value="(1,3,5,14,16)"> A7 </option>
<option value="(3,4,5,14,25,30)"> A9 </option>
<option value="(1,3,20,22,23)"> A13 </option>
<option value="(1,5,10,14,15)"> Am </option>
<option value="(0,1,10,14,15,17)"> Am6 </option>
<option value="(30,32,33,34)"> Am7 </option>
<option value="(7,20,21,22)"> Bb </option>
<option value="(13,26,27,28)"> B </option>
<option value="(4,8,13,15,17)"> B7 </option>
<option value="(8,13,15,16)"> B9 </option>
<option value="(13,22,26,27)"> Bm </option>
<option value="(2,4,9,13,17)"> Bm6 </option>
<option value="(2,4,13,15,17)"> Bm7</option>


Beispiel: Unterschiedliche Methoden um Zeilen-Nummern zu erzeugen
Wie können Zeilen-Nummern in mehrzeiligen String eingefügt werden?

Ein mehrzeiliger String enthält "\n" und soll nun an diesen Stellen zusätzlich Zeilen-Nummern erhalten. Ein solcher String kann z.B. aus einem Textarea-Tag kommen. Er soll mit aufsteigenden Zeilen-Nummeren versehen werden. Ein String aus dem Textarea-Tag enthält Zeilenumbrüche "\n". Wenn z.B. ein solcher String in einem eingebetteten Inline-Frame (iframe-Tag) angezeigt werden soll, so muß ersetzt werden: 

"\n" durch "<br />", 
"&" durch "&amp;",
"<" durch "&lt;",
">" durch "&gt;"

Nachfolgend 4 Möglichkeiten zur Erzeugung von Zeilen-Nummern: 

a) src.indexOf(find,abPos),
   src.substring(pos1,pos2)-Methode
b) src.split(" ")-Methode
c) </li><li>&-Methode
d) vielseitig: 
   do_regexpr_arr_paare(src, arr)


Beispiel mit Methode a: .indexOf(find,abPos), .substring(pos1,pos2)
(Editor-) Zeilen in html wandeln und mit aufsteigenden Zeilen-Nummeren versehen.
a) Verwendet wird zum Suchen eines Strings fStr in src: src.indexOf(fStr)
b) Verwendet wird zum Herausgreifen von Teilstrings: src.indexOf(fStr,abPos) Dann werden die Sub-Strings src.substring(pos1,pos2) zum Ausgabe-String zusammen-gesetzt.
String src

finde fStr:
src.indexOf(fStr)
src.indexOf(fStr,abPos)

hole Teilstring:
src.substring(pos1,pos2)

rStr
bedeutet
Replace-
String 
  var src = "h-line <hr />\n& hier 2.Z\n\nhier 4.Z\n";
//------
  var fStr = "&",     fLen = fStr.length;
  var rStr = "&amp;", rLen = rStr.length, pos = -rLen;
  while( (pos = src.indexOf(fStr, pos+rLen)) > -1) { 
          src = (src.substring(0,pos) + rStr
                +src.substring(pos+fLen, src.length)); 
  } 
//------
  fStr = "<";    fLen = fStr.length;
  rStr = "&lt;"; rLen = rStr.length; pos = -rLen;
  while( (pos = src.indexOf(fStr, pos+rLen)) > -1) { 
          src = (src.substring(0,pos) + rStr
                +src.substring(pos+fLen, src.length)); 
  } 
//------
  fStr = ">";    fLen = fStr.length;
  rStr = "&gt;"; rLen = rStr.length; pos = -rLen;
  while( (pos = src.indexOf(fStr, pos+rLen)) > -1) { 
          src = (src.substring(0,pos) + rStr
                +src.substring(pos+fLen, src.length)); 
  } 
//------
  fStr = "\n";     fLen = fStr.length;
  rStr = "<br />"; rLen = rStr.length; pos = -rLen; 

  var zStr="001", zNum = 1;      src = zStr + src;

  while( (pos=src.indexOf(fStr,pos+rLen+zStr.length))>-1)
  { zNum ++; // Zeilen-Nummer hochzählen
    if(zNum< 10) zStr = "00"+zNum; else
    if(zNum<100) zStr = "0" +zNum; else zStr = zNum;
        src = (src.substring(0,pos) + rStr + zStr
              +src.substring(pos+fLen, src.length)); 
  } 
  src = "Gewandelt:<br />" + src;
  document.write(src);


Beispiel: mit Methode b: .split(" ")
(Editor-) Zeilen werden in html gewandelt und mit aufsteigenden Zeilen-Nummeren versehen, indem der gegebene String src mit src.split("xyz") an den Trennstellen "xyz" aufgespalten wird. Die Teilstrings sind dann im Array arr. Der Array wird (mit Hinzufügungen) wieder zun Ausgabe-String zusammen-gesetzt.
Teile src an den
Trennstellen "xyz"
mit src.split("xyz")
und setze den arr
zusammen, wobei an den Trennstellen die Zeilen-Nummern eingefügt werden 
  var old = "<hr />\\n&amp; hier 2.Z\\n\\nZ 4\\n";
  var src = "h-line <hr />\n& hier 2.Z\n\nhier 4.Z\n";
  var i, arr;
  arr = new String(src).split("&"); src="";
  for(i=0; i < arr.length-1; i++) {
    src += arr[i].toString() + "&amp;";
  } src += arr[i].toString();
  arr = new String(src).split("<"); src="";
  for(i=0; i < arr.length-1; i++) {
    src += arr[i].toString() + "<";
  } src += arr[i].toString();
  
  arr = new String(src).split(">"); src="";
  for(i=0; i < arr.length-1; i++) {
    src += arr[i].toString() + ">";
  } src += arr[i].toString();
  
  arr = new String(src).split("\n"); src="";
  for(i=0; i < arr.length; i++) {
    src += "<span style='background:#000000;color:#ffffff;'>";
    src += "<br />" + (i+1) + ":";
    src += "</span> ";
    src += arr[i].toString();
  }
  document.write(src);


Beispiel: mit Methode c: </li><li>a:
(Editor-) Zeilen werden in html gewandelt und mit aufsteigenden Zeilen-Nummeren versehen, indem reguläre Ausdrücke src.replace(RegExpr,replStr) und eine Liste
<ol><li>h-line <hr />
</li><li>& hier 2.Z
...
</li></ol> verwendet werden.
Suche im String src
gemäss dem RegExpr
und ersetze mit
dem replStr:

src.replace
(RegExpr,replStr) 
  var src = "h-line <hr />\n& hier 2.Z\n\nhier 4.Z\n";
  src = new String(src).replace(/&/g,"&amp;");
  src = new String(src).replace(/</g,"&lt;");
  src = new String(src).replace(/>/g,"&gt;");
  src = new String(src).replace(/\n/g,"</li><li>");
  src = "<ol class='ol'><li>" + src + "</li></ol>";
  src = "Gewandelt:<br />" + src;
  document.write(src);


Beispiel: mit Methode d (vielseitig): do_regexpr_arr_paare(src, arr)

(Editor-) Zeilen werden in html gewandelt und mit aufsteigenden Zeilen-Nummeren versehen, wobei eine vielseitig einsetzbare Funktion do_regexpr_arr_paare(src, arr) die Arbeit verrichtet. Ist beiden Array-Paaren arr[i] ein String, d.h. typeof(arr[i])=="string"), so wird die replace(re,arr[i+1])-Methode verwendet. Ist beiden Array-Paaren arr[i] eine Zahl, d.h. typeof(arr[i])=="number", so wird an den Split-Stellen arr[i+1], ab der Anfangszahl arr[i] die nächsten Fundstellen fortlaufend "hochgezählt.

do_regexpr_arr_paare(src, arr) macht die Arbeit...
Suche im String src
gemäss dem RegExpr
und ersetze mit
dem replStr:

Auch hochzählen
ist mit
typeof(arr[i])
=="number"
möglich 
 function do_regexpr_arr_paare(src, arr) {
   if((!arr)||(arr.length<2)) 
      err_if(true,"do_regexpr_arr_paare(str,?arr?)");
   var i,j,re,len = 2*Math.floor(arr.length/2);
   var glob = arr[arr.length-1]; if(0==arr.length%2) glob = "g"; 
   for(i=0; i < len; i += 2) { //arr-Pärchen ersetzen
     if(typeof(arr[i])=="string") {
       // normal replace
       re  = new RegExp(arr[i],glob);
       src = new String(src).replace(re,arr[i+1]);
     } else if(typeof(arr[i])=="number") { 
       // count arr[i]++
       var aa = new String(src).split(arr[i+1]); 
       src = "";
       for(j=0; j < aa.length-1; j++) {
        src += aa[j].toString() + (j+arr[i]);
      } src += aa[j].toString();
    } else err_if(1,"do_regexpr_arr_paare(???"); 
  } return new String(src);
 }

 var old = "&lt;hr /&gt;\\n&amp; hier 2.Z\\n\\nZ 4\\n";
 var src = "h-line <hr />\n& hier 2.Z\n\nhier 4.Z\n";
 src = do_regexpr_arr_paare(src, 
     [ "&lt;","<",  "&gt;",">",  "&quot;","\"",  "&amp;","\&",
       "\&","&amp;", "<", "&lt;", ">","&gt;", "\"","&quot;", 
       "\\n","<br><o0O>:", 1,"<o0O>", "g"]);
 src = "Gegeben:  <br />" + old + "<br /><br />"
     + "Gewandelt:<br />" + src;
 document.write(src);




Beispiel: URL-Encode/Decode (escape())

Enthält var s = "...ABCD..."; die ASCII-Zeichen von 1 bis 255, so können codierte Zeichen mit Hilfe von escape(s) bzw. encodeURI(s) bzw. encodeURIComponent(s) ausgegeben werden:

ECMAScript-Funktionen escape(s) liefert:



Beispiel: URL-Encode/Decode (encodeURI())

Die encodeURI(s) liefert:

Nicht codiert werden 0 bis 9   A bis Z  a bis z  -  _  .  !  ~  *  '  (  )  ,  /  ?  :  @  &  =  +  $  Nachfolgend sind jene Zeichen blau markiert, die von escape(s) abweichen:



Beispiel: URL-Encode/Decode (encodeURIComponent())

ECMAScript-Funktionen encodeURIComponent(s) liefert:

Nicht codiert werden 0 bis 9   A bis Z  a bis z  -  _  .  !  ~  *  '  (  )  Nachfolgend sind jene Zeichen rot markiert, die von encodeURI abweichen. d.h. encodeURIComponent codiert zusätzlich zu encodeURI(s) auch die Zeichen ,  /  ?  :  @  &  =  +  $  :



Beispiel: Wie sieht die PHP-Funktion urlencode(s) in ECMAScript aus?

Wie sieht die PHP-Funktion urlencode(s) in ECMAScript aus?

Die PHP-Funktion string rawurlencode ( string $str ) entspricht der RFC 1738 (application/x-www-form-urlencoded)-Vorschrift. Um z.B. mit ECMAScript einem AJAX-Aufruf eine GET-Adresse zu übergeben (z.B. "my.php"+"?country=" + url_encode(nam1) + "&postcode=" + url_encode(name2), wird die PHP-Funktion url_encode() gebraucht Hier ist die zugehörige ECMAScript-Funktion: 

function url_decode(s){
  s = s.replace(/\+/g," ");
  return unescape(s);
}

function url_encode(s){
  s = encodeURIComponent(s);
  return s.replace(/~/g,'%7E').replace(/%20/g,'+');
}