Javascript ist Toll!

6. Februar 2013 - 14:08

Javascript LED Display Textscroller

Letztens gab es in den Kommentaren des älteren Artikels LED Laufschrift eine längere, anregende Diskussion mit dem Besucher 'Jarbas'. Neben einigen Vorschlägen zur Verbesserung der technischen Umsetzung, äußerte er auch den Wunsch einen kompletten Zeichensatz in dem LED Panel darstellen zu können. Da ich keine gosse Lust hatte an dem Skript viel zu machen, verwies ich nur darauf wie das umgesetzt ist und dass ich eben keine Lust habe komplett alle Zeichen in eine Bitmap zu konvertieren. Auch wenn es mit dem LED Chareditor im Prinzip relativ einfach ginge. Daraufhin erstellte der Besucher nahezu den kompletten Bitmap Zeichensatz, mit den gängigen Sonderzeichen und präsentierte ihn auf einer jsbin Seite. Da konnte ich nicht untätig bleiben. Merkte aber schnell, das die Änderungen einen etwas größeren Umbau des Skripts bedeuteten. Daher jetzt ein neuer Artikel zum überarbeiteten LED Display Skript, das es nun ermöglicht (fast) alle Zeichen darzustellen. [... weiterlesen]

22. Juni 2012 - 11:13

Tween(2)

Die Technik um mit Javascript eine Bewegung zu animieren hatte ich in einem älteren Artikel bereits beschrieben und kündigte dort eine Fortsetzung an. Doch das Skript, was ich dort verwendet habe, hat sich im Umgang als etwas sperrig erwiesen, daher habe ich es nun komplett neu geschrieben.

Die neue Tween-Klasse kann nun deutlich mehr.
Mit ihr ist es möglich mehrere Elemente gleichzeitig oder auch mehrere Animationen parallel oder hintereinader zu benutzen. Der Animationsablauf läßt sich mit Events steuern. Dazu habe ich in das Skript eine kleine Event Klasse integriert.

Und das Tween Objekt läßt sich auch als Basisklasse für eigene Tweenobjekte benutzen. Es ist aber nicht auf Geschwindigkeit optimiert, trotzdem ist die Animationsgeschwindigkeit (gefühlt) ganz passabel.

[12.10.2012] Das Skript wurde mittlerweile mehrfach überarbeitet und ist dadurch was Funktionalität und Geschwindigkeit angeht deutlich besser geworden.

[... weiterlesen]

15. November 2011 - 00:30

Round Robin Berechnung mit Javascript

Mit dem Round Robin Algorithmus können Spielpaarungen in einem rundenbasierten Turnier berechnet werden. Das betrifft z.b. Turniere vieler Ballsportarten. Das Besondere an diesem Algorithmus ist, dass sich die Spiele mit den folgenden Rahmenbedingungen berechnen lassen:

• Jedes Team soll möglichst abwechselnd Heim- und Auswärtsrecht haben
• Jedes Team soll jede Spielrunde ein Spiel austragen

Der Algorithmus wird wie folgt angewandt:

[... weiterlesen]

3. September 2010 - 13:27

Tweening – Effekte mit Javascript

Tweening und Transition sind zwei Begriffe aus der Welt der Computeranimation. Heute möchte ich eine Klasse zeigen, wie diese Techniken auch bei Javascript Animationen Verwendung finden.

Das Prinzip der Techniken ist relativ schnell erklärt.
Bei einer normalen Animation, wie sie z.b. auch mein aufgleitendes Popup benutzt, ist die Veränderung des Wertes (hier die Höhe und Breite) linear zur Zeit. In jedem Interval werden die Werte um den gleichen Wert verändert. Dadurch wirkt die Animation statisch und langweilig.

Ein weiterer großer Nachteil dieser Methode ist, dass wenn der Ablauf einmal haken sollte, z.b. weil die Berechnung länger dauert oder der Browser einen kurzen Moment mit etwas anderen beschäftigt ist, dann stockt die Animation kurz und wird danach einfach fortgesetzt, es findet also keine flüssige Ausführung statt.
Ausserdem läßt sich die Ausführungszeit nur verändern, in dem der Abstand der einzelnen Schritte in jedem Interval, vergrößert oder verkleinert wird.

Das folgende Diagramm, zeigt den Ablauf solch einer Art der Animation. Die horizontalen Achse ist die Zeit und vertikal, der Wert der Änderung (in dem Beispiel des aufgleitenden Popups, wär das die Breite oder die Höhe):

[... weiterlesen]

12. Juli 2010 - 00:47

Rechnen mit der Zeit

7.2.2024: selfhtml link angepaßt

Um mit Stunden und Minuten rechnen zu können, müssen diese umgewandelt werden. Entweder in eine Dezimalzahl, die die Minuten und Sekunden in Bruchteilen angibt oder in eine ganze Zahl, wie in diesem Artikel bei Selfhtml beschrieben.

Eine Angabe hh:mm:ss wird dort einfach in Sekunden umgewandelt, mit dieser Zahl läßt sich dann leicht rechnen. Ich habe dieses Verfahren genutzt, um eine kleine Klasse zu schreiben, mit der in Javascript leicht Zeitangaben addiert und subtrahiert werden können.

[... weiterlesen]

8. Februar 2010 - 11:23

OOP in Javascript – Teil 1

Mein erster Versuch hier einen Artikel über Vererbung in JS zu schreiben, scheiterte an einem Punkt den ich übersehen hatte. Daher hier eine neue zweite Version. Ich werde den Artikel aber in drei Teile aufsplitten.

1. Teil 1. - OOP in Javascript
2. Teil 2. - MOC my Object Creator
3. Teil 3. - Vergleiche und Benchmarks

[... weiterlesen]

29. April 2009 - 12:44

Online Molmassen Rechner

Ein kleines Javascript aus der Welt der Chemie.

Der Molmassenrechner berechnet die Molmasse einer chemischen Verbindung. Die Molmasse ist die Summe aller Element dieser Verbindung. Das Skript ermittelt dazu anhand der Formel die Anzahl der Atome und berechnet dann die gesamte Molmasse einer Verbindung.

Dabei werden alle sowohl runde Klammer, von Stoffgruppen, als auch eckicke Klammern, in Komplexverbindungen, berücksichtigt. Darüber hinaus ist auch eine Kristallwasserangabe möglich. Die Schreibweise muss der gängigen Nomenklatur entsprechen.

Syntax

Runde Klammern trennen eine Verbindungsgruppe. Eine optionale Zahl dahinter gibt an, wie häufig diese vorkommt. Kommt die Gruppe nur einmal vor, ist die Zahl überflüssig und muss nicht angegeben werden.

Eckige Klammern, für eine Komplexverbindung sind ebenfalls möglich. Innerhalb dieser können auch runde Klammern verwendet werden.

Mehrfach verschachtelte Klammern können in dieser Version nicht berechnet werden. Das Skript rechnet aber einfacher und exakter, als z.b. die auf Wikipedia verlinkten Molmassenrechner.

[... weiterlesen]

30. März 2009 - 13:45

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. oberhalb einer Textarea angezeigt werden und mit denen dann der Text entsprechend formatiert wird. Dazu habe ich das Skript erweitert und verbessert, so dass 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.

[... weiterlesen]

12. Februar 2009 - 13:22

LED Laufschrift mit Javascript

Es gibt eine neue Version.10.2.2013

Seit dem 18.11.2011 ist eine komplett neue Version dieses Skripts online. Einige Befehle haben sich daher geändert

Im selfhtml Forum hatte jemand nach einer LED Anzeige mit Javascript gefragt. Da ich das eine Interessante Idee fand, machte mich auf die Suche ob es so was schon im Netz zu finden gibt. Ich fand aber nur Flash Skripte oder Javascripte, die mich aber nicht überzeugten. Davon inspiriert habe ich dann selbst ein kleines LED Laufschrift oder LED Scroller Skript geschrieben.

[... weiterlesen]

24. Januar 2009 - 14:21

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

[... weiterlesen]