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. Das sollte alles gewesen sein, was uns HTML 4 so zur Verfügung stellt.

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).

Veröffentlicht unter Javascript, webdev | 8 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:

  1. Vor dem Komma hat unser Ergebnis logischerweise eine 0
  2. Die Zahl wird mit 2 multipliziert (0.6 * 2 = 1.2)
Veröffentlicht unter Javascript, webdev | 3 Kommentare

Best-of-the-Web 4

Und hier die nächste Runde an interessanten Links.

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.

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. War der Benutzer bereits auf einer Webseite X, hat er die Bilder dieser Seite in seinem Browsercache. Was muss der Angreifer tun?

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.
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.

Veröffentlicht unter php, Javascript, webdev | 13 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:

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.

Veröffentlicht unter php, Javascript, Datenbanken, Performance, Security, Quicktips, webdev | 1 Kommentar