Webbling - Användarbidrag [sv]

CSS-egenskapslista

2026-08-30T01:45:20Z

PGJ:

Här är en lista på de flesta [[CSS-egenskap]]erna. Då [[CSS]] är en ständigt föränderlig standard (eller snarare flera delstandarder), täcker inte denna lista varenda liten egenskap som finns tillgänglig. Dock så bör detta vara ett bra urval.

<div class="well well-danger">
Det finns även en hel del CSS-egenskaper som är specifika för olika webbläsare. Generellt sett bör man undvika att använda sig av dessa och hålla sig till de som är standardiserade. Då blir din webbsida mer framtidssäker och mer tillgänglig för dina användare.
</div>
== A ==
=== <code>[[align-content]]</code> ===
Styr hur innehållet i flexboxar ska läggas ut när det inte får plats på en enda rad. Påverkar enbart om <code>flex-wrap: wrap</code> gäller för flexbehållaren. Se [[flexbox_grunder|flexbox grunder]] och [[avancerad_flexbox|avancerad flexbox]] för mer information.
=== <code>[[align-items]]</code> ===
Justerar hur en flexbehållares innehåll placeras ut längs med korsaxeln. Se [[flexbox_grunder|flexbox grunder]] och [[avancerad_flexbox|avancerad flexbox]] för mer information och specifikt [[Mer_flexbox#align-items|detta]].
=== <code>[[align-self]]</code> ===
Styr hur ett individuellt flexföremål ska placeras ut längs med korsaxeln. Används oftast då man vill undanta ett element från det som satts med <code>[[align-items]]</code>. Se [[flexbox_grunder|flexbox grunder]] och [[avancerad_flexbox|avancerad flexbox]] för mer information och specifikt [[Mer_flexbox#align-items|detta]].
=== <code>[[all]]</code> ===
Nollställer alla egenskaper, förutom <code>direction</code> och <code>unicode-bidi</code>.

===<code>animation</code>===
Samlingsegenskap som används för att sätta de flesta animationsegenskaper samtidigt.

===<code>animation-delay</code>===
Anger hur lång tid som ska förflyta innan animationen börjar spelas.

===<code>animation-direction</code>===
Anger om animationen ska spelas baklänges varannan cykel (pingpong-animation).

===<code>animation-duration</code>===
Anger hur lång tid en animationscykel ska ta.

===<code>animation-fill-mode</code>===
Anger på vilket sätt de animerade egenskaperna ska sättas på elementet, såväl före som efter animationen körs.

===<code>animation-iteration-count</code>===
Anger hur många gånger en animation ska spelas upp innan den avslutas helt.

===<code>animation-name</code>===
Anger namnet på en animationssekvens.

===<code>animation-play-state</code>===
Anger om en animation spelas upp eller om den är stoppad.

===<code>animation-timing-function</code>===
Anger vilken tidsfunktion som ska användas när en en animation spelas upp.

== B ==
=== <code>background</code> ===
En samlingsegenskap som sätter alla värden som har med bakgrunden att göra.

=== <code>background-attachment</code> ===
Anger om en bakgrund ska fixeras eller om den ska skrollas med.

=== <code>background-blend-mode</code> ===
Anger hur utritningen av en bakgrund ska mixas med annat material. Fungerar ungefär som Photoshops blendmodes.

=== <code>background-clip</code> ===
Anger om bakgrunden ska sträcka sig in under eventuell kantlinje eller ej.

=== <code> [[background-color]] </code> ===
Används för att ändra bakgrundsfärgen på ett element.

=== <code>background-image</code> ===
Anger en bild som ska användas som bakgrund.

=== <code>background-origin</code> ===
Anger var någonstans i en bild som bakgrunden ska hämtas. Används om man vill ha en viss bit ur en större bild.

=== <code>background-position</code> ===
Anger var i elementet bakgrunden ska placeras ut.

=== <code>background-repeat</code> ===
Anger om en bakgrund ska repeteras eller ej.

=== <code>background-size</code> ===
Storleken på eventuell bakgrund.

=== <code> [[border]] </code> ===
Används för skapa en kantlinje runt ett element. Detta är en samlingsegenskap med vilken man kan ange alla egenskaper som har med kantlinjer att göra (förutom <code>[[border-radius]]</code> och <code>[[border-image]]</code>).

=== <code> [[border-*|border-bottom]] </code> ===
Används för skapa en kantlinje på botten av ett element. Detta är en samlingsegenskap med vilken man kan ange alla egenskaper som har med kantlinjen att göra.

=== <code> [[border-*-color | border-bottom-color]] </code> ===
Används för att sätta linjefärgen på en kantlinje på botten av ett element.

=== <code> [[border-*-*-radius|border-bottom-left-radius]] </code> ===
Används för att sätta skapa ett rundat hörn på ett element, i detta fall det nedre, vänstra hörnet.

=== <code> [[border-*-*-radius|border-bottom-right-radius]] </code> ===
Används för att sätta skapa ett rundat hörn på ett element, i detta fall det nedre, högra hörnet.

=== <code> [[border-*-style|border-bottom-style]] </code> ===
Används för att sätta linjetyp på en kantlinje på botten av ett element.

=== <code> [[border-*-width|border-bottom-width]] </code> ===
Används för att sätta bredden på en kantlinje på botten av ett element.

=== <code> [[border-collapse]] </code> ===
Anger hur kanterna i tabellelement ska falla samman.

=== <code> [[border-color]] </code> ===
Används för att sätta linjefärgen på en eller flera kantlinje på ett element.

=== <code> [[border-image]] </code> ===
En samlingsegenskap som används för att sätta allt som har att göra med grafik i kantlinjer.

=== <code> [[border-image-outset]] </code> ===
Anger hur långt utanför kantlinjen som grafiken ska sticka ut.

=== <code> [[border-image-repeat]] </code> ===
Anger om grafiken i en kantlinje ska repeteras eller ej.

=== <code> [[border-image-slice]] </code> ===
Ange om grafiken för en kantlinje ska använda sig av så kallad nine-slice.

=== <code> [[border-image-source]] </code> ===
Anger URL:en som leder till grafiken för en kantlinje.

=== <code> [[border-image-width]] </code> ===
Anger bredden på grafiken för en kantlinje.

=== <code> [[border-*|border-left]] </code> ===
Används för skapa en kantlinje på vänsterkanten av ett element. Detta är en samlingsegenskap med vilken man kan ange alla egenskaper som har med kantlinjen att göra.

=== <code> [[border-*-color | border-left-color]] </code> ===
Används för att sätta linjefärgen på en kantlinje på vänstersidan av ett element.

=== <code> [[border-*-style|border-left-style]] </code> ===
Används för att sätta linjetyp på en kantlinje på vänstersidan av ett element.

=== <code> [[border-*-width|border-left-width]] </code> ===
Används för att sätta bredden på en kantlinje på vänstersidan av ett element.

=== <code> [[border-radius]] </code> ===
Används för att sätta skapa rundade hörn på ett element.

=== <code> [[border-*|border-right]] </code> ===
Används för skapa en kantlinje på högerkanten av ett element. Detta är en samlingsegenskap med vilken man kan ange alla egenskaper som har med kantlinjen att göra.

=== <code> [[border-*-color | border-right-color]] </code> ===
Används för att sätta linjefärgen på en kantlinje på högersidan av ett element.

=== <code> [[border-*-style|border-right-style]] </code> ===
Används för att sätta linjetyp på en kantlinje på högersidan av ett element.

=== <code> [[border-*-width|border-left-width]] </code> ===
Används för att sätta bredden på en kantlinje på högersidan av ett element.

=== <code> [[border-*|border-top]] </code> ===
Används för skapa en kantlinje på toppen av ett element. Detta är en samlingsegenskap med vilken man kan ange alla egenskaper som har med kantlinjen att göra.

=== <code> [[border-style]] </code> ===
Används för att sätta linjetypen på en eller flera kantlinje på ett element.

=== <code> [[border-*-color | border-top-color]] </code> ===
Används för att sätta linjefärgen på en kantlinje på toppen av ett element.

=== <code> [[border-*-*-radius|border-top-left-radius]] </code> ===
Används för att sätta skapa ett rundat hörn på ett element, i detta fall det övre, vänstra hörnet.

=== <code> [[border-*-*-radius|border-top-right-radius]] </code> ===
Används för att sätta skapa ett rundat hörn på ett element, i detta fall det nedre, högra hörnet.

=== <code> [[border-*-style|border-top-style]] </code> ===
Används för att sätta linjetyp på en kantlinje på toppen av ett element.

=== <code> [[border-*-width|border-left-width]] </code> ===
Används för att sätta bredden på en kantlinje på toppen av ett element.

=== <code> [[border-width]] </code> ===
Används för att sätta linjebredden på en eller flera kantlinje på ett element.

=== <code> [[bottom]] </code> ===
Anger var den botten på ett element ska placeras. Hur detta tolkas varierar med vilken typ av <code>[[position]]</code> som angetts för elementet.

=== <code> [[box-shadow]] </code> ===
Används för att skapa en, eller flera, skuggor kring en box.

=== <code> [[box-sizing]] </code> ===
Väljer vilken [[boxmodellen|boxmodell]] som ska gälla för ett blockelement.

=== <code> [[break-after]] </code> ===
Anger om det ska ske en brytning efter ett skapat element.

=== <code> [[break-before]] </code> ===
Anger om det ska ske en brytning före ett skapat element.

=== <code> [[break-inside]] </code> ===
Anger om det ska ske brytningar ska kontrolleras inuti ett skapat element.

== C ==
=== <code> [[caption-side]] </code> ===
Anger var en illustrations bildtext ska placeras.

=== <code> [[clear]] </code> ===
Anger om flytande element ska ligga mot varandra eller ej. Se [[Layout]] för mer info.

=== <code> [[clip-path]] </code> ===
Klipper ut en del av ett element så det inte visas. Kan användas för att åstadkomma andra former än rent rektangulära regioner.

=== <code> [[color]] </code> ===
Används för att ändra förgrundsfärgen på ett element. Mestadels är detta för att förändra textfärgen, men även andra egenskaper påverkas...

=== <code> [[content]] </code> ===
Används tillsammans med <code>::before</code> och <code>::after</code> för att lägga till innehåll i dessa.

=== <code> [[counter-increment]] </code> ===
Används för att öka en [[CSS-räknare]] med ett angivet värde.

=== <code> [[counter-reset]] </code> ===
Används för att nollställa en [[CSS-räknare]].

=== <code> [[cursor]] </code> ===
Anger vilken typ av cursor som ska användas i ett element.

== D ==
===<code>[[direction]]</code>===
Anger i vilken riktning innehåll ska läggas ut, speciellt gäller detta för text. Vi kan sätta om texten ska ritas ifrån vänster till höger, dvs "vanlig" text eller om den ska ritas ut ifrån höger till vänster, t.ex. om det är arabiska.

===<code>[[display]]</code>===
Anger vilken layouttyp ett element ska ritas ut med. I de enklaste fallen kan det vara om ett element är ett blockelement eller ett inlineelement.

== E ==
===<code>empty-cells</code>===
Anger hur tomma celler i en tabell ska hanteras.

== F ==
===<code>[[filter]]</code>===
Anger ett grafikfilter för ett element. Kan användas för att t.ex. göra innehållet i ett element suddigt.

===<code>[[flex]]</code>===
En samlingsegenskap för att sätta <code>[[flex-basis]]</code>, <code>[[flex-grow]]</code> och <code>[[flex-shrink]]</code> på en och samma gång.

===<code>[[flex-basis]]</code>===
Anger startstorleken på ett flexelement. Se [[Flexbox - sätta storlek]] för mer info.

===<code>[[flex-direction]]</code>===
Anger i vilken riktning flexaxeln ska gå. Se [[Flexbox - sätta riktning]] för mer info.

===<code>[[flex-flow]]</code>===
En samlingsegenskap för att sätta <code>[[flex-direction]]</code> och <code>[[flex-wrap]]</code> på en och samma gång.

===<code>[[flex-grow]]</code>===
Anger hur mycket ett flexelement ska växa till sig i förhållande till andra flexelement. Se [[Flexbox - sätta storlek]] för mer info.

===<code>[[flex-shrink]]</code>===
Anger hur mycket ett flexelement ska krympa i förhållande till andra flexelement. Se [[Flexbox - sätta storlek]] för mer info.

===<code>[[flex-wrap]]</code>===
Anger hur en flexbehållare ska bete sig när det blir "fullt" på flexaxeln. Ska innehållet delas upp på flera rader/kolumner? Se [[Flexbox - flexbehållare med flera rader]] för mer info.

===<code>[[float]]</code>===
Anger om ett element ska vara flytande och hur det i så fall ska positioneras. Det traditionella sättet på vilket man skapar layout i CSS. Se [[layout]] för mer info. [[Flexbox grunder|Flexbox]] är ett modernare och bättre sätt på vilket man kan skapa layout.

===<code>[[font]]</code>===
En samlingsegenskap som kan användas för att sätta många av värdena som har med teckensnitt att göra.

===<code>[[font-family]]</code>===
Anger vilket teckensnitt som ska användas i ett element.

===<code>[[font-feature-settings]]</code>===
Används för att styra egenskaper hos OpenType-teckensnitt.

===<code>[[font-kerning]]</code>===
Anger för att styra hur mellanrummet mellan bokstäver hanteras.

===<code>[[font-language-override]]</code>===
Används för att hantera tecken som är specifika för speciella språk.

===<code>[[font-size]]</code>===
Anger vilken storlek som teckensnittet i ett element ska ha.

===<code>[[font-size-adjust]]</code>===
Anger om storleken på ett teckensnitt ska baseras på dess versaler eller dess gemena (stora/små bokstäver).

===<code>[[font-stretch]]</code>===
Används för att välja mellan olika typer i ett teckensnitt.

===<code>[[font-style]]</code>===
Används för att ändra mellan olika teckensnittsstilar, t.ex. kursiv.

===<code>[[font-synthesis]]</code>===
Kontrollerar hur och om webbläsaren ska "skapa" tecken som saknas i ett teckensnitt.

===<code>[[font-variant]]</code>===
En samlingsegenskap som används för att ange värden för alla egenskaperna av typen <code>font-variant-*</code>.

===<code>[[font-variant-alternates]]</code>===
Anger hur alternativa tecken som definerats med <code>@font-feature-values</code> ska hanteras.

===<code>[[font-variant-caps]]</code>===
Anger hur versala (stora) bokstäver ska hanteras.

===<code>[[font-variant-east-asian]]</code>===
Anger hur asiatiska tecken ska hanteras.

===<code>[[font-variant-ligatures]]</code>===
Används för att ange hur sammanbundna tecken, dvs ligaturer, ska hanteras.

===<code>[[font-variant-numeric]]</code>===
Används för att ange hur tecken för siffror ska hanteras.

===<code>[[font-variant-position]]</code>===
Anger hur alternativa tecken ska placeras i förhållande till de "vanliga" tecknen.

===<code>[[font-weight]]</code>===
Anger hur tjockt ett teckensnitt ska återges.

== G ==

== H ==
=== <code>[[height]]</code> ===
Används för att ange höjden på ett blockelement. Fungerar lite olika beroende på vilken [[boxmodellen|boxmodell]] man valt.

===<code>hyphens</code>===
Anger hur "-"-tecknet ska hanteras när ord bryts.

== I ==

===<code>isolation</code>===
Anger om det ska skapas ett nytt [[stacking context]] för ett element.

== J ==
=== <code>[[justify-content]]</code> ===
Justerar hur en flexbehållares innehåll placeras ut längs med flexaxeln. Se [[flexbox_grunder|flexbox grunder]] och [[avancerad_flexbox|avancerad flexbox]] för mer information och specifikt [[Mer_flexbox#justify-content|detta]].

== K ==

== L ==
=== <code>[[left]]</code> ===
Anger hur den vänstra hörnet ska placeras på ett positionerat element.

=== <code>[[letter-spacing]]</code> ===
Anger hur mycket utrymme som ska vara mellan varje bokstav.

=== <code>[[line-height]]</code> ===
Anger höjden på textrader.

=== <code>[[list-style]]</code> ===
En samlingsegenskap för <code>[[list-style-type]]</code>, <code>[[list-style-image]]</code> och <code>[[list-style-position]]</code>.

=== <code>[[list-style-image]]</code> ===
Anger en bild som ska användas för att markera innehållsraderna i en lista.

=== <code>[[list-style-position]]</code> ===
Anger var innehållsmarkeringen ska placeras i en lista.

=== <code>[[list-style-type]]</code> ===
Anger hur vilken typ av innehållsmarkering som ska användas i en lista.

== M ==
=== <code>[[margin]]</code> ===
Anger hur mycket yttermarginal ett element ska ha. Detta är en samlingsegenskap med vilken man kan sätta marginalerna för alla sidor på samma gång. Se även [[boxmodellen]] för mer information.

=== <code>[[margin-*|margin-bottom]]</code> ===
Anger den nedre yttermarginalen på ett [[element]].

=== <code>[[margin-*|margin-left]]</code> ===
Anger den vänstra yttermarginalen på ett [[element]].

=== <code>[[margin-*|margin-right]]</code> ===
Anger den högra yttermarginalen på ett [[element]].

=== <code>[[margin-*|margin-top]]</code> ===
Anger den övre yttermarginalen på ett [[element]].

=== <code>[[marks]]</code> ===
Anger klippningsmarkeringar på ett dokument.

=== <code>[[mask]]</code> ===
Anger att enbart vissa delar av ett element ska visas.

=== <code>[[mask-type]]</code> ===
Anger vilken typ av mask en SVG-mask är.

=== <code>[[max-height]]</code> ===
Anger den maximala höjden på ett [[element]].

=== <code>[[max-width]]</code> ===
Anger den maximala bredden på ett [[element]].

=== <code>[[max-zoom]]</code> ===
Anger hur mycket användaren maximalt ska kunna zoom in.

=== <code>[[min-height]]</code> ===
Anger den minimala höjden på ett [[element]].

=== <code>[[min-width]]</code> ===
Anger den minimala bredden på ett [[element]].

=== <code>[[min-zoom]]</code> ===
Anger vad som är den minsta inzoomning som användaren ska få utföra.

=== <code>[[mix-blend-mode]]</code> ===
Anger hur ett element ska blandas med innehållet som ligger under det. Påminner om PhotoShops blendmodes.

== N ==

===<code>[[negative]]</code>===
Används med [[CSS-räknare]] för bestämma hur negativa tal ska visas.

== O ==

=== <code> [[object-fit]] </code> ===
Anger hur ett objekts storlek ska justeras gentemot föräldraelementet.

=== <code> [[object-position]] </code> ===
Anger hur ett objekts position ska justeras gentemot föräldraelementet.

=== <code> [[opacity]] </code> ===
Anger hur genomskinligt ett element ska vara. Detta påverkar allt innehåll i elementet.
=== <code> [[order]] </code> ===
Anger i vilken ordning ett "flexibelt" element ska placeras i förhållande till övriga flexibla element.

=== <code>[[orientation]]</code>===
Anger hur ett dokument ska vara orienterat i förhållande till viewport. Används främst för surfplattor/telefoner.

=== <code>[[orphans]]</code>===
Anger det minimala antalet rader som ska vara kvar i slutet på ett blockelement. Används främst för att styra sidbrytningar.

=== <code> [[outline]] </code> ===
Anger att man vill att det ska ritas en konturlinje kring ett element. Detta påminner om kantlinjer, men är till för att dra uppmärksamheten till sig och visa att något är speciellt med elementet. Detta är en samlingsegenskap där alla outline-egenskaper går att sätta samtidigt.
=== <code> [[outline-color]] </code> ===
Anger färgen på konturlinjen kring ett element.
=== <code> [[outline-offset]] </code> ===
Anger hur långt ifrån elementet konturlinjen ska ritas.
=== <code> [[outline-style]] </code> ===
Anger med vilken linjetyp konturlinjen ska ritas, t.ex. streckad eller heldragen.
=== <code> [[outline-width]] </code> ===
Anger bredden på konturlinjen.

=== <code> [[overflow]] </code> ===
Anger vad som ska hända om innehållet i elementet flödar över/hamnar utanför. Om man t.ex. vill få upp en scrollbar eller liknande. Detta är en samlingsegenskap som gäller såväl horisontellt som för vertikalt.
=== <code> [[overflow-x]] </code> ===
Anger vad som ska hända om innehållet i elementet flödar över/hamnar utanför i X-led. Om man t.ex. vill få upp en scrollbar eller liknande.
=== <code> [[overflow-y]] </code> ===
Anger vad som ska hända om innehållet i elementet flödar över/hamnar utanför i Y-led. Om man t.ex. vill få upp en scrollbar eller liknande.

== P ==
=== <code> [[padding]] </code> ===
Anger hur mycket utfyllnad ett element ska ha. Detta är en samlingsegenskap med vilken man kan sätta utfyllnaden för alla sidor på samma gång. Se även [[boxmodellen]] för mer information.

=== <code> [[padding-*|padding-bottom]] </code> ===
Anger hur mycket utfyllnad som ska finnas i botten av ett element. Se även [[boxmodellen]] för mer information.

=== <code> [[padding-*|padding-left]] </code> ===
Anger hur mycket utfyllnad som ska finnas på vänstra sidan av ett element. Se även [[boxmodellen]] för mer information.

=== <code> [[padding-*|padding-right]] </code> ===
Anger hur mycket utfyllnad som ska finnas på högra sidan av ett element. Se även [[boxmodellen]] för mer information.

=== <code> [[padding-*|padding-top]] </code> ===
Anger hur mycket utfyllnad som ska finnas i toppen av ett element. Se även [[boxmodellen]] för mer information.

=== <code> [[page-break-after]] </code> ===
Anger om en sidbrytning ska läggas till efter ett element. Elementet kan inte vara tomt eller positionerat.
=== <code> [[page-break-before]] </code> ===
Anger om en sidbrytning ska läggas till före ett element. Elementet kan inte vara tomt eller positionerat.
=== <code> [[page-break-inside]] </code> ===
Anger om en sidbrytning får förekomma inuti ett element. Elementet kan inte vara tomt eller positionerat.
=== <code> [[perspective]] </code> ===
Används för att styra perspektivet på 3D-element.
=== <code> [[position]] </code> ===
Används för att styra vilken typ av positionering ett element ska ha.
=== <code> [[perspective-origin]] </code> ===
Används för att styra perspektivet på 3D-element.

== Q ==
=== <code> [[quotes]] </code> ===
Anger vilken typ av citationstecken som ska användas för citat.

== R ==
=== <code> [[resize]] </code> ===
Anger om ett elements storlek ska kunna ändras av användaren.
=== <code> [[right]] </code> ===
Anger var den högra kanten på ett element ska placeras. Hur detta tolkas varierar med vilken typ av <code>[[position]]</code> som angetts för elementet.

== S ==

== T ==
=== <code> [[table-layout]] </code> ===
Anger vilken [[algoritm]] som ska användas för att skapa layouten för en tabell.
=== <code> [[tab-size]] </code> ===
Anger hur stort utrymme ett tabb-tecken ska uppta.
=== <code> [[text-align]] </code> ===
Anger hur elementet ska placeras horisontellt i relation till andra element.
=== <code> [[text-align-last]] </code> ===
Anger hur den sista textraden i ett elementet ska placeras horisontellt i relation till andra element.
=== <code> [[text-decoration]] </code> ===
Används för att sätta olika typer av textstilar, såsom t.ex. understrykning. Detta är en samlingsegenskap som kan användas för att sätta alla text-decoration-egenskaperna på en gång.
=== <code> [[text-decoration-color]] </code> ===
Anger färg på understrykningar och liknande textutsmyckningar.
=== <code> [[text-decoration-line]] </code> ===
Anger vilken typ av linje som ska läggas till på en text, t.ex. en understrykning.
=== <code> [[text-decoration-style]] </code> ===
Anger vilken typ av linje som ska läggas till på en text, t.ex. <code>dotted</code> för en punkt-linje.
=== <code> [[text-indent]] </code> ===
Anger hur den första textraden i ett stycke ska indenteras.
=== <code> [[text-justify]] </code> ===
Anger hur ett text stycke ska justeras, t.ex. center-justering eller höger-justering.
=== <code> [[text-overflow]] </code> ===
Anger hur text som flödar ut ur ett element ska hanteras, t.ex. om den ska klippas av och inte visas.
=== <code> [[text-shadow]] </code> ===
Anger en, eller flera textskuggor.
=== <code> [[text-transform]] </code> ===
Anger om en text ska omvandlas så den visas med t.ex. enbart versaler.
=== <code> [[top]] </code> ===
Anger var den toppen på ett element ska placeras. Hur detta tolkas varierar med vilken typ av <code>[[position]]</code> som angetts för elementet.
=== <code> [[transform]] </code> ===
Anger hur ett objekt ska förflyttas, roteras, skalas osv.

=== <code> [[transform-box]] </code> ===
Anger en layoutbox, som tjänar som referenspunkt för en <code>[[transform]]</code>.

=== <code> [[transform-origin]] </code> ===
Anger utifrån vilken punkt en <code>[[transform]]</code> ska beräknas, t.ex. om man vill sätta en bestämd rotationspunkt.

=== <code> [[transform-style]] </code> ===
Anger om transformationer ska vara 2D eller 3D.

=== <code> [[transition]] </code> ===
En samlingsegenskap som används för att sätta allt som har med övergångar att göra.

=== <code> [[transition-delay]] </code> ===
Anger hur lång tid det ska ta innan övergången körs igång.

=== <code> [[transition-duration]] </code> ===
Anger hur lång tid en övergång ska ta.

=== <code> [[transition-property]] </code> ===
Anger vilka egenskaper som ska påverkas av en övergång.

=== <code> [[transition-timing-function]] </code> ===
Anger vilken tidsfunktion som ska kontrollera en övergång.

== U ==
=== <code> [[unicode-bidi]] </code> ===
Anger hur sidan ska hantera text som är skriven i olika riktningar, t.ex. om man blandar arabiska och svenska på samma sida.
=== <code> [[unicode-range]] </code> ===
Anger vilket spann av unicode-tecken som ska laddas ner.

== V ==
=== <code> [[vertical-align]] </code> ===
Anger hur ett element av typen <code>inline</code> eller <code>table-cell</code> ska placeras vertikalt i relation till dess föräldraelement.

=== <code> [[visibilty]] </code> ===
Anger om ett element är synligt eller ej. Även om det inte är synligt så tar det upp plats i sidan.

== W ==
=== <code> [[white-space]] </code> ===
Anger hur [[white space]] (dvs, mellanslag, tabs, return osv) ska hanteras i ett element.

=== <code> [[width]] </code> ===
Används för att ange bredden på ett blockelement. Fungerar lite olika beroende på vilken [[boxmodellen|boxmodell]] man valt.

=== <code>[[will-change]]</code>===
Talar om för webbläsaren att ett element antagligen kommer att förändras på något vis, t.ex. animeras eller något liknande.

=== <code> [[word-break]] </code> ===
Anger hur ord ska avstavas när en rad blir för lång.
=== <code> [[word-spacing]] </code> ===
Anger storleken på mellanrummet mellan ord.
=== <code> [[word-wrap]] </code> ===
Anger om ord ska avstavas när en rad blir för lång

== Z ==
=== <code> [[z-index]] </code> ===
Styr hur olika element ska överlappa. Förflyttar elementen längs en tänkt Z-axel.

=== <code>[[zoom]]</code>===
Anger default-zoomvärde.

CSS-egenskapslista

2026-08-30T01:44:43Z

PGJ:

Här är en lista på de flesta [[CSS-egenskap]]erna. Då [[CSS]] är en ständigt föränderlig standard (eller snarare flera delstandarder), täcker inte denna lista varenda liten egenskap som finns tillgänglig. Dock så bör detta vara ett bra urval.

<div class="bg-primary">
test
</div>

<div class="well well-danger">
Det finns även en hel del CSS-egenskaper som är specifika för olika webbläsare. Generellt sett bör man undvika att använda sig av dessa och hålla sig till de som är standardiserade. Då blir din webbsida mer framtidssäker och mer tillgänglig för dina användare.
</div>
== A ==
=== <code>[[align-content]]</code> ===
Styr hur innehållet i flexboxar ska läggas ut när det inte får plats på en enda rad. Påverkar enbart om <code>flex-wrap: wrap</code> gäller för flexbehållaren. Se [[flexbox_grunder|flexbox grunder]] och [[avancerad_flexbox|avancerad flexbox]] för mer information.
=== <code>[[align-items]]</code> ===
Justerar hur en flexbehållares innehåll placeras ut längs med korsaxeln. Se [[flexbox_grunder|flexbox grunder]] och [[avancerad_flexbox|avancerad flexbox]] för mer information och specifikt [[Mer_flexbox#align-items|detta]].
=== <code>[[align-self]]</code> ===
Styr hur ett individuellt flexföremål ska placeras ut längs med korsaxeln. Används oftast då man vill undanta ett element från det som satts med <code>[[align-items]]</code>. Se [[flexbox_grunder|flexbox grunder]] och [[avancerad_flexbox|avancerad flexbox]] för mer information och specifikt [[Mer_flexbox#align-items|detta]].
=== <code>[[all]]</code> ===
Nollställer alla egenskaper, förutom <code>direction</code> och <code>unicode-bidi</code>.

===<code>animation</code>===
Samlingsegenskap som används för att sätta de flesta animationsegenskaper samtidigt.

===<code>animation-delay</code>===
Anger hur lång tid som ska förflyta innan animationen börjar spelas.

===<code>animation-direction</code>===
Anger om animationen ska spelas baklänges varannan cykel (pingpong-animation).

===<code>animation-duration</code>===
Anger hur lång tid en animationscykel ska ta.

===<code>animation-fill-mode</code>===
Anger på vilket sätt de animerade egenskaperna ska sättas på elementet, såväl före som efter animationen körs.

===<code>animation-iteration-count</code>===
Anger hur många gånger en animation ska spelas upp innan den avslutas helt.

===<code>animation-name</code>===
Anger namnet på en animationssekvens.

===<code>animation-play-state</code>===
Anger om en animation spelas upp eller om den är stoppad.

===<code>animation-timing-function</code>===
Anger vilken tidsfunktion som ska användas när en en animation spelas upp.

== B ==
=== <code>background</code> ===
En samlingsegenskap som sätter alla värden som har med bakgrunden att göra.

=== <code>background-attachment</code> ===
Anger om en bakgrund ska fixeras eller om den ska skrollas med.

=== <code>background-blend-mode</code> ===
Anger hur utritningen av en bakgrund ska mixas med annat material. Fungerar ungefär som Photoshops blendmodes.

=== <code>background-clip</code> ===
Anger om bakgrunden ska sträcka sig in under eventuell kantlinje eller ej.

=== <code> [[background-color]] </code> ===
Används för att ändra bakgrundsfärgen på ett element.

=== <code>background-image</code> ===
Anger en bild som ska användas som bakgrund.

=== <code>background-origin</code> ===
Anger var någonstans i en bild som bakgrunden ska hämtas. Används om man vill ha en viss bit ur en större bild.

=== <code>background-position</code> ===
Anger var i elementet bakgrunden ska placeras ut.

=== <code>background-repeat</code> ===
Anger om en bakgrund ska repeteras eller ej.

=== <code>background-size</code> ===
Storleken på eventuell bakgrund.

=== <code> [[border]] </code> ===
Används för skapa en kantlinje runt ett element. Detta är en samlingsegenskap med vilken man kan ange alla egenskaper som har med kantlinjer att göra (förutom <code>[[border-radius]]</code> och <code>[[border-image]]</code>).

=== <code> [[border-*|border-bottom]] </code> ===
Används för skapa en kantlinje på botten av ett element. Detta är en samlingsegenskap med vilken man kan ange alla egenskaper som har med kantlinjen att göra.

=== <code> [[border-*-color | border-bottom-color]] </code> ===
Används för att sätta linjefärgen på en kantlinje på botten av ett element.

=== <code> [[border-*-*-radius|border-bottom-left-radius]] </code> ===
Används för att sätta skapa ett rundat hörn på ett element, i detta fall det nedre, vänstra hörnet.

=== <code> [[border-*-*-radius|border-bottom-right-radius]] </code> ===
Används för att sätta skapa ett rundat hörn på ett element, i detta fall det nedre, högra hörnet.

=== <code> [[border-*-style|border-bottom-style]] </code> ===
Används för att sätta linjetyp på en kantlinje på botten av ett element.

=== <code> [[border-*-width|border-bottom-width]] </code> ===
Används för att sätta bredden på en kantlinje på botten av ett element.

=== <code> [[border-collapse]] </code> ===
Anger hur kanterna i tabellelement ska falla samman.

=== <code> [[border-color]] </code> ===
Används för att sätta linjefärgen på en eller flera kantlinje på ett element.

=== <code> [[border-image]] </code> ===
En samlingsegenskap som används för att sätta allt som har att göra med grafik i kantlinjer.

=== <code> [[border-image-outset]] </code> ===
Anger hur långt utanför kantlinjen som grafiken ska sticka ut.

=== <code> [[border-image-repeat]] </code> ===
Anger om grafiken i en kantlinje ska repeteras eller ej.

=== <code> [[border-image-slice]] </code> ===
Ange om grafiken för en kantlinje ska använda sig av så kallad nine-slice.

=== <code> [[border-image-source]] </code> ===
Anger URL:en som leder till grafiken för en kantlinje.

=== <code> [[border-image-width]] </code> ===
Anger bredden på grafiken för en kantlinje.

=== <code> [[border-*|border-left]] </code> ===
Används för skapa en kantlinje på vänsterkanten av ett element. Detta är en samlingsegenskap med vilken man kan ange alla egenskaper som har med kantlinjen att göra.

=== <code> [[border-*-color | border-left-color]] </code> ===
Används för att sätta linjefärgen på en kantlinje på vänstersidan av ett element.

=== <code> [[border-*-style|border-left-style]] </code> ===
Används för att sätta linjetyp på en kantlinje på vänstersidan av ett element.

=== <code> [[border-*-width|border-left-width]] </code> ===
Används för att sätta bredden på en kantlinje på vänstersidan av ett element.

=== <code> [[border-radius]] </code> ===
Används för att sätta skapa rundade hörn på ett element.

=== <code> [[border-*|border-right]] </code> ===
Används för skapa en kantlinje på högerkanten av ett element. Detta är en samlingsegenskap med vilken man kan ange alla egenskaper som har med kantlinjen att göra.

=== <code> [[border-*-color | border-right-color]] </code> ===
Används för att sätta linjefärgen på en kantlinje på högersidan av ett element.

=== <code> [[border-*-style|border-right-style]] </code> ===
Används för att sätta linjetyp på en kantlinje på högersidan av ett element.

=== <code> [[border-*-width|border-left-width]] </code> ===
Används för att sätta bredden på en kantlinje på högersidan av ett element.

=== <code> [[border-*|border-top]] </code> ===
Används för skapa en kantlinje på toppen av ett element. Detta är en samlingsegenskap med vilken man kan ange alla egenskaper som har med kantlinjen att göra.

=== <code> [[border-style]] </code> ===
Används för att sätta linjetypen på en eller flera kantlinje på ett element.

=== <code> [[border-*-color | border-top-color]] </code> ===
Används för att sätta linjefärgen på en kantlinje på toppen av ett element.

=== <code> [[border-*-*-radius|border-top-left-radius]] </code> ===
Används för att sätta skapa ett rundat hörn på ett element, i detta fall det övre, vänstra hörnet.

=== <code> [[border-*-*-radius|border-top-right-radius]] </code> ===
Används för att sätta skapa ett rundat hörn på ett element, i detta fall det nedre, högra hörnet.

=== <code> [[border-*-style|border-top-style]] </code> ===
Används för att sätta linjetyp på en kantlinje på toppen av ett element.

=== <code> [[border-*-width|border-left-width]] </code> ===
Används för att sätta bredden på en kantlinje på toppen av ett element.

=== <code> [[border-width]] </code> ===
Används för att sätta linjebredden på en eller flera kantlinje på ett element.

=== <code> [[bottom]] </code> ===
Anger var den botten på ett element ska placeras. Hur detta tolkas varierar med vilken typ av <code>[[position]]</code> som angetts för elementet.

=== <code> [[box-shadow]] </code> ===
Används för att skapa en, eller flera, skuggor kring en box.

=== <code> [[box-sizing]] </code> ===
Väljer vilken [[boxmodellen|boxmodell]] som ska gälla för ett blockelement.

=== <code> [[break-after]] </code> ===
Anger om det ska ske en brytning efter ett skapat element.

=== <code> [[break-before]] </code> ===
Anger om det ska ske en brytning före ett skapat element.

=== <code> [[break-inside]] </code> ===
Anger om det ska ske brytningar ska kontrolleras inuti ett skapat element.

== C ==
=== <code> [[caption-side]] </code> ===
Anger var en illustrations bildtext ska placeras.

=== <code> [[clear]] </code> ===
Anger om flytande element ska ligga mot varandra eller ej. Se [[Layout]] för mer info.

=== <code> [[clip-path]] </code> ===
Klipper ut en del av ett element så det inte visas. Kan användas för att åstadkomma andra former än rent rektangulära regioner.

=== <code> [[color]] </code> ===
Används för att ändra förgrundsfärgen på ett element. Mestadels är detta för att förändra textfärgen, men även andra egenskaper påverkas...

=== <code> [[content]] </code> ===
Används tillsammans med <code>::before</code> och <code>::after</code> för att lägga till innehåll i dessa.

=== <code> [[counter-increment]] </code> ===
Används för att öka en [[CSS-räknare]] med ett angivet värde.

=== <code> [[counter-reset]] </code> ===
Används för att nollställa en [[CSS-räknare]].

=== <code> [[cursor]] </code> ===
Anger vilken typ av cursor som ska användas i ett element.

== D ==
===<code>[[direction]]</code>===
Anger i vilken riktning innehåll ska läggas ut, speciellt gäller detta för text. Vi kan sätta om texten ska ritas ifrån vänster till höger, dvs "vanlig" text eller om den ska ritas ut ifrån höger till vänster, t.ex. om det är arabiska.

===<code>[[display]]</code>===
Anger vilken layouttyp ett element ska ritas ut med. I de enklaste fallen kan det vara om ett element är ett blockelement eller ett inlineelement.

== E ==
===<code>empty-cells</code>===
Anger hur tomma celler i en tabell ska hanteras.

== F ==
===<code>[[filter]]</code>===
Anger ett grafikfilter för ett element. Kan användas för att t.ex. göra innehållet i ett element suddigt.

===<code>[[flex]]</code>===
En samlingsegenskap för att sätta <code>[[flex-basis]]</code>, <code>[[flex-grow]]</code> och <code>[[flex-shrink]]</code> på en och samma gång.

===<code>[[flex-basis]]</code>===
Anger startstorleken på ett flexelement. Se [[Flexbox - sätta storlek]] för mer info.

===<code>[[flex-direction]]</code>===
Anger i vilken riktning flexaxeln ska gå. Se [[Flexbox - sätta riktning]] för mer info.

===<code>[[flex-flow]]</code>===
En samlingsegenskap för att sätta <code>[[flex-direction]]</code> och <code>[[flex-wrap]]</code> på en och samma gång.

===<code>[[flex-grow]]</code>===
Anger hur mycket ett flexelement ska växa till sig i förhållande till andra flexelement. Se [[Flexbox - sätta storlek]] för mer info.

===<code>[[flex-shrink]]</code>===
Anger hur mycket ett flexelement ska krympa i förhållande till andra flexelement. Se [[Flexbox - sätta storlek]] för mer info.

===<code>[[flex-wrap]]</code>===
Anger hur en flexbehållare ska bete sig när det blir "fullt" på flexaxeln. Ska innehållet delas upp på flera rader/kolumner? Se [[Flexbox - flexbehållare med flera rader]] för mer info.

===<code>[[float]]</code>===
Anger om ett element ska vara flytande och hur det i så fall ska positioneras. Det traditionella sättet på vilket man skapar layout i CSS. Se [[layout]] för mer info. [[Flexbox grunder|Flexbox]] är ett modernare och bättre sätt på vilket man kan skapa layout.

===<code>[[font]]</code>===
En samlingsegenskap som kan användas för att sätta många av värdena som har med teckensnitt att göra.

===<code>[[font-family]]</code>===
Anger vilket teckensnitt som ska användas i ett element.

===<code>[[font-feature-settings]]</code>===
Används för att styra egenskaper hos OpenType-teckensnitt.

===<code>[[font-kerning]]</code>===
Anger för att styra hur mellanrummet mellan bokstäver hanteras.

===<code>[[font-language-override]]</code>===
Används för att hantera tecken som är specifika för speciella språk.

===<code>[[font-size]]</code>===
Anger vilken storlek som teckensnittet i ett element ska ha.

===<code>[[font-size-adjust]]</code>===
Anger om storleken på ett teckensnitt ska baseras på dess versaler eller dess gemena (stora/små bokstäver).

===<code>[[font-stretch]]</code>===
Används för att välja mellan olika typer i ett teckensnitt.

===<code>[[font-style]]</code>===
Används för att ändra mellan olika teckensnittsstilar, t.ex. kursiv.

===<code>[[font-synthesis]]</code>===
Kontrollerar hur och om webbläsaren ska "skapa" tecken som saknas i ett teckensnitt.

===<code>[[font-variant]]</code>===
En samlingsegenskap som används för att ange värden för alla egenskaperna av typen <code>font-variant-*</code>.

===<code>[[font-variant-alternates]]</code>===
Anger hur alternativa tecken som definerats med <code>@font-feature-values</code> ska hanteras.

===<code>[[font-variant-caps]]</code>===
Anger hur versala (stora) bokstäver ska hanteras.

===<code>[[font-variant-east-asian]]</code>===
Anger hur asiatiska tecken ska hanteras.

===<code>[[font-variant-ligatures]]</code>===
Används för att ange hur sammanbundna tecken, dvs ligaturer, ska hanteras.

===<code>[[font-variant-numeric]]</code>===
Används för att ange hur tecken för siffror ska hanteras.

===<code>[[font-variant-position]]</code>===
Anger hur alternativa tecken ska placeras i förhållande till de "vanliga" tecknen.

===<code>[[font-weight]]</code>===
Anger hur tjockt ett teckensnitt ska återges.

== G ==

== H ==
=== <code>[[height]]</code> ===
Används för att ange höjden på ett blockelement. Fungerar lite olika beroende på vilken [[boxmodellen|boxmodell]] man valt.

===<code>hyphens</code>===
Anger hur "-"-tecknet ska hanteras när ord bryts.

== I ==

===<code>isolation</code>===
Anger om det ska skapas ett nytt [[stacking context]] för ett element.

== J ==
=== <code>[[justify-content]]</code> ===
Justerar hur en flexbehållares innehåll placeras ut längs med flexaxeln. Se [[flexbox_grunder|flexbox grunder]] och [[avancerad_flexbox|avancerad flexbox]] för mer information och specifikt [[Mer_flexbox#justify-content|detta]].

== K ==

== L ==
=== <code>[[left]]</code> ===
Anger hur den vänstra hörnet ska placeras på ett positionerat element.

=== <code>[[letter-spacing]]</code> ===
Anger hur mycket utrymme som ska vara mellan varje bokstav.

=== <code>[[line-height]]</code> ===
Anger höjden på textrader.

=== <code>[[list-style]]</code> ===
En samlingsegenskap för <code>[[list-style-type]]</code>, <code>[[list-style-image]]</code> och <code>[[list-style-position]]</code>.

=== <code>[[list-style-image]]</code> ===
Anger en bild som ska användas för att markera innehållsraderna i en lista.

=== <code>[[list-style-position]]</code> ===
Anger var innehållsmarkeringen ska placeras i en lista.

=== <code>[[list-style-type]]</code> ===
Anger hur vilken typ av innehållsmarkering som ska användas i en lista.

== M ==
=== <code>[[margin]]</code> ===
Anger hur mycket yttermarginal ett element ska ha. Detta är en samlingsegenskap med vilken man kan sätta marginalerna för alla sidor på samma gång. Se även [[boxmodellen]] för mer information.

=== <code>[[margin-*|margin-bottom]]</code> ===
Anger den nedre yttermarginalen på ett [[element]].

=== <code>[[margin-*|margin-left]]</code> ===
Anger den vänstra yttermarginalen på ett [[element]].

=== <code>[[margin-*|margin-right]]</code> ===
Anger den högra yttermarginalen på ett [[element]].

=== <code>[[margin-*|margin-top]]</code> ===
Anger den övre yttermarginalen på ett [[element]].

=== <code>[[marks]]</code> ===
Anger klippningsmarkeringar på ett dokument.

=== <code>[[mask]]</code> ===
Anger att enbart vissa delar av ett element ska visas.

=== <code>[[mask-type]]</code> ===
Anger vilken typ av mask en SVG-mask är.

=== <code>[[max-height]]</code> ===
Anger den maximala höjden på ett [[element]].

=== <code>[[max-width]]</code> ===
Anger den maximala bredden på ett [[element]].

=== <code>[[max-zoom]]</code> ===
Anger hur mycket användaren maximalt ska kunna zoom in.

=== <code>[[min-height]]</code> ===
Anger den minimala höjden på ett [[element]].

=== <code>[[min-width]]</code> ===
Anger den minimala bredden på ett [[element]].

=== <code>[[min-zoom]]</code> ===
Anger vad som är den minsta inzoomning som användaren ska få utföra.

=== <code>[[mix-blend-mode]]</code> ===
Anger hur ett element ska blandas med innehållet som ligger under det. Påminner om PhotoShops blendmodes.

== N ==

===<code>[[negative]]</code>===
Används med [[CSS-räknare]] för bestämma hur negativa tal ska visas.

== O ==

=== <code> [[object-fit]] </code> ===
Anger hur ett objekts storlek ska justeras gentemot föräldraelementet.

=== <code> [[object-position]] </code> ===
Anger hur ett objekts position ska justeras gentemot föräldraelementet.

=== <code> [[opacity]] </code> ===
Anger hur genomskinligt ett element ska vara. Detta påverkar allt innehåll i elementet.
=== <code> [[order]] </code> ===
Anger i vilken ordning ett "flexibelt" element ska placeras i förhållande till övriga flexibla element.

=== <code>[[orientation]]</code>===
Anger hur ett dokument ska vara orienterat i förhållande till viewport. Används främst för surfplattor/telefoner.

=== <code>[[orphans]]</code>===
Anger det minimala antalet rader som ska vara kvar i slutet på ett blockelement. Används främst för att styra sidbrytningar.

=== <code> [[outline]] </code> ===
Anger att man vill att det ska ritas en konturlinje kring ett element. Detta påminner om kantlinjer, men är till för att dra uppmärksamheten till sig och visa att något är speciellt med elementet. Detta är en samlingsegenskap där alla outline-egenskaper går att sätta samtidigt.
=== <code> [[outline-color]] </code> ===
Anger färgen på konturlinjen kring ett element.
=== <code> [[outline-offset]] </code> ===
Anger hur långt ifrån elementet konturlinjen ska ritas.
=== <code> [[outline-style]] </code> ===
Anger med vilken linjetyp konturlinjen ska ritas, t.ex. streckad eller heldragen.
=== <code> [[outline-width]] </code> ===
Anger bredden på konturlinjen.

=== <code> [[overflow]] </code> ===
Anger vad som ska hända om innehållet i elementet flödar över/hamnar utanför. Om man t.ex. vill få upp en scrollbar eller liknande. Detta är en samlingsegenskap som gäller såväl horisontellt som för vertikalt.
=== <code> [[overflow-x]] </code> ===
Anger vad som ska hända om innehållet i elementet flödar över/hamnar utanför i X-led. Om man t.ex. vill få upp en scrollbar eller liknande.
=== <code> [[overflow-y]] </code> ===
Anger vad som ska hända om innehållet i elementet flödar över/hamnar utanför i Y-led. Om man t.ex. vill få upp en scrollbar eller liknande.

== P ==
=== <code> [[padding]] </code> ===
Anger hur mycket utfyllnad ett element ska ha. Detta är en samlingsegenskap med vilken man kan sätta utfyllnaden för alla sidor på samma gång. Se även [[boxmodellen]] för mer information.

=== <code> [[padding-*|padding-bottom]] </code> ===
Anger hur mycket utfyllnad som ska finnas i botten av ett element. Se även [[boxmodellen]] för mer information.

=== <code> [[padding-*|padding-left]] </code> ===
Anger hur mycket utfyllnad som ska finnas på vänstra sidan av ett element. Se även [[boxmodellen]] för mer information.

=== <code> [[padding-*|padding-right]] </code> ===
Anger hur mycket utfyllnad som ska finnas på högra sidan av ett element. Se även [[boxmodellen]] för mer information.

=== <code> [[padding-*|padding-top]] </code> ===
Anger hur mycket utfyllnad som ska finnas i toppen av ett element. Se även [[boxmodellen]] för mer information.

=== <code> [[page-break-after]] </code> ===
Anger om en sidbrytning ska läggas till efter ett element. Elementet kan inte vara tomt eller positionerat.
=== <code> [[page-break-before]] </code> ===
Anger om en sidbrytning ska läggas till före ett element. Elementet kan inte vara tomt eller positionerat.
=== <code> [[page-break-inside]] </code> ===
Anger om en sidbrytning får förekomma inuti ett element. Elementet kan inte vara tomt eller positionerat.
=== <code> [[perspective]] </code> ===
Används för att styra perspektivet på 3D-element.
=== <code> [[position]] </code> ===
Används för att styra vilken typ av positionering ett element ska ha.
=== <code> [[perspective-origin]] </code> ===
Används för att styra perspektivet på 3D-element.

== Q ==
=== <code> [[quotes]] </code> ===
Anger vilken typ av citationstecken som ska användas för citat.

== R ==
=== <code> [[resize]] </code> ===
Anger om ett elements storlek ska kunna ändras av användaren.
=== <code> [[right]] </code> ===
Anger var den högra kanten på ett element ska placeras. Hur detta tolkas varierar med vilken typ av <code>[[position]]</code> som angetts för elementet.

== S ==

== T ==
=== <code> [[table-layout]] </code> ===
Anger vilken [[algoritm]] som ska användas för att skapa layouten för en tabell.
=== <code> [[tab-size]] </code> ===
Anger hur stort utrymme ett tabb-tecken ska uppta.
=== <code> [[text-align]] </code> ===
Anger hur elementet ska placeras horisontellt i relation till andra element.
=== <code> [[text-align-last]] </code> ===
Anger hur den sista textraden i ett elementet ska placeras horisontellt i relation till andra element.
=== <code> [[text-decoration]] </code> ===
Används för att sätta olika typer av textstilar, såsom t.ex. understrykning. Detta är en samlingsegenskap som kan användas för att sätta alla text-decoration-egenskaperna på en gång.
=== <code> [[text-decoration-color]] </code> ===
Anger färg på understrykningar och liknande textutsmyckningar.
=== <code> [[text-decoration-line]] </code> ===
Anger vilken typ av linje som ska läggas till på en text, t.ex. en understrykning.
=== <code> [[text-decoration-style]] </code> ===
Anger vilken typ av linje som ska läggas till på en text, t.ex. <code>dotted</code> för en punkt-linje.
=== <code> [[text-indent]] </code> ===
Anger hur den första textraden i ett stycke ska indenteras.
=== <code> [[text-justify]] </code> ===
Anger hur ett text stycke ska justeras, t.ex. center-justering eller höger-justering.
=== <code> [[text-overflow]] </code> ===
Anger hur text som flödar ut ur ett element ska hanteras, t.ex. om den ska klippas av och inte visas.
=== <code> [[text-shadow]] </code> ===
Anger en, eller flera textskuggor.
=== <code> [[text-transform]] </code> ===
Anger om en text ska omvandlas så den visas med t.ex. enbart versaler.
=== <code> [[top]] </code> ===
Anger var den toppen på ett element ska placeras. Hur detta tolkas varierar med vilken typ av <code>[[position]]</code> som angetts för elementet.
=== <code> [[transform]] </code> ===
Anger hur ett objekt ska förflyttas, roteras, skalas osv.

=== <code> [[transform-box]] </code> ===
Anger en layoutbox, som tjänar som referenspunkt för en <code>[[transform]]</code>.

=== <code> [[transform-origin]] </code> ===
Anger utifrån vilken punkt en <code>[[transform]]</code> ska beräknas, t.ex. om man vill sätta en bestämd rotationspunkt.

=== <code> [[transform-style]] </code> ===
Anger om transformationer ska vara 2D eller 3D.

=== <code> [[transition]] </code> ===
En samlingsegenskap som används för att sätta allt som har med övergångar att göra.

=== <code> [[transition-delay]] </code> ===
Anger hur lång tid det ska ta innan övergången körs igång.

=== <code> [[transition-duration]] </code> ===
Anger hur lång tid en övergång ska ta.

=== <code> [[transition-property]] </code> ===
Anger vilka egenskaper som ska påverkas av en övergång.

=== <code> [[transition-timing-function]] </code> ===
Anger vilken tidsfunktion som ska kontrollera en övergång.

== U ==
=== <code> [[unicode-bidi]] </code> ===
Anger hur sidan ska hantera text som är skriven i olika riktningar, t.ex. om man blandar arabiska och svenska på samma sida.
=== <code> [[unicode-range]] </code> ===
Anger vilket spann av unicode-tecken som ska laddas ner.

== V ==
=== <code> [[vertical-align]] </code> ===
Anger hur ett element av typen <code>inline</code> eller <code>table-cell</code> ska placeras vertikalt i relation till dess föräldraelement.

=== <code> [[visibilty]] </code> ===
Anger om ett element är synligt eller ej. Även om det inte är synligt så tar det upp plats i sidan.

== W ==
=== <code> [[white-space]] </code> ===
Anger hur [[white space]] (dvs, mellanslag, tabs, return osv) ska hanteras i ett element.

=== <code> [[width]] </code> ===
Används för att ange bredden på ett blockelement. Fungerar lite olika beroende på vilken [[boxmodellen|boxmodell]] man valt.

=== <code>[[will-change]]</code>===
Talar om för webbläsaren att ett element antagligen kommer att förändras på något vis, t.ex. animeras eller något liknande.

=== <code> [[word-break]] </code> ===
Anger hur ord ska avstavas när en rad blir för lång.
=== <code> [[word-spacing]] </code> ===
Anger storleken på mellanrummet mellan ord.
=== <code> [[word-wrap]] </code> ===
Anger om ord ska avstavas när en rad blir för lång

== Z ==
=== <code> [[z-index]] </code> ===
Styr hur olika element ska överlappa. Förflyttar elementen längs en tänkt Z-axel.

=== <code>[[zoom]]</code>===
Anger default-zoomvärde.

Villkorssatser

2026-08-11T22:37:33Z

PGJ:

När man programmerar använder man sig ofta av villkorssatser för att styra programflödet.
Med hjälp av en villkorssats kan man styra hur programmet ska uppföra sig då ett visst villkor är uppfyllt.
== <code>if</code>-satser ==

Den vanligaste villkorssatsen är <code>if</code>-satsen. Man har då en sektion med kod som enbart utförs när villkoret är sant, till exempel;

<syntaxhighlight lang="JavaScript">
if (villkor)
{
<kodblocket utförs endast om villkor är sant>
}
<Här fortsätter koden oavsett om if-kodblocket kördes eller ej>
</syntaxhighlight>

Eller för att skriva det på vanlig svenska; om <code>villkor</code> är sant gör det här…

Om <code>villkor</code> inte är sant, fortsätter programmet att köra koden som finns efter ”<code>}</code>”-tecknet.

=== Vad är <code>villkor</code> ===
<code>villkor</code> är någonting som i slutändan kommer att bli <code>true</code> eller <code>false</code>. Man brukar kalla denna typ av <code>villkor</code> för ett booleskt värde eller för ett sanningsvärde.

Boolesk algebra är en typ av matematik som behandlar hanteringen av utsagor som enbart kan vara sanna eller falska. Vi återkommer till detta.

Vad är det då som kan bli <code>true</code> eller <code>false</code>? Ett vanligt exempel på detta är jämförelse, t.ex. om vi vill kontrollera om en variabel innehåller ett visst värde. Det kan se ut så här:

<syntaxhighlight lang="JavaScript">
if( värde == 1)
{
// Utförs om värde är lika med 1, om inte så hoppas detta block över
}
// Här fortsätter koden
</syntaxhighlight>

=== <code>==</code> jämförelse, likhet ===
I exemplet användes jämförelse-operatorn; <code>==</code> för att kontrollera om <code>värde</code> är lika med <code>1</code>. Lägg märke till att det är två "<code>=</code>"-tecken.

För jämförelser använder vi <code>==</code> och för tilldelning använder vi <code>=</code>. Det är ett rätt så vanligt fel att råka skriva enbart ett <code>=</code>, när vi egentligen ville ha två. Så var uppmärksam på det!

=== <code>!=</code> jämförelse, olikhet ===
För att kontrollera om två saker skiljer sig från varandra använder vi oss av <code>!=</code>.

<syntaxhighlight lang="JavaScript">
if( värde != 1)
{
// Utförs om värde INTE är lika med 1, om inte så hoppas detta block över
}
// Här fortsätter koden
</syntaxhighlight>

I JavsScript betyder "!"-tecknet "not" eller "inte". Dvs, <code>!=</code> betyder alltså "not equal".

Vi återkommer till <code>villkor</code> och sanningsvärden i nästa sektion.
=== <code>else</code> ===
Man kan även begära att något annat ska utföras i de fall som villkoret ''inte'' är sant. Då gör man så här;

<syntaxhighlight lang="JavaScript">
if ( villkor )
{
// <utförs endast om villkor är sant>
} else {
// <utförs endast om villkor är falskt>
}
// Här fortsätter körningen oavsett vilket av ovan kodblock som kördes
</syntaxhighlight>

Med den programkoden säger man; om <code>villkor</code> är sant gör det som står i första blocket, i annat fall gör det som står i <code>else</code>-blocket.

Man kör alltså antingen det ena eller det andra blocket. Det finns inget fall då bägge blocken kan bli att köras!

=== Nästlade <code>if</code>-satser ===
Om man vill kan man lägga <code>if</code>-satser inuti andra <code>if</code>-satser. Det kallas nästlade eller inkapslade <code>if</code>:ar.

Sådana kan man använda om man vill att programmet ska kolla om flera saker är sanna. Men som ni kommer att se i nästa sektion, går det ofta att lösa dylika situationer på ett mer effektivt sätt.

Ett exempel på nästlade <code>if</code>-satser:

<syntaxhighlight lang="JavaScript">
if ( villkor1)
{
if ( villkor2)
{
// <utförs endast om både villkor1 och villkor2 är sanna>
}
}
</syntaxhighlight>

För att koden längst in ska utföras måste alltså såväl den första <code>if</code>:en och den andra ha <code>villkor</code> som är sanna.

I princip kan man nästla hur många <code>if</code>:ar som helst. Men, som sagt, man kan lösa detta på ett effektivare sätt. För att kunna göra det behöver vi kunna utföra operationer som fungerar med sanningsvärden. Vilket vi återkommer till nästa sektion.

== Överkurs ==
<div class="well well-meadow">
Följande är lite överkurs, men det kan vara bra att känna till.
</div>

== <code>switch</code> ==
När man vill testa något som kan ha många olika värden kan det lätt bli många <code>if</code>:ar. För att lösa såna situation på ett snyggare sätt så kan man använda sig av <code>switch</code>.

<syntaxhighlight lang="JavaScript">
switch( testuttryck )
{
case testvärde1:
break;
case testvärde2:
break;
case testvärde3:
break;
default:
break; // Egentligen inte nödvändig, då switchen tar slut efter detta
}
</syntaxhighlight>

Med detta kommando kan man alltså testa ett och samma uttryck mot flera möjliga värden.

Lägg märke till att varje <code>case</code> avslutas med en <code>break</code>. Detta görs för att koden inte ska fortsätta in i efterkommande <code>case</code>. När ett <code>case</code> blivit uppfyllt så kommer alla efterföljande <code>case</code> också att anses som uppfyllda. Om vi inte satte en <code>break</code> skulle körningen alltså fortsätta in i alla efterföljande <code>case</code>. I vissa fall vill vi att det ska vara så. Låt säga att något ska ske om ett värde är; <code>0</code>, <code>1</code> eller <code>2</code>. Då kanske vi skulle skriva så här:

<syntaxhighlight lang="JavaScript">
switch( testuttryck )
{
case 0:
case 1:
case 2:
// Utförs om testuttryck är 0, 1 eller 2
break;
case 3:
// Utförs enbart om uttryck är 3
break;
default:
// Utförs bara om ingen av ovanstående körts
break; // Egentligen inte nödvändig, då switchen tar slut efter detta
}
</syntaxhighlight>

Så <code>switch</code> används oftast då man har många olika alternativ att välja mellan och det skulle ha blivit jobbigt/fult att köra massa <code>if</code>:ar på raken.

Kanske man har en meny, där användaren kan välja mellan olika alternativ. Låt säga att alternativen anges med den siffra och det finns tre möjliga val. Då skulle vår <code>switch</code> kunna se ut så här:

<syntaxhighlight lang="JavaScript">
switch( alternativ )
{
case 1:
// Användaren valde alternativ ett
break;
case 2:
// Användaren valde alternativ två
break;
case 3:
// Användaren valde alternativ tre
break;
default:
// Användaren valde inget av ovanstående!
break
}
</syntaxhighlight>

==== <code>default</code> ====
Kommandot <code>default</code> används alltså för att ange vad som ska ske om inget av de övriga alternativen uppfylldes. Ofta kan detta vara en plats där man vill ange ett felmeddelande. Låt säga att användaren ska kunna ange en siffra mellan 1 och 3, då vill vi kanske skriva ut ett felmeddelande när något annat anges. Kanske ett felmeddelande som säger nåt i stil med; "Du får bara ange 1, 2 eller 3".

== <code>Ternary-operatorn</code> ==
Ett kompakt sätt att göra en villkorlig tilldelning är att använda sig av ternary-operatorn (kallas även trinary-operatorn). Den heter så på grund av att den består av tre delar.

<syntaxhighlight lang="JavaScript">
let a = testvillkor ? sant : falskt;
</syntaxhighlight>

Vi tilldelar alltså ett värde till variabeln <code>a</code>. Vad som tilldelas beror på ett villkor. Detta villkor skrivs direkt efter "<code>=</code>"-tecknet, dvs <code>testvillkor</code> i detta fall.

Därefter följer ett frågetecken, vilket är det som anger att vi vill köra en ternary-operation. Om villkoret var sant tilldelas det första värdet till variablen. Om villkoret var falskt så tilldelas det sista värdet. Det vill säga det värde som följer efter "<code>:</code>"-tecknet.

Det här är inte så jättevanligt att man använder sig av. Det är kompakt och kan vara en snygg lösning i vissa fall. Men det är även relativt svårläst och risken är att det blir svårt att förstå vad som sker.

== Nästa aktivtet ==
[[Att jobba med sanningsvärden]]

Att jobba med sanningsvärden

2026-08-11T22:31:21Z

PGJ:

Man brukar tala om sanningsvärden när man jobbar med villkor. Ett sanningsvärde är antingen <code>true</code> eller <code>false</code>, dvs sant eller falskt. När ett villkor är sant säger man att villkoret är uppfyllt. Ibland kan man även säga uttryck istället för villkor.

== Exempel på sanningsvärden ==
Några exempel på sanningsvärden:
{| class="wikitable"
! JavaScript-villkor
! Resultat
|-
| 1 == 1
|True
|-
| 1 == 2
|False
|-
| “alfa” == “alfa”
| True
|-
| “alfa” == “beta”
| False
|}

== Jämförelse med <code>==</code> ==
Lägg märke till att när man utför en jämförelse i JavaScript så använder man sig av ”<code>==</code>”, dvs två likamed-tecken.

Ett likamed-tecken ger tilldelning, medan två ger jämförelse. Tilldelning ändrar innehållet i variabeln, medan jämförelse returnerar <code>true</code> eller <code>false</code> utan att ändra något innehåll.

JavaScript har några egenheter. Eftersom JavaScript automatiskt omvandlar datatyper så kan man jämföra på följande vis:
{| class="wikitable"
! JavaScript-villkor
! Resultat
|-
| 1 == "1"
|True
|}

==Jämförelse med <code>===</code>==
Faktum är att man i JavaScript ofta använder sig av "<code>===</code>", dvs trippla likamed-tecken. Denna typ av jämförelse kollar både att innehållet är av samma datatyp samt att innehållet är lika.

Vid vanlig jämförelse, <code>==</code> försöker JavaScript att omvandla variablernas innehåll så att de blir av samma datatyp. Vilket i många fall kan vara bra. Men det kan uppstå situationer där man jämför äpplen med päron och får resultat som är helt tokiga.

Här är ett exempel på skillnaden mellan de båda jämförelseoperatorerna.
{| class="wikitable"
! JavaScript-villkor
! Resultat
|-
| "1" == 1
|True
|-
| "1" === 1
|False
|}

Skillnaden på de två jämförelserna i ovanstående exempel är att <code>"1"</code> är en sträng som innehåller teckenkoden för <code>1</code>, snarare än det det matematiska värdet <code>1</code>.

Med <code>==</code>, kommer JavaScript att omvandla höger- och vänsterled till samma datatyp innan jämförelsen. Den översätter alltså tecknet till ett tal och jämför det med talet och då blir ju bägge sidor lika.

Däremot kommer <code>===</code> ''inte'' att göra någon typomvandlig. Det gör att JavaScript direkt kan se att sakerna inte är lika. Strängen <code>"1"</code> tillhör inte samma datatyp som siffran 1 och därmed kan inte innehållet heller vara lika.

(I den här sektionen kommer vi bara att använda <code>if</code>-satser i exemplen. Men alla sanningsvärden skulle fungera lika bra (eller dåligt) i t.ex. <code>while</code>-loopar.)

==Enbart <code>true</code> eller <code>false</code>==
Om man vill kan man göra <code>if</code>-satser som alltid utförs:

<syntaxhighlight lang="JavaScript">
if ( true )
{
<utförs alltid>
}
</syntaxhighlight>

Det är iofs rätt meningslöst att göra så (vi kommer dock att se att det finns tillfällen då liknande konstruktioner är användbara, men det blir först när vi kommer till <code>while</code>).

Ännu meningslösare, men likväl möjligt, är att göra en <code>if</code>-sats som aldrig körs (genom att använda sig av sanningsvärdet <code>false</code>.

== Jämförelseoperationer ==
I villkor använder man sig ofta av matematiska jämförelseoperatorer. Några vanliga villkor/jämförelseoperatorer:

{| class="wikitable"
! JavaScript-villkor
! Typ av jämförelse
|-
| <code>a == b</code>
| Är <code>a</code> och <code>b</code> lika?
|-
| <code>a != b</code>
| Är <code>a</code> och <code>b</code> inte lika?
|-
| <code>a < b</code>
| Är <code>a</code> mindre än <code>b</code>?
|-
| <code>a > b</code>
| Är <code>a</code> större än <code>b</code>?
|-
| <code>a <= b</code>
| Är <code>a</code> mindre än eller lika med <code>b</code>?
|-
| <code>a >= b</code>
| Är <code>a</code> strörre än eller lika med <code>b</code>?
|}

I JavaScript betyder ”<code>!</code>” icke, eller ”not”, så man utläser alltså ”<code>!=</code>” som icke lika med.

== Kombinera sanningsvärden ==
Man kan sätta samman mer komplexa villkor med hjälp av; ”<code>&&</code>” som betyder ”och” samt ”<code>||</code>” som betyder ”eller” (tecknet finns oftast längst ner till vänster på tangenbordet).

Genom att använda dessa instruktioner kan man sammanfoga flera sanningsuttryck till ett. Man kan jämföra med hur man använder sig av + och – när man räknar med vanliga tal i matematiken. Skillnaden är att vi nu ”räknar” med sanningsvärden. (Det finns till och med en speciell gren av matematik som specialiserar sig på räkning med sanningsvärden-/uttryck, det kallas Boolesk algebra.)

=== Och-villkor; <code>&&</code> ===
När man använder sig av <code>&&</code> måste bägge villkoren vara uppfyllda för att hela och-villkoret ska bli sant.

<syntaxhighlight lang="JavaScript">
if ( villkor1 && villkor2 )
{
<utförs endast om både villkor1 och villkor2 är sanna>
}
</syntaxhighlight>

Det innebär att följande gäller för och-villkoret:

{| class="wikitable"
! Villkor
! Resultat
|-
| <code>false && false</code>
| <code>false</code>
|-
|<code>true && false</code>
| <code>false</code>
|-
| <code>false && true</code>
| <code>false</code>
|-
| <code>true && true</code>
| <code>true</code>
|}

=== Eller-villkor; <code>||</code> ===
När man använder eller-varianten, <code>||</code>, räcker det med att ett av villkoren är uppfyllt (bägge villkoren kan vara sanna, men det räcker med att ett är det).

<syntaxhighlight lang="JavaScript">
if ( villkor1 || villkor2 )
{
<utförs endast om något, eller båda, av villkor1 och villkor2 är sant>
}
</syntaxhighlight>

Det innebär att följande gäller för eller-villkoret:

{| class="wikitable"
! Villkor
! Resultat
|-
| <code>false && false</code>
| <code>false</code>
|-
| <code>true && false</code>
| <code>true</code>
|-
| <code>false && true</code>
| <code>true</code>
|-
| <code>true && true</code>
| <code>true</code>
|}

=== Icke-villkor; <code>!</code> ===
Icke-operatorn förändrar ett sanningsvärde till dess motsats. Dvs, <code>true</code> blir <code>false</code> och vice versa.

{| class="wikitable"
! Villkor
! Resultat
|-
| <code>!false</code>
| <code>true</code>
|-
| <code>!true</code>
| <code>false</code>
|}

I vissa fall kan det vara snyggare och enklare att skriva ett uttryck på ett visst sätt och sedan lägga ett ”<code>!</code>” framför allt för att på så vis omvandla det till sin motsats.

== Sanningsvärden och funktioner ==
Vissa programfunktioner returnerar <code>true</code> eller <code>false</code> och kan därför direkt användas som sanningsvärden/villkor i <code>if</code>-satser. Det är speciellt användbart för jämförelsefunktioner för strängvariabler och liknande.

De variabler som innehåller sanningsvärden, dvs <code>true</code> eller <code>false</code> kallas för bool eller booleska. Ibland kan det vara praktiskt att spara undan returvärdet från en funktion i en bool-variabel.

T.ex. använder man ofta bool-variabler i <code>while</code>-satser. Ett litet exempel;

<syntaxhighlight lang="JavaScript">
let running = true;

while (running)
<massa kod>

if ( tangent == ”q”)
{
running = false;
}
}
</syntaxhighlight>

Exemplet ovan kommer alltså att köras i en loop, ända tills användaren trycker på tangenten ”q”. Då blir <code>running</code> satt till <code>false</code> och <code>while</code>-loopen avslutas.

När man programmerar är det alltid viktigt att försöka bryta ned varje programuppgift i så små deluppgifter som möjligt. Därför är det ofta bra att skapa små jämförelsefunktioner som returnera <code>true</code> eller <code>false</code>. Till exempel om man vill kolla om ett tal är ett jämt tal, kan man skapa en liknande funktion;

<syntaxhighlight lang="JavaScript">
function isEven ( tal )
{
if( tal % 2 == 0 )
{
return true;
} else {
return false;
}
}
</syntaxhighlight>

Inte det mest optimala sättet att skapa en dylik funktion, men det är relativt läsbart. Här skapar vi en ny funktion, som heter <code>isEven</code>. I och med att vi definierat metoden kan vi använda den på andra ställen i vår kod, precis som om den vore en del av programmeringsspråket. På så vis kan vi alltså utvidga språket och specialanpassa det för det vi vill göra.

Ett snyggare och koncisare sätt att skriva ovanstående funktion skulle vara det här:

<syntaxhighlight lang="JavaScript">
function isEven ( tal )
{
return tal % 2 == 0;
}
</syntaxhighlight>

Eftersom vi ska returnera ett sanningsvärde och bara gör en enda test, kan vi ju lika gärna returnera resultatvärdet ifrån testet. <code>if</code>:arna i första varianten tillförde ju inget mer än att de antingen returnerade <code>true</code> eller <code>false</code>. Vilket ju är de värden vi får ut direkt ifrån vårt test och vi kan därför optimera bort <code>if</code>:arna. Detta funkar inte i alla fall, men i vissa fall kan det ge en kortare och snyggare lösning.

Nu när man definierat funktionen, finns den att tillgå och man kan använda sig av den i programmets <code>if</code>-satser;

<syntaxhighlight lang="JavaScript">
if ( isEven( nånVariabel ) )
{
<utförs endast om nånVariabel är ett jämt tal >
}
</syntaxhighlight>

Man skulle även kunna skriva ”<code>isEven( a ) == true</code>”, men det behövs inte eftersom ju funktionen alltid returnerar <code>true</code> eller <code>false</code>. Man undviker oftast att lägga till onödig kod, det skapar bara mer chanser att något blir fel eller att koden blir mer svårläst.

Om man skulle vilja testa om något är udda, d.v.s. motsatsen till jämt, kan man göra så här;

<syntaxhighlight lang="JavaScript">
if ( isEven( nånVariabel ) == false )
{
<utförs endast om nånVariabel är ett udda tal>
}
</syntaxhighlight>

Ett annat, vanligare, sätt att kontrollera om något är falskt är;

<syntaxhighlight lang="JavaScript">
if ( !isEven( nånVariabel ) )
{
<utförs endast om nånVariabel är ett udda tal>
}
</syntaxhighlight>

Som du kanske minns så betyder ”<code>!</code>”-tecknet ”inte” i JavaScript. Användandet av ”not” kommer ifrån Boolesk algebra. ”<code>!</code>”-tecknet gör om det efterföljande uttrycket till dess motsats. Det betyder att <code>!true</code> blir <code>false</code> och <code>!false</code> blir <code>true</code>.

Självklart kan man använda ”<code>&&</code>” och ”<code>||</code>” tillsammans med funktioner som returnerar sanningsvärden. Till exempel:

<syntaxhighlight lang="JavaScript">
if ( isEven(nånVariabel ) && nånVariabel > 10 )
{
<utförs endast om nånVariabel är ett jämt tal som är större än 10 >
}
</syntaxhighlight>

== Styra prioritetsordning med "<code>()</code>" ==
Om man har många ”<code>&&</code>” och/eller ”<code>||</code>” i rad, kan det bli lite svårläst. Det kan även vara svårt att avgöra i vilken prioritetsordning uttrycken ska utföras. Det kan man oftast lösa genom att gruppera uttrycken inom parenteser (precis som i vanlig matematik när man vill styra vilka beräkningsdelar som ska ske före andra). T.ex.;

<syntaxhighlight lang="JavaScript">
if ( ( isEven( a ) && a > 10 ) || ( !isEven( a ) && ( a < 9 && a > 2 ) )
{
<utförs när nåt av följande uppfylls;
”a är ett jämt tal som är större än 10”
eller
”a är ett udda tal som är större än 2 och mindre än 9” >
}
</syntaxhighlight>

== Nästa aktivitet ==
[[Loopar och slingor]]

Att jobba med sanningsvärden

2026-08-10T23:14:37Z

PGJ:

Man brukar tala om sanningsvärden när man jobbar med villkor. Ett sanningsvärde är antingen <code>true</code> eller <code>false</code>, dvs sant eller falskt. När ett villkor är sant säger man att villkoret är uppfyllt. Ibland kan man även säga uttryck istället för villkor.

== Exempel på sanningsvärden ==
Några exempel på sanningsvärden:
{| class="wikitable"
! JavaScript-villkor
! Resultat
|-
| 1 == 1
|True
|-
| 1 == 2
|False
|-
| “alfa” == “alfa”
| True
|-
| “alfa” == “beta”
| False
|}

== Jämförelse med <code>==</code> ==
Lägg märke till att när man utför en jämförelse i JavaScript så använder man sig av ”<code>==</code>”, dvs två likamed-tecken.

Ett likamed-tecken ger tilldelning, medan två ger jämförelse. Tilldelning ändrar innehållet i variabeln, medan jämförelse returnerar <code>true</code> eller <code>false</code> utan att ändra något innehåll.

JavaScript har några egenheter. Eftersom JavaScript automatiskt omvandlar datatyper så kan man jämföra på följande vis:
{| class="wikitable"
! JavaScript-villkor
! Resultat
|-
| 1 == "1"
|True
|}

==Jämförelse med <code>===</code>==
Faktum är att man i JavaScript ofta använder sig av "<code>===</code>", dvs trippla likamed-tecken. Denna typ av jämförelse kollar både att innehållet är av samma datatyp samt att innehållet är lika.

Vid vanlig jämförelse, <code>==</code> försöker JavaScript att omvandla variablernas innehåll så att de blir av samma datatyp. Vilket i många fall kan vara bra. Men det kan uppstå situationer där man jämför äpplen med päron och får resultat som är helt tokiga.

Här är ett exempel på skillnaden mellan de båda jämförelseoperatorerna.
{| class="wikitable"
! JavaScript-villkor
! Resultat
|-
| "1" == 1
|True
|-
| "1" === 1
|False
|}

Skillnaden på de två jämförelserna i ovanstående exempel är att <code>"1"</code> är en sträng som innehåller teckenkoden för <code>1</code>, snarare än det det matematiska värdet <code>1</code>.

Med <code>==</code>, kommer JavaScript att omvandla höger- och vänsterled till samma datatyp innan jämförelsen. Den översätter alltså tecknet till ett tal och jämför det med talet och då blir ju bägge sidor lika.

Däremot kommer <code>===</code> ''inte'' att göra någon typomvandlig. Det gör att JavaScript direkt kan se att sakerna inte är lika. Strängen <code>"1"</code> tillhör inte samma datatyp som siffran 1 och därmed kan inte innehållet heller vara lika.

(I den här sektionen kommer vi bara att använda <code>if</code>-satser i exemplen. Men alla sanningsvärden skulle fungera lika bra (eller dåligt) i t.ex. <code>while</code>-loopar.)

==Enbart <code>true</code> eller <code>false</code>==
Om man vill kan man göra <code>if</code>-satser som alltid utförs:

<syntaxhighlight lang="JavaScript">
if ( true )
{
<utförs alltid>
}
</syntaxhighlight>

Det är iofs rätt meningslöst att göra så (vi kommer dock att se att det finns tillfällen då liknande konstruktioner är användbara, men det blir först när vi kommer till <code>while</code>).

Ännu meningslösare, men likväl möjligt, är att göra en <code>if</code>-sats som aldrig körs (genom att använda sig av sanningsvärdet <code>false</code>.

== Jämförelseoperationer ==
I villkor använder man sig ofta av matematiska jämförelseoperatorer. Några vanliga villkor/jämförelseoperatorer:

{| class="wikitable"
! JavaScript-villkor
! Typ av jämförelse
|-
| <code>a == b</code>
| Är <code>a</code> och <code>b</code> lika?
|-
| <code>a != b</code>
| Är <code>a</code> och <code>b</code> inte lika?
|-
| <code>a < b</code>
| Är <code>a</code> mindre än <code>b</code>?
|-
| <code>a > b</code>
| Är <code>a</code> större än <code>b</code>?
|-
| <code>a <= b</code>
| Är <code>a</code> mindre än eller lika med <code>b</code>?
|-
| <code>a >= b</code>
| Är <code>a</code> strörre än eller lika med <code>b</code>?
|}

I JavaScript betyder ”<code>!</code>” icke, eller ”not”, så man utläser alltså ”<code>!=</code>” som icke lika med.

== Kombinera sanningsvärden ==
Man kan sätta samman mer komplexa villkor med hjälp av; ”<code>&&</code>” som betyder ”och” samt ”<code>||</code>” som betyder ”eller”.

Genom att använda dessa instruktioner kan man foga samman flera sanningsuttryck till ett. Man kan jämföra med hur man använder sig av + och – när man räknar med vanliga tal i matematiken, skillnaden är att vi nu ”räknar” med sanningsvärden. (Det finns till och med en speciell gren av matematik som specialiserar sig på räkning med sanningsvärden-/uttryck, det kallas Boolesk algebra.)

=== Och-villkor; <code>&&</code> ===
När man använder sig av <code>&&</code> måste bägge villkoren vara uppfyllda för att hela och-villkoret ska bli sant.

<syntaxhighlight lang="JavaScript">
if ( villkor1 && villkor2 )
{
<utförs endast om både villkor1 och villkor2 är sanna>
}
</syntaxhighlight>

Det innebär att följande gäller för och-villkoret:

{| class="wikitable"
! Villkor
! Resultat
|-
| <code>false && false</code>
| <code>false</code>
|-
|<code>true && false</code>
| <code>false</code>
|-
| <code>false && true</code>
| <code>false</code>
|-
| <code>true && true</code>
| <code>true</code>
|}

=== Eller-villkor; <code>||</code> ===
När man använder eller-varianten, <code>||</code>, räcker det med att ett av villkoren är uppfyllt (bägge villkoren kan vara sanna, men det räcker med att ett är det).

<syntaxhighlight lang="JavaScript">
if ( villkor1 || villkor2 )
{
<utförs endast om något, eller båda, av villkor1 och villkor2 är sant>
}
</syntaxhighlight>

Det innebär att följande gäller för eller-villkoret:

{| class="wikitable"
! Villkor
! Resultat
|-
| <code>false && false</code>
| <code>false</code>
|-
| <code>true && false</code>
| <code>true</code>
|-
| <code>false && true</code>
| <code>true</code>
|-
| <code>true && true</code>
| <code>true</code>
|}

=== Icke-villkor; <code>!</code> ===
Icke-operatorn förändrar ett sanningsvärde till dess motsats. Dvs, <code>true</code> blir <code>false</code> och vice versa.

{| class="wikitable"
! Villkor
! Resultat
|-
| <code>!false</code>
| <code>true</code>
|-
| <code>!true</code>
| <code>false</code>
|}

I vissa fall kan det vara snyggare och enklare att skriva ett uttryck på ett visst sätt och sedan lägga ett ”<code>!</code>” framför allt för att på så vis omvandla det till sin motsats.

== Sanningsvärden och funktioner ==
Vissa programfunktioner returnerar <code>true</code> eller <code>false</code> och kan därför direkt användas som sanningsvärden/villkor i <code>if</code>-satser. Det är speciellt användbart för jämförelsefunktioner för strängvariabler och liknande.

De variabler som innehåller sanningsvärden, dvs <code>true</code> eller <code>false</code> kallas för bool eller booleska. Ibland kan det vara praktiskt att spara undan returvärdet från en funktion i en bool-variabel.

T.ex. använder man ofta bool-variabler i <code>while</code>-satser. Ett litet exempel;

<syntaxhighlight lang="JavaScript">
let running = true;

while (running)
<massa kod>

if ( tangent == ”q”)
{
running = false;
}
}
</syntaxhighlight>

Exemplet ovan kommer alltså att köras i en loop, ända tills användaren trycker på tangenten ”q”. Då blir <code>running</code> satt till <code>false</code> och <code>while</code>-loopen avslutas.

När man programmerar är det alltid viktigt att försöka bryta ned varje programuppgift i så små deluppgifter som möjligt. Därför är det ofta bra att skapa små jämförelsefunktioner som returnera <code>true</code> eller <code>false</code>. Till exempel om man vill kolla om ett tal är ett jämt tal, kan man skapa en liknande funktion;

<syntaxhighlight lang="JavaScript">
function isEven ( tal )
{
if( tal % 2 == 0 )
{
return true;
} else {
return false;
}
}
</syntaxhighlight>

Inte det mest optimala sättet att skapa en dylik funktion, men det är relativt läsbart. Här skapar vi en ny funktion, som heter <code>isEven</code>. I och med att vi definierat metoden kan vi använda den på andra ställen i vår kod, precis som om den vore en del av programmeringsspråket. På så vis kan vi alltså utvidga språket och specialanpassa det för det vi vill göra.

Ett snyggare och koncisare sätt att skriva ovanstående funktion skulle vara det här:

<syntaxhighlight lang="JavaScript">
function isEven ( tal )
{
return tal % 2 == 0;
}
</syntaxhighlight>

Eftersom vi ska returnera ett sanningsvärde och bara gör en enda test, kan vi ju lika gärna returnera resultatvärdet ifrån testet. <code>if</code>:arna i första varianten tillförde ju inget mer än att de antingen returnerade <code>true</code> eller <code>false</code>. Vilket ju är de värden vi får ut direkt ifrån vårt test och vi kan därför optimera bort <code>if</code>:arna. Detta funkar inte i alla fall, men i vissa fall kan det ge en kortare och snyggare lösning.

Nu när man definierat funktionen, finns den att tillgå och man kan använda sig av den i programmets <code>if</code>-satser;

<syntaxhighlight lang="JavaScript">
if ( isEven( nånVariabel ) )
{
<utförs endast om nånVariabel är ett jämt tal >
}
</syntaxhighlight>

Man skulle även kunna skriva ”<code>isEven( a ) == true</code>”, men det behövs inte eftersom ju funktionen alltid returnerar <code>true</code> eller <code>false</code>. Man undviker oftast att lägga till onödig kod, det skapar bara mer chanser att något blir fel eller att koden blir mer svårläst.

Om man skulle vilja testa om något är udda, d.v.s. motsatsen till jämt, kan man göra så här;

<syntaxhighlight lang="JavaScript">
if ( isEven( nånVariabel ) == false )
{
<utförs endast om nånVariabel är ett udda tal>
}
</syntaxhighlight>

Ett annat, vanligare, sätt att kontrollera om något är falskt är;

<syntaxhighlight lang="JavaScript">
if ( !isEven( nånVariabel ) )
{
<utförs endast om nånVariabel är ett udda tal>
}
</syntaxhighlight>

Som du kanske minns så betyder ”<code>!</code>”-tecknet ”inte” i JavaScript. Användandet av ”not” kommer ifrån Boolesk algebra. ”<code>!</code>”-tecknet gör om det efterföljande uttrycket till dess motsats. Det betyder att <code>!true</code> blir <code>false</code> och <code>!false</code> blir <code>true</code>.

Självklart kan man använda ”<code>&&</code>” och ”<code>||</code>” tillsammans med funktioner som returnerar sanningsvärden. Till exempel:

<syntaxhighlight lang="JavaScript">
if ( isEven(nånVariabel ) && nånVariabel > 10 )
{
<utförs endast om nånVariabel är ett jämt tal som är större än 10 >
}
</syntaxhighlight>

== Styra prioritetsordning med "<code>()</code>" ==
Om man har många ”<code>&&</code>” och/eller ”<code>||</code>” i rad, kan det bli lite svårläst. Det kan även vara svårt att avgöra i vilken prioritetsordning uttrycken ska utföras. Det kan man oftast lösa genom att gruppera uttrycken inom parenteser (precis som i vanlig matematik när man vill styra vilka beräkningsdelar som ska ske före andra). T.ex.;

<syntaxhighlight lang="JavaScript">
if ( ( isEven( a ) && a > 10 ) || ( !isEven( a ) && ( a < 9 && a > 2 ) )
{
<utförs när nåt av följande uppfylls;
”a är ett jämt tal som är större än 10”
eller
”a är ett udda tal som är större än 2 och mindre än 9” >
}
</syntaxhighlight>

== Nästa aktivitet ==
[[Loopar och slingor]]

Att jobba med sanningsvärden

2026-08-10T14:39:51Z

PGJ:

Man brukar tala om sanningsvärden när man jobbar med villkor. Ett sanningsvärde är antingen <code>true</code> eller <code>false</code>, dvs sant eller falskt. När ett villkor är sant säger man att villkoret är uppfyllt. Ibland kan man även säga uttryck istället för villkor.

== Exempel på sanningsvärden ==
Några exempel på sanningsvärden:
{| class="wikitable"
! JavaScript-villkor
! Resultat
|-
| 1 == 1
|True
|-
| 1 == 2
|False
|-
| “alfa” == “alfa”
| True
|-
| “alfa” == “beta”
| False
|}

== Jämförelse med <code>==</code> ==
Lägg märke till att när man utför en jämförelse i JavaScript så använder man av ”<code>==</code>”, dvs två likamed-tecken.

Ett likamed-tecken ger tilldelning, medan två ger jämförelse. Tilldelning ändrar innehållet i variabeln, medan jämförelse returnerar <code>true</code> eller <code>false</code> utan att ändra något innehåll.

JavaScript har några egenheter. Eftersom JavaScript automatiskt omvandlar datatyper så kan man jämföra på följande vis:
{| class="wikitable"
! JavaScript-villkor
! Resultat
|-
| 1 == "1"
|True
|}

==Jämförelse med <code>===</code>==
Faktum är att man i JavaScript ofta använder sig av "<code>===</code>", dvs trippla likamed-tecken. Denna typ av jämförelse kollar både att innehållet är av samma datatyp samt att innehållet är lika.

Vid vanlig jämförelse, <code>==</code> försöker JavaScript att omvandla variablernas innehåll så att de blir av samma datatyp. Vilket i många fall kan vara bra. Men det kan uppstå situationer där man jämför äpplen med päron och får resultat som är helt tokiga.

Här är ett exempel på skillnaden mellan de båda jämförelseoperatorerna.
{| class="wikitable"
! JavaScript-villkor
! Resultat
|-
| "1" == 1
|True
|-
| "1" === 1
|False
|}

Skillnaden på de två jämförelserna i ovanstående exempel är att <code>"1"</code> är en sträng som innehåller teckenkoden för <code>1</code>, snarare än det det matematiska värdet <code>1</code>.

Med <code>==</code>, kommer JavaScript att omvandla höger- och vänsterled till samma datatyp innan jämförelsen. Den översätter alltså tecknet till ett tal och jämför det med talet och då blir ju bägge sidor lika.

Däremot kommer <code>===</code> ''inte'' att göra någon typomvandlig. Det gör att JavaScript direkt kan se att sakerna inte är lika. Strängen <code>"1"</code> tillhör inte samma datatyp som siffran 1 och därmed kan inte innehållet heller vara lika.

(I den här sektionen kommer vi bara att använda <code>if</code>-satser i exemplen. Men alla sanningsvärden skulle fungera lika bra (eller dåligt) i t.ex. <code>while</code>-loopar.)

==Enbart <code>true</code> eller <code>false</code>==
Om man vill kan man göra <code>if</code>-satser som alltid utförs:

<syntaxhighlight lang="JavaScript">
if ( true )
{
<utförs alltid>
}
</syntaxhighlight>

Det är iofs rätt meningslöst att göra så (vi kommer dock att se att det finns tillfällen då liknande konstruktioner är användbara, men det blir först när vi kommer till <code>while</code>).

Ännu meningslösare, men likväl möjligt, är att göra en <code>if</code>-sats som aldrig körs (genom att använda sig av sanningsvärdet <code>false</code>.

== Jämförelseoperationer ==
I villkor använder man sig ofta av matematiska jämförelseoperatorer. Några vanliga villkor/jämförelseoperatorer:

{| class="wikitable"
! JavaScript-villkor
! Typ av jämförelse
|-
| <code>a == b</code>
| Är <code>a</code> och <code>b</code> lika?
|-
| <code>a != b</code>
| Är <code>a</code> och <code>b</code> inte lika?
|-
| <code>a < b</code>
| Är <code>a</code> mindre än <code>b</code>?
|-
| <code>a > b</code>
| Är <code>a</code> större än <code>b</code>?
|-
| <code>a <= b</code>
| Är <code>a</code> mindre än eller lika med <code>b</code>?
|-
| <code>a >= b</code>
| Är <code>a</code> strörre än eller lika med <code>b</code>?
|}

I JavaScript betyder ”<code>!</code>” icke, eller ”not”, så man utläser alltså ”<code>!=</code>” som icke lika med.

== Kombinera sanningsvärden ==
Man kan sätta samman mer komplexa villkor med hjälp av; ”<code>&&</code>” som betyder ”och” samt ”<code>||</code>” som betyder ”eller”.

Genom att använda dessa instruktioner kan man foga samman flera sanningsuttryck till ett. Man kan jämföra med hur man använder sig av + och – när man räknar med vanliga tal i matematiken, skillnaden är att vi nu ”räknar” med sanningsvärden. (Det finns till och med en speciell gren av matematik som specialiserar sig på räkning med sanningsvärden-/uttryck, det kallas Boolesk algebra.)

=== Och-villkor; <code>&&</code> ===
När man använder sig av <code>&&</code> måste bägge villkoren vara uppfyllda för att hela och-villkoret ska bli sant.

<syntaxhighlight lang="JavaScript">
if ( villkor1 && villkor2 )
{
<utförs endast om både villkor1 och villkor2 är sanna>
}
</syntaxhighlight>

Det innebär att följande gäller för och-villkoret:

{| class="wikitable"
! Villkor
! Resultat
|-
| <code>false && false</code>
| <code>false</code>
|-
|<code>true && false</code>
| <code>false</code>
|-
| <code>false && true</code>
| <code>false</code>
|-
| <code>true && true</code>
| <code>true</code>
|}

=== Eller-villkor; <code>||</code> ===
När man använder eller-varianten, <code>||</code>, räcker det med att ett av villkoren är uppfyllt (bägge villkoren kan vara sanna, men det räcker med att ett är det).

<syntaxhighlight lang="JavaScript">
if ( villkor1 || villkor2 )
{
<utförs endast om något, eller båda, av villkor1 och villkor2 är sant>
}
</syntaxhighlight>

Det innebär att följande gäller för eller-villkoret:

{| class="wikitable"
! Villkor
! Resultat
|-
| <code>false && false</code>
| <code>false</code>
|-
| <code>true && false</code>
| <code>true</code>
|-
| <code>false && true</code>
| <code>true</code>
|-
| <code>true && true</code>
| <code>true</code>
|}

=== Icke-villkor; <code>!</code> ===
Icke-operatorn förändrar ett sanningsvärde till dess motsats. Dvs, <code>true</code> blir <code>false</code> och vice versa.

{| class="wikitable"
! Villkor
! Resultat
|-
| <code>!false</code>
| <code>true</code>
|-
| <code>!true</code>
| <code>false</code>
|}

I vissa fall kan det vara snyggare och enklare att skriva ett uttryck på ett visst sätt och sedan lägga ett ”<code>!</code>” framför allt för att på så vis omvandla det till sin motsats.

== Sanningsvärden och funktioner ==
Vissa programfunktioner returnerar <code>true</code> eller <code>false</code> och kan därför direkt användas som sanningsvärden/villkor i <code>if</code>-satser. Det är speciellt användbart för jämförelsefunktioner för strängvariabler och liknande.

De variabler som innehåller sanningsvärden, dvs <code>true</code> eller <code>false</code> kallas för bool eller booleska. Ibland kan det vara praktiskt att spara undan returvärdet från en funktion i en bool-variabel.

T.ex. använder man ofta bool-variabler i <code>while</code>-satser. Ett litet exempel;

<syntaxhighlight lang="JavaScript">
let running = true;

while (running)
<massa kod>

if ( tangent == ”q”)
{
running = false;
}
}
</syntaxhighlight>

Exemplet ovan kommer alltså att köras i en loop, ända tills användaren trycker på tangenten ”q”. Då blir <code>running</code> satt till <code>false</code> och <code>while</code>-loopen avslutas.

När man programmerar är det alltid viktigt att försöka bryta ned varje programuppgift i så små deluppgifter som möjligt. Därför är det ofta bra att skapa små jämförelsefunktioner som returnera <code>true</code> eller <code>false</code>. Till exempel om man vill kolla om ett tal är ett jämt tal, kan man skapa en liknande funktion;

<syntaxhighlight lang="JavaScript">
function isEven ( tal )
{
if( tal % 2 == 0 )
{
return true;
} else {
return false;
}
}
</syntaxhighlight>

Inte det mest optimala sättet att skapa en dylik funktion, men det är relativt läsbart. Här skapar vi en ny funktion, som heter <code>isEven</code>. I och med att vi definierat metoden kan vi använda den på andra ställen i vår kod, precis som om den vore en del av programmeringsspråket. På så vis kan vi alltså utvidga språket och specialanpassa det för det vi vill göra.

Ett snyggare och koncisare sätt att skriva ovanstående funktion skulle vara det här:

<syntaxhighlight lang="JavaScript">
function isEven ( tal )
{
return tal % 2 == 0;
}
</syntaxhighlight>

Eftersom vi ska returnera ett sanningsvärde och bara gör en enda test, kan vi ju lika gärna returnera resultatvärdet ifrån testet. <code>if</code>:arna i första varianten tillförde ju inget mer än att de antingen returnerade <code>true</code> eller <code>false</code>. Vilket ju är de värden vi får ut direkt ifrån vårt test och vi kan därför optimera bort <code>if</code>:arna. Detta funkar inte i alla fall, men i vissa fall kan det ge en kortare och snyggare lösning.

Nu när man definierat funktionen, finns den att tillgå och man kan använda sig av den i programmets <code>if</code>-satser;

<syntaxhighlight lang="JavaScript">
if ( isEven( nånVariabel ) )
{
<utförs endast om nånVariabel är ett jämt tal >
}
</syntaxhighlight>

Man skulle även kunna skriva ”<code>isEven( a ) == true</code>”, men det behövs inte eftersom ju funktionen alltid returnerar <code>true</code> eller <code>false</code>. Man undviker oftast att lägga till onödig kod, det skapar bara mer chanser att något blir fel eller att koden blir mer svårläst.

Om man skulle vilja testa om något är udda, d.v.s. motsatsen till jämt, kan man göra så här;

<syntaxhighlight lang="JavaScript">
if ( isEven( nånVariabel ) == false )
{
<utförs endast om nånVariabel är ett udda tal>
}
</syntaxhighlight>

Ett annat, vanligare, sätt att kontrollera om något är falskt är;

<syntaxhighlight lang="JavaScript">
if ( !isEven( nånVariabel ) )
{
<utförs endast om nånVariabel är ett udda tal>
}
</syntaxhighlight>

Som du kanske minns så betyder ”<code>!</code>”-tecknet ”inte” i JavaScript. Användandet av ”not” kommer ifrån Boolesk algebra. ”<code>!</code>”-tecknet gör om det efterföljande uttrycket till dess motsats. Det betyder att <code>!true</code> blir <code>false</code> och <code>!false</code> blir <code>true</code>.

Självklart kan man använda ”<code>&&</code>” och ”<code>||</code>” tillsammans med funktioner som returnerar sanningsvärden. Till exempel:

<syntaxhighlight lang="JavaScript">
if ( isEven(nånVariabel ) && nånVariabel > 10 )
{
<utförs endast om nånVariabel är ett jämt tal som är större än 10 >
}
</syntaxhighlight>

== Styra prioritetsordning med "<code>()</code>" ==
Om man har många ”<code>&&</code>” och/eller ”<code>||</code>” i rad, kan det bli lite svårläst. Det kan även vara svårt att avgöra i vilken prioritetsordning uttrycken ska utföras. Det kan man oftast lösa genom att gruppera uttrycken inom parenteser (precis som i vanlig matematik när man vill styra vilka beräkningsdelar som ska ske före andra). T.ex.;

<syntaxhighlight lang="JavaScript">
if ( ( isEven( a ) && a > 10 ) || ( !isEven( a ) && ( a < 9 && a > 2 ) )
{
<utförs när nåt av följande uppfylls;
”a är ett jämt tal som är större än 10”
eller
”a är ett udda tal som är större än 2 och mindre än 9” >
}
</syntaxhighlight>

== Nästa aktivitet ==
[[Loopar och slingor]]

Villkorssatser

2026-08-10T14:31:14Z

PGJ:

När man programmerar använder man sig ofta av villkorssatser för att styra programflödet.
Med hjälp av en villkorssats kan man styra hur programmet ska uppföra sig då ett visst villkor är uppfyllt.
== <code>if</code>-satser ==

Den vanligaste villkorssatsen är <code>if</code>-satsen. Man har då en sektion med kod som enbart utförs när villkoret är sant, till exempel;

<syntaxhighlight lang="JavaScript">
if (villkor)
{
<kodblocket utförs endast om villkor är sant>
}
<Här fortsätter koden oavsett om if-kodblocket kördes eller ej>
</syntaxhighlight>

Eller för att skriva det på vanlig svenska; om <code>villkor</code> är sant gör det här…

Om <code>villkor</code> inte är sant, fortsätter programmet att köra koden som finns efter ”<code>}</code>”-tecknet.

=== Vad är <code>villkor</code> ===
<code>villkor</code> är någonting som i slutändan kommer att bli <code>true</code> eller <code>false</code>. Man brukar kalla denna typ av <code>villkor</code> för ett booleskt värde eller för ett sanningsvärde.

Boolesk algebra är en typ av matematik som behandlar hanteringen av utsagor som enbart kan vara sanna eller falska. Vi återkommer till detta.

Vad är det då som kan bli <code>true</code> eller <code>false</code>? Ett vanligt exempel på detta är jämförelse, t.ex. om vi vill kontrollera om en variabel innehåller ett visst värde. Det kan se ut så här:

<syntaxhighlight lang="JavaScript">
if( värde == 1)
{
// Utförs om värde är satt till 1, om inte så hoppas detta block över
}
// Här fortsätter koden
</syntaxhighlight>

Här användes jämförelse-operatorn; <code>==</code> för att kontrollera om <code>värde</code> är satt till <code>1</code>. Lägg märke till att det är två "<code>=</code>"-tecken.

För jämförelser använder vi <code>==</code> och för tilldelning använder vi <code>=</code>. Det är ett rätt så vanligt fel att råka skriva enbart ett <code>=</code>, när vi egentligen ville ha två. Så var uppmärksam på det!

Vi återkommer till <code>villkor</code> och sanningsvärden i nästa sektion.
=== <code>else</code> ===
Man kan även begära att något annat ska utföras i de fall som villkoret ''inte'' är sant. Då gör man så här;

<syntaxhighlight lang="JavaScript">
if ( villkor )
{
// <utförs endast om villkor är sant>
} else {
// <utförs endast om villkor är falskt>
}
// Här fortsätter körningen oavsett vilket av ovan kodblock som kördes
</syntaxhighlight>

Med den programkoden säger man; om <code>villkor</code> är sant gör det som står i första blocket, i annat fall gör det som står i <code>else</code>-blocket.

Man kör alltså antingen det ena eller det andra blocket. Det finns inget fall då bägge blocken kan bli att köras!

=== Nästlade <code>if</code>-satser ===
Om man vill kan man lägga <code>if</code>-satser inuti andra <code>if</code>-satser. Det kallas nästlade eller inkapslade <code>if</code>:ar.

Sådana kan man använda om man vill att programmet ska kolla om flera saker är sanna. Men som ni kommer att se i nästa sektion, går det ofta att lösa dylika situationer på ett mer effektivt sätt.

Ett exempel på nästlade <code>if</code>-satser:

<syntaxhighlight lang="JavaScript">
if ( villkor1)
{
if ( villkor2)
{
// <utförs endast om både villkor1 och villkor2 är sanna>
}
}
</syntaxhighlight>

För att koden längst in ska utföras måste alltså såväl den första <code>if</code>:en och den andra ha <code>villkor</code> som är sanna.

I princip kan man nästla hur många <code>if</code>:ar som helst. Men, som sagt, man kan lösa detta på ett effektivare sätt. För att kunna göra det behöver vi kunna utföra operationer som fungerar med sanningsvärden. Vilket vi återkommer till nästa sektion.

== Överkurs ==
<div class="well well-meadow">
Följande är lite överkurs, men det kan vara bra att känna till.
</div>

== <code>switch</code> ==
När man vill testa något som kan ha många olika värden kan det lätt bli många <code>if</code>:ar. För att lösa såna situation på ett snyggare sätt så kan man använda sig av <code>switch</code>.

<syntaxhighlight lang="JavaScript">
switch( testuttryck )
{
case testvärde1:
break;
case testvärde2:
break;
case testvärde3:
break;
default:
break; // Egentligen inte nödvändig, då switchen tar slut efter detta
}
</syntaxhighlight>

Med detta kommando kan man alltså testa ett och samma uttryck mot flera möjliga värden.

Lägg märke till att varje <code>case</code> avslutas med en <code>break</code>. Detta görs för att koden inte ska fortsätta in i efterkommande <code>case</code>. När ett <code>case</code> blivit uppfyllt så kommer alla efterföljande <code>case</code> också att anses som uppfyllda. Om vi inte satte en <code>break</code> skulle körningen alltså fortsätta in i alla efterföljande <code>case</code>. I vissa fall vill vi att det ska vara så. Låt säga att något ska ske om ett värde är; <code>0</code>, <code>1</code> eller <code>2</code>. Då kanske vi skulle skriva så här:

<syntaxhighlight lang="JavaScript">
switch( testuttryck )
{
case 0:
case 1:
case 2:
// Utförs om testuttryck är 0, 1 eller 2
break;
case 3:
// Utförs enbart om uttryck är 3
break;
default:
// Utförs bara om ingen av ovanstående körts
break; // Egentligen inte nödvändig, då switchen tar slut efter detta
}
</syntaxhighlight>

Så <code>switch</code> används oftast då man har många olika alternativ att välja mellan och det skulle ha blivit jobbigt/fult att köra massa <code>if</code>:ar på raken.

Kanske man har en meny, där användaren kan välja mellan olika alternativ. Låt säga att alternativen anges med den siffra och det finns tre möjliga val. Då skulle vår <code>switch</code> kunna se ut så här:

<syntaxhighlight lang="JavaScript">
switch( alternativ )
{
case 1:
// Användaren valde alternativ ett
break;
case 2:
// Användaren valde alternativ två
break;
case 3:
// Användaren valde alternativ tre
break;
default:
// Användaren valde inget av ovanstående!
break
}
</syntaxhighlight>

==== <code>default</code> ====
Kommandot <code>default</code> används alltså för att ange vad som ska ske om inget av de övriga alternativen uppfylldes. Ofta kan detta vara en plats där man vill ange ett felmeddelande. Låt säga att användaren ska kunna ange en siffra mellan 1 och 3, då vill vi kanske skriva ut ett felmeddelande när något annat anges. Kanske ett felmeddelande som säger nåt i stil med; "Du får bara ange 1, 2 eller 3".

== <code>Ternary-operatorn</code> ==
Ett kompakt sätt att göra en villkorlig tilldelning är att använda sig av ternary-operatorn (kallas även trinary-operatorn). Den heter så på grund av att den består av tre delar.

<syntaxhighlight lang="JavaScript">
let a = testvillkor ? sant : falskt;
</syntaxhighlight>

Vi tilldelar alltså ett värde till variabeln <code>a</code>. Vad som tilldelas beror på ett villkor. Detta villkor skrivs direkt efter "<code>=</code>"-tecknet, dvs <code>testvillkor</code> i detta fall.

Därefter följer ett frågetecken, vilket är det som anger att vi vill köra en ternary-operation. Om villkoret var sant tilldelas det första värdet till variablen. Om villkoret var falskt så tilldelas det sista värdet. Det vill säga det värde som följer efter "<code>:</code>"-tecknet.

Det här är inte så jättevanligt att man använder sig av. Det är kompakt och kan vara en snygg lösning i vissa fall. Men det är även relativt svårläst och risken är att det blir svårt att förstå vad som sker.

== Nästa aktivtet ==
[[Att jobba med sanningsvärden]]

Variabler

2026-08-10T14:23:02Z

PGJ:

Programmering består till stor del för beräkningar och bearbetning av data. För att klara av denna datahantering måste man kunna lagra och mellanlagra sina resultat någonstans. Det gör man med hjälp av variabler.

== Lagring ==
Variabler kan ses som behållare, där man lagrar undan ett visst innehåll under en tid. Som man förstår av namnet kan variablers innehåll variera, d.v.s. den data som de innehåller kan förändras.

När man ger en variabel ett värde säger man att man ''tilldelar'' den ett värde. När man tilldelar en variabel ett nytt värde, skrivs det gamla värdet över med det nya innehållet. Om man skulle vilja spara undan det gamla värdet, måste man lägga över det i en annan variabel innan man tilldelar det nya värdet. Därför behöver man ofta använda sig av diverse temporärvariabler när man skriver program.

== Tilldelning ==
Användningen av variabler i programmering påminner delvis om hur man använder variabler i matematikens ekvationer, men med några viktiga skillnader.

Det som främst skiljer sig är att ”<code>=</code>”-tecknet inte fungerar som i ekvationer! Det betyder tilldelning, dvs. vi sätter variabeln till ett specifikt värde snarare än att vi anger att höger- och vänsterled är lika.

Likaså kan man enbart tilldela ifrån högerled till vänsterled. Med andra ord, variabeln som man vill tilldela ett värde måste alltid stå på vänster sida om ”<code>=</code>”-tecknet och det man vill tilldela variabeln ska stå på höger sida.

Datorn kommer alltid att beräkna klart hela högerledet och sedan flytta in resultatet i den variabel som anges i vänsterled.

Följande exempel tilldelar värdet två till en variabel som heter <code>tal</code>:

<syntaxhighlight lang="JavaScript">
tal = 2;
</syntaxhighlight>

Ovanstående är alltså en sats som utför en tilldelning. Det har ingenting att göra med varken likhet eller jämförelse.

Alla programrader körs var för sig i sekvens, vilket innebär att denna tilldelning sker först när programmet når raden i fråga. Innan vi når exempelraden kan alltså <code>tal</code> innehålla vad som helst.

Eftersom högerledet alltid beräknas helt och hållet, skulle alltså <code>tal</code> innehålla <code>4</code> efter det att följande rad körts:
<syntaxhighlight lang="JavaScript">
tal = 2 * 2;
</syntaxhighlight>

En sak till som skiljer sig från matematiken är att vi kan skriva saker som:
<syntaxhighlight lang="JavaScript">
tal = tal + 1;
</syntaxhighlight>
Ovanstående exempel skulle förstås vara helt ogiltigt i matematiken, eftersom vi skulle få att <code>0 = 1</code>. Vilket ju sällan är sant.

Men i programmering funkar det fint. Vid tilldelning beräknas hela högerledet först. Det gör att programmet läser ut värdet som just nu är lagrat i <code>tal</code> lägger till <code>1</code>. Då är högerledet färdigt och resultatet tilldelas till <code>tal</code>.

Det spelar alltså ingen roll att samma variabel är med i både höger- och vänsterled. För programmet är högerledet enbart något som ska beräknas och vänsterledet är bara en plats där resultatet av beräkningen ska lagras.

== Deklaration och användning ==
JavaScript är ett svagt typat språk, det innebär att man inte behöver tala om vilken datatyp en variabel har. Däremot måste man deklarera variabeln, det vill säga man måste skapa variabeln. Gör man inte detta så existerar inte variabeln enligt JavaScript. När man deklarerar talar man om för interpretatorn, som ska tolka programmet, vad variabeln heter. Namnet kommer sedan att vara konstant, medan den data som variabeln innehåller kan förändras.

I JavaScript deklarerar man variabler med <code>let</code>, en deklarationssats kan bli att se ut så här:
<syntaxhighlight lang="JavaScript">
let spelare;
</syntaxhighlight>

När man deklarerat variabeln <code>spelare</code> på det viset, har den fortfarande inte tilldelats något värde. Om du skulle använda den till något annat än tilldelning, kan du få en varning om att dess innehåll är odefinierat.

Det är en bra vana att tilldela ett grundvärde till variabler i anslutning till att man deklarerar dem. T.ex. kan man göra så här för att skapa en variabel som har värdet <code>1</code> ifrån början:

<syntaxhighlight lang="JavaScript">
let spelare = 1;
</syntaxhighlight>

För att senare tilldela ett nytt värde till en variabel, använder man sig av ett vanligt ”<code>=</code>”-tecken, t.ex.:

<syntaxhighlight lang="JavaScript">
spelare = 2;
</syntaxhighlight>

Efter tilldelningen har variabeln värdet <code>2</code> och eventuellt tidigare innehållet skrivs över och "försvinner".

När variabeln senare används kommer programmet att titta i ”behållaren” som heter <code>spelare</code> och se att där finns <code>2</code> (det vill säga, ända tills du tilldelar variabeln ett nytt värde).

För programmet är det ingen direkt skillnad om du skriver <code>2</code> eller <code>spelare</code>, bägge kommer att tolkas som värdet <code>2</code> (i alla fall tills du tilldelar <code>spelare</code> ett annat värde än <code>2</code>). Följande kod är alltså likvärdig;

<syntaxhighlight lang="JavaScript">
spelare = 2;
FlyttaRacket( spelare );
</syntaxhighlight>

Skulle ge samma resultat som;

<syntaxhighlight lang="JavaScript">
FlyttaRacket( 2 );
</syntaxhighlight>

(Förutom att i första exemplet har vi ju kvar värdet <code>2</code>, lagrat i variabeln <code>spelare</code>. Vilket kan vara praktiskt om man vill använda värdet igen. Det är ju även mycket enklare att förstå vad <code>2</code> har för betydelse om värdet ligger i något som heter <code>spelare</code>.)

== Variabelegenskaper ==
Man kan säga att variabler har tre grundegenskaper;
# Namn
# Datatyp (vilken inte är så viktig i JavaScript, då detta kan förändras beroende på vad variabeln används till)
# ”Räckvidd”/synlighet

Vi går igenom dessa egenskaper var för sig…
=== 1. Namn och namngivningskonventioner ===
Varje variabel behöver ett eget namn eller identifierare, så att den går att urskilja från övriga variabler. Namnet bör helst vara beskrivande, så att man enkelt kan förstå vad variabeln används till. Om du t.ex. vill lagra ett personnummer, kanske just <code>personnummer</code> är ett bra variabelnamn.

Det svåraste med programmering är att skriva läsbar och förståelig kod som går att underhålla och förändra senare. Det gäller inte bara att förstå koden just när man skriver den, man måste kunna förstå den om ett år, fem år, tio år… Koden ska även vara så lättläslig och lättförståelig att andra ska kunna förstå och arbeta med koden.

Det är därför extra viktigt att välja bra namn för variabler, konstanter, funktioner, osv. Självklart ska man även kommentera koden och förklara mer utförligt vad de olika variablerna är till för.

Om du kommer att jobba som programmerare kommer du säkert att hamna på ett ställe där man har en förutbestämd mall, en så kallad stilguide, som fastställer hur all kod ska se ut. Det kan gälla alltifrån hur många tabbar eller mellanslag varje rad ska indenteras med, till bestämmelser för hur variabler och liknande ska namnges. När alla följer en sådan mall får man mer enhetlig kod som är lättare att underhålla och förstå för alla på arbetsplatsen.

==== Namngivningsregler ====
I JavaScript har man följande namngivningsregler (dessa regler gäller alla saker som kan namnges, t.ex.; variabler, funktioner, osv...):

Man kan inte använda vilka tecken som helst när man namnger saker. Variabelnamn måste börja med en bokstav eller ett ”<code>_</code>”-tecken. Du kan alltså inte påbörja ett variabelnamn med en siffra.

Man kan inte ha mellanslag eller liknande blankstegstecken i ett variabelnamn, då använder man oftast ”<code>_</code>”-tecknet istället.

Vissa tecken fungerar inte i variabelnamn. Ett exempel på detta är "<code>-</code>"-tecken, för då fattar inte JavaScript om du vill subtrahera eller om det är en del av ett namn. Det är alltså bäst att hålla sig till de vanliga tecknen i vårt grundalfabete. Samma sak gäller för alla räknesätten; <code>+</code>, <code>-</code>, <code>/</code>, <code>*</code>.

Man kan inte heller använda samma namn som används av de inbyggda kommandon, t.ex. kan du inte ha en variabel som heter ”<code>if</code>” eller ”<code>for</code>”.

I JavaScript är variabelnamn känsliga för versaler/gemena, dvs stora och små bokstäver. Det betyder att följande satser hänvisar till helt olika variabler;

<syntaxhighlight lang="JavaScript">
let Variabeln;
let variabeln;
let VaRiAbElN;
</syntaxhighlight>

I JavaScript inleder man oftast ett variabelnamn med en liten bokstav (gemen). Det spelar ingen roll för datorn, men vi programmerare är vana att det ska se ut så.

<div class="well well-meadow">
==== Camel-case ====
Som vi tidigare konstaterade så kan man inte använda mellanslag i variabelnamn. För att lösa det brukar man använda sig av så kallat camel-case (ibland kallat kamelnotation, men ingen säger så). Det innebär att istället för att skriva ut mellanslag så skriver man samman allt och för varje nytt ord så sätter man en stor bokstav (versal).

Ett par exempel:
<syntaxhighlight lang="JavaScript">
let kamelerÄrDjur;
let ingaMellsanslagIVariabler;
</syntaxhighlight>
</div>

=== 2. Datatyp ===

Datatyp handlar om vilken sorts data/information en variabel innehåller. Olika exempel på datatyper kan vara tal, sträng (vanlig text), osv.

JavaScript är dock ett svagt typat språk och man anger inte vilken datatyp en variabel har. Istället tolkar JavaScript variabelns innehåll utifrån hur den används. Behövs en textsträng, tolkas innehållet som en textsträng och behövs ett tal, tolkas innehållet som ett tal.

Ibland kan detta dock bli lite "fel", JavaScript kanske tolkar ditt tal som en textsträng. I sådana fall finns det metoder som gör att man kan "övertala" JavaScript att tolka på ett korrekt vis.

<syntaxhighlight lang="JavaScript">
let enSträng = "Vanlig text";
let ettHeltal = 1;
let ettDecimaltal = 1.5;
</syntaxhighlight>

Observera även att JavaScript, liksom de flesta programmeringsspråk är på engelska och att man därför använder ”<code>.</code>” istället för ”<code>,</code>” i decimaltal. Kommatecknet används istället som avgränsning när man skriver in innehåll i olika typer av listor.

Datatypen avgör inte bara vad som kan lagras i en variabel utan det avgör även vilka operationer man kan utföra på variabeln. Att dividera en sträng (text) med en annan sträng kommer inte att fungera. Däremot fungerar det, förstås, utmärkt med tal-variabler.

=== 3. Räckvidd och synlighet ===
Variabler kan antingen gälla inom ett specfikt <code>{}</code>-block eller globalt (dvs i hela programmet). Variabelns räckvidd och synlighet kallas för ”scope” på engelska.

Var man kan använda en variabel beror på var den deklareras. Rent generellt kan man säga att en variabel enbart är tillgänglig i det block där den deklareras. Utanför blocket existerar inte variabeln.

Detta betyder alltså att du i många fall kan ha variabler med samma namn i olika delar av ditt program, utan att de på något sätt påverkar varandra. Det är på grund av deras scope gör att de ses som helt olika variabler, trots att de heter lika.

Variabler skapas och tas bort dynamiskt allteftersom programmet körs. En variabel som deklarerats inuti ett block försvinner när den avslutande "<code>}</code>" nås (förutom i några specialfall, så kallade closures, vilket är mer avancerat och vi kan inte gå in på det än).

Om ditt program kommer tillbaka till samma block, t.ex. om du kallar på den två gånger i rad, så återskapas variablerna på nytt och försvinner återigen när blocket tar slut. Inget variabel-innehåll sparas mellan körningarna, så om du behöver ha kvar ett värde måste du på något sätt spara undan det. Kanske du skriver ner det på disk i en fil eller kanske du har en variabel som ligger ”högre” upp i hierarkin och sparar ditt värde där.

==== Skillnader på <code>var</code> och <code>let</code> ====
Tidigare deklarerade man variabler med <code>var</code>. Det kan man iofs fortfarande göra. Men <code>let</code> har en hel del fördelar och man bör enbart använda sig av den varianten. Det finns dock en hel del gammal kod som använder sig av <code>var</code>. Vi går igenom hur <code>var</code> fungerar, så att du vet vad det handlar om i fall du ser den i gammal kod.

JavaScripts variabelhantering har några egenheter som inte de flesta andra språk har. Det gäller speciellt om man använder sig av <code>var</code>. Den använder sig av något som kallas "hoisting", det vill säga engelskans uttryck för att lyfta upp något.

När man använder <code>var</code> och deklarerar en variabel i en funktion, oavsett var i funktionen det sker, så "flyttar" JavaScript upp deklarationen till början av funktionen. Det vill säga variabeln blir att existera redan i början av funktionen, även om den är deklarerad i slutet.

Det innebär alltså att följande två exempel är likvärdiga:

<syntaxhighlight lang="JavaScript">
function test(parameter)
{
var värde;

if(parameter == 1)
{
värde = 1;
// Gör nånting
}
}
</syntaxhighlight>
och
<syntaxhighlight lang="JavaScript">
function test(parameter)
{
if(parameter == 1)
{
värde = 1;
// Gör nånting
}

var värde;
}
</syntaxhighlight>

I bägge exemplen kommer variabeln <code>värde</code> att vara tillgänglig i hela funktionen. Detta gäller alltså även innan den deklarerats, såsom i det andra exemplet.

Dock är det ''enbart'' deklarationen som lyfts upp. Eventuell tilldelning som utförs tillsammans med deklarationen lyfts ''inte'' upp! Så om vi har följande kod:

<syntaxhighlight lang="JavaScript">
function test(parameter)
{
if(parameter == 1)
{
console.log(värde);
}

var värde = 1;
}
</syntaxhighlight>

Så kommer <code>console.log</code> att rapportera att <code>värde</code> är <code>undefined</code> eftersom den inte tilldelats något värde ännu. När körningen når raden som har <code>var värde = 1;</code>, då kommer variabeln att tilldelas värdet <code>1</code>.

Detta beteende är rätt så unikt för JavaScript och kan verka märkligt om man är van med andra programmeringsspråk...

I de flesta andra språk är variabler unika för det block de befinner sig inuti, där ett block är kod som står inom "<code>{</code>" och "<code>}</code>". Vilket gör att man kan ha "lokala" variabler i olika block som befinner sig i en och samma funktion. I andra språk uppstår variabler först när programmet når den rad där variabeln skapas och kan inte användas före detta.

Eftersom många har efterfrågat det "normala" beteendet för att skapa variabler, så införde ''JavaScript2015'' ett nytt sätt att deklarera variabler. Man kan nu även använda sig av <code>let</code>.

Variabler som deklareras med <code>let</code> uppför sig så som man är van med ifrån andra språk. De skapas och kan användas först efter den rad där de deklarerats. Deras synlighet, eller scope, är enbart det block där de skapats.

Ett exempel på hur <code>let</code> inte lyfts upp:

<syntaxhighlight lang="JavaScript">
function test(parameter)
{
if(parameter == 1)
{
// Här existerar inte variablen värde
}

let värde = 1; // Först efter detta finns variabeln
}
</syntaxhighlight>

Ett exempel på hur <code>let</code> kan användas för att få "lokala" variabler:

<syntaxhighlight lang="JavaScript">
function test(parameter)
{
if(parameter == 1)
{
let värde = 1; // Den här variabeln existerar bara i detta block
} // Här upphörde värde att existera

if(parameter == 2)
{
// Här skapas en ny variabel, som inte har något att göra med
// den som fanns i föregående if-sats.
let värde = 2; // Den här variabeln existerar bara i detta block
} // Här upphörde värde att existera

// Detta blir en helt ny variabel, som inte har något med
// ovanstående att göra
let värde = 1;
}
</syntaxhighlight>

Att använda samma variabelnamn stup i kvarten inom en och samma funktion är rätt så dåligt. Det blir svårläst och förvirrande. Men ovanstående var ju bara ett exempel...

Om du bara orkar lära dig en variant av variabeldeklaration, satsa på <code>let</code>. Den fungerar i alla tillfällen och är mer "normal" än <code>var</code>. Du behöver dock känna till bägge varianterna, då det finns mycket gammal kod som använder sig av <code>var</code> och det finns många programmerare som hellre använder sig av den varianten.

== Nästa aktivitet ==
[[Villkorssatser]]

Olika typer av fel som kan uppstå

2026-08-10T13:32:49Z

PGJ:

Det finns några olika typer av fel som kan uppstå när man programmerar. Rent generellt kan man säga att det är tre huvudtyper som kan uppstå:

* Kompileringsfel
* Exekveringsfel
* Logiska fel

== Kompileringsfel ==
Kompileringsfel inträffar redan när du skriver koden. Kanske du glömmer ett semikolon eller stavar fel på ett variabelnamn. Då kommer JavaScript att gnälla och du får inte köra ditt program. Om man tittar i konsolen står det vilken typ av fel det handlar om.

=== Varningar ===
Det kan även uppstå varningar. Det är meddelanden ifrån JavaScript som vill göra dig uppmärksam på att något eventuellt inte är korrekt. Kanske du har skapat en variabel som aldrig används och som därför är onödig och kanske kan tas bort.

=== Bra verktyg hjälper ===
Om du använder en bra editor eller ett [[IDE]], så får du ofta hjälpsamma varningar och felmeddelanden medan du skriver koden. Detta sker redan innan du provkör programmet.

Det är viktigt att använda bra verktyg som stödjer en i ens arbete. Exempel på ett bra, gratis verktyg är t.ex. [https://code.visualstudio.com/ Visual Studio Code].
Det finns även många plugins till denna som gör det ännu lättare att jobba med programmering och webbutveckling.
=== Följdfel ===
Kompileringsfel kan ofta ge en massa följdfel. Fixar du det första felet, kanske en mängd efterföljande problem löser sig (speciellt vanligt då man glömt ett semikolon). Det är därför en god strategi att börja uppifrån i fellistan och beta av felen ett efter ett. Gör man så kommer säkert många följdfel att lösas och försvinna.

== Exekveringsfel ==
Exekveringsfel är fel som får programmet att krascha. Det kan vara för att du råkat skicka in fel värde i en funktion eller använder någon funktion på ett felaktigt vis. Ett vanligt fel kan vara att du råkar dividera med <code>0</code>. Vilket resulterar i att programmet bryter samman.

Hur felet visas kan vara lite olika, JavaScript har en tendens att bryta samman relativt "tyst". Det kanske bara märks att saker går fel genom att titta i konsolen.

== Logiska fel ==
Logiska fel är de svåraste att hitta. Dessa fel är rena tankefel. Den lösning du konstruerat fungerar helt enkelt inte som den ska. I värsta fall kanske inte misstaget syns direkt, utan det inträffar bara då och då.

Det är därför viktigt att provköra ditt program så mycket som möjligt. Prova att göra ”dumma saker” under körningen och se om ditt program bryter samman eller ej. Det är en bra idé att låta andra testköra ditt program, de vet ju inte hur det ska fungera och kan därför göra något som du inte tänkt på.

== Nästa aktivitet ==
[[Variabler]]

Att skriva läsbar kod

2026-08-10T13:27:03Z

PGJ:

Det är viktigt att skriva läsbar kod som är lätt att underhålla, debugga och förändra. Inte minst är det viktigt för dig själv, men det är även av stor vikt om du jobbar i ett projekt där många ska bidra med kod. I såna fall måste alla skriva kod som ser mer eller mindre likadan ut, så att alla lätt kan läsa koden och förstå hur saker fungerar. I dessa fall använder man sig ofta av en så kallad stilguide, som talar om hur kod ska formateras, hur variabler och metoder ska namnges, osv.

== Kommentarer ==
Om din kod ska bli läslig och förståelig är det viktigt att kommentera koden. Detta gäller inte minst om andra ska läsa din programkod. Det som är helt självklart för dig, kanske inte alls är lika självklart för en annan programmerare. Likaså är kommentarer nyttiga att läsa när du återvänder till kod som du skrev för länge sen. Även om det är du själv som skrivit koden, kanske du kommer att glömma hur den fungerar när det gått en längre tid. Att sitta och dechiffrera vad man menade med gammal kod, kan i vissa fall ta lika lång tid som att skriva om den från scratch!

Kommentarerna har ingen betydelse för funktionen av programmet, utan är bara till för oss människor. Du bör kommentera allting som kan tänkas vara svårbegripligt. Tänk på att du kanske ska in och ändra i koden om flera år, då kanske inte det du idag tycker är självklart är lika självklart längre. Likaså kanske en annan programmerare kommer att missförstå din kod och när denne ska ändra i koden så kanske något följdfel smyger sig in.

Det är alltså god vana att alltid kommentera sin kod. När man går igenom exempel under lektioner och skriver kod ”tillsammans” på projektorn kanske det inte finns tid till att kommentera. Men låt inte det hindra dig ifrån att redan från början lägga dig till med den goda vanan att kommentera!

Kommentera dock inte _allt_. Om det är helt självklart vad som händer utifrån själva koden, behöver du inte skriva nån kommentar. Utgå ifrån att den som läser koden kan koda och förstår grunderna i språket.

I JavaScript kan man kommentera på två olika vis. Dels har man en kommentartyp som gäller för resten av den rad kommentaren står på och dels en typ där man kan kommentera ett helt block som sträcker sig över flera rader.

* Radkommentarer inleds med ”<code>//</code>”, resterande text på den raden är en kommentar. Så fort en ny rad inleds tolkas allt som kod igen.

* Flerraderskommentarer inleds med ”<code>/*</code>” och avslutas med ”<code>*/</code>”. All text inom dessa tecken, kommer att ignoreras av interpretatorn (den som tolkar och kördin kod).

Här följer ett par exempel på olika sätt på vilka man kan kommentera sin kod.

<syntaxhighlight lang="JavaScript">
// Allt efter dubbelstrecket är en kommentar, fram till raden är slut.

let tal = 2; // Koden före dubbelstrecket körs, men resten av raden ignoreras

/* Kommentarer av denna typ inleds med streck och stjärna och avslutas med; */

/* Den här typen av kommentarer kan
sträcka sig över
många rader
och slutar inte tills */
</syntaxhighlight>

Observera att man inte kan nästla flera flerraderskommentarer inuti varandra. Den första ”<code>*/</code>” som JavaScript påträffar kommer att få interpretatorn att gå ur kommentarsläget och börja tolka texten som kod igen. Följande kommer alltså inte att fungera:

<div class="well well-warning"><syntaxhighlight lang="JavaScript">
/* Man kan inte nästla flerraderskommentarer
/* Efter slutet på dessa tecken förväntar C# att det kommer kod igen →*/
Här är det fel, för här ska egentligen kod börja */
</syntaxhighlight>
</div>

Lägg även märke till att eventuell kod som står på samma rad direkt efter ”<code>*/</code>” kommer att köras. I följande exempel kommer alltså <code>let a=1</code> att köras.

<syntaxhighlight lang="JavaScript">
/* En
kommentar */ let a=1;
</syntaxhighlight>

== Blankrader, tabbar och mellanslag ==
Hur man formaterar koden har egentligen ingen större betydelse för JavaScript. Däremot är det ett viktigt verktyg för att skapa läsbar kod. Precis som i fallet med kommentarer kan vettig formatering hjälpa dig själv och andra att lättare läsa och förstå din kod. De flesta moderna utvecklingsverktyg hjälper dig med att formatera din kod på ett vettigt vis.

Det viktigaste man ska göra är att indentera sin kod. Indentera är svengelska för att göra indrag i marginalen, d.v.s. att börja skriva en bit in på raden. Man formaterar sin kod med hjälp av mellanslag eller tabbar. Detta hjälper till så att det går att se strukturen på programmet. Främst gäller detta när man skapar kodblock med hjälp av "<code>{</code>" och"<code>}</code>". Ett exempel på det kan vi se i följande kodsnutt:

<syntaxhighlight lang="JavaScript">
function Spawner ()
{
for (let i=0; i <= Score.score / 10; i++) {
Instantiate( monster );
}

if (Life.life > 0) {
time = 10;
} else {
time = 0;
}
}
</syntaxhighlight>

Även om vi kanske inte förstår vad koden gör, kan vi lätt se hur olika satser hör samman i kodblocken tack vare att de är indragna/indenterade. Detta gör att koden blir mer lättöverskådlig och att man snabbt kan se strukturen och förstå hur de olika delarna hänger samman.

Lägg även märke till att kodexemplet använder sig av blankrader för att ytterligare visa kodstrukturen. De kodbitar som har med varandra att göra ligger bredvid varandra, medan de satser som gör olika saker åtskiljs med en tomrad. Man kan jämföra med hur man i vanlig text använder sig av styckesindelning. Varje stycke handlar om en specifik sak och när man ska tala om något annat gör man ett nytt stycke. Precis så fungerar blankraderna när man formaterar sin kod. Återigen så har detta ingen betydelse för programmets funktionalitet, det är bara ett sätt att göra din kod mer lättläslig.

Man skulle lika gärna kunna skrivit ovanstående som en enda lång rad, så som du ser här under. Vilket tycker du är mest lättläst och lättförståeligt?

<syntaxhighlight lang="JavaScript">
function Spawner(){for(let i=0;i<=Score.score/10;i++){Instantiate(monster);}if(Life.life>0){time=10;}else{time=0;}}
</syntaxhighlight>

Helst ska man undvika att ha flera satser på samma rad. Om man gör det ändå så måste man använda sig av <code>;</code> för att tala om var varje sats slutar!
== Nästa aktivtet ==
[[Olika typer av fel som kan uppstå]]

[[Category:JavaScript]]
__FORCETOC__

Grunderna i JavaScript-programmering

2026-08-10T13:14:45Z

PGJ:

Här kommer vi att gå igenom programmering från scratch, så om du har lite kunskaper inom området behöver du antagligen bara behöva att snabbskumma igenom de första aktiviteterna i denna sektion...

<div class="well well-meadow">
Om du kan något annat programmeringsspråk i C-familjen (t.ex. C, C++, C# eller Java) kan du redan mycket av grunderna i JavaScript. Dessa språks grunder påminner mycket om varandra. Dock finns det en del skillnader, såsom hur man deklarerar variabler och dylikt. Det bör dock inte vara alltför svårt att sätta sig in i skillnaderna. Däremot finns det en hel del skillnader man måste lära sig om man vill skriva riktigt optimal kod.
</div>

== Vad är programmering? ==
Programmering är en typ av problemlösning där man tar fram en ”steg för steg”-beskrivning för hur datorn ska lösa ett problem eller en klass av problem. Datorerna är egentligen rätt dumma och kan enbart utföra väldigt grundläggande uppgifter, typ den enklaste matematiken. Däremot är datorer extremt snabba (och relativt tillförlitliga). På grund av denna snabbhet kan man skapa problemlösningar som i grund och botten är uppbyggda av tonvis av små, enkla funktioner, som stegvis utför allt mer komplexa uppgifter. Oavsett i vilket programmeringsspråk vi programmerar, så kommer vår kod att översättas till något som datorn kan fatta och utföra. I slutändan är det alltid [[maskinkod]], dvs processorns egna språk, som utför arbetet. Varje kodrad som återfinns i ett program kan resultera i en mängd operationer som måste genomföras för att uträtta det som kodraden beskriver. Till och med när man kör de enklaste programmen, så utför datorn myriader av operationer.

Datorn har ett väldigt litet antal kommandon som den klarar av att utföra. Varje programmeringsspråk har en uppsättning ord och regler som avgör vad språket "fattar" och kan utföra. Det är sällan mer än ca 100 grundfunktioner som finns i ett programmeringsspråk. När vi ska lösa våra problem måste vi formulera lösningar som enbart använder sig av dessa ord. 100 ord är inte så mycket, det är färre ord än en hund eller en tvååring kan förstå. Liksom när man försöker kommunicera med en hund eller en tvååring så kan det vara svårt att formulera lösningen till ett komplext problem enbart genom att använda sig av det starkt begränsat vokabulär man har att tillgå. Datorn har dock en fördel i jämförelse med hundar och små barn, den utför exakt vad du beordrar den att göra. Den gör vare sig mer eller mindre än det du säger åt den att göra (hur dumma eller felaktiga dina order än må vara).

I skrivandets stund har faktiskt JavaScript endast 46 "grundord". Dock har de flesta språk även så kallade standardbibliotek som innehåller extra funktionalitet. Denna extra funktionalitet består oftast i sånt som bara används för vissa typer av programmering. Det kan vara t.ex. filhantering för att skriva och läsa data. Det kanske inte alla program kräver och därför ligger det i ett bibliotek som vi kan inkludera. Allt eftersom vi programmerar utökar vi även vilka "ord" som finns att tillgå i vår kod.

När man programmerar går man igenom flera faser. Man börjar med att analysera det problem man vill lösa. Man försöker, om möjligt, att reducera problemet till flera, enklare delproblem. Därefter hittar man på lösningsförslag till varje delproblem och försöker sedan att kombinera dellösningarna till en komplett lösning som genomför allt man förväntade sig.

Programmering påminner lite om hur man löser vissa problem i matematiken, t.ex. såna där problem där "Lisa har tre äpplen, Per har två skohorn...". Man vet vad man har för startvillkor och man vet var man vill hamna – det svåra är att hitta vägen ifrån A till B. Ibland måste man ta en liten avkrok på vägen och klara av några delproblem, som förhoppningsvis kan ge ledning till hur man ska komma fram till slutlösningen. Även det som låter väldigt enkelt, kan bli krångligt och komplext när man ska uttrycka det som kod. Gillar du att lösa problem är programmering den ultimata utmaningen!

I tidiga faserna av programmering jobbar man ofta på papper. Man kanske ritar upp problemet, t.ex. med [http://sv.wikipedia.org/wiki/Fl%C3%B6desschema flödesdiagram]. Ett annat sätt för att beskriva lösningsförslag är att använda sig av så kallad [https://www.wikiwand.com/en/Pseudocode pseudokod]. Pseudokod är ett mer formaliserat sätt att sätta ord på programmeringslösningar. Det är en blandning av vanligt, mänskligt språk och programmeringsspråk. Det finns ingen standard för hur pseudokod ska se ut. Man skriver mer eller mindre i klartext hur lösningen ska fungera, steg för steg.

=== Algoritm ===
Problemlösningar av typen steg-för-steg, kallas för algoritm. Algoritmer känner du säkert igen ifrån matematiken. Den vanliga metoden för att lösa en andragradsekvation, PQ-formeln, är ett exempel på en algoritm. När man använder den formeln jobbar man steg för steg för att på ett generellt sätt lösa en andragradsekvation. Andra vardagsexempel på algoritmer kan vara matrecept, bygginstruktioner (typ sådana man får med IKEA-möbler) eller liknande.

I en algoritm är viktigt att man utför de olika stegen i rätt ordning, annars kommer resultatet inte att bli korrekt. Vanligtvis utför man stegen i en algoritm ett efter ett. Man börjar i toppen och går framåt rad för rad. Detta kallas att arbeta sekventiellt eller synkront. De flesta enkla datorprogram fungerar på detta sätt.

Ibland kan man ha en instruktion som säger att man ska hoppa över några rader om något speciellt villkor är uppfyllt. Detta kallar man ibland för selektion, dvs man väljer ut vilka rader som ska köras.

Det är också vanligt förekommande att man vill upprepa en, eller flera, rader i en algoritm, kanske upprepar man tills något villkor är uppfyllt. Detta kallas för iteration, eller upprepning.

Detta där är grundstenarna i programmering, men vi behöver en sak till. För att kunna beräkna saker måste vi även ha lagring. Vi måste på något vis kunna spara undan våra beräkningar.

Alla dessa begrepp sammantagna är grunden till programmering; lagring, sekvens, selektion och iteration. Har vi tillgång till dessa saker kan vi beräkna allt! (I alla fall allt som går att beräkna...) Detta är något som bevisats av [https://en.wikipedia.org/wiki/Alan_Turing Alan Turing] och [https://en.wikipedia.org/wiki/Alonzo_Church Alonzo Church]. Vi brukar kalla språk som har alla dessa finesser för [https://sv.wikipedia.org/wiki/Turingkomplett turingkompletta].

Programmering är oftast en iterativ process, där man jobbar med stegvis förfining. Vilket är ett halvkrångligt sätt att säga att man gör saker om och om igen, men man försöker förbättra resultatet varje gång. Ett exempel på det kan vara att man i första skedet skapar en algoritm som gör det den ska, utan att bry sig om hur snabbt algoritmen utför sitt arbete. I nästa iteration, eller upprepning, försöker man förbättra algoritmen så att den går snabbare. På så vis förbättrar man sitt program stegvis.

=== Exempel: Är ett heltal ett primtal? ===
Låt säga att vi ska kontrollera om ett heltal är ett primtal. När man ska lösa det problemet, kanske man går igenom en process som påminner om följande:

* Först måste vi ta reda på vad ett primtal är. På Wikipedia finns den här [https://www.wikiwand.com/sv/Primtal definitionen]:
<cite>"Ett primtal är ett heltal p, som är större än 1 och som bara är jämt delbart med ±1 och ±p"</cite>.
* Om man funderar lite kommer man fram till att man ”bara” behöver prova om talet är jämt delbart med något mellan 2 och (talet - 1). Ettan ska vi skippa eftersom allt är jämt delbart med 1. Vi kan stoppa när vi är ett steg under talet vi ska testa. För ett tal är ju alltid jämt delbart med sig själv.
* Vi uttrycker det med lite pseudokod:

<syntaxhighlight lang="JavaScript">
Sätt nämnare = 2
Medan nämnare är mindre än tal
Om tal / nämnare är jämt
Tal är ej primtal
Annars
Öka nämnare med 1
</syntaxhighlight>

* Vi kanske skapar ett flödesdiagram
[[Fil:PrimtalFlowchart.png]]
* Nu kan vi omvandla pseudokoden till JavaScript-kod
<syntaxhighlight lang="JavaScript">
function primtal(tal) {
let nämnare = 2;

while( nämnare < tal ) {
if( tal % nämnare == 0 ) {
return false;
}
}

return true;
}
</syntaxhighlight>
En relativt ineffektiv lösning (och lite buggig)…

Även om vi inte kan programmering så bra ännu, så går det faktiskt att läsa vad som händer i koden ovan. Om vi bortser från sådant vi kanske inte fattar just nu, som t.ex. <code>let</code> och <code>%</code> (den senare ger oss resten efter en heltalsdivision), ser vi att koden är rätt så lik vår pseudokod, med den stora skillnaden att sakerna står på halvengelska.

== Funktioner, metoder, osv ==
Vad vi skapade i föregående sektion är en funktion. Dessa fungerar ungefär som i matematiken när man skapar funktioner av typen ''f(x)''. Funktioner är ett sätt på vilket man kan skapa små dellösningar. Man skriver kodsnuttar som man sedan kan kombinera till större lösningar. Man skulle kunna säga att man utvidgar programmeringsspråket med just de specifika finesser som man själv behöver. Vi nämnde tidigare hur datorspråkens grundvokabulär oftast bara består av mindre än 100 ord. Varje gång man skapar en ny funktion (eller liknande) så utökar man detta vokabulär. Desto fler funktioner vi skapar, desto enklare blir det att beskriva den lösning man är ute efter. Allteftersom vi kodar skapar vi alltså ett språk som är mer anpassat till det vi vill lösa för tillfället.

I många fall går funktionerna även att återanvända när man skriver andra program. Som programmerare jobbar man ständigt på att utvidga sin verktygslåda med lösningar, algoritmer och funktioner. Det är alltså bra att försöka hålla sina funktioner så generella som möjligt, så att de går att återanvända. Varje gång du skapar en funktion som är återanvändbar, finns chansen att du besparar dig själv en massa onödigt arbete i framtiden! När du kommer ut i arbetslivet kommer säkerligen din arbetsplats att ha en uppsättning med bibliotek som används inom företaget. Självklart finns det även många bibliotek som du kan ladda ned från nätet för att få extra funktionalitet till dina program.

<div class="well well-meadow">
Kärt barn har många namn; det är också vanligt att kalla funktioner för metoder, rutiner eller subrutiner, osv. Även om det skiljer lite mellan den korrekta definitionen på hur man ska använda de olika namnen, så kan man säga att alla är godtagbara. Oavsett vilket namn du använder bör programmeringskunniga fatta vad du menar. Inom programmering är det rätt vanligt att samma saker har lite olika namn. Inom datorvärlden har vi även en tendens att använda svengelska termer för saker och ting. Detta gäller definitivt för oss programmerare!
</div>

== Satser ==
Uttrycket sats kommer ifrån matematikens och logikens värld. En sats är en utsaga som kan prövas. Vissa satser kan man använda för att beräkna saker - kanske du stött på binomialsatsen. Inom programmering är en sats en komplett utsaga som kan utföras. Lite förenklat kan man säga att varje rad i ett JavaScript-program är en sats (ibland delar man upp en sats på flera rader). Ett exempel på en sats i vår primtals-funktion är;

<syntaxhighlight lang="JavaScript">
let nämnare = 2;
</syntaxhighlight>

I den satsen skapar vi en variabel och vi ger den namnet <code>nämnare</code> samt att vi tilldelar den värdet <code>2</code>. Varje sats genomför oftast någon "enkel" deluppgift/delsteg i vår algoritm. Man kan självklart kalla detta för mycket annat än sats, t.ex. kodrad, programrad, uttryck, osv.

För att indikera var en sats avslutas skriver man oftast ett "<code>;</code>"-tecken. Så gott som alla programrader ska avslutas på detta vis. I modern JavaScript är inte "<code>;</code>"-tecknet helt nödvändigt. Istället kommer JavaScript att se en avslutad rad som en komplett sats. I de flesta fall är det dock enklare att se var satsen avslutas genom att skriva ett "<code>;</code>"-tecken.

== Kodblock; { och } ==
Kodexemplet med primtal innehöll antagligen några tecken som du inte är helt van vid att använda. Det gäller nog främst "<code>{</code>" och "<code>}</code>". Dessa är vanligt förekommande i de många programmeringsspråk. De kallas för klammerparenteser.

<div class="well well-meadow">
Klammerparenteser kan också heta klammer, måsvingar, braces, curly braces, osv. De senare är de engelska namnen på tecknen. Vi programmerare kör ofta med engelska eller snarare svengelska uttryck, vilket är rätt naturligt då de flesta programmeringsspråk är baserade på engelska. Engelskan är förstås programmeringens "modersmål", då de flesta språk baseras på engelska ord och så gott som all dokumentation först och främst (och kanske enbart) är skrivna på engelska.
</div>

Vad man än kallar klamrarna, så har de en mycket speciell betydelse i JavaScript (och många andra programmeringsspråk). De används för att definiera ett kodblock. Det vill säga man har ett antal sats-rader som ska hänga samman som en enda stor sats och som ska utföras tillsammans (de körs dock inte samtidigt, utan de utförs fortfarande sekventiellt). Det kan vara kod som enbart ska köras när något speciellt villkor är sant (en så kallad <code>if</code>-sats) eller kod som ska upprepas flera gånger (en så kallad slinga eller loop). Lägg märke till att block inte avslutas med ett "<code>;</code>"-tecken.

== Mer om primtalsexemplet ==
I vår kodsnutt hade vi även exempel på något av det mest grundläggande som behövs för programmering, nämligen variabler. Dessa används för att lagra värden. Speciellt viktigt är att vi kan lagra undan resultat och delresultat i våra beräkningar. Vi återkommer till variabler alldeles strax.

I koden hade vi även exempel på några av de mest centrala begreppen i programmering; upprepning och val. Eller för att använda fackspråk; iteration och selektion. Upprepning gör att vi kan köra en bit av vår programkod flera gånger. Medan val möjliggör att vi kan styra programflödet och köra olika kodbitar beroende på diverse villkor.

De flesta programmeringsproblemen går att reducera till lagring, upprepning och val. Som vi konstaterade tidigare så bevisade Alan Turing att just dessa grundkoncept är vad som krävs för att kunna beräkna allt som är beräkningsbart.

== Nästa aktivtet ==
[[Att skriva läsbar kod]]

Grunderna i JavaScript-programmering

2026-08-10T13:09:19Z

PGJ:

Här kommer vi att gå igenom programmering från scratch, så om du har lite kunskaper inom området behöver du antagligen bara behöva att snabbskumma igenom de första aktiviteterna i denna sektion...

<div class="well well-meadow">
Om du kan något annat programmeringsspråk i C-familjen (t.ex. C, C++, C# eller Java) kan du redan mycket av grunderna i JavaScript. Dessa språks grunder påminner mycket om varandra. Dock finns det en del skillnader, såsom hur man deklarerar variabler och dylikt. Det bör dock inte vara alltför svårt att sätta sig in i skillnaderna. Däremot finns det en hel del skillnader man måste lära sig om man vill skriva riktigt optimal kod.
</div>

== Vad är programmering? ==
Programmering är en typ av problemlösning där man tar fram en ”steg för steg”-beskrivning för hur datorn ska lösa ett problem eller en klass av problem. Datorerna är egentligen rätt dumma och kan enbart utföra väldigt grundläggande uppgifter, typ den enklaste matematiken. Däremot är datorer extremt snabba (och relativt tillförlitliga). På grund av denna snabbhet kan man skapa problemlösningar som i grund och botten är uppbyggda av tonvis av små, enkla funktioner, som stegvis utför allt mer komplexa uppgifter. Oavsett i vilket programmeringsspråk vi programmerar, så kommer vår kod att översättas till något som datorn kan fatta och utföra. I slutändan är det alltid [[maskinkod]], dvs processorns egna språk, som utför arbetet. Varje kodrad som återfinns i ett program kan resultera i en mängd operationer som måste genomföras för att uträtta det som kodraden beskriver. Till och med när man kör de enklaste programmen, så utför datorn myriader av operationer.

Datorn har ett väldigt litet antal kommandon som den klarar av att utföra. Varje programmeringsspråk har en uppsättning ord och regler som avgör vad språket "fattar" och kan utföra. Det är sällan mer än ca 100 grundfunktioner som finns i ett programmeringsspråk. När vi ska lösa våra problem måste vi formulera lösningar som enbart använder sig av dessa ord. 100 ord är inte så mycket, det är färre ord än en hund eller en tvååring kan förstå. Liksom när man försöker kommunicera med en hund eller en tvååring så kan det vara svårt att formulera lösningen till ett komplext problem enbart genom att använda sig av det starkt begränsat vokabulär man har att tillgå. Datorn har dock en fördel i jämförelse med hundar och små barn, den utför exakt vad du beordrar den att göra. Den gör vare sig mer eller mindre än det du säger åt den att göra (hur dumma eller felaktiga dina order än må vara).

I skrivandets stund har faktiskt JavaScript endast 46 "grundord". Dock har de flesta språk även så kallade standardbibliotek som innehåller extra funktionalitet. Denna extra funktionalitet består oftast i sånt som bara används för vissa typer av programmering. Det kan vara t.ex. filhantering för att skriva och läsa data. Det kanske inte alla program kräver och därför ligger det i ett bibliotek som vi kan inkludera. Allt eftersom vi programmerar utökar vi även vilka "ord" som finns att tillgå i vår kod.

När man programmerar går man igenom flera faser. Man börjar med att analysera det problem man vill lösa. Man försöker, om möjligt, att reducera problemet till flera, enklare delproblem. Därefter hittar man på lösningsförslag till varje delproblem och försöker sedan att kombinera dellösningarna till en komplett lösning som genomför allt man förväntade sig.

Programmering påminner lite om hur man löser vissa problem i matematiken, t.ex. såna där problem där "Lisa har tre äpplen, Per har två skohorn...". Man vet vad man har för startvillkor och man vet var man vill hamna – det svåra är att hitta vägen ifrån A till B. Ibland måste man ta en liten avkrok på vägen och klara av några delproblem, som förhoppningsvis kan ge ledning till hur man ska komma fram till slutlösningen. Även det som låter väldigt enkelt, kan bli krångligt och komplext när man ska uttrycka det som kod. Gillar du att lösa problem är programmering den ultimata utmaningen!

I tidiga faserna av programmering jobbar man ofta på papper. Man kanske ritar upp problemet, t.ex. med [http://sv.wikipedia.org/wiki/Fl%C3%B6desschema flödesdiagram]. Ett annat sätt för att beskriva lösningsförslag är att använda sig av så kallad [https://www.wikiwand.com/en/Pseudocode pseudokod]. Pseudokod är ett mer formaliserat sätt att sätta ord på programmeringslösningar. Det är en blandning av vanligt, mänskligt språk och programmeringsspråk. Det finns ingen standard för hur pseudokod ska se ut. Man skriver mer eller mindre i klartext hur lösningen ska fungera, steg för steg.

=== Algoritm ===
Problemlösningar av typen steg-för-steg, kallas för algoritm. Algoritmer känner du säkert igen ifrån matematiken. Den vanliga metoden för att lösa en andragradsekvation, PQ-formeln, är ett exempel på en algoritm. När man använder den formeln jobbar man steg för steg för att på ett generellt sätt lösa en andragradsekvation. Andra vardagsexempel på algoritmer kan vara matrecept, bygginstruktioner (typ sådana man får med IKEA-möbler) eller liknande.

I en algoritm är viktigt att man utför de olika stegen i rätt ordning, annars kommer resultatet inte att bli korrekt. Vanligtvis utför man stegen i en algoritm ett efter ett. Man börjar i toppen och går framåt rad för rad. Detta kallas att arbeta sekventiellt eller synkront. De flesta enkla datorprogram fungerar på detta sätt.

Ibland kan man ha en instruktion som säger att man ska hoppa över några rader om något speciellt villkor är uppfyllt. Detta kallar man ibland för selektion, dvs man väljer ut vilka rader som ska köras.

Det är också vanligt förekommande att man vill upprepa en, eller flera, rader i en algoritm, kanske upprepar man tills något villkor är uppfyllt. Detta kallas för iteration, eller upprepning.

Detta där är grundstenarna i programmering, men vi behöver en sak till. För att kunna beräkna saker måste vi även ha lagring. Vi måste på något vis kunna spara undan våra beräkningar.

Alla dessa begrepp sammantagna är grunden till programmering; lagring, sekvens, selektion och iteration. Har vi tillgång till dessa saker kan vi beräkna allt! (I alla fall allt som går att beräkna...) Detta är något som bevisats av [https://en.wikipedia.org/wiki/Alan_Turing Alan Turing] och [https://en.wikipedia.org/wiki/Alonzo_Church Alonzo Church]. Vi brukar kalla språk som har alla dessa finesser för [https://sv.wikipedia.org/wiki/Turingkomplett turingkompletta].

Programmering är oftast en iterativ process, där man jobbar med stegvis förfining. Vilket är ett halvkrångligt sätt att säga att man gör saker om och om igen, men man försöker förbättra resultatet varje gång. Ett exempel på det kan vara att man i första skedet skapar en algoritm som gör det den ska, utan att bry sig om hur snabbt algoritmen utför sitt arbete. I nästa iteration, eller upprepning, försöker man förbättra algoritmen så att den går snabbare. På så vis förbättrar man sitt program stegvis.

=== Exempel: Är ett heltal ett primtal? ===
Låt säga att vi ska kontrollera om ett heltal är ett primtal. När man ska lösa det problemet, kanske man går igenom en process som påminner om följande:

* Först måste vi ta reda på vad ett primtal är. På Wikipedia finns den här [https://www.wikiwand.com/sv/Primtal definitionen]:
<cite>"Ett primtal är ett heltal p, som är större än 1 och som bara är jämt delbart med ±1 och ±p"</cite>.
* Om man funderar lite kommer man fram till att man ”bara” behöver prova om talet är jämt delbart med något mellan 2 och (talet - 1). Ettan ska vi skippa eftersom allt är jämt delbart med 1. Vi kan stoppa när vi är ett steg under talet vi ska testa. För ett tal är ju alltid jämt delbart med sig själv.
* Vi uttrycker det med lite pseudokod:

<syntaxhighlight lang="JavaScript">
Sätt nämnare = 2
Medan nämnare är mindre än tal
Om tal / nämnare är jämt
Tal är ej primtal
Annars
Öka nämnare med 1
</syntaxhighlight>

* Vi kanske skapar ett flödesdiagram
[[Fil:PrimtalFlowchart.png]]
* Nu kan vi omvandla pseudokoden till JavaScript-kod
<syntaxhighlight lang="JavaScript">
function primtal(tal) {
let nämnare = 2;

while( nämnare < tal ) {
if( tal % nämnare == 0 ) {
return false;
}
}

return true;
}
</syntaxhighlight>
En relativt ineffektiv lösning (och lite buggig)…

Även om vi inte kan programmering så bra ännu, så går det faktiskt att läsa vad som händer i koden ovan. Om vi bortser från sådant vi kanske inte fattar just nu, som t.ex. <code>let</code> och <code>%</code> (den senare ger oss resten efter en heltalsdivision), ser vi att koden är rätt så lik vår pseudokod, med den stora skillnaden att sakerna står på halvengelska.

== Funktioner, metoder, osv ==
Vad vi skapade i föregående sektion är en funktion. Dessa fungerar ungefär som i matematiken när man skapar funktioner av typen ''f(x)''. Funktioner är ett sätt på vilket man kan skapa små dellösningar. Man skriver kodsnuttar som man sedan kan kombinera till större lösningar. Man skulle kunna säga att man utvidgar programmeringsspråket med just de specifika finesser som man själv behöver. Vi nämnde tidigare hur datorspråkens grundvokabulär oftast bara består av mindre än 100 ord. Varje gång man skapar en ny funktion (eller liknande) så utökar man detta vokabulär. Desto fler funktioner vi skapar, desto enklare blir det att beskriva den lösning man är ute efter. Allteftersom vi kodar skapar vi alltså ett språk som är mer anpassat till det vi vill lösa för tillfället.

I många fall går funktionerna även att återanvända när man skriver andra program. Som programmerare jobbar man ständigt på att utvidga sin verktygslåda med lösningar, algoritmer och funktioner. Det är alltså bra att försöka hålla sina funktioner så generella som möjligt, så att de går att återanvända. Varje gång du skapar en funktion som är återanvändbar, finns chansen att du besparar dig själv en massa onödigt arbete i framtiden! När du kommer ut i arbetslivet kommer säkerligen din arbetsplats att ha en uppsättning med bibliotek som används inom företaget. Självklart finns det även många bibliotek som du kan ladda ned från nätet för att få extra funktionalitet till dina program.

<div class="well well-meadow">
Kärt barn har många namn; det är också vanligt att kalla funktioner för metoder, rutiner eller subrutiner, osv. Även om det skiljer lite mellan den korrekta definitionen på hur man ska använda de olika namnen, så kan man säga att alla är godtagbara. Oavsett vilket namn du använder bör programmeringskunniga fatta vad du menar. Inom programmering är det rätt vanligt att samma saker har lite olika namn. Inom datorvärlden har vi även en tendens att använda svengelska termer för saker och ting. Detta gäller definitivt för oss programmerare!
</div>

== Satser ==
Uttrycket sats kommer ifrån matematikens och logikens värld. En sats är en utsaga som kan prövas. Vissa satser kan man använda för att beräkna saker - kanske du stött på binomialsatsen. Inom programmering är en sats en komplett utsaga som kan utföras. Lite förenklat kan man säga att varje rad i ett JavaScript-program är en sats (ibland delar man upp en sats på flera rader). Ett exempel på en sats i vår primtals-funktion är;

<syntaxhighlight lang="JavaScript">
let nämnare = 2;
</syntaxhighlight>

I den satsen skapar vi en variabel och vi ger den namnet <code>nämnare</code> samt att vi tilldelar den värdet <code>2</code>. Varje sats genomför oftast någon "enkel" deluppgift/delsteg i vår algoritm. Man kan självklart kalla detta för mycket annat än sats, t.ex. kodrad, programrad, uttryck, osv.

För att indikera var en sats avslutas skriver man oftast ett "<code>;</code>"-tecken. Så gott som alla programrader ska avslutas på detta vis. I modern JavaScript är inte "<code>;</code>"-tecknet helt nödvändigt. Istället kommer JavaScript att se en avslutad rad som en komplett sats. I de flesta fall är det dock enklare att se var satsen avslutas genom att skriva ett "<code>;</code>"-tecken.

== Kodblock; { och } ==
Kodexemplet med primtal innehöll antagligen några tecken som du inte är helt van vid att använda. Det gäller nog främst "<code>{</code>" och "<code>}</code>". Dessa är vanligt förekommande i de många programmeringsspråk. De kallas för klammerparenteser.

<div class="well well-meadow">
Klammerparenteser kan också heta klammer, måsvingar, braces, curly braces, osv. De senare är de engelska namnen på tecknen. Vi programmerare kör ofta med engelska eller snarare svengelska uttryck, vilket är rätt naturligt då de flesta programmeringsspråk är baserade på engelska. Engelskan är förstås programmeringens "modersmål", då de flesta språk baseras på engelska ord och så gott som all dokumentation först och främst (och kanske enbart) är skrivna på engelska.
</div>

Vad man än kallar klamrarna, så har de en mycket speciell betydelse i JavaScript (och många andra programmeringsspråk). De används för att definiera ett kodblock. Det vill säga man har ett antal sats-rader som ska hänga samman som en enda stor sats och som ska utföras tillsammans (de körs dock inte samtidigt, utan de utförs fortfarande sekventiellt). Det kan vara kod som enbart ska köras när något speciellt villkor är sant (en så kallad <code>if</code>-sats) eller kod som ska upprepas flera gånger (en så kallad slinga eller loop). Lägg märke till att block inte avslutas med ett "<code>;</code>"-tecken.

== Mer om primtalsexemplet ==
I vår kodsnutt hade vi även exempel på något av det mest grundläggande som behövs för programmering, nämligen variabler. Dessa används för att lagra värden. Speciellt viktigt är att vi kan lagra undan resultat och delresultat ifrån våra beräkningar. Vi återkommer till variabler alldeles strax.

I koden hade vi även exempel på några av de mest centrala begreppen i programmering; upprepning och val. Eller för att använda fackspråk; iteration och selektion. Upprepning gör att vi kan köra en bit av vår programkod flera gånger. Medan val möjliggör att vi kan styra programflödet och köra olika kodbitar beroende på diverse villkor. De flesta programmeringsproblem går att reducera till lagring, upprepning och val. Faktum är att matematikern Alan Turing bevisade att just dessa grundkoncept är vad som krävs för att kunna beräkna allt som är beräkningsbart.

== Nästa aktivtet ==
[[Att skriva läsbar kod]]

Grunderna i JavaScript-programmering

2026-08-10T12:48:08Z

PGJ:

Här kommer vi att gå igenom programmering från scratch, så om du har lite kunskaper inom området behöver du antagligen bara behöva att snabbskumma igenom de första aktiviteterna i denna sektion...

<div class="well well-meadow">
Om du kan något annat programmeringsspråk i C-familjen (t.ex. C, C++, C# eller Java) kan du redan mycket av grunderna i JavaScript. Dessa språks grunder påminner mycket om varandra. Dock finns det en del skillnader, såsom hur man deklarerar variabler och dylikt. Det bör dock inte vara alltför svårt att sätta sig in i skillnaderna. Däremot finns det en hel del skillnader man måste lära sig om man vill skriva riktigt optimal kod.
</div>

== Vad är programmering? ==
Programmering är en typ av problemlösning där man tar fram en ”steg för steg”-beskrivning för hur datorn ska lösa ett problem eller en klass av problem. Datorerna är egentligen rätt dumma och kan enbart utföra väldigt grundläggande uppgifter, typ den enklaste matematiken. Däremot är datorer extremt snabba (och relativt tillförlitliga). På grund av denna snabbhet kan man skapa problemlösningar som i grund och botten är uppbyggda av tonvis av små, enkla funktioner, som stegvis utför allt mer komplexa uppgifter. Oavsett i vilket programmeringsspråk vi programmerar, så kommer vår kod att översättas till något som datorn kan fatta och utföra. I slutändan är det alltid [[maskinkod]], dvs processorns egna språk, som utför arbetet. Varje kodrad som återfinns i ett program kan resultera i en mängd operationer som måste genomföras för att uträtta det som kodraden beskriver. Till och med när man kör de enklaste programmen, så utför datorn myriader av operationer.

Datorn har ett väldigt litet antal kommandon som den klarar av att utföra. Varje programmeringsspråk har en uppsättning ord och regler som avgör vad språket "fattar" och kan utföra. Det är sällan mer än ca 100 grundfunktioner som finns i ett programmeringsspråk. När vi ska lösa våra problem måste vi formulera lösningar som enbart använder sig av dessa ord. 100 ord är inte så mycket, det är färre ord än en hund eller en tvååring kan förstå. Liksom när man försöker kommunicera med en hund eller en tvååring så kan det vara svårt att formulera lösningen till ett komplext problem enbart genom att använda sig av det starkt begränsat vokabulär man har att tillgå. Datorn har dock en fördel i jämförelse med hundar och små barn, den utför exakt vad du beordrar den att göra. Den gör vare sig mer eller mindre än det du säger åt den att göra (hur dumma eller felaktiga dina order än må vara).

När man programmerar går man igenom flera faser. Man börjar med att analysera det problem man vill lösa. Man försöker, om möjligt, att reducera problemet till flera, enklare delproblem. Därefter hittar man på lösningsförslag till varje delproblem och försöker sedan att kombinera dellösningarna till en komplett lösning som genomför allt man förväntade sig.

Programmering påminner lite om hur man löser vissa problem i matematiken, t.ex. såna där problem där "Lisa har tre äpplen, Per har två skohorn...". Man vet vad man har för startvillkor och man vet var man vill hamna – det svåra är att hitta vägen ifrån A till B. Ibland måste man ta en liten avkrok på vägen och klara av några delproblem, som förhoppningsvis kan ge ledning till hur man ska komma fram till slutlösningen. Även det som låter väldigt enkelt, kan bli krångligt och komplext när man ska uttrycka det som kod. Gillar du att lösa problem är programmering den ultimata utmaningen!

I tidiga faserna av programmering jobbar man ofta på papper. Man kanske ritar upp problemet, t.ex. med [http://sv.wikipedia.org/wiki/Fl%C3%B6desschema flödesdiagram]. Ett annat sätt för att beskriva lösningsförslag är att använda sig av så kallad [https://www.wikiwand.com/en/Pseudocode pseudokod]. Pseudokod är ett mer formaliserat sätt att sätta ord på programmeringslösningar. Det är en blandning av vanligt, mänskligt språk och programmeringsspråk. Det finns ingen standard för hur pseudokod ska se ut. Man skriver mer eller mindre i klartext hur lösningen ska fungera, steg för steg.

=== Algoritm ===
Problemlösningar av typen steg-för-steg, kallas för algoritm. Algoritmer känner du säkert igen ifrån matematiken. Den vanliga metoden för att lösa en andragradsekvation, PQ-formeln, är ett exempel på en algoritm. När man använder den formeln jobbar man steg för steg för att på ett generellt sätt lösa en andragradsekvation. Andra vardagsexempel på algoritmer kan vara matrecept, bygginstruktioner (typ sådana man får med IKEA-möbler) eller liknande.

I en algoritm är viktigt att man utför de olika stegen i rätt ordning, annars kommer resultatet inte att bli korrekt. Vanligtvis utför man stegen i en algoritm ett efter ett. Man börjar i toppen och går framåt rad för rad. Detta kallas att arbeta sekventiellt eller synkront. De flesta enkla datorprogram fungerar på detta sätt.

Ibland kan man ha en instruktion som säger att man ska hoppa över några rader om något speciellt villkor är uppfyllt. Detta kallar man ibland för selektion, dvs man väljer ut vilka rader som ska köras.

Det är också vanligt förekommande att man vill upprepa en, eller flera, rader i en algoritm, kanske upprepar man tills något villkor är uppfyllt. Detta kallas för iteration, eller upprepning.

Detta där är grundstenarna i programmering, men vi behöver en sak till. För att kunna beräkna saker måste vi även ha lagring. Vi måste på något vis kunna spara undan våra beräkningar.

Alla dessa begrepp sammantagna är grunden till programmering; lagring, sekvens, selektion och iteration. Har vi tillgång till dessa saker kan vi beräkna allt! (I alla fall allt som går att beräkna...) Detta är något som bevisats av [https://en.wikipedia.org/wiki/Alan_Turing Alan Turing] och [https://en.wikipedia.org/wiki/Alonzo_Church Alonzo Church]. Vi brukar kalla språk som har alla dessa finesser för [https://sv.wikipedia.org/wiki/Turingkomplett turingkompletta].

Programmering är oftast en iterativ process, där man jobbar med stegvis förfining. Vilket är ett halvkrångligt sätt att säga att man gör saker om och om igen, men man försöker förbättra resultatet varje gång. Ett exempel på det kan vara att man i första skedet skapar en algoritm som gör det den ska, utan att bry sig om hur fort algoritmen utför sitt arbete. I nästa iteration, eller upprepning, försöker man förbättra algoritmen så att den går snabbare. På så vis förbättrar man sitt program stegvis.

=== Exempel: Är ett heltal ett primtal? ===
Låt säga att vi ska kontrollera om ett heltal är ett primtal. När man ska lösa det problemet, så kanske man går igenom en process som påminner om följande:

* Först måste vi ta reda på vad ett primtal är. På Wikipedia finns den här [https://www.wikiwand.com/sv/Primtal definitionen]: "Ett primtal är ett heltal p, som är större än 1 och som bara är jämt delbart med ±1 och ±p".
* Om man funderar lite kommer man fram till att man ”bara” behöver prova om talet är jämt delbart med något mellan 2 och (talet - 1). Ettan ska vi skippa och vi kan stoppa när vi är ett steg under talet vi ska testa.
* Vi uttrycker det med lite pseudokod:

<syntaxhighlight lang="JavaScript">
Sätt nämnare = 2
Medan nämnare är mindre än tal
Om tal / nämnare = jämt
Tal är ej primtal
Annars
Öka nämnare med 1
</syntaxhighlight>

* Vi kanske skapar ett flödesdiagram
[[Fil:PrimtalFlowchart.png]]
* Nu kan vi omvandla pseudokoden till JavaScript-kod
<syntaxhighlight lang="JavaScript">
function primtal(tal) {
let nämnare = 2;

while( nämnare < tal ) {
if( tal % nämnare == 0 ) {
return false;
}
}

return true;
}
</syntaxhighlight>
En relativt ineffektiv lösning (och lite buggig)… Även om vi inte kan programmering så bra ännu, så går det faktiskt att läsa vad som händer i koden ovan. Om vi bortser ifrån sådant vi inte fattar, som t.ex. <code>let</code> och <code>%</code> (den senare ger oss resten efter en heltalsdivision), ser vi att koden är rätt så lik vår pseudokod, med den stora skillnaden att sakerna står på halvengelska.

== Funktioner, metoder, osv ==
Vad vi skapade i föregående sektion är en funktion. Dessa fungerar ungefär som man gör i matematiken när man skapar funktioner av typen ''f(x)''. Funktioner är ett sätt på vilket man kan skapa små dellösningar. Man skriver kodsnuttar som man sedan kan kombinera till större lösningar. Man skulle kunna säga att man utvidgar programmeringsspråket med just de specifika finesser som man själv behöver. Vi nämnde tidigare hur datorspråkens grundvokabulär oftast bara består av runt 100 ord. Varje gång man skapar en ny funktion (eller liknande) så utökar man detta vokabulär. Desto fler funktioner vi skapar, desto enklare blir det att beskriva den lösning man är ute efter.

I många fall går funktionerna även att återanvända när man skriver andra program. Som programmerare jobbar man ständigt på att utvidga sin verktygslåda av lösningar, algoritmer och funktioner. Det är alltså bra att försöka hålla sina funktioner så generella som möjligt, så att de går att återanvända. Varje gång du skapar en funktion som är återanvändbar, finns chansen att du besparar dig själv en massa onödigt arbete i framtiden!

<div class="well well-meadow">
Kärt barn har många namn; det är också vanligt att kalla funktioner för metoder, rutiner eller subrutiner, osv. Även om det skiljer lite mellan den korrekta definitionen på hur man ska använda de olika namnen, så kan man säga att alla är godtagbara. Oavsett vilket namn du använder bör programmeringskunniga fatta vad du menar. Vi kommer att se så är det rätt vanligt inom programmering att saker har flera olika namn. Vi i datorvärlden har en tendens att använda svengelska termer för saker och ting. Detta gäller extra mycket för oss programmerare!
</div>

== Satser ==
Uttrycket sats kommer ifrån matematikens och logikens värld. En sats är där en utsaga som kan prövas. Vissa satser kan man använda för att beräkna saker - kanske du stött på binomialsatsen. Inom programmering är en sats en komplett utsaga som kan utföras. Lite förenklat kan man säga att varje rad i ett JavaScript-program är en sats (ibland delar man upp en sats på flera rader). Ett exempel på en sats i vår primtals-funktion är;

<syntaxhighlight lang="JavaScript">
let nämnare = 2;
</syntaxhighlight>

I den satsen skapar vi en variabel och vi ger den namnet <code>nämnare</code> samt att vi tilldelar den värdet <code>2</code>. Varje sats genomför oftast någon "enkel" deluppgift/delsteg i vår algoritm. Man kan självklart kalla detta för mycket annat än sats, t.ex. kodrad, programrad, uttryck, osv.

För att indikera var en sats avslutas skriver man ett "<code>;</code>"-tecken. Så gott som alla programrader ska avslutas på detta vis. Det finns ett fåtal undantag där man inte ska avsluta en programrad med ”<code>;</code>”. Vi återkommer till dessa längre fram...

Det är ett vanligt fel att man glömmer ett "<code>;</code>"-tecknet och då kommer kanske programmet inte att kunna köras korrekt. Vanligtvis är avsaknaden av "<code>;</code>" en av de första saker du ska kontrollera då ditt program inte vill köra. Här är dock JavaScript mindre känsligt än andra språk i C-familjen. Faktum är att man i många fall kan utelämna "<code>;</code>"-tecknet. Det är dock inte att rekommendera, det skapar bara dåliga ovanor att göra detta.

== Kodblock; { och } ==
Kodexemplet där vi kontrollerade om något är ett primtal innehöll antagligen några tecken som du inte är helt van vid att använda. Jag tänker främst på "<code>{</code>" och "<code>}</code>". Dessa är vanligt förekommande i de många programmeringsspråk. De kallas för klammerparenteser.

<div class="well well-meadow">
Klammerparenteser kan också heta klammer, måsvingar, braces, curly braces, osv. De senare är de engelska namnen på tecknen. Vi programmerare kör ofta med engelska eller snarare svengelska uttryck, vilket är rätt naturligt då de flesta programmeringsspråk är baserade på engelska. Engelskan är förstås programmeringens "modersmål", då språken baseras på engelska ord och så gott som all dokumentation först och främst (och kanske enbart) är skrivna på engelska.
</div>

Vad man än kallar klamrarna, så har de en mycket speciell betydelse i JavaScript (och många andra programmeringsspråk). De används för att definiera ett kodblock. Det vill säga man har ett antal sats-rader som ska hänga samman som en enda stor sats och som ska utföras tillsammans (de körs dock inte samtidigt, utan de utförs fortfarande sekventiellt). Det kan vara kod som enbart ska köras när något speciellt villkor är sant (en så kallad <code>if</code>-sats) eller kod som ska upprepas flera gånger (en så kallad slinga eller loop). Lägg märke till att block inte avslutas med ett "<code>;</code>"-tecken.

== Mer om primtalsexemplet ==
I vår kodsnutt hade vi även exempel på något av det mest grundläggande som behövs för programmering, nämligen variabler. Dessa används för att lagra värden. Speciellt viktigt är att vi kan lagra undan resultat och delresultat ifrån våra beräkningar. Vi återkommer till variabler alldeles strax.

I koden hade vi även exempel på några av de mest centrala begreppen i programmering; upprepning och val. Eller för att använda fackspråk; iteration och selektion. Upprepning gör att vi kan köra en bit av vår programkod flera gånger. Medan val möjliggör att vi kan styra programflödet och köra olika kodbitar beroende på diverse villkor. De flesta programmeringsproblem går att reducera till lagring, upprepning och val. Faktum är att matematikern Alan Turing bevisade att just dessa grundkoncept är vad som krävs för att kunna beräkna allt som är beräkningsbart.

== Nästa aktivtet ==
[[Att skriva läsbar kod]]

Introduktion till JavaScript

2026-08-10T12:31:02Z

PGJ:

När vi håller på med webbutveckling så finns det flera olika komponenter vi använder oss av. För dokumentstrukturen använder vi oss av [[HTML]], för utseende använder vi oss av [[CSS]] och när vi vill skapa interaktivitet så använder vi oss av [[JavaScript]].

[[JavaScript]] är ett [[scriptspråk]] som körs direkt i webbläsaren. Det ger oss tillgång till alla komponenter som bygger upp vår webbsida. Vi får så gott som fullkomlig kontroll över allt som har med sidan att göra. Det finns några inskränkningar på vad vi kan göra, främst utifrån ett säkerhetsperspektiv.
<div class="well well-danger">
Namnet till trots så har [[JavaScript]] ingenting att göra med [[Java]]. Det är ett helt annat språk!
</div>
== Historik ==
[[JavaScript]] är ett programmeringsspråk som introducerades 1995. Det skapades av [http://en.wikipedia.org/wiki/Brendan_Eich Brendan Eich] när denne jobbade på Netscape (vilket var ett företag som gjorde en mycket populär webbläsare; Netscape Navigator, vilken är föregångaren till dagens Firefox). Språket skapades väldigt snabbt och har fått utstå mycket kritik för att det inte var väldesignat från grunden. Trots detta blev det snabbt accepterat som standardspråket för att köra kod i webbsidor.

1997 standardiserades språket under namnet ECMAScript. ECMA är en standardiseringsorganisation som har hand om många olika datorstandarder. ECMAScript och JavaScript är mer eller mindre synonymt. Det vanligaste är dock att kalla det för just JavaScript, speciellt då man kör det i en webbläsare. Standarden har uppdaterats många gånger och det tillkommer ständigt nya finesser i språket. Från och med 2015 har standarden uppdaterats årligen. Dock tar det tid innan alla nya finesser letar sig in i webbläsarna.

Språket blev långt mer användbart när man skapade [[AJAX]], vilket är en metod som möjliggör att webbsidor kan interagera och kommunicera med servrar, t.ex. för att hämta information och visa upp den dynamiskt. De flesta större webbapplikationer använder sig av [[AJAX]], eller modernare metoder som [[Fetch]], t.ex. Facebook, GMail osv...

JavaScript är vanligt förekommande och kan numera köras i mer än webbsidor. Man kan skriva alla typer av applikationer med hjälp av JavaScript, mycket tack vare [[node.js]]. Det senare är en fristående JavaScript-"motor" som gör att man kan köra program utanför webbläsaren. På så vis kan man använda samma språk för att koda både för webbläsaren och server.

JavaScript var länge ett språk som hade dåligt rykte (vilket till viss del stämmer även idag). Dock ändrades detta något när Douglas Crockford publicerade sin bok "JavaScript - the Good Parts". Vilket i mångt och mycket ledde till en renässans för språket. En del av det dåliga ryktet beror på ålderstigna delar av språket. Till viss del har dessa delar förbättras i modernt JavaScript, men vissa konstigheter går inte att komma undan.

Kritiken till trots, om man använder JavaScript på ett korrekt vis är det ett mycket kapabelt språk.

== Kort om språket ==
(Här förekommer en del jargong som du kanske inte förstår om du inte programmerat förut, men förhoppningsvis kommer allt att klarna när du gått igenom allt sajtmaterial om JavaScript).

JavaScript är. som hörs på namnet, ett [[scriptspråk]]. Scriptspråk är oftast interpreterande, vilket även JavaScript är. Detta betyder att koden körs "direkt" utan att översättas till maskinkod. Man behöver alltså inte något program som översätter koden till datorns egna "språk", dvs maskinkod ([[compiler]]). Istället tolkas koden direkt från källkoden (I verkligheten är det inte riktigt så enkelt, JavaScript använder sig av [[JIT]] för att göra koden snabbare). Att koden körs direkt gör att det går mycket snabbt att testa sig fram, man kan ändra en rad, ladda om sidan och vips så körs koden på nytt.

JavaScript är ett svagt typat språk. Det betyder att man inte behöver ange datatyper när man skapar variabler. Istället försöker JavaScript "fatta" vad variabeln är till för och använda den på det mest troliga viset. I ena sekunden kan en variabel ses som att den innehåller ett numeriskt värde och i nästa kan den användas som en textsträng. Oftast går det snabbare att utveckla på grund av detta, men det kan även göra vissa typer av buggar mer svårupptäckta.

JavaScript är objektorienterat. Men om du är van med objektorientering från något annat språk, kommer du antagligen inte att känna igen dig. Man använder inte klasser för arv, utan istället använder man något som heter prototyper. Det fungerar dock lika bra som klasser, men man får tänka om lite (från och med ECMAScript 6 har språket även mer eller mindre "normala" klasser, men det är mer vanligt att man använder sig av protyper).

== Nästa aktivitet ==
[[Grunderna i JavaScript-programmering]]

[[Category:JavaScript]]
__FORCETOC__

Introduktion till JavaScript

2026-08-10T12:22:37Z

PGJ:

När vi håller på med webbutveckling så finns det flera olika komponenter vi använder oss av. För dokumentstrukturen använder vi oss av [[HTML]], för utseende använder vi oss av [[CSS]] och när vi vill skapa interaktivitet så använder vi oss av [[JavaScript]].

[[JavaScript]] är ett [[scriptspråk]] som körs direkt i webbläsaren. Det ger oss tillgång till alla komponenter som bygger upp vår webbsida. Vi får så gott som fullkomlig kontroll över allt som har med sidan att göra. Det finns några inskränkningar på vad vi kan göra, främst utifrån ett säkerhetsperspektiv.
<div class="well well-danger">
Namnet till trots så har [[JavaScript]] ingenting att göra med [[Java]]. Det är ett helt annat språk!
</div>
== Historik ==
[[JavaScript]] är ett programmeringsspråk som introducerades 1995. Det skapades av [http://en.wikipedia.org/wiki/Brendan_Eich Brendan Eich] när denne jobbade på Netscape (vilket var ett företag som gjorde en mycket populär webbläsare; Netscape Navigator, vilken är föregångaren till dagens Firefox). Språket skapades väldigt snabbt och har fått utstå mycket kritik för att det inte var väldesignat från grunden. Trots detta blev det snabbt accepterat som standardspråket för att köra kod i webbsidor.

1997 standardiserades språket under namnet ECMAScript. ECMA är en standardiseringsorganisation som har hand om många olika datorstandarder. ECMAScript och JavaScript är mer eller mindre synonymt. Det vanligaste är dock att kalla det för just JavaScript, speciellt då man kör det i en webbläsare. Standarden har uppdaterats många gånger och det tillkommer ständigt nya finesser i språket. Från och med 2015 har standarden uppdaterats årligen. Dock tar det tid innan alla nya finesser letar sig in i webbläsarna.

Språket blev långt mer användbart när man skapade [[AJAX]], vilket är en metod som möjliggör att webbsidor kan interagera och kommunicera med servrar, t.ex. för att hämta information och visa upp den dynamiskt. De flesta större webbapplikationer använder sig av [[AJAX]], eller modernare metoder som [[Fetch]], t.ex. Facebook, GMail osv...

JavaScript är vanligt förekommande och kan numera köras i mer än webbsidor. Man kan skriva alla typer av applikationer med hjälp av JavaScript, mycket tack vare [[node.js]]. Det senare är en fristående JavaScript-"motor" som gör att man kan köra program utanför webbläsaren. Vilket gör att man kan använda samma språk för att koda både i webbläsaren och på serversidan.

JavaScript var länge ett språk som hade dåligt rykte (vilket till viss del stämmer även idag). Dock ändrades detta något när Douglas Crockford publicerade sin bok "JavaScript - the Good Parts". Vilket i mångt och mycket ledde till en renässans för språket.

Kritiken till trots, om man använder JavaScript på ett korrekt vis är det ett mycket kapabelt språk.

== Kort om språket ==
(Här förekommer en del jargong som du kanske inte förstår om du inte programmerat förut, men förhoppningsvis kommer allt att klarna när du gått igenom allt sajtmaterial om JavaScript).

JavaScript är. som hörs på namnet, ett [[scriptspråk]]. Scriptspråk är oftast interpreterande, vilket även JavaScript är. Detta betyder att koden körs "direkt" utan att översättas till maskinkod. Man behöver alltså inte något program som översätter koden till datorns egna maskinkod ([[compiler]]), utan istället tolkas koden direkt ifrån källkoden (I verkligheten är det inte riktigt så enkelt, JavaScript använder sig av [[JIT]] för att göra koden snabbare). Att koden körs direkt gör att det går mycket snabbt att testa sig fram, man kan ändra en rad, klicka på reload och vips så körs koden.

JavaScript är ett svagt typat språk. Det betyder att man inte behöver ange datatyper när man skapar variabler. Istället försöker JavaScript "fatta" vad variabeln är till för och använda den på det mest troliga viset. I ena sekunden kan en variabel ses som den innehåller ett numeriskt tal och i nästa kan den användas som en textsträng. Oftast går det snabbare att utveckla på grund av detta, men det kan även göra vissa typer av buggar mer svårupptäckta.

JavaScript är objektorienterat. Men om du är van med objektorientering ifrån något annat språk, kommer du antagligen inte att känna igen dig. Man använder inte klasser för arv, utan istället använder man något som heter prototyper. Det fungerar dock lika bra som klasser, men man får tänka om lite (från och med ECMAScript 6 har språket även mer eller mindre "normala" klasser, men det är mer vanligt att man använder sig av protyper).

== Nästa aktivitet ==
[[Grunderna i JavaScript-programmering]]

[[Category:JavaScript]]
__FORCETOC__

Scriptspråk

2026-08-10T12:14:14Z

PGJ:

Scriptspråk, eller skriptspråk, är en typ av programmeringsspråk som inte kompileras, utan som i stället är direktexekverande (interpreterande). Det vill säga man kör inte ett program (kompilator) som omvandlar källkoden till maskinkod, istället tolkas och körs källkoden direkt.

Oftast går det snabbare att utveckla med skriptspråk, då det går fort att provköra och testa sig fram. Dock körs blir resultatet sällan lika snabbt som det blir med kompilerande språk.
[[Category:Termer]]
__FORCETOC__

Introduktion till JavaScript

2026-08-10T12:10:50Z

PGJ:

När vi håller på med webbutveckling så finns det flera olika komponenter vi använder oss av. För dokumentstrukturen använder vi oss av [[HTML]], för utseende använder vi oss av [[CSS]] och när vi vill skapa interaktivitet så använder vi oss av [[JavaScript]].

[[JavaScript]] är ett [[scriptspråk]] som körs direkt i webbläsaren. Det ger oss tillgång till alla komponenter som bygger upp vår webbsida. Vi får så gott som fullkomlig kontroll över allt som har med sidan att göra. Det finns några inskränkningar på vad vi kan göra, främst utifrån ett säkerhetsperspektiv.
<div class="well well-danger">
Namnet till trots så har [[JavaScript]] ingenting att göra med [[Java]]. Det är ett helt annat språk!
</div>
== Historik ==
[[JavaScript]] är ett programmeringsspråk som introducerades 1995. Det skapades av [http://en.wikipedia.org/wiki/Brendan_Eich Brendan Eich] när denne jobbade på Netscape (vilket var ett företag som gjorde en mycket populär webbläsare; Netscape Navigator, vilken är föregångaren till dagens Firefox). Språket skapades väldigt snabbt och har fått utstå mycket kritik för att det inte var väldesignat från grunden. Trots detta blev det snabbt accepterat som standardspråket för att köra kod i webbsidor.

1997 standardiserades språket under namnet ECMAScript. ECMA är en standardiseringsorganisation som har hand om många olika datorstandarder. ECMAScript och JavaScript är mer eller mindre synonymt. Det vanligaste är dock att kalla det för just JavaScript, speciellt då man kör det i en webbläsare. Standarden har uppdaterats många gånger och det tillkommer ständigt nya finesser i språket. Från och med 2015 har standarden uppdaterats årligen. Dock tar det tid innan alla nya finesser letar sig in i webbläsarna.

Språket blev långt mer användbart när man skapade [[AJAX]], vilket är en metod som möjliggör att webbsidor kan interagera och kommunicera med servrar, t.ex. för att hämta information och visa upp den dynamiskt. De flesta större webbapplikationer använder sig av [[AJAX]], eller den modernare metoden [[Fetch]], t.ex. Facebook, GMail osv...

JavaScript är vanligt förekommande och kan numera köras i mer än webbsidor. Man kan skriva alla typer av applikationer med hjälp av JavaScript, mycket tack vare [[node.js]]. Det senare är en fristående JavaScript-"motor" som gör att man kan köra program utanför webbläsaren. Vilket gör att man kan använda samma språk för att koda både i webbläsaren och på serversidan.

JavaScript var länge ett språk som hade dåligt rykte (vilket till viss del stämmer även idag). Dock ändrades detta något när Douglas Crockford publicerade sin bok "JavaScript - the Good Parts". Vilket i mångt och mycket ledde till en renässans för språket.

Kritiken till trots, om man använder JavaScript på ett korrekt vis är det ett mycket kapabelt språk.

== Kort om språket ==
(Här förekommer en del jargong som du kanske inte förstår om du inte programmerat förut, men förhoppningsvis kommer allt att klarna när du gått igenom allt sajtmaterial om JavaScript).

JavaScript är. som hörs på namnet, ett [[scriptspråk]]. Scriptspråk är oftast interpreterande, vilket även JavaScript är. Detta betyder att koden körs "direkt" utan att översättas till maskinkod. Man behöver alltså inte något program som översätter koden till datorns egna maskinkod ([[compiler]]), utan istället tolkas koden direkt ifrån källkoden (I verkligheten är det inte riktigt så enkelt, JavaScript använder sig av [[JIT]] för att göra koden snabbare). Att koden körs direkt gör att det går mycket snabbt att testa sig fram, man kan ändra en rad, klicka på reload och vips så körs koden.

JavaScript är ett svagt typat språk. Det betyder att man inte behöver ange datatyper när man skapar variabler. Istället försöker JavaScript "fatta" vad variabeln är till för och använda den på det mest troliga viset. I ena sekunden kan en variabel ses som den innehåller ett numeriskt tal och i nästa kan den användas som en textsträng. Oftast går det snabbare att utveckla på grund av detta, men det kan även göra vissa typer av buggar mer svårupptäckta.

JavaScript är objektorienterat. Men om du är van med objektorientering ifrån något annat språk, kommer du antagligen inte att känna igen dig. Man använder inte klasser för arv, utan istället använder man något som heter prototyper. Det fungerar dock lika bra som klasser, men man får tänka om lite (från och med ECMAScript 6 har språket även mer eller mindre "normala" klasser, men det är mer vanligt att man använder sig av protyper).

== Nästa aktivitet ==
[[Grunderna i JavaScript-programmering]]

[[Category:JavaScript]]
__FORCETOC__

Att skapa interaktivitet med Leaflet

2024-09-18T07:14:44Z

PGJ:

Vi får ju redan i grunden en del automatisk interaktivitet när vi använder oss av Leaflet. Användaren kan panorera och zooma runt i kartan. Vi ska nu titta på hur man kan lägga till mer saker som gör att användaren kan interagera med kartan.

== Popups ==
Popups är ett bra sätt att visa upp extra information som gäller för intressepunkter på kartan. Det finns bra stöd i Leaflet för detta och det är mycket enkelt att koppla popups till objekt som lagts till på kartan. Popup triggas igång och visas när användaren klickar på det objekt till vilket popup:en är kopplad.

<div class="well well-meadow">
Man kan bara ha en popup framme samtidigt. Om en popup redan är öppen och användaren klickar på en ny popup, så kommer den första popup:en att stängas ned. Om vi klickar en gång till på samma objekt ifrån vilket det öppnades en popup, så kommer den kopplade popup:en att stängas ned. Likaså försvinner popup:er även om vi klickar utanför det kopplade objektet, oavsett om en ny popup triggas igång eller ej. Självklart kan användaren även klicka på det lilla krysset i popup:en för att stänga denna.
</div>

=== Exempel ===
Vi utgår ifrån det sista exemplet i förra aktiviteten. Där ritade vi ut en polygon kring Soltorgsgymnasiet. Vi ska nu göra så att en popup med information dyker upp när vi klickar på polygonen. Det gör vi så här:
<codepen pen="pgedqJ" tab="js,result" height="650">
</codepen>

==== <code>bindPopup</code> ====
Vi behöver ha en instansvariabel som pekar på det kartobjekt som vi vill koppla vår popup till. I vårt exempel har vi sparat undan vårt objekt i <code>polygon</code>. I detta objekt finns en metod som heter <code>bindPopup</code> med vilken vi kan koppla till popup-funktionalitet.

I den enklaste varianten tar <code>bindPopup</code> en sträng som input. Strängen innehåller det som ska visas när användaren klickar. Strängens innehåll kommer att tolkas som HTML-kod. Vi kan alltså använda så gott som alla HTML-taggar här och på så vis bygga upp en relativt snygg popup. Vi skulle även kunna skicka med ett redan existerande HTML-element som då skulle visas i popup:en.

Vanligtvis utgår popup:ens position från den punkt där användaren klickade. Det går även att ange på vilken latitud och longitud som popup:en ska hamna. Dessa anges då som sista parametrar till metoden, t.ex.

<syntaxhighlight lang="JavaScript">
polygon.bindPopup("Hej", <latitud>, <longitud>);
</syntaxhighlight>

Denna variant kan vara bra att använda om du alltid vill att popup:en ska placeras på en likformig plats, oavsett vilken position som användaren klickar på. En orsak till att göra detta kan vara att man vill undvika att popup:en täcker viss information på kartan.

== Händelser ==
Vi kan även koppla så att kod körs när olika händelser inträffar. I stort sett fungerar detta som händelser vanligtvis gör när vi kodar mot webbläsaren. Vi kopplar en händelsehanterare till vald Leaflet komponent och den triggas igång när en händelse inträffar. Det finns flera olika händelsetyper. Några av dessa är unika för vissa typer av kartobjekt, medan andra är universiella och gäller för alla typer av kartobjekt. Vi kan inte täcka alla varianter här, så kolla gärna på [http://leafletjs.com/reference.html Leflets dokumentation] för att i detalj se vilka händelser som är tillgängliga för de olika objekttyperna.

==== Klickhändelser ====
Vi ska titta på hur man kan lägga till en händelse som triggas när användaren klickar på ett kartobjekt.
<codepen pen="gPmoYE" tab="js,result" height="875">
</codepen>

Den viktigaste kodraden är den där vi kopplar händelsen till vår händelsehanterarande funktion. Vi kan använda denna metod på de flesta typer av Leaflet-objekt. Precis som i fallet med [[jQuery]] tar metoden händelsetypen som första parameter. Den andra parametern är den funktion som vi vill ska triggas igång när händelsen inträffar.

Vår funktion <code>klickade</code> kommer alltså att köras när användaren klickar i vår polygon. I den kollar vi först vilken färg vår polygon har för tillfället. Vi kan komma åt alla utseende-inställningarna via <code>options</code>. I vårt fall vill vi alltså ta fram färgen, vilken vi kommer åt med <code>options.color</code>. Om denna är satt till gul, vilket den är från starten, ändrar vi den till röd. Metoden <code>setStyle</code> möjliggör alltså att vi kan gå in och redigera ett objekts utseende efter det att det har skapats. Dess inparameter är ett objekt som innehåller alla de inställningar vi vill förändra.

<div class="well well-meadow">
Lägg märke till att om du klickar flera gånger och råkar klicka för "fort", kommer dina klick inte att tas som en klickhändelse. Istället ses det som ett dubbelklick. Då körs förstås inte vår händelse-hanterare.

Så som exemplet ser ut nu, tar Leaflet ett dubbelklick som en zoom-gest.
</div>

== Nästa aktivitet ==
I nästa aktivitet ska vi gå igenom ett litet fylligare Leaflet-exempel.

[[En exempelapplikation i Leaflet]]

Att lägga till extra data med Leaflet

2024-09-18T07:09:29Z

PGJ:

Vi ska nu titta på några olika metoder för att lägga till markörer och liknande i våra kartor. Dessa kan användas för att t.ex. visa upp intressepunkter eller för att åskådliggöra statistik på ett geografiskt plan. Leaflet har många olika metoder som kan användas för detta.

== Att lägga till en markör ==
Som första exempel ska vi lägga till en markör i kartan. Denna markör kan användas för att markera var en intressepunkt finns. Ofta använder vi denna för att visa upp en specifik punkt som användaren sökt efter eller för att markera var något intressant finns. När man skrollar runt eller zooma runt i kartan, kan man lätt tappa bort vilken punkt det var man sökte efter och markören kan då hjälpa en att hitta tillbaka.

=== Exempel ===
Vi utgår från vårt tidigare exempel där vi visade upp var användaren befinner sig på en karta. Vi utökar det så att det läggs till en markör på den punkt där webbläsaren rapporterar att användaren finns. Kom ihåg att det finns en viss felmarginal som gör att den kanske inte placeras på den exakta positionen.

<codepen pen="PZpOGa" tab="js,result" height="1400">
</codepen>

=== <code>marker</code> ===
Den intressantaste kodraden ligger en bit ner i vår <code>VisaPosition</code>-funktion. Sist i denna har vi en ny rad som ser ut så här (den är utmärkt i exemplet med ett antal <code>=</code>-tecken):

<syntaxhighlight lang="JavaScript">
let marker = L.marker(koordinater).addTo(map);
</syntaxhighlight>

Vi kan alltså mycket enkelt lägga till en markör. Vi behöver bara kalla på <code>marker</code> och skicka med koordinaterna till den punkt som vi vill markera. Koordinaterna skickas i en array som innehåller latitud och longitud.

För att markören ska visas i kartan gör vi en <code>addTo</code> på slutet. Som inparameter tar den ett objekt som representerar den kartvy i vilken vi vill visa markören. Vi kan självklart ha olika kartvyer igång samtidigt.

== Att lägga till en cirkel ==
När vi jobbar med kartor vill vi ofta markera en hel region. Här kan det vara bra att kunna lägga till cirklar. Dessa är mycket användbara för att indikera saker som utsträckning, felmarginal eller liknande. Även dessa är lätta att skapa i Leaflet

=== Exempel ===
Som vi nämnde tidigare så får vi inte exakta positionsangivelser från webbläsaren. Vi kunde med hjälp av <code>accuracy</code>-värdet läsa ut felmarginalen. Vi skulle kunna använda denna information för att utöka föregående exempel med en cirkel som visar felmarginallen som gäller för mätningen. Det kan vi göra så här:

<codepen pen="jWBGjQ" tab="js,result" height="1500">
</codepen>

=== <code>circle</code> ===
Vi skapar cirkeln med metoden <code>circle</code>. Som inparameterar tar den först den koordinat som ska gälla som centrum för cirkeln. I vårt fall vill vi använda de koordinater som vi fick ut från webbläsarens positioneringsangivelse. Därefter föjer den radie som vi vill att cirkeln ska ha. Radien anges i meter. Vilket ju var samma enhet som <code>accuracy</code> rapporterades i. Vi kan alltså använda den rakt av.

==== Utritningsinställningar ====
Den sista parametern till <code>circle</code>-metoden anger inställningar för hur cirkeln ska ritas ut. Man kan sätta många olika saker här. Läs mer på [http://leafletjs.com/reference.html#path-options Path Options] om du vill se allt som går att göra. I vårt fall anger vi fyra saker, nämligen:
;<code>color</code>: Vilken färg ska cirkeln ha? Alla de färgangivelserna som är tillgängliga för CSS går att använda här. Se "[[Färg]]"-aktiviteten för mer information om CSS och färger. Defaultvärdet är <code>#03f</code>.
;<code>opacity</code>: Hur genomskinlig ska cirkelkanten vara? Anges som ett flyttal mellan <code>0</code>, helt genomskinlig, och <code>1</code>, helt ogenomskinlig. Det är alltså ett [[alfavärde]] och kan ses som en procentsats. Defaultvärdet är <code>0.5</code>.
;<code>fillColor</code>: Här anges den färg som cirkeln ska fyllas med, även här fungerar alla CSS-färgangivelser. Defaultvärdet är samma färg som cirkelramen. (Om man inte vill fylla cirkeln, kan man använda <code>fill: false</code>).
;<code>fillOpacity</code>:Hur genomskinlig ska fyllningen vara. Fungerar såsom <code>opacity</code> ovan. Defaultvärdet är <code>0.2</code>.

== Att lägga till en Polygon ==
En polygon är ju en månghörning. Med hjälp av polygoner kan vi markera regioner rätt så fritt. Vi kan ange så få eller så många hörnpunkter som vi vill. Den faktiska form som polygongen får styrs såväl av antalet hörnpunkter som av hörnpunkternas placering.
=== Exempel ===
Den här gången utgår vi från vårt tidigare exempel där vi visade upp Soltorgsgymnasiet i Borlänge. Nu ska vi rita en fyrhörning polygon runt skolan. Det kanske inte blir absolut rätt placering av hörnpunkterna, men det får duga som ett exempel.

<codepen pen="MKpOpW" tab="js,result" height="600">
</codepen>

=== <code>polygon</code> ===
Som vi ser i exemplet så ritar vi ut polygoner med hjälp av metoden <code>polygon</code>.
==== Hörnkoordinater ====
Den viktigaste parametern för denna metod är den första. Detta är en array som anger på vilka koordinater som polygonens hörn ska placeras ut. Koordinaterna är "vanliga" longitud- och latitud-angivelser. Mellan varje angiven hörnpunkt kommer det att ritas en linje. Från den första till den sista hörnpunkten ritas automatiskt en linje som sluter polygonen. Den slutna figuren som bildas av polygonen kommer till sist att fyllas med angiven färg.

==== Utritningsparametrar ====
Precis som i fallet med <code>circle</code>, kan vi skicka med ett objekt som innehåller diverse inställningar som styr hur utritningen ska gå till. Som tidigare finns <code>color</code>, <code>opacity</code> och <code>fillOpacity</code> med och dessa fungerar såsom beskrevs under <code>circle</code>-exemplet. Soltorgsgymnasiet ska förstås markeras ut med rejält gula färger!

Det vi lagt till extra här är <code>weight</code> som anger hur tjock den utritade linjen ska vara. I exemplet har vi satt den något fetare än normalt, defaultvärdet är <code>5</code>. Vi har med andra ord angett att linjen ska vara ungefär dubbelt så fet som normala linjer.

== Många fler möjligheter ==
Det finns långt många fler metoder i Leaflet än vi kan täcka här. Du kan läsa deras [http://leafletjs.com/reference.html API-referens] för att få mer information.

== Nästa aktivitet ==
Vi ska gå vidare med Leaflet och titta på hur man kan ge användaren tillfälle att interagera med kartan på olika vis.

[[Att skapa interaktivitet med Leaflet]]

Att lägga till extra data med Leaflet

2024-09-18T06:51:26Z

PGJ:

Vi ska nu titta på några olika metoder för att lägga till markörer och liknande i våra kartor. Dessa kan användas för att t.ex. visa upp intressepunkter eller för att åskådliggöra statistik på ett geografiskt plan. Leaflet har många olika metoder som kan användas för detta.

== Att lägga till en markör ==
Som första exempel ska vi lägga till en markör i kartan. Denna markör kan användas för att markera var en intressepunkt finns. Ofta använder vi denna för att visa upp en specifik punkt som användaren sökt efter eller för att markera var något intressant finns. När man skrollar runt eller zooma runt i kartan, kan man lätt tappa bort vilken punkt det var man sökte efter och markören kan då hjälpa en att hitta tillbaka.

=== Exempel ===
Vi utgår från vårt tidigare exempel där vi visade upp var användaren befinner sig på en karta. Vi utökar det så att det läggs till en markör på den punkt där webbläsaren rapporterar att användaren finns. Kom ihåg att det finns en viss felmarginal som gör att den kanske inte placeras på den exakta positionen.

<codepen pen="PZpOGa" tab="js,result" height="1400">
</codepen>

=== <code>marker</code> ===
Den intressantaste kodraden ligger en bit ner i vår <code>VisaPosition</code>-funktion. Sist i denna har vi en ny rad som ser ut så här (den är utmärkt i exemplet med ett antal <code>=</code>-tecken):

<syntaxhighlight lang="JavaScript">
let marker = L.marker(koordinater).addTo(map);
</syntaxhighlight>

Vi kan alltså mycket enkelt lägga till en markör. Vi behöver bara kalla på <code>marker</code> och skicka med koordinaterna till den punkt som vi vill markera. Koordinaterna skickas i en array som innehåller latitud och longitud.

För att markören ska visas i kartan gör vi en <code>addTo</code> på slutet. Som inparameter tar den ett objekt som representerar den kartvy i vilken vi vill visa markören. Vi kan självklart ha olika kartvyer igång samtidigt.

== Att lägga till en cirkel ==
När vi jobbar med kartor vill vi ofta markera en hel region. Här kan det vara bra att kunna lägga till cirklar. Dessa är mycket användbara för att indikera saker som utsträckning, felmarginal eller liknande. Även dessa är lätta att skapa i Leaflet

=== Exempel ===
Som vi nämnde tidigare så får vi inte exakta positionsangivelser från webbläsaren. Vi kunde med hjälp av <code>accuracy</code>-värdet läsa ut felmarginalen. Vi skulle kunna använda denna information för att utöka föregående exempel med en cirkel som visar felmarginallen som gäller för mätningen. Det kan vi göra så här:

<codepen pen="jWBGjQ" tab="js,result" height="1500">
</codepen>

=== <code>circle</code> ===
Vi skapar cirkeln med metoden <code>circle</code>. Som inparameterar tar den först den koordinat som ska gälla som centrum för cirkeln. I vårt fall vill vi använda de koordinater som vi fick ut från webbläsarens positioneringsangivelse. Därefter föjer den radie som vi vill att cirkeln ska ha. Radien anges i meter. Vilket ju var samma enhet som <code>accuracy</code> rapporterades i. Vi kan alltså använda den rakt av.

==== Utritningsinställningar ====
Den sista parametern till <code>circle</code>-metoden anger inställningar för hur cirkeln ska ritas ut. Man kan sätta många olika saker här. Läs mer på [http://leafletjs.com/reference.html#path-options Path Options] om du vill se allt som går att göra. I vårt fall anger vi fyra saker, nämligen:
;<code>color</code>: Vilken färg ska cirkeln ha? Alla de färgangivelserna som är tillgängliga för CSS går att använda här. Se "[[Färg]]"-aktiviteten för mer information om CSS och färger. Defaultvärdet är <code>#03f</code>.
;<code>opacity</code>: Hur genomskinlig ska cirkelkanten vara? Anges som ett flyttal mellan <code>0</code>, helt genomskinlig, och <code>1</code>, helt ogenomskinlig. Det är alltså ett [[alfavärde]] och kan ses som en procentsats. Defaultvärdet är <code>0.5</code>.
;<code>fillColor</code>: Här anges den färg som cirkeln ska fyllas med, även här fungerar alla CSS-färgangivelser. Defaultvärdet är samma färg som cirkelramen. (Om man inte vill fylla cirkeln, kan man använda <code>fill: false</code>).
;<code>fillOpacity</code>:Hur genomskinlig ska fyllningen vara. Fungerar såsom <code>opacity</code> ovan. Defaultvärdet är <code>0.2</code>.

== Att lägga till en Polygon ==
En polygon är ju en månghörning. Med hjälp av polygoner kan vi markera regioner rätt så fritt. Vi kan ange så få eller så många hörnpunkter som vi vill. Den faktiska form som polygongen får styrs såväl av antalet hörnpunkter som av hörnpunkternas placering.
=== Exempel ===
Den här gången utgår vi från vårt tidigare exempel där vi visade upp Soltorgsgymnasiet i Borlänge. Nu ska vi rita en fyrhörning polygon runt skolan. Det kanske inte blir absolut rätt placering av hörnpunkterna, men det får duga som ett exempel.

<codepen pen="MKpOpW" tab="js,result" height="600">
</codepen>

=== <code>polygon</code> ===
Polygoner ritas med hjälp av metoden <code>polygon</code>.
==== Hörnkoordinater ====
Den viktigaste parametern för denna metod är den första. Detta är en array som anger på vilka koordinater som polygonens hörn ska placeras ut. Koordinaterna är "vanliga" longitud- och latitud-angivelser. Mellan varje angiven hörnpunkt kommer det att ritas en linje. Mellan den första och den sista hörnpunkten ritas en linje som sluter polygonen. Den slutna figuren som bildas av polygonen kommer till sist att fyllas med angiven färg.

==== Utritningsparametrar ====
Precis som i fallet med <code>circle</code>, kan vi skicka med ett objekt som innehåller diverse inställningar som styr hur utritningen ska gå till. Som tidigare finns <code>color</code>, <code>opacity</code> och <code>fillOpacity</code> med och dessa fungerar såsom beskrevs under <code>circle</code>-exemplet. Soltorgsgymnasiet ska förstås markeras ut med rejält gula färger!

Det vi lagt till extra här är <code>weight</code> som anger hur tjock den utritade linjen ska vara. Här har vi satt den något fetare än normalt, defaultvärdet är <code>5</code>. Vi har med andra ord angett att linjen ska vara ungefär dubbelt så fet som normala linjer.

== Många fler möjligheter ==
Det finns långt många fler metoder i Leaflet än vi kan täcka här. Du kan läsa deras [http://leafletjs.com/reference.html API-referens] för att få mer information.

== Nästa aktivitet ==
Vi ska gå vidare med Leaflet och titta på hur man kan ge användaren tillfälle att interagera med kartan på olika vis.

[[Att skapa interaktivitet med Leaflet]]

Att komma igång med Leaflet

2024-09-18T06:48:47Z

PGJ:

Leaflet är öppen källkod och utvecklas med hjälp av ett community. Det fungerar bra tillsammans med alla vanligt förekommande webbläsare, såväl på skrivbordet som på mobila enheter. Det finns många olika plugins till biblioteket som kan användas för att lägga till ytterligare funktionalitet. På det hela taget är det enkelt att jobba med Leaflet.

== Att lägga till Leaflet ==
För att lägga till Leaflet behöver vi inkludera två filer - dels en CSS-fil, dels en JavaScript-fil. CSS-filen lägger vi till i vår sidas <code>head</code>. Följande kommer att ta ner nuvarande version av Leaflet. Kolla alltid deras webbsajt för att se om det kommit en nyare version.

<syntaxhighlight lang="html">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
</syntaxhighlight>

Detta är grundinställningar för den CSS som Leaflet behöver. Dessa CSS-regler kommer antagligen inte att störa den CSS som du själv lagt till sidan. Men du kan ju vara uppmärksam på om det händer något oväntat i din sida när du lägger till denna rad.

Därefter lägger vi till själva JavaScript-biblioteket. Man lägger oftast till detta någonstans i slutet av sidan, t.ex. strax före <code></body></code>. Var man än placerar den, så måste JavaScript-delen laddas in efter CSS-delen. Så det är bäst att lägga den i slutet av HTML-koden.

<syntaxhighlight lang="JavaScript">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>

</syntaxhighlight>

Med dessa två rader på plats kan vi skapa ett exempel.

== Leaflet-exempel ==
Låt säga att vi skulle vilja se var Soltorgsgymnasiet i Borlänge ligger. Då kunde vi göra som i följande exempel.

<codepen pen="adJmEj" tab="js,result" height="600">
</codepen>

(Som vanligt, kom ihåg att även titta på "Result"-fliken.)

Låt oss gå igenom exempelet och se vad de olika delarna gör för något.

=== HTML ===
I HTML-koden började vi med att lägga till CDN-hämtningarna som förser oss med Leaflet. Förutom detta så har vi skapat en tom <code>[[div]]</code> som fått ID:n <code>karta</code>. Här kommer vi att visa upp vår karta.

=== CSS ===
I CSS:en har vi inte gjort så mycket mer än att ge en storlek till den <code>div</code> som ska innehålla kartan. Viktigast är höjden, bredden kommer att sättas till 100 % om vi inte anger något annat. Anger vi ingen höjd kommer vår karta inte att synas. Detta är på grund av att <code>div</code>:en är helt tom och därmed får sin höjd satt till <code>0</code>.

=== JavaScript ===
I JavaScript-delen har vi gjort lite mer. Vi tar och går igenom detta i mer detalj.

==== Initiering av Leaflet ====
På den första raden skapar vi en karta och ställer vi in grunderna för den. Leaflet registreas som <code>L</code> när vi lägger till det. De flesta metoder som vi vill kalla på ligger alltså samlade i <code>L</code>-objektet.

<code>map</code> skapar en ny kartregion Som inparameter tar den ID:t för den <code>div</code> där kartan ska visas. Därefter talar vi om vilka koordinater som vi är intresserade av genom att anropa metoden <code>setView</code>. Som inparameterar tar denna en array med koordinaterna, först latitud och sen longitud. Vår karta kommer att centreras kring den angivna koordinaten. Den sista parametern anger vilken zoomfaktor som kartan ska visas upp med, desto högre tal desto längre inzoomade är vi.

==== Inställningar för datakälla ====
Vi måste nu ange varifrån all kartdata ska hämtas. Vi kommer att använda oss av Open Street Map.

==== Kart-tiles ====
Med <code>tileLayer</code> anger vi dels att kartan vi ska hämta består av karttiles. Där tiles mer eller mindre betyder mosaikbitar. Det vill säga, det är småbitar som bygger upp en större helhet och kartan kommer att laddas in som ett flertal mindre grafikfiler. Dessa kombineras och visas bredvid varandra och på så vis byggs den kompletta kartvyn upp. När vi skrollar runt i kartan så laddas enbart de nya tiles som behövs för att täcka den inskrollade arean. Dessa läggs intill redan befintliga tiles och gör vår kartvy komplett igen. Om vi skrollar tillbaka kommer de tiles som redan är nedladdade att användas. Zoomar vi in eller ut, måste förstås nya karttiles laddas in.

Hanteringen av karttiles gör att vi minimerar hur mycket data som måste hämtas när användaren skrollar runt i kartan. Denna teknik för karthämtning på webben uppfanns av Google när de skapade sin karttjänst Google Maps. Så gott som alla webbaserade karttjänster använder sig av liknande metoder.

Om vi redan laddat in en kartbit så kommer den att lagras i webbläsarens cache, vilket gör att den kommer att återanvändas nästa gång den kartbiten är aktuell. Det går med andra ord mycket snabbare att visa de kartbitar som redan är hämtade.

==== Att ange datakälla ====
Som första inparameter tar <code>tileLayers</code> en länk till den server som kommer att tillhandahålla vår kartdata. Därefter följer ett objekt som innehåller de inställningar som ska gälla för källan. I vårt exempel anger vi varifrån data hämtas.

<div class="well well-warning">
Kom ihåg att ett av kraven som ställdes för att få utnyttja Open Street Map i en applikation var att man angav vilken källa data hämtades ifrån. Det är alltså viktigt att ha med denna information, speciellt i applikationer som vi ska "visa" upp för världen.
</div>

==== Koppla data till vy ====
När vi skapat ett objekt som kan tillhandahålla oss med kartdata måste vi även länka detta till vår kartvy. Detta gör vi med det chainade metodanropet <code>addTo</code>. Som inparameter tar denna metod det objekt som vi fick tillbaka när vi körde <code>map</code>-metoden. Det vill säga det objekt som innehåller information om vår kartvy.

== Vår första karta ==
Om du klickar på "Resultat" bör du nu se vår första karta! Förutom att kartan visas upp, så har man automatiskt fått med en del finesser. Man kan panorera genom att dra runt kartan. Man kan zooma, antingen med "+/-"-knapparna eller via musens skrollhjul. I det nedre hörnet finns information om vad som används för att skapa/visa kartan - dvs Open Street Map och Leaflet. Länken till Open Street Map är nödvändig för att uppfylla användningsvillkoren för Open Street Maps. Så kom alltid ihåg att ha något liknande med!

== Kombination av våra geografiska exempel ==
Man skulle förstås kunna kombinera vårt nuvarande exempel med det som vi gjorde tidigare i "[[Att ta reda på var någon befinner sig]]"-aktiviteten. Ett sådant exempel skulle kunna tänkas se ut så här:
<codepen pen="pgeWKx" tab="js,result" height="1300">
</codepen>

Det finns väl inte så mycket att tillägga angående vad koden gör. I stort sett är allt det samma som i våra tidigare exempel, förutom att istället för att använda fasta koordinatvärden så visar vi istället upp en karta som centreras kring den punkt där webbläsaren anger att vi befinner oss.

Här kan det bli mer uppenbart om positionen är ett närmevärde. Prova gärna att köra exemplet både på din dator och på en mobil enhet som har GPS. Det borde märkas en väsentlig skillnad i precision på positionsangivelsen.

== Nästa aktivitet ==
I nästa aktivitet ska vi titta på hur man kan lägga ut diverse typer av extrainformation i kartor, vilket kan behövas om vi ska skapa appar som är baserade kring kartor och geografisk data.

[[Att lägga till extra data med Leaflet]]

Ännu en SPA med Leaflet

2024-08-12T08:59:59Z

PGJ:

Vi ska gå igenom hur man kan göra en variant på föregående SPA. Sveriges Radio har flera öppna API:er där man kan få tillgång till diverse data. Vi ska ta och titta närmare på deras API för trafikmeddelanden. Här kan man läsa ut information om de trafiksituationer som uppstår runt om i landet. Vi kan bland annat läsa ut är koordinater, titel och beskrivning. Sveriges Radios API:er kräver ingen [[API-nyckel]]. De supportar även [[CORS]] så vi kan hämta data direkt ifrån vår webbapplikation. Detta är alltså en utmärkt källa till exempeldata.

För denna app ska vi ha ett något annorlunda upplägg. Kartan visar var det finns trafikmeddelanden och när användaren för musen över dessa så visar vi information om datapunkten i ett informationsfönster.

== Vår applikation ==
Väldigt mycket av koden kommer att påminna om den som vi skrev för vår föregående [[SPA]], så vi kommer bara att gå igenom skillnaderna.

== HTML ==
<codepen pen="bErYzM" tab="html" height="500">
</codepen>

Den största skillnaden är att vi lägger till en extra <code>div</code> där vi ska visa information om vald trafiksituation. Vi delar upp ytan för trafikinformationen i två delar; en för kartan och en för textinformationen. Dessa ska vi sedan snygga till med lite CSS.

== CSS ==
<codepen pen="bErYzM" tab="css" height="700">
</codepen>

Vi sätter <code>info</code>-<code>div</code>:en till en flexbox, så att informationen som finns inuti den kommer att radas upp på samma rad. Vi väljer att de ska placeras ut likformigt med <code>jusitfy-content: space-around;</code>.

Vi sätter <code>#karta</code> och <code>#info</code> till samma storlek, så det blir att se proportionellt ut.

== JavaScript ==
<codepen pen="bErYzM" tab="js,result" height="1200">
</codepen>

I JavaScriptet har vi gjort en hel del ändringar...

=== Zoomnivå ===
Första zoomar ut kartan och centrerar den så vi ser det mesta av Sverige (i alla fall om det finns plats i vår webbläsare).

=== <code>hämtaTrafikmeddelande</code> ===
Vi döper om vår funktion avsedd för att hämta data till <code>hämtaTrafikmeddelande</code>. Även Sveriges Radios API är ett [[REST]]-API, så vi kan kalla på det med en "vanlig" URL. Den enda inparameter vi bryr oss om att skicka med är <code>format</code>, då vi vill ha data i JSON-format.

=== <code>AjaxKlar</code> ===
<code>AjaxKlar</code> är i det närmaste helt omskriven. Den data vi får ifrån Sveriges Radio är inte i GeoJSON. Vi får därför göra en egen loop som går igenom datan och behandlar varje post. För omväxlingens skull använder vi en anonym funktion denna gång.

Vi lägger först till en markör på den position som anges för trafikmeddelandet. Vi kopplar en popup till varje markör - när användaren klickar på markören kommer namnet på platsen att visas. Därefter binder vi några händelsehanterare till markören. Först en som kommer att triggas när användaren sätter muspekaren ovanför markören och sedan en som triggas när muspekaren avlägsnas från markören.

=== <code>MouseOver</code> ===
Till <code>MouseOver</code> skickar vi även med nuvarande trafikmeddelande. När funktionen triggas kommer <code>this</code> att vara satt till respektive trafikmeddelande. Vi kan nu läsa ut informationen om trafikmeddelandet och sätta respektive informationsfält till den data som vi vill visa upp.

=== <code>MouseOut</code> ===
<code>MouseOut</code> gör inte speciellt mycket mer än att den rensar informationsfälten.

== Nästa aktivitet ==
Vi är klara med sektionen som handlar om applikationer som körs i webbläsaren. Nu ska vi gå vidare och lära oss om hur man skapar serverapplikationer....

[[Node - En introduktion]]

[[Category: jQuery]]
[[Category: JavaScript]]

Ännu en SPA med Leaflet

2024-08-12T08:59:23Z

PGJ:

Vi ska gå igenom hur man kan göra en variant på föregående SPA. Sveriges Radio har flera öppna API:er där man kan få tillgång till diverse data. Vi ska ta och titta närmare på deras API för trafikmeddelanden. Här kan man läsa ut information om de trafiksituationer som uppstår runt om i landet. Vi kan bland annat läsa ut är koordinater, titel och beskrivning. Sveriges Radios API:er kräver ingen [[API-nyckel]]. De supportar även [[CORS]] så vi kan hämta data direkt ifrån vår webbapplikation. Detta är alltså en utmärkt källa till exempeldata.

För denna app ska vi ha ett något annorlunda upplägg. Kartan visar var det finns trafikmeddelanden och när användaren för musen över dessa så visar vi information om datapunkten i ett informationsfönster.

== Vår applikation ==
Väldigt mycket kommer att påminna om vår föregående [[SPA]], så vi kommer bara att gå igenom skillnaderna.

== HTML ==
<codepen pen="bErYzM" tab="html" height="500">
</codepen>

Den största skillnaden är att vi lägger till en extra <code>div</code> där vi ska visa information om vald trafiksituation. Vi delar upp ytan för trafikinformationen i två delar; en för kartan och en för textinformationen. Dessa ska vi sedan snygga till med lite CSS.

== CSS ==
<codepen pen="bErYzM" tab="css" height="700">
</codepen>

Vi sätter <code>info</code>-<code>div</code>:en till en flexbox, så att informationen som finns inuti den kommer att radas upp på samma rad. Vi väljer att de ska placeras ut likformigt med <code>jusitfy-content: space-around;</code>.

Vi sätter <code>#karta</code> och <code>#info</code> till samma storlek, så det blir att se proportionellt ut.

== JavaScript ==
<codepen pen="bErYzM" tab="js,result" height="1200">
</codepen>

I JavaScriptet har vi gjort en hel del ändringar...

=== Zoomnivå ===
Första zoomar ut kartan och centrerar den så vi ser det mesta av Sverige (i alla fall om det finns plats i vår webbläsare).

=== <code>hämtaTrafikmeddelande</code> ===
Vi döper om vår funktion avsedd för att hämta data till <code>hämtaTrafikmeddelande</code>. Även Sveriges Radios API är ett [[REST]]-API, så vi kan kalla på det med en "vanlig" URL. Den enda inparameter vi bryr oss om att skicka med är <code>format</code>, då vi vill ha data i JSON-format.

=== <code>AjaxKlar</code> ===
<code>AjaxKlar</code> är i det närmaste helt omskriven. Den data vi får ifrån Sveriges Radio är inte i GeoJSON. Vi får därför göra en egen loop som går igenom datan och behandlar varje post. För omväxlingens skull använder vi en anonym funktion denna gång.

Vi lägger först till en markör på den position som anges för trafikmeddelandet. Vi kopplar en popup till varje markör - när användaren klickar på markören kommer namnet på platsen att visas. Därefter binder vi några händelsehanterare till markören. Först en som kommer att triggas när användaren sätter muspekaren ovanför markören och sedan en som triggas när muspekaren avlägsnas från markören.

=== <code>MouseOver</code> ===
Till <code>MouseOver</code> skickar vi även med nuvarande trafikmeddelande. När funktionen triggas kommer <code>this</code> att vara satt till respektive trafikmeddelande. Vi kan nu läsa ut informationen om trafikmeddelandet och sätta respektive informationsfält till den data som vi vill visa upp.

=== <code>MouseOut</code> ===
<code>MouseOut</code> gör inte speciellt mycket mer än att den rensar informationsfälten.

== Nästa aktivitet ==
Vi är klara med sektionen som handlar om applikationer som körs i webbläsaren. Nu ska vi gå vidare och lära oss om hur man skapar serverapplikationer....

[[Node - En introduktion]]

[[Category: jQuery]]
[[Category: JavaScript]]

HTML5-taggar

2024-08-12T08:57:18Z

PGJ:

Här är en lista över alla [[tagg]]ar/[[HTML-element]] som är tillgängliga i [[HTML5]]. Om du är van med "uråldrig" [[HTML]], dvs före HTML5, finns det ett antal [[tagg]]ar som nu har annorlunda definition än tidigare.

När du ska använda en [[tagg]] måste den sitta inom "<code><</code>" och "<code>></code>". Så <code>[[a]]</code>-[[tagg]]en skrivs "<code><[[a]]></code>". För att avsluta behöver du oftast en [[sluttagg]]. Denna skrivs enligt samma mall som starttaggen, fast med ett <code>/</code> före taggnamnet. Så sluttaggen för vår exempeltagg skulle bli <code></a></code>. Se [[TLDR_Taggar|taggar-diagrammet]] för mer ingående information.

<div class="well well-warning">
Observera att [[HTML]] är en levande [[standard]], som utvecklas kontinuerligt. Det gör att det kan komma till [[tagg]]ar, det kan försvinna [[tagg]]ar och deras betydelse kan förändras med tiden. Följande taggar är dock tillgängliga i dagens HTML5.
</div>

== A ==
=== <code>[[a]]</code> ===
Används för att definiera länkar.
=== <code>[[abbr]]</code> ===
Definierar en förkortning och eventuellt en förklaring.
=== <code> [[address]] </code> ===
Kontaktinformation relaterad till den sektion som innehåller taggen.
=== <code> [[area]] </code> ===
Används i <code>[[map]]</code>-element för att definiera vilka regioner som är klickbara. Kan även koppla länkar till regionerna.
=== <code> [[article]] </code> ===
Markerar innehåll på sidan som är ett eget, självständig stycke.
=== <code> [[aside]] </code> ===
Markerar innehåll som är marginellt kopplat till huvudinnehållet.
=== <code> [[audio]] </code> ===
Används för att inkludera ljudinnehåll i en webbsida.

== B ==
=== <code> [[b]] </code> ===
Text som på något vis skiljer sig ifrån övrig text, t.ex. produktnamn eller något som ska stå ut ifrån annan text.
=== <code> [[base]] </code> ===
Definerar vilken grund-[[URL]] som ska användas för relativa länkar.
=== <code> [[bdi]] </code> ===
Används för att indikera text som kan skrivas i omvänd ordning, t.ex. Arabiska.
=== <code> [[bdo]] </code> ===
Används för att indikera text som ska skrivas i annan ordning, t.ex. för att växla mellan latinska språk och Arabiska och vice versa.
=== <code> [[blockquote]] </code> ===
Ett längre, blockcitat.
=== <code> [[body]] </code> ===
I denna finns själva innehållet på sidan.
=== <code> [[br]] </code> ===
Infogar en radbrytning.
=== <code> [[button]] </code> ===
En knapp i ett formulär.

== C ==
=== <code> [[canvas]] </code> ===
Definierar upp en region som skriptspråk kan använda för att rita figurer.
=== <code> [[caption]] </code> ===
Används för att ge en figurtext till en tabell.
=== <code> [[cite]] </code> ===
Används för att lägga till källhänvisning till ett citat.
=== <code> [[code]] </code> ===
Ett block med programkod.
=== <code> [[col]] </code> ===
En tabellkolumn.
=== <code> [[colgroup]] </code> ===
Används för att grupper ett antal kolumner i en tabell.

== D ==
=== <code> [[data]] </code> ===
Kopplar data till innehållet, som sedan kan användas av skript eller liknande.
=== <code> [[datalist]] </code> ===
Definierar en lista med alternativ för en [[input|<input>]]-kontroll.
=== <code> [[dd]] </code> ===
En förklaring till en term.
=== <code> [[del]] </code> ===
Markerar att text tagits bort ifrån ett dokument, t.ex. för att indikera att det redigerats. Ofta visas detta genom överstruken text.
=== <code> [[details]] </code> ===
Visar antingen mer information om någonting eller anger var man kan hitta mer information.
=== <code> [[dfn]] </code> ===
Definierar en term.
=== <code> [[div]] </code> ===
Används för att gruppera samman innehåll. Har ingen semantisk betydelse.
=== <code> [[dl]] </code> ===
En lista med termer och dess definition.
=== <code> [[dt]] </code> ===
En term som ska definieras.

== E ==
=== <code> [[em]] </code> ===
Innehållet innanför taggen ska betonas med emfas.
=== <code> [[embed]] </code> ===
Används för att infoga något slags extern komponent i webbsidan, t.ex. en plug-in.

== F ==
=== <code> [[fieldset]] </code> ===
Grupperar samman ett antal formulärkontroller.
=== <code> [[figcaption]] </code> ===
En förklarande text till en illustration/figur, ofta en bildtext.
=== <code> [[figure]] </code> ===
En egen sektion som på något vis illustrerar något i huvudsektionen, ofta en bild eller illustration.
=== <code> [[footer]] </code> ===
Material som ska vara med i sidfoten.
=== <code> [[form]] </code> ===
Påbörjar ett formulär.

== H ==
=== <code> [[hx|h1]] </code> ===
Översta rubriknivån. Denna ska enbart användas en gång per sektionselement.

=== <code> [[hx|h2]] </code> ===
Andra rubriknivån.
=== <code> [[hx|h3]] </code> ===
Tredje rubriknivån.

=== <code> [[hx|h4]] </code> ===
Fjärde rubriknivån.
=== <code> [[hx|h5]] </code> ===
Femte rubriknivån.
=== <code> [[hx|h6]] </code> ===
Sjätte rubriknivån.
=== <code> [[head]] </code> ===
Metadata om sidan, t.ex. sidonamn.
=== <code> [[header]] </code> ===
Material som ska vara med i sidhuvudet.
=== <code> [[hr]] </code> ===
Indikerar en brytning mellan två paragrafer.
=== <code> [[html-tagg|html]] </code> ===
Roten till HTML-dokumentet. Alla HTML-taggar måste ligga inuti denna.

== I ==
=== <code> [[i]] </code> ===
Text som på något vis skiljer sig ifrån övrig text, t.ex. tankar eller utländska ord.
=== <code> [[iframe]] </code> ===
Används för att infoga en webbsida i en annan webbsida.
=== <code> [[img]] </code> ===
Används för att lägga till en bild i en webbsida.
=== <code> [[input]] </code> ===
Används för olika typer av användarinmatning i formulär.
=== <code> [[ins]] </code> ===
Markerar att text lagts till i ett dokument, t.ex. för att indikera att det redigerats.

== K ==
=== <code> [[kbd]] </code> ===
Exempel på indata som en användare kan skriva in.
=== <code> [[keygen]] </code> ===
Används för att skicka med en publik nyckel för ett certifikat.

== L ==
=== <code> [[label]] </code> ===
Anger en rubrik för formulärkontroller.
=== <code> [[legend]] </code> ===
Anger en rubrik för formulärkontroller.
=== <code> [[li]] </code> ===
En post i en lista.
=== <code> [[link]] </code> ===
Definerar förhållanden mellan detta dokument och externa resurser. Används bl.a. för att länka till CSS-filer.

== M ==
=== <code> [[main]] </code> ===
Markerar vad som är sidans huvudinnehåll.
=== <code> [[map]] </code> ===
Definierar klickbara regioner i en grafisk bild.
=== <code> [[mark]] </code> ===
Markerar text på något vis, t.ex. för att markera upp sökta ord i en text.
=== <code> [[math]] </code> ===
Indikerar en region av mathml.
=== <code> [[menu]] </code> ===
Visar en lista över kommandon som kan genomföras.
=== <code> [[menuitem]] </code> ===
Ett kommando i en [[menu|<menu>]]-lista.

=== <code> [[meta]] </code> ===
Olika typer av metadata som inte det finns specifika taggar för.
=== <code> [[meter]] </code> ===
En mätare som visar och kan sätta ett valt värde mellan ett minimun och maximum.

== N ==
=== <code> [[nav]] </code> ===
Markerar innehåll som används för navigation.
=== <code> [[noscript]] </code> ===
Innehållet visas enbart om webbläsaren inte kan köra JavaScript.

== O ==
=== <code> [[object]] </code> ===
Indikerar en extern resurs som hanteras av en plug-in.
=== <code> [[ol]] </code> ===
En ordnad lista.
=== <code> [[optgroup]] </code> ===
Grupperar [[option]]-element i ett [[select]]-element.
=== <code> [[option]] </code> ===
Valbara element i ett [[select]]-element.
=== <code> [[output]] </code> ===
Används för att markera var i formuläret resultatet ifrån något slags beräkning/körning ska hamna.

== P ==
=== <code> [[p]] </code> ===
Ett textstycke.
=== <code> [[param]] </code> ===
Definierar parametrar till [[object]]-taggen.
=== <code> [[pre]] </code> ===
Förformaterad text, som inte ska formateras om av webbläsaren.
=== <code> [[progress]] </code> ===
Indikerar på något vis hur mycket som är genomfört.

== Q ==
=== <code> [[q]] </code> ===
Ett kortare citat i löpande text.

== R ==
=== <code> [[rp]] </code> ===
Används för att definiera hur ett tecken ska visas om det inte finns i teckensnittet, t.ex. för asiatiska språk. Används inuti [[rt]]-taggar.
=== <code> [[rt]] </code> ===
Används för att definiera det korrekta uttalet på asiatiska tecken, t.ex. kanji.
=== <code> [[ruby]] </code> ===
Används för att definiera det korrekta uttalet på asiatiska tecken, t.ex. kanji. Används inuti [[rt]]-taggar.

== S ==
=== <code> [[s]] </code> ===
Överstruken text, indikerar att innehållet inte längre är relevant.
=== <code> [[samp]] </code> ===
Exempel på utdata ifrån ett datorprogram.
=== <code> [[script-tagg|script]] </code> ===
Används för att lägga in eller ladda in ett [[skript]].
=== <code> [[section]] </code> ===
Grupperar samman en del av dokumentet.
=== <code> [[select]] </code> ===
Påbörjar en meny i ett formulär.
=== <code> [[small]] </code> ===
Finstilt innehåll, t.ex. copyright-information.
=== <code> [[source]] </code> ===
Används inuti [[video]]- och [[audio]]-taggar för att ange vilket material som ska spelas upp.
=== <code> [[span]] </code> ===
Markerar ett löptext som på något vis hör samman. Har ingen semantisk betydelse.
=== <code> [[strong]] </code> ===
Innehållet i taggen har stark betydelse.
=== <code> [[style]] </code> ===
Används för att inkludera [[CSS]]-kod i HTML-dokument.
=== <code> [[sub]] </code> ===
Nedsänkt text.
=== <code> [[summary]] </code> ===
Visar en kort beskrivning om datan i en [[details]]-tagg.
=== <code> [[sup]] </code> ===
Upphöjd text.
=== <code> [[svg]] </code> ===
Används för att infoga vektorgrafik av typen svg.

== T ==
=== <code> [[table]] </code> ===
Används för att skapa en tabell.
=== <code> [[tbody]] </code> ===
Används för att definiera huvudinnehållet i en tabell.
=== <code> [[td]] </code> ===
Markerar en tabellcell.
=== <code> [[textarea]] </code> ===
Ett redigerbart textfält.
=== <code> [[tfoot]] </code> ===
Används för att definiera tabellfoten i en tabell.
=== <code> [[th]] </code> ===
En tabellcell som är en rubrik.
=== <code> [[thead]] </code> ===
Används för att definiera tabellhuvudet i en tabell.
=== <code> [[time]] </code> ===
En tidsangivelse, tid eller datum.
=== <code> [[title]] </code> ===
Titeln på webbsidan.
=== <code> [[tr]] </code> ===
Markerar en tabellrad.
=== <code> [[track]] </code> ===
Används av [[video]] och [[audio]] för att lägga till olika typer av extra data, t.ex. för textning av en film.

== U ==
=== <code> [[u]] </code> ===
Text som på något vis kommenterar annan text, t.ex. för att indikera att något är felstavat.
=== <code> [[ul]] </code> ===
En oordnad lista.

== V ==
=== <code> [[var]] </code> ===
Ett variabelnamn, t.ex. för matematik eller programmering.
=== <code> [[video]] </code> ===
Används för att inkludera videoinnehåll i en webbsida.

== W ==
=== <code> [[wbr]] </code> ===
Markerar en plats i en text där det är ett bra tillfälle att göra en radbrytning om en sådan behövs.

Huvudsida

2024-08-09T16:31:04Z

PGJ:

<div class="well well-cocktail">
== Välkommen till Webbling ==

Webbling är en öppen lärresurs som är avsedd för dig som vill lära dig mer om [[Introduktion till webbteknik|webbteknik]], [[webbutveckling]] och [[Lär dig mer om JavaScript | programmering]]. Här kan du lära dig alltifrån hur man skapar enkla webbsidor till avancerade webbapplikationer och webbtjänster. Materialet är främst tänk för dig som går på gymnasiet och läser någon av kurserna inom webbteknik, programmering eller gränssnitt. Förhoppningen är dock att denna resurs kan vara till hjälp för alla som vill veta mer om hur man går tillväga med [[webbutveckling]] och [[Lär dig mer om JavaScript | programmering]].
</div>

<div class="card bg-light p-3">
<div class="card-title>
==Innehåll ==
</div>
<div class="card-text mb-0">
Här finner du [[referensmaterial]], t.ex. [[HTML5-taggar]] och [[CSS-egenskapslista|CSS-egenskaper]] samt mycket [[studiematerial]].
</div>
</div>
</div>

<div class="well well-meadow">
== Nyheter ==
Alla exempel som använde jQuery är nu omskrivna till plainJS.

jQuery-sektionen är märkt som föråldrad och kommer inte att uppdateras mer.

SPA-exemplen är uppdaterade så de fungerar som de ska.
</div>

<div class="well well-mango">

== Sponsorer ==
[[Webbutveckling]]sdelen och [[Referensmaterial | referensmaterialet]] angående webbtekniker sponsrades av [http://www.internetfonden.se/ Internetfonden].

Delarna om [[JavaScript]]-programmering, jQuery, Node.js och [[öppen data]] sponsrades av [http://vinnova.se/ Vinnova].

Webbling har delvis tagits fram för att användas som studiematerial vid [http://soltorgsgymnasiet.se Soltorgsgymnasiet] i Borlänge.
</div>

<div class="well well-concrete-light">

== Rättigheter ==
Allt material på Webbling kan delas i enlighet med följande;

[http://creativecommons.org/licenses/by-sa/4.0/ https://i.creativecommons.org/l/by-sa/4.0/88x31.png]<br>
Webbling av [mailto:pgj@gnulix.org Patrik Grip-Jansson] och [http://soltorgsgymnasiet.se Soltorgsgymnasiet] är licenserad under en [http://creativecommons.org/licenses/by-sa/4.0/ Creative Commons Erkännande-DelaLika 4.0 Internationell licens]
</div>
__NOTOC__

Huvudsida

2024-08-09T16:24:47Z

PGJ:

<div class="well well-cocktail">
== Välkommen till Webbling ==

Webbling är en öppen lärresurs som är avsedd för dig som vill lära dig mer om [[Introduktion till webbteknik|webbteknik]], [[webbutveckling]] och [[Lär dig mer om JavaScript | programmering]]. Här kan du lära dig alltifrån hur man skapar enkla webbsidor till avancerade webbapplikationer och webbtjänster. Materialet är främst tänk för dig som går på gymnasiet och läser någon av kurserna inom webbteknik, programmering eller gränssnitt. Förhoppningen är dock att denna resurs kan vara till hjälp för alla som vill veta mer om hur man går tillväga med [[webbutveckling]] och [[Lär dig mer om JavaScript | programmering]].
</div>

<div class="card well-hearts">

==Innehåll ==
Här finner du [[referensmaterial]], t.ex. [[HTML5-taggar]] och [[CSS-egenskapslista|CSS-egenskaper]] samt mycket [[studiematerial]].
</div>

<div class="well well-meadow">
== Nyheter ==
Alla exempel som använde jQuery är nu omskrivna till plainJS.

jQuery-sektionen är märkt som föråldrad och kommer inte att uppdateras mer.

SPA-exemplen är uppdaterade så de fungerar som de ska.
</div>

<div class="well well-mango">

== Sponsorer ==
[[Webbutveckling]]sdelen och [[Referensmaterial | referensmaterialet]] angående webbtekniker sponsrades av [http://www.internetfonden.se/ Internetfonden].

Delarna om [[JavaScript]]-programmering, jQuery, Node.js och [[öppen data]] sponsrades av [http://vinnova.se/ Vinnova].

Webbling har delvis tagits fram för att användas som studiematerial vid [http://soltorgsgymnasiet.se Soltorgsgymnasiet] i Borlänge.
</div>

<div class="well well-concrete-light">

== Rättigheter ==
Allt material på Webbling kan delas i enlighet med följande;

[http://creativecommons.org/licenses/by-sa/4.0/ https://i.creativecommons.org/l/by-sa/4.0/88x31.png]<br>
Webbling av [mailto:pgj@gnulix.org Patrik Grip-Jansson] och [http://soltorgsgymnasiet.se Soltorgsgymnasiet] är licenserad under en [http://creativecommons.org/licenses/by-sa/4.0/ Creative Commons Erkännande-DelaLika 4.0 Internationell licens]
</div>
__NOTOC__

En webbsidas anatomi

2024-08-06T14:34:42Z

PGJ:

Nu har vi gått igenom grundkoncepten bakom [[HTML]]. Men innan vi kan skapa vår första [[HTML]]-dokument, måste vi lära oss ett antal grundtaggar som ingår i alla [[HTML]]-dokument.

== Ett första webbdokument ==
Exemplet nedan är grunden för en minimal webbsida. Vi kommer att gå igenom vad varje kodrad i exemplet betyder. Var lugn, det är inte så krångligt som det kan se ut vid första anblicken...
<codepen pen="OVQPRz" height="300" tab="html,result">
</codepen>

Kan en sida bli tråkigare? Förhoppningsvis inte!

Nu tar vi och går igenom koden och undersöker vad de olika taggarna gör.

== [[doctype|<!doctype html>]] ==
Det här är den första grej som man måste ange i början av varje webbdokument. Det är den så kallade ”<code>[[doctype]]</code>”, vilket är en förkortning för engelskans ”Document Type” eller dokumenttyp. Denna tjänar som en indikation på vilken typ av dokument det handlar om, samt vilken [[HTML]]-[[standard]] som används i dokumentet. Detta gör att webbläsaren kan hantera alla [[tagg]]ar i ditt webbdokument på ett korrekt vis.

<code>[[doctype]]</code> ska anges allra först i ditt dokument, innan du använder dig av någon [[tagg]]. Den har lite speciellt utseende som skiljer sig från [[HTML]]-[[tagg]]arna och det finns heller ingen [[sluttagg]] för den. För [[HTML5]] är det väldigt enkelt att ange <code>[[doctype]]</code>, man skriver nämligen så här:

<syntaxhighlight lang="html5">
<!DOCTYPE html>
</syntaxhighlight>

Svårare än så är det inte. (Äldre versioner av HTML hade långa, krångliga varianter av <code>doctype</code>, men man beslöt sig att förenkla detta rejält i HTML5.)

<div class="well well-meadow">
Anledningen att <code>DOCTYPE</code> ser lite annorlunda ut är att det faktiskt inte är en egentlig HTML-tagg. Den är ett arv ifrån språket SGML. Vilket kan ses som en förfader till HTML. Dock är inte HTML kompatibelt med SGML längre. Den enda kvarlevan är <code>doctype</code>.
</div>

<div class="well well-danger">
Du bör inte utelämna <code>doctype</code>, för då kommer inte alla webbläsare att fatta att ditt dokument är ett [[HTML5]]-dokument. Istället finns chansen att webbläsaren kommer att försöka tolka det enligt någon gammal standard eller gå in i så kallad ”[[quirks mode]]” – vilket antagligen kommer att göra att din sida visas på något konstigt sätt och den kanske inte alls får den funktionalitet som du förväntade dig.
</div>

== <code><[[html-tagg|html]]></code> ==
Den första, riktiga [[tagg]]en vi måste ha med är <code><[[html-tagg|html]]></code>. Detta är en inledande [[tagg]] som talar om för webbläsaren var [[HTML]]-innehållet börjar. [[Tagg]]en ska sitta före alla andra [[tagg]]ar, förutom <code>[[doctype]]</code>. Sluttaggen <code></[[html-tagg|html]]></code> ska ska vara den sista [[sluttagg]]en i dokumentet, eftersom den "talar om" att det är slut på [[HTML]]-koden.
<div class="well well-danger">
Det får endast förekomma ett <code>[[HTML]]</code>-element i varje webbdokument. Det enda möjliga undantaget där man har flera <code>[[HTML]]</code>-element i en webbsida är när man inkluderar en annan sida via <code>[[iframe]]</code>. Detta är dock ett specialfall där webbläsaren ser den inkluderade sidan som ett helt separat HTML-dokument (vilket det också är).

Det finns några fler taggar som bara får förekomma en gång i varje webbdokument. De flesta taggar får dock användas flera gånger i samma sida.
</div>

<div class="well well-meadow">
=== <code><[[HTML]]></code> är roten till hela sidan ===
När webbläsaren ska tolka ditt webbsida, kommer den att bygga upp en datatyp som kallas för ett träd. Detta träd representerar ditt webbdokuments struktur. De olika [[element]]en kommer att bli grenar på trädet. Roten på trädet är <code>[[HTML-tagg|HTML]]</code>-elementet, utifrån detta sprids underliggande [[element]] som grenar. Därför kallas ibland <code>[[html]]</code>-elementet även för rot-elementet.

Vi återkommer till träd-konceptet när vi tittar närmare på [[DOM]] – eller ”[[Document Object Model]]”.
</div>

== <code><[[head]]></code> ==
Inom [[tagg]]en <code><[[head]]></code> placerar man så kallad [[metadata]] om dokumentet. Det är den data som beskriver dokumentet och dess innehåll. Det här är information som är till för webbläsaren/sökmotorer och liknande, snarare än att det är till för slutanvändaren. Sånt som man kan hitta här är t.ex.; vilken [[teckenkodning]] som används på sidan, länkar till andra dokument som krävs för att visa sidan korrekt (såsom [[CSS]]-filer), namnet på den som skapat sidan, sökord, osv.

Det finns några [[tagg]]ar som enbart får förekomma inom <code>[[head]]</code>-elementet. Så gott som alla undertaggar i <code>[[head]]</code>-element är icke-visuella, dvs de innehåller ingenting som kommer att visas för slutanvändaren när sidan skapas.

Så här i början behöver vi inte bry oss i de flesta av de möjliga undertaggarna som kan förekomma i <code>head</code>.
<div class="well well-danger">
Det får bara finnas ett [[head]]-element i varje dokument.
</div>

== <code><[[title]]></code> ==
<code>[[head]]</code>-elementet har en undertagg som är visuell, dvs den kommer att visas för slutanvändaren. Det är taggen ”<code><[[title]]></code>”. Vilket alltså är sidans namn/titel. Titeln på sidan kommer att visas antingen som namnet på ett webbläsarfönster eller som namnet på en flik i webbläsaren. En bra titel gör det lättare för användaren att navigera bland flikarna i dennes webbläsare.

Titeln visas inte bara i webbläsaren, den är även grunden för det namn väljas när användaren skapar ett bokmärke till sidan. Återigen är det en god vana att ange en bra titel som ger ett vettigt grundnamn för bokmärket. På så vis får användaren ett bokmärke som är lätt att identifiera, utan att behöva redigera bokmärkesnamnet.

Det är alltså viktigt att välja sidnamn på ett bra sätt.

<div class="well well-meadow">
=== Att välja sidtitel ===
När man ska välja ett sidnamn bör man försöka få med de absolut viktigaste orden redan i början av namnet. Det finns flera anledningar till detta, bland annat:

* När sidnamnet visas på en flik så kommer det ofta att klippas av mitt i. Desto fler flikar man har, desto mindre blir flikytan där namnet ska visas. Vill man att det ska vara lätt hitta rätt flik, gäller det alltså att ha ett kort och kärnfullt namn.

* När användaren skapar ett bokmärke, utgår webbläsaren oftast ifrån sidans titel som namn för bokmärket. Om titeln är för lång, kan det hända att bokmärkesnamnet kapas av mitt i. Står det då inte någonting med mycket informationsinnehåll, är chansen liten att användaren kommer att komma ihåg vad sidan handlade om.

Ett vanligt fel är att döpa sin sida till något i stil med, ”Välkommen till min fin, fina sida”. Eftersom det är så vanligt med frasen ”Välkommen”, är chansen stor att användaren får en drös av flikar där det bara syns ”Välkommen” eller, ännu värre, en massa bokmärken där det bara står ”Välkommen”.

I många fall kan det även vara dumt att skriva saker som ens firmanamn som första delen i titeln. Återigen kan det bli massa flikar/bokmärken där bara ”Murres webbshop” eller liknande syns. Försök därför att inleda titeln med ett eller två ord som verkligen beskriver sidans innehåll. Det är iofs inget fel att ha sitt firmanamn som sidtitel, men se i så fall till att det är den ”första” sidan på din sajt som har den titeln och att du har specialiserade namn på undersidorna.

Ovanstående problem var tidigare mycket vanligt förekommande på tidningarnas webbsidor. Men det har alltmer förändrats. Nu för tiden är t.ex. Aftonbladet förstasida benämnd ”Aftonbladet: Sveriges nyhetskälla och mötesplats”, medan de olika undersidornas titlar är uppbyggda efter mallen ”Nyhetsnamn | Kategori | Aftonbladet”. Det vill säga, man bygger upp titeln genom att sätta det mest specifika först och därefter blir titeln allt mer generell. Detta är ett mycket bra sätt att namnge sina sidor på.

Titeln kan även vara viktig för så kallad [[SEO]] – eller [[Search Engine Optimization]]. Detta innebär att man försöker optimera sidan så att sidan hamnar så tidigt som möjligt bland sökresultaten på söksidor, såsom Google. Att hamna bland de första sökresultaten innebär att det är mycket större chans att folk kommer att besöka sidan. De flesta vill ju ha så många besökare som möjligt på sin sida – inte minst om man har finansiell vinning av besökare, kanske genom att visa reklam på sidan eller för att man försöker sälja en produkt av något slag.

Så, redan här, där vi har den första [[tagg]]en där du kan sätta något eget innehåll, ser man att man måste tänka sig för innan man skapar sin webbplats. Det är inte bara att sätta igång och börja tok-koda, utan man måste planera och tänka sig för redan i förväg. Mycket förarbete och planering, innan själva kodandet, är en bra metodik som man tjänar på i längden!
</div>

== <code><[[meta]]></code> ==
<code>[[Meta]]</code>-element används inuti <code>[[head]]</code>-elementet. Dessa är till för att beskriva dokumentets innehåll. Det finns en mängd olika saker som kan anges i <code>[[meta]]</code>-elementen, vi ska dock enbart titta på ett just nu.

Man bör alltid ange vilken [[teckenkodning]] som används i ett dokument. Om man inte gör det kan webbläsaren få problem med att tolka innehållet i dokumentet på ett korrekt vis. [[Teckenkodning]] är ett komplext område och det förtjänar sin egen sektion. För tillfället väljer vi att ange att vårt dokument är kodat med [[UTF-8]]. Detta är den idag vanligaste [[teckenkodning]]sstandarden och det används i de flesta webbverktygen (skulle t.ex. dina svenska ”åäö” bli att se konstiga ut, beror det säkerligen på att någonting i utvecklingskedjan använder sig av ”fel” [[teckenkodning]]).

För att ange [[UTF-8]] i vårt webbdokument, skriver vi:

<syntaxhighlight lang="html5">
<meta charset=”utf-8”>
</syntaxhighlight>

Vi anger då att det är ett <code>[[meta]]</code>-element och vi anger att vi vill sätt [[attribut]]et <code>charset</code>. Det senare är en förkortning av engelskans ”character set”, eller teckenuppsättning.

<div class="well well-warning">
<code>[[Meta]]</code>-elementen brukar man ''inte'' stänga med en avslutande sluttagg. En del använder sig av [[självstängande-tagg]]ar i detta fall. Men det är varken nödvändigt eller rekommenderat för HTML5.
</div>

== <code><[[body]]></code> ==
Nu har vi lämnat <code>[[head]]</code>-elementet och det är dag för nästa viktiga [[tagg]], vilken är <code><[[body]]></code>. Allt i detta [[element]] är själva sid-kroppen. Här samlas allt det innehåll som ska visas på sidan. Så gott som alla [[element]] som definieras innanför <code><[[body]]></code> styr på något vis dokumentets struktur och följaktligen även hur det ska återges. Man skulle kunna säga att <code>[[body]]</code>-elementets innehåll är själva sidan, i alla fall den visuella delen. Så gott som alla [[HTML]]-[[tagg]]ar går att använda inuti <code>[[body]]</code>, förutom ett litet fåtal som enbart ska användas i <code>[[head]]</code>-elementet.

<div class="well well-danger">
Det får enbart förekomma ett <code>[[body]]</code>-element i varje dokument. Om du vill dela upp dokumentet i underdokument, får du antingen göra olika webbsidor eller använda dig av någon av de olika [[tagg]]ar som finns för att sektionera upp innehållet på en sida.
</div>

== <code><[[hx|h1]]></code> ==
Även om vi angivit en titel i vårat <code>[[head]]</code>-element, så vill vi oftast ha en titel som syns även i själva sidan (och inte enbart på fliken eller fönstret). För överskrifter eller huvudrubriker använder vi oss av <code>[[hx|h1]]</code>-taggen. ”H” står i detta fall för engelskans ”header”, eller rubrik på svenska. Siffran som följer efter talar om vilken rubriknivå det handlar om. Det finns sex möjliga rubriknivåer att tillgå, dvs; <code><[[hx|h1]]></code>, <code><[[hx|h2]]></code>, <code><[[hx|h3]]></code>, <code><[[hx|h4]]></code>, <code><[[hx|h5]]></code> och <code><[[hx|h6]]></code>. Har du jobbat med något ordbehandlingsprogram och använt deras stilmallar är rubriknivåer säkert inget nytt koncept för dig.

Rubrikerna ska användas i stigande ordning och de ska förekomma i en konsekvent serie. Vi ska t.ex. aldrig ange en <code><[[hx|h2]]></code> utan att ha en <code><[[hx|h1]]></code>. Inte heller ska vi hoppa över någon rubriknivå, t.ex. att gå ifrån <code><[[hx|h2]]></code> direkt till <code><[[hx|h4]]></code>. Rubriknivåerna bygger upp en logisk struktur för vårat dokument och vi kan lätt se vilka underrubriker som tillhör respektive huvudrubriker, precis såsom du bygger upp en logisk struktur då du skriver en uppsats.

<code>[[hx|H1]]</code>-elementet är lite speciellt. Tidigare fick det enbart förekomma en gång per [[HTML]]-dokument. Numera, i och med [[HTML5]], får det dock användas mer flitigt. Allt material som är helt avskilt ifrån övrigt material kan ha en egen <code>[[hx|h1]]</code>-rubrik. Den kan till exempel användas i sidhuvud, sidfot, underartiklar eller i en egen sektion.

<div class="well well-danger">
Det är väldigt viktigt att komma ihåg att man inte ska använda sig av <code>[[hx]]</code>-elementen (eller något annat [[element]]) enbart för att ge ett specifik utseende till något. [[Tagg]]arna är till för strukturen och inte för utseendet. Om du vill ha stor text ska du inte använda en <code>[[hx]]</code>-tagg, utan istället använder du dig av t.ex. <code><[[span]]></code> och skapar en [[CSS]]-regel som anger att innehållet i <code>[[span]]</code>-elementet ska ha större text. Om du ska jobba inom webbranschen bör du veta att det anses som en dödssynd att använda [[tagg]]ar för utseendets skull!
</div>

== Sammanfattning ==
[[Fil:tldr1.png]]

== Övningar ==
[[En webbsidas anatomi övningar]]

== Nästa aktivitet ==
[[Våra första webbsidor]]

[[Category:Webbutveckling]]

En webbsidas anatomi

2024-08-06T14:28:21Z

PGJ:

Nu har vi gått igenom grundkoncepten bakom [[HTML]]. Men innan vi kan skapa vår första [[HTML]]-dokument, måste vi lära oss ett antal grundtaggar som ingår i alla [[HTML]]-dokument.

== Ett första webbdokument ==
Exemplet nedan är grunden för en minimal webbsida. Vi kommer att gå igenom vad varje kodrad i exemplet betyder. Var lugn, det är inte så krångligt som det kan se ut vid första anblicken...
<codepen pen="OVQPRz" height="300" tab="html,result">
</codepen>

Kan en sida bli tråkigare? Förhoppningsvis inte!

Nu tar vi och går igenom koden och undersöker vad de olika taggarna gör.

== [[doctype|<!doctype html>]] ==
Det här är den första grej som man måste ange i början av varje webbdokument. Det är den så kallade ”<code>[[doctype]]</code>”, vilket är en förkortning för engelskans ”Document Type” eller dokumenttyp. Denna tjänar som en indikation på vilken typ av dokument det handlar om, samt vilken [[HTML]]-[[standard]] som används i dokumentet. Detta gör att webbläsaren kan hantera alla [[tagg]]ar i ditt webbdokument på ett korrekt vis.

<code>[[doctype]]</code> ska anges allra först i ditt dokument, innan du använder dig av någon [[tagg]]. Den har lite speciellt utseende som skiljer sig ifrån [[HTML]]-[[tagg]]arna och det finns heller ingen [[sluttagg]] för den. För [[HTML5]] är det väldigt enkelt att ange <code>[[doctype]]</code>, man skriver nämligen så här:

<syntaxhighlight lang="html5">
<!DOCTYPE html>
</syntaxhighlight>

Svårare än så är det inte. (Äldre versioner av HTML hade långa, krångliga varianter av <code>doctype</code>, men man beslöt sig att förenkla detta rejält inför HTML5.)

<div class="well well-meadow">
Anledningen att <code>DOCTYPE</code> ser lite annorlunda ut är att det faktiskt inte är en egentlig HTML-tagg. Den är ett arv ifrån språket SGML. Vilket kan ses som rötterna till HTML. Dock är inte HTML kompatibelt med SGML längre. Den enda kvarlevan är <code>doctype</code>.
</div>

<div class="well well-danger">
Du bör inte utelämna <code>doctype</code>, för då kommer inte alla webbläsare att fatta att ditt dokument är ett [[HTML5]]-dokument. Istället finns chansen att webbläsaren kommer att försöka tolka det enligt någon gammal standard eller gå in i så kallad ”[[quirks mode]]” – vilket antagligen kommer att göra att din sida visas på något konstigt sätt och den kanske inte alls får den funktionalitet som du förväntade dig.
</div>

== <code><[[html-tagg|html]]></code> ==
Den första, riktiga [[tagg]]en vi måste lära oss är <code><[[html-tagg|html]]></code>. Detta är en inledande [[tagg]] som talar om för webbläsaren var [[HTML]]-innehållet börjar. [[Tagg]]en ska sitta före alla andra [[tagg]]ar, förutom <code>[[doctype]]</code>, och dess motsvarande [[sluttagg]] ska ska sitta som den sista [[sluttagg]]en i dokumentet.
<div class="well well-danger">
Det får endast förekomma ett <code>[[HTML]]</code>-element i varje webbdokument. Det enda möjliga undantaget där man har flera <code>[[HTML]]</code>-element i en webbsida är när man inkluderar en annan sida via <code>[[iframe]]</code>. Detta är dock ett specialfall där webbläsaren ser den inkluderade sidan som ett helt separat HTML-dokument (vilket det också är).

Det finns några fler taggar som bara får förekomma en gång i varje webbdokument. De flesta taggar får dock användas flera gånger i samma sida.
</div>

<div class="well well-meadow">
=== <code><[[HTML]]></code> är roten till hela sidan ===
När webbläsaren ska tolka ditt webbsida, kommer den att bygga upp en datatyp som kallas för ett träd. Detta träd representerar ditt webbdokuments struktur. De olika [[element]]en kommer att bli grenar på trädet. Roten på trädet är <code>[[HTML-tagg|HTML]]</code>-elementet, utifrån detta sprids underliggande [[element]] som grenar. Därför kallas ibland <code>[[html]]</code>-elementet även för rot-elementet.

Vi återkommer till träd-konceptet när vi tittar närmare på [[DOM]] – eller ”[[Document Object Model]]”.
</div>

== <code><[[head]]></code> ==
Inom [[tagg]]en <code><[[head]]></code> placerar man så kallad [[metadata]] om dokumentet. Det är den data som beskriver dokumentet och dess innehåll. Det här är information som är till för webbläsaren/sökmotorer och liknande, snarare än att det är till för slutanvändaren. Sånt som man kan hitta här är t.ex.; vilken [[teckenkodning]] som används på sidan, länkar till andra dokument som krävs för att visa sidan korrekt (såsom [[CSS]]-filer), namnet på den som skapat sidan, sökord, osv.

Det finns några [[tagg]]ar som enbart får förekomma inom <code>[[head]]</code>-elementet. Så gott som alla undertaggar i <code>[[head]]</code>-element är icke-visuella, dvs de innehåller ingenting som kommer att visas för slutanvändaren när sidan skapas.

Så här i början behöver vi inte bry oss i de flesta av de möjliga undertaggarna som kan förekomma i <code>head</code>.
<div class="well well-danger">
Det får bara finnas ett [[head]]-element i varje dokument.
</div>

== <code><[[title]]></code> ==
<code>[[head]]</code>-elementet har en undertagg som är visuell, dvs den kommer att visas för slutanvändaren. Det är taggen ”<code><[[title]]></code>”. Vilket alltså är sidans namn/titel. Titeln på sidan kommer att visas antingen som namnet på ett webbläsarfönster eller som namnet på en flik i webbläsaren. En bra titel gör det lättare för användaren att navigera bland flikarna i dennes webbläsare.

Titeln visas inte bara i webbläsaren, den är även grunden för det namn väljas när användaren skapar ett bokmärke till sidan. Återigen är det en god vana att ange en bra titel som ger ett vettigt grundnamn för bokmärket. På så vis får användaren ett bokmärke som är lätt att identifiera, utan att behöva redigera bokmärkesnamnet.

Det är alltså viktigt att välja sidnamn på ett bra sätt.

<div class="well well-meadow">
=== Att välja sidtitel ===
När man ska välja ett sidnamn bör man försöka få med de absolut viktigaste orden redan i början av namnet. Det finns flera anledningar till detta, bland annat:

* När sidnamnet visas på en flik så kommer det ofta att klippas av mitt i. Desto fler flikar man har, desto mindre blir flikytan där namnet ska visas. Vill man att det ska vara lätt hitta rätt flik, gäller det alltså att ha ett kort och kärnfullt namn.

* När användaren skapar ett bokmärke, utgår webbläsaren oftast ifrån sidans titel som namn för bokmärket. Om titeln är för lång, kan det hända att bokmärkesnamnet kapas av mitt i. Står det då inte någonting med mycket informationsinnehåll, är chansen liten att användaren kommer att komma ihåg vad sidan handlade om.

Ett vanligt fel är att döpa sin sida till något i stil med, ”Välkommen till min fin, fina sida”. Eftersom det är så vanligt med frasen ”Välkommen”, är chansen stor att användaren får en drös av flikar där det bara syns ”Välkommen” eller, ännu värre, en massa bokmärken där det bara står ”Välkommen”.

I många fall kan det även vara dumt att skriva saker som ens firmanamn som första delen i titeln. Återigen kan det bli massa flikar/bokmärken där bara ”Murres webbshop” eller liknande syns. Försök därför att inleda titeln med ett eller två ord som verkligen beskriver sidans innehåll. Det är iofs inget fel att ha sitt firmanamn som sidtitel, men se i så fall till att det är den ”första” sidan på din sajt som har den titeln och att du har specialiserade namn på undersidorna.

Ovanstående problem var tidigare mycket vanligt förekommande på tidningarnas webbsidor. Men det har alltmer förändrats. Nu för tiden är t.ex. Aftonbladet förstasida benämnd ”Aftonbladet: Sveriges nyhetskälla och mötesplats”, medan de olika undersidornas titlar är uppbyggda efter mallen ”Nyhetsnamn | Kategori | Aftonbladet”. Det vill säga, man bygger upp titeln genom att sätta det mest specifika först och därefter blir titeln allt mer generell. Detta är ett mycket bra sätt att namnge sina sidor på.

Titeln kan även vara viktig för så kallad [[SEO]] – eller [[Search Engine Optimization]]. Detta innebär att man försöker optimera sidan så att sidan hamnar så tidigt som möjligt bland sökresultaten på söksidor, såsom Google. Att hamna bland de första sökresultaten innebär att det är mycket större chans att folk kommer att besöka sidan. De flesta vill ju ha så många besökare som möjligt på sin sida – inte minst om man har finansiell vinning av besökare, kanske genom att visa reklam på sidan eller för att man försöker sälja en produkt av något slag.

Så, redan här, där vi har den första [[tagg]]en där du kan sätta något eget innehåll, ser man att man måste tänka sig för innan man skapar sin webbplats. Det är inte bara att sätta igång och börja tok-koda, utan man måste planera och tänka sig för redan i förväg. Mycket förarbete och planering, innan själva kodandet, är en bra metodik som man tjänar på i längden!
</div>

== <code><[[meta]]></code> ==
<code>[[Meta]]</code>-element används inuti <code>[[head]]</code>-elementet. Dessa är till för att beskriva dokumentets innehåll. Det finns en mängd olika saker som kan anges i <code>[[meta]]</code>-elementen, vi ska dock enbart titta på ett just nu.

Man bör alltid ange vilken [[teckenkodning]] som används i ett dokument. Om man inte gör det kan webbläsaren få problem med att tolka innehållet i dokumentet på ett korrekt vis. [[Teckenkodning]] är ett komplext område och det förtjänar sin egen sektion. För tillfället väljer vi att ange att vårt dokument är kodat med [[UTF-8]]. Detta är den idag vanligaste [[teckenkodning]]sstandarden och det används i de flesta webbverktygen (skulle t.ex. dina svenska ”åäö” bli att se konstiga ut, beror det säkerligen på att någonting i utvecklingskedjan använder sig av ”fel” [[teckenkodning]]).

För att ange [[UTF-8]] i vårt webbdokument, skriver vi:

<syntaxhighlight lang="html5">
<meta charset=”utf-8”>
</syntaxhighlight>

Vi anger då att det är ett <code>[[meta]]</code>-element och vi anger att vi vill sätt [[attribut]]et <code>charset</code>. Det senare är en förkortning av engelskans ”character set”, eller teckenuppsättning.

<div class="well well-warning">
<code>[[Meta]]</code>-elementen brukar man ''inte'' stänga med en avslutande sluttagg. En del använder sig av [[självstängande-tagg]]ar i detta fall. Men det är varken nödvändigt eller rekommenderat för HTML5.
</div>

== <code><[[body]]></code> ==
Nu har vi lämnat <code>[[head]]</code>-elementet och det är dag för nästa viktiga [[tagg]], vilken är <code><[[body]]></code>. Allt i detta [[element]] är själva sid-kroppen. Här samlas allt det innehåll som ska visas på sidan. Så gott som alla [[element]] som definieras innanför <code><[[body]]></code> styr på något vis dokumentets struktur och följaktligen även hur det ska återges. Man skulle kunna säga att <code>[[body]]</code>-elementets innehåll är själva sidan, i alla fall den visuella delen. Så gott som alla [[HTML]]-[[tagg]]ar går att använda inuti <code>[[body]]</code>, förutom ett litet fåtal som enbart ska användas i <code>[[head]]</code>-elementet.

<div class="well well-danger">
Det får enbart förekomma ett <code>[[body]]</code>-element i varje dokument. Om du vill dela upp dokumentet i underdokument, får du antingen göra olika webbsidor eller använda dig av någon av de olika [[tagg]]ar som finns för att sektionera upp innehållet på en sida.
</div>

== <code><[[hx|h1]]></code> ==
Även om vi angivit en titel i vårat <code>[[head]]</code>-element, så vill vi oftast ha en titel som syns även i själva sidan (och inte enbart på fliken eller fönstret). För överskrifter eller huvudrubriker använder vi oss av <code>[[hx|h1]]</code>-taggen. ”H” står i detta fall för engelskans ”header”, eller rubrik på svenska. Siffran som följer efter talar om vilken rubriknivå det handlar om. Det finns sex möjliga rubriknivåer att tillgå, dvs; <code><[[hx|h1]]></code>, <code><[[hx|h2]]></code>, <code><[[hx|h3]]></code>, <code><[[hx|h4]]></code>, <code><[[hx|h5]]></code> och <code><[[hx|h6]]></code>. Har du jobbat med något ordbehandlingsprogram och använt deras stilmallar är rubriknivåer säkert inget nytt koncept för dig.

Rubrikerna ska användas i stigande ordning och de ska förekomma i en konsekvent serie. Vi ska t.ex. aldrig ange en <code><[[hx|h2]]></code> utan att ha en <code><[[hx|h1]]></code>. Inte heller ska vi hoppa över någon rubriknivå, t.ex. att gå ifrån <code><[[hx|h2]]></code> direkt till <code><[[hx|h4]]></code>. Rubriknivåerna bygger upp en logisk struktur för vårat dokument och vi kan lätt se vilka underrubriker som tillhör respektive huvudrubriker, precis såsom du bygger upp en logisk struktur då du skriver en uppsats.

<code>[[hx|H1]]</code>-elementet är lite speciellt. Tidigare fick det enbart förekomma en gång per [[HTML]]-dokument. Numera, i och med [[HTML5]], får det dock användas mer flitigt. Allt material som är helt avskilt ifrån övrigt material kan ha en egen <code>[[hx|h1]]</code>-rubrik. Den kan till exempel användas i sidhuvud, sidfot, underartiklar eller i en egen sektion.

<div class="well well-danger">
Det är väldigt viktigt att komma ihåg att man inte ska använda sig av <code>[[hx]]</code>-elementen (eller något annat [[element]]) enbart för att ge ett specifik utseende till något. [[Tagg]]arna är till för strukturen och inte för utseendet. Om du vill ha stor text ska du inte använda en <code>[[hx]]</code>-tagg, utan istället använder du dig av t.ex. <code><[[span]]></code> och skapar en [[CSS]]-regel som anger att innehållet i <code>[[span]]</code>-elementet ska ha större text. Om du ska jobba inom webbranschen bör du veta att det anses som en dödssynd att använda [[tagg]]ar för utseendets skull!
</div>

== Sammanfattning ==
[[Fil:tldr1.png]]

== Övningar ==
[[En webbsidas anatomi övningar]]

== Nästa aktivitet ==
[[Våra första webbsidor]]

[[Category:Webbutveckling]]

Element-grunder

2024-08-06T14:27:13Z

PGJ:

Ett taggpar plus dess innehåll skapar tillsammans vad vi kallar för ett [[element]].

== Element ==
Ett exempel på ett komplett [[element]] kan vara:
<codepen pen="YwGeNr" tab="html,result" height="180">
</codepen>

Detta är ett <code>[[hx|h1]]</code>-element vars innehåll är texten ”Detta är en huvudrubrik”. På detta vis talar vi om för webbläsaren att texten har ett speciellt syfte. I det här fallet anges att detta är sektionens huvudrubrik. Vi talar dock inte om hur texten ska visas, utan enbart dess syfte. Alla webbläsare har ett grundutseende för hur olika [[element]] ska återges. I vårt fall kommer innehållet antagligen att visas med lite större och fetare text. Så länge vi jobbar med [[HTML]], fokuserar vi dock inte på utseende.

Det exakta utseendet som elementen ger upphov till skiljer sig mellan olika webbläsare. Det kan till och med vara som så att slutanvändaren som använder vår webbsida är blind (eller har något annat handikapp) och därför får sidan uppläst. När vi jobbar med ren [[HTML]], kan vi aldrig vara säkra på hur slutresultatet kommer att återges. Med hjälp av [[CSS]] får vi mer kontroll över hur sidan återges, men inte ens då kan vi inte vara 100 % säkra på att slutanvändaren kommer att uppleva sidan exakt så som vi tänkt oss. Vi återkommer till utseende i senare aktiviteter.

<div class="well well-meadow">
De flesta exempel på Webbling använder sig av webbtjänsten [http://codepen.io CodePen.io]. I exemplen finns flera flikar som du kan välja mellan. Lite beroende på vilken typ av exempel det handlar om så kan där finnas HTML-, CSS-, JavaScript och Result-flikar.

I de exempel som inte behöver bestå av en fullständig sida, kommer vi att utelämna de "onödiga" kodbitarna. CodePen skapar nämligen en grundsida åt oss, så vi behöver inte ha med all HTML för att exemplen ska fungera.

Det går även att klicka på "Edit on CodePen" i exemplen för att gå till dem på [http://codepen.io CodePens sajt]. Om du gör det så kan du förändra och redigera koden, så att du kan se vad som händer om man väljer att göra saker på olika sätt. Detta är ett bra sätt att lära sig mer om hur webbteknikerna fungerar, så passa på att experimentera med exemplen!
</div>

== Underelement och nästling ==
[[Element]] kan i sin tur innehålla andra [[element]]. Ett exempel på det skulle kunna vara:
<codepen pen="yNEbow" tab="html,result" height="180">
<syntaxhighlight lang="html5">
<h1>Detta är en <em>huvudrubrik</em></h1>
</syntaxhighlight>
</codepen>

Här har vi alltså ett <code>[[em]]</code>-element som är nästlat inuti ett <code>[[hx|h1]]</code>-element. Det gör att <code>[[em]]</code>-elementet är en del av <code>[[hx|h1]]</code>-elementet. Man behöver ofta nästla olika element inuti varandra för att få till den struktur man vill ha. Oftast krävs det nästling när man ska skapa en snygg layout.

<div class="well well-meadow">
<code>[[Em]]</code>-[[tagg]]en används för att markera att något har mer emfas än omkringliggande material – det vill säga att det ska betonas på något vis. I de flesta fall kommer webbläsaren att visa sådan text som fet eller kursiv.
</div>

Följande (konstlade och dumma) kod är ett mer avancerat exempel på nästling:
<codepen pen="JdZNrX" height="240" tab="html,result">
</codepen>

Det mest intressanta med ovanstående exempel är att vi har ett <code>[[div]]</code>-element nästlat inuti i ett annat <code>[[div]]</code>-element. Webbläsaren kan alltså förstå och hantera att man nästlar samma typ av element inuti varandra. Den kommer även att kunna hantera hur de olika start- och sluttaggarna hänger samman.

När webbläsaren ska tolka ovanstående, så kommer den fatta att den första ”<code></[[div]]></code>”-[[tagg]]en är [[sluttagg]]en till den andra ”<code><[[div]]></code>”-[[tagg]]en och att den sista [[sluttagg]]en hör samman med den första [[starttagg]]en. Webbläsaren är alltså rätt så ”smart” när den ska tolka hur [[tagg]]ar och [[sluttagg]]ar hör samman, dock gäller det att se till så att man får dit [[sluttagg]]ar som gäller för olika element i rätt ordning.

I teorin kan du nästla saker inuti varandra i all oändlighet. Det är dock dumt att nästla saker och ting alltför djupt, det gör nämligen din kod mer svårläst och därmed svår att jobba med.

<div class="well well-meadow">
<code>[[Div]]</code>-[[tagg]]en används för att ange att något innehåll hänger samman som ett block, men att det inte har någon speciell semantisk betydelse. Detta används ofta för layout. Lite längre fram kommer vi att använda denna tagg för många olika ändamål.
</div>

== Vikten av snygg kod ==
När man skriver omfattande och komplex kod, kan det lätt bli en enda stor soppa av allting. Med lite tur är det en soppa som webbläsaren klarar av att tolka, medan du, som skrivit koden, kanske tappar bort dig helt. I värsta fall är det en soppa som vare sig du eller webbläsaren klarar av att tolka. Det gäller alltså att strukturera sin kod på ett vettigt vis.

Det finns en del tricks, eller goda vanor, som gör att det blir enklare att hålla ordning på koden. I exemplet ovan har vi använt oss av så kallad [[indentering]]. Det vill säga vi har skjutit in texten med några extra mellanslag (tabbar går också bra) på vänster sida. Det gör att vi kan följa strukturen i koden och att vi lätt ser vilka start- och sluttaggar som hör samman. Vi återkommer till goda kodvanor i en senare aktivitet.

== Verktyg hjälper dig ==
Moderna webbutvecklingsverktyg har bra stöd som hjälper dig med att skriva korrekt, snygg och vettig kod. Detta gör de på flera olika sätt.

När du börjar skriva, så ger de flesta verktyg förslag på vad det kan vara som du håller på att skriva. Det gör att du snabbt kan skriva en bokstav eller två och vips så kan din editor fylla i och komplettera vad du vill skriva. Detta gör att man skriver snabbare och att det blir färre fel. I många fall föreslår din editor kompletteringar utifrån sammanhanget runt om det du skriver. Om du ska ange ett färgattribut, så fattar editorn antagligen att det är en färg som du håller på att ange och ger förslag på olika färgkombinationer.

De flesta verktyg hjälper dig att sätta [[sluttagg]]arna där de hör hemma. Detta gör editorn genom att fylla i korrekt sluttaggsnamn direkt du skriver ”<code></</code>”.

Editorer brukar även vara duktiga på att se till att din kod blir snyggt och korrekt indenterad. Vilket gör att saker hamnar på "rätt" plats i förhållande till kringliggande kod. Detta gör det ''mycket'' lättare att läsa din kod.

Lär dig att använda ditt verktyg. Det kommer att göra ditt liv enklare. Du kommer att behöva skriva mycket mindre och det är stor chans att saker blir korrekta redan från början. Men kom ihåg att man inte kan förlita sig helt på att verktygen gör allting rätt...

== Felaktigt angivna sluttaggar ==
När vi skapar nästlade [[element]] gäller det att hålla tungan rätt i munnen och se till att [[tagg]]arna hamnar i rätt ordning. Det här skulle till exempel bli rejält fel:

<syntaxhighlight lang="html5">
<h1>Detta är en <i>huvudrubrik</h1></i>
</syntaxhighlight>

Här har vi satt [[sluttagg]]arna i fel ordning, vilket kommer att ge webbläsaren en hel del huvudbry. De flesta webbläsare är godvilliga och sväljer flertalet fel utan några direkta klagomål. I vissa fall kommer slutresultatet att bli felaktigt, men förvånansvärt ofta lyckas webbläsaren få till en korrekt tolkning av dokumentet trots att man gjort fel. Dock kan det vara som så att den typ av fel som en webbläsare klarar av, kanske en annan webbläsare inte alls klarar.
<div class="well well-meadow">
Det är viktigt att använda sig av testverktyg som kollar igenom ens [[HTML]]-kod och påpekar fel och brister. Dessa testverktyg sväljer inte vad som helst, utan de är riktigt, riktigt petiga och ska ha allt absolut rätt innan de godkänner koden. Användningen av dylika testverktyg ger mer robust kod, som är lättare att felsöka och underhålla. Så gör det till en god vana att testa din kod ofta – det vinner du på i längden. Ett bra ställe att hitta webbverktyg som gör dessa kontroller är:

http://www.w3.org/developers/tools
</div>

== Element, sammanfattning ==
[[Fil:tldr3a.png|center|Elementens uppbyggnad]]

== Övningar ==
[[Elementens-grunder övningar]]

== Nästa aktivitet ==
[[En webbsidas anatomi]]

[[Category:Webbutveckling]]

Element-grunder

2024-08-06T14:25:23Z

PGJ:

Ett taggpar plus dess innehåll skapar tillsammans vad vi kallar för ett [[element]].

== Element ==
Ett exempel på ett komplett [[element]] kan vara:
<codepen pen="YwGeNr" tab="html,result" height="180">
</codepen>

Detta är ett <code>[[hx|h1]]</code>-element vars innehåll är texten ”Detta är en huvudrubrik”. På detta vis talar vi om för webbläsaren att texten har ett speciellt syfte. I det här fallet anges att detta är sektionens huvudrubrik. Vi talar dock inte om hur texten ska visas, utan enbart dess syfte. Alla webbläsare har ett grundutseende för hur olika [[element]] ska återges. I vårt fall kommer innehållet antagligen att visas med lite större och fetare text. Så länge vi jobbar med [[HTML]], fokuserar vi dock inte på utseende.

Det exakta utseendet som elementen ger upphov till skiljer sig mellan olika webbläsare. Det kan till och med vara som så att slutanvändaren som använder vår webbsida är blind (eller har något annat handikapp) och därför får sidan uppläst. När vi jobbar med ren [[HTML]], kan vi aldrig vara säkra på hur slutresultatet kommer att återges. Med hjälp av [[CSS]] får vi mer kontroll över hur sidan återges, men inte ens då kan vi inte vara 100 % säkra på att slutanvändaren kommer att uppleva sidan exakt så som vi tänkt oss. Vi återkommer till utseende i senare aktiviteter.

<div class="well well-meadow">
De flesta exempel på Webbling använder sig av webbtjänsten [http://codepen.io CodePen.io]. I exemplen finns flera flikar som du kan välja mellan. Lite beroende på vilken typ av exempel det handlar om så kan där finnas HTML-, CSS-, JavaScript och Result-flikar.

I de exempel som inte behöver bestå av en fullständig sida, kommer vi att utelämna de "onödiga" kodbitarna. CodePen skapar nämligen en grundsida åt oss, så vi behöver inte ha med all HTML för att exemplen ska fungera.

Det går även att klicka på "Edit on CodePen" i exemplen för att gå till dem på [http://codepen.io CodePens sajt]. Om du gör det så kan du förändra och redigera koden, så att du kan se vad som händer om man väljer att göra saker på olika sätt. Detta är ett bra sätt att lära sig mer om hur webbteknikerna fungerar, så passa på att experimentera med exemplen!
</div>

== Underelement och nästling ==
[[Element]] kan i sin tur innehålla andra [[element]]. Ett exempel på det skulle kunna vara:
<codepen pen="yNEbow" tab="html,result" height="180">
<syntaxhighlight lang="html5">
<h1>Detta är en <em>huvudrubrik</em></h1>
</syntaxhighlight>
</codepen>

Här har vi alltså ett <code>[[em]]</code>-element som är nästlat inuti ett <code>[[hx|h1]]</code>-element. Det gör att <code>[[em]]</code>-elementet är en del av <code>[[hx|h1]]</code>-elementet. Man behöver ofta nästla olika element inuti varandra för att få till den struktur man vill ha. Oftast krävs det nästling när man ska skapa en snygg layout.

<div class="well well-meadow">
<code>[[Em]]</code>-[[tagg]]en används för att markera att något har mer emfas än omkringliggande material – det vill säga att det ska betonas på något vis. I de flesta fall kommer webbläsaren att visa sådan text som fet eller kursiv.
</div>

Följande (konstlade och dumma) kod är ett mer avancerat exempel på nästling:
<codepen pen="JdZNrX" height="240" tab="html,result">
</codepen>

Det mest intressanta med ovanstående exempel är att vi har ett <code>[[div]]</code>-element nästlat inuti i ett annat <code>[[div]]</code>-element. Webbläsaren kan alltså förstå och hantera att man nästlar samma typ av element inuti varandra. Den kommer även att kunna hantera hur de olika start- och sluttaggarna hänger samman.

När webbläsaren ska tolka ovanstående, så kommer den fatta att den första ”<code></[[div]]></code>”-[[tagg]]en är [[sluttagg]]en till den andra ”<code><[[div]]></code>”-[[tagg]]en och att den sista [[sluttagg]]en hör samman med den första [[starttagg]]en. Webbläsaren är alltså rätt så ”smart” när den ska tolka hur [[tagg]]ar och [[sluttagg]]ar hör samman, dock gäller det att se till så att man får dit [[sluttagg]]ar som gäller för olika element i rätt ordning.

I teorin kan du nästla saker inuti varandra i all oändlighet. Det är dock dumt att nästla saker och ting alltför djupt, det gör nämligen din kod mer svårläst och därmed svår att jobba med.

<div class="well well-meadow">
<code>[[Div]]</code>-[[tagg]]en används för att ange att något innehåll hänger samman som ett block, men att det inte har någon speciell semantisk betydelse. Detta används ofta för layout. Lite längre fram kommer vi att använda denna tagg för många olika ändamål.
</div>

== Vikten av snygg kod ==
När man skriver omfattande och komplex kod, kan det lätt bli en enda stor soppa av allting. Med lite tur är det en soppa som webbläsaren klarar av att tolka, medan du, som skrivit koden, kanske tappar bort dig helt. I värsta fall är det en soppa som vare sig du eller webbläsaren klarar av att tolka. Det gäller alltså att strukturera sin kod på ett vettigt vis.

Det finns en del tricks, eller goda vanor, som gör att det blir enklare att hålla ordning på koden. I exemplet ovan har vi använt oss av så kallad [[indentering]]. Det vill säga vi har skjutit in texten med några extra mellanslag (tabbar går också bra) på vänster sida. Det gör att vi kan följa strukturen i koden och att vi lätt ser vilka start- och sluttaggar som hör samman. Vi återkommer till goda kodvanor i en senare aktivitet.

== Verktyg hjälper dig ==
Moderna webbutvecklingsverktyg har bra stöd som hjälper dig med att skriva korrekt, snygg och vettig kod. Detta gör de på flera olika sätt.

När du börjar skriva, så ger de flesta verktyg förslag på vad det kan vara som du håller på att skriva. Det gör att du snabbt kan skriva en bokstav eller två och vips så kan din editor fylla i och komplettera vad du vill skriva. Detta gör att man skriver snabbare och att det blir färre fel. I många fall föreslår din editor kompletteringar utifrån sammanhanget runt om det du skriver. Om du ska ange ett färgattribut, så fattar editorn antagligen att det är en färg som du håller på att ange och ger förslag på olika färgkombinationer.

De flesta verktyg hjälper dig att sätta [[sluttagg]]arna där de hör hemma. Detta gör editorn genom att fylla i korrekt sluttaggsnamn direkt du skriver ”<code></</code>”.

Editorer brukar även vara duktiga på att se till att din kod blir snyggt och korrekt indenterad. Vilket gör att saker hamnar på "rätt" plats i förhållande till kringliggande kod. Detta gör det ''mycket'' lättare att läsa din kod.

Lär dig att använda ditt verktyg. Det kommer att göra ditt liv enklare. Du kommer att behöva skriva mycket mindre och det är stor chans att saker blir korrekta redan från början. Men kom ihåg att man inte kan förlita sig helt på att verktygen gör allting rätt...

== Felaktigt angivna sluttaggar ==
När vi skapar nästlade [[element]] gäller det att hålla tungan rätt i munnen och se till att [[tagg]]arna hamnar i rätt ordning. Det här skulle till exempel bli rejält fel:

<syntaxhighlight lang="html5">
<h1>Detta är en <i>huvudrubrik</h1></i>
</syntaxhighlight>

Här har vi satt [[sluttagg]]arna i fel ordning, vilket kommer att ge webbläsaren en hel del huvudbry. De flesta webbläsare är godvilliga och sväljer flertalet fel utan några direkta klagomål. I vissa fall kommer slutresultatet att bli felaktigt, men förvånansvärt ofta lyckas webbläsaren få till en korrekt tolkning av dokumentet trots att man gjort fel. Dock kan det vara som så att det fel som en typ av webbläsare klarar av, kanske en annan webbläsare inte alls klarar.
<div class="well well-meadow">
Det är viktigt att använda sig av testverktyg som kollar igenom ens [[HTML]]-kod och påpekar fel och brister. Dessa testverktyg sväljer inte vad som helst, utan de är riktigt, riktigt petiga och ska ha allt absolut rätt innan de godkänner koden. Användningen av dylika testverktyg ger mer robust kod, som är lättare att felsöka och underhålla. Så gör det till en god vana att testa din kod ofta – det vinner du på i längden. Ett bra ställe att hitta webbverktyg som gör dessa kontroller är:

http://www.w3.org/developers/tools
</div>

== Element, sammanfattning ==
[[Fil:tldr3a.png|center|Elementens uppbyggnad]]

== Övningar ==
[[Elementens-grunder övningar]]

== Nästa aktivitet ==
[[En webbsidas anatomi]]

[[Category:Webbutveckling]]

Element-grunder

2024-08-06T14:18:04Z

PGJ:

Ett taggpar plus dess innehåll skapar tillsammans vad vi kallar för ett [[element]].

== Element ==
Ett exempel på ett komplett [[element]] kan vara:
<codepen pen="YwGeNr" tab="html,result" height="180">
</codepen>

Detta är ett <code>[[hx|h1]]</code>-element vars innehåll är texten ”Detta är en huvudrubrik”. På detta vis talar vi om för webbläsaren att texten har ett speciellt syfte. I det här fallet anges att detta är sektionens huvudrubrik. Vi talar dock inte om hur texten ska visas, utan enbart dess syfte. Alla webbläsare har ett grundutseende för hur olika [[element]] ska återges. I vårt fall kommer innehållet antagligen att visas med lite större och fetare text. Så länge vi jobbar med [[HTML]], fokuserar vi dock inte på utseende.

Det exakta utseendet som elementen ger upphov till skiljer sig mellan olika webbläsare. Det kan till och med vara som så att slutanvändaren som använder vår webbsida är blind (eller har något annat handikapp) och därför får sidan uppläst. När vi jobbar med ren [[HTML]], kan vi aldrig vara säkra på hur slutresultatet kommer att återges. Med hjälp av [[CSS]] får vi mer kontroll över hur sidan återges, men inte ens då kan vi inte vara 100 % säkra på att slutanvändaren kommer att uppleva sidan exakt så som vi tänkt oss. Vi återkommer till utseende i senare aktiviteter.

<div class="well well-meadow">
De flesta exempel på Webbling använder sig av webbtjänsten [http://codepen.io CodePen.io]. I exemplen finns flera flikar som du kan välja mellan. Lite beroende på vilken typ av exempel det handlar om så kan där finnas HTML-, CSS-, JavaScript och Result-flikar.

I de exempel som inte behöver bestå av en fullständig sida, kommer vi att utelämna de "onödiga" kodbitarna. CodePen skapar nämligen en grundsida åt oss, så vi behöver inte ha med all HTML för att exemplen ska fungera.

Det går även att klicka på "Edit on CodePen" i exemplen för att gå till dem på [http://codepen.io CodePens sajt]. Om du gör det så kan du förändra och redigera koden, så att du kan se vad som händer om man väljer att göra saker på olika sätt. Detta är ett bra sätt att lära sig mer om hur webbteknikerna fungerar, så passa på att experimentera med exemplen!
</div>

== Underelement och nästling ==
[[Element]] kan i sin tur innehålla andra [[element]]. Ett exempel på det skulle kunna vara:
<codepen pen="yNEbow" tab="html,result" height="180">
<syntaxhighlight lang="html5">
<h1>Detta är en <em>huvudrubrik</em></h1>
</syntaxhighlight>
</codepen>

Här har vi alltså ett <code>[[em]]</code>-element som är nästlat inuti ett <code>[[hx|h1]]</code>-element. Det gör att <code>[[em]]</code>-elementet är en del av <code>[[hx|h1]]</code>-elementet. Man behöver ofta nästla olika element inuti varandra för att få till den struktur man vill ha. Oftast krävs det nästling när man ska skapa en snygg layout.

<div class="well well-meadow">
<code>[[Em]]</code>-[[tagg]]en används för att markera att något har mer emfas än omkringliggande material – det vill säga att det ska betonas på något vis. I de flesta fall kommer webbläsaren att visa sådan text som fet eller kursiv.
</div>

Följande (konstlade och dumma) kod är ett mer avancerat exempel på nästling:
<codepen pen="JdZNrX" height="240" tab="html,result">
</codepen>

Det mest intressanta med ovanstående exempel är att vi har ett <code>[[div]]</code>-element nästlat inuti i ett annat <code>[[div]]</code>-element. När webbläsaren ska tolka ovanstående, så kommer den fatta att den första ”<code></[[div]]></code>”-[[tagg]]en är [[sluttagg]]en till den andra ”<code><[[div]]></code>”-[[tagg]]en och att den sista [[sluttagg]]en hör samman med den första [[starttagg]]en. Webbläsaren är alltså rätt så ”smart” när den ska tolka hur [[tagg]]ar och [[sluttagg]]ar hör samman, dock gäller det att se till så att man får dit [[sluttagg]]ar som gäller för olika element i rätt ordning.

I teorin kan du nästla saker inuti varandra i all oändlighet. Det är dock dumt att nästla saker och ting alltför djupt, det gör nämligen din kod mer svårläst och därmed mer svårarbetad.

<div class="well well-meadow">
<code>[[Div]]</code>-[[tagg]]en används för att ange att något innehåll hänger samman som ett block, men att det inte har någon speciell semantisk betydelse. Detta används ofta för layout. Lite längre fram kommer vi att använda denna tagg till många olika saker.
</div>

== Vikten av snygg kod ==
När man skriver omfattande och komplex kod, kan det lätt bli en enda stor soppa av allting. Med lite tur är det en soppa som webbläsaren klarar av att tolka, medan du, som skrivit koden, kanske tappar bort dig helt. I värsta fall är det en soppa som vare sig du eller webbläsaren klarar av att tolka. Det gäller alltså att strukturera sin kod på ett vettigt vis.

Det finns en del tricks, eller goda vanor, som gör att det blir enklare att hålla ordning på koden. I exemplet ovan har vi använt oss av så kallad [[indentering]]. Det vill säga vi har skjutit in texten med några extra mellanslag (tabbar går också bra) på vänster sida. Det gör att vi kan se strukturen i koden och att vi lätt ser vilka start- och sluttaggar som hör samman. Vi återkommer till goda kodvanor i en senare aktivitet.

== Verktyg hjälper dig ==
Moderna webbutvecklingsverktyg har bra stöd som hjälper dig med att skriva korrekt, snygg och vettig kod. Detta gör de på flera olika sätt.

När du börjar skriva, så ger de flesta verktyg förslag på vad det kan vara som du håller på att skriva. Det gör att du snabbt kan skriva en bokstav eller två och vips så kan din editor fylla i och komplettera vad du vill skriva. Detta gör att man skriver snabbare och att det blir färre fel. I många fall föreslår din editor kompletteringar utifrån sammanhanget runt omkring det du skriver. Om du ska ange ett färgattribut, så fattar editorn antagligen att det är en färg som du håller på att ange och ger förslag på olika färgkombinationer.

De flesta verktyg hjälper dig att få dit [[sluttagg]]arna där de hör hemma. Detta gör editorn genom att fylla i korrekt sluttaggsnamn direkt du skriver ”<code></</code>”.

Editorer brukar även vara duktiga på att se till att din kod blir snyggt och korrekt indenterad. Vilket gör att saker hamnar på korrekt plats i förhållande till kringliggande kod. Detta gör det ''mycket'' lättare att läsa din kod.

Lär dig att använda ditt verktyg. Det kommer att göra ditt liv enklare. Du kommer att behöva skriva mycket mindre och det är stor chans att saker blir korrekta redan från början. Men kom ihåg att man inte kan förlita sig helt på att verktygen gör allting rätt...

== Felaktigt angivna sluttaggar ==
När vi skapar nästlade [[element]] gäller det att hålla tungan rätt i munnen och se till att [[tagg]]arna hamnar i rätt ordning. Det här skulle till exempel bli rejält fel:

<syntaxhighlight lang="html5">
<h1>Detta är en <i>huvudrubrik</h1></i>
</syntaxhighlight>

Här har vi satt [[sluttagg]]arna i fel ordning, vilket kommer att ge webbläsaren en hel del huvudbry. De flesta webbläsare är godvilliga och sväljer flertalet fel utan några direkta klagomål. I vissa fall kommer slutresultatet att bli felaktigt, men förvånansvärt ofta lyckas webbläsaren få till en korrekt tolkning av dokumentet trots att man gjort fel. Dock kan det vara som så att det fel som en typ av webbläsare klarar av, kanske en annan webbläsare inte alls klarar.
<div class="well well-meadow">
Det är viktigt att använda sig av testverktyg som kollar igenom ens [[HTML]]-kod och påpekar fel och brister. Dessa testverktyg sväljer inte vad som helst, utan de är riktigt, riktigt petiga och ska ha allt absolut rätt innan de godkänner koden. Användningen av dylika testverktyg ger mer robust kod, som är lättare att felsöka och underhålla. Så gör det till en god vana att testa din kod ofta – det vinner du på i längden. Ett bra ställe att hitta webbverktyg som gör dessa kontroller är:

http://www.w3.org/developers/tools
</div>

== Element, sammanfattning ==
[[Fil:tldr3a.png|center|Elementens uppbyggnad]]

== Övningar ==
[[Elementens-grunder övningar]]

== Nästa aktivitet ==
[[En webbsidas anatomi]]

[[Category:Webbutveckling]]

Element-grunder

2024-08-06T14:17:08Z

PGJ:

Ett taggpar plus dess innehåll skapar tillsammans vad vi kallar för ett [[element]].

== Element ==
Ett exempel på ett komplett [[element]] kan vara:
<codepen pen="YwGeNr" tab="html,result" height="180">
</codepen>

Detta är ett <code>[[hx|h1]]</code>-element vars innehåll är texten ”Detta är en huvudrubrik”. På detta vis talar vi om för webbläsaren att texten har ett speciellt syfte. I det här fallet anges att detta är sektionens huvudrubrik. Vi talar dock inte om hur texten ska visas, utan enbart dess syfte. Alla webbläsare har ett grundutseende för hur olika [[element]] ska återges. I vårt fall kommer innehållet antagligen att visas med lite större och fetare text. Så länge vi jobbar med [[HTML]], fokuserar vi dock inte på utseende.

Det exakta utseendet som elementen ger upphov till skiljer sig mellan olika webbläsare. Det kan till och med vara som så att slutanvändaren som använder vår webbsida är blind (eller har något annat handikapp) och därför får sidan uppläst. När vi jobbar med ren [[HTML]], kan vi aldrig vara säkra på hur slutresultatet kommer att återges. Med hjälp av [[CSS]] får vi mer kontroll över hur sidan återges, men inte ens då kan vi inte vara 100 % säkra på att slutanvändaren kommer att uppleva sidan exakt så som vi tänkt oss. Vi återkommer till utseende i senare aktiviteter.

<div class="well well-meadow">
De flesta exempel på Webbling använder sig av webbtjänsten [http://codepen.io CodePen.io]. I exemplen finns flera flikar som du kan välja mellan. Lite beroende på vilken typ av exempel det handlar om så kan där finnas HTML-, CSS-, JavaScript och Result-flikar.

I de exempel som inte behöver bestå av en fullständig sida, kommer vi att utelämna de "onödiga" kodbitarna. CodePen skapar nämligen en grundsida åt oss, så vi behöver inte ha med all HTML för att exemplen ska fungera.

Det går även att klicka på "Edit on CodePen" i exemplen för att gå till dem på [http://codepen.io CodePens sajt]. Om du gör det så kan du förändra och redigera koden, så att du kan se vad som händer om man väljer att göra saker på olika sätt. Detta är ett bra sätt att lära sig mer om hur webbteknikerna fungerar, så passa på att experimentera med exemplen!
</div>

== Underelement och nästling ==
[[Element]] kan i sin tur innehålla andra [[element]]. Ett exempel på det skulle kunna vara:
<codepen pen="yNEbow" tab="html,result" height="180">
<syntaxhighlight lang="html5">
<h1>Detta är en <em>huvudrubrik</em></h1>
</syntaxhighlight>
</codepen>

Här har vi alltså ett <code>[[em]]</code>-element som är nästlat inuti ett <code>[[hx|h1]]</code>-element. Det gör att <code>[[em]]</code>-elementet är en del av <code>[[hx|h1]]</code>-elementet. Man behöver ofta nästla olika element inuti varandra för att få till den struktur man vill ha. Oftast krävs det nästling när man ska skapa en snygg layout.

<div class="well well-meadow">
<code>[[Em]]</code>-[[tagg]]en används för att markera att något har mer emfas än omkringliggande material – det vill säga att det ska betonas på något vis. I de flesta fall kommer webbläsaren att visa sådan text som fet eller kursiv.
</div>

Följande (konstlade och dumma) kod är ett mer avancerat exempel på nästling:
<codepen pen="JdZNrX" height="240" tab="html,result">
</codepen>

Det mest intressanta med ovanstående exempel är att vi har ett <code>[[div]]</code>-element nästlat inuti i ett annat <code>[[div]]</code>-element. När webbläsaren ska tolka ovanstående, så kommer den att fatta att den första ”<code></[[div]]></code>”-[[tagg]]en är [[sluttagg]]en till den andra ”<code><[[div]]></code>”-[[tagg]]en och att den sista [[sluttagg]]en hör samman med den första [[starttagg]]en. Webbläsaren är alltså rätt så ”smart” när den ska tolka hur [[tagg]]ar och [[sluttagg]]ar hör samman, dock gäller det att se till så att man får dit [[sluttagg]]ar som gäller för olika element i rätt ordning.

I teorin kan du nästla saker inuti varandra i all oändlighet. Det är dock dumt att nästla saker och ting alltför djupt, det gör nämligen din kod mer svårläst och därmed mer svårarbetad.

<div class="well well-meadow">
<code>[[Div]]</code>-[[tagg]]en används för att ange att något innehåll hänger samman som ett block, men att det inte har någon speciell semantisk betydelse. Detta används ofta för layout. Lite längre fram kommer vi att använda denna tagg till många olika saker.
</div>

== Vikten av snygg kod ==
När man skriver omfattande och komplex kod, kan det lätt bli en enda stor soppa av allting. Med lite tur är det en soppa som webbläsaren klarar av att tolka, medan du, som skrivit koden, kanske tappar bort dig helt. I värsta fall är det en soppa som vare sig du eller webbläsaren klarar av att tolka. Det gäller alltså att strukturera sin kod på ett vettigt vis.

Det finns en del tricks, eller goda vanor, som gör att det blir enklare att hålla ordning på koden. I exemplet ovan har vi använt oss av så kallad [[indentering]]. Det vill säga vi har skjutit in texten med några extra mellanslag (tabbar går också bra) på vänster sida. Det gör att vi kan se strukturen i koden och att vi lätt ser vilka start- och sluttaggar som hör samman. Vi återkommer till goda kodvanor i en senare aktivitet.

== Verktyg hjälper dig ==
Moderna webbutvecklingsverktyg har bra stöd som hjälper dig med att skriva korrekt, snygg och vettig kod. Detta gör de på flera olika sätt.

När du börjar skriva, så ger de flesta verktyg förslag på vad det kan vara som du håller på att skriva. Det gör att du snabbt kan skriva en bokstav eller två och vips så kan din editor fylla i och komplettera vad du vill skriva. Detta gör att man skriver snabbare och att det blir färre fel. I många fall föreslår din editor kompletteringar utifrån sammanhanget runt omkring det du skriver. Om du ska ange ett färgattribut, så fattar editorn antagligen att det är en färg som du håller på att ange och ger förslag på olika färgkombinationer.

De flesta verktyg hjälper dig att få dit [[sluttagg]]arna där de hör hemma. Detta gör editorn genom att fylla i korrekt sluttaggsnamn direkt du skriver ”<code></</code>”.

Editorer brukar även vara duktiga på att se till att din kod blir snyggt och korrekt indenterad. Vilket gör att saker hamnar på korrekt plats i förhållande till kringliggande kod. Detta gör det ''mycket'' lättare att läsa din kod.

Lär dig att använda ditt verktyg. Det kommer att göra ditt liv enklare. Du kommer att behöva skriva mycket mindre och det är stor chans att saker blir korrekta redan från början. Men kom ihåg att man inte kan förlita sig helt på att verktygen gör allting rätt...

== Felaktigt angivna sluttaggar ==
När vi skapar nästlade [[element]] gäller det att hålla tungan rätt i munnen och se till att [[tagg]]arna hamnar i rätt ordning. Det här skulle till exempel bli rejält fel:

<syntaxhighlight lang="html5">
<h1>Detta är en <i>huvudrubrik</h1></i>
</syntaxhighlight>

Här har vi satt [[sluttagg]]arna i fel ordning, vilket kommer att ge webbläsaren en hel del huvudbry. De flesta webbläsare är godvilliga och sväljer flertalet fel utan några direkta klagomål. I vissa fall kommer slutresultatet att bli felaktigt, men förvånansvärt ofta lyckas webbläsaren få till en korrekt tolkning av dokumentet trots att man gjort fel. Dock kan det vara som så att det fel som en typ av webbläsare klarar av, kanske en annan webbläsare inte alls klarar.
<div class="well well-meadow">
Det är viktigt att använda sig av testverktyg som kollar igenom ens [[HTML]]-kod och påpekar fel och brister. Dessa testverktyg sväljer inte vad som helst, utan de är riktigt, riktigt petiga och ska ha allt absolut rätt innan de godkänner koden. Användningen av dylika testverktyg ger mer robust kod, som är lättare att felsöka och underhålla. Så gör det till en god vana att testa din kod ofta – det vinner du på i längden. Ett bra ställe att hitta webbverktyg som gör dessa kontroller är:

http://www.w3.org/developers/tools
</div>

== Element, sammanfattning ==
[[Fil:tldr3a.png|center|Elementens uppbyggnad]]

== Övningar ==
[[Elementens-grunder övningar]]

== Nästa aktivitet ==
[[En webbsidas anatomi]]

[[Category:Webbutveckling]]

Tagg-grunder

2024-08-06T14:10:35Z

PGJ:

Som vi konstaterade tidigare så bygger [[HTML]] på [[tagg]]ar och [[element]]. Taggarna är de byggklossar som bygger upp sidans grundutseende och struktur. För att kunna förstå [[HTML]], måste vi förstå hur dess [[tagg]]ar och [[element]] är uppbyggda.

I de allra flesta fall består [[HTML]]-[[tagg]]arna av ett taggpar, man har en [[starttagg]] och en [[sluttagg]]. Innehållet som finns mellan [[tagg]]-delarna är den data som vi vill märka upp på något vis. När webbläsaren sedan tolkar dokumentet kommer den, med hjälp av [[tagg]]arna, att kunna behandla dokumentet på ett korrekt vis och skapa [[element]] utifrån [[tagg]]arna och deras innehåll.

== Taggarnas uppbyggnad ==
Alla [[tagg]]ar, såväl start som slut, ligger inom tecknen ”<code><</code>” och ”<code>></code>”. Så en [[tagg]] kan se ut så här ”<code><[[hx|h1]]></code>”. Detta är <code>h1</code>-taggen, vilken används för att markera att något är en huvudrubrik. När webbläsaren tolkar ett dokument och träffar på ett ”<code><</code>”-tecken kommer den att börja tolka allt från och med detta tecken som en tagg, ända tills den hittar ett motsvarande ”<code>></code>”-tecken.

HTML:s hantering av ”<code><</code>”, gör att man inte kan lägga in dessa tecken hur som helst i sina dokument. Så om man vill använda sig av ”<code><</code>” som ett vanligt tecken och inte som start för en HTML-tagg, måste man ange en specialkod. Vi återkommer till denna typ av specialkoder.

== HTML5:s tagguppsättning ==
Man kan inte uppfinna nya [[tagg]]ar allteftersom man känner för det, utan det finns en förutbestämd uppsättning av [[tagg]]ar som definierats i [[HTML5]]-[[standard]]en och det är enbart dessa taggar som webbläsare fattar. Det finns en uppsjö av olika [[tagg]]ar. Dock är det inte helt nödvändigt att kunna dem alla utantill. Det är bra att komma ihåg vilka olika typer av [[tagg]]ar som finns, men de mer obskyra [[tagg]]arna kan man alltid slå upp när man väl behöver dem.

I de flesta fall finns det en [[tagg]] som passar det syfte man är ute efter, men för de tillfällen då man inte hittar exakt vad man behöver så finns det några generella [[tagg]]ar som kan användas för att märka upp information som inte har någon speciell [[semantik|semantisk]] betydelse. En vanlig anledning till att vilja markera upp saker med dessa generella [[tagg]]ar är för att informationen ska ges ett speciellt utseende, med hjälp av [[CSS]], eller för att informationen ska behandlas av ett [[JavaScript]]-program.

== Starttaggar ==
Man inleder alltså ett element i HTML-kod med en starttagg. Starttaggen anges på formen <code><''taggnamn''></code>, där <code>''taggnamn''</code> är en av alla de taggar som finns med i HTML5-standarden. Man kan även ange attribut och liknande i en tagg, men det återkommer vi snart till. Det är viktigt att se till att man stavar taggnamnet helt korrekt, annars kommer inte webbläsaren att fatta vad man menar. I HTML5 går det att blanda stora/små bokstäver i ett taggnamn, men det är bäst att skriva taggnamn med små bokstäver (gemena).

<div class="well">
För att skriva vettig kod är det viktigt att du använder taggarna på rätt sätt. Varje tagg har ett specifikt syfte och ska enbart användas för detta syfte. Om du är osäker på hur en tagg ska användas, läs på innan du börjar använda den! En bra början är att titta på [[HTML5-taggar|listan över taggar]].
</div>

== Sluttaggar ==
För så gott som alla [[tagg]]ar används även en [[sluttagg]]. Precis som [[starttagg]]en talar om var ett en tagg börjar gälla, talar [[sluttagg]]en om var taggen upphör att gälla. [[Sluttagg]]ar ser ut som och heter det samma som [[starttagg]]arna, med den skillnaden att man alltid lägger till ett ”<code>/</code>”-tecken före taggnamnet. Den [[tagg]] som vi hade som exempel tidigare; ”<code><[[hx|h1]]></code>”, har alltså en motsvarande [[sluttagg]] som ser ut så här; ”<code></h1></code>”. Liksom med starttaggarna är det viktigt att stava rätt. Det är extra viktigt att inte utelämna "<code>/</code>"-tecknet. Gör du det kommer webbläsaren att tro att det är en ny starttagg, vilket kan leda till oförutsedda konsekvenser (knappast bra sådana).

== Utelämna sluttaggar ==
I vissa fall kan man utelämna [[sluttagg]]en, men det är oftast en bra vana att lägga dit den även om den inte är nödvändig. Det gör det lättare att se var ett [[element]] börjar och var det slutar, samt att vissa utvecklingsverktyg fungerar bättre om båda [[tagg]]-delarna är med. I de fall man råkar utelämna sluttaggen och den är nödvändig, kan det bli rejäla fel när webbläsaren försöker tolka ditt dokument och slutresultatet kanske inte alls blir vad du tänkt dig.

Dock finns det ett fåtal [[tagg]]ar till vilka man ''aldrig'' använder en [[sluttagg]]. Ett exempel på det är <code><img></code> som används för att lägga in bilder. Vi kommer att se några till exempel på denna typ av taggar längre fram.

== Hur skriver man ett "<"-tecken? ==
Som vi konstaterat så indikerar <code><</code> att en tagg ska starta. Om man vill ha ett ”mindre än”-tecken i sitt dokument, måste man skriva det med hjälp av en speciell kod – i detta fall är koden ”<code>&lt;</code>”. Då kommer webbläsaren att förstå att man vill visa det specifika tecknet och att det inte är en [[starttagg]]. Det finns många dylika [[teckenkod]]er, men för de flesta tecken behöver man inte använda sig av en kod.

== Sammanfattning av taggar ==
[[Fil:tldr2.png|center|En taggs uppbyggnad]]

== Övningar ==
[[Tagg-grunder övningar]]

== Nästa sektion ==
[[Element-grunder]]

[[Category:Webbutveckling]]

Tagg-grunder

2024-08-06T14:08:49Z

PGJ:

Som vi konstaterade tidigare så bygger [[HTML]] på [[tagg]]ar och [[element]]. Taggarna är de byggklossar som bygger upp sidans grundutseende och struktur. För att kunna förstå [[HTML]], måste vi förstå hur dess [[tagg]]ar och [[element]] är uppbyggda.

I de allra flesta fall består [[HTML]]-[[tagg]]arna av ett taggpar, man har en [[starttagg]] och en [[sluttagg]]. Innehållet som finns mellan [[tagg]]-delarna är den data som vi vill märka upp på något vis. När webbläsaren sedan tolkar dokumentet kommer den, med hjälp av [[tagg]]arna, att kunna behandla dokumentet på ett korrekt vis och skapa [[element]] utifrån [[tagg]]arna och deras innehåll.

== Taggarnas uppbyggnad ==
Alla [[tagg]]ar, såväl start som slut, ligger inom tecknen ”<code><</code>” och ”<code>></code>”. Så en [[tagg]] kan se ut så här ”<code><[[hx|h1]]></code>”. Detta är <code>h1</code>-taggen, vilken används för att markera att något är en huvudrubrik. När webbläsaren tolkar ett dokument och träffar på ett ”<code><</code>”-tecken kommer den att börja tolka allt från och med detta tecken som en tagg, ända tills den hittar ett motsvarande ”<code>></code>”-tecken.

HTML:s hantering av ”<code><</code>”, gör att man inte kan lägga in dessa tecken hur som helst i sina dokument. Så om man vill använda sig av ”<code><</code>” som ett vanligt tecken och inte som start för en HTML-tagg, måste man ange en specialkod. Vi återkommer till denna typ av specialkoder.

== HTML5:s tagguppsättning ==
Man kan inte uppfinna nya [[tagg]]ar allteftersom man känner för det, utan det finns en förutbestämd uppsättning av [[tagg]]ar som definierats i [[HTML5]]-[[standard]]en och det är enbart dessa taggar som webbläsare fattar. Det finns en uppsjö av olika [[tagg]]ar. Dock är det inte helt nödvändigt att kunna dem alla utantill. Det är bra att komma ihåg vilka olika typer av [[tagg]]ar som finns, men de mer obskyra [[tagg]]arna kan man alltid slå upp när man väl behöver dem.

I de flesta fall finns det en [[tagg]] som passar det syfte man är ute efter, men för de tillfällen då man inte hittar exakt vad man behöver så finns det några generella [[tagg]]ar som kan användas för att märka upp information som inte har någon speciell [[semantik|semantisk]] betydelse. En vanlig anledning till att vilja markera upp saker med dessa generella [[tagg]]ar är för att informationen ska ges ett speciellt utseende, med hjälp av [[CSS]], eller för att informationen ska behandlas av ett [[JavaScript]]-program.

== Starttaggar ==
Man inleder alltså ett element i HTML-kod med en starttagg. Starttaggen anges på formen <code><''taggnamn''></code>, där <code>''taggnamn''</code> är en av alla de taggar som finns med i HTML5-standarden. Man kan även ange attribut och liknande i en tagg, men det återkommer vi snart till. Det är viktigt att se till att man stavar taggnamnet helt korrekt, annars kommer inte webbläsaren att fatta vad man menar. I HTML5 går det att blanda stora/små bokstäver i ett taggnamn, men det är bäst att skriva taggnamn med små bokstäver (gemena).

<div class="well well-warning">
För att skriva vettig kod är det viktigt att du använder taggarna på rätt sätt. Varje tagg har ett specifikt syfte och ska enbart användas för detta syfte. Om du är osäker på hur en tagg ska användas, läs på innan du börjar använda den! En bra början är att titta på [[html5-taggar|listan över taggar]].
</div>

== Sluttaggar ==
För så gott som alla [[tagg]]ar används även en [[sluttagg]]. Precis som [[starttagg]]en talar om var ett en tagg börjar gälla, talar [[sluttagg]]en om var taggen upphör att gälla. [[Sluttagg]]ar ser ut som och heter det samma som [[starttagg]]arna, med den skillnaden att man alltid lägger till ett ”<code>/</code>”-tecken före taggnamnet. Den [[tagg]] som vi hade som exempel tidigare; ”<code><[[hx|h1]]></code>”, har alltså en motsvarande [[sluttagg]] som ser ut så här; ”<code></h1></code>”. Liksom med starttaggarna är det viktigt att stava rätt. Det är extra viktigt att inte utelämna "<code>/</code>"-tecknet. Gör du det kommer webbläsaren att tro att det är en ny starttagg, vilket kan leda till oförutsedda konsekvenser (knappast bra sådana).

== Utelämna sluttaggar ==
I vissa fall kan man utelämna [[sluttagg]]en, men det är oftast en bra vana att lägga dit den även om den inte är nödvändig. Det gör det lättare att se var ett [[element]] börjar och var det slutar, samt att vissa utvecklingsverktyg fungerar bättre om båda [[tagg]]-delarna är med. I de fall man råkar utelämna sluttaggen och den är nödvändig, kan det bli rejäla fel när webbläsaren försöker tolka ditt dokument och slutresultatet kanske inte alls blir vad du tänkt dig.

Dock finns det ett fåtal [[tagg]]ar till vilka man ''aldrig'' använder en [[sluttagg]]. Ett exempel på det är <code><img></code> som används för att lägga in bilder. Vi kommer att se några till exempel på denna typ av taggar längre fram.

== Hur skriver man ett "<"-tecken? ==
Som vi konstaterat så indikerar <code><</code> att en tagg ska starta. Om man vill ha ett ”mindre än”-tecken i sitt dokument, måste man skriva det med hjälp av en speciell kod – i detta fall är koden ”<code>&lt;</code>”. Då kommer webbläsaren att förstå att man vill visa det specifika tecknet och att det inte är en [[starttagg]]. Det finns många dylika [[teckenkod]]er, men för de flesta tecken behöver man inte använda sig av en kod.

== Sammanfattning av taggar ==
[[Fil:tldr2.png|center|En taggs uppbyggnad]]

== Övningar ==
[[Tagg-grunder övningar]]

== Nästa sektion ==
[[Element-grunder]]

[[Category:Webbutveckling]]

HTML-grunder

2024-08-06T13:58:59Z

PGJ:

[[HTML]] är den grund på vilken all [[webbutveckling]] vilar. Alla andra [[webbteknik]]er går det att klara sig utan, men man kan inte bygga upp en webbsida utan [[HTML]].

Det går visserligen att skapa webbsidor utan att lära sig [[HTML]]. Det kan man göra genom att använda sig av så kallade [[WYSIWYG]]-verktyg. I dessa skapar man sidorna visuellt, snarare än genom att skriva koder – exempel på sådana verktyg är [http://www.adobe.com/se/products/dreamweaver.html Adobe Dreamweaver] och [http://www.aptana.com/ Aptana] (den senare är helt gratis). Även om du kan skapa riktigt avancerade sidor i dylika verktyg, kommer du inte att komma långt med [[webbutveckling]] om du inte lär dig grunderna inom [[HTML]]. Detta gäller inte minst om du ska skapa [[webbplats|webbplatser]] med dynamiskt innehåll. Turligt nog är inte [[HTML]] så jättesvårt att lära sig.
== Vad betyder HTML? ==
[[HTML]] är en förkortning av "HyperText Markup Language". Vi jobbar oss igenom termerna baklänges för att förstå vad de handlar om.

=== Language ===
”Language” gör att vi kan förstå att detta är ett slags språk. I grund och botten består HTML-språket av engelska ord, eller förkortningen av engelska ord. Liksom för det mesta när man jobbar med datorer har de olika orden en väldigt specifik mening och när vi lär oss [[HTML]] så lär vi oss hur webbklienter, oftast webbläsare, kommer att tolka dessa ord. Det är vi som måste anpassa oss till att använda språket på ett sätt som webbläsaren kan förstå. Vi kan inte använda vilka uttryck som helst, utan vi måste använda oss av de fåtal ord som webbläsaren förstår och vi måste använda dem på ett vis som klienten klarar av att begripa. Man talar ofta om [[syntax]] och [[semantik]] i dessa sammanhang, vi återkommer till vad dessa begrepp betyder lite senare.

=== Markup ===
Vad betyder då resten av förkortningen? ”Markup” kommer från att vi markerar information i vårt dokument med hjälp av olika [[tagg]]ar. Dessa är ungefär samma sak som etiketter och de markerar vad innehållet innanför dem har för funktionalitet. På så vis beskriver vi strukturen i ett dokument, där vi noggrant talar om vad varje bit av dokumentet har för funktion. Markeringarna är instruktioner till de [[webbklient]]er som ska tolka och visa upp sidan. För att åstadkomma dessa markeringar använder vi oss av [[HTML]]-[[tagg]]ar.

[[Tagg]]ar är alltså små, korta ”etiketter” som anger hur efterföljande data ska tolkas. De flesta taggar består av ett taggpar, en [[starttagg]] och en [[sluttagg]]. Allt som befinner sig innanför dessa taggpar bildar ett [[element]]. Sammantaget är det dessa [[element]] som bygger upp en komplett webbsida. När vi nu börjar att lära oss [[HTML]], är det just de olika [[tagg]]arna vi kommer att lära oss. Vi kommer att gå in på vad de heter, vad de gör och hur de ska användas.

<div class="well">
[[HTML5-taggar|Här]] hittar du en lista över de taggar som är tillgängliga i [[HTML5]].
</div>

=== HyperText ===
Sen har vi då det sista, mer kryptiska ordet i förkortningen – nämligen, [[hypertext]]. Detta är en teknik som gör att man kan länka samman olika typer av information. Även om ”text” verkar ange att det enbart är text som kan länkas, så stämmer det inte längre. I stort sett kan vad som helst vara en länk som leder vidare till annan information. Det handlar alltså om webblänkar, såna som används i alla webbsidor. Informationen man länkar till kan i princip vara vad som helst, kanske en annan webbsida eller någon annan typ av media som ska visas upp.

I [[HTML]]s grundkoncept ingår alltså tanken att man ska kunna länka samman olika typer av information. Länkarna kan ses som trådar som leder kors och tvärs mellan olika typer av information. Trådar som i sin tur bildar ett nät – vilket är det som gett namnet åt webben (”web” betyder ju nät eller spindelnät på engelska). Idén med hyperlänkat material är långt ifrån ny och du kan läsa mer om historiken i ett [[Webbhistorik|annat avsnitt]] .

== Vad används [[HTML]] till? ==
[[HTML]] är alltså en teknik som används för att skapa dokument, ge dem en struktur samt att det ger möjligheten att länka dokumentets innehåll så att det leder till annat innehåll. Inom datavärlden brukar vi kalla detta för ett dokumentformat eller ett dataformat. [[HTML]] är relativt strikt, man kan inte skapa nya [[tagg]]ar eller använda taggar hipp som happ, utan man måste följa den angivna mallen – eller [[standard]]en.

Den version av [[HTML]] som vi kommer att lära oss här på Webbling är [[HTML5]]. Vilket är, i skrivandes stund, den senaste [[HTML]]-versionen.

== Övningar ==
[[HTML-grunder övningar]]

== Nästa aktivtet ==
[[Tagg-grunder]]

[[Category:Webbutveckling]]

Introduktion till webbteknik

2024-08-06T13:35:13Z

PGJ:

Om du lyckats ta dig till den här sidan, vet du nog ganska bra hur man använder en webbläsare för att navigera på webben. Men du kanske inte känner till de tekniker som används för att skicka, tolka och visa en webbsida. Det händer en hel del ”bakom kulisserna”, från det du begär att du vill hämta en specifik sida, tills att den visas upp i din webbläsare.
== Webbutveckling ==
Webbutveckling är termen som man använder för arbetet kring att skapa webbsidor, webbplatser och webbapplikationer. Allt som har med webbens funktionalitet att göra kallas för webbteknik. Dessa begrepp kan dock innefatta en hel del olika saker, eftersom det är så breda fält. I webbutveckling kan det ingå allt möjligt; design av sidans utseende (kanske i Photoshop eller som en skiss på papper), framtagandet av prototyper, kodningen av själva sidan, testning av sidan, optimering av sidan, publicering av sidan och mycket, mycket mer. Webbteknik handlar mer om de rent tekniska aspekterna och inte så mycket om design och utseende.

== Webbtekniker ==
Vi kommer att börja med att titta på en webbsidas anatomi. Hur är den uppbyggd? Vilka tekniker, protokoll och standarder är det som samarbetar för att visa en sida? Vad betyder alla koder som syns om man tittar på källkoden till en webbsida?

Det finns några tekniker som är absolut nödvändiga för att skapa sidor. En del av dessa tekniker är nyare än andra. När webben skapades 1989, var den främst tänkt att användas till att distribuera vetenskapliga rapporter. Till att börja med kunde man inte ens lägga in grafik i en webbsida! Idag har vi dock webbsidor som kan innehålla det mest spektakulära multimediala innehållet.

== Webbsidans grundstenar ==
En modern webbsida byggs upp med hjälp av flertalet olika webbtekniker. I grunden handlar det om följande komponenter:

=== [[HTML]] ===
[[HTML]] beskriver sidans struktur och informationens logiska uppdelning. Även om en webbsida kan vara fylld av allt möjligt multimedialt innehåll, så är HTML-kod helt och hållet ren text. Detta gäller även för CSS och JavaScript.

=== [[CSS]] ===
[[CSS]] används för att skapa utseende och layout för en webbsida. [[CSS]] kan även användas för att skapa diverse effekter, animationer och viss interaktivitet.

=== [[JavaScript]] ===
[[JavaScript]] används för att skapa interaktivitet på sidan och för att programmera sådant som inte ovanstående grundtekniker klarar av. Detta är grunden för de flesta webbapplikationer, såsom t.ex. Facebook, Gmail, osv.

<div class="well-danger">
(Obs: programmeringsspråken [[JavaScript]] och [[Java]] har inget med varandra att göra, det är två helt olika språk!)
</div>

=== Andra tekniker ===
Förutom de ovannämnda teknikerna, finns det olika typer av grafik-, ljud- och video-format samt allt möjligt annat som kan ingå i en modern webbsida.

== Nästa aktivtet ==
Vi kommer gå in på vardera teknik i mer detalj följande avsnitt, till att börja med ska vi koncentrera oss på [[HTML]].

[[HTML-grunder]]

[[Category:Webbutveckling]]

Webbutveckling

2024-08-06T13:28:11Z

PGJ:

Webben har kommit att bli den naturliga plattformen för så gott som allt som publiceras idag. Användningen av webben som informationskälla har vuxit lavinartat, samtidigt som webben även har blivit en stark plattform för att köra alla möjliga typer av applikationer.

Webbutveckling är egentligen ett ganska brett område som täcker in många olika tekniker. Man brukar dock ofta dela in webbutveckling i två underområden:
==== Klientsidan ====
En klient är något hämtar en webbsida från en server. Oftast är klienten en webbläsare. Dock kan det även vara andra saker, t.ex. en sökmotor som läser in materialet på sidan.

Om det är en webbläsare som hämtar och visar sidan, så har finns troligen en _användare_ som vill titta på sidan. Oftast så anpassar vi våra sidor så att användaren får en så bra upplevelse som möjligt.

Utveckling för klientsidan, ofta kallat "front-end" eller "client-side" på engelska, omfattar allt som kommer att köras och synas på användaren sida. Det kan alltså vara design, informationsinnehåll, [[skript]], o.s.v. Huvudteknikerna som används är [[HTML]], [[CSS]] och [[JavaScript]].

==== Serversidan ====
Utveckling för serversidan, ofta kallat "back-end" på engelska, handlar om allt som körs på webbservern. Detta omfattar olika typer av applikationer som skapar webbmaterial som kan hämtas hem av en webbklient.

Applikationerna kan skapas på en mängd olika vis, ofta är de programmerade i [[PHP]] eller [[JavaScript]]. Det kan även handla om olika typer av tjänster som inte är avsedda för en användare, t.ex. sådana tjänster som tillhandahåller andra webbapplikationer med data eller funktionalitet.

Typografi - diverse egenskaper

2022-09-08T07:12:47Z

PGJ:

Lite gott och blandat med olika CSS-egenskaper som påverkar text.

== <code>[[line-height]]</code> ==
Denna egenskap anger hur långt avståndet ska vara mellan två textrader. Detta går att ange på en rad olika vis. Följande värden kan sättas:
:<code>normal</code>: Sätter normal radhöjd. Detta är defaultvärdet.

;<code>''siffra''</code>: En siffra utan efterföljande enhet anger en multiplikationsfaktor. Webbläsaren kommer att sätta linjeavståndet till faktorn multiplicerad med fontstorleken.

;<code>''höjd''</code>: Höjdvärdet ska efterföljas av en CSS-enhet, t.ex. <code>px</code>.

;<code>''procent''</code>: Anger linjehöjden som en procent av nuvarande fontstorlek.

Exempel på hur man kan använda radhöjd:
<codepen pen="mPWmpj" height="940" tab="css,result">
</codepen>



__FORCETOC__

Flexbox - styra layoutflödet längs korsaxeln

2022-09-08T07:03:10Z

PGJ:

En av de viktigaste sakerna vi vill kunna styra över, är hur flexelementen placeras i förhållande till korsaxeln. Detta styr vi med hjälp av <code>align-items</code> och <code>align-self</code>.

== <code>align-items</code> ==
Med denna egenskap kan man ange hur flexinnehållet ska placeras ut i flexboxen. Detta används för att styra hur boxarna placeras i förhållande till korsaxeln. Detta är en mycket användbar egenskap, som gör att man t.ex. kan centrera saker enkelt samt att man lätt kan skapa flera kolumner som har samma höjd (vilket tidigare var svårt i CSS).

Här är de möjliga värdena på denna egenskap (alla exempel utgår ifrån att man placeras innehållet på en rad, men det fungerar likvärdigt för kolumner):

=== <code>flex-start</code> ===
[[Fil:AlignItemsFlexStart.png]]

Allt flexmaterial justeras mot starten på flexboxen. Det vill säga det som har <code>flex-direction: row;</code> justeras mot "toppen" på flexboxen, medan det som har <code>flex-direction: column;</code> justeras mot vänstermarginalen.

<codepen pen="zGVNvq" height="500" tab="css,result">
</codepen>

=== <code>flex-end</code> ===
[[Fil:AlignItemsFlexEnd.png]]

Allt flexmaterial justeras mot slutet av flexboxen. Om man t.ex. har <code>flex-direction: row</code> blir detta mot botten.

<codepen pen="MwMJjY" height="500" tab="css,result">
</codepen>

=== <code>center</code> ===
[[Fil:AlignItemsCenter.png]]

Allt flexmaterial centerjusteras mot flexboxens mitt.

<codepen pen="waLgzR" height="500" tab="css,result">
</codepen>

=== <code>stretch</code> ===
[[Fil:AlignItemsStretch.png]]

Detta är defaultvärdet. Flexinnehållet sträcks ut så att det fyller upp hela flexboxen ifrån topp till botten. Dock tar webbläsaren eventuella <code>height</code>/<code>max-height</code> och <code>width</code>/<code>max-width</code>, i beaktande och om dessa är angivna kommer flexinnehållet enbart att stretchas så de håller sig inom dessa gränser.

<codepen pen="JdQEbN" height="500" tab="css,result">
</codepen>

=== <code>baseline</code> ===
[[Fil:AlignItemsBaseline.png]]

Allt flexmaterial centreras så att deras [[baseline|baslinje]] ligger på samma nivå. Speciellt användbart om man har olika textstorlek i flexmaterialet.

<codepen pen="BNgpWv" height="200" tab="css,result">
</codepen>

== <code>align-self</code> ==
Om man vill att en specifik flexelement ska ha en annan justering än övriga element i flexboxen, kan man sätta det med hjälp av <code>align-self</code>. Parametrarna till egenskapen fungerar precis som med <code>align-items</code>, förutom att det enbart sätts på de element som CSS-regeln väljer ut. I detta exempel är defaultjusteringen <code>center</code>, medan låda tre har <code>align-self: flex-end</code>.
<codepen pen="doBNWJ" height="300" tab="css,result">
</codepen>

== Övningar ==
Välj "Edit on CodePen" för att göra övningarna där.

=== Övning 1 ===
Ändra så att alla flexelement hamnar sist på flexaxeln.
<codepen pen="NwKMNj" height="300" tab="result">
</codepen>

=== Övning 2 ===
Ändra så att alla flexelement ligger centrerade, förutom det första som ska ligga i starten och det sista som ska ligga i slutet.
<codepen pen="MOgGOB" height="300" tab="result">
</codepen>

== Nästa aktivitet ==
[[Flexbox - styra layoutflödet längs flexaxeln]]

[[Category:Webbutveckling]]

Flexbox - styra layoutflödet längs flexaxeln

2022-09-08T07:02:42Z

PGJ:

Vi vill självklart kunna styra hur layouten sker i förhållande till flexaxeln också. Det görs med egenskapen <code>[[justify-content]]</code>

== <code>justify-content</code> ==

Med denna egenskap kan man sätta hur de olika flexelementen ska justeras/fördelas längs med flexaxeln.

Följande värden kan anges:

=== <code>flex-start</code> ===
[[Fil:FlexboxJustifyStart.png]]

Defaultvärdet. Allt flexmaterial samlas mot starten av flexboxen. Om vi har "normal" <code>[[ltr]]</code> och det är en radbaserad flexbehållare, kommer allt innehåll att samlas mot vänsterkanten.
<codepen pen="LVKxLz" height="300" tab="css,result">
</codepen>

=== <code>flex-end</code> ===

[[Fil:FlexboxJustifiedEnd.png]]

Allt flexmaterial samlas i slutet av flexboxen. Om vi har "normal" <code>[[rtl]]</code>/<code>[[ltr]]</code> och det är en radbaserad flexbehållare, kommer allt innehåll att samlas mot högerkanten.
<codepen pen="KpjavK" height="300" tab="css,result">
</codepen>

=== <code>center</code> ===
[[Fil:FlexboxJustifyCenter.png]]

Allt flexmaterial centreras mot mitten av flexboxen. Kombinerar vi detta med <code>align-items: center;</code> kan vi enkelt centerjustera innehåll såväl horisontellt, som vertikalt. Vilket vi gör i följande exempel.
<codepen pen="eNqVNr" height="300" tab="css,result">
</codepen>

=== <code>space-between</code> ===

[[Fil:FlexboxJustifySpaceBetween.png]]

Flexelementen distribueras jämt, längs med flexboxen. Tomrummet i flexbehållaren fördelas lika mellan flexelement och sätts som marginaler mellan dessa. De yttersta elementen i flexaxelns båda ändar får inga marginaler mot ändarna, utan de kommer att placeras i kant med slutpunkterna.

<codepen pen="waLgqO" height="300" tab="css,result">
</codepen>

=== <code>space-around</code> ===
[[Fil:FlexboxJustifySpaceAround.png]]

Flexelementen distribueras jämt, längs med flexboxen och med lika mycket mellanrum mellan varje element. Tomrummet i flexbehållaren fördelas lika mellan flexelement och sätts som marginaler mellan dessa. De yttersta elementen i flexaxelns båda ändar får halva marginalstorleken jämtemot ändarna. Det vill säga om man lägger samman ändmarginalerna, så blir de tillsammans lika breda som övriga mellanmarginaler i flexbehållaren.

<codepen pen="doBNZd" height="300" tab="css,result">
</codepen>

== Övningar ==
Välj "Edit on CodePen" för att göra övningarna där.

=== Övning 1 ===
Flytta alla flexelement så de ligger jämt fördelade mot på raden. De ska börja ifrån kanten på flexlådan.
<codepen pen="dZbeeo" height="300" tab="result">
</codepen>

=== Övning 2 ===
Alla boxar ska centreras horisontellt. Första boxen ska ligga längst upp, tvåan i mitten, trean längst ned och fyran i mitten.
<codepen pen="wPwjxr" height="300" tab="result">
</codepen>

== Nästa aktivitet ==
[[Flexbox - flexbehållare med flera rader]]

[[Category:Webbutveckling]]

Flexbox - styra layoutflödet längs korsaxeln

2022-09-08T07:01:58Z

PGJ:

En av de viktigaste sakerna vi vill kunna styra över, är hur flexelementen placeras i förhållande till korsaxeln. Detta styr vi med hjälp av <code>align-items</code> och <code>align-self</code>.

== <code>align-items</code> ==
Med denna egenskap kan man ange hur flexinnehållet ska placeras ut i flexboxen. Detta används för att styra hur boxarna placeras i förhållande till korsaxeln. Detta är en mycket användbar egenskap, som gör att man t.ex. kan centrera saker enkelt samt att man lätt kan skapa flera kolumner som har samma höjd (vilket tidigare var svårt i CSS).

Här är de möjliga värdena på denna egenskap (alla exempel utgår ifrån att man placeras innehållet på en rad, men det fungerar likvärdigt för kolumner):

=== <code>flex-start</code> ===
[[Fil:AlignItemsFlexStart.png]]

Allt flexmaterial justeras mot starten på flexboxen. Det vill säga det som har <code>flex-direction: row;</code> justeras mot "toppen" på flexboxen, medan det som har <code>flex-direction: column;</code> justeras mot vänstermarginalen.

<codepen pen="zGVNvq" height="500" tab="css,result">
</codepen>

=== <code>flex-end</code> ===
[[Fil:AlignItemsFlexEnd.png]]

Allt flexmaterial justeras mot slutet av flexboxen. Om man t.ex. har <code>flex-direction: row</code> blir detta mot botten.

<codepen pen="MwMJjY" height="500" tab="css,result">
</codepen>

=== <code>center</code> ===
[[Fil:AlignItemsCenter.png]]

Allt flexmaterial centerjusteras mot flexboxens mitt.

<codepen pen="waLgzR" height="500" tab="css,result">
</codepen>

=== <code>stretch</code> ===
[[Fil:AlignItemsStretch.png]]

Detta är defaultvärdet. Flexinnehållet sträcks ut så att det fyller upp hela flexboxen ifrån topp till botten. Dock tar webbläsaren eventuella <code>height</code>/<code>max-height</code> och <code>width</code>/<code>max-width</code>, i beaktande och om dessa är angivna kommer flexinnehållet enbart att stretchas så de håller sig inom dessa gränser.

<codepen pen="JdQEbN" height="500" tab="css,result">
</codepen>

=== <code>baseline</code> ===
[[Fil:AlignItemsBaseline.png]]

Allt flexmaterial centreras så att deras [[baseline|baslinje]] ligger på samma nivå. Speciellt användbart om man har olika textstorlek i flexmaterialet.

<codepen pen="BNgpWv" height="200" tab="css,result">
</codepen>

== <code>align-self</code> ==
Om man vill att en specifik flexelement ska ha en annan justering än övriga element i flexboxen, kan man sätta det med hjälp av <code>align-self</code>. Parametrarna till egenskapen fungerar precis som med <code>align-items</code>, förutom att det enbart sätts på de element som CSS-regeln väljer ut. I detta exempel är defaultjusteringen <code>center</code>, medan låda tre har <code>align-self: flex-end</code>.
<codepen pen="doBNWJ" height="300" tab="css,result">
</codepen>

== Övningar ==
Välj "Edit on CodePen" för att göra övningarna där.

=== Flexövning 1 ===
Ändra så att alla flexelement hamnar sist på flexaxeln.
<codepen pen="NwKMNj" height="300" tab="result">
</codepen>

=== Flexövning 2 ===
Ändra så att alla flexelement ligger centrerade, förutom det första som ska ligga i starten och det sista som ska ligga i slutet.
<codepen pen="MOgGOB" height="300" tab="result">
</codepen>

== Nästa aktivitet ==
[[Flexbox - styra layoutflödet längs flexaxeln]]

[[Category:Webbutveckling]]

Flexbox - styra layoutflödet längs korsaxeln

2022-09-08T06:59:14Z

PGJ:

En av de viktigaste sakerna vi vill kunna styra över, är hur flexelementen placeras i förhållande till korsaxeln. Detta styr vi med hjälp av <code>align-items</code> och <code>align-self</code>.

== <code>align-items</code> ==
Med denna egenskap kan man ange hur flexinnehållet ska placeras ut i flexboxen. Detta används för att styra hur boxarna placeras i förhållande till korsaxeln. Detta är en mycket användbar egenskap, som gör att man t.ex. kan centrera saker enkelt samt att man lätt kan skapa flera kolumner som har samma höjd (vilket tidigare var svårt i CSS).

Här är de möjliga värdena på denna egenskap (alla exempel utgår ifrån att man placeras innehållet på en rad, men det fungerar likvärdigt för kolumner):

=== <code>flex-start</code> ===
[[Fil:AlignItemsFlexStart.png]]

Allt flexmaterial justeras mot starten på flexboxen. Det vill säga det som har <code>flex-direction: row;</code> justeras mot "toppen" på flexboxen, medan det som har <code>flex-direction: column;</code> justeras mot vänstermarginalen.

<codepen pen="zGVNvq" height="500" tab="css,result">
</codepen>

=== <code>flex-end</code> ===
[[Fil:AlignItemsFlexEnd.png]]

Allt flexmaterial justeras mot slutet av flexboxen. Om man t.ex. har <code>flex-direction: row</code> blir detta mot botten.

<codepen pen="MwMJjY" height="500" tab="css,result">
</codepen>

=== <code>center</code> ===
[[Fil:AlignItemsCenter.png]]

Allt flexmaterial centerjusteras mot flexboxens mitt.

<codepen pen="waLgzR" height="500" tab="css,result">
</codepen>

=== <code>stretch</code> ===
[[Fil:AlignItemsStretch.png]]

Detta är defaultvärdet. Flexinnehållet sträcks ut så att det fyller upp hela flexboxen ifrån topp till botten. Dock tar webbläsaren eventuella <code>height</code>/<code>max-height</code> och <code>width</code>/<code>max-width</code>, i beaktande och om dessa är angivna kommer flexinnehållet enbart att stretchas så de håller sig inom dessa gränser.

<codepen pen="JdQEbN" height="500" tab="css,result">
</codepen>

=== <code>baseline</code> ===
[[Fil:AlignItemsBaseline.png]]

Allt flexmaterial centreras så att deras [[baseline|baslinje]] ligger på samma nivå. Speciellt användbart om man har olika textstorlek i flexmaterialet.

<codepen pen="BNgpWv" height="200" tab="css,result">
</codepen>

== <code>align-self</code> ==
Om man vill att en specifik flexelement ska ha en annan justering än övriga element i flexboxen, kan man sätta det med hjälp av <code>align-self</code>. Parametrarna till egenskapen fungerar precis som med <code>align-items</code>, förutom att det enbart sätts på de element som CSS-regeln väljer ut. I detta exempel är defaultjusteringen <code>center</code>, medan låda tre har <code>align-self: flex-end</code>.
<codepen pen="doBNWJ" height="300" tab="css,result">
</codepen>

== Övningar ==
Välj "Edit on CodePen" för att göra övningarna där.

* Ändra så att alla flexelement hamnar sist på flexaxeln.
<codepen pen="NwKMNj" height="300" tab="result">
</codepen>

* Ändra så att alla flexelement ligger centrerade, förutom det första som ska ligga i starten och det sista som ska ligga i slutet.
<codepen pen="MOgGOB" height="300" tab="result">
</codepen>

== Nästa aktivitet ==
[[Flexbox - styra layoutflödet längs flexaxeln]]

[[Category:Webbutveckling]]

Flexbox - styra layoutflödet längs korsaxeln

2022-09-08T06:58:50Z

PGJ:

En av de viktigaste sakerna vi vill kunna styra över, är hur flexelementen placeras i förhållande till korsaxeln. Detta styr vi med hjälp av <code>align-items</code> och <code>align-self</code>.

== <code>align-items</code> ==
Med denna egenskap kan man ange hur flexinnehållet ska placeras ut i flexboxen. Detta används för att styra hur boxarna placeras i förhållande till korsaxeln. Detta är en mycket användbar egenskap, som gör att man t.ex. kan centrera saker enkelt samt att man lätt kan skapa flera kolumner som har samma höjd (vilket tidigare var svårt i CSS).

Här är de möjliga värdena på denna egenskap (alla exempel utgår ifrån att man placeras innehållet på en rad, men det fungerar likvärdigt för kolumner):

=== <code>flex-start</code> ===
[[Fil:AlignItemsFlexStart.png]]

Allt flexmaterial justeras mot starten på flexboxen. Det vill säga det som har <code>flex-direction: row;</code> justeras mot "toppen" på flexboxen, medan det som har <code>flex-direction: column;</code> justeras mot vänstermarginalen.

[http://exempel.webbling.se/flexbox11.html Exempel].
<codepen pen="zGVNvq" height="500" tab="css,result">
</codepen>

=== <code>flex-end</code> ===
[[Fil:AlignItemsFlexEnd.png]]

Allt flexmaterial justeras mot slutet av flexboxen. Om man t.ex. har <code>flex-direction: row</code> blir detta mot botten.

<codepen pen="MwMJjY" height="500" tab="css,result">
</codepen>

=== <code>center</code> ===
[[Fil:AlignItemsCenter.png]]

Allt flexmaterial centerjusteras mot flexboxens mitt.

<codepen pen="waLgzR" height="500" tab="css,result">
</codepen>

=== <code>stretch</code> ===
[[Fil:AlignItemsStretch.png]]

Detta är defaultvärdet. Flexinnehållet sträcks ut så att det fyller upp hela flexboxen ifrån topp till botten. Dock tar webbläsaren eventuella <code>height</code>/<code>max-height</code> och <code>width</code>/<code>max-width</code>, i beaktande och om dessa är angivna kommer flexinnehållet enbart att stretchas så de håller sig inom dessa gränser.

<codepen pen="JdQEbN" height="500" tab="css,result">
</codepen>

=== <code>baseline</code> ===
[[Fil:AlignItemsBaseline.png]]

Allt flexmaterial centreras så att deras [[baseline|baslinje]] ligger på samma nivå. Speciellt användbart om man har olika textstorlek i flexmaterialet.

<codepen pen="BNgpWv" height="200" tab="css,result">
</codepen>

== <code>align-self</code> ==
Om man vill att en specifik flexelement ska ha en annan justering än övriga element i flexboxen, kan man sätta det med hjälp av <code>align-self</code>. Parametrarna till egenskapen fungerar precis som med <code>align-items</code>, förutom att det enbart sätts på de element som CSS-regeln väljer ut. I detta exempel är defaultjusteringen <code>center</code>, medan låda tre har <code>align-self: flex-end</code>.
<codepen pen="doBNWJ" height="300" tab="css,result">
</codepen>

== Övningar ==
Välj "Edit on CodePen" för att göra övningarna där.

* Ändra så att alla flexelement hamnar sist på flexaxeln.
<codepen pen="NwKMNj" height="300" tab="result">
</codepen>

* Ändra så att alla flexelement ligger centrerade, förutom det första som ska ligga i starten och det sista som ska ligga i slutet.
<codepen pen="MOgGOB" height="300" tab="result">
</codepen>

== Nästa aktivitet ==
[[Flexbox - styra layoutflödet längs flexaxeln]]

[[Category:Webbutveckling]]

Flexbox - sätta storlek

2022-09-08T06:50:44Z

PGJ:

Det finns ett antal CSS-egenskaper som kan användas för att styra flexboxars layout och flöde. Vi börjar att titta på hur flexbox hanterar flexelementens storlek. Det är rätt så komplext hur den slutgiltiga storleken beräknas, men man behöver inte förstå detta i in i minsta detalj.

<div class="well well-warning">
Lägg märke till att de CSS-egenskaper vi diskuterar i detta avsnitt sätts på de individuella flexelementen, inte på flexbehållaren!
</div>

<div class="well well-danger">
Här nedan presenteras storleksegenskaperna för flexelement var för sig. Det bästa är dock att sätta dem med [[samlingsegenskap]]en <code>flex</code>. Då får man vettigare defaultvärden som grund. Det är nämligen som så att de indviduella elementen har andra defaultvärden då de sätt individuellt än om man sätter dem med samlingsegenskapen. Vilket är rätt märkligt, men något som vi får leva med. Efter presentationen av de individuella egenskaperna, följer en presentation av samlingsegenskapen.
</div>

== <code>[[flex-basis]]</code> ==
För att sätta grundstorleken på ett flexelement används <code>flex-basis</code>. Den slutliga storleken kan bli något helt annat då det finns andra egenskaper som tas med i beräkningen.

I stort sett fungerar denna egenskap som vanliga <code>[[width]]</code> eller <code>[[height]]</code> (beroende på <code>[[flex-direction]]</code>). Du anger samma typ av värden här som för de egenskaperna. Värdet kan anges med hjälp av alla [[Måttenheter_i_CSS|CSS-måttenheter]].

I följande exempel sätter vi att varje flexelement tar upp 10 % av flexbehållarens bredd. Detta är deras grundstorlek och den kan påverkas av övriga egenskaper som styr flex-elements storlek.
<codepen pen="PPZYGa" tab="css,result" height="200">
</codepen>

Det går även att ange ett av de två kodorden <code>auto</code> eller <code>content</code> som värde till <code>flex-basis</code>.

=== <code>auto</code> ===
Om man anger <code>auto</code> kommer webbläsaren att ta bredden ifrån eventuell <code>[[width]]</code> (eller <code>[[height]]</code>, beroende på <code>flex-direction</code>). Om även denna är satt till <code>auto</code>, kommer det bli samma resultat som om man angav <code>content</code>.

=== <code>content</code> ===
Storleken på flexelementet kommer att sättas utifrån storleken på dess innehåll. Webbläsaren kommer att sätta ett grundvärde på <code>flex-basis</code> så att allt i elementet får plats.

== <code>[[flex-grow]]</code> ==
[[Fil:Flexgrow.png]]

Lite förenklat kan man säga att <code>flex-grow</code> anger hur flexboxarna ska "växa till sig" och fylla upp tillgängligt, fritt utrymme. Som parameter tar denna egenskap ett enhetslöst tal som anger hur stor proportion av det fria utrymmet i flexbehållaren som flexelementet ska använda sig av. Det fria utrymmet är alltså det utrymme i flexbehållaren som inte fylls upp av flexelementens när man tar deras grundstorlek i beräkning .

Vad räknas som fritt utrymme? Här är ett exmpel:
<codepen pen="EKWZjo" tab="css,result" height="200">
</codepen>
I exemplet ovan, har vi tre flexelement som alla har <code>flex-basis: 10%;</code>. De fyller med andra ord upp 30 % av flexbehållaren. Detta gör att vi har 70 % fritt utrymme över. Om du tittar på "result"-fliken i exemplet ovan, så är den bit som visas som gul det fria utrymmet. Det är fördelningen av detta fria utrymme som <code>flex-grow</code> styr över.

I det enklaste fallet kanske vi har flexelement som alla har detta värde satt till <code>1</code>. Då kommer eventuellt fritt utrymme att fördelas med lika stor del till varje element. Vi modifierar det tidigare exemplet, så att det använder sig av <code>flex-grow</code>.
<codepen pen="YywKQY" tab="css,result" height="400">
</codepen>
Eftersom alla lådor har såväl samma <code>flex-basis</code> som <code>flex-grow</code> får vi alltså tre lådor som alla har samma bred. Men låt säga att låda a, skulle haft dubbelt så stor <code>flex-basis</code>, dvs dubbelt så stor grundbredd, då hade det blivit att se ut så här:
<codepen pen="meVbwL" tab="css,result" height="450">
</codepen>
Nu används 10 % + 10 % + 20 %, dvs 40 %, av flexbehållaren. Vi har 60 % fritt utrymme, detta fördelas på de tre lådorna, så att de får 20 % extra utrymme var. Låda a blir då något större än de övriga. Den får fortfarande lika stor del av det tillgängliga tomrummet, men den är något större i grunden.

Vi fortsätter med en modifikation av grundexemplet. Vi har tre element med samma <code>flex-basis</code>. Av dessa har två <code>flex-grow: 1;</code>, medan de tredje har <code>flex-grow: 2;</code>. Det senare kommer då att få dubbelt så stor del av det fria utrymmet som de som har <code>1</code>.
<codepen pen="WQreOW" height="450" tab="css,result">
</codepen>

I vissa fall vill man att flexelementen ska sättas så att de tar upp allt tillgängligt utrymme och man bryr sig inte om några grundstorlekar. Det gör man genom att först sätta <code>flex-basis</code> till <code>0</code> och därefter ange vettiga värden till <code>flex-grow</code>. Då vet man att det "enda" som spelar in är proportionerna som anges i <code>flex-grow</code> och innehållets storlek tas ej med i beaktande.

Om man använder sig av samlingsegenskapen <code>flex</code>, så sätts <code>flex-basis</code>-värdet automatiskt till <code>0</code>. Vilket är ett bra defaultvärde.

== <code>[[flex-shrink]]</code> ==
Det finns även en egenskap som anger hur elementet ska omformas om det finns för lite plats i flexbehållaren. I fallet med <code>[[flex-grow]]</code> angavs hur webbläsaren skulle fördela eventuellt tomrum och använda detta till att göra flexinnehållet större. I fallet med <code>[[flex-shrink]]</code> anges hur material som skulle hamnat utanför flexbehållaren ska hanteras. I detta fall kommer flexelement att krympas så att det får plats i flexbehållaren.

Låt säga att vi har en flexbehållare vars innehåll sammanlagt går utanför behållaren med 20 %, då anger <code>[[flex-shrink]]</code> hur mycket de olika flexelement ska förminskas för att få plats med dessa 20 %. Egenskapens värde talar om hur stor andel av den överskjutande bredden, som ska dras ifrån varje element. Här följer ett exempel:
<codepen pen="QjyLme" height="550" tab="result">
</codepen>
I exemplet ovan har alla tre lådorna <code>flex-basis: 40%;</code>. De två först lådorna har <code>flex-shrink: 0</code> och påverkas alltså inte av eventuell krympning. Den sista lådan har <code>flex-shrink: 1;</code> och följdaktligen kommer den att krympas lika mycket som innehållet flödar över. Vilket i det här fallet är 20 % av flexbehållarens bredd.

Hade vi haft samma situation, med skillnaden att de två sista lådorna bägge två hade <code>flex-shrink: 1;</code>, så skulle den överskjutande bredden fördelas på bägge lådorna. Det vill säga, de skulle bägge krympas med 10 % av bredden på flexbehållaren.
<codepen pen="ZbQzqW" height="550" tab="result">
</codepen>

== <code>[[flex]]</code> ==

<div class="well well-warning">
Det rekommenderade sättet att ange värden för ovanstående egenskaper är att sätta dem med [[samlingsegenskap]]en <code>[[flex]]</code>. Om något av de tre möjliga egenskaperna utelämnas, kommer de utelämnade egenskaperna att ges bättre defaultvärden än de "normala" defaultvärdena. Ett något konstigt beteende kan tyckas!
</div>

[[Samlingsegenskap]]en <code>flex</code> kan användas för att sätta en, två eller tre av ovanstående egenskaper samtidigt. Defaultvärdena för de olika egenskaperna nollställs till följande om inget annat anges: <code>flex-grow: 1</code>, <code>flex-shrink: 1</code> och <code>flex-basis: 0</code>.

Hur egenskaperna sätts, beror på hur många och vilka värden som anges. Dessa varianter finns
(obs, som måttenhet kan även värdena <code>auto</code> eller <code>content</code> anges):
=== Ett värde ===
; Måttenhet: Om värdet har en måttenhet, antas man ange <code>flex-basis</code>. Det vill säga grundstorleken på flexelementet. De två övriga egenskaperna får sina defaultvärden.

; Andel:Om ett enhetslöst tal anges, tas detta som en andel för <code>flex-grow</code>. De två övriga egenskaperna får sina defaultvärden.

=== Två värden ===
; En måttenhet och en andel : Måttenheten anger <code>flex-basis</code>, medan andelen anger <code>flex-grow</code>. <code>flex-shrink</code> får defaultvärdet.

;Två andelar: Den första andelen kommer att tilldelas till <code>flex-grow</code>, medan den andra andelen tilldelas till <code>flex-shrink</code>.

=== Tre värden ===
Den första andel som påträffas tilldelas till <code>flex-grow</code>, medan den andra andelen tilldelas till <code>flex-shrink</code>. Måttenheten anger <code>flex-basis</code>.

== Nästa aktivitet ==
[[Flexbox - styra layoutflödet längs korsaxeln]]

[[Category:Webbutveckling]]

Flexbox - grunder

2022-09-08T06:30:52Z

PGJ:

Flexbox är ett modernare sätt att skapa layout på webbsidor. Vi kommer även att titta på andra moderna sätt på vilket man kan skapa layout, men flexbox är den enklaste metoden som ger bra resultat.

Flexbox löser många problem och förenklar mycket. Problem som flexbox löser på ett excellent sätt är bland annat: kolumner som ska ha samma höjd, centrering av element (såväl horisontellt som vertikalt) samt att flexbox ger oss layouter som är långt mer robusta och som inte "trillar" isär. Om du hållit på med traditionell webbutveckling, så vet du att detta är problem som kan kräva en hel del extra kod. Om du är nybörjare, så tro mig, du kommer att tjäna in mycket tid och bespara dig massvis med huvudbry om du använder flexbox redan ifrån början.

== Flexbox ==
Som man hör på namnet är flexbox till för att på ett flexibelt sätt hantera boxar, såväl deras position som deras storlek - vilket ju är likvärdigt med layout. Det är mycket enklare att få till en bra layout med denna teknik än om man använder sig av <code>float</code> eller liknande äldre metoder.

Flexboxar är dynamiska och webbläsaren sköter automatiskt det mesta som har att göra med placering av underelement. När man kör på olika enheter eller när man förändrar storlek på webbläsarfönstret så kommer flexbox att förändra layouten så att den passar den aktuella skärmlayouten.

== Terminologi ==
Vi behöver fastställa betydelsen för ett antal begrepp som används för att beskriva hur flexbox fungerar.
=== Flexbehållare ===
Allt som ska hanteras av flexbox, placeras i en flexbehållare. Denna kommer att vara föräldraelementet som alla flexelement placeras i.

Flexbehållare skapas genom att sätta deras <code>display</code>-typ enligt följande; <code>display: flex;</code>. Detta kommer att skapa ett blockelement vars innehåll lyder under flexboxs formateringsregler.

Det finns även en variant för att ange att själva flexbehållaren inte ska vara ett normalt blockelement, utan att den ska placeras i flödet. Denna variant skapas genom genom att sätta CSS-egenskapen så här; <code>display: inline-flex;</code>.

=== Flexelement ===
Flexelement/flexinnehåll är de underelement som placeras inuti flexbehållaren.

Det är främst block-element som påverkas av att ligga inuti en flexbehållare. I vissa fall omvandlas dock "vanliga" element automatiskt till att fungera som block-element när de hamnar inuti en flexbehållare. Detta gäller t.ex. om du lägger "ren" text inuti en flexbehållare, då kommer texten att automatiskt placeras i ett "osynligt" flexelement. Du behöver med andra ord inte skapa alla flexelement själv, en del skapas åt dig.

=== Flexaxel ===
Flexaxeln bestämmer i vilken riktning flexelementen ska placeras ut. Det går att sätta denna så att den antingen är rad eller kolumn - det vill säga horisontell eller vertikal. Riktningen på flexaxeln anges med egenskapen <code>flex-direction</code>. Ett exempel på hur den används; <code>flex-direction: column;</code>.

Om inget annat anges, placeras flexelementen ut efter varandra på en och samma rad. Det vill säga, defaultinställningen är en horisontell flexaxel. Vanligtvis placeras ju blockelement under föregående element, så att ha "motsatsen" som defaultbeteende för flexboxar är förstås vettigt.

Man kan även ange att man vill ha en vertikal flexaxel. Då läggs elementen ut under varandra i en kolumn. Detta påminner om det normala beteendet för blockelement. Dock så har det fördelar att lägga elementen i en flexbehållare. Bland annat kan man styra formateringen av elementen långt bättre.

==== <code>direction</code>s inverkan ====
Om man har en horisontell flexaxel så kan den antingen starta på höger eller vänster sida. Detta styrs av värdet på den <code>[[direction]]</code>-egenskap som gäller för flexbehållaren. Flexelementen kommer att placeras ut i samma ordning som angetts med <code>direction</code>. Är den <code>[[ltr]]</code>, dvs vänster till höger, vilket är default-riktningen så kommer även flexaxeln att gå ifrån vänster till höger. Om däremot det är <code>[[rtl]]</code> som gäller, dvs höger till vänster, placeras även flexelementen ut ifrån höger till vänster.

För "vanliga" västerländska språk, som ju är <code>[[ltr]]</code>, börjar elementen att placeras ut längst till vänster. Därefter placeras varje nytt element på föregående elements högra sida. Vi bygger alltså upp flexraden ifrån vänster till höger. Det påminner alltså om det beteende som gällde när man gjorde <code>float: left</code> För språk som läses ifrån höger till vänster, <code>[[rtl]]</code>, gäller omvända riktningarna.

Om vi designar en sida, kan alltså dess utseende förändras beroende på vilket språk som kommer att användas för den. En sida på arabiska kommer att ha <code>direction</code> satt till <code>rtl</code>, medan en sida på svenska kommer att ha <code>ltr</code>. Troligen vill vi att sidans layout ska förändras utifrån textens riktning. Vi skapar ju oftast sidolayout som är beroende på textlayouten ser ut. Om textutsättningen "spegelvänds" vill vi säkerligen att sidolayouten ska förändras för att återspegla detta.

==== Omvända flexaxlar ====
Det går även ange att flexaxeln ska vara omvänd. I normalfallet så växer flexaxeln ifrån vänster till höger, men ibland vill vi ange att den ska göra tvärtom, dvs att den startar på höger sida och växer mot vänster. Nu kanske man tror att <code>[[ltr]]</code> skulle vara en bra lösning på detta. Problemet är dock att även andra layoutmekanismer påverkas av detta, såsom textlayouten. Lösningen är att använda en omvänd flexaxel, detta anges som vanligt, men med ett efterföljande <code>-reverse</code>. Ett exempel på detta är; <code>flex-direction: row-reverse;</code>. När man sätter <code>flex-direction</code> på detta vis, kommer raden att byggas upp ifrån motsatt sida mot vad den normalt skulle göra.

En vertikal flexaxel börjar normalt i toppen och varje nytt element läggs under föregående. Det vill säga som en kolumn. Dock kan man även här sätta att flexaxeln ska vara omvänd. Då börjar flexaxeln längst ner och varje nytt flexelement placeras ovanför föregående.

=== Korsaxel ===
Det finns även något som kallas för korsaxel. Det är en axel som är förskjuten 90 grader mot flexaxeln. Det vill säga, om flexaxeln är horisontell, så är korsaxeln vertikal och vice versa. Många layoutegenskaper som har med flexbox att göra anger hur saker ska placeras längsmed korsaxeln.

=== Samband mellan axlarna ===
Axlarna är det som styr hur element placeras ut i en flexbox. I bilden ser du hur axlarna skulle se ut om man hade en flexbox vars innehåll placeras ut på en rad (och om <code>ltr</code> gäller).

[[Fil:Flextermer.png]]

== Demokod ==
För att kunna visa hur flexbox fungerar, behöver vi lite demokod som vi kan använda för att prova oss fram. Följande kod-exempel är en bra utgångspunkt...
<codepen pen="WvqbWZ" height="250" tab="html,result">
</codepen>

== Att skapa en flexbehållare ==
För att visa att vi vill använda flexbox och skapa en flexbehållare sätter vi ett elements <code>display</code>-egenskap till antingen <code>flex</code> eller <code>inline-flex</code>, t.ex. så här:
<syntaxhighlight lang="css">
.flexlåda {
display: flex;
}
</syntaxhighlight>

Elementet som har <code>flexlåda</code>-klassen kommer nu att bli en flexbehållare och alla dess underelement kommer att bli flex-element.

Om vi lägger till ovanstående rad till vår exempelkod blir det att se ut så här:
<codepen pen="OVePYW" height="480" tab="css,result">
</codepen>
Lägg märke till att lådorna nu samlas på en och samma rad. Vilket alltså är defaultbeteendet för flexboxar.

== Övningar ==
Här finns [[grundövningar för flex]].

Välj "Edit on CodePen", för att kunna redigera och genomföra följande övning.
<codepen pen="amvvWd" height="400" tab="result">
</codepen>

== Nästa aktivitet ==
[[Flexbox - sätta riktning]]

[[Category:Webbutveckling]]

Lär dig mer om JavaScript

2022-09-08T06:26:13Z

PGJ:

Här följer ett antal aktiviteter som kommer att lära dig mer om hur man programmerar i JavaScript.
== Nybörjarmaterial ==
<div class="well">
# [[Introduktion till JavaScript]]
# [[Grunderna i JavaScript-programmering]]
# [[Att skriva läsbar kod]]
# [[Olika typer av fel som kan uppstå]]
# [[Variabler]]
# [[Villkorssatser]]
# [[Att jobba med sanningsvärden]]
# [[Loopar och slingor]]
#[[Komplexa variabler]]
</div>

== Avancerat matererial ==
<div class="well">
# [[Introduktion till asynkron programmering]]
</div>

== Fortsättning ==
När du gått igenom ovanstående sektioner kan du fortsätta till dessa sektioner för att lära dig mer om hur man programmerar och skapar webbapplikationer med JavaScript.

<div class="well">
[[Att_bygga_webbapplikationer_och_-tjänster|Att bygga webbapplikationer och -tjänster]]
</div>

== Föråldrade tekniker ==

jQuery börjar bli lite föråldrat och används inte så mycket längre. Vi använde tidigare jQuery i exemplen på Webbling, men har gjort om alla exempel till [https://plainjs.com/ plainJS]. Vi har dock kvar en sektion som handlar om det. Den kommer inte att underhållas och uppdateras.

<div class="well">
[[Lär_dig_mer_om_jQuery|Lär dig mer om jQuery]]
</div>
__NOTOC__

Lär dig mer om JavaScript

2022-09-08T06:25:29Z

PGJ:

Här följer ett antal aktiviteter som kommer att lära dig mer om hur man programmerar i JavaScript.
== Nybörjarmaterial ==
<div class="well">
# [[Introduktion till JavaScript]]
# [[Grunderna i JavaScript-programmering]]
# [[Att skriva läsbar kod]]
# [[Olika typer av fel som kan uppstå]]
# [[Variabler]]
# [[Villkorssatser]]
# [[Att jobba med sanningsvärden]]
# [[Loopar och slingor]]
#[[Komplexa variabler]]
</div>

== Avancerat matererial ==
<div class="well">
# [[Introduktion till asynkron programmering]]
</div>

== Fortsättning ==
När du gått igenom ovanstående sektioner kan du fortsätta till dessa sektioner för att lära dig mer om hur man programmerar och skapar webbapplikationer med JavaScript.

<div class="well">
[[Att_bygga_webbapplikationer_och_-tjänster|Att bygga webbapplikationer och -tjänster]]
</div>

== Föråldrade tekniker ==

jQuery börjar bli lite föråldrat och används inte så mycket längre. Vi använde tidigare jQuery i exemplen på Webbling, men har gjort om alla exempel till [https://plainjs.com/ plainJS]. Vi har dock kvar en sektion som handlar om det. Den kommer inte att underhållas och uppdateras.
[[Lär_dig_mer_om_jQuery|Lär dig mer om jQuery]]

__NOTOC__

Elementens-grunder övningar

2022-08-31T19:47:47Z

PGJ:

<quiz display="simple">

{Element skapas med <code>element</code>-taggen.
|type="()"}
- Ja
+ Nej

{Man kan nästla taggar av samma typ inuti varandra.
|type="()"}
+ Ja
- Nej

{Elementens utseende kan skilja sig ifrån webbläsare till webbläsare.
|type="()"}
+ Sant
- Felaktigt

{Med CSS kan man styra utseendet till 100 %
|type="()"}
- Sant
+ Felaktigt

{Indentering betyder att man skriver allt med stora bokstäver, så det syns bättre.
|type="()"}
- Sant
+ Felaktigt

{<code>em</code> används för att det är något speciellt med elementinnehållet.
|type="()"}
+ Sant
- Felaktigt

</quiz>

Tillbaka till [[Element-grunder]]

Huvudsida

2021-10-23T12:02:13Z

PGJ:

<div class="well well-cocktail">
== Välkommen till Webbling ==

Webbling är en öppen lärresurs som är avsedd för dig som vill lära dig mer om [[Introduktion till webbteknik|webbteknik]], [[webbutveckling]] och [[Lär dig mer om JavaScript | programmering]]. Här kan du lära dig alltifrån hur man skapar enkla webbsidor till avancerade webbapplikationer och webbtjänster. Materialet är främst tänk för dig som går på gymnasiet och läser någon av kurserna inom webbteknik, programmering eller gränssnitt. Förhoppningen är dock att denna resurs kan vara till hjälp för alla som vill veta mer om hur man går tillväga med [[webbutveckling]] och [[Lär dig mer om JavaScript | programmering]].
</div>

<div class="well well-hearts">

==Innehåll ==
Här finner du [[referensmaterial]], t.ex. [[HTML5-taggar]] och [[CSS-egenskapslista|CSS-egenskaper]] samt mycket [[studiematerial]].
</div>

<div class="well well-meadow">
== Nyheter ==
Alla exempel som använde jQuery är nu omskrivna till plainJS.

jQuery-sektionen är märkt som föråldrad och kommer inte att uppdateras mer.

SPA-exemplen är uppdaterade så de fungerar som de ska.
</div>

<div class="well well-mango">

== Sponsorer ==
[[Webbutveckling]]sdelen och [[Referensmaterial | referensmaterialet]] angående webbtekniker sponsrades av [http://www.internetfonden.se/ Internetfonden].

Delarna om [[JavaScript]]-programmering, jQuery, Node.js och [[öppen data]] sponsrades av [http://vinnova.se/ Vinnova].

Webbling har delvis tagits fram för att användas som studiematerial vid [http://soltorgsgymnasiet.se Soltorgsgymnasiet] i Borlänge.
</div>

<div class="well well-concrete-light">

== Rättigheter ==
Allt material på Webbling kan delas i enlighet med följande;

[http://creativecommons.org/licenses/by-sa/4.0/ https://i.creativecommons.org/l/by-sa/4.0/88x31.png]<br>
Webbling av [mailto:pgj@gnulix.org Patrik Grip-Jansson] och [http://soltorgsgymnasiet.se Soltorgsgymnasiet] är licenserad under en [http://creativecommons.org/licenses/by-sa/4.0/ Creative Commons Erkännande-DelaLika 4.0 Internationell licens]
</div>
__NOTOC__

Huvudsida

2021-10-23T12:01:48Z

PGJ:

<div class="well well-cocktail">
== Välkommen till Webbling ==

Webbling är en öppen lärresurs som är avsedd för dig som vill lära dig mer om [[Introduktion till webbteknik|webbteknik]], [[webbutveckling]] och [[Lär dig mer om JavaScript | programmering]]. Här kan du lära dig alltifrån hur man skapar enkla webbsidor till avancerade webbapplikationer och webbtjänster. Materialet är främst tänk för dig som går på gymnasiet och läser någon av kurserna inom webbteknik, programmering eller gränssnitt. Förhoppningen är dock att denna resurs kan vara till hjälp för alla som vill veta mer om hur man går tillväga med [[webbutveckling]] och [[Lär dig mer om JavaScript | programmering]].
</div>

<div class="well well-hearts">

==Innehåll ==
Här finner du [[referensmaterial]], t.ex. [[HTML5-taggar]] och [[CSS-egenskapslista|CSS-egenskaper]] samt mycket [[studiematerial]].
</div>

<div class="well well-meadow">
== Nyheter ==
Alla exempel som använd jQuery är nu omskrivna till plainJS.

jQuery-sektionen är märkt som föråldrad och kommer inte att uppdateras mer.

SPA-exemplen är uppdaterade så de fungerar som de ska.
</div>

<div class="well well-mango">

== Sponsorer ==
[[Webbutveckling]]sdelen och [[Referensmaterial | referensmaterialet]] angående webbtekniker sponsrades av [http://www.internetfonden.se/ Internetfonden].

Delarna om [[JavaScript]]-programmering, jQuery, Node.js och [[öppen data]] sponsrades av [http://vinnova.se/ Vinnova].

Webbling har delvis tagits fram för att användas som studiematerial vid [http://soltorgsgymnasiet.se Soltorgsgymnasiet] i Borlänge.
</div>

<div class="well well-concrete-light">

== Rättigheter ==
Allt material på Webbling kan delas i enlighet med följande;

[http://creativecommons.org/licenses/by-sa/4.0/ https://i.creativecommons.org/l/by-sa/4.0/88x31.png]<br>
Webbling av [mailto:pgj@gnulix.org Patrik Grip-Jansson] och [http://soltorgsgymnasiet.se Soltorgsgymnasiet] är licenserad under en [http://creativecommons.org/licenses/by-sa/4.0/ Creative Commons Erkännande-DelaLika 4.0 Internationell licens]
</div>
__NOTOC__