Didaktik der Chemie / Universität Bayreuth

Stand: 27.07.14

2. JSmol in HTML einbinden

Darstellung von Molekülen mit Hilfe von JSmol

 

Für die Arbeit mit JSmol empfiehlt es sich mit einem so genannten WYSIWG Editor (what you see is what you get) wie beispielsweise MS Front Page zu arbeiten. Es kann aber auch jeder andere Editor verwendet werden.

 

  1. Zunächst  erstellt man eine neue Seite und wechselt auf die HTML-Ansicht. Diese liefert einen HTML-Kopfbereich, sowie einen leeren <body> Teil.


  2. Im Kopfbereich kann man nun die gewünschten Veränderungen wie Schlüsselwörter oder Autor ändern. Wichtig ist jedoch, dass man bei dem Eintrag "charset" auf das Format auf "utf-8" ändert, falls dies nicht schon von Anfang an eingestellt ist.
    Dies ist notwendig, da JSmol stark auf die Programmiersprache HTML5 angewiesen ist, wodurch es ohne Java Runtime Environment auskommt.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="Keywords" content="3D-Moleküle, Jmol, Orbitale, MEP, Potentialoberfläche, Elektronen, Gymnasium">
<meta name="Author" content="Name des Autors">
<title>JSmol</title>
</head>
 

 

Abb.1: Beispiel für einen Kopfbereich der HTML-Seite

 

  1. Als Nächstes muss die JSmol Programmbibliothek initialisiert werden. Auch dies geschieht im Kopfbereich der HTML-Seite mit folgenden Befehlen, wobei "src" den relativen Pfad zu den jeweiligen Dateien  angibt:

<script type="text/javascript"src="jsmol/JSmol.min.js"> </script>

<script type="text/javascript"src="jsmol/JSmoljQuery.js"> </script>

<script type="text/javascript" src="jsmol/JSmolCore.js"> </script>

<script type="text/javascript"src="jsmol/JSmolApplet.js"> </script>

<script type="text/javascript" src="jsmol/JSmolApi.js"> </script>

<script type="text/javascript"src="jsmol/j2s/j2sjmol.js"> </script>

<script type="text/javascript" src="jsmol/JSmol.js"> </script>

  1. Das Einbinden des JSmol Objektes erfolgt dann im "Body" der HTML-Seite und besteht aus zwei Teilen. Dabei wird es zunächst mit folgendem Befehl erstellt:

<script type="text/javascript">

Jmol.getApplet("applet1", JSmol1)

</script>

Die Zusätze "applet1" und JSmol1 sind frei wählbar und weisen dem Objekt eine eindeutige Identifizierung zu. Der "applet1" Teil ermöglicht das gezielte Ansteuern über Schaltflächen, falls sich mehrere Applets auf einer Seite befinden.

Mit Jsmol1 identifiziert man dieses Applet für den zweiten Teil der Einbindung. Damit das Applet korrekt dargestellt werden kann, müssen vorher noch einige Variablen (unter anderem Größe, Hintergrundfarbe und Pfade für benötigte Dateien) angegeben werden.

Der Befehl muss VOR dem  Script im "Body" stehen, der das Applet generiert und lautet:

<script type="text/javascript">
var JSmol1 = {
color: "#000000",
width: 300,
height: 300,
disableJ2SLoadMonitor:false,
disableInitialConsole:false,

serverURL: "jsmol/php/jsmol.php ",
use: "HTML5",
j2sPath: "jsmol/j2s",
//jarPath: "java",
console: "applet1_infodiv",
}
</script>

Die Variable JSmol1 bewirkt, dass sich die Parameter auch auf den richtigen "Jmol.getApplet"  Befehl beziehen. Möchte man beispielsweise ein weiteres Applet einfügen, müssen diese beiden Scripte nochmals in die HTML-Seite geschrieben werden, jedoch mit verschiedenen Variablen (z.B. JSmol2 und applet2). Auf der Beispielseite, die mit dem Link weiter unten aufgerufen werden kann, sind zwei Applets eingebunden, um die eben genannte Möglichkeit zwei Applets einzubinden, zu verdeutlichen.

Mit color: "#000000", wird ein schwarzer Hintergrund generiert. Die Farbangabe erfolgt im Hexadezimalsystem und kann beliebig variiert werden.

Height und width geben die Höhe und Breite in Pixeln an. Diese können ebenfalls nach den entsprechenden Erfordernissen variiert werden.

Gegebenenfalls müssen die Pfadangaben  entsprechend der vorliegenden Verzeichnisstruktur ebenfalls angepasst werden.

  1. Mit Hilfe dieser Befehle hat man nun eine HTML-Seite erstellt, die ein JSmol Applet enthält. Dies hat einen schwarzen Hintergrund, aber noch keine Moleküldatei geladen. Um gleich zu Beginn eine Datei anzeigen zu lassen, muss der oben stehende Befehl durch ein Script mit einem Ladebefehl und einem Dateipfad zur entsprechenden Datei erweitert werden.

var applet1 = {
color: "#FFFFFF",
width: 500,
height: 500,
disableJ2SLoadMonitor:false,
disableInitialConsole:false,

serverURL: "jsmol/php/jsmol.php ",
use: "HTML5",
j2sPath: "jsmol/j2s",
//jarPath: "java",
console: "jmolApplet0_infodiv",
script : "load molecules/ch4.mol"
}

Anmerkung: Die benötigten Moleküldateien können aus der Moleküldatenbank der Chemiedidaktik der Uni Bayreuth heruntergeladen werden. Eine detaillierte Auflistung der Parameter die für die Variable einstellbar sind, findet sich im JSmol Wiki.

Der Seitenquelltext lässt sich beispielsweise unter Mozilla Firefox aufrufen, indem man mit der rechten Maustaste auf eine freie Stelle des Fensters klickt und dann den Menüeintrag "Seitenquelltext anzeigen" auswählt.

Wurden die Befehle korrekt eingegeben, dann sollte es wie in folgendem Beispiel aussehen.

 

Zurück / Vorwärts

E-Mail: Walter.Wagner ät uni-bayreuth.de, Stand: 27.07.14