Guggat emol Blog» Download für JavaScript wiederkehrender Event mit .htaccess Anpassung

Download für JavaScript wiederkehrender Event mit .htaccess Anpassung

Roland — Sat, 16 Jan 2010 22:08:37 +0000

Beim Artikel Mit JavaScript einen wiederkehrenden Event erzeugen hat Andy gefragt, ob ich den Beispielcode so aufbereiten kann, dass man ihn herunterladen kann.
Unter Javascript_Download habe ich nun zwei Dateien angelegt, die den Quellcode darstellen.
Ihr könnt die Datei mainpage.html einfach anklicken und sehen, wie der Timer alle 10 Sekunden einen Alarm ausgibt.
Natürlich könnt ihr die Dateien auch runterladen und euch damit vergnügen

.htaccess Anpassung

Damit die javascript_download Seite browsbar ist, habe ich eine .htaccess eingerichtet in der ich den Befehl Options +Indexes eingetragen habe.
Jetzt ist dieses Verzeichnis, und genau nur dieses Verzeichnis, einsehbar.
Diese Option finde ich schick, denn damit kann man sich schnell mal ein Verzeichnis zum Browsen und Liebhaben freischalten.

Kleine Aufgabe um mit JavaScript Events rumzuspielen

Roland — Thu, 28 May 2009 08:13:23 +0000

Dieser Artikel ist Teil 21 von 24 der Artikelserie Grundlagen

Hier eine kleine Aufgabe:
Du hast eine HTML Seite auf der eine Eingabemöglichkeit (z.B. eine Textarea oder ein Input Field) vorhanden ist.

Fokus setzen

Wenn du die HTML Seite lädst, wird der Cursor zuerst in dieses Eingabefeld positioniert.

Ausgabe der eingegebenen Zeichen

Wenn du in dem Eingabefeld etwas eingibst, dann wird jedes eingegebene Zeichen in einem Ausgabebereich (paragraph oder so…) erscheinen. Im Startzustand werden die Zeichen einfach wieder so ausgegeben wie sie vom Anwender eingegeben worden sind.

Sonderfall Text falschrum ausgeben

Wenn die Checkbox “Falschrum” angeklickt wird, dann werden alle eingegebenen Zeichen verkehrt herum in dem Ausgabefeld ausgegeben.

Lösungsschritte

Schreibe zuerst auf, welche Mittel du zur Umsetzung einsetzten willst.
Beschreibe jede Datei die du erstellen willst.
Beschreibe welche Events du abfangen willst und warum du diese abfangen willst.
Schreibe die einzelnen Funktionen in Pseudocode. Also was muss bei der Initialisierung geschehen? Was wenn eine Taste gedrückt wurde?
Programmiere zuerst alles ausser den Sonderfall.
Wenn das klappt programmiere den Sonderfall.
Stelle die Ergebnisse auf das Blog damit andere es auch sehen können. (Natürlich nur, wenn du auf das Blog Zugriff hast wie Jozo zum Beispiel )

Aufgabe Ratespiel um Mengenlehre zu verwenden

Roland — Thu, 07 May 2009 04:18:24 +0000

Dieser Artikel ist Teil 19 von 24 der Artikelserie Grundlagen

Zu den Grundlagen bei der Ausbildung zum Fachinformatiker gehört es dazu sich ein wenig mit der Mengenlehre auszukennen.
Die große Frage ist da natürlich “Wieso soll ich Mengenlehre können, wenn ich doch nur programmieren will?”
Und die Antwort darauf ist relativ einfach:
Manchmal braucht man diese Grundfertigkeit um ein Programmierproblem zu lösen.

Ratespiel

Lass uns mal ein kleines Ratespiel basteln.
In diesem Ratespiel geht es darum, dass der Computer sich ein paar Zufallszahlen zusammenkratzt und der Spieler diese erraten soll.
Wenn der Spieler alle Zufallszahlen erraten hat, hat er gewonnen.

Dokumentation

Lese diese Aufgabe hier komplett durch und schreibe eine Dokumentation die alle benötigten Funktionen beinhaltet. Beschreibe zuerst die mathematischen Zusammenhänge der drei Mengen. Mach dir klar welche Komponenten du nacheinander erstellen musst.
Beispielsweise kann die Highscore Verwaltung unabhängig vom Spiel erstellt werden. Du kannst also zuerst das Spiel erstellen und dann den Highscore. Oder anders herum.

Initialisierung

Erstelle mit JavaScript die notwendige Oberfläche.
Diesmal muss der Anwender ein Eingabefeld bekommen, in dem er die jeweilige zu ratendene Zahl eingeben kann. Wenn er dies getan hat, drückt er den “Rate” Button und der Rechner kontrolliert, ob diese Zahl mit einer der zu erratenden übereinstimmt.
Die Obermenge (also alle möglichen zu ratenden Zahlen) werden in einer Liste dargestellt.
Die bisher verwendeten Zahlen sind eine Teilmenge und werden in einer zweiten Liste dargestellt.
Falls der Anwender richtige Zahlen erraten hat, werden diese in einer dritten Liste dargestellt. Die Schnittmenge der erratenen Zahlen und der falsch geratenen Zahlen ergibt die Menge der Zahlen die der Anwender bisher eingegeben hat.
Für Meldungen baust du wieder ein id=”message” Feld ein.
Als Letztes soll noch eine Ausgabe erfolgen, die angibt wie häufig bisher eine Zahl geraten wurde.

Verwaltung der Obermenge und der bisher verwendeten Zahlen

Wenn der Anwender eine Zahl verwendet hat, wird diese in der Obermengenliste entfernt. Du musst also eine Funktion schreiben, die kontrolliert ob die geratene Zahl eine Teilmenge der Obermenge ist. Oder anders gesagt, du musst die Schnittmenge der bisher geratenen und der Obermenge durchführen.
Falls dem so ist, wird sie aus der Obermengenliste entfernt und kontrolliert ob sie Teil der zu erratenden Untermenge ist.
Falls die verwendete Zahl nicht in der Obermenge vorkommt, muss eine entsprechende Meldung ausgegeben werden. Also “Diese Zahl ist nicht innerhalb der möglichen zu erratenden Zahlen enthalten. Entweder hast du die Zahl schon verwendet oder sie liegt außerhalb des erlaubten Bereichs”.
Die geratene Zahl wird entweder in der Liste der falsch geratenen Zahlen oder in der Liste der korrekt erratenen Zahlen geführt.

Zählen

Jedesmal wenn eine Zahl erraten wurde, wird der Spielzugzähler um eins erhöht und dargestellt.
Logischerweise hat der Spieler gewonnen, der am wenigsten Spielzüge benötigt hat.

Highscore Verwaltung

Wenn der Spieler alle Zahlen erraten hat, wird die aktuelle Highscore Tabelle vom Server geladen und entsprechend angepasst. Das bedeutet, dass du auf dem Server die aktuelle Highscore Liste speichern musst. Diese muss vom Client geladen und manipuliert werden können. Hier darfst du frei entscheiden ob der Client diese Liste direkt verändert, oder einfach nur das Ergebnis zum Server schickt. Wichtig ist nur, dass der Client am Ende die Top 10 der besten Spieler anzeigt.

Fazit

Da wir uns mit Mengenlehre ein wenig auskennen, konnten wir die Verhältnisse der einzelnen Mengen (Obermenge und die Teilmengen Ergebnisse und falsch gewählte Zahlen) hiermit beschreiben. Wir können uns die einzelnen Mengen gut vorstellen. Dieses Beispiel zeigt, dass es sich auszahlt ein wenig Mengenlehre verstanden zu haben.

Lösungsvorschlag um Eingabefelder während der Eingabe mit JavaScript zu überprüfen

Jozo — Wed, 29 Apr 2009 14:59:30 +0000

Dieser Artikel ist Teil 15 von 24 der Artikelserie Grundlagen

Hier ein Lösungsvorschlag für die Aufgabe aus dem Artikel Eingabefelder während der Eingabe prüfen.

Um diese Anwendung zu realisieren reicht HTML und JavaScript aus. Ausserdem arbeiten wir auf Client -Seite, und deswegen passt JavaScript doch eigentlich auch ganz gut.

Für die Realisierung habe ich mal eine “eingabe.html” Seite erstellt welche wie erwünscht ein einfaches Eingabefeld beinhaltet und wie folgt aussieht.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Eingabeoberfläche
Bitte gebe Zahlen zwischen -10 und 100 ein.

Die JavaScript Datei mit dem Namen “initialize.js”, befüllt unsere HTML-Seite mit dem passenden Event “onkeyup”. Weiterhin befindet sich die Funktion inputCheck(), welche die Eingabe überprüft, ebenfalls in dieser Datei. Die Trennung der Initialiserung und der Funktion hab auch ich mir bei diesem kleinen Beispiel gespart. Hier nun die initialize.js

/**
* Schreibt den Event onkeyup in das Input-Feld.
*/
function initialize(){
var inputField = document.getElementById("input");
inputField.setAttribute("onkeyup","inputCheck();");
}
/**
* Die Funktion welche die Prüfung der Zahlen durchführt und passende Meldungen
* in den Paragraphen mit der id="message" schreibt.
*/
function inputCheck(){
var eingabe = document.getElementById("input").value;
var messageField = document.getElementById("message");
// ist das eingabefeld leer wird wie die Ursrpüngliche Meldung angegeben.
if(eingabe == ""){
messageField.innerHTML = "Bitte gebe Zahlen zwischen -10 und 100 ein.";
}else{
// Ist die Eingabe kleiner oder gleich -11
if(eingabe < = -11){
messageField.innerHTML = "Die Zahl " +eingabe+ " ist zu klein";
}else{
// Ist die Eingabe kleiner oder gleich 100 und grösser oder gleich -10
// ist das im gültigen Bereich.
if(eingabe <= 100 && eingabe >= -10){
messageField.innerHTML = "Die Zahl " +eingabe+ " ist ok";
}else{
// Ist die Eingabe grösser oder gleich 101, ist die Zahl zu gross
if(eingabe >= 101){
messageField.innerHTML = "Die Zahl " +eingabe+ " ist zu gross";
}else{
// Falls die Eingabe keine Zahl ist (is Not a Number) wird ein unerlaubter
// Wert gemeldet.
if(isNaN(eingabe)){
messageField.innerHTML = eingabe+" ist ein unerlaubter Wert";
}
}
}
}
}
}

Aufgabe Eingabefelder während der Eingabe überprüfen

Roland — Mon, 27 Apr 2009 21:36:34 +0000

Dieser Artikel ist Teil 12 von 24 der Artikelserie Grundlagen

Hier eine kleine Aufgabe mit der auf Anwendereingaben reagiert werden soll.

Erstelle eine kleine HTML Seite auf der ein Eingabefeld (input type=”text”) vorhanden ist.
Weiterhin soll auf der Seite eine ein Paragraph mit der id=”message” vorhanden sein.
Auf der Seite wäre es schön, wenn noch eine Eingabeaufforderung vorhanden wäre. So nach dem Motto “Bitte gebe Zahlen zwischen -10 und 100 ein.

Wenn der Anwender nun eine Zahl eingibt, soll währen der Eingabe kontrolliert werden ob es sich um eine korrekte Zahl handelt.
Korrekte Zahlen sind dabei Zahlen zwischen -10 und 100.

Folgende Ergebnisse werden erwartet:

Eingabe von -13
Fehlermeldung im message-Paragraph ”Zahl zu klein”
Eingabe von 0
Ausgabe im message-Paragraph: “Alles ok”
Eingabe von 102
Fehlermeldung im message-Paragraph ”Zahl zu gross”
Eingabe von “alfred”
Fehlermeldung im message-Paragraph ”Unerlaubter Wert”

Soweit klar?
Die Eingabeüberprüfung soll während der Anwender die Zahlen eintippt durchgeführt werden.

Aufgabe 1:

Welche Programmiersprache, und warum, wirst du für die Realisierung dieser Aufgabe einsetzen?

Aufgabe 2:

Schreibe mit Pseudocode was du genau machen willst.
Welche HTML, PHP, JavaScript Dateien benötigst du für eine saubere Umsetzung?

Aufgabe 1:

Realisiere die Eingabefunktion.

Objekte in JavaScript mit JSON deklarieren

Roland — Sun, 26 Apr 2009 19:44:57 +0000

Dieser Artikel ist Teil 26 von 26 der Artikelserie Programmieren

Im Artikel JavaScript Klassen mit Object-Literal Syntax erstellen habe ich über die verkürzte Darstellungsform beim Erstellen von Klassen in JavaScript geschrieben.
Nachdem ich drüber geschlafen habe, ist mir wieder das Wort JSON (Javascript Object Notation) eingefallen. Blöd wenn man ein bisschen verkalkt ist
Unter JSON können sich viele Menschen schon viel mehr vorstellen gelle?

Ist JavaScript denn nun wie Java?

JavaScript wird zwar wegen dem Marketingnamen von Netscape häufig mit Java in Verbindung gebracht. Wenn man sich aber einfach klar macht, dass JavaScript einfach nur ein Name ist, dann wird einem auch ziemlich schnell klar dass man Java nicht mit JavaScript gleichsetzen darf.
Immerhin hat JavaScript früher mal LiveScript geheisen und dass hat nun wirklich nichts mit Java zu tun.
Die Notationen sind zum Teil identisch. Und das macht es alten C++ und Java Tippern, wie mir zum Beispiel, nicht einfacher in den Mustern der anderen Sprachen zu denken.
Aber JavaScript ist nun mal anders.

Arrays sind Objekte

In JavaScript wird sehr viel über Arrays beschrieben.
Ein Array kannst du wie ein Assoziatives Array in PHP oder anderen Sprachen verwenden.
Du kannst aber auch Funktionen in die Arrays einschreiben. Genau das habe ich ja im letzten JavaScript Beispiel getan ohne es zu begreifen .
Wenn du die JSON Schreibweise mal gewohnt bist, kannst du komplexe Datenstrukturen übersichtlich darstellen. Und genau darum geht es bei JSON und dem Objekteinsatz in JavaScript.

Typensicherheit in JavaScript

Eben genau das gibt es in JavaScript nicht. Wenn du bei Sprachen, wie Java, deine Klassen deklarierst, hast du Typsicherheit. Du kannst einer Variablen, die einen Integer darstellt, keinen Boolean zuweisen. In JavaScript werden Variablen einfach benannt und du kannst ihnen zuweisen was du willst. Es ist also erlaubt folgende Sequenz einzugeben:

var eineVariable = 12;

eineVariable = "Hallole du dolle Welt!";
eineVariable = new Object();

Wenn du Java Entwickler bist, bekommst du beim Anblick der Sequenz normalerweise Zahnweh. Ist aber egal. JavaScript ist eine andere Art von Programmiersprache und wenn man das einsetzen will, dann muss man damit umgehen wie es ist. Ansonsten kämpfst du immer gegen die Sprache an. Das bringt dich aber nicht weiter.
Programmiersprachen sind dazu da, Business-Probleme zu lösen. Wenn du mehr Zeit damit verbringst zu phillosophieren warum etwas nicht so toll ist wie es sein könnte, verlierst du wertvolle Zeit. Nimm die Zeit lieber zum Ausschlafen, Wandern oder Blog-Artikel schreiben.

Nochmal zur JSON Schreibweise

In JSON wird die Schlüssel-Wertezuweisung grundsätzlich durch einen Doppelpunkt beschrieben.

var eineVariable = new Array(){

alter : 42;
setAlter : function(alter){
this.alter = alter;
}
}

Zwischen dem Schlüssel (z.B. alter) und dem Wert dürfen mehrere Leerzeichen stehen. Du darfst also einrücken und somit die Lesbarkeit erhöhen.
Ich habe den Code für das letzte Beispiel etwas überarbeitet und nun vollständig auf JSON Schreibweise umgebaut.
Dabei habe ich mal wieder die Fehlerkonsole eingeschaltet und meine nicht deklarierten Variablen mit dem Schlüsselwort “var” definiert. Es ist doch immer wieder schön, wenn die Fehlerkonsole keine Fehler anzeigt
Beim Erstellen dieses Beispiels war ich vermutlich nicht ganz wach gewesen. Normalerweise schalte ich immer die Fehlerkonsole ein und bau Code der keine Informationen, Warnungen oder gar Fehler produziert.
Wenn du JavaScript in deine Webseiten einbaust, solltest du beim Testen immer die Fehlerkonsole geöffnet haben. Sie verrät dir viele spannende Details auf die du ansonsten nur schwer kommen kannst…

Verschachtelung

Wenn deine Datenstruktur nicht flach, sondern eher ein bisschen verschachtelt ist, kann das mit JSON auch sehr schön beschrieben werden.
Schau dir dazu doch einfach mal JSON Beispiel zum Verschachteln an.
Die Verschachtelung erfolgt durch [] Klammern.
Also ungefähr so:

{

a:6,
a_a=[
b:function(){},
c:42,
d:null
],
e:3,
f:5
}

Den einzelnen Attributen werden ihr Werte durch die Doppelpunkte zugewiesen und die Verschachtelung erfolgt durch die [] Klammern.
Ich habe mich am Anfang ein wenig gegen diese Darstellung gesträubt. So im Lauf der Zeit habe ich jedoch die Schönheit und die klare Darstellung zu schätzen gelernt.

Modelle von der Oberfläche trennen

Roland — Fri, 24 Apr 2009 17:22:47 +0000

Dieser Artikel ist Teil 11 von 24 der Artikelserie Grundlagen

Bei komplexeren Webapplikationen ist es eine gute Idee die Views, also die Ansichten, von den Modellen getrennt zu halten.

Die Idee ist aus folgenden Gründen gut:

Der Webdesigner soll nicht mit unleserilchem Code belastet werden.
Getrennt entwickelter Code ist übersichtlich und einfach zu warten.
Wenn ein Webdesigner in seinem HTML Code JavaScript Code-Segmente einpflegen muss, ist die Gefahr gross dass er dies falsch macht.
Ein Modell soll Daten speichern und verwalten und nicht mit einer View direkt verbunden sein. Falls eine zweite View hinzukommt, musst du ansonsten das Modell verändern.
Wenn die View direkt mit einem Modell verkuppelt wird, werden spätere Änderungen sehr aufwändig.

Es gibt noch hundert andere Gründe. Aber belassen wir es mal dabei.

Das Model View Controller Pattern

Ich werde in der Serie Design Pattern die Eigenschaften des Model View Controller Pattern genauer beleuchten. Hier möchte ich einfach mal zeigen wie die Trennung von Daten (Modell), der Ablaufsteuerung (Controller) und der View (der HTML-Ansicht) funktionieren kann.

Die View

Ich habe eine kleine HTML-Seite gebaut, die unsere View darstellen soll. Diese HTML Seite beinhaltet nur HTML-Tags und im Header Bereich die Einbindung der JavaScript Datei in der ich den Controller und das Modell deklariert habe. Du kannst sie unter dem Link PrototypLiteral aufrufen.
In der Seite passiert nicht viel Spannendes. Du kannst einen Namen und Vornamen eingeben und das Person-Objekt verändert die Attribute ein wenig.

Wenn du aus den Eingabefeldern herausspringst, werden die jeweiligen Meldungsparagraphen entsprechend verändert.

Der Controller und das Modell

In der Datei PrototpyLiteral JavaScript habe ich einen Controller und ein Modell eingeschrieben.
Wenn du die Datei aufmachst findest du folgenden Code:

/**

* Erstellt im HTML-Dokument die nötigen Eventhandler und initialisiert den Controller dieser Webappliaktion.
*/
function onload(){
controller = new PrototypController(this.document);
}
/**
* Der Controller, der die Aktivitäten innerhalb unserer Webapplikation steuert.
* Im Konstruktor werden die Eingabefelder des HTML Dokuments mit den notwendigen onblur-Events ausgestattet.
*/
function PrototypController(document){
this.document = document;
this.person = new Person();
var inputName = document.getElementById("name");
inputName.onblur = this.onBlurHandlerName;
inputName.value = this.person.getName();
// Beim Event wird das betroffene HTML-Element übergeben. Dieses HTML Element muss eine Referenz auf
// unseren Controller erhalten. Ansonsten können wir keine Verknüpfung zwischen der Oberfläche und dem Modell erreichen.
inputName.controller = this;
var inputFirstName = document.getElementById("firstname");
inputFirstName.onblur = this.onBlurHandlerFirstName;
inputFirstName.value = this.person.getFirstname();
inputFirstName.controller = this;
}
/**
* Implementation der benötigten EventHandler.
*/
PrototypController.prototype={
onBlurHandlerName:function(){
// Von der Referenz auf den Controller das Dokument und das Personenobjekt laden.
var document = this.controller.document;
var person = this.controller.person;
var value = (this.value) ? this.value : "Kein Name";
person.setName(value);
message = document.getElementById("message_name");
message.innerHTML = person.getName();
},
onBlurHandlerFirstName:function(){
var value = (this.value) ? this.value : "Kein Name";
var document = this.controller.document;
var person = this.controller.person;
person.setFirstname(value);
message = document.getElementById("message_firstname");
message.innerHTML = person.getFirstname();
}
}
/**
* Das Modell, welches eine Person verwaltet.
*/
function Person(){
this.name = "";
this.firstName = "";
}
Person.prototype={
setName:function(name){
this.name = name;
},
getName:function(){
if(this.name != ""){
return this.name+"_vomModel";
}
return "";
},
setFirstname:function(firstName){
this.firstName = firstName;
},
getFirstname:function(){
if(this.firstName != ""){
return this.firstName+"_vomModel";
}
return "";
}
}

In normalen Webanwendungen sollte das Modell und der Controller in einzelnen Dateien liegen. Darauf habe ich im Moment verzichtet, da dieses Beispiel sehr klein und übersichtlich ist.
Die erste Funktion onload() wird im HTML beim Laden der Seite aufgerufen.
Diese Funktion initialisiert einen Controller, der die Abläufe im System überwachen soll.
Der Controller (hier PrototypController) verknüpft das HTML-Dokument mit sich selbst, indem er die notwendigen Events wie onblur in das HTML-Dokument einträgt.
Weiterhin erstellt er das Modell (Person) in dem die Daten gespeichert werden sollen.
Wenn ein Event auftritt wird eine der onBlurHandlerXXX Methoden aufgerufen. Diese steuern den eigentlichen Programmablauf.
Der Controller ist somit das Bindeglied zwischen der Oberfläche und dem Modell.
Wir können für einzelne Eingabeelemente das Model View Controller Pattern verwenden und so eine saubere, einfach zu wartende und stabile Verwaltung unserer Daten hinbekommen.

Eventhandler im JavaScript mit dem HTML Dokument verknüpfen

Roland — Fri, 17 Apr 2009 05:53:57 +0000

Dieser Artikel ist Teil 25 von 26 der Artikelserie Programmieren

Als ich mit JavaScript angefangen habe, wäre ich beinahe an der Variablengültigkeit verzweifelt.
Folgende Problemstellungen wollte ich lösen:

Im Source-HTML kein JavaScript

Ich wollte, dass meine JavaScript Befehle im HTML nicht eingetragen werden müssen.
Das bedeutet, dass keine onblur, onkeypressed oder sonst was für Attribute in den HTML Elementen hart reingeschrieben werden sollten.
Also las ich die Grundlagenbücher und Grundlagenbeschreibungen im Internet und erkannte, dass ich beim Laden der HTML-Seiten meine JavaScript Trigger ins HTML Dokument einschreiben kann.
Meine lieben Webdesigner bekommen ihr geliebtes HTML und müssen sich dann nur noch an unsere Namenskonventionen für IDs halten.
Beide Personengruppen (Hacker und Designer) sind voneinander getrennt und glücklich.
Ich konnte meine Events also als nachträglich reinfummeln.
Beispiel:

/**

* Erstellt im HTML-Dokument die nötigen Eventhandler und initialisiert den Controller dieser Webappliaktion.
*/
function onload(){
controller = new PrototypController(this.document);
}
/**
* Der Controller, der die Aktivitäten innerhalb unserer Webapplikation steuert.
* Im Konstruktor werden die Eingabefelder des HTML Dokuments mit den notwendigen onblur-Events ausgestattet.
*/
function PrototypController(document){
this.document = document;
var inputName = document.getElementById("name");
inputName.onblur = this.onBlurHandlerName;
// Beim Event wird das betroffene HTML-Element übergeben. Dieses HTML Element muss eine Referenz auf
// unseren Controller erhalten. Ans onsten können wir keine Verknüpfung zwischen der Oberfläche und dem Modell erreichen.
inputName.controller = this;
var inputFirstName = document.getElementById("firstname");
inputFirstName.onblur = this.onBlurHandlerFirstName;
inputFirstName.controller = this;
}
/**
* Implementation der benötigten EventHandler.
*/
PrototypController.prototype={
onBlurHandlerName:function(){
// Von der Referenz auf den Controller das Dokument und das Personenobjekt laden.
var document = this.controller.document;
var value = (this.value) ? this.value : "Kein Name";
message = document.getElementById("message_name");
message.innerHTML = value;
},
onBlurHandlerFirstName:function(){
var value = (this.value) ? this.value : "Kein Name";
var document = this.controller.document;
message = document.getElementById("message_firstname");
message.innerHTML = value;
}
}

Im HTML Dokument lade ich diese JavaScript Datei und rufe die onload() Funktion auf.
Diese Funktion erstellt mir ein Controller Objekt. Der Controller (PrototypController) füllt in die input-Felder name und firstname die onblur Attribute ein. Weiterhin wird dem jeweiligen Eingabefeld die Referenz auf den PrototypController mitgegeben.
Das ist sehr wichtig.
Wenn der onblur (also das Verlassen des Feldes Event) aufgerufen wird, wird eine der Methoden des PrototypController aufgerufen.
Zum Zeitpunkt des Aufrufes stehen wir jedoch im Input-Feld. Somit ist “this” auch das Input Feld.
Wenn wir nun auf andere Element im Dokument verweisen wollen, benötigen wir eine Referenz darauf.
Das habe ich mit dem Verweis auf den Controller erledigt. Dieser beinhaltet einen Link auf das Dokument und kann somit die message-Elemente liefern.
Mich hat das Stunden gekostet, bis ich endlich begriff wo mein Aufruf eigentlich herkommt.
Die onBlurHandlerXXX Methoden sind Callback Funktionen. Das bedeutet, dass beim Aufruf nicht aus dem window oder document oder sonst wo her aufgerufen wird, sondern aus dem jeweiligen Input Element.
Überlege dir bitte wirklich genau, von wo dein Aufruf in deinem JavaScript- HTML DOM Konstrukt erfolgt. Ansonsten hast du plötzlich “undefined” Objekte und keine Ahnung warum das so ist.

Auch bei JavaScript immer die Variablen sauber deklarieren

Roland — Sat, 11 Apr 2009 00:15:09 +0000

Dieser Artikel ist Teil 24 von 26 der Artikelserie Programmieren

JavaScript ist keine typsichere Sprache. Du kannst Variablen uninitialisiert verwenden. Ich habe zum Beispiel im Literalen Prototyp Beispiel versäumt meine Fehlerkonsole einzuschalten und schon habe ich ein paar Variablen nicht richtig initialisiert.
Grundsätzlich ist eine nicht initialisierte Variable erst einmal eine globale Variable.
Bei kleinen, überschaubaren Scripts, ist das noch kein größeres Problem.
Wenn du aber eine Applikation schreibst und dann mehrere Bibliotheken und Scripte nachlädst, wird es schnell unübersichtlich. Globale Variablen haben den Nachteil, dass jeder sie ändern kann.
Wenn du also Scripte schreibst, sorge dafür dass deine Variablen so lokal wie möglich initialisiert sind. Beispiele:

// Außerhalb einer Funktion deklarierte, globale, Variable.
var global = "voll fett";
function meineFunktion(){
// Deklaration einer lokalen Variablen.
var lokaleVariable="voll schlank";
}

Wenn du nun z.B.

function meineFunktion(){
// Ohne Deklaration eine Variable eingeführt.
lokaleVariable="voll schlank";
}

schreibst, also dein “var” Schlüsselwort nicht angibst, wird die Variable zwar angelegt, deine Fehlerkonsole meldet jedoch eine nicht initialisierte Variable. Was dann bei den jeweiligen Browsern passiert kannst du nicht 100% vorraussehen. Eventuell passiert gar nichts. Aber wenn du Pech hast, dann wird plötzlich ein anderes Verhalten deinen Programmfluss stören.
Also, wie der Schwabe zu sagen pflegt: “Sauber schaffe und ned huddle”
Immer sauber arbeiten und nicht pfuschen.

Globale Variablen in JavaScript

Roland — Sat, 04 Apr 2009 05:58:11 +0000

Dieser Artikel ist Teil 10 von 24 der Artikelserie Grundlagen

Ich habe schon ein paar mal auf den Variablen in JavaScript rumgehackt. Doch irgendwie glaube ich, es kann helfen wenn man ab- und zu mal darüber schreibt.
Vor kurzem bin ich über folgendes Konstrukt gestolpert:

// some code
….
function sayHello(){
hello="huhu";
alert("hello");
}

Ok, es war eine andere Funktion und alles war viel komplizierter. Aber die Aussage bleibt die Gleiche.
Die Variable hello wird dem Wert “huhu” zugewiesen. Wenn du deine Fehlerkonsole öffnest, wirst du beim Ausführen dieses Codes eine Information erhalten.
Diese Information besagt, dass eine Variable nicht initialisiert wurde.
Eben, hello wurde nicht richtig deklariert. Was wir hier eigentlich wollen ist:

// some code
….
function sayHello(){
var hello="huhu";
alert("hello");
}

Jetzt weiss der JavaScript Interpreter, dass es sich um eine lokale Variable handelt.
Keine Information mehr in der Fehlerkonsole.

Aber das ist nicht mal das Problem!

Wenn man sportlich genug ist und es für unmännlich hält die Informationen in der Fehlerkonsole zu betrachten, dann ist die nicht Deklaration der hello-Varialben nicht so schlimm.
Nur die Welt ist wie immer ein wenig grösser und komplexer.
Die Variable hello ist nicht deklariert worden und der JavaScript Interpreter definiert nun, dass diese Variable eine globale Variable ist.
Ok, sagt der Cowboy. Wenn ich nur ein Script schreibe weiss ich ja, dass ich nur eine hello Variable habe.
Was unser Cowboy aver vergisst, ist dass unsere Scripte in andere Scripte eingebunden werden können.
Programme haben die dumme Angewohnheit im Lauf der Entwicklung immer komplexer zu werden.
Wenn du globale Variablen generierst, kannst du die Auswirkungen nicht überschauen. Es kann durchaus vorkommen, dass die globale Variable mehrfach in unterschiedlichen Funktionen verwendet wird.
Und dann läuft plötzlich nichts mehr.
Dann beginnt die Fehlersuche und der Frust.
Sei also vorsichtig und erstelle immer korrekt deklarierte Variablen. Wenn eine Variable wirklich globall, also von überall aus erreichbar, sein soll, dann deklariere sie auch so.
In unserem Monsterbeispiel können wir z.B. schreiben:

// some code
….
var hello="huhu";
function sayHello(){
alert("hello");
}

oder

// some code
….
var hello = "";
function sayHello(){
hello = "huhu";
alert("hello");
}

Und schon ist Lehrer Roland glücklich und zufrieden.
Wir tippen zwar ein bisschen mehr, aber nun haben wir eher das Gefühl der Kontrolle

Speicherverbrauch in AJAX Applikationen

Roland — Fri, 03 Apr 2009 11:13:11 +0000

Dieser Artikel ist Teil 23 von 26 der Artikelserie Programmieren

Wenn du eine AJAX Applikation erstellst, wirst du auf ganz neue Probleme treffen.
Früher haben wir eine Webseite zum Browser geschickt und uns über unterschiedliche Browsereigenschaften, Wartezeiten und nette Inkompatibilitäten geärgert.
Mit AJAX wird das noch toller!
Wir treffen mit AJAX nämlich noch auf noch mehr Inkompatibilitäten und haben dann noch das Problem von langläufigen Applikationen.
Aber da wir ja mit aller Gewalt unsere Webseiten aufpeppen wollen, müssen wir halt damit umgehen
Bei einer AJAX Applikation ist eine der Grundideen so wenig wie nötig Seiten vom Server nachzuladen. Wir laden uns die inhaltsbezogenen Daten, oder angeln uns skriptbezogen alle Steuerungsmechanismen vom Server.
Der im Browser angesiedelte JavaScript Interpreter lädt unsere Daten und verwaltet diese.
Wenn eine Variable nicht mehr benötigt wird, also beispielsweise wenn wir mit variable=null; die Variable freigeben, wird der interne Garbage Collector von Zeit zu Zeit die Variablen aus dem Speicher freigeben und alles putzen.
Garbage Collectors haben wir auch in anderen Programmiersprachen, Wie beispielsweise Java.
Jetzt gibt es aber ein Problem mit unserem Garbage Collector.
Der Müllmann läuft durch alle Speicherreservierungen durch und überprüft, ob unsere Variablen mit anderen Variablen in Verbindung stehen.
Wenn das so ist, wird die Variable nicht gelöscht.
Das bedeutet, dass wir die Variablen erst freigeben können, wenn wir wirklich keine Referenz mehr auf die Variable haben.
Wenn du nun für eine Callback Funktion die Variablen von einzelnen Elementen miteinander hart verbindest, duplizierst du Code und generierst sogenannte Closure Funktionen.
Das bedeutet, eine Funktion beinhaltet eine andere Funktion und nutzt deren Daten mit.
Wenn wir also schreiben:

myObj.prototype.doSomething=function(){
var modelObj=this;
this.aElement.onclick=function(){
fooEventHandler.call(modelObj);
}
}

Jetzt ist der fooEventHandler an die interne Variable modelObj gebunden. Wir werden also, solange fooEventHandler existiert, unser modelObj nicht löschen können.
Das ist zuerst mal kein Weltuntergang.
Wenn du aber in deinem HTML Dokument viele dynamische Elemente erzeugst und die Elemente mit den Objekten verbindest, dann wird kein Aufräumen mehr möglich sein und der Speicherverbrauch steigt und steigt.
Nach einer Zeit wird die Applikation immer langsamer und irgendwann friert unser Webbrowser ein.
Wenn das passiert ist AJAX schuld und alle sind doof.
Wir werden dadurch nicht erreichen, dass unsere Kunden zufrieden sind.

Abhilfe?

Wenn zyklische Verbindungen zwischen Objekten vorhanden sein müssen, dann schau dir das immer genau an. Eventuell kannst du dynamische Elemente mehrfach verwenden.
Beispielsweise kannst du einen Bereich für Meldungen immer wieder verwenden und musst nicht immer neue DOM Elemente mit closure Eigenschaften erstellen. Du kannst die Anzahl deiner Elemente und Objekte klein halten und so den Speicherverbrauch optimieren.
Schau dir ab- und zu mal den Speicherverbrauch deiner laufenden Applikation an. Wenn der aus dem Ruder gerät, solltest du dir Gedanken machen.
Sei jedoch vorsichtig.
Beim Einsatz von AJAX kann der Anwender alle möglichen nicht vorgesehenen Abläufe anklicken. Er wird somit extrem viele Kombinationen der Erstellung und Löschung von Objekten produzieren.
Du wirst nicht alle Kombinationen testen können. Aber du wirst durch vernünftige Generierung von Objekten ziemlich viele Speicherplatzprobleme schon beim Design lösen.

Knackpunkte bei der Klasse AsyncCommunication

Roland — Tue, 31 Mar 2009 11:37:00 +0000

Dieser Artikel ist Teil 22 von 26 der Artikelserie Programmieren

Im Artikel Asynchrone Kommunikation mit JavaScript und Facade Pattern habe ich eine Beispielklasse für die asynchrone Kommunikation erläutert.
Ich möchte noch kurz auf ein paar Programmzeilen eingehen, die ich darin verwendet habe und die vermutlich nicht sehr einfach zu verstehen sind.
Zuerst übergebe ich dem Konstruktor die später aufzurufende Callback Funktion. Diese wird in der Zeile

this.callBackFunction = callBackFunc;

in die callBackFunction Variable eingetragen.
Hier ist zuerst einmal festzustellen, dass dieser Funktion kein String mit Anführungszeichen sondern der Name der Funktion ohne Anführungszeichen mitgegeben wird.
Also beim Aufruf des Konstruktors beispielsweise:

this.asyncCommunication = new AsyncCommunication(showHello);

Das war für mich zumindest ein wenig anders als dass was ich erwartet hätte. Naja, bin halt ein alter C, C++ und Java Hacker…
Dann der Aufruf der Callback Funktion:

var loader=this;
this.request.onreadystatechange=function(){
loader.callBack.call(loader);
}

Hiermit wird dem onreadystatechange eine dynamische Funktion, die wir in unserer Klasse deklariert haben, übergeben. Die Schreibweise ist vielleicht ein wenig Gewohnheitsbedürftig. Ich interpretiere dies so, dass eine Funktion deklariert wird, die über die Instanz loader.callback aufgerufen werden kann. Zuvor wird this dem loader zugewiesen.

Der Rest ist ziemlich geradeaus programmiert.
Mit

if(readyState == this.READY_STATE_COMPLETE){
this.callBackFunction.call(this);
}

wird die Funktion, die wir ja vorher unserem Konstruktor übergeben haben, aufgerufen.
Ich hoffe, ich konnte hiermit alle Klarheiten beseitigen und du verstehst nun den Code so gut, dass du ihn verwenden und nach deinen Wünschen abändern kannst.
Viel Spaß damit!

AJAX in Action

Roland — Sun, 29 Mar 2009 22:25:49 +0000

Mit AJAX in Action steht dir ein Buch zur Verfügung mit dem die Funktionsweise und die Strategien zur Erstellung von AJAX Anwendungen näher gebracht werden.
Wenn du mal reinspickeln willst, kannst du das mit der Buchvorschau tun.

Von diesem Buch habe ich irgendwie zwei Eindrücke.
Zum Einen ist es ein Leitfaden, der sehr viele AJAX Aspekte betrachtet. Nach dem Durcharbeiten dieses Buches hast du ziemlich viele Eindrücke zum Thema JavaScript und AJAX erhalten.
Das Buch kratzt an vielen Themengebieten an und du kannst dir die wichtigsten Aspekte herausnehmen und weiterentwickeln.
Zum Anderen ist das Buch extrem oberflächlich. Bei der Menge von Themen, die die Autoren hier betrachten, ist das auch nicht weiter verwunderlich.
Aber wenn du einfach nur ein bisschen AJAX lernen willst, bist du eventuell mit dem Buch nicht zufrieden.

Mir haben die Randbemerkungen und Einblicke in JavaScript Eigenschaften sehr viel geholfen.
Aber einfach zu lesen ist das Buch meiner Meinung nach nicht.
Immer wenn es ein Thema angeschnitten hat, kommt die Beschreibung bis zu einem Punkt an dem du glaubst “Jetzt kommt gleich die Erleuchtung!”. Doch die kommt leider nicht.
Denn sobald das Thema ein wenig aus dem Dunkeln erscheint, wird das Kapitel gewechselt.

Wie gesagt, ich finde dieses Buch wirklich nicht schlecht. Irgendwie empfinde ich es als eines der wirklich lesenswerten Bücher. Dann wieder glaube ich, dass einfach zu viele Themen zu oberflächlich behandelt wurden.

Inhaltlich beschreibt es immer wieder wie man mit Code Refacturing umgehen kann.
Es kratzt hier- und da an diesem Thema.
Dieses Kratzen finde ich wirklich gut, da Code Refacturing nicht zur allgemeinen Sportart verkommen sollte und man sich nur noch mit diesem Themengebiet vergnügt.

Sei mit den Code Beispielen vorsichtig!
Ich habe festgestellt, dass hier ziemlich viel Zeug reingeschrieben wurde, da die Autoren in einem früheren Kapitel einige Aspekte erklären wollten und dann den Code nachher nicht mehr angepasst haben. Der Code ist zum Teil schwer verständlich und hier- und da nicht gerade nett zum Verwenden.
Einfach nur kopieren und verwenden ist immer eine schlechte Idee. Im Fall dieses Buches aber noch ein bisschen mehr.

Wenn du das Buch von vorne bis hinten akribisch durchackerst, wirst du jedoch die einzelnen Aspekte der einzelnen Code Zeilen verstehen. Die Autoren fügen hin- und wieder die notwendigen Erklärungen bei und dabei kamen bei mir zumindest immer wieder ein paar Aha Momente vor.
Vielleicht sollte man das Buch als eine andere Art von einer Ansammlung von Kurzgeschichten ansehen. Dann ist es für ein Lehrbuch relativ kurzweilig zu lesen und die Kurzgeschichten führen dazu, dass man gerne mehr liest…

Guggat emol Blog» Download für JavaScript wiederkehrender Event mit .htaccess Anpassung

Download für JavaScript wiederkehrender Event mit .htaccess Anpassung

.htaccess Anpassung

Ähnliche Beiträge

Artikel mit ähnlichen Schlagwörtern

Kleine Aufgabe um mit JavaScript Events rumzuspielen

Fokus setzen

Ausgabe der eingegebenen Zeichen

Sonderfall Text falschrum ausgeben

Lösungsschritte

Ähnliche Beiträge

Artikel mit ähnlichen Schlagwörtern

Aufgabe Ratespiel um Mengenlehre zu verwenden

Ratespiel

Dokumentation

Initialisierung

Verwaltung der Obermenge und der bisher verwendeten Zahlen

Zählen

Highscore Verwaltung

Fazit

Ähnliche Beiträge

Artikel mit ähnlichen Schlagwörtern

Lösungsvorschlag um Eingabefelder während der Eingabe mit JavaScript zu überprüfen

Ähnliche Beiträge

Artikel mit ähnlichen Schlagwörtern

Aufgabe Eingabefelder während der Eingabe überprüfen

Aufgabe 1:

Aufgabe 2:

Aufgabe 1:

Ähnliche Beiträge

Artikel mit ähnlichen Schlagwörtern

Objekte in JavaScript mit JSON deklarieren

Ist JavaScript denn nun wie Java?

Arrays sind Objekte

Typensicherheit in JavaScript

Nochmal zur JSON Schreibweise

Verschachtelung

Ähnliche Beiträge

Artikel mit ähnlichen Schlagwörtern

Modelle von der Oberfläche trennen

Das Model View Controller Pattern

Die View

Der Controller und das Modell

Ähnliche Beiträge

Artikel mit ähnlichen Schlagwörtern

Eventhandler im JavaScript mit dem HTML Dokument verknüpfen

Im Source-HTML kein JavaScript

Ähnliche Beiträge

Artikel mit ähnlichen Schlagwörtern

Auch bei JavaScript immer die Variablen sauber deklarieren

Ähnliche Beiträge

Artikel mit ähnlichen Schlagwörtern

Globale Variablen in JavaScript

Aber das ist nicht mal das Problem!

Ähnliche Beiträge

Artikel mit ähnlichen Schlagwörtern

Speicherverbrauch in AJAX Applikationen

Abhilfe?

Ähnliche Beiträge

Artikel mit ähnlichen Schlagwörtern

Knackpunkte bei der Klasse AsyncCommunication

Ähnliche Beiträge

Artikel mit ähnlichen Schlagwörtern

AJAX in Action

Ähnliche Beiträge

Artikel mit ähnlichen Schlagwörtern