Hallo!
Mein Name ist David Müller, ich arbeite bei der Public Cloud Group und wohne in Frankfurt. Hier geht es hauptsächlich um Webentwicklung.
Archiv der Kategorie: Javascript
Änderungen einer Form überwachen
Aufgabenstellung: Ich möchte eine <form> mit allen ihren Elementen überwachen, ob der Benutzer eine Änderung vorgenommen hat. Wenn dem so ist und er die Seite verlässt / neu lädt, ohne die Form abgeschickt zu haben, soll ein Hinweis erscheinen, der ihn darauf aufmerksam macht und fragt, ob er die Seite wirklich verlassen möchte.
Das HTML-Gerüst
Mal alles hingezimmert, was wir so an Formularelementen kennen:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.5.js"></script> <script> //Code folgt dann hier </script> </head> <body> <form> <select name="select-single" id="select-single"> <option>Single1</option> <option>Single2</option> </select> <select name="select-multiple" id="select-multiple" multiple="multiple"> <option selected="selected">Multiple1</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select> <input type="checkbox" name="check" value="check1" id="check1" /> <input type="checkbox" name="check" value="check2" checked="checked" id="check2" /> <input type="radio" name="radio" value="radio1" checked="checked" id="radio1" /> <input type="radio" name="radio" value="radio2" id="radio2" /> <input type="text" name="text" value="default text" id="text" /> <textarea name="textarea" id="textarea">foobar</textarea> </form> </body> </html>
Da wären also ein Select, ein Select mit Mehrfachauswahl, ein Textfeld, eine Textarea, zwei Radiobuttons und zwei Checkboxen.… Den ganzen Post lesen
Veröffentlicht unter Javascript, webdev
10 Kommentare
Javascript: selbstausführende, anonyme Funktionen
Ziel des Artikels: Den Sinn folgenden Konstrukts verstehen
(function(window, document, undefined) {
//some fancy code
})(this, document);
Mag auf den ersten Blick für den nicht täglich mit Javascript schaffenden Menschen beängistend aussehen. Aber der Reihe nach. Eine ähnliche Konstruktion kommt übrigens in jQuery zum Tragen (siehe source).
Anonym?
Erstmal ist die Funktion anonym, also ohne Namen. Einfach aus dem Grund, weil sie keinen Namen braucht, da sie sich ja selbst aufruft. Man könnte ihr übrigens einen Namen geben, funktionieren würde es trotzdem. Vereinfacht sieht das dann z.B. so aus:
(function nichtMehrAnonym() {
//some fancy code
})();
Vorteil: Wenn wir vorhaben, die Funktion aus sich selbst heraus nochmal aufzurufen, ist das so bequemer möglich (Rekursion).… Den ganzen Post lesen
Veröffentlicht unter Javascript, webdev
6 Kommentare
Rechenungenauigkeit mit Javascript – Warum?
Schonmal in Javascript über ungenaue Berechnungen aufgeregt?
<script> alert(0.2 + 0.4); </script>
Ergebnis?
Das Problem ist mit parseFloat ja schnell behoben, aber darum gehts mir hier garnicht. Warum kriegt Javascript kein sauberes Ergebnis zustande, wohingegen bei 0.2 + 0.3 glatt 0.5 rauskommt? Javascript rechnet intern binär. Und Zahlen, die im Zehnersystem wunderbar aufgehen, können im Dualsystem unter Umständen periodisch sein. So auch die 0.6. Schauen wir uns mal die Berechnung an:
- Vor dem Komma hat unser Ergebnis logischerweise eine 0
- Die Zahl wird mit 2 multipliziert (0.6 * 2 = 1.2)
- Der „Vorkommaanteil“ von oben ist die erste Stelle der gesuchten Binärzahl, also 1.
Veröffentlicht unter Javascript, webdev
3 Kommentare
Best-of-the-Web 4
Und hier die nächste Runde an interessanten Links.
- All-In-One cookiefunction – Eine Javascript-Cookie-Funktion die an Einfachheit kaum noch zu unterbieten ist.
- Typvergleiche in PHP – Nette Übersicht von Typvergleichen in PHP
- Simple plugin architecture using php5 Reflection API – Wie man sich mit Reflection eine grundlegende Plugin-Architektur bastelt
Veröffentlicht unter php, Javascript, Best of the Web, webdev
4 Kommentare
Der Einfluss von Cookies auf die Performance einer Webseite
Cookies werden oft missachtet, wenn es um die Optimierung einer Webseite hinsichtlich Performance geht – zu unrecht! Das wunderbare YSlow von Yahoo zum Beispiel hat einen Test eingebaut, der genau darauf abzielt. In den Performance Grundsätzen dazu heißt die Leitregel Use Cookie-free Domains for Components.
Das Problem
Cookies können erstmal in beliebiger Anzahl und ziemlicher Größe auf Clientseite abgelegt werden. Das Setzen von Cookies geht sowohl mittels Javascript wie auch von der Serverseite aus, bspw. mit PHP. Womit der Cookie gesetzt wird, ist letztendlich egal. Der Effekt auf das Ladeverhalten der Webseite ist in jedem Fall, dass bei jedem HTTP-Request vom Client aus alle Cookies im Anfrage-Header mit übermittelt werden.… Den ganzen Post lesen
Veröffentlicht unter php, Javascript, Performance, webdev
2 Kommentare
Kreative Attacken mit CSRF
Frei nach der Devise „know your enemy“ möchte ich in diesem Post etwas auf weniger offensichtliche Möglichkeiten eingehen, wie mit CSRF attackiert werden kann. CSRF selbst habe ich übrigens hier genauer erklärt.
1) Feststellen, ob ein Benutzer bestimmte Seiten besucht hat
Es gibt ja bereits seit längerem die getComputedStyle-Technik. Dabei werden Links auf einer Webseite platziert und mittels Javascript ausgelesen, ob diese Links :visited sind. Alter Hut, genauer hier erklärt. Diese Technik ist allerdings in neueren Browsern nicht mehr möglich, die diese das Auslesen des Link-Status verbieten. Trotz allem gibt es noch eine Möglichkeit, um die es hier gehen soll.… Den ganzen Post lesen
Veröffentlicht unter php, Javascript, Security, webdev
Hinterlasse einen Kommentar
Best-of-the-Web 2
Und eine neue Linkserie mit kleinen Web-Leckerbissen, bunt gemischt über MySQL, CSS, PHP und Javascript.
- Can I use? – Welche HTML 5 / CSS 3 – Features sind in welchem Browser bereits implementiert?
- PEAR HTTP Download – Nette Klasse, um sauber und schmerzfrei HTTP Requests / Downloads zu tätigen
- Head JS – Kleines Javascript, was das zusammenfassen von CSS / Javascript ermöglicht + ein paar weitere schöne Features mitbringt.
- PHP dependency strategies – Zusammenfassung von 3 Dependency-Injection Strategien und einigen sinnvollen Lösungsansätzen der mit DI aufkommenden Probleme.
- Web Designer’s Guide to PNG Image Format – Unterschiede der verschiedenen PNG-Abarten klar herausgestellt.
Veröffentlicht unter php, Javascript, Datenbanken, Best of the Web, webdev
3 Kommentare
Facebook API – Tutorial
Eins vorweg: Die Facebook API ist so mächtig, dass man locker auf der API basierend ein zweites Facebook hochziehen könnte, was durch die Facebook API gespeist wird. Leider gibt es aber auch zich verschiedene Quellen bei Facebook selbst. Vieles, was dort zu finden ist, ist bereits wieder deprecated und sollte nicht mehr verwendet werden. Ich werde nun sowohl die serverseitige (PHP) als auch die clientseitige (Javascript) Kommunikation mit Facebook anhand von Codeschnippseln beschreiben. Dabei verwende ich nur die Techniken, die laut Facebook noch verwendet werden sollten.
Getting Started
Als allererstes muss mal ein API Key her. Das geht hier. Dabei muss ein „App-Name“ vergeben werden und eine Domain spezifiziert werden.… Den ganzen Post lesen
Veröffentlicht unter php, Javascript, webdev
15 Kommentare
What you need to know about the DOM: 20 functions in 100 lines
Okay, first english article. I’m feeling kind of stupid when posting code related topics in German so I’m gonna try to bring some english content in here. Personally I think that comments, variable names and everything code-related should be written in english – considering multi-national development teams.
So, enough introduction. What follows is one single function performing stupid javascript actions with the Document Object Model. Even though every sane developer prefers the use of a library like jQuery for stuff like that, it’s always good to know what goes on behind the scenes. What I’ve covered are the following functions:
- document.
Veröffentlicht unter Javascript, Security, webdev
Hinterlasse einen Kommentar
Web-Performance: Best Practices
Was folgt ist eine Mischung aus der sehr guten (!) Artikelserie „Make the web faster“ von google und einigen persönlichen Ergänzungen und Erfahrungen. Erhebt keinerlei Anspruch auf Vollständigkeit und mischt server- sowie clientseitige Tipps querbeet. Ich gehe hier nicht besonders ins Detail, nenne aber genug Stichwörter, zu denen man sich dann schlaugooglen kann. Als Abschluss der Einleitung möchte ich noch auf den Gott der Webperformance verweisen, ohne dessen Bücher und Analysen wir sicher noch nicht da wären wo wir heute sind.
- Javascript so weit wie es geht asynchron laden bzw. ans Seitenende befördern, da Browser JS-Dateien in der Regel nicht parallel laden.
Veröffentlicht unter php, Javascript, Datenbanken, Performance, Security, Quicktips, webdev
1 Kommentar