Ab Februar 2012 findet in Oldenburg regelmässig ein Webmontag statt.
Der erste Webmontag findet statt am 06.02.1012 von 19:00 bis 21:00 Uhr
Seelig Kulturlounge
Schloßplatz 2
http://www.seelig-ol.de/
Themen werden hierbei u.a. sein:
Weitere Infos zum Webmontag finden sich unter:
Kategorien: Veranstaltungen
Wie gerade erfahren habe ... in diesem Jahr am findet die Veranstaltung vom 08.09.2012 bis zum 09.09.2012.
Der Veranstaltungsort wird noch festgelegt.
Weitere Infos unter http://bcoldb.mixxt.de/ bzw. unter http://www.barcamp-oldenburg.de/
P.S. wer nicht weiss was ein Barcamp ist: http://de.wikipedia.org/wiki/Barcamp
Kategorien: Tipps, Veranstaltungen
Wer sich intensiver mit der Programmierung von Webanwendungen beschäftigen darf kommt über kurz oder lang zumeist nicht um den Einsatz von JavaScript herum. Sei es nun JavaScript in seiner Reinform oder als Framework wie ProtoType, jQuery, ExtJS ...
In diesem Workshop wurde gezeigt wie einfach es ist mit Hilfe vom Firebug JavaScript zu debuggen. Der Workshop kratzte nur an der Oberfläche und zeigte dem absoluten Neuling einen Einstieg in die Materie.
Firebug ist eine Erweiterung für den Firefox-Browser. Die Erweiterung ist kostenlos erhältlich. Ich gehe hier in diesem Artikel nicht auf die Beschaffung, Installation und den Aufruf von Firebug ein.
Welche Arten von Debuggen gibt es exemplarisch für JavaScript?
Hier ein einfaches Beispiel fürs Debuggen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>untitled</title> <script type="text/javascript" charset="utf-8"> </script> </head> <body> </body> </html>
Im folgenden beschäftige ich mich nur mit dem Bereich der zwischen <script ...> und </script> steht. Die hier erwähnte Datei im Endformat kann gerne unter der Adresse http://www.webstammtisch-oldenburg.de/js-workshop/beispiel1.html heruntergeladen werden.
Um den Wert einer Variablen anzuzeigen mit dem alert() Befehl gebe ich z.B. ein:
<script ...> var a=123; alert(a); </script>
Dies erzeugt einen modalen Dialog mit der Ausgabe des Wertes 123.
Um den Programmablauf nicht anzuhalten sondern Werte während der Ausführung zu "protokollieren" kann der Befehl console.log() eingesetzt werden. Wichtig hierbei ist zu beachten das keine Skripte an Kunden ausgeliefert werden dürfen bei denen noch ein console.log() - Befehl integriert ist. Firefox kann mit solchen Resten problemlos umgehen aber Browser wie z.B. der Safari stürzen beim Auffinden eines solchen Befehls leider ab.
<script ...> var a=123; console.log(a); </script>
In diesem Beispiel wird der Wert 123 in der JavaScript-Konsole des Firefox ausgegeben sobald diese Zeile ausgeführt wird.
Dies ist schon alles recht hilfreich. Interessant wird es allerdings wenn es z.B. darum geht eine Programmlogik nachzuvollziehen. Hierbei können die beiden Möglichkeiten mit alert() bzw. console.log schnell an ihre Grenzen stoßen.
Firebug
Obiges Bild zeigte schon einen Teil vom Firebug. Firebug hat die Konsole integriert (sie ist aber auch ohne Firebug in Firefox integriert).
Ich erweitere das Scriptbeispiel um ein paar Zeilen um ein belastbareres Beispiel für den Debugger zu haben:
<script ...>
function berechne(a,b){
var wert1 = parseInt(a);
var wert2 = parseInt(b);
var ergebnis = parseInt(wert1+wert2);
document.getElementById('ergebnis').value=ergebnis;
}
</script
</head>
<body>
<form >
<label for="wert_1">Wert 1</label><input type="text" name="wert_1" value="" id="wert_1">
<label for="wert_2">Wert 2</label><input type="text" name="wert_2" value="" id="wert_2">
<label for="ergebnis">Ergebnis</label><input type="text" name="ergebnis" value="" id="ergebnis">
<p><input type="button" value="addiere" onClick="berechne(document.getElementById('wert_1').value,document.getElementById('wert_2').value)"></p>
</form>In diesem Beispiel haben wir ein kleines Formular mit dem zwei Werte addiert werden und das Ergebnis im dritten Formularfeld ausgegeben wird.
Nun kann im Firebug im Bereich Skript der Quelltext eingesehen werden.
Ansicht des Firebugs mit Quelltext aus unserem Beispiel
Wenn wir nun die Variable "wert1" überwachen wollen bzw. sehen wollen was hier passiert wenn das Skript abgearbeitet wird dann kann hier ein "Haltepunkt" gesetzt werden indem mit der Maus auf die Zeilennummer geklickt wird.
Durch das setzen des Haltepunktes hält Firebug nun den Programmablauf in eben dieser Zeile an. Also laden wir die Seite einmal neu und klicken auf den Button "addiere".
Zeilenzeiger zeigt das in Zeile 11 der Haltepunkt erreicht worden ist.
Im rechten Bereich des Firebugs kann man nun sehen welche Variablen zu diesem Zeitpunkt wie gesetzt sind. Mit Hilfe der Ausführungsknöpfe kann nun das Programm Zeile für Zeile abgearbeitet werden. Dabei kann auf der rechten Seite beobachtet werden wie sich die Variablenwerte verändern.
Es ist auch möglich an einer Stelle nur dann anzuhalten wenn ein bestimmter Wert erreicht ist. Hierzu klickt man auf die nachfolgende Zeile von dort wo man z.B. den Wert setzt. Ich will z.B. das immer dann angehalten wird wenn der Variablen "wert1" der Wert 77 zugewiesen wird. Hierzu muss ich die Zeile 12 mit einem Haltepunkt versehen der auf diese Bedingung reagiert. Die kann über einen Klick auf die Zeilennummer 12 geschehen. Allerdings muss man in diesem Fall die rechte Maustaste benutzen. In dem kleinen "Ballonfenster" muss dann die Bedingung eingegeben werden: wert1==55
Soweit die kurze Zusammenfassung des 30 minütigem Workshops. Weitere Infos sind zu finden unter:
http://getfirebug.com/javascript
Bis zum nächsten Webstammtisch ...
Henning
Kategorien: Material
Am Freitag dem 27.01.2012 findet zum zweiten Mal der Oldenburger Web-Stammtisch statt. Wie beim letzten Mal wieder in Hansen's Café in Bad Zwischenahn.
Dieses Mal findet am Abend ein Workshop zum Thema "JavaScript-Debugging" statt.
Wer an diesem kostenlosen Abend teilnehmen möchte der melde sich bitte bis zum 23.01.2012 bei mir entweder telefonisch (04403 6919650) oder per E-Mail (heyne@redroot.de).
Getränke und Speisen gibt es á la cart.
Bis dahin
Henning
Kategorien: Veranstaltungen
Hallo Stammtisch,
hab leider gerade erst erfahren, daß sich die PHPUG Hamburg morgen, am 10.Januar 2012, trifft. Das ist mir etwas zu kurzfristig.
Treffen finden dort an jedem 2.ten Dienstag des Monats statt. Falls jemand demnächst Lust auf einen fachlichen Ausflug nach Altona hat, immer Bescheid sagen.
Grüße,
Wolfgang
Kategorien: Veranstaltungen
