Bucles for amb Javascript
Crearem un senzill sistema d'exàmen per fer preguntes i avaluar el rendiment de la persona examinada. En primer lloc veurem un parell de maneres de resoldre aquest problema. Com sempre, el primer pas és imaginar exactament que hauria de fer el programa:
- Fer preguntes. Utilitzarem la instrucció promt()
- Pemetre que l'examinat sàpiga si la seva resposta és correcte o incorrecte. Utilitzarem la instrucció alert()
- Mostrar els resultats de l'exàmen. Utilitzarem la instrucció document.write
Hi ha moltes maneres de resoldre aquest problema. Alguns programadors principiants utilitzaran un enfocament de força bruta i repetiran el mateix codi per respondre cada pregunta. Per exemple, el codi Javascript per fer les dues primeres preguntes del questionari podria ser d'aquest tipus:
var answer1=prompt ('Quantes llunes té la Terra?',' ');
if (answer1==1) {
alert ('Correcte');
} else {
alert ('Ho sento, la resposta correcte és 1');
}
var answer2=prompt ('Quantes llunes té Saturn', ' ' );
if (answer2==31) {
alert ('Correcte');
} else {
alert ('Ho sento, la resposta correcte és 31');
}
Aquest enfocament sembla lògic, ja que l'objectiu del programa és fer una pregunta darrera l'altre. En canvi, no és una manera eficient de programar. Quan veiem els matiexos passos escrits moltes vegades en un programa, és hora de considerar la utilització d'un bucle o una funció en el seu lloc.
if (answer1==1) {
alert ('Correcte');
} else {
alert ('Ho sento, la resposta correcte és 1');
}
var answer2=prompt ('Quantes llunes té Saturn', ' ' );
if (answer2==31) {
alert ('Correcte');
} else {
alert ('Ho sento, la resposta correcte és 31');
}
Aquest enfocament sembla lògic, ja que l'objectiu del programa és fer una pregunta darrera l'altre. En canvi, no és una manera eficient de programar. Quan veiem els matiexos passos escrits moltes vegades en un programa, és hora de considerar la utilització d'un bucle o una funció en el seu lloc.
Així doncs, per ser més eficients, crearem un bucle per recórrer les preguntes de l'exàmen i una funció que desenvolupa la pregunta i emmagatzema els resutats.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Petit test de preguntes i respostes</title>
<script>
var score=0;
var questions = [
['Quantes llunes té la Terra?', 1],
['Quantes llunes té Saturn?',31],
['Quantes llunes té venus?', 0]
];
function askQuestion(question) {
var answer = prompt(question[0],'');
if (answer == question[1]) {
alert('Correcte!');
score++;
} else {
alert('Ho sento. La resposta correcte és ' + question[1]);
}
}
for (var i=0; i<questions.length; i++) {
askQuestion(questions[i]);
}
</script>
</head>
<body>
<h1>Petit test de preguntes i respostes</h1>
<script>
var message = 'Tens ' + score;
message += ' de ' + questions.length;
message += ' respostes correctes.';
document.write('<p>' + message + '</p>');
</script> </div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Petit test de preguntes i respostes</title>
<script>
var score=0;
var questions = [
['Quantes llunes té la Terra?', 1],
['Quantes llunes té Saturn?',31],
['Quantes llunes té venus?', 0]
];
function askQuestion(question) {
var answer = prompt(question[0],'');
if (answer == question[1]) {
alert('Correcte!');
score++;
} else {
alert('Ho sento. La resposta correcte és ' + question[1]);
}
}
for (var i=0; i<questions.length; i++) {
askQuestion(questions[i]);
}
</script>
</head>
<body>
<h1>Petit test de preguntes i respostes</h1>
<script>
var message = 'Tens ' + score;
message += ' de ' + questions.length;
message += ' respostes correctes.';
document.write('<p>' + message + '</p>');
</script> </div>
</body>
</html>
Comentaris
Publica un comentari a l'entrada