JavaScript Breakpoint

Um in JavaScript einen Breakpoint zu setzen, kann man einfach im Code

debugger;

an der gewünschten Stelle einfügen.

Das Programm stoppt dann beispielsweise bei Ausführung der Funktion an der gewählten Stelle:

function foo() {
    var bar = "foobar";
    debugger;
    return bar;
}

Update: wichtig ist, dass ihr die Developer Console dabei geöffnet habt (Chrome via Rechtsklick -> Inspect Element)

Grid mit Obstacles – pathfinding.js

Pathfinding.js ist eine klasse Bibliothek, die euch diverse Pathfinding-Algorithmen zur Verfügung stellt. Als ich ein Grid mit Obstacles, also Hindernissen, nach Anleitung erstellen wollte, stieß ich jedoch auf einen kleinen Fehler. Im Beispielcode auf der Seite wurde dem Grid-Konstruktor lediglich die Matrix übergeben, die begehbare und nicht begehbare Felder übergibt (Zeile 9).

var matrix = [[0, 0, 0, 0, 0],
              [1, 1, 1, 1, 0],
              [0, 0, 0, 0, 0],
              [0, 1, 1, 1, 1],
              [0, 0, 0, 0, 0],
              [1, 1, 1, 1, 0],
              [0, 0, 0, 0, 0]];

var grid = new PF.Grid(matrix);

var finder = new PF.AStarFinder({allowDiagonal: true});
var path = finder.findPath(0, 0, 4, 6, grid);

Das führte bei mir schließlich, nachdem ich die Pfadsuche mit A* durchführen wollte zu:

Uncaught TypeError: Cannot read property ‚0‘ of undefined

Übergibt man dem Konstruktor in Zeile 9 noch die passenden Dimensionen des Grid, klappt es auch mit dem Pathfinding:

var matrix = [[0, 0, 0, 0, 0],
              [1, 1, 1, 1, 0],
              [0, 0, 0, 0, 0],
              [0, 1, 1, 1, 1],
              [0, 0, 0, 0, 0],
              [1, 1, 1, 1, 0],
              [0, 0, 0, 0, 0]];

var grid = new PF.Grid(5, 7, matrix);

var finder = new PF.AStarFinder({allowDiagonal: true});
var path = finder.findPath(0, 0, 4, 6, grid);

HTML Title-Tag / Browser-Tab Notifications (the Facebook way)

Euch sind bestimmt schon einmal auf Facebook die Notifications aufgefallen, die Facebook euch über euren Browser Tab im Title mitteilt (in Form der Zahl an Notifications, die ihr momentan habt). Das sieht dann ungefähr so aus:

Bild Notification Title Tag Facebook

Die Manipulation des Titles im Browser-Tab könnt ihr ganz leicht mit jQuery nachbilden und euer eigenes Mini-Notification-Center bauen.

In meinem Beispiel habe ich die Notification rechts neben den Titel der Website gepackt. Ich persönlich finde, dass das schöner aussieht. Ist aber Geschmackssache, wie so ziemlich alles 😉

Nun gut, dann fangen wir einmal an. Zuerst erstellen wir eine simple HTML-Grundstruktur:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>upsession</title>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery-method.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>some text <br />
<a href="#" class="increase">increase notification</a>
<br />
<a href="#" class="decrease">decrease notification</a>
</body></html>

Was wir gleich machen, ist die jQuery-Library und unsere .js-Datei für unsere jQuery-Methode einbinden. Bitte beachtet, dass ich hier eine veraltete jQuery-Library eingebunden habe, alles aus Bequemlichkeit weil ich das so in meiner Vorlage hatte und diese Funktion keine neuere Library benötigt 😉 Just laziness 😉 jQuery liegt stand heute, 28.01.2012 in Version 1.7.1 vor, also nutzt am besten gleich die neue Version.
So, was haben wir nun. Wir haben eine HTML-Seite, die es uns ermöglichen soll die Notifications im Title der Seite per Click zu inkrementieren (erhöhen) oder zu dekrementieren (herabsetzen).

Nun brauchen wir das passende jQuery-Script dazu. Das könnte zum Beispiel so aussehen:

$(document).ready(function(){
	var n = 0;
	
	$(".increase").click(function(){
		n++;
		$("title").text("upsession ("+n+")");
	});
	
	$(".decrease").click(function(){
		n--;
		$("title").text("upsession ("+n+")");
		if (n < 1) {
			n = 0;
			$("title").text("upsession");
		}
	});
});

Damit wir keine negativen Notifications erhalten können, schließen wir das in Zeile 12 – 15 durch eine einfache if-Abfrage aus.
Ansonsten ist das Script relativ selbsterklärend. Sobald auf einen Link geklickt wird (achtet auf die Klassennamen) wird die Notification entweder inkrementiert oder dekrementiert und damit das Title-Tag abgeändert.

Das komplette Projekt könnt ihr euch hier downloaden: HTML Notifications Project Zip