Mit ‘HTML’ getaggte Artikel

Strings und Substrings mit Javascript teilen

Montag, 02. August 2010

Javascript bietet eine schöne Range an Funktionen, die mit Zeichenketten/Strings arbeiten. Ähnlich zu der PHP Funktion substr, gibt es die Funktion substr() auch in Javascript, die es zulässt, eine Zeichenkette von vorne oder hinten abzuschneiden. Im Kombination mit AJAX wird diese Funktion sehr nützlich und sehr oft benutzt. Wir werden die Funktion vorstellen und später ein sehr interessantes Beispiel einer Javascript Funktion betrachten, die die Anzahl der Zeilen vom Wert einer Textarea zurückgibt.

Funktion

Syntax: ZEICHENKETTE.substr(nStart, nLaenge)

Beispielsfunktion:

var sString = "Hallo Welt!";
alert(sString.substr(6));

Resultat: “Welt!” – es wurde bei der Javascript Funktion vom ersten zum letzten Zeichen geschnitten.

Parameter

nStart - der Parameter ist erforderlich und gibt an ab welchem Zeichen die neue Zeichenkeitte starten soll.
nLaenge – der Parameter ist nicth erforderlich und gibt an wie lang in Zeichen die neue Zeichenkette sein wird. Sollten sie den Parameter nicht angeben – wie auf dem ersten Beispiel oben – so wird die Zeichenkette ab nStart zum Ende abgeschnitten.

Vertiefung der Funktion und Anwendungsbeispiele

Um die Funktionsweise zu vertiefen, werden wir eine Funktion zur Ermittlung der Anzahl der Zeilen einer Textarea betrachten, die wir nutzen, um programmiertechnisch den Wert des Attributes “rows” zu beeinflussen, so dass der in der Textarea eingegebene Text immer sichtbar ist ohne Scrollbalken, Facebook Style. Die Funktion werden wir in den nächsten Artikel näher betrachten.


function BerechneTextAreaHoehe(tarea) {    
    var nCounter = 1;
    var sNeedle = "\n";
    for (var i=0;i< tarea.value.length;i++) {
        if (sNeedle == tarea.value.substr(i,sNeedle.length)) {
            nCounter++;
        }
    }    
    tarea.rows=nCounter;
}

Was passiert in der oberen Funktion?

 - es wird der zur Zeit eingegebene Wert einer als Parameter übergebenen Textarea Zeichen für Zeichen abgeschnitten
 - Sofern ein Abschnitt gleich der Zeichenkette “\n” (weicher Return) ist, so wird der Counter um eins erhöht.
 - Am Ende wird entweder 1 oder die größer 1 Zahl zurückgegeben.

Wenn diese Funktion bei jedem Tastendruck angewendet wird, so kann das Attribut rows manipuliert werden. Dazu aber in unseren nächten Artikeln.

Bei jäglichen Fragen stehen wir gerne zur Verfügung.

HTML Textarea – automatisch anpassbar in der Anzahl der Zeilen/Höhe mit Javascript

Dienstag, 15. Juni 2010

Ganz bestimmt hat jeder, insbesondere bei Facebook, die sich automatisch anpassbaren Textareas gesehen, die nach jedem Zeilenumbruch automatisch durch eine Zeile erhöht werden. Die Funktion ist besonders nützlich, da bei der HTML Programmierung mit Textareas keine festen Flächen auf der Seite besetzt werden. Das bedeutet, das Formular kann immer mit Textarea mit einer Zeile anfangen und sich erhöhen je nach dem welche Angaben ins Feld gemacht werden. Das was noch die Nutzung dieser sich automatisch anpassbaren Felder bequemer macht, sind die fehlenden Scrollbalken, die die Textarea unschön und unübersichtlich machen. Diese Eigenschaften der Textarea werden durch die Javascript Funktion gewährleistet, die wir nachfolgend vorstellen möchten.

Die JS Funktion


function CheckTextAreaHeight(tarea) {
var nCounter = 1;
var sNeedle = "\n";

for (var i=0;i< tarea.value.length;i++) {
if (sNeedle == tarea.value.substr(i,sNeedle.length)) {
nCounter++;
}
}

tarea.rows=nCounter;

}

Funktionsaufschlüsselung

Nachfolgend die Erläuterung darüber wie diese Funktion, die automatisch die Höhe Ihrer Textarea anpasst und der Text in der Textarea / die Textarea selber als Parameter erhält:

1. Es wird von einer Zeile vorausgegangen
2. Es wird nach Umbrüche in der Text gesucht – “\n”
3. Sofern der Umbruch beim Durchsuchen des Textes in einer JS Schleife gefunden wird, wird unser Zähler um 1 erhöht.
4. Am Ende wird der Parameter “rows” (Anzahl der Zeilen) auf den Zählerwert gesetzt.

Diese Javascript Funktion erfordert keine PHP Programmierung und ist eine Client-Side Funktion, die Sie “zu Hause” in einer Text-HTML Datei austesten können.

Einsatz der Funktion

Um die Javascript Funktion zur automatisierten Anpassung einer Textarea in der Anzahl der Zeilen einzusetzen, benötigen Sie vor allem eine Textarea:

<textarea onkeyup="CheckTextAreaHeight(this);" rows="1">Geben Sie hier Ihren weiteren Text</textarea>

Es wird nach dem Loslassen einer Taste jedes Mal die Höhe angepasst und somit können Sie schreiben, ohne nachzudenken, ob Sie das sehen, was Sie schreiben und ohne scrollen zu müssen.

Lesen Sie hier nach weiteren Javascript Funktionen, die wir hier vorgestellt haben.

Javascript Programmierung – Zu Favoriten hinzufügen – eine JS Funktion

Mittwoch, 19. Mai 2010

Der Einsatz von Javascript ist heuzutage in jeder Webseite ein Muss. Vor allem wird Javascript von jedem herkömmlichen Browser unterstützt und man kann sich darauf verlassen, dass die mit JS erstellten Inhalte und Funktionen beim Besucher korrekt dargestellt werden. Unter anderem sind viele Ajax Funktionen im Einsatz, die sich auf die Javascript-Kompatibilität der Besucherbrowser verlassen.  Javascript integriert sich sehr komfortabel mit jedem Browser und bietet ein Paar nützliche Funktionen, die der User ansonsten selber hätte über die Browsersteuerung betätigen müssen. Eine solche Funktion ist das Hinzufügen der aktuell betrachtete Webseite zu den Favoriten von dem jeweiligen Browser.

Was brauchen Sie, um diese Funktion zu implementieren?

Sie sollten vor allem ein Textlink oder eine Grafik, die jeweils Links sind, die beim Anklicken die Javascript Funktion zum Hinzufügen zu den Favoriten ausführt. Anbei die Funktion, die Erklärung folgt:

Textlink:

<a href="javascript:window.external.AddFavorite(self.location,document.title)">Zu Favoriten hinzufügen</a>

Verlinktes Bild:

<a href="javascript:window.external.AddFavorite(self.location,document.title)"><img src="FavoritenGrafik.jpg" alt="Zu Favoriten hinzuf&amp;amp;uuml;gen" title="Zu Favoriten hinzuf&amp;amp;uuml;gen" border="0" /></a>

Was macht die Funktion?

Es wird beim Anklicken des Links die aktuelle Adresse (URL) (self.location) und den Titel der aktuellen Adresse (document.title) an die Funktion AddFavorite übergeben. Somit kommt das Standardfenster von Ihrem Browser und es wird vorgeschlagen die Seite zu den Favoriten hinzuzufügen, mit dem jeweiligen Titel Ihrer Seite. Sie können statt der Funktion document.title Ihren eigenen Text eingeben, so etwa wie ‘Meine Geschäftswebseite’, dann blicken aber die Besucher nicht mehr durch die eigenen Favoriten durch. Wenn Sie eine Grafik verlinken, achten Sie auf den Pfad der Grafik und auf das Attribut border=”0″, weil ansonsten der Browser die Grafik mit einem Standardrahmen umfassen wird – das ist etwas unschön.