JavaScript Markup Language v1.0
by pile o' nades (pile_o_nades@yahoo.com)

Die JavaScript Markup Language ("JSML") wird unter der GNU General Public License vertrieben.


JSML ist eine "Ergänzungssprache" zu HTML. Sie erlaubt Ihnen, eigene Tags zu erstellen, die wie HTML- Tags arbeiten.
Um einen Tag zu erstellen, müssen Sie eine Funktion definieren, die den JSML- Tag durch einen oder mehrere HTML- Tags ersetzt. Sie können auch Text zwischen Tags manipulieren.

JSML bringt in der Urversion lediglich drei Tags mit, vielleicht erweitern wir hier die Tagauswahl noch etwas. Jeder, der sich etwas damit auseinandersetzen möchte, ist eingeladen, uns seine neuesten Tags zuzusenden... ;-)

JSML verwendet indexOf() und substring(), um den Quellcode eines Dokuments zu manipulieren, zudem wird anstelle von document.write() innerHTML verwendet, um den neuen Code in das Dokument zu schreiben.

Manche Tags setzen möglicherweise gleichlautende Attributnamen, aus diesem Grund werden Attributnamen in tagspezifischen Objekten gehalten.

Das Script besteht aus zwei Dateien. JSML.js enthält das eigentliche Script, JSMLtags.js enthält die Beschreibungen der Tags.

Das Script JSML.js:

// Die Klammern, die JSML zur Kennzeichnung von Tags einsetzt.
var openingBracket="[";
var closingBracket="]";

var oldSourceCode; // alter Quellcode des Dokuments
var newSourceCode; // neuer Quellcode des Dokuments (JSML-ized)
var tagStart; // Integer Wert der Position der ersten öffnenden Klammer im Dokument
var tagEnd; // Integer Wert der Position der ersten schliessenden Klammer im Dokument
var tag; // Der Text zwischen TagStart und TagEnde
var attributes; // Array der Attribute des Tags
var tagName; // Name des Tags
var isClosingTag; // Wert, ob einleitender oder abschliessender Tag

window.onload = initJSML;


// Initialisierungs- Funktion
function initJSML(){
Hier werden alle Scripts aus dem Dokument gelöscht. Keine Angst, die Scripte werden weiterhin funktionieren, da sie bereits in den Arbeitsspeicher geladen wurden. Dadurch werden Arrays (die bekanntlicherweise ebenfalls rechteckige Klammern einsetzen) nicht verändert, was zu Fehlern führen würde und die Scripte werden nicht restarted, was ebenfalls in Problemen resultieren könnte.


var scripts = document.getElementsByTagName("script");
for(i=0;i<scripts.length;i++){
scripts[i].text="";
}


// Hier wird der Quellcode des Dokuments ausgelesen.
oldSourceCode = document.body.innerHTML;
newSourceCode = "";
JSML_MARKUP();
}

// Die Funktion, die die JSML Tags prozessiert
function JSML_MARKUP(){
// Erkennung der Position der ersten öffnenden und schliessenden Klammer
tagStart = oldSourceCode.indexOf(openingBracket);
tagEnd = oldSourceCode.indexOf(closingBracket,tagStart+1);

// Erkennung des Textes zwischen öffnender und schliessender Klammer
tag = oldSourceCode.substring(tagStart+1,tagEnd);

// Splitten des Tags in ein Array der Attribute
attributes = tag.split(" ");

// Erkennung des Tagnamens und Umwandlung in Grossbuchstaben
tagName = attributes[0].toUpperCase();

// Setzen der Attribute als Variablen
for(i=1;i<attributes.length;i++){
Function("obj_"+tagName+"."+attributes[i])();
}

// Falls abschliessender Tag, wird der "/" vom Tagnamen entfernt und isClosingTag auf true gesetzt
if(tagName.indexOf("/") == 0){
tagName = tagName.substring(1,tagName.length);
isClosingTag = true;
}
else isClosingTag = false;

// Falls keine weiteren Tags mehr gefunden werden, wird der neue Quelltext (newSourceCode) in die Seite geschrieben
if(tagStart == -1){
newSourceCode+=oldSourceCode;
document.body.innerHTML=newSourceCode;
}else{
Function(tagName+"();REVISE_CODE();")();
}
}

// Funktion, um XHTML äquivalente Tags in newSourceCode hinzuzufügen
function REVISE_CODE(){
newSourceCode += oldSourceCode.substring(0,tagStart)+tag;
oldSourceCode = oldSourceCode.substring(tagEnd+1,oldSourceCode.length);
JSML_MARKUP();
}

Die Datei JSMLtags.js

Wie weiter oben bereits erwähnt, werden in der Originalversion von JSML lediglich drei Tags mitgeliefert. Das reicht aber grundsätzlich aus, um das Verständnis für den Aufbau von JSML und die Basis für eigene Tags zu vermitteln.

// Anchor- Tag, der das href Attribut als Linktext anzeigt:
var obj_A = {
href:""
}
function A(){
tag="<"+tag+">"+obj_A.href+"</a>";
obj_A.href="";
}

// Break- Tag (Zeilenumbruch), welcher mehrere Zeilen umspannt.
var obj_BR = {
lines:1
}
function BR(){
tag="";
for(i=0;i<obj_BR.lines;i++){tag+="\n<br />"}
obj_BR.lines=1;
}

// Absatz- Tag mit Einrückfunktion
var obj_P = {
indent:3
}
function P(){
if(!isClosingTag){
BR();
for(i=0;i<obj_P.indent;i++){
tag+=" ";
}
}
else{
obj_BR.lines=2;
BR();
}
}

Hier finden Sie eine Beispielseite, welche die hier vorgestellten Tags einsetzt.