Bar med 15. mar. 2024, 10:40

2024-03-15T10:40:02Z

← Ældre version		Versionen fra 15. mar. 2024, 12:40
Linje 197:		Linje 197:
	Der ligger også noget i at kunne genstarte spillet og måske holde noget statistik på hvor mange gange hver enkelt har vundet.		Der ligger også noget i at kunne genstarte spillet og måske holde noget statistik på hvor mange gange hver enkelt har vundet.

	En anden udvidelse kunne være at spille efter de andre regler, hvor pladen ikke fyldes, men i stedet er sådan at man fylder 6 brikker i pladen hvorefter man skal flytte sine brikker - dette vil igen give en ~~kreftig~~ udvidelse af spillet.		En anden udvidelse kunne være at spille efter de andre regler, hvor pladen ikke fyldes, men i stedet er sådan at man fylder 6 brikker i pladen hvorefter man skal flytte sine brikker - dette vil igen give en kraftig udvidelse af spillet.

	==Referencer==		==Referencer==

Bar: /* Referencer */

2022-11-24T12:47:21Z

Referencer

← Ældre version		Versionen fra 24. nov. 2022, 14:47
Linje 201:		Linje 201:
	==Referencer==		==Referencer==
	<references />		<references />

			{{Programmering}}

	[[Kategori:Programmering teknik]]		[[Kategori:Programmering teknik]]

Bar: /* Referencer */

2022-10-22T10:01:01Z

Referencer

← Ældre version		Versionen fra 22. okt. 2022, 12:01
Linje 199:		Linje 199:
	En anden udvidelse kunne være at spille efter de andre regler, hvor pladen ikke fyldes, men i stedet er sådan at man fylder 6 brikker i pladen hvorefter man skal flytte sine brikker - dette vil igen give en kreftig udvidelse af spillet.		En anden udvidelse kunne være at spille efter de andre regler, hvor pladen ikke fyldes, men i stedet er sådan at man fylder 6 brikker i pladen hvorefter man skal flytte sine brikker - dette vil igen give en kreftig udvidelse af spillet.

	==Referencer==		==Referencer==
	<references />		<references />
	[[Kategori:Programmering teknik]]		[[Kategori:Programmering teknik]]

Bar: 1 version importeret

2022-10-22T06:14:06Z

1 version importeret

← Ældre version	Versionen fra 22. okt. 2022, 08:14
(Ingen forskel)

htx_>Bar: /* De forskellige trin i udviklingen */

2013-11-14T11:49:17Z

De forskellige trin i udviklingen

Ny side

Teknikken i Stepwise Improvement og ideen bag er udviklet af og dokumenteret<ref>http://www.daimi.au.dk/~mec/dissertation/Dissertation.pdf Artikel om at undervise programmering på et grundlæggende niveau</ref> af Michael Caspersen ved Århus Universitet som en del af de pædagogiske tanker bag det at undervise grundlæggende programmering.

==Hvad er det?==
Som navnet siger, så er det at man forbedrer (improvement) sit programmeringsprodukt i trin (step), og at det gerne skal ske i små trin (stepwise).

En del af ideen bygger på test-driven development, altså det at udvikle ved at teste sit produkt under udviklingen, og her er det igen vigtigt at man tager små skridt, gerne et ad gangen, så man hele tiden kan teste det.

==Hvad er faren ved metoden?==
Når man udvikler et program, så har man sjældent det fulde overblik over hvordan programmet skal opbygges.

Faren ved metoden, specielt til større programmer er, at det ender med at blive en meget rodet kode man ender op med.

Det man kan gøre for at forhindre det er at dele programmet op i mindre funktionsblokke - typisk i overskuelige funktiner der løser et naturligt afgrænset område.

==Praktisk eksempel==
For at illustrere hvordan metoden virker er der her givet et eksempel på hvordan man kunne udvikle et kryds og bolle-spil.

Den meget strukturerede metode ville være at opstille alle regler for spillet og planlægge hele den grafiske visning, men jeg vil her illustrere hvordan man kan lave udviklingen baseret på en enkelt ide.

Ideen bag denne udvikling af spillet er at de 9 felter skal have hvert sit nummer, så de hver svarer til index i et [[array]] som vil komme ind i udviklingen på et tidspunkt.

Udviklingen af eksemplet er illustreret i 8 HTML-filer der er pakket sammen med 3 billeder i [[media:stepwise-improvement.zip|denne ZIP-fil]]

===De forskellige trin i udviklingen===
Koden tager udgangspunkt i en standard-fil, der indeholder header og body i HTML og begge steder har lidt definitioner af javaScript.

Første trin der er realiseret er at opbygge banen som en 3x3 tabel og lige skrive nummeret på hvert felt ud. Resultatet af dette ligger i '''index.html''', og det centrale kode der er tilføjet standard-filen er følgende:
<source lang="javascript">
var nr = 0;
for (n=0; n<3; n++) {
document.write("<tr>");
for (i=0; i<3; i++) {
document.write("<td>" + nr + "</td>");
nr++;
}
document.write("<tr>");
}
</source>

Dette giver følgende visning: 
[[fil:stepwise-imp-1.png|Visning ved 1. trin af kodeudviklingen]] 
''Visning ved 1. trin af kodeudviklingen''

Testen siger her at der er 9 felter, og at hvert felt har sit eget nummer fra 0 til 8.
<hr />

Det næste der skal ske er at få mere format på visningen. Her laves først et blankt billede i Paint, der formatteres til at være 100x100 pixel. De to andre billeder laves i samme format, hvor der sættes hhv. et kryds og en bolle på dem.

[[fil:stepwise-imp-billeder.png|De 3 billeder der anvendes til spillepladen]] 
''De 3 billeder der anvendes til spillepladen''

Den eneste rettelser der laves er følgende, hvor udskriften af nummeret udskiftes med et billede som henviser til '''blank.png''' og som har en onclick-event tilknyttet som er en funktion klik med to [[parametre]] - henvisning til billedet og nummeret:
<source lang="javascript">
document.write("<td>" + "<img src='Blank.png' onclick='klik(this, " + nr + ");' />" + "</td>");
</source>

Dette giver fra filen '''index2.html''' følgende visning: 
[[fil:stepwise-imp-2.png|Visning ved 2. trin af kodeudviklingen]] 
''Visning ved 2. trin af kodeudviklingen''

Det eneste der skal testes her er at visningen ser fornuftig ud (det udvider tabellen som vist).

<hr />
Funktionen der er tilknyttet onclick på alle billeder skal selvfølgelig defineres, og i første omgang skal vi lige se om billed-nummeret er knyttet til hvert felt. Det gøres med følgende kode, der ligger i '''index3.html''':
<source lang="javascript">
function klik(billede, nr) {
alert(nr);
}</source>

Dette giver følgende visning når der klikkes på billedet i øverste venstre hjørne: 
[[fil:stepwise-imp-3.png|Visning ved 3. trin af kodeudviklingen]] 
''Visning ved 3. trin af kodeudviklingen''

Der er selvfølgelig ikke nok at teste det ene billede, men at teste igennem så man er overbevist om at alle billeder har de rigtige numre.

<hr />
Klikket skal selvfølgelig kunne noget andet - nemlig få kryds eller bolle frem, så i første omgang får vi koden til at rette billed-indholdet til et kryds med følgende rettelse som er med i '''index4.html''':
<source lang="javascript">
function klik(billede, nr) {
billede.src = "Kryds.png";
}
</source>

Ved at klikke på nogle billeder kan følgende visning komme frem: 
[[fil:stepwise-imp-4.png|Visning ved 4. trin af kodeudviklingen]] 
''Visning ved 4. trin af kodeudviklingen''

Dette er faktisk testen.
<hr />

Det er selvfølgelig ikke nok at få den til at vise krydser, så der laves følgende tilføjelse der ligger i '''index5.html''':
<source lang="javascript">
var tur = "Kryds";
// Funktioner til programmet
function klik(billede, nr) {
billede.src = tur + ".png";
if (tur == "Kryds") {
tur = "Bolle";
} else {
tur = "Kryds";
}
}
</source>

Dette giver følgende visning når man klikker rundt: 
[[fil:stepwise-imp-5.png|Visning ved 5. trin af kodeudviklingen]] 
''Visning ved 5. trin af kodeudviklingen''

Testen viser at vi kan skifte mellem billederne, men hvis vi tester lidt mere indgående, så finder vi også ud af at vi kan skifte de billeder der er kommet frem - det følger ikke de normale regner for det grundlæggende spil, så der skal indføres noget mere kode.

<hr />
Følgende rettelse indføres, hvor der også tages højde for om hele pladen er fyldt, både så det meldes ud både når pladen er fyldt og når man forsøger at klikke videre hvis pladen er fyldt.

Dette styres med en variabel der hedder '''placeret''', som holdes op mod variablen '''antal''', der egentlig fungerer som en konstant.

Det er følgende kode der laver dette som der er i '''index6.html''':
<source lang="javascript">
var antal = 9;
var tur = "Kryds";
var placeret = 0;
// Funktioner til programmet
function klik(billede, nr) {
if (billede.src.indexOf('Blank') < 1) {
if (placeret == antal) {
alert("Jeg sagde slut finale");
}
return;
}
billede.src = tur + ".png";
if (tur == "Kryds") {
tur = "Bolle";
} else {
tur = "Kryds";
}
placeret++;
if (placeret == antal) {
alert("Slut finale");
}
}
</source>

Dette giver følgende visning: 
[[fil:stepwise-imp-6.png|Visning ved 6. trin af kodeudviklingen]] 
''Visning ved 6. trin af kodeudviklingen''

Testen viser at der blokkeres for at ændre i de felter der er sat, og at der kommer en meddelelse når pladen er fyldt, og ligeledes en meddelelse når pladen er fyldt.

<hr />
For at kunne holde styr på hvad der er placeret hvor, så laves følgende array, der indeholder 9 elementer som hvert indikerer Tom:
<source lang="javascript">
var plade = new Array("Tom", "Tom", "Tom", "Tom", "Tom", "Tom", "Tom", "Tom", "Tom");
</source>

I funktionen klik gemmes så det der står som den aktuelle tur i arrayet som følger:
<source lang="javascript">
billede.src = tur + ".png";
plade[nr] = tur;
if (tur == "Kryds") {
</source>

Sidst i funktionen alertes arrayet lige ud på følgende måde, for at kunne følge med i hvor det placeres i arrayet:
<source lang="javascript">
alert(plade.join(" - "));
}</source>

Disse rettelser ligget i '''index7.html'''.

Dette giver følgende visning efter 3 klik: 
[[fil:stepwise-imp-7.png|Visning ved 7. trin af kodeudviklingen]] 
''Visning ved 7. trin af kodeudviklingen''

Som det fremgår af billedet, så ligger der nu et kryds i arrayets felt-0, en bolle i felt-1 og et kryds i felt-7 hvilket passer med den grafiske visning.

<hr />
Vi er nu ved at være så langt nu, at vi kan teste om der er en vinder af spillet. Det var meningen med arrayet, så vi tester lige om det er noget tomt der ligger i flet-0, og hvis der ikke er det, så testes om der ligger det samme i både felt-0, felt-1 og felt-2. Det gøres på følgende måde i slutningen af klik-funktionen som det er lavet i '''index8.html''':
<source lang="javascript">
if (plade[0] != "Tom") {
if ((plade[0] == plade[1]) && (plade[0] == plade[2])) {
alert(plade[0] + " er Vinder");
}
}
</source>

Dette testes med følgende visning: 
[[fil:stepwise-imp-8.png|Visning ved 8. trin af kodeudviklingen]] 
''Visning ved 8. trin af kodeudviklingen''

Dette viser at der kan testes om der er en vinder af spillet, og det kan også testes at Bolle kan stå som vinder af spillet.

Tester man lidt videre finder man straks ud af at der ikke testes for vinder i andre placeringer.

===Videre udvikling af spillet===
Det var ikke meningen at udvikle et fuldt og færdigt spil, men i stedet at vise metoden i stepwise improvement.

Der ligger stadig en del arbejde endnu i at få spillet færdigt, hvor det første naturligvis er at kode alle de andre vinder-muligheder ind i testen.

Der ligger også noget i at kunne genstarte spillet og måske holde noget statistik på hvor mange gange hver enkelt har vundet.

En anden udvidelse kunne være at spille efter de andre regler, hvor pladen ikke fyldes, men i stedet er sådan at man fylder 6 brikker i pladen hvorefter man skal flytte sine brikker - dette vil igen give en kreftig udvidelse af spillet.

==Referencer==
<references />
[[Kategori:Programmering teknik]]

Stepwise Improvement - Versionshistorie

Bar med 15. mar. 2024, 10:40

Bar: /* Referencer */

Bar: /* Referencer */

Bar: 1 version importeret

htx_>Bar: /* De forskellige trin i udviklingen */