Kategorie: JavaScript
-
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…
-
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…
-
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>
-
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>
-
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 :…
-
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‘);
-
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
-
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…
-
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…
-
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…