Javascript ist Toll!

Online Molmassen Rechner

Ein kleines Skript aus der Welt der Chemie.

Der Molmassenrechner brechnet die Molmasse einer Verbindung. Dazu parst das Skript die eingegebene Zeichenkette und versucht die Zusammensetzung der Verbindung zu ermitteln. Daraus läßt sich dann die Molmasse(molare Masse) der Verbindung errechnen.

Das Skript kann mit einem geklammerten Ausdruck und Kristallwasserangaben umgehen. Eine Verbindung mit mehreren Klammern, kann in dieser Version noch nicht berechnet werden. Das Skript rechnet aber einfacher und exakter, als die auf Wikipedia verlinkten Molmasse Rechner.

BB Code Buttons

Ich hatte in der Vergangenheit ja schon einmal ein Skript vorgestellt, mit dessen Hilfe es möglich ist BB-Code in eine Textarea einzufügen. Um es einsetzen zu können, werden entsprechende Buttons benötigt, die z.b. über einer Textarea angezeigt werden und mit denen dann der Text entsprechend formatiert wird. Dazu habe ich das Skript erweitert und verbessert, sodass sich automatisch und leicht konfigurierbar, über eine Textarea, JS Buttons einfügen lassen.

Ich nutze den Code als Basis für Greasemonkey-Skripte, für einige Foren, die keine entsprechenden Buttons anbieten (z.b. das Forum auf Perlunity)

Das Skript ist relativ kompakt (knapp über 100 Zeilen mit Kommentaren) und funktioniert bei meinen Tests unter Windows XP, in allen gängigen Browser.

Benchmarks mit Javascript

Oft entfachen sich hitzige Diskussionen in Foren darüber, welche Funktion für einen Zweck geeigneter und/oder schneller ist. Dann muss ein Benchmark her, mit dem die Geschwindigkeit der unterschiedlichen Funktionen verglichen werden kann. Als langjähriger Perl Programmierer benutze ich häufig das Modul Benchmark mit dem sich das relativ leicht realisieren läßt. Ich habe ein Javascript geschrieben, das ähnlich arbeitet und hier vorstellen möchte.

LED Laufschrift mit Javascript

Im selfhtml Forum hatte jemand nach einer LED Anzeige mit JS gefragt. Da meine Suche im Netz nur entweder Flash Beispiele oder untaugliche JS Skripte erbrachte, habe ich ein kleines LED Anzeige Skript geschrieben.

Rubberband 2

Ich habe das Rubberband überarbeitet und hier ein Beispiel, wie aus einem vorhandenen Bild damit ein Ausschnitt markiert werden kann. Das Rubber-Objekt ist nach Außen weitestgehend gleich geblieben, intern sind aber neue Dinge hinzugekommen. Eine Funktion createBox(), erzeugt das DIV das für das Rubberband gebraucht wird, mit der entsprechenden Funktionalität und die Klasse Rect() bietet Methoden an, um Berechnungen mit dem Rechteck durch zu führen

aufgleitende Javascript Popups

Das folgende Skript öffnet ein HTML Element mit einer fliessenden Bewegung. Es gleitet auf, anstatt sofort sichtbar zu sein. Dies wird durch die CSS Eigenschaft clip() erreicht. Diese Technik funktioniert nur, wenn das Element absolut positioniert ist

Javascript Rubberband

Beschreibung

Um mit der Maus Bereiche zu markieren wird ein sogenanntes Rubberband (dt. Gummiband) benutzt. Die Funktionsweise ist aus Grafikprogrammen bekannt oder auch dem Windows Desktop. Wenn die Maus mit gedrückter linken Maustaste bewegt wird, wird ein rechteckiger Kasten gebildet, der den Bereich der ausgewählt werden soll markiert.

Dazu habe ich diese kleine Skript geschrieben, dass einfach in eine Seite eingebunden werden kann. Mit Hilfe von Events kann das Verhalten gesteuert werden.

Zebratabellen mit Javascript

Und noch ein Tabellenskript.

Eine große Tabelle sieht schöner aus wenn die Tabellenzeilen eine abwechselnde Hintergrundfarbe bekommen. Das wird in Zukunft - irgendwann mal - mit CSS 3 möglich sein, im Moment kann das aber noch kein Browser.

Deshalb kann man sich behelfen - entweder, indem die Zeilen abwechselnd mit einer entsprechenden Klasse versehen werden oder, wenn man nicht den HTML Code aufblähen möchte, mit JS. Genau dazu habe ich dieses kleine Skript geschrieben, dass den entsprechend markierten Tabellen (wenn sie die Klasse zebra haben), den Zeilen abwechselnd die CSS-Klasse odd hinzufügt.

Sonderzeichen maskieren

Gerade gelesen auf Perun Weblog. Da dachte ich mir das geht doch auch mit JS.

[Nachtrag 20.1.] Die erste Version hat alle Sonderzeichen in &#{ASCII-Code}; umgewandelt, ich habe sie nun um eine Umwandlung in die HTML Entities erweitert.

Tabellen sortieren

Das Skript macht eine HTML Tabelle sortierbar. Die Spalten können durch einen Klick auf die Titelzeile sortiert werden. Dazu ist es nur nötig, der gewünschten Tabelle, die CSS-Klasse sortable zuzuweisen und den folgenden Javascript Code in die Seite einzufügen.

Klapptabelle mit Javascript

Ziel des Skriptes ist es, grosse Datentabellen übersichtlicher darzustellen. Eine Möglichkeit dazu ist z.b. Zeilen, die weitergehende Informationen zu einem Oberbegriff enthalten, mit einem Javascript zu verstecken und nur dann anzuzeigen, wenn der Benutzer auf ein entsprechendes Symbol klickt

Dazu werden die Tabellen mit der CSS Klasse class="klapptabelle"markiert. Jede Zeile die den Oberbegriff darstellt, wird mit class="main" markiert.
Das Skript durchsucht die entsprechend markierten Tabellen und blendet alle Zeilen aus die nicht das Attribut class="main" haben. Ausserdem fügt es automatisch ein Grafiksymbol in die die erste Zelle ein, die den Zustand der Zeilen anzeigt.

Javascript Combobox

eine Combobox kombiniert ein Eingabefeld mit einer Auswahliste, da es kein HTML Element für eine Combobox gibt, muss diese mit Javascript nachgestellt werden. Hier ist eine Möglichkeit [... weiterlesen]

Drag & Drop 2

Ich hatte ja schon ein einfaches Drag & Drop Skript hier vorgestellt, dass aber nicht allen Anforderung gerecht wird. Ich brauchte ein Skript, mit dem man Teile innerhalb eines Bereiches, Dragbar macht. Also das was man von normalen Fenstern kennt, das ganze Fenster läßt sich durch ziehen am Titel bewegen. Ausserdem gab es noch ein kleines Opera Problem, der beim Draggen den Text markierte. All das ist mit diesem Skript gelöst.

Formobserver

Mein neustes Werk, ist ein FormObserver. Also ein Formularbeobachter. Das Ziel dabei ist es, die Elemente eines Formulares zu beobachten und Änderungen signalisieren.
In letzter Zeit war ich gezwungen, einige Artikel über Java bzw. Java-Frameworks wie z.b. struts, zu lesen. Dabei hakte es bei mir mit dem Verständnis, des eventorientierten Ansatz von Java. Nachdem in einem Forum eine Frage zum prüfen von Formulareingaben mit JS gestellt wurde, kam mir die Idee einen Formular Event Observer zu bauen.

Grob nach dem Schema von Java: Observable. [... weiterlesen]

Drag & Drop m. Javascript

Ein einfaches Drag and Drop Beispiel.

strftime() in Javascript

Demonstration der Javascript Funktion strftime(). Dies ist eine Umsetzung der C-Funktion, mit deren Hilfe ein Datum formatiert werden kann. Hier eine online Dokumentation. Im Unterschied zu der PHP oder C Funktion erwartet meine JS Umsetzung, als Parameter keinen Timestamp, sondern ein JS-Date Objekt.

Grafik ziehen und verschieben

Eine Spielerei die ich mal für jemanden in einem Forum (Hier der Link zum Thread) gemacht habe. Weil's so toll aussieht mach ich's mal öffentlich. Wie das Skript eingesetzt werden kann, muss sich jeder selbst überlegen.

fixlayer

Mit CSS lassen sich Bereiche einfach fixieren. Die Angabe position:fixed sorgt dafür, dass der Layer an der Position fixiert bleibt, an der er gerade steht.

Das Problem mit fixed ist, dass es u.a. der IE noch nicht umsetzt, d.h. er ignoriert position:fixed. Deshalb entstand diese Javascript Funktion um einen Bereich zu fixieren. Ich habe das Skript Beispielhaft hier in die Seite eingebaut.

Mouseover Skript

Du suchst ein einfaches Mouseover Skript?
Eines:

• wo du kein Javascript können musst?
• wo du deinen HTML Code nicht bearbeiten musst?
• das sich den Zustand des angeklickten Buttons merkt?
• das sich auch einen Button beim drücken der Maustaste anzeigt?

Hier ist es!

Tooltip

Beschreibung

Tooltips sind die kleine gelben Kästchen, die angezeigt werden, wenn
der Mauszeiger über ein Elemente steht.
Am einfachsten lassen sich diese mit dem title Attribut umsetzen.
Jedes HTML Elemente läßt sich mit dieser Eigenschaft belegen:

[... weiterlesen]