javascript rijmwoorden generen

weare · 30 okt 2012

hallo iedereen,
ik heb mijzelf voor de uitdaging gezet om een programma (HTML en javascript mengeling) rijmwoorden te laten genereren. je moet in een inputveld een woord invullen het programma kijkt naar de drie laatste letters (want een rijmwoord komt vaak overeen in de laatste drie letters) en gaat dan in een .txt bestand kijken naar woorden met dezelfde 3 laatste letters. ik heb er al voor gezorgd dat je iets kan invullen en dat hij daarna zegd wat de laatste drie letters zijn, maar ik zit nu echt vast.

op dit moment ziet het er zo uit:

HTML:

<!doctype html>
<html>
<body style="background-color:#FF0000">

<h1>zoek je een rijmwoord?</h1>

<p>dan ben je hieraan het juiste adres, je vult een woord in en de rest doet het programma voor jou!!</p>

<form action="javascript:count()">
<input type="text" id="input" onblur="go()"></input>
<input type="submit" ></input>
</form>

<script type = "text/javascript">

function count(){
var string = document.getElementById("input").value; 
var patt1 = /[a-z]{3}$/i;
document.write(string.match(patt1));
}

</script>


</body>
</html>

help mij aub. als ik helemaal op de verkeerde weg zit mag je het ook zeggen hoor!
groetjes weare

That Guy · 30 okt 2012

Dit zijn de stappen die je nog moet ondernemen:

bij laden van de pagina met XHR (ookwel 'AJAX') het .txt file inladen
de file parsen; simpelweg .split("\n"); zal 't in een array gooien per regel
elk item doorlopen; laatste 3 letters checken; opslaan als het overeenkomt
resultaat retourneren.

weare · 30 okt 2012

kan je hier een kort voorbeeld van geven misschien?

Robin S · 31 okt 2012

[JS]function addEvent(obj, type, callback, useCapture) {
if (obj.addEventListener) {
obj.addEventListener(type, callback, useCapture);
}
else if (obj.attachEvent) {
obj.attachEvent("on" + type, callback);
}
else {
console.warn("Failed to add " + type + "-event, ", obj);
}
}
function addOnReady(xhr, readyCallback) {
addEvent(xhr, "readystatechange", function(e) {
if (this.readyState == 4) {
if (this.status == 200) {
readyCallback.call(this, e);
}
else {
console.error("Problem with XHR, status " + this.status);
}
}
}, false);
}

var fileName = "fileName.txt";
var xhrReady = false, words, tasks = [];
function getMatches(word, callback) {

if (!xhrReady) {

tasks.push({
word: word,
callback: callback
});

var xhr = new XMLHttpRequest();
xhr.open("GET", fileName, true);
addOnReady(xhr, onDataReady);
xhr.send();
}
else {

var letters = word.substr(-3).toLowerCase(), result = [];
for (var i = 0; i < words.length; i++)
if (words.substr(-3).toLowerCase() === letters)
result.push(words);

callback.call(window, {
word: word,
matches: result
});
}
}
function onDataReady(e) {

var txt = this.responseText.replace(/^\s+|\s+$/g, "");
words = txt.split('\n');
xhrReady = true;

while (tasks.length) {
var task = task.shift();
getMatches(task.word, task.callback);
}
}

getMatches("dag", function(e) {
alert(e.word + ",\n" + e.matches);
});[/JS]

weare · 1 nov 2012

Moet ik mijn javascriptcode hierdoor vervangen of moet ik die er nog onder plaatsen?
Maar toch al bedankt hiervoor, Robin S is baas!!

Robin S · 1 nov 2012

Ik zou de code in de <head> plaatsen (in een <script>-element uiteraard). Om er gebruik van de maken hoef je dan alleen je count-functie wat aan te passen, bijvoorbeeld:

[JS]function count() {
var string = document.getElementById("input").value;
getMatches(string, function(e) {

/* Met document.write */
document.write(e.matches.join(", "));
return;

/* Als je document.write niet wil gebruiken (verouderd) */
var div = document.createElement("div");
div.innerHTML = e.matches.join(", ");
document.body.appendChild(div);

});
}[/JS]

weare · 2 nov 2012

dan krijg je dit:

HTML:

<!doctype html>
<html>
<body style="background-color:#FF0000">
 
<h1>zoek je een rijmwoord?</h1>


<script>
function    addEvent(obj, type, callback, useCapture) {
    if (obj.addEventListener) {
        obj.addEventListener(type, callback, useCapture);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + type, callback);
    }
    else {
        console.warn("Failed to add " + type + "-event, ", obj);
    }
}
function addOnReady(xhr, readyCallback) {
    addEvent(xhr, "readystatechange", function(e) {
        if (this.readyState == 4) {
            if (this.status == 200) {
                readyCallback.call(this, e);
            }
            else {
                console.error("Problem with XHR, status " + this.status);
            }
        }
    }, false);
}
 
var fileName = "myfile.txt";
var xhrReady = false, words, tasks = [];
function getMatches(word, callback) {
 
    if (!xhrReady) {
    
        tasks.push({
            word: word,
            callback: callback
        });
        
        var xhr = new XMLHttpRequest();
        xhr.open("GET", fileName, true);
        addOnReady(xhr, onDataReady);
        xhr.send();
    }
    else {
    
        var letters = word.substr(-3).toLowerCase(), result = [];
        for (var i = 0; i < words.length; i++)
            if (words[i].substr(-3).toLowerCase() === letters)
                result.push(words[i]);
        
        callback.call(window, {
            word: word,
            matches: result
        });
    }
}
function onDataReady(e) {
 
    var txt = this.responseText.replace(/^\s+|\s+$/g, "");
    words = txt.split('\n');
    xhrReady = true;
    
    while (tasks.length) {
        var task = task.shift();
        getMatches(task.word, task.callback);
    }
}
 
getMatches("dag", function(e) {
    alert(e.word + ",\n" + e.matches);
});

</script>

<p>dan ben je hieraan het juiste adres, je vult een woord in en de rest doet het programma voor jou!!</p>
 
<form action="javascript:count()">
<input type="text" id="input" onblur="go()"></input>
<input type="submit" ></input>
</form>
 
<script type = "text/javascript">
 
function count() {
    var string = document.getElementById("input").value;
    getMatches(string, function(e) {

        document.write(e.matches.join(", "));
        return;
        
        
    });
}
 
</script>
 
 
</body>
</html>

maar dit werkt niet, hij laat je wel iets schrijven maar hij toont geen resultaten.

Robin S · 2 nov 2012

Je hebt gelijk, ik heb er nog wat foutjes uit kunnen halen. Ik kwam er onder andere achter dat document.write écht niet goed gaat...

[JS]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">

function addEvent(obj, type, callback, useCapture) {
if (obj.addEventListener)
obj.addEventListener(type, callback, useCapture);
else if (obj.attachEvent)
obj.attachEvent("on" + type, callback);
else
console.warn("Failed to add " + type + "-event, ", obj);
}
function addOnReady(xhr, readyCallback) {
addEvent(xhr, "readystatechange", function(e) {
if (this.readyState == 4) {
if (this.status != 200)
console.warn("Possible problem with XHR, status " + this.status, this);
readyCallback.call(this, e);
}
}, false);
}
function createXHR() {
if (window.XMLHttpRequest)
return new XMLHttpRequest();
else
return new ActiveXObject("Microsoft.XMLHTTP");
}

var fileName = "myfile.txt";
var xhrReady = false, words, tasks = [];
function getMatches(word, callback) {

if (!xhrReady) {

tasks.push({
word: word,
callback: callback
});

var xhr = createXHR();
addOnReady(xhr, onDataReady);
xhr.open("GET", fileName, true);
xhr.overrideMimeType("text/plain");
xhr.send();
}
else {

var letters = word.substr(-3).toLowerCase(), result = [];
for (var i = 0; i < words.length; i++)
if (words.substr(-3).toLowerCase() === letters)
result.push(words);

callback.call(window, {
word: word,
matches: result
});
}
}
function onDataReady(e) {

var txt = this.responseText.replace(/^\s+|\s+$/g, "");
words = txt.split(/\r?\n/g);
console.log(words);
xhrReady = true;

while (tasks.length) {
var task = tasks.shift();
getMatches(task.word, task.callback);
}
}

function count() {
var string = document.getElementById("input").value;
getMatches(string, function(e) {
alert(e.matches.join(", ") || "Geen matches");
});
}

</script>
<title></title>
</head>
<body style="background-color:#FF0000">

<h1>zoek je een rijmwoord?</h1>
<p>dan ben je hieraan het juiste adres, je vult een woord in en de rest doet het programma voor jou!!</p>

<form>
<input type="text" id="input"/>
<input type="button" onclick="javascript:count()"/>
</form>
</body>
</html>[/JS]

weare · 7 nov 2012

hij vind nooit matches!!

javascript rijmwoorden generen

weare

Gebruiker

That Guy

Meubilair

weare

Gebruiker

Robin S

Gebruiker

weare

Gebruiker

Robin S

Gebruiker

weare

Gebruiker

Robin S

Gebruiker

weare

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy