Javascript ist Toll!

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]

Wikipedia

Heute mal ein Beitrag über Wikipedia. Seit ich das Internet nutze (ca. seit 1998), benutze ich es auch als "Wissensmaschine". Ich gebe in der momentan aktuellen Suchmaschine, Suchbegriffe ein und hoffe Seiten zu finden, die mir zu einer Frage oder einem Problem, eine Antwort oder Lösung bieten. Während das am Anfang noch relativ schwer und oft mit stundelangen durchforsten der vielen Ergebnisse verbunden war und zwischenzeitlich fast kaum mehr möglich wurde, als Spammer anfingen Suchmaschinen mit Sexseiten zu floaten, ist es dank Wikipedia wesentlich einfacher geworden und man bekommt oft sehr informative Antworten auf seine Fragen.

Wieviele Tage sind vergangen?

Die Frage war, wieviele Tage sind seit einem Datum vergangen und kann das Date Objekt auch mit einem Datum vor dem 1.1.1970 umgehen? [... weiterlesen]

$_GET für Javascript

Wird mal wieder Zeit für ein bisschen Javascript. Da ständig Lösungen von Fragen in Foren bei mir auflaufen, hier eine, um die GET Parameter mit Javascript abzufragen.

Phentermine / Phentermin ist hochgefährlich!

Phentermine / Phentermin Spam

Nachdem ein Projekt von mir auch von massiven Spam betroffen war, bin ich beim Recherchieren, über die Herkunft des Spams, auf folgenden Artikel gestossen. Ich schliesse mich daher an und für alle die es Wissen wollen:

Drag & Drop m. Javascript

Ein einfaches Drag and Drop Beispiel.

Warum Agentur Bashing gut ist

Die Begriffe Webstandards und Barrierefreiheit dringen mittlerweile auch zu den größeren Agenturen durch und immer mehr große Seiten versuchen sich daran. Während die TAZ damit keine Probleme hatte, sieht es beim Focus sehr bescheiden aus.

Das haben sich die Autoren von Vorsprung durch Webstandards genauer angeschaut und dabei Unzulänglichkeiten im Code entdeckt, die jeden, der sich auch nur ein bisschen mit dem Thema auseinandersetzt, die Haare zu Berge stehen lässt. Daraus entwickelte sich eine Diskussion, in der immer mehr der Vorwurf der Selbstbeweihräucherung und des Bashing von Agenturen laut wurde.

Quersumme

Weil's so grad schön war. Diesmal eine Funktion, um die Quersumme einer Zahl zu ermitteln:

Number.prototype.quersumme = function(forceOneDigit) {

    var z = this.toString().split('');

    for (var i=0, quer=0; i < z.length; quer+=z[i++]-0);

    if( forceOneDigit && quer > 9) return quer.quersumme(forceOneDigit);

    return quer;

}

Beispiel

Nachtrag

Und wieder mal gab es zum Thema einen Thread im selfhtml Forum, wo donp eine sehr effektive und schnelle Lösung präsentierte.

Das sieht dann so aus:

Number.prototype.quersumme = function() {

    return this < 10 ? this : this % 9;

}

Wie finde ich die Mausposition?

Um die Mausposition mit Javascript zu ermitteln, kann man folgende Funktion verwenden.

Position eines Elementes ermitteln

Die Position und die Maße eines HTML Elementes, lassen sich mit folgender Funktion bestimmen:

Wie kann man alle Einträge aller Selectfelder wählen?

Folgende Funktion selektiert alle Einträge, in allen Formularen einer Seite. Der praktische Nutzen mag gering sein, aber hier geht es nur um die Umsetzung der Fragestellung, die in der entsprechenden Anwendung jeweils angepaß?t werden muss.

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.

Eventhandling mit Javascript

Um in Javascript einem Objekt einen Event hinzuzufügen, bietet sich folgende Schreibweise an:

[object].onevent = function(e){

// ... tu_was

}

Wobei [object] ein Objekt des DOM ist und onevent einen Event meint, z.b. onclick. Diese Methode hat den Nachteil, dass ein bereits vorhandener Event überschrieben wird.

Die Mozilla-Funktion addEventListener() beseitigt dieses Problem, steht aber nicht in allen Browsern zu Verfügung. Die IE Variante mit attachEvent() ist leider nicht praktikabel, da bei jedem Aufruf die Funktion erneut dem Event zugefügt wird und das Eventobjekt nicht in der Eventfunktion als this zu Verfügung steht. [... weiterlesen]

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.

Text in Textarea einfügen

Dieser Text ist etwas veraltet, zeigt aber das Grundprinzip, wie ein Text in eine Textarea eingefügt werden kann. Für BB-Code, habe ich mittlerweile eine andere Funktion geschrieben, diese findet ihr hier.

Text an der Cursorposition einfügen können nur der IE ab Version 5 und Mozilla Browser. Opera bleibt aussen vor. Wie es bei Mac und Linux Browsern aussieht, weiß ich nicht.

Mit dem Skript, können z.b. BBCode Tags eingefügt werden oder Smilies. Das Skript sieht so aus:

function insert(input, aTag, eTag) {

    input.focus();

    if(!aTag) return;

    if(!eTag) eTag = '';

    if(typeof document.selection != 'undefined')     {

         var range = document.selection.createRange();

         var insText = range.text;

         if(!insText && eTag) return alert('Nichts markiert!');

         range.text = aTag + insText + eTag;

         range = document.selection.createRange();

         if (insText.length == 0)  range.move('character', -eTag.length);

         else  range.moveStart('character', aTag.length + insText.length + eTag.length);

         range.select();

    } else if(typeof input.selectionStart != 'undefined') {

         var start = input.selectionStart;

         var end = input.selectionEnd;

         var insText = input.value.substring(start, end);

         if(!insText && eTag) return alert('Nichts markiert!');

         input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);

         var pos;

         if (insText.length == 0)  pos = start + aTag.length;

         else pos = start + aTag.length + insText.length + eTag.length;

         input.selectionStart = pos;

         input.selectionEnd = pos;

    } else {

         alert('Du kannst nach Hause gehen!\n\nLeider unterstützt dein Browser nicht die notwendige Funktion!');

    }

}

Das Skript ist eine leicht abgewandelte Form von dem Beispiel bei selfhtml

Beispiel

include.js – die Standardbibliothek

Beschreibung

Die Datei include.js enthält einige Funktionen die das Programmieren mit Javascript leichter machen.

Hauptsächlich dient sie mir dazu Bibliotheken im Skript einfacher einzubinden. Dazu reicht der Aufruf include('lib.js');. Die Bibliothek wird relativ zum Verzeichnis der Datei include.js eingebunden. Dadurch ist es möglich, das HTML Dateien in verschiedenen Unterverzeichnissen immer den gleichen Befehl zum einbinden von Dateien benutzen können, nur der Pfad zur include.js Datei muss noch angepaßt werden.

[NEU]!
Ich habe die Funktion so erweitert, dass Dateien auch in dem Format Pfad::Datei eingegeben werden können. Ich verwende das um andere Bibliotheken, die alle unterhalb des Standardverzeichnisses liegen, nachzuladen.

Darüber hinaus enthält die Datei noch einen Satz von Funktionen um Variabeln zu testen.

Funktionen

include()

Einbinden externer Javascript Dateien. Jede Datei wird nur einmal eingebunden.

Beispiel

include('lib.js');

is_number()/is_string()/is_object()/is_function()

Die Funktion testet ob der Parameter von dem entsprechenden Typ ist.

defined()

Test ob der Parameter definiert ist.

main()

Das ist keine Funktion, sondern das Skript fügt einen onload Handler ein, der nach dem Laden der Seite nach einer Funktion main() (so heißt in C/C++ die Hauptfunktion, die beim Start eines Programmes aufgerufen wird) sucht und diese dann aufruft. Da viele Skripte erst nach dem laden der Seite starten sollen oder dürfen, müssen diese nur noch innerhalb der Funktion main() geschrieben werden.

Beispiel

<script src="include.js" type="text/javascript"></script>
<script type="text/javascript">
function main()
{
     alert('Seite fertig geladen');
}
</script>

Download

include.js (ca. 2 KB )

doppelte Array Einträge entfernen

Doppelte Einträge in einem Array lassen sich am effektivsten über ein Objekt entfernen. Der Trick dabei ist, das ein Objektattribut nicht doppelt vorkommen kann und somit ist ein Attribut, dass mehrmals zugewiesen wird nur einmal vorhanden.

Die Umsetzung erfolgt über Array.prototype dann läßt sich diese Funktion auf jedes Array anwenden.

Der Code sieht folgendermaßen aus:

Array.prototype.unique = function() {

    var o = {};

    var tmp = [];

    for(var i = 0 ; i < this.length; i++) o[this[i]] = true;

    for(var i in o) tmp[tmp.length] = i;

    return tmp;

}

Und der Test: Klick

Server mit Javascript prüfen

Kann man einen Server mit JS prüfen?

Ja, das geht, wenn man die URL eines Bildes auf dem Server kennt. Dazu kann man den onload bzw. onerror Eventhandler des Image Objektes benutzen, die Funktion könnte so aussehen:

function check(url) {

    if(!url || !document.images) return

    var img = new Image();

    img.onload = function () {

         alert('Das Bild konnte geladen werden der Server ist online!');

         document.images[testBild].src = this.src;

    };

    img.onerror = function () {

         alert('Das Bild konnte nicht geladen werden!');

         document.images[testbild].src = this.src + '?' + Math.random();

    }

    img.src = url;

}

Mit Hilfe von Math.random() wird bei jedem Aufruf eine neue URL erstellt, damit die Datei immer vom Server geholt wird und nicht aus dem Cache des Browsers.

Es läßt sich aber auch direkt in ein Bild im HTML Code integrieren, z.b. so:

<img src="http://server.lt/online.gif"

onerror="if(!this.check) {this.check = true; this.src = 'offline.gif';}"

alt ="">

Beispiel

Datum prüfen

Beschreibung

Um ein Datum auf Gültigkeit zu prüfen muss die Eingabe zuerst zerlegt werden. Die Funktion string2date() geht von der typisch deutschen Form TT.MM.JJJJ aus, wobei die Trennzeichen auch ein Minuszeichen oder Schrägstrich sein können.

Die Eingabe wird an den Trennzeichen gesplittet und daraus dann ein Date() Objekt erstellt. Als nächstes wird der Tag, Monat und das Jahr mit der Eingabe verglichen, stimmen alle Werte überein, wird das Date Objekt zurückgegeben, wenn nicht null

Der Code

///////////////////////////////////////////////////////////

//

// string2date(string)

//

// string => TT.MM.YYYY HH:MM:SS

// Das Trennzeichen kann ein: "./-" sein

// prüft einen String auf ein gültiges Datum

// gibt ein Datum Objekt oder null zurück

function string2date(string) {

    if(!string) return null;

    string += '';

    string = string.replace(/[-\/]/g, '.'); // Trennzeichen normalisieren

    string = string.replace(/[^0-9.: ]/g, ''); // ungültige Zeichen entfernen

    string = string.replace(/ +/g, ' '); // doppelte Leerzeichen entfernen

    var uhr = string.split(" "); // Uhrzeit abtrennen

    var split = uhr[0].split(".");

    var day = parseInt(split[0], 10);

    var month = parseInt(split[1] || 0, 10);

    var year = parseInt(split[2] || 0, 10);

    if(isNaN(year)) year = getFullYear();

    var check = new Date(year, month - 1, day);

    if(uhr[1]) {

         var uhr = uhr[1].split(':');

         check.setHours( uhr[0] || 0 );

         check.setMinutes( uhr[1] || 0 );

         check.setSeconds( uhr[2] || 0 );

    }

    var day2 = check.getDate();

    var year2 = getFullYear(check);

    var month2 = check.getMonth() + 1;

    return ( year2 == year && month == month2 && day == day2 ) ? check

    : null;

}

function getFullYear(date){

    if(!date) date = new Date();

    if(typeof date.getFullYear != 'undefined') return date.getFullYear();

    var year = date.getYear();

    if(year < 1000) year += 2000;

    return year;

}

Beispiel

Einträge kopieren zwischen Optionlisten

Ein Skript mit dem man Einträge zwischen zwei Optionlisten mit Javascript kopieren kann.