Tag: JavaScript | Java Script

jQuery ist DeBuggers Liebling

Nachdem ich mich mehr aus der Not heraus, schnell für ein JavaScrip Framework entschieden habe, weil mein selbst gefrickeltes JavaScript mal wieder nicht Cross Browser Kompatibel war, wählte ich jQuery und bin bis heute begeistert. Natürlich sind die folgenden aufgeführten Punkte sehr subjektiv, da ich keines der anderen Frameworks getestet habe. Außerdem möchte ich erwähnen das man jQuery immer im Kompatiblitätsmodus betreiben sollte, da es sonst zu Probleme mit z.B.: Prototype kommen könnte.

[Javascript]
var $j = jQuery.noConflict();
[/Javascript]

Diese Zeile muss logischerweise nach dem Framework aber vor eurem eigenen Code eingebunden werden. Alle Beispiele die ihr dann im Internet findet müßt ihr dann entsprechend anpassen:

[Javascript]
/* Vorher */
$(document).ready(function() { … })

/* Nachher */
$j(document).ready(function() { … })
[/Javascript]

Aber jetzt zu den Punkten welche mich bisher überzeugt haben:
1. jQuery.com – Dokumentation mit Beispielen, so wie es sein muß
2. http://stackoverflow.com/questions/tagged/jquery noch mehr Beispiele und auf die meisten Fragen bereits eine passende Antwort
3. Vielzahl von Plugins
4. Performant
5. Aktive Verbesserungen am Code durch die Entwickler

Wen das bisher noch nicht überzeugt hat, der sollte sich unbedingt mal http://gamequery.onaluf.org/ anschauen. Eine Game Engine basierend auf jQuery. Wahnsinn.

Firefox vs IE CSS stylesheet className – class

Es gibt doch nichts schöneres als Bugs, die im Internet Explorer funktionieren, im Firefox dagegen nicht oder umgekehrt. Eines dieser Beispiel hatten ich schon bei dem Öffnen eines neuen Fensters mit Java Script. Dieser Fehler konnte jedoch durch die vollständige Definition aller Attribute behoben werden. Bei dem folgenden Beispiel ist dies nicht möglich.

Der Hover Effekt ist in CSS 2 momentan erst für Links verfügbar. Oft möchte man jedoch auch noch die Tabelle oder andere Elemente mit dem Hovereffekt versehen, die im DOM-Tree eine Ebene höher stehen. Dies ist für den Firefox mit folgendem Code möglich.

[HTML]

onmouseover=”this.parentNode.setAttribute(‘class’,’navibuttonshover’);”
[/HTML]

Im IE (Internet Explorer) funktioniert das nicht. Hier muß der Befehl wie folgt aussehen:

[HTML]

onmouseover=”this.parentNode.setAttribute(‘className’,’navibuttonshover’);”
[/HTML]

Aber wie baut man jetzt eine Allroundlösung die unabhängig vom Browser ist? Nach langer Recherche im Internet kommt man wohl um eine IF Bedingung nicht herum. Falls jemand einen besseren Weg kennt, würde ich mich über eine Nachricht freuen.

[HTML]

onmouseover=”this.parentNode.setAttribute((document.all ? ‘className’ : ‘class’),’navibuttonshover’);”
[/HTML]

5 Tipps für eine schnellere Webseite

Immer wieder trifft man im Internet auf Homepages, bei denen man anfängt an der eigenen Internetverbindung zu zweifeln. Mal läd sich nur der Titel und die Seite bleibt weiß oder nur die Hälfte wird geladen und auch nach mehrmaligen Drücken von Strg + F5 passiert nichts. Bei jedem Klick auf die nächste Seite hat man Angst, dass das Warten wieder von neuem beginnt.

Dabei liegt es im eigenen Interesse eines jeden Webseitenbetreibers die Ladezeiten möglichst gering zu halten, denn jedes aufrufen beansprucht Serverressourcen und kostet Traffic.

1. Outsourcen
Bereits bei der Entwicklung einer Homepage sollte man drauf achten, soviel Skript (CSS, JavaScript) in andere Dateien auszulagern. Diese werden vom Browser gecached und beim erneuten Aufrufen nicht nochmals heruntergeladen.

2. Bilder verkleinern
Die heutigen Digitalkameras machen Fotos mit 8 Megapixeln und mehr. Diese Qualität und Größe wird im Internet aber nur selten gebraucht. Oft sind die Fotos einige Megabyte groß. Man sollte die Bilder bevor man sie auf der Homepage einbindet auf die benötigte Größe verkleinern und ggf. die Qualität auf “Web” oder ähnliches stellen. So lassen sich oft 80% und mehr einsparen.

3. Wiederholende Bilder
Besonders bei Farbverläufen braucht man nicht eine unendlich große Grafik nehmen, damit man bei keiner Auflösung einen weißen Rand hat, sondern man sollte nur einen 1px großen Streifen nehmen und diesen wiederholen. Dadurch wächst er automatisch mit und es gibt keinen nervigen Rand.

4. Färben statt kacheln
Bei vielen farbigen Hintergründen sollte man sich überlegen ob es überhaupt notwendig ist eine Grafik einzubinden oder ob man nicht besser mit background-color arbeitet.

5. Wenige große Dateien
Bevor man anfängt ein Bild klein zuschneiden und es später in einer Tabelle wieder zusammenbaut, wäre es vielleicht sinnvoller das Bild einfach als Hintergrund zu definieren. Für jede extra Datei wird immer eine Verbindung ausgehandelt bevor diese übertragen wird. Dieser Overhead fällt bei ein paar großen Dateien weg.

Sollte sich die Webseite immer noch im Schneckentempo aufbauen, kann man mit Google Chrom standardmäßig und der Extension Firebug für Firefox analysieren, welche Datei wie lange zum Laden braucht.

Die Droge XSS – Cross Site Scripting

Was Cross Site Scripting ist und wie es ungefähr funktioniert, war mir mehr oder weniger bekannt. Richtig realisiert habe ich es durch das Buch “PHP-Sicherheit”, das mir von http://log.446b.org empfohlen wurde. Mittlerweile bin ich süchtig. Ich kann nicht mehr vernünftig surfen. Bei keiner Homepage kann ich widerstehen. So bald ich irgendwelche Parameter in der URL sehe muss ich es einfach ausprobieren. Die typischen Lücken sind

  • Suchformulare
  • Login Formulare
  • Seite empfehlen

Aber XSS ist nur die Einstiegsdroge. Irgendwann reicht einem das aber nicht mehr aus und man kommt automatisch zu SQL-Injections. Diese Droge ist noch besser, sie hält einfach viel länger an und sie ist so heimtückisch. Nachdem man sie aber ein paar mal genossen hat, merkt man es reicht nicht mehr und man braucht wieder mehr. Als nächstes folgt dann zwangsläufig Stufe 3 – das Hacken von Servern. Man glaubt nicht wie viele Server es gibt die auf alten Apache Versionen laufen. Besonders intensiv ist die Droge, wenn die Internetseiten versucht haben durch 404 Handling zu vermeiden, dass man die Apache Meldung sieht.

Java Script: invalid assignment left-hand side

Kürzlich habe ich ein kleines Java Script Programm zugeschickt bekommen, von dem behauptet wurde das die Person nur den Namen geändert hätte und es nun nicht mehr funktionieren würde. Tatsächlich hatte sie aber auch den Namen der Form geändert.

[javascript]
window.document.java-uebung.monthly.value=Math.round(sum*100)/100;
[/javascript]

weiter unten stand dann…

[html]

[/html]

Jedoch sollte man bei der Programmierung immer darauf achten, das man keine Minus bzw. Bindestrich oder auch einfach nur – verwendet. Auch nicht beim anlegen von MySql Datenbanken und / oder Tabellen. Ein Bindestrich ist diesem Falle einfach “böse” und kann zu einer mühsamen und langen Fehlersuche führen. Der Unterstrich dagegen ist jedoch problemlos möglich und erlaubt. Um möglich universell programmieren zu können sollte man bei der Wahl seiner Variablen folgende Grundsätze beachten.

  • Variablen sollten mit einem kleinen Buchstaben beginnen
  • Variablen sollte nicht mit einer Zahl oder einen großen Buchstaben beginnen, da große Buchstaben normalerweise oft für Funktionen verwendet werden.
  • Variablennamen sollten Aussagekräftig sein. Zum Beispiel “vorname”, “name” aber NICHT “name1”, “name2”
  • Einbuchstabige Variablen sollte man nur in Schleifen verwenden. Beispiel i, k oder x und y
  • Variablen sollten nicht den Namen von Funktionen tragen wie zum Beispiel “return” oder “var”
  • Man sollte Variablen wählen die im englischen bzw. im deutschen einmalig sind also nicht “address” sondern besser “anschrift”, dann ist klar um welche Sprache es sich handelt und ein Tippfehler ist so später leichter zu finden.
  • Variablen mit Zahlen sollten nur verwendet werden, wenn es sich um identische Felder handelt.
  • Außerdem sollte man darauf achten, das Variablen keine Sonderzeichen enthalten also kein ä oder ü und ö aber auch keine % oder sonst irgendwas.