webForumDet fria alternativet

Varför är inte koderna snyggt uppradade till vänster sidan

Webbutveckling

17 svar · 1 184 visningar · startad av skillrookie

Medlem sedan feb. 2008141 inlägg
Frågan#1

Nu är jag väldigt ny i gamet så jag hoppas ni har överseende med de och inte skrattar ut mig. :OO

Till min frågan..

Varför är inte koderna snyggt uppradade till vänster sidan när man (tex) tar "Visa källa" ?

De skulle ju va betydligt lättare att "läsa"(?)koderna om man inte behövde sitta och scrolla till höger hela tiden?

:r

Medlem sedan sep. 2006867 inlägg
#2

Det beror på vem som har kodat och hur han eller hon vill ha sin kod. Vissa tycker det är lättare att programmera och felsöka om koden är logiskt indenterad, andra tycker som du. Men det är ganska vanligt att editorer erbjuder automatisk indentering så det är inte så konstigt eller ovanligt att man ser det lite här och där!

Medlem sedan okt. 20041 556 inlägg
#3

Personligen tycker jag att indenterad kod är mycket lättare att läsa, alltså första exemplet.

<table cellpadding="6" cellspacing="0" border="0">
    <tr>
        <td class="tfoot" align="right">
	    <div class="smallfont">
		<strong>
			<a href="sendmessage.php">Kontakta oss</a> -
			<a href="http://www.webforum.nu/">webForum</a> -
			<a href="#top" onclick="self.scrollTo(0, 0); return false;">Topp</a>
		</strong>
	    </div>
        </td>
    </tr>
</table>

Eller

<table cellpadding="6" cellspacing="0" border="0">
<tr>
<td class="tfoot" align="right">
<div class="smallfont">
<strong>
<a href="sendmessage.php">Kontakta oss</a> -
<a href="http://www.webforum.nu/">webForum</a> -		
<a href="#top" onclick="self.scrollTo(0, 0); return false;">Topp</a>
</strong>
</div>
</td>
</tr>
</table>
Medlem sedan juni 20008 205 inlägg
#4

När man utvecklar webbapplikationer inkluderar man ofta filer till höger och vänster. Varje fil i sig kanske har vettig indentering men när inkluderingarna görs ser det förjävligt ut, vilket inte spelar någon egentlig roll eftersom man sällan behöver titta på (eller iaf ändra på) den resulterande koden.

Medlem sedan mars 20034 471 inlägg
#5

Varför indentera?
För att koden blir mycket mer lättläst då - för en programmerare. I många programmeringsspråk har man tex slingor där koden som står i slingan upprepas ett antal gånger (while, for, ...), eller så händer olika saker beroende på vad någon variabel har för värde (if, case...). Då kan det underlätta att hitta feltänk om tråden är indenterad. Tex i JavaScript (som ju används i webbsidor ibland):

i = 1; //i är 1
while i < 10   // Så länge i < 10 skriv ut i
   field.innerText = i;    
i = i+1;

Detta genererar en oändlig slinga eftersom det enda som finns i whileslingan är "field.innerText = i" vilket fyller elementet field med:
1111111111111111111111111111111111111111111111111.....

Medan:

i = 1; //i är 1
while i < 10 {  // <---- Måsvingen gör att alla rader till } är med i while
   field.innerText = i;    
   i = i+1;       //i blir successivt ett större
}

Detta sätter elementet field = 123456789

Om man snabbt tittar på koden är det lättare att se att i = i+1 är felaktigt indenterad (jämfört med vad man tänkt sig) än huruvida de tunna "måsvingarna": {, } står där eller ej. Många editorer som man använder när man kodar, indenterar automatiskt koden, just för att öka läsbarheten för programmeraren.

Jämför följande i ren svenska:

aasah i gammal tråd skrev:

När jag läste min första datakurs lade föreläsaren på en OH med följande text:

Lektorn: Om dig Eriksson, om vilken jag ej kunnat tänka mig något dylikt, har jag, då du, då jag, på grund av iråkad snuva, måst nysa, brast i skratt, fått en högst ofördelaktig tanke.

Efter lite diskussion kring läsbarheten, avtäcktes OH:ns nedre del:

Indentering kan vara klargörande även i icke programmeringssammanhang: Lektorn:

Om dig Eriksson, 
   om vilken jag ej kunnat tänka mig något dylikt, 
har jag, 
   då du, 
      då jag,  
         på grund av iråkad snuva, 
      måst nysa, 
   brast i skratt,  
fått en högst ofördelaktig tanke.

:e

Varför inte indentera på webben?
Jo, koden blir ju mer lättläst... och är synlig för alla med "Visa källa". Om man nu har åstadkommit en kod efter månaders jobb vill man kanske inte (speciellt som professionell kodare?) att andra ska kunna kopiera koden utan ett h-s jobb. Och om man tar bort indenteringen, kan det lätt bli svåröverskådligt till tusen, speciellt längre kodstycken.

Sedan finns det en del program som automatiskt genererar HTML/XHTML/XML kod och de lägger med fördel all genererad kod i en enda lång - totalt oläslig - rad.

Ett annat skäl kan vara att den HTML/XHTML/XML som du hittar i källan inte är direkt skriven exakt så av kodaren. Den kanske är framtagen mha ett serversidesskript tex. Och då blir det lätt så, att serversidans kod blir snyggt indenterad, men eftersom den HTML/XHTML/XML som skickas till sidan bara är en textsträng på serversidan, så bryr man sig inte om att försöka indentera dess innehåll. Jämför: (Kod i PHP, echo skriver ut till sidan)

echo "<table><tr><th>Namn</th><th>Registreringsdatum</th></tr>";
while $i < 10 {  
   echo "<tr><td>$namn_$i</th><th>$registreringsdatum_$i</th></tr>";    
   $i = $i+1;       
}
echo "</table>";

Vilket i "Visa källa" ger resultatet (tex):

Visa källa skrev:

<table><tr><th>Namn</th><th>Registreringsdatum</th></tr><tr><td>Anna</th><th>070204</th>....[8 tabellrader till i en lång rad].... <tr><td>Örjan</th><th>080109</th></tr>

Om jag ville ha ut en indenterad tabell i källan skulle jag tvingas skriva något i stil med:

echo "<table><br>&nbsp;&nbsp;<tr><th>Namn</th><th>Registreringsdatum</th></tr><br>";
while $i < 10 {  
   echo "&nbsp;&nbsp;<tr><td>$namn</th><th>$registreringsdatum</th></tr><br>";    
   $i = $i+1;       
}
echo "</table>";

I detta fall måste jag försöka visuallisera hur HTML-koden kommer att se ut i källan för att räkna ut hur många   som ska klämmas in tillsammans med <br> - och var - för att ge en snygg källa. (I princip omöjligt, i lite längre kod.)

Medlem sedan sep. 2006867 inlägg
#6

Det var ett långt och läsvärt svar du gav aasah :)

Medlem sedan mars 20007 896 inlägg
#7

Men trots allt inte riktigt rätt.

Ang. aasah's JavaScript-exempel så bygger det mer på semantik. I JavaScript (bl.a.) så används måsvingar som avgränsare för block. I satser (if-, for-, while-, osv) använder man måsvingar om satsen ska gälla för ett helt block eller enbart för en rad. Där i ligger skillnaden mellan måsvinge och icke måsvinge.

Ex:

var i = 0;
while(i < 10) {
   document.writeln(i);
   i++;
}

Ovanstående gör precis samma sak som:

var i = 0;
while(i < 10)
   document.writeln(i++);

Men följande kommer att generera en oändlig loop:

var i = 0;
while(i < 10)
   document.writeln(i);
   i++;

while-satsen utan måsvingar gäller alltså enbart för en rad efter satsen.

Ang. indentering i "Visa källa"-exemplet så...
aasah's exempel kommer generera en massa ' ' i källkoden - inte mellanslag.
Det borde snarare se ut så här:

echo "<table><br>\t<tr><th>Namn</th><th>Registreringsdatum</th></tr><br>";
while $i < 10 {  
   echo "\t<tr><td>$namn</th><th>$registreringsdatum</th></tr><br>";    
   $i = $i+1;       
}
echo "</table>";

Vi kan dock dra som slutsats att indentering används oftast för att göra koden mer läsbar och att det ska vara enklare att överblicka var block startar och slutar. Vissa språk kräver dock indentering, som Python, Haskell, Pascal, bland andra. Här är semantiken uppbyggd på indentering, vilket resulterar i alltid läsbar kod. ;)

Medlem sedan feb. 2008141 inlägg
#8

Oj! Stort tack för så serjösa svar! Vilket kanon forum ja hamnat på! (y)

Nu är ju vissa termer (i princip alla) ni skriver svårare att förstå än hieroglyfer för mig..hehe..(än så länge i alla fall :stud ) men nu vet ja i alla fall varför koderna envisas med att stå som dom gör.

Men om man ska skriva den koden som Travoni skrev

<table cellpadding="6" cellspacing="0" border="0">
    <tr>
        <td class="tfoot" align="right">
	    <div class="smallfont">
		<strong>
			<a href="sendmessage.php">Kontakta oss</a> -
			<a href="http://www.webforum.nu/">webForum</a> -
			<a href="#top" onclick="self.scrollTo(0, 0); return false;">Topp</a>
		</strong>
	    </div>
        </td>
    </tr>
</table>

sitter man och "spacear" ut dom då? :r (nu förstår ni nog vilken hög nivå ja ligger på)

Medlem sedan juli 20031 132 inlägg
#9

skillrookie skrev:

sitter man och "spacear" ut dom då?

Många texteditorer gör detta "automatiskt", alltså skriver du <table> och trycker enter så hamnar textmarkören inte bara en rad ner, utan också ett steg "in". Annars är det väl ofta tab som gäller, alltså knappen ovanför caps lock.

Medlem sedan feb. 2008141 inlägg
#10

Tackar!

Hehe..har man lång väg till att bli en bra programmerare om man precis lärt sig använda tab? :p :stud (shit vilken mega rookie ja är :e )

Men tack för alla svar, jag markerar inte tråden som "tråden löst" då jag nog kommer med mer frågor i ämnet inom en snar framtid.

Hej så länge.

Medlem sedan mars 20034 471 inlägg
#11

SPiN skrev:

Men trots allt inte riktigt rätt.

Ang. aasah's JavaScript-exempel så bygger det mer på semantik. I JavaScript (bl.a.) så används måsvingar som avgränsare för block. I satser (if-, for-, while-, osv) använder man måsvingar om satsen ska gälla för ett helt block eller enbart för en rad. Där i ligger skillnaden mellan måsvinge och icke måsvinge.....

Vilket jag också skrev, om du hade läst noga.

SPiN skrev:

Ang. indentering i "Visa källa"-exemplet så...
aasah's exempel kommer generera en massa ' ' i källkoden - inte mellanslag....

Sant...   genererar mellanslag i den genererade sidan, inte i "visa källa". Suck! Men själva resonemanget är detsamma.

Hur som helst tyckte jag frågeställningen tydde på så pass grundläggande nivå att jag medvetet höll en mycket låg profil om "block" och alternativa skrivsätt. Tyckte det var mer motiverat att bara försöka förklara indentering med ett minimum av kodsnack.

Medlem sedan mars 20034 471 inlägg
#12

skillrookie skrev:

Hehe..har man lång väg till att bli en bra programmerare om man precis lärt sig använda tab? :p :stud

Man har mycket kortare väg att gå än de som aldrig lär sig. ;) Eller kanske snarare inte bryr sig om att ta till sig goda råd. :)

Medlem sedan juli 20013 378 inlägg
#13

... och vill man läsa andra människors kod finns det hjälpmedel :)

En vettig text-editor bör t.ex. kunna hjälpa dig med autoindentering ;)

Men det finns också minst en plugin till Mozilla som indenterar källkoden på ett visuellt sätt som du kan använda istället för "visa källa" ;)

Medlem sedan sep. 2006867 inlägg
#14

jarvklo skrev:

... och vill man läsa andra människors kod finns det hjälpmedel :)

En vettig text-editor bör t.ex. kunna hjälpa dig med autoindentering ;)

Men det finns också minst en plugin till Mozilla som indenterar källkoden på ett visuellt sätt som du kan använda istället för "visa källa" ;)

Fast skillrookie:s problem var att han ville ha bort indenteringen för att slippa skrolla (duckar - använda rulllisten?) i sidled och en sådan plugin tror jag inte jag sprungit på ännu :)

Medlem sedan mars 20034 471 inlägg
#15

jarvklo skrev:

... och vill man läsa andra människors kod finns det hjälpmedel :)

Suck... var har jag påstått att det skulle vara en säker metod för att dölja koden? Men jag känner minst en som medvetet lägger allt i en rad för att nyfiket folk ska få jobba för infon. Med motiveringen att han i alla fall inte behöver göra det enkelt för dem. Och att det åtminstone ställer alla nybörjare. Om det är motiverat eller inte är knappast on-topic...

Och inte visste jag att vi var i språkforumet heller... §jr

Medlem sedan juli 20013 378 inlägg
#16

Hmm... - ledsen om att jag tydligen uttryckte mig så att svaret gick att missförstå :f

headbug skrev:

Fast skillrookie:s problem var att han ville ha bort indenteringen för att slippa skrolla (duckar - använda rulllisten?) i sidled och en sådan plugin tror jag inte jag sprungit på ännu :)

Har du testat den jag föreslog? Jag upplever att den formatterar om koden på ett sätt som gör att man inte behöver sidrulla speciellt mycket överhuvudtaget, därav att jag föreslog den :OO

Dessutom - om ens favoritredigerare inte hanterar en inställning av indraget till noll tabbar eller mellanslag vid "code betutify", kanske den har ett kommando typ "ta bort alla tabbar" som man man köra efter en "beautify code" - typ? :i

Att ta upp kod man är intresserad av i en modern textredigerare med taggkolorering och möjligheter till "tag folds", indragsinställningar osv är, som jag ser det, det absolut enklaste sättet att analysera den / lära sig av den...

aasah skrev:

Suck... var har jag påstått att det skulle vara en säker metod för att dölja koden?

ehm, hur lyckas du tolka in att någon skulle ha gjort det i den här tråden egentligen ??? Tråden handlar om kodläsbarhet - och där ingår naturligt andra människors kod, eller hur? ;)

Det du citerade av mig skrevs som en stilla gliring till att tråden börjat glida bort från ämnet (duckar och väntar på de sedvanliga personangreppen som brukar dyka upp när man har fräckheten att påpeka sån't här på wF numera)

aasah skrev:

Och inte visste jag att vi var i språkforumet heller... §jr

. hehe amen till den :moose

Medlem sedan dec. 20014 239 inlägg
#17

Tråden rensad på en del off topic inlägg, skulle kunna rensa mer men det föstör en del av sammanhanget. Vill ni diskutera vad olika ord betyder föreslår jag att ni startar en tråd i Språk & Litteratur forumet.

Medlem sedan feb. 2008141 inlägg
#18

Jag vill bara säga att jag endå tycker att de hade med topic och göra. :) Jag lärde mig ett ord jag jag själv inte hittade när jag skrev min fråga.

411 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
268 ms — deklarationer (db)
0 ms — hämta statistik (cache)
139 ms — hämta tråd, inlägg och bilagor (db)
268 ms — ändringar (db)