Word counter

gistfile1.js

function countIt() {
    var wordcount = 0;
    var text = document.wordcounter.allthosewords.value;
    for (i = 0; i < text.length; i++) {

        if (text[i] === " ") {
            wordcount++;
        }
        // special code needed for the smartasses that type in only one word
        // special code needed for the smartasses that end their text with one or more spaces

    }

    if (wordcount === 0) {
        results.innerHTML = "Hey, champion. Can't you count to zero by yourself? How about pasting some real text."
    } else if (0 < wordcount && wordcount < 500) {
        results.innerHTML = "Your text consists of <i>" + text.length + " characters</i> and <i>" + (wordcount + 1) + " words</i>. Sorry, not impressed. <br/><br/> <img src='http://media.tumblr.com/tumblr_m8tmyoMNZA1ruser4.jpg'>";
    } else {
        results.innerHTML = "Your text consists of <i>" + text.length + " characters</i> and <i>" + (wordcount + 1) + " words</i>. Which is pretty fucking impressive.";
    }

}

1. Ich empfehle dir, die ganze Geschichte etwas klarer zu formatieren, konsistente Einrückungen erhöhen die Lesbarkeit massiv. Kannst du auch erstmal automatisch machen lassen: http://jsbeautifier.org/

2. Schön, dass du eine Funktion verwendest, das hilft beim Wiederverwenden von Code immer sehr. Allerdings geht das fast nur, wenn deine Funktion auch das macht wie ihr Name auch sagt. Deine hier macht eigentlich drei Sachen: Wörter zählen, Textlänge auslesen, und ein Resultat ausgeben. Idealerweise würdest du Rechnen und Ausgeben voneinander trennen, dann kannst das später einfacher wieder neu zusammensetzen. Als Journalist sollst du nicht ständig alten Kram recyclen. Als Programmierer aber unbedingt.

3. Cool, dass du die for-Schleife im Griff hast. Was du hier aber eigentlich machst ist Leerzeichen zählen, nicht Wörter. Die Idee, dass in einem Text mit X Wörtern X-1 Leerschläge drin sind ist clever, du hast die Aufgabe mit den dir zur Verfügung stehenden Mitteln flott gelöst.

4. Offensichtlich kann man als Schlaumeier aber viele Fälle konstruieren, bei denen Leerzeichen zählen und Wörter zählen nicht auf's gleiche rauskommt. Und das Internet ist ja bekanntlich voll mit Schlaumeiern. Um das zu lösen, muss man nochmal überlegen, was eigentlich ein Wort ist in diesem Zusammenhang (keine Angst, nur syntaktisch, wir werden nicht semantisch-philosophisch). Sagen wir also einfach mal, dass ein Wort aus den Buchstaben A-Z (und a-z) besteht, mindestens einem Stück davon Alles andere ist Wortzwischenraum und interessiert uns nicht. Jetzt könntest du also da wo du auf === " " testest schauen gehen, ob du ein Wortbestandteil siehst oder ein Nichtwortbestandteil. Und immer wenn's von Nichtwort auf Wort wechselst, machst du wordcount++. Das ist aber mühsam. So mühsam, dass die Programmierer für solcherlei Aufgaben vor langer Zeit ein Werkzeug erfunden haben, um genau solche Textauswertungen viel, viel einfacher zu machen. Das Werkzeug nennt sich "regulärer Ausdruck" (regular expression, oder kurz regex) - und ist nichts anderes als eine Mittel zum Formulieren von Buchstabenregelwerken. Klingt kompliziert, ist es auch, aber das wird dir gefallen.

5. Reguläre Ausdrücke schreibt man in Javascript zwischen Slashes. Einer, der 1 Buchstaben A-Z "matcht" schreibt sich: /[A-Z]/, einer der 1 bis unendliche viele Buchstaben von A-Z trifft /[A-Z]+/ - und so weiter. Du siehst, wie man damit schön formulieren könnte, was ein "Wort" ist und was ein "Nichtwort". Wenn du damit mal rumspielen möchtest: http://regexpal.com hilft dir. Praktischerweise sind genau diese beiden "Buchstabenklassen" bereits fest vordefiniert, als \w ("Wortbuchstaben") und \W ("Nichtwortbuchstaben", sprich Satzzeichen, Leerschläge und ihre Freunde wie etwa Zeilenumbrüche). Damit kannst du dann folgendes schreiben:

var wordcount = 0;
var text = document.wordcounter.allthosewords.value;
var words = text.match(/\w+\W*/g);
if (words) {
    wordcount = words.length;
}
// usw.

Wenn du dir words mal ausgibst dann siehst du, dass das für den Text " The lazy fox jumps over the lazy dog.. ." folgende Daten (ein Array) ergibt:

[ 'The ',
  'lazy    ',
  'fox ',
  'jumps ',
  'over ',
  'the  ',
  'lazy ',
  'dog.. .' ]

words.length ist demnach korrekt 8 (bei deinem Code: 14). Was hat /\w+\W*/ da also gemacht? Das war ein regulärer Ausdruck, der 1 bis unendliche viele "Wort-Buchstaben" (\w+) gefolgt von 0 bis unendliche vielen "Nichtwort-Buchstaben" traf. Sachen gibt's. Denk's dir mal durch - dann fallen dir sicher auch gleich hundert Sachen ein, wie man Texte so auswerten könnte.

Damit erstmal Schluss für heute vom Codeonkel. Ich will dich damit übrigens überhaupt gar nicht demoralisieren, nur zeigen was da alles noch für Schätze auf dich warten, an Dingen die man machen kann und an Ausdrucksmitteln. Kommt gut!

Viel Spass am Gerät,
H

Vielen Dank für die ausführliche Kritik. Leuchtet alles ein. Und bestätigt mich insofern, dass ich im Rahmen meiner Möglichkeiten alles richtig gemacht habe.

text.match(/\w+\W*/g) muss man ja erstmal kennen, so als n00b.

V2: https://gist.github.com/3853898