SupportData.Net JavaScript från början - skriv HTML-kod från javaskript

Skapa HTML-kod från javaskriptet

Vi har redan använt textsträngar i flera skript och litet längre fram skall vi titta mycket på objektet String. Men här skall vi låta ett javaskript bygga upp de HTML-taggar som behövs för att skapa en tabell med färger och färgvärden.

En sträng kan utnyttja alla tecken, även de båda hakar som man använder för att markera att något är HTML-kod: < och >. När webbläsaren hittar dessa hakar, tolkar den det som står mellan hakarna som HTML-kod. Webbläsaren skriver inte ut innehållet mellan hakarna, utan använder koden mellan dem för att formatera sidan.

För att förmå ett javaskript att skriva ut text på sidan, använder vi följande kod:

<SCRIPT language="JavaScript">  </SCRIPT>

document.write('...')
Det som skrivs in mellan de enkla citationstecknen kommer att skrivas ut på skärmen, på den sida som redan är öppen (document). De delar som är inneslutna mellan hakar (< >) tolkas däremot som HTML-kod och behandlas som sådan.

Om jag hade behövt använda skriptet i en funktion som anropades någonstans ifrån, skulle jag ha lagt det i HEAD-elementet. I stället placerade jag den direkt i den här tabellcellen, och resultatet blir exakt detsamma som om jag hade skrivit in HTML-koden direkt i cellen – i själva verket hade koden då blivit kortare:

<CENTER> <P>"Ack, mor, lilla mor, lilla moder, du väger långt mer än du trott."<BR> Ur "Å mors dag", A :lfr-d V :stl-nd 1933</P> </CENTER>

Visa när sidan uppdaterades

Genom att kombinera "document.write" med ett av dokumentobjekten, kan vi visa när sidan senast uppdaterades. Även här lägger vi skriptet direkt i BODY-taggen:

<SCRIPT language="JavaScript">  </SCRIPT>

document.write(' ... ' + document.lastModified + ' ... ');
Mellan de enkla citationstecknen (två par) anger vi HTML-koden som skall användas. Där datum för senaste uppdatering skall placeras lägger vi till document.lastModified mellan två plustecken.

Alltså: Skriv 'kod' + detta + 'mer kod'.

Större jobb för document.write

Men det är inte i första hand i sådana här småsnuttar som document.write gör nytta. Eftersom stränghanteringen kan kombineras men annan javaskriptkod, kan vi få den att utföra betydligt större arbeten.

Vi skall visa alla de 216 "webbsäkra" färgerna i sex tabeller. På varje färgruta skrivs färgens hexvärde (000000 till ffffff).

I den första tabellen skall vi visa alla färger vars värde börjar på 00, i den andra alla vars värde börjar på 33 och så vidare.

Hexvärdena skall skrivas med en teckensnittsfärg som avviker från bakgrundsfärgerna (det inte alltid tillräckligt, tyvärr, men markerar man värdet syns det ändå).

Om du har erfarenhet av att koda HTML, inser du säkert hur omfattande den här tabellkoden skulle bli. Vi skall ha sex tabeller med sammanlagt 36 rader och 216 celler. Varje cell skall ha en egen bakgrundsfärg och en egen teckensnittsfärg ...

Vi gör det med ett javaskript i stället. Koden ser ut så här:

<SCRIPT language="JavaScript">  </SCRIPT>

Observera att det räcker med 11 kodrader – resten är kommentarer och klamrar.

webbsaker = new Array('00','33','66','99','cc','ff');
Först skapar vi en Array() som innehåller de möjliga värdena – alla webbsäkra hexvärden är sammansatta av tre grupper ur 00, 33, 66, 99, cc och ff. De tre grupperna står för r, g och b i RGB-värdet.

for (r=0;r<6;r++) och for (g=0;g<6;g++) och for (b=0;b<6;b++)
Nu gör vi tre så kallade repetitionssatser eller for-loopar. Skriptkörningen kommer att gå igenom looparna sex gånger sex gånger sex gånger – 216 varv – och plocka ut värden ur vektorn "webbsaker", tills alla tänkbara kombinationer är framtagna.

document.write("<table border=0 cellpadding=3 bgColor='white'>");
Här börjar skriptet skriva tabellkoden – vi får den inledande TABLE-taggen. Detta kommer att upprepas sex gånger så att vi får sex inledande TABLE-taggar.

document.write("<tr>");
För varje varv – alltså sex gånger per tabell – kommer skriptet att skriva en inledande TR-tagg.

document.write('<td bgcolor="#'+webbsaker[r]+webbsaker[g]+webbsaker[b]+'" align="right">');
Skriptet skriver den inledande TD-taggen sex gånger per rad i tabellerna. Det anger samtidigt att cellens bakgrundsfärg skall vara # + de värden som for-looparna (r, b och g) just har plockat fram. Dessutom skall innehållet i cellerna vara högerställt.

document.write('<tt><font color="#'+webbsaker[7-r]+webbsaker[7-g]+webbsaker[7-b]+'"> ');
Nu anges teckensnittsfärgen och "7-r", "7-g" och "7-b" ser till att den kommer att avvika från bakgrundsfärgen. Det här värdet kan vi experimentera med – det blir kanske bättre med 6 eller 9?

Eftersom texten ffffff är svårläst i normala breddsteg, anges även taggen <TT>. Den gör att den efterföljande texten visas med fast breddsteg. Det gör samtidigt att ffffff kommer att visas lika brett som 000000.

document.write('   ' +webbsaker[r]+webbsaker[g]+webbsaker[b]+'   </font></tt></td>');
Hela koden skall ligga på en rad.

Den här raden lägger till tre blanksteg före och efter varje text, för att texten skall visas snyggare i cellerna. Den skriver även med den angivna teckensnittsfärgen ut färgvärdena i respektive celler.

Dessutom avslutar den FONT-taggar, TT-taggar och TD-taggar.

document.write("</tr>");
Sedan följer en rad som avslutar alla tabellrader.

document.write("</table><br>");
Och slutligen en rad som avslutar alla sex tabellerna och lägger en radbrytning efter var och en.