Das geschah nur beim Firefox 4 und 5.

Lösung

Im Event-Handler hatten wir ursprünglich folgende Zeile eingetragen:

e.dataTransfer.setData("Text", "js_draggedItem: "); + this.innerHTML)

Wenn du den “Text” CamelCase mässig schreibst, dann kommt die Warnung.

Wenn du dies umstellst auf:

e.dataTransfer.setData("TEXT", "js_draggedItem: "); + this.innerHTML)

dann wird keine Warnung mehr geschrieben.

Mit CamelCase (Text) versucht der Firefox ein Redirect auf den dahinterliegenden Text zu machen.

Das ist irgendwie doof aber er macht es halt

setData(FORMAT, DATA) darf also keine Groß-Kleinschreibung beinhalten.

Ähnliche Beiträge

var send = new Array('Hallo', 'Paul');

jQuery.ajax({

   type:     'POST',

   url:      '/moc/mocs/save_graph',

   dataType: 'json',

   data: {

       val: send

   },

   cache:    false,

   success: function(serverResponse){

       //jQuery('#update').append(serverResponse);

       jQuery('#update').append("hallo
");

       jQuery('#update').append(serverResponse['val'][0]+"
"+serverResponse['val'][1]);

   },

   error: function(xhr, textStatus, errorThrown){

       alert('Fehler beim Server-Call '+(errorThrown ? errorThrown : xhr.status));

   }

});

Irgendwelche Daten (hier ein Array mit send = new Array(‘Hallo’, ‘Paul’) werden jetzt an den Server gesendet. Der Server macht irgendwas damit und das Ergebnis wird im VIEW.ctp normalerweise als JSON Objekt kodiert.
Also echo json_encode($data);
Wenn das übermittelt wird, kannst du das JSON-Objekt nicht kurz anschauen.
Du kannst aber auf dem Server kurz ein pr($data); eintragen. Dann schlägt der Error-Teil der oben abgebildeten Funktion zu.
Du kannst dein Objekt schön formatiert in einem Alert-Element sehen.
Ok, dieser Hack ist nicht sehr freundlich, aber bevor ich ewig rumgruschtel lass ich mir die Daten lieber kurz ausgeben…
AJAX zu debuggen ist immer eine kleine Herausforderung, da die Daten ziemlich versteckt zwischen Client und Server ausgetauscht werden.

Ähnliche Beiträge

Auf dem Weg vom Bobbelgenerator zum Graphen-Editor muss ich natürlich irgendwann einmal meine Knoten nicht mehr einfach bei left=0, top=0 zuerst zeichnen, sondern ich muss die Knoten vom Server laden und gleich irgendwohin (relativ auf der Seite) positionieren.

Und da hatte ich wieder mein Problem!

Ich habe mindestens zwei Stunden gesucht warum meine Linien zwischen den Kreisen irgendwo im Nirvana verliefen.

Des Rätsels Lösung ist wieder mal ganz einfach.

Die Startposition des gezeichneten Objektes muss bei jeder Verschiebung mit hinzugerechnet werden, da die Startposition sich relativ zum Zeichenfeld (also z.B. <div id=“canvas“></div>) liegt.

Will heißen, dass du z.B. deinen Kreis bei 100,100 zuerst relativ setzt. jQuerys draggable() verschiebt dann den Kreis und setzt die absolute Position (zur oberen linke Ecke des DOM).

Schon hart, erst fangen wir relativ an, dann stellen wir auf absolut um.

Vielleicht finde ich noch einen Schalter um das auszuschalten. Aber bis dahin ist das halt so.

Wenn du die neu verschobene Position nun abspeichern willst, musst du zuerst im style Element schauen ob dort ein position:absolute drin steht. Wenn dem so ist, dann wurde das Element verschoben und du musst von dieser Position noch die Position deiner Zeichenfläche abziehen.

Dann sind die Positionen richtig und können wieder geladen werden.

Ähnliche Beiträge

Anwendungsfälle für MOC

Ich möchte:

• Knoten hinzufügen können (ok, klappt schon)
• Knoten Position auf Bildschirm setzen (ok, klappt schon)
• Knoten Texte einschreiben Hier möchte ich in Abhängigkeit des Problemfalls unterschiedliche Inhalte eintragen können. So soll bei einem Gozinthographen Fix- und Variable- Kosten eingetragen werden können. Weiter Anzahl und Beschreibung. Bei einem Incident brauchen wir eine Beschreibung wer das wie reparieren kann.
• Knoten löschen (geht noch nicht )
• Knoten und Positionen der Knoten laden und speichern. Ich möchte noch nicht super viel Suchen und Finden Funktionalität einbauen. Aber unsere Skizzen mal kurz speichern zu können wäre schon irgendwie schön. Dann können wir etwas beschreiben, speichern, laden, darüber reden und weitere Ideen umsetzen.
• Link Stereotype setzen. Fände ich schon schick wenn wir unterschiedliche Links (später auch unterschiedliche Knoten) anlegen könnten. So kann ein Link für Fix-Kosten verantwortlich sein. Ein anderer Link ist für eine Reporting-Line zuständig.
• Knoten miteinander verbinden (ok, klappt schon)
• Wenn jemand mein Layout und Design nervt, darf da natürlich auch gerne ein bisschen das Look-And-Feel verbessert werden. Ich bin eine grafische Katastrophe und kümmere mich nicht darum. Und zwar aus dem einfachen Grund, weil ich es nicht kann.

Wenn wir die Häppchen umgesetzt haben, können wir wieder etwas mehr diskutieren und uns an das eigentliche Problem herantasten. Die Problemstellung bleibt überschaubar und wir planen nicht für eine Zukunft die es so nie geben wird
Was wir auf alle Fälle noch machen müssen

• Wir brauchen das Source-Repository (GIT oder so…)
• Wir brauchen unsere MOC Webseite umd Erkenntnisse zu dokumentieren
• Ich fände ein KANBAN-Board voll cool auf dem wir eintragen können was wir so basteln wollen und wer gerade an was dran ist. Im ersten Schritt könnten wir auch das SCRUM-Board von miradlo verwenden. Da kann man auch schieben
• Die Startseite für unseren Webauftritt sollten wir festlegen und freischalten. Irgendein Text und ein Bildchen, oder einfach unseren Bobbelgenerator, sollten wir dort darstellen

Ähnliche Beiträge

/** Counter how many circles currently available. */
var currentCircleCounter = 0;
/** Counter how many lines currently available. */
var currentLineCounter = 0;

/** The radius of the circles. */
var radius = 60;
/**
 * Adds a new line.
 */
function addLine(){
    currentLineCounter++;
    var newLine =  '<div id="line_div_'+currentLineCounter+'">'+"\n"
                  +'    <input id="input_circle_start_'+currentLineCounter+'" />'+"\n"
                  +'    <input id="input_circle_end_'+currentLineCounter+'" />'+"\n"
                  +'</div>'+"\n";
    canvasLine = jQuery(newLine);

    canvasLine.appendTo("div#all_input_lines");
}

/**
 * Sets all lines defined between the circles.
 */
function setLines(){
    jQuery(function(){
        jQuery('#all_lines div').remove();
        //Create jsColor object
        var col = new jsColor("blue");
        //Create jsPen object
        var pen = new jsPen(col,3);
        // Find the position (left and top) within the div-containers.
        // TODO didn´t work absolute correct...
        var currentLeftDivPosition = currentTopDivPosition = 0;
        obj = document.getElementById('all_lines');
        currentLeftDivPosition += obj.offsetLeft;
        currentTopDivPosition += obj.offsetTop;
        if (obj.offsetParent) {
            obj = obj.offsetParent;
            do{
                currentLeftDivPosition += obj.offsetLeft;
                currentTopDivPosition += obj.offsetTop;
            }while(obj = obj.offsetParent);
        }
        // The circles, connected together, are within the input_circle_start_<ID>
        // and the input_circle_end_<ID> elements defined.
        var counter = 1;
        var inputCircleStart = jQuery('#input_circle_start_'+counter);
        var inputCircleEnd   = jQuery('#input_circle_end_'+counter);
        while(inputCircleStart.length > 0){

            newLineText = '<div id="line_'+counter+'"></div>';
            var newLine = jQuery(newLineText);
            // Add the double click message.
            newLine.bind('dblclick', {id:currentLineCounter}, function(e){
                jQuery('#current_selected_line_text').text("Derzeitig selektiert ist Linie: "+e.data.id);
            });
            newLine.appendTo("div#all_lines");
            // Do line.
            newLine = document.getElementById('line_'+counter);
            var gr = new jsGraphics(newLine);

            var circleStart = jQuery('#circle_'+inputCircleStart.val());
            var circleEnd = jQuery('#circle_'+inputCircleEnd.val());

            var pt1 = new jsPoint(parseInt(circleStart.css('left'))+currentLeftDivPosition, parseInt(circleStart.css('top'))+currentTopDivPosition);
            var pt2 = new jsPoint(parseInt(circleEnd.css('left'))+currentLeftDivPosition, parseInt(circleEnd.css('top'))+currentTopDivPosition);
            pointDiv = gr.drawLine(pen, pt1, pt2);
            counter++;
            inputCircleStart = jQuery('#input_circle_start_'+counter);
            inputCircleEnd   = jQuery('#input_circle_end_'+counter);
        }
    });
}

/**
 * Adds a new circle.
 */
function addCircle(){
    jQuery(function(){
        currentCircleCounter++;
        var circleDiv = '<div id="circle_'+currentCircleCounter+'" class="draggable" onmouseup="setLines();"></div>';
        var newCircle = jQuery(circleDiv).draggable();
        newCircle.appendTo("div#all_circles");
        // Add the double click message.
        newCircle.bind('dblclick', {id:currentCircleCounter}, function(e){
            jQuery('#current_selected_circle_text').text("Derzeitig selektiert ist Knoten: "+e.data.id);
        });

        var current_x_position = 0;
        var current_y_position = 0;

        var circleDiv = document.getElementById('circle_'+currentCircleCounter);
        var gr = new jsGraphics(circleDiv);

        //Create jsColor object
        var col = new jsColor("red");

        //Create jsPen object
        var pen = new jsPen(col,3);
        // Draw the current selected part of the picture.
        var pt1 = new jsPoint(current_x_position, current_y_position);
        var pt2 = new jsPoint(current_x_position-8*5, current_y_position-5);
        gr.fillCircle(col, pt1, radius);
        gr.drawText('Bobbel '+currentCircleCounter, pt2);
    });
}

Der Bobbelgenerator hat zwei globale Variablen (currentCircleCounter und currentLineCounter) mit denen ich die aktuell dargestellten Bobbels und Linien indexieren kann.
Ein Kreis / eine Linie wird im DOM jeweils als ein DIV eingetragen. Damit ich die Linien und Kreise später wieder ansprechen kann, bekommen sie die Ids circle_<currentCircleCounter> und line_<currentLineCounter>.
Wenn ein neuer Bobbel angelegt wird, wird dieser mit der Funktion addCircle() im DOM eingeschrieben.
Dort wird ein neues DIV angelegt, der currentCircleCounter um eins erhöht und mit  jsDraw2D in das neu angelegte DIV der Kreis hineingezeichnet.
Das DIV selbst wird mit jQuery angelegt und mit der Methode .draggable() ausgestattet.
Weiter hänge ich noch einen dblclick-Event an das DIV damit der Knoten später entsprechend selektiert werden kann.
Eine neue Linie wird angelegt, indem zwei input-Felder generiert werden mit denen der Start- und Endknoten angegeben werden kann.
Dies erledigt die addLine()-Methode.
Im Prinzip macht diese Methode das Gleiche wie die addCircle()-Methode. Außer dass sie nur zwei Eingabefelder und keine Kreise zeichnet
Ok, sie fügt auch keinen dblclick-Event an, da wir nachher die Linie selbst und nicht die Eingabefelder anklicken wollen.
Wenn nun z.B. zwei Bobbels vorhanden sind können diese über eine Linie verbunden werden.
Im Moment habe ich noch keine Sicherheitsüberprüfungen drin. Jeder Anwender kann so viele Linien zeichnen wie er oder sie will.
Ich habe nur dafür Sorge getragen, dass keine Fehler entstehen.
Man kann leere Linien eintragen, Texte anstatt ids und falsche ids.
Wenn keine Knoten mit den betreffenden Ids verfügbar sind, dann wird halt nichts angezeigt.
Das Setzen der Linien ist eine recht teure Angelegenheit.
Wenn ein Knoten verschoben wurde, müssen alle Linien neu positioniert werden.
Dazu lösche ich zuerst mit jQuery(‘#all_lines div’).remove(); alle alten Linien weg.
Dann lege ich alle Linien neu an indem ich durch die input-Felder wandere und die aktuellen Ids auslese.
Was nicht besonders toll funktioniert ist die Bobbels und Linien an andere Positionen im DOM anzulegen. Die Überprüfung, der aktuellen Top-Position funktioniert nicht gut.
Wenn da jemand eine bessere Idee hat, bitte melden!
Weiter werden die Positionen von den Kreisen ausgelesen.
Mit den Positionen der zu verbindenden Kreisen werden die Linien gezeichnet und an das entsprechende DIV die Events angehängt.
Tja, und das war es schon.
Jetzt können wir zumindest mal Bobbels malen und darüber diskutieren was für Funktionalität hier tatsächlich benötigt wird.
Prototyping ist doch eine feine Sache

Ähnliche Beiträge

Für unser Management of Change werden wir früher oder später eine Eingabemöglichkeit für die Knoten und Verbindungen benötigen.
Damit wir einfacher diskutieren können, habe ich kurz so eine Eingabemöglichkeit skizziert.

Funktionale Anforderungen

• Es müssen beliebig viele Knoten angelegt werden können
• Es müssen zwischen allen Knoten (gerichtete) Verbindungen angelegt werden können
• Die Knoten sollen auf dem Zeichenblatt frei verschiebbar sein
• Knoten und Verbindungen müssen gelöscht werden können
• Wenn ein Knoten oder eine Verbindung angeklickt wird, müssen die notwendigen Texte und Berechnungen eingefügt werden können

Nichtfunktionale Anforderungen

• Ich möchte dass die Zeichnerei auf einem Standard-Webbrowser funktioniert
• Es sollen nur HTML und JavaScript vorausgesetzt werden

So, damit sind die Anforderungen klar.

Das vorläufige Ergebnis könnt ihr unter DER BOBBELGENERATOR bewundern

Ich habe mich für jQuery und jsDraw2D entschieden um die Bobbels zu zeichnen und verschieben.

Das dazugehörende HTML-Dokument sieht so aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Bobbel Generator</title>
    </head>
    <body>
        <h1>Der Bobbelgenerator</h1>
        <p>Mit dem Bobbelgenerator können für MOC Knoten erstellt und mit Linien verbunden werden</p>
        <p id="current_selected_circle_text">Noch kein Knoten selektiert.</p>
        <p id="current_selected_line_text">Noch keine Linie selektiert.</p>
        <form action="">
            <div>
                <input id="new_circle" type="button" value="Neuer Bobbel" onclick="addCircle();" />
                <input id="new_line" type="button" value="Neue Linie" onclick="addLine();" />
            </div>
        </form>
        <div id="all_input_lines"></div>
        <div id="canvas">
            <div id="all_lines"></div>
            <div id="all_circles"></div>
        </div>
        <script type="text/javascript" src="/js/jquery/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="/js/jquery/ui/jquery.ui.core.js"></script>
        <script type="text/javascript" src="/js/jquery/ui/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="/js/jquery/ui/jquery.ui.mouse.js"></script>
        <script type="text/javascript" src="/js/jquery/ui/jquery.ui.draggable.js"></script>
        <script type="text/javascript" src="/js/js_draw_2d/jsDraw2D.js"></script>
        <script type="text/javascript" src="/js/bobbel.js"></script>
    </body>
</html>

Es hat also einen Button um einen neuen Knoten anzulegen und einen Button um eine neue Linie anzulegen.

Damit die Linien hinter den Kreisen angezeigt werden, müssen sie im DOM oberhalb der Kreise platziert werden (Siehe div#canvas Inhalt)

Das war für mich eine wichtige Erkenntnis, dass man über die Positionierung im DOM die Reihenfolge der Darstellung, also sichtbar, unsichtbar, festlegen kann. Vermutlich wäre es noch sicherer wenn man die entsprechende Z-Order im CSS korrekt einstellt. Aber was solls, so geht’s erst mal auch.

Der Rest in dem Dokument ist einfach geradeaus runtergetippt.

Bei den input-Feldern habe ich die OnClick-Events schon mit den dazugehörigen Funktionen verknüpft. Das hätte ich natürlich auch im JavaScript machen können. Dann wäre weniger Vermischung von HTML und JavaScript vorhanden.

Die JavaScript-Elemente lade ich am Ende des Dokuments.

Damit erreiche ich, dass der Browser zuerst den HTML-DOM-Baum lädt und interpretiert. Das Übersetzen von JavaScript findet erst nach der Anzeige statt und so ist die ganze Seite für den Anwender etwas schneller nutzbar. Diese Vorgehensweise wurde mir im Buch jQuery Kochbuch von O´ Reilly (ISBN 978.3.89721.999-1) erklärt. Danke für die Idee!

Tja und mehr gibt es zum HTML-Dokument nicht zu sagen.

Ähnliche Beiträge

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

Ähnliche Beiträge

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 )

Ähnliche Beiträge

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.

Ähnliche Beiträge

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.

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

Ähnliche Beiträge

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.

Ähnliche Beiträge

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:

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.

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:

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.

Ähnliche Beiträge

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.

<h3>Das Model View Controller Pattern</h3>

Ich werde in der Serie <a href=”http://www.baldenhofer.eu/blog/series/design-pattern”>Design Pattern</a> 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:

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.

Ähnliche Beiträge