09. april 2002 - 10:02Der er
23 kommentarer og 2 løsninger
hjælp til forenkling af script
Jeg skal lave et dokument hvor enkelte sætninger er markeret som henvisninger til noter. Når man holder musen over sætningen, skal noten stå i en iframe. Jeg har lavet scriptet på rigtig begyndervis (se nedenfor), men når jeg når op på 20-50 noter bliver det her selvfølgeligt for besværligt. Hvordan forenkler jeg det her bedst? Helst sådan at noter kan tilføjes og slettes løbende uden at man skal tilføje/slette andet end note-variablen (noteX = 'Det her er noteX'). Dvs. noget med nogle arrays der holder styr på hvor vi er eller så'n ?-) [betyder: ser spørgende, lidt dum ud]. Her er det der gerne skulle forenkles:
<html> <head>
<script language="javascript">
var startHTML = '<body bgcolor="#dedede"><p class="tekst">'; var endHTML = '</p></body>'; var note1 = 'Det her er note 1'; var note2 = 'Det her er note 2'; var note3 = 'Det her er note 3';
<p><a href="" onMouseOver="skrivNote1();" onClick="return false;">Dette skal forklares med note1</a></p> <p><a href="" onMouseOver="skrivNote2();" onClick="return false;">Dette skal forklares med note2</a></p> <p><a href="" onMouseOver="skrivNote3();" onClick="return false;">Dette skal forklares med note3</a></p>
var startHTML = '<body bgcolor="#dedede"><p class="tekst">'; var endHTML = '</p></body>'; var note1 = 'Det her er note 1'; var note2 = 'Det her er note 2'; var note3 = 'Det her er note 3';
function skrivNote(tekst) { parent.iframe.document.open("text/html"); parent.iframe.document.write(startHTML + tekst + endHTML); parent.iframe.document.close(); } </script>
<p><a href="" onMouseOver="skrivNote(note1);" onClick="return false;">Dette skal forklares med note1</a></p> <p><a href="" onMouseOver="skrivNote(note2);" onClick="return false;">Dette skal forklares med note2</a></p> <p><a href="" onMouseOver="skrivNote(note3);" onClick="return false;">Dette skal forklares med note3</a></p>
var startHTML = '<body bgcolor="#dedede"><p class="tekst">'; var endHTML = '</p></body>'; var noter=new Array('Det her er note 1','Det her er note 2','Det her er note 3');
<p><a href="" onMouseOver="skrivNote(1);" onClick="return false;">Dette skal forklares med note1</a></p> <p><a href="" onMouseOver="skrivNote(2);" onClick="return false;">Dette skal forklares med note2</a></p> <p><a href="" onMouseOver="skrivNote(3);" onClick="return false;">Dette skal forklares med note3</a></p>
Jeg er også langsom med min array version, anyway så er den her.
<html> <head>
<script language="javascript">
var startHTML = '<body bgcolor="#dedede"><p class="tekst">'; var endHTML = '</p></body>'; var note = ['Det her er note 1','Det her er note 2','Det her er note 3']
<p><a href="" onMouseOver="skrivNote(1);" onClick="return false;">Dette skal forklares med note1</a></p> <p><a href="" onMouseOver="skrivNote(2);" onClick="return false;">Dette skal forklares med note2</a></p> <p><a href="" onMouseOver="skrivNote(3);" onClick="return false;">Dette skal forklares med note3</a></p>
I det her tilfælde kan det næsten være ligemeget med array; smag og behag. Fordelen ved array er, at du kan skrive alle bemærkningerne i en lang tekststreng, men du kommer også lettere ti at lave syntaks-fejl. Hvis man ikke bruger array, gælder det bare om at lave korte og nemme navne på tekststumperne, f.eks. t1,t2,t3....
Den kan selvfølgelig også forenkles en smule mere; stadig uden array
var startHTML = '<body bgcolor="#dedede"><p class="tekst">'; var endHTML = '</p></body>'; var note1 = 'Det her er note 1'; var note2 = 'Det her er note 2'; var note3 = 'Det her er note 3';
<p><a href="" onMouseOver="s(1);" onClick="return false;">Dette skal forklares med note1</a></p> <p><a href="" onMouseOver="s(2);" onClick="return false;">Dette skal forklares med note2</a></p> <p><a href="" onMouseOver="s(3);" onClick="return false;">Dette skal forklares med note3</a></p>
Syntax fejlen laver man inden man smider siden ud og når mn så smider den ud, så vil den fylder mindre io array versionen og det er jo altid godt. Specielt som siden vokser med 50-100 indlæg :))
Og den allersidste, allersløvete version af det samme:
<script language="javascript">
var startHTML = '<body bgcolor="#dedede"><p class="tekst">'; var endHTML = '</p></body>'; var noter = new Array( 'Det her er note 0', // arrays starter i 0 'Det her er note 1', 'Det her er note 2', // såmange noter du vil med komma imellem 'Det her er note 3' // men ikke komma efter allersidste };
function skrivNote( nummer ) { // blot en enket funktion der får notens indexnummer i arrayet med som parameter parent.iframe.document.open("text/html"); parent.iframe.document.write(startHTML + noter[nummer] + endHTML); parent.iframe.document.close(); }
hmmmn, hjælp mig lige med forståelsen: så vidt jeg kan se er boris' det enkleste, og man kan netop tilføje og slette note-variablerne som det falder for uden videre. Hvis jeg så tillige ændrer navnene på notevariablerne så de er uden nummer, men f.eks. bare det ord der skal forklares, f.eks.:
var kineser = 'Person født i Kina'
- så skal man bare fjene/tilføje to steder: blandt notevariablerne og i body hvor ordet "kineser" (som pseudolink) forekommer. Hvorimod med array løsningen kommer man ikke uden om numre der skal opdateres hver gang man foretager en ændring - eller hyr?
Hvis du IKKE bruger Array, vil der ikke så let opstå forvekslinger. Der sker ikke noget ved, at du har tekststrenge liggende, du ikke bruger. det er også let at overskue med mange tekstrklæringer skrevet over hinanden: var t1 = "tekst1" var t2 = "tekst2" ..... Hvis du bruger Array, skal rækkefølgen nøje overholdes. Men det er rigtigt, at Arrayet i en lang tekststreng (på een linie) tager mindre plads. Det er væsentligt, hvis du skal gentage det mange hundrede gange.
Det er helt oplagt at bruge rigtige navne for variablerne. Det fylder en smule mere, men er langt mere sikkert. Hvis du vil spare på pladsen (som nikolajdu anbefaler) kan du skrive sådan: var note1 = 'Det her er note 1';var note2 = 'Det her er note 2';var note3 = 'Det her er note 3'; (Det skal være på een linie)
jeg tror jeg vil bruge boris' løsning så længe jeg ikke oplever nogle problemer i forb.m. størrelsen. og så eksperimentere med array-forslagene også. tak drenge!
var startHTML = '<body bgcolor="#dedede"><p class="tekst">'; var endHTML = '</p></body>'; var noter = { 'kineser:'Det her er note 0', // arrays starter i 0 "japaner":'Det her er note 1', "ost":'Det her er note 2', // såmange noter du vil med komma imellem "fejeblad":'Det her er note 3' // men ikke komma efter allersidste }; // nu er det virkelig sluttuborg der skal bruges.
function skrivNote( ord ) { // blot en enket funktion der får notens indexnummer i arrayet med som parameter parent.iframe.document.open("text/html"); parent.iframe.document.write(startHTML + noter[ord] + endHTML); parent.iframe.document.close(); }
</script>
Nu er det ligemeget hvad rækkefølge noterne står i og du kan slette/tilføje som du vil, for nu bruger du den streng der står foran : til at slå op med.
<p><a href="" onMouseOver="skrivNote('japaner');" onClick="return false;">Dette skal forklares med note1</a></p>
men det er en smagssag om det så er 'bedre' end boris's løsning med enkelte variabler.
nikilajdu's ville jeg mene er syntaktisk ukorrekt javascript. [ ] er til indexering i arrays og der findes ikke fler-dimensionelle arrays i javascript.
emileej's er parametre til en funktion, uden noget der peger på en javascript funktion foran ville jeg tro den er ukorrekt.
Men der er meget jeg ikke ved, især med hensyn til hvad IE accepterer som 'alternativ syntaks' i forskellige situationer.
emileej> jeg pusler lidt med alle løsningerne først for at se hvad der fungerer bedst til formålet - også for at forstå hvordan de hver især virker ;-)
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.