Kategorie: JavaScript

JavaScript Probleme,Tipps und Tricks

Kategorien
Android C C++ CodeIgniter Framework iPhone/iOS Java JavaScript Mobil MySQL PHP Webdeveloper Tools Zend Framework

Teil 1: Clean Code – Regeln für guten, sauberen Code

Sauberen und leicht verständlichen Code zu schreiben ist das höchste Ziel in einem guten IT-Projet. Vieles hängt davon ab:

  • Wartbarkeit
  • Einarbeitungszeit für andere Programmierer, versteht man schnell, was einzelne Funktionen erledigen
  • Robustheit bei Änderungen
  • Testbarkeit, fällt alles zusammen, bei kleinen Änderungen, können schnell stabile Updates bereitgestellt werden
  • Popularität bei anderen Programmierern z.B: bei Open Source Projekten, als negative Beispiel sei XT-Commerce genannt

Das sehr zu empfehlende Standardwerk zu dem Thema ist „Clean Code – Refactoring, Patterns, Testen und Techniken für sauberen Code“ von Robert C. Martin. In diesem Artikel werden Kapitel 1 bis 3 behandelt.

Aussagekräftige Namen

Der Namen einer Variable, Funktion oder Klasse sollte sofort erklären, warum Sie existiert, was sie tut und wie sie benutzt wird. Wenn eine Variable einen Kommentar benötigt, drückt Sie ihren Zweck nicht aus.

Bsp:

int d //Anzahl vergangener Tage
besser ist:
int daysSinceCreation;

Aussprechbare Namen verwenden

Keine Konstrukte mit unklaren Abkürzungen wie: int daSiCre anstatt von daysSinceCreation.

Suchbare Namen verwenden

Moderne IDEs machen das Suchen einfach, aber es nützt nichts, wenn man nach dem Buchstaben e einer Laufvariable suchen muss und von Ergebnissen überschwemmt wird.

Variablen Namen mit einem Buchstaben sind nur als lokale Variablen in kurzen Methoden zu verwenden.

Weiterlesen „Teil 1: Clean Code – Regeln für guten, sauberen Code“
Kategorien
JavaScript Web Frontend

Javascript Cookies setzen und auslesen

Die Arbeit mit Cookies in Javascript ist sehr unhandlich, deswegen sollte immer eine Bibliothek benutzt werden, die einem schwer lesbaren Code erspart, sonst muss man sich mit solchem Code anfreunden:

a = document.cookie;
cookiename = a.substr(0,a.search('='));
cookiewert = a.substr(a.search('=')+1,a.search(';'));
if(cookiewert == '')
{
cookiewert = a.substr(a.search('=')+1,a.length);
}

Es empfiehlt sich die Bibliothek Javascript Cookie Library with jQuery bindings and JSON support für das Cookie Handling zu benutzen. Diese kann mit oder ohne jQuery benutzt werden. Mit jQuery sehen die Operationen dann so aus:

$.cookies.set('foo', '0');

var foo = $.cookies.get('foo');
Kategorien
CSS jQuery WordPress

Entfernen von leeren HTML paragraph Tags

Der Editor von WordPress generiert leere <p> Tags, die nicht sehr hilfreich sind beim Gestalten.

Eine Lösung via CSS (CSS3 – Kampatibilität :empty):

p:empty
{
    display:none;
}

oder mit besserer Browser Kompatibilität und jQuery:

 <script>
    $("p:empty").hide();
</script>
Kategorien
JavaScript

Javascript confirm

Mit dem Javascript Confirm-Snippet kann elegant eine Sicherheitsabfrage eingefügt werden z.B. in Backendbereiche, die kritische Optionen ausführen und bevor der User eine Bestätigung der zu ausführenden Aufgabe tätigen muss:

<a href="deleteAll.php" onclick="return confirm('Möchtest Du diese schwerwiegende Option wirklich ausführen?')">Test</a>
Kategorien
jQuery

jQuery UI Autocomplete mit extraParams für zusätzliche GET Variablen

In jQuery UI gibt es eine sehr gute Autocomplete Funktion, die ich auf der Seite CD Shop Berlin eingebaut habe (Schnellsuche oben links). Dabei werden beim Eintippen Vorschläge unterbreitet.

$(document).ready(function() {
 $("input#suche").autocomplete(
 {
 autoFocus: false,
 delay:300,
 minLength: 3,
 select: function(event, ui) {document.advanced_search.submit();},
 source: function(request, response) {
 $.ajax({
 url: "autocomplete.php",
 dataType: "json",
 data: {
 term : $('#schnellsuche').val(),
 verkauf : $('input[name=verkauf]').is(':checked'), },
 success: function(data) {
 response(data);
 }
 });
 }
 }
 );
});

Dabei ist zu beachten, dass der Parameter extraParams von jQuery UI 1.8 aktuell ignoriert wird und man dies über den eingebauten Ajax Request lösen muss.

Serverseitige stehen dann die Variablen mit $_GET[‚term‘], $_GET[‚verkauf‘]  zur Verfügung.

 

Kategorien
jQuery

jQuery: Ist eine Checkbox checked

Ohne eine ID vergeben zu müssen und mit Hilfe des name-Attributs funktioniert das mit jQuery so:

$checked = $('input[name=myName]').is(':checked');
Kategorien
JavaScript Web Frontend

Google Maps JavaScript API V3 und Utility Library V3 Tutorial

Google Maps Karten sind auf fast jeder Webseite aufzufinden. Die neueste Version Google Maps JavaScript API V3 bietet:

  • erweiterte Unterstützung für mobile Geräte
  • Integration von Google Street View
  • verbesserte Performance
  • Weiterentwicklungen  in Zukunft, da Version V2 als veraltet erklärt wurde seitens Google
  • es wird kein API Schlüssel mehr benötigt, wie bei V2
Weiterlesen „Google Maps JavaScript API V3 und Utility Library V3 Tutorial“
Kategorien
JavaScript Webdeveloper Tools

Javascript Debbuging mit Firebug

Javascript ist nicht einfach zu programmieren und zu debuggen. Die einfachste Möglichkeit Variablen zu überwachen ist diese mit alert auszugeben.

alert($var);

Die Methode stößt natürlich bei mehreren Variablen und Schleifen an seine Grenzen, weil es zu einer Klick-Orgie kommt.

Die beste und einfachste Möglichkeit bietet Firebug, ein Plugin für Firefox, welches jeder Web Developer standardmäßig installiert haben sollte. Damit lassen sich mit dem console.log Befehl Objekte, Arrays und Variablen auf der Firebug Konsole ausgeben.

console.log($array);

Weitere Funktionen sind:

  • Performance Messung von Javascript Funktionen
  • Stack Tracing inklusive der Input Variablen der Funktionen auf dem Stack mit console.trace()
  • Object Inspection mit console.dir()
Kategorien
JavaScript Web Frontend

Google Earth API

Google bietet seit Jahren seinen freien Service Google Earth an, mit dem man die Möglichkeit hat, Daten auf einem Erdball  und einer detailierten 3D Erdoberfläche zu visualisieren.
Für mein nesues Projekt wo-bin-ich-jetzt.de, einen weltweiten GEO-Informationsservice, habe ich Google Earth eingebunden.


Sehenswürdigkeiten in Berlin
Die zentrale Developer Seite mit reichhaltigen Ressourcen bietet einen sehr guten Überblick über die API und einen Developer Guide und eine Google Earth API Reference.
Der User muss ähnlich wie bei Flash ein Plugin installieren, um Google Earth Daten anschauen zu können. Für die Entwicklung muss ein Google Maps API Key beantragt werden und dann kann es losgehen.

Probleme mit Google Earth

Wieso wird mein Marker nicht angezeigt?

Das kann daran liegen, dass der Zoom Faktor in der Ansicht so hoch ist, dass der Marker zwar da ist, aber nicht sichtbar. Aushilfe bringt setScale(10.0) für den 10 fachen Zoomfaktor:

var icon = ge.createIcon('');
 icon.setHref('http://maps.google.com/mapfiles/kml/paddle/red-circle.png');
 var style = ge.createStyle(''); //create a new style
 style.getIconStyle().setIcon(icon); //apply the icon to the style
 style.getIconStyle().setScale(10.0); //
 placemark.setStyleSelector(style); //apply the style to the placemark

Long als Variablen Name für Longitude (Breitengrad)

Der Fehler ist schnell gemacht, aber man sollte nie eine Variable long benennen, weil damit der Datentyp Long interpretiert wird, besser longitude verwenden.

Kategorien
jQuery

verschieben von absolut positionierten Elementen mit jQuery

Wenn man alle Elemente bspw. aus generiertem HTML verschieben will, bietet sich jQuery an.

Folgendes HTML habe ich aus einem PDF zu HTML Umwandlungsprogramm erhalten:

<div style="position:absolute;top:97;left:333"><nobr><span class="ft1"> </span></nobr></div>
<div style="position:absolute;top:121;left:333"><nobr><span class="ft1"> </span></nobr></div>
<div style="position:absolute;top:145;left:333"><nobr><span class="ft1"> </span></nobr></div>
<div style="position:absolute;top:170;left:293"><nobr><span class="ft2">Text </span></nobr></div>

Um die Inline Styles zu verändern und die Div-Blöcke um 100px zu verschieben nach rechts und nach unten kann folgender Code verwendet werden:

        $(document).ready(function() {
            $('div').each(function() {
                var offset = $(this).offset();
                alert("left: " + offset.left + ", top: " + offset.top );
                $(this).css('left', offset.left + 100);
                $(this).css('top', offset.top + 100);
            });
        });