{"id":858,"date":"2010-08-08T09:31:00","date_gmt":"2010-08-08T08:31:00","guid":{"rendered":"http:\/\/www.nielsgamborg.dk\/wordpress\/?p=858"},"modified":"2010-08-08T09:31:00","modified_gmt":"2010-08-08T08:31:00","slug":"navnegenerator","status":"publish","type":"post","link":"https:\/\/nielsgamborg.dk\/wordpress\/programmering\/navnegenerator.htm","title":{"rendered":"Navnegenerator"},"content":{"rendered":"

Jeg har f\u00e5et et par henvendelser om,\u00a0 hvordan man laver en navnegenerator<\/strong>. Derfor denne guide til, hvordan du kommer i gang. Tutorialen er henvendt til begyndere.<\/p>\n

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

Navnegeneratoren er skrevet i JavaScript, og kan derfor afvikles i en browser. For et live eksempel se f.eks. min business name generator<\/a>.<\/p>\n

Navnegenerator script<\/h3>\n

Her er f\u00f8rst navnegenerator scriptet i sin helhed:<\/p>\n

function generator(){
\n\/\/ Tilf\u00f8j dine egne ord. V\u00e6r omhyggelig med at overholde syntaksen.
\nvar adjectives = [“Cool”,”Masked”,”Bloody”,”Lame”]
\nvar animals = [“Hamster”,”Moose”,”Lama”,”Duck”]<\/p>\n

\/\/ Tilf\u00e6ldige tal genereres
\nvar randomNumber1 = parseInt(Math.random() * adjectives.length);
\nvar randomNumber2 = parseInt(Math.random() * animals.length);
\nvar name = adjectives[randomNumber1] + ” ” + animals[randomNumber2];<\/p>\n

alert(name); \/\/Slet eller udkomment\u00e9r denne linje, n\u00e5r nedenst\u00e5ende virker.<\/p>\n

\/\/Hvis der allerede er et navn bliver det fjernet
\nif(document.getElementById(“result”)){
\ndocument.getElementById(“placeholder”).removeChild(document.getElementById(“result”));
\n}
\n\/\/ Et div element bliver lavet for at kunne vise det genererede navn.
\n\/\/Navnet tilf\u00f8jes en tekst-node. Tekstnoden tilf\u00f8jes til pladsholderen.
\nvar element = document.createElement(“div”);
\nelement.setAttribute(“id”, “result”);
\nelement.appendChild(document.createTextNode(name));
\ndocument.getElementById(“placeholder”).appendChild(element);
\n}<\/p><\/blockquote>\n

Men lad os pille koden fra hinanden og se p\u00e5 de enkelte dele hver for sig<\/p>\n

Navne og ordlister<\/h3>\n

Det vigtigste element i en navnegenerator er selvf\u00f8lgelig ordlisterne. Det er ud fra disse lister af ord, at navnene genereres. Jo flere ord eller navne du tilf\u00f8jer til ordlisterne, des st\u00f8rre variation i det endelige navn. Ordlisterne gemmes i Arrays. Arrays er kort fortalt variabler, der kan indeholde mange elementer. I vores tilf\u00e6lde er disse elementer ord.<\/p>\n

var adjectives = [“cool”,”masked”,”bloody”,”lame”];
\nvar animals = [“hamster”,”moose”,”lama”,”duck”];<\/p><\/blockquote>\n

For at\u00a0 hente data ud array’et bruger vi\u00a0 array-navnet med en t\u00e6ller i en firkant-parentes som parameter. I programmering t\u00e6ller man n\u00e6sten altid fra nul.<\/p>\n

S\u00e5 adjectives[0] returner cool og animals[1] giver moose.<\/p>\n

Tilf\u00e6ldige navne<\/h3>\n

For at v\u00e6lge tilf\u00e6ldige navne<\/strong> og ord fra ordlisterne bruger vi JavaScripts indbyggede random funktion. Math.random giver os\u00a0 tilf\u00e6ldige tal mellem 0 og 0.9999999999999.<\/p>\n

I vores tilf\u00e6lde skal vi bruge et tilf\u00e6ldigt 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\u00e6lle antallet af elementer i array’et,\u00a0 f\u00e5r vi JavaScript til at g\u00f8re det med lenght-funktionen.<\/p>\n

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.<\/p>\n

Det lyder m\u00e5ske en smule kompliceret, men kodem\u00e6ssigt, er det ret simpelt.<\/p>\n

randomNumber1 = parseInt(Math.random() * adjectives.length);
\nrandomNumber2 = parseInt(Math.random() * animals.length);<\/p><\/blockquote>\n

Visning af navnet<\/h3>\n

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\u00e6ngden.<\/p>\n

I stedet vil vi bruge 7 ekstra linjer p\u00e5 at integrere, dit tilf\u00e6ldige navn i websiden p\u00e5 en mere naturlig m\u00e5de.<\/p>\n

Inden vi g\u00e5r i gang, skal du lave et tomt div-tag i din HTML side, der hvor du gerne vil have dit tilf\u00e6ldige navn vist.\u00a0 Dette div tag fungerer som en pladsholder for det genererede navn:<\/p>\n

<div id=”placeholder”><\/div><\/p><\/blockquote>\n

Og her er de 7 linjer ekstra kode, der skriver resultatet p\u00e5 websiden:<\/p>\n

if(document.getElementById(“result”)){
\ndocument.getElementById(“placeholder”).removeChild(document.getElementById(“result”));
\n}<\/p>\n

element = document.createElement(“div”);
\nelement.setAttribute(“id”, “result”);
\nelement.appendChild(document.createTextNode(name));
\ndocument.getElementById(“placeholder”).appendChild(element);<\/p><\/blockquote>\n

I denne kodeblok sker f\u00f8lgende:<\/p>\n

    \n
  1. Der tjekkes om der allerede findes et resultat (navn). Hvis ja, bliver det fjernet fra placeholderen<\/li>\n
  2. S\u00e5 bliver der skrevet et nyt div element med id’en result, til at vise det nye resultat<\/li>\n
  3. Navnet bliver tilf\u00f8jet div tagget som en text node.<\/li>\n
  4. Tilsidst bliver elementet (div-tag med indeholdende text node) h\u00e6ftet p\u00e5 placeholderen i HTML’en.<\/li>\n<\/ol>\n

    N\u00e5r denne del fungerer, kan du fjerne alert funktionen fra scriptet, da navnet nu bliver skrevet direkte i HTML’en.<\/p>\n

    S\u00e6t navnegeneratoren sammen<\/h3>\n

    Scriptet kan du enten inkludere i toppen af dit HTML dokument eller placere i et eksternt script. S\u00e5 er generator funktionen klar til at blive kaldt fra din HTML side.<\/p>\n

    Jeg kalder altid scriptet 2 steder. F\u00f8rste gang med en onload event i body tagget. S\u00e5 bliver navne generator koden afviklet, n\u00e5r siden loader f\u00f8rste gang.<\/p>\n

    <body onload=”generator()”><\/p><\/blockquote>\n

    Jeg kalder selvf\u00f8lgelig ogs\u00e5 generator-funktionen fra en knap, s\u00e5 man kan lave nye navne med et klik.<\/p>\n

    <input type=”button” value=”Gener\u00e9r navn” onclick=”generator()” \/><\/p><\/blockquote>\n

    Lav din egen navne generator<\/h3>\n

    Med scriptet er det let at lave din egen personlige\u00a0 navne generator. Valget af ord i ordlisterne afg\u00f8r om din navne generator laver babynavne, piratnavne, kodenavne eller noget helt fjerde.<\/p>\n

    Generatoren kan selvf\u00f8lgelig ogs\u00e5 bruges til andre ting. Hvad med at lave en slogan-generator, avisoverskrifter\u00a0 eller besynderlige lovforslag fra Dansk Folkeparti? Kun din fantasi s\u00e6tter gr\u00e6nserne.<\/p>\n

    Smid endelig en kommentar og et link, hvis du f\u00e5r bakset en sjov eller interessant navne generator sammen. \ud83d\ude42<\/p>\n

    Navnegenerator ressourcer<\/h3>\n

    Se alle mine egne navnegeneratorer<\/a>. Pt har jeg 18 forskellige navnegeneratorer til inspiration.<\/p>\n

    Du kan finde et fikst og f\u00e6rdigt\u00a0 navnegenerator-script<\/a> til download p\u00e5 min officielle name generator blog. Scriptet er grundigt kommenteret p\u00e5 engelsk og sammen med denne tutorial, er det super nemt at komme i gang med at kode selv.<\/p>\n

    Endelig kan mit blogindl\u00e6g How to make a\u00a0 name generator<\/a> m\u00e5ske ogs\u00e5 hj\u00e6lpe.<\/p>\n

    JavaScript p\u00e5 w3schools<\/a> er et godt sted, hvis du skal bruge hj\u00e6lp til javascript.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Jeg har f\u00e5et et par henvendelser om,\u00a0 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\u00e5r et brugbart og sjovt resultat, samtidig med […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[109,187,188],"_links":{"self":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/posts\/858"}],"collection":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/comments?post=858"}],"version-history":[{"count":0,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/posts\/858\/revisions"}],"wp:attachment":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/media?parent=858"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/categories?post=858"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/tags?post=858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}