Blog om foto, web og brugervenlighed

Navnegenerator

august 8th, 2010. Kategori: Programmering

Jeg har fået et par henvendelser om,  hvordan man laver en navnegenerator. Derfor denne guide til, hvordan du kommer i gang. Tutorialen er henvendt til begyndere.

En navnegenerator er god at starte med, hvis man vil lege med programmering. Man kommer hurtigt i gang med at kode, får et brugbart og sjovt resultat, samtidig med at man arbejde med nogle basale ting indenfor programmering. Navnegeneratoren er meget simpel, så den er let at eksperimentere og arbejde videre med.

Navnegeneratoren er skrevet i JavaScript, og kan derfor afvikles i en browser. For et live eksempel se f.eks. min business name generator.

Navnegenerator script

Her er først navnegenerator scriptet i sin helhed:

function generator(){
// Tilføj dine egne ord. Vær omhyggelig med at overholde syntaksen.
var adjectives = [“Cool”,”Masked”,”Bloody”,”Lame”]
var animals = [“Hamster”,”Moose”,”Lama”,”Duck”]

// Tilfældige tal genereres
var randomNumber1 = parseInt(Math.random() * adjectives.length);
var randomNumber2 = parseInt(Math.random() * animals.length);
var name = adjectives[randomNumber1] + ” ” + animals[randomNumber2];

alert(name); //Slet eller udkommentér denne linje, når nedenstående virker.

//Hvis der allerede er et navn bliver det fjernet
if(document.getElementById(“result”)){
document.getElementById(“placeholder”).removeChild(document.getElementById(“result”));
}
// Et div element bliver lavet for at kunne vise det genererede navn.
//Navnet tilføjes en tekst-node. Tekstnoden tilføjes til pladsholderen.
var element = document.createElement(“div”);
element.setAttribute(“id”, “result”);
element.appendChild(document.createTextNode(name));
document.getElementById(“placeholder”).appendChild(element);
}

Men lad os pille koden fra hinanden og se på de enkelte dele hver for sig

Navne og ordlister

Det vigtigste element i en navnegenerator er selvfølgelig ordlisterne. Det er ud fra disse lister af ord, at navnene genereres. Jo flere ord eller navne du tilføjer til ordlisterne, des større variation i det endelige navn. Ordlisterne gemmes i Arrays. Arrays er kort fortalt variabler, der kan indeholde mange elementer. I vores tilfælde er disse elementer ord.

var adjectives = [“cool”,”masked”,”bloody”,”lame”];
var animals = [“hamster”,”moose”,”lama”,”duck”];

For at  hente data ud array’et bruger vi  array-navnet med en tæller i en firkant-parentes som parameter. I programmering tæller man næsten altid fra nul.

Så adjectives[0] returner cool og animals[1] giver moose.

Tilfældige navne

For at vælge tilfældige navne og ord fra ordlisterne bruger vi JavaScripts indbyggede random funktion. Math.random giver os  tilfældige tal mellem 0 og 0.9999999999999.

I vores tilfælde skal vi bruge et tilfældigt tal mellem 0 og 3, da vi har 4 elementer i hvert array. Derfor ganger vi random funktionens tal med 4. Resultatet er et tal mellem o og 3.9999999999996. Men i stedet for selv at skulle tælle antallet af elementer i array’et,  får vi JavaScript til at gøre det med lenght-funktionen.

Endelig bruger vi JavaScript funktionen parseInt() til at runde vores tal ned til det heltal (integer), vi skal bruge til at hente navnene ud af vores 2 arrays.

Det lyder måske en smule kompliceret, men kodemæssigt, er det ret simpelt.

randomNumber1 = parseInt(Math.random() * adjectives.length);
randomNumber2 = parseInt(Math.random() * animals.length);

Visning af navnet

Den simpleste metode til at vise navne generatorens resultat er med alert funktionen. Jeg bruger dog udelukkende alert() til at tjekke det genererede navn, fordi en alert box er meget irriterende at bruge i længden.

I stedet vil vi bruge 7 ekstra linjer på at integrere, dit tilfældige navn i websiden på en mere naturlig måde.

Inden vi går i gang, skal du lave et tomt div-tag i din HTML side, der hvor du gerne vil have dit tilfældige navn vist.  Dette div tag fungerer som en pladsholder for det genererede navn:

<div id=”placeholder”></div>

Og her er de 7 linjer ekstra kode, der skriver resultatet på websiden:

if(document.getElementById(“result”)){
document.getElementById(“placeholder”).removeChild(document.getElementById(“result”));
}

element = document.createElement(“div”);
element.setAttribute(“id”, “result”);
element.appendChild(document.createTextNode(name));
document.getElementById(“placeholder”).appendChild(element);

I denne kodeblok sker følgende:

1. Der tjekkes om der allerede findes et resultat (navn). Hvis ja, bliver det fjernet fra placeholderen
2. Så bliver der skrevet et nyt div element med id’en result, til at vise det nye resultat
3. Navnet bliver tilføjet div tagget som en text node.
4. Tilsidst bliver elementet (div-tag med indeholdende text node) hæftet på placeholderen i HTML’en.

Når denne del fungerer, kan du fjerne alert funktionen fra scriptet, da navnet nu bliver skrevet direkte i HTML’en.

Sæt navnegeneratoren sammen

Scriptet kan du enten inkludere i toppen af dit HTML dokument eller placere i et eksternt script. Så er generator funktionen klar til at blive kaldt fra din HTML side.

Jeg kalder altid scriptet 2 steder. Første gang med en onload event i body tagget. Så bliver navne generator koden afviklet, når siden loader første gang.

<body onload=”generator()”>

Jeg kalder selvfølgelig også generator-funktionen fra en knap, så man kan lave nye navne med et klik.

<input type=”button” value=”Generér navn” onclick=”generator()” />

Lav din egen navne generator

Med scriptet er det let at lave din egen personlige  navne generator. Valget af ord i ordlisterne afgør om din navne generator laver babynavne, piratnavne, kodenavne eller noget helt fjerde.

Generatoren kan selvfølgelig også bruges til andre ting. Hvad med at lave en slogan-generator, avisoverskrifter  eller besynderlige lovforslag fra Dansk Folkeparti? Kun din fantasi sætter grænserne.

Smid endelig en kommentar og et link, hvis du får bakset en sjov eller interessant navne generator sammen. 🙂

Navnegenerator ressourcer

Se alle mine egne navnegeneratorer. Pt har jeg 18 forskellige navnegeneratorer til inspiration.

Du kan finde et fikst og færdigt  navnegenerator-script til download på min officielle name generator blog. Scriptet er grundigt kommenteret på engelsk og sammen med denne tutorial, er det super nemt at komme i gang med at kode selv.

Endelig kan mit blogindlæg How to make a  name generator måske også hjælpe.

JavaScript på w3schools er et godt sted, hvis du skal bruge hjælp til javascript.