<- Tillbaks

Front End utveckling

Om Front End Utveckling

Front End utveckling kurs dokumentation samt sammanfattande cheatsheets

Tenten

Information som behövs inför tenten

Tenten Teoretisk
1. Good Coding Habits

Från HTML delen

  • Best HTML Coding Practices You Must Know
  • Kapitel 1 - HTML
    • Skriv alltid läsbar och välstrukturerad kod
    • Bra indentering
    • Avsluta alltid element (Bra att sätta slut element när man skapar start element)
    • Använd beskrivande filnamn
    • “Onion rings” princip för nästling
    • Kontrollera matematiken för dimensioner
    • Avänd beskrivande kommentarer
    • Testa regelbundet i webbläsaren
    • Organiserad mappstruktur
    • Korrekt formatering av innehåll
    • Tydlig separation mellan sektioner
    • Validera alla länkar
    • Använd konsekventa färgkoder

Från CSS delen

  • CSS Best Practices For Clean Code
  • Kapitel 2 - CSS
    • Använd beskrivande klassnamn
    • Följ etablerade namnkonventioner
    • Håll CSS organiserad
    • Undvik inline styling när möjligt
    • Definera default värden i body
    • Separera HTML från formatering
    • Kommentera viktiga sektioner
    • Implementera responsiva designprinciper

Från XML delen

  • XML Programming Best Practices
  • Kapitel 3 - XML
    • Skriv alltid läsbar och välstrukturerad kod
    • Bra element namn
    • Bra indentering
    • Avsluta alltid element
    • “Onion rings” princip för nästling

Från JS delen

  • JavaScript Best Practices
  • Kapitel 4 - JavaScript
    • På gång
    • Om nån har bra punkter från kursen här skriv i Discord eller fråga efter rättigheter att göra en pull request :)
2. HTML-syntax
  • Basic HTML syntax
  • Kapitel 1 - HTML
  • Mer detaljer på HTML Cheatsheet
  •   	<!DOCTYPE html> <!-- Vilken HTML version -->
  	<html lang="sv"> <!-- Alltid har root element <html>-->
  		<head> <!-- Metadata och länkar till andra filer -->
  			<title>Hemsida</title> <!-- Sida titel (Kan se på tabb i webbläsare)-->
  			<link rel="stylesheet" href="style.css">
  		</head>
  		<body> <!-- Webbsidans innehåll -->

  			<h1>Hemsida</h1>

  			<p>Lorem ipsum...<br>
  				 Ipsum lorem...
  			</p>

  			<script src="index.js"></script>
  		</body>
  	</html>
3. Tabeller, rowspan, colspan
  • 03 HTML 2 - Övning 1 och inlämningsuppgift 1
  • Bra beskrivet på HTML Cheatsheet
4. Containers
  • 07 CSS 2 - Övning 5
  • 03 HTML 2 - Övning 1 och inlämningsuppgift 1
  • Container tags
  • CSS Cheatsheet: Positioner, Synlighet, Z-index
  • HTML Cheatsheet: Element/Taggar, Nästling, Attribut
5. XML-dokumentstruktur
  • 10 XML 1 - Teori och övning 8
  • Bra beskrivet på XML Cheatsheet
6. XML och Stylesheets
  • 11 XML 2 - Övning 9-10
  • Bra beskrivet på XML Cheatsheet
7. DOM
8. JavaScript, finn fem fel
  • Öva på JavaScript
  • Hjälp från JS Cheatsheet
9. JavaScript, förklara programmet
  • Öva på JavaScript
  • Hjälp från JS Cheatsheet
Tenten Praktisk
1. Good Coding Habits
  • Samma punkt som Tenten teoretisk del.
2. Skapa en/flera HTML-sidor
  • 02 HTML 1 - Teoretisk bakgrun och första testet
3. Med korrekt tabell-struktur(er)
  • 03 HTML 2 - Övning 1 och inlämningsuppgift 1
4. Och korrekt CSS-instruktioner
  • Gå över hur CSS kopplas med element, id, class
5. Som innehåller minst ett formulär
  • 15 JavaScript 2 - Övning 14
6. Kopplat till JavaScript-kontroll
  • 16 JavaScript 3 - Övning 15
7. Som kommer att utföra uppgifter
  • 17 JavaScript 4 - Övning 16
  • 18 JavaScript 5 - Övning 17
8. uppdelat i ett antal nästlade funktioner
  • Kapitel 4 - JavaScript
Tenten Extra

När lärare sa att nånting var viktit till tenten

HTML Hur man räknar colspan och rowspan, Front End 03 övn1 Part 1 45:00 övning 5 vid 2 30:00

CSS Beskriva positions i CSS Övning 5 CSS2 7:00 viktiga: relativi och absolut kommer beskrivas i tenten

XML XSL inte språk, XSLT är språket, XSL innehåller 3 komponenter. XSL r stora skalet där XSLT är en av de tre delarna. XHTML: Alla element ska stängas xml är case sensitive onion rings attribut ges alltid med =“värde”. (apostrofer) <html> har bar ett rootelement och ingenting finns utanför xml namespace doctype, i provet kolla video FRONT END 12 XML3

HTML (HyperText Markup Language)

https://www.w3schools.com/html/default.asp

HTML Cheatsheet
Kurs Sammanfattning
HTML 1

HTML 1 Teori

  • HTML (HyperText Markup Language) är ett märkspråk, inte ett programmeringsspråk
  • Används för att beskriva struktur och innehåll på webbsidor
  • Utvecklades i början av 90-talet

Viktiga Koncept

  1. Element/Taggar

    • Omges av vinkelparenteser < >
    • Måste alltid ha start- och sluttagg <tag></tag>
    • Självstängande taggar slutar med /> (t.ex. <img />)

  2. Nästling

    • Element måste stängas i ordning (“onion rings” princip)
    • Får inte korsa varandra
    <tag1>
  <tag2>
    <tag3>Text</tag3>
  </tag2>
</tag1>

  3. Attribut

    • Ger extra information till element
    • Syntax: attribut="värde"
    • Värden måste omslutas av citattecken
    <element attibut="värde"></element>

Grundstruktur HTML-dokument

<!DOCTYPE html>
<html>
  <head>
    <title>Sidtitel</title>
  </head>
  <body>
    <!-- Innehåll -->
  </body>
</html>

Bra att veta

  • Skriv alltid läsbar och välstrukturerad kod
  • Använd konsekvent indentering
  • Avsluta alltid element
  • Använd beskrivande filnamn (index.html för startsida)
HTML 2 (part 1)

HTML 2 (part 1) - Tabeller för Layout

Grundprinciper för Tabeller

  • Används för layout (historiskt, nu används containers <div> </div>)
  • Måste planera struktur noggrant
  • Mätningar är viktiga för korrekt layout (Kan rita på papper)

Tabell Attribut

<table border="0" cellspacing="0" cellpadding="0">
  • border - Tabellens ram (0 = ingen ram)
  • cellspacing - Avstånd mellan celler
  • cellpadding - Avstånd inom celler

Tabell Element

<table>
  <tr>              <!-- Table Row -->
    <td></td>       <!-- Table Data/Cell -->
  </tr>
</table>

Cell Attribut

  • width - Cellens bredd i pixlar
  • height - Cellens höjd i pixlar
  • bgcolor - Bakgrundsfärg (#RRGGBB)
  • colspan - Antal kolumner cellen spänner över
  • rowspan - Antal rader cellen spänner över
  • align - Horisontell justering (left, center, right)
  • valign - Vertikal justering (top, middle, bottom)

Bra att veta

  • Använd kommentarer för att markera sektioner
  • Indentera koden för läsbarhet
  • Stäng alltid element direkt efter öppning
  • Kontrollera att matematik för dimensioner stämmer

Exempel på Layout Struktur

<!-- Header start -->
<table border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td height="30" colspan="2"><!-- Tomt utrymme --></td>
	</tr>
	<tr>
		<td width="50"><!-- Vänster margin --></td>
		<td width="293"><img src="images/logo.gif" /></td>
	</tr>
	<tr>
		<td height="30" colspan="2"><!-- Nedre margin --></td>
	</tr>
</table>
<!-- Header slut -->

Bra att veta

  • Alltid avsluta element
  • Använd “onion rings” princip för nästling
  • Kontrollera matematiken för dimensioner
  • Använd beskrivande kommentarer
  • Testa regelbundet i webbläsaren
HTML 2 (part 2)

HTML 2 (part 2) - Nästlade Tabeller

  1. Yttre Tabell

    • Används för huvudsaklig layout
    • Kontrollerar avstånd till webbläsarens kanter
    <table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="110"><!-- Avstånd vänster --></td>
    <td width="1" bgcolor="#000000"><!-- Svart vertikal linje --></td>
    <td width="756"><!-- Huvudinnehåll --></td>
    <td width="1" bgcolor="#000000"><!-- Svart vertikal linje --></td>
  </tr>
</table>

  2. Mellan Tabell

    • Hanterar kolumnindelning
    • Skapar avstånd mellan sektioner
    <table>
  <tr>
    <td width="30"><!-- Avstånd --></td>
    <td width="166" valign="top"><!-- Foto sektion --></td>
    <td width="135" valign="top"><!-- Variabler --></td>
    <td width="245" valign="top"><!-- Värden --></td>
    <td width="182"><!-- Tom cell --></td>
  </tr>
</table>

  3. Inre Tabeller

    • Hanterar specifikt innehåll
    • Separata tabeller för:
      • Foto/Employee code
      • Variabler (namn, födelsedatum etc.)
      • Värden (personlig information)

Bra att veta för Nästlade Tabeller

  • Använd konsekventa indentering för olika nivåer
  • Kontrollera matematiken för dimensioner
  • Använd kommentarer för att markera tabellnivåer
  • Testa varje tabell separat innan nästling
<!-- Inre tabell start -->
<table>
  <tr>
    <td><!-- Innehåll --></td>
  </tr>
</table>
<!-- Inre tabell slut -->
  1. Viktiga Attribut
  • width - Exakta pixelmått viktiga
  • height - Kontrollerar radavstånd
  • bgcolor - Bakgrundsfärger (#RRGGBB)
  • valign - “top” för konsekvent alignment
  • colspan/rowspan - För cell-sammanslagning

Viktigt att Tänka På

  • Matematiken måste stämma mellan nivåer
  • Använd konsekvent struktur
  • Testa regelbundet i webbläsaren
  • Dokumentera tabellstrukturen
HTML 2 (part 3)

HTML 2 (part 3) - Kompletterande Sektioner

  1. Additional Information Sections

    • Background
    • Strengths
    • Weaknesses

  2. Struktur för Extra Sektioner

    <!-- Grön balk -->
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="756" height="30" bgcolor="#274F26" align="left" valign="middle">
      <font size="4" face="arial" color="#FFFFFF">
        <b>&nbsp;&nbsp;Background</b>
      </font>
    </td>
  </tr>
</table>

<!-- Innehållstabell -->
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="30"><!-- Avstånd vänster --></td>
    <td width="696"><!-- Innehåll --></td>
    <td width="30"><!-- Avstånd höger --></td>
  </tr>
</table>

  3. Text Formatering

  • Använd <br> för radbrytningar

  • Använd <p></p> för styckeindelning

  • Font-attribut:

    <font size="2" face="arial" color="#123456">
  Text innehåll
</font>

  1. Inlämningskrav

    • Filnamn: itXX-YY.html (employee code)
    • Bildfil: itXX-YY.jpg/png/gif
    • Placering:
      • HTML-fil i root
      • Bilder i /photos/ mapp
      • Layout-bilder i /images/ mapp

Bra att veta

  • Konsekvent namnstandard
  • Organiserad mappstruktur
  • Korrekt formatering av innehåll
  • Tydlig separation mellan sektioner
HTML 3

HTML 3 - Personalregister

  1. Syfte
  • Skapa en översiktssida för alla anställda
  • Länka till individuella personalsidor
  • Konsekvent formatering och layout
  1. Struktur
  • Huvudtabell med kolumner för:
    • Employee Code
    • Signature Date
    • Name
    • Rank
    • Access Level
  • Varje rad länkar till personlig sida
  1. Viktiga Element
<a href="itXX-YY.html">Namn</a>   <!-- Länkar -->
<td colspan="5">                   <!-- Kolumnspann -->
<font size="4" color="#000000">    <!-- Textformatering -->
  1. Färgkoder

  • Länkar (i body-elementet):

    link="#123456"      <!-- Olänkad -->
vlink="#123456"     <!-- Besökt -->
alink="#123456"     <!-- Aktiv -->

Bra att veta

  • Validera alla länkar
  • Kontrollera matematiken för tabellbredder
  • Använd konsekventa färgkoder
  • Säkerställ korrekt formatering

Viktigt att Tänka På

  • Alla anställda måste finnas med
  • Korrekt employee code för varje person
  • Fungerande länkar till personliga sidor
  • Konsekvent formatering genom hela dokumentet
HTML 4 (part 1)

HTML 4 (part 1) - Navigeringsmeny och Sociala Media

  1. Förändringar i Layout
  • Borttagning av gröna balkar
  • Införande av navigeringsmeny
  • Tillägg av sociala media ikoner
  • Integration av kontaktuppgifter
  1. Sociala Media Integration
<!-- Social media icons -->
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td width="40" align="center">
    <a href="https://facebook.com">
      <img src="images/social_fb.gif" alt="Facebook" />
    </a>
   </td>
   <!-- Repeat for other social media icons -->
  </tr>
</table>
  1. Kontaktinformation
  • Företagsnamn
  • Telefonnummer
  • Faxnummer
  • E-postadress
  • Webbadress
  1. Navigeringsmeny
  • Company Presentation
  • History
  • Board of Directors
  • Personnel Registry

Bra att veta

  • Konsekvent användning av pixelmått
  • Korrekt cellpadding för visuell balans
  • Välstrukturerad nästling av tabeller
  • Tydlig separation mellan sektioner

Viktiga Koncept

  • Matematisk precision i tabellayout
  • Korrekt hantering av cellspacing
  • Användning av ikoner och länkar
  • Integration av multipla designelement
HTML 4 (part 2)

HTML 4 (part 2) - Back-knapp

  1. Placering och Design
  • Del av huvudmenyn
  • Grön bakgrund (samma som meny)
  • Bara synlig på undersidor
  • Leder tillbaka till huvudsida/överordnad sida
  • Inre tabell med rund ikon
  1. Struktur
<!-- Back knapp start -->
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td width="32" height="32" bgcolor="#274F26" align="center" valign="middle">
    <a href="index.html">
      <img src="images/menu_back.png" alt="Back" />
    </a>
   </td>
  </tr>
</table>
<!-- Back knapp slut -->
  1. Dimensioner
  • Knapp: 32x32 pixlar
  • Ikon: 22x22 pixlar
  • Centrerad vertikalt och horisontellt

Bra att veta

  • Konsekvent användning av pixelmått
  • Korrekt centrering av ikon
  • Tydlig länkstruktur
  • Logisk placering i layout

Viktigt att Tänka På

  • Ska inte visas på startsida
  • Korrekt länkning till överordnad sida
  • Exakt matchning av färger och mått
  • Symmetrisk placering i menyn

CSS (Cascading Style Sheets)

https://www.w3schools.com/css/default.asp

CSS Cheatsheet
Kurs Sammanfattning
CSS 1 (part 1)

Grundprinciper för CSS

Syfte

  • Separera innehåll (HTML) från utseende (CSS)
  • Centralisera formatering
  • Förenkla underhåll och uppdateringar

Syntax

selector {
  property: value;
  property2: value2;
}

Selektorer

  • Element (table, div)
  • Klass (.classname)
  • ID (#idname)
  • Element med klass (div.classname)

Placering av CSS

  • Inline HTML (style-attribut)
  • Internal (style-element i head)
  • External (separat .css-fil)

Implementation

Inline CSS

<div style="font-size: 12pt; color: black;">
  Text innehåll
</div>

Internal CSS

<style type="text/css">
  .infotext {
   font-size: 12pt;
   color: black;
  }
</style>

External CSS

<link rel="stylesheet" href="style.css">

Viktigt att tänka på

  • Använd beskrivande klassnamn
  • Håll CSS organiserad och kommenterad
  • Följ etablerade namnkonventioner
  • Undvik inline styling när möjligt
CSS 1 (part 2)

Body Element och Default CSS

Body Element

body {
  background-color: #123456;  /* istället för bgcolor i HTML */
  font-family: Arial, Verdana, Geneva, Helvetica; /* istället för face */
  font-size: 12px;
  color: #FFFFFF;
}

Länkar

a:link {
  color: #FFFFFF;
  text-decoration: none;
}

a:active {
  color: #AAD037;
}

a:visited {
  color: #FFFFFF;
}

a:hover {
  color: #AAD037;
  text-decoration: underline;
}

Viktiga CSS Koncept

  1. Pseudoklasser

    • :link - olänkad
    • :visited - besökt
    • :active - aktiv
    • :hover - muspekare över

  2. Text Formattering

    • font-family för typsnitt
    • font-size för textstorlek
    • color för textfärg
    • text-decoration för understreck

Bra att veta

  • Använd konsekventa färgkoder
  • Definiera default värden i body
  • Pseudoklasser för interaktivitet
  • Separera HTML från formattering
CSS 2

CSS 2 - Responsiv Design

Från Tabeller till Containers

  1. Fördelar med Containers
  • Anpassar sig efter skärmstorlek
  • Kan brytas och omorganiseras
  • Mer flexibel layout
  • Bättre för mobila enheter
  1. Position Egenskaper
/* Static (default) */
position: static;   /* Följer normal dokumentflöde */

/* Relative */
position: relative; /* Kan justeras från normal position */

/* Absolute */
position: absolute; /* Positioneras mot närmaste ancestor */

/* Fixed */
position: fixed;    /* Fast position i viewport */
  1. Container Layout
.container {
  position: relative;
  display: block;
  float: left;
}

Viktigt att Tänka På

  • Undvik tabeller för layout
  • Använd containers för flexibel design
  • Planera brytpunkter
  • Testa på olika skärmstorlekar

Best Practices

  • Använd beskrivande klassnamn
  • Håll CSS organiserad
  • Kommentera viktiga sektioner
  • Följ konsekventa namnkonventioner
CSS 3

CSS 3 - Dropdown Menyer

Z-index och Lager

  1. Z-index Principer
  • Definierar elementens ordning i höjdled
  • Högre värde = visas överst
  • Fungerar endast med positionerade element
  • Lägsta värdet längst ner, högsta överst
  1. Synlighet i CSS
/* Alternativ 1: Visibility */
.element {
  visibility: hidden;    /* Tar upp plats men osynlig */
  visibility: visible;   /* Synlig */
}

/* Alternativ 2: Display */
.element {
  display: none;        /* Tar ingen plats, osynlig */
  display: block;       /* Synlig, tar plats */
}

/* Grundcontainer för dropdown */
.menu-drop-item {
  display: none;
  position: absolute;
  z-index: 1;
}

/* Hover effekt som visar dropdown */
.menu-item:hover .menu-drop-item {
  display: block;
}

/* Dropdown knapp stil */
.menu-drop-text {
  height: 30px;
  min-width: 180px;
  text-align: left;
  padding-left: 15px;
  padding-right: 15px;
  vertical-align: middle;
  border: 1px solid black;
  background-color: #AAD037;
}

Viktigt att Tänka På

  • Korrekt nästling av element
  • Konsekvent namngivning av klasser
  • Z-index för korrekt lagerordning
  • Hantering av hover events

Best Practices

  • Testa menyns funktion grundligt
  • Verifiera alla länkar
  • Säkerställ konsekvent design
  • Validera HTML och CSS
CSS 4

CSS 4 - Left Side Menu

Sitemap Implementation

  1. Menu Structure
  • Fixed position left menu
  • Default hidden (width: 0)
  • Expands on click
  • Contains site navigation links
  1. Basic Components
/* Menu Button */
.menu-button-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

/* Sidebar Layout */
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 50px;
}
  1. JavaScript Integration
function openMenu() {
  document.getElementById("leftSideBar").style.width = "220px";
}

function closeMenu() {
  document.getElementById("leftSideBar").style.width = "0";
}

Best Practices

  • Centralize JavaScript in separate files
  • Use consistent naming conventions
  • Implement proper z-index layering
  • Handle menu transitions smoothly

Key Points

  • Separate content from functionality
  • Maintain clean, organized code
  • Use proper file structure
  • Implement responsive design principles

XML (eXtensible Markup Language)

https://www.w3schools.com/xml/default.asp

XML Cheatsheet
Kurs Sammanfattning
XML 1 (part 1)

XML 1 (part 1) - Introduktion

  • Ett markupspråk som liknar HTML
  • Skillnad från HTML: I XML definierar man egna element
  • Används främst för datalagring och datautbyte mellan system
  • Håller på att ersättas av JSON i moderna system

Grundregler för XML

  1. Ett och endast ett rotelement
  2. Alla element måste ha start- och sluttagg
  3. Hierarkisk struktur - element får inte korsa varandra
  4. Case-sensitive
  5. Värden måste omslutas av citattecken

XML Dokument struktur

<?xml version="1.0" encoding="UTF-8"?>
<rotelement>
	<element-a>Innehåll</element-a>
	<element-b attribut="värde"/>
	<element-c>
		<subelement>Innehåll</subelement>
	</element-c>
</rotelement>

Encoding typer

  • UTF-8 (8 bitar): Begränsad, inga skandinaviska tecken
  • ISO-8859-1: Inkluderar skandinaviska tecken
  • UTF-16 (16 bitar): Större teckenuppsättning
  • Unicode (21 bitar): Stöd för 144,000 tecken
XML 1 (part 2)

XML 1 (part 2) - Export till XML från PDF

PDF Exchange Editor

  1. Installera PDF Exchange Editor (gratis version)
  2. Öppna PDF dokumenten
  3. Exportera till XML via Form > Export Form Data
  4. Spara enligt naming convention (t.ex. employee code)

Excel som XML-verktyg

  1. Importera XML filer via Data > Get Data > From File > XML
  2. Använd Power Query Editor för att:
    • Ta bort oönskade namespace
    • Korrigera datatyper till text
    • Rensa/byta kolumnnamn
  3. Sammanfoga queries med Append
  4. Bryt data connection genom copy-paste values

Skapa XML Map för Export

  1. Aktivera Developer tab i Excel
  2. Skapa XML schema fil med struktur:
<?xml version="1.0"?>
<personnelRegistry>
	 <employee>
			<employeeCode/>
			<name/>
			<!-- övriga element -->
	 </employee>
	 <employee/>
</personnelRegistry>
  1. Koppla XML Map till kolumner
  2. Exportera till slutgiltig XML fil
XML 1 (part 3)

XML 1 (part 3) - XML Export med Adobe Acrobat

Adobe Acrobat metoden

  1. Öppna Adobe Acrobat
  2. Använd “Merge data files into spreadsheet” under Find
  3. Välj alla PDF filer och exportera till XML
  4. Resulterar i en sammanslagen XML-fil

XML Map i Excel

  1. Skapa XML schema för mappning:
<?xml version="1.0" encoding="UTF-8"?>
<personnelRegistry>
	<employee>
		<employeeCode/>
		<name/>
		<!-- andra element -->
	</employee>
	<employee/>
</personnelRegistry>
  1. Aktivera Developer tab
  2. Använd XML Maps för att koppla schema till data
  3. Exportera till XML-fil

Tips för XML Export

  • Bryt query-koppling genom copy-paste values
  • Använd XML Map med minst två employee-element
  • Skapa separata filer per anställd
  • Namnge filer enligt employeeCode
  • Kontrollera namespace och elementordning
XML 2

XML 2 - Styling med CSS och XSLT

CSS för XML

  • XML kan stylas med CSS för enkel formatering
  • Koppla CSS till XML med processing instruction:
<?xml-stylesheet type="text/css" href="style.css"?>
  • Begränsad funktionalitet jämfört med XSLT
  • Exempel på CSS selektorer för XML:
    • Rotelement (motsvarar body)
    • Element (motsvarar div/span)
    • Attribut

XSLT (eXtensible Stylesheet Language Transformations)

  • Kraftfullare verktyg än CSS för XML-formatering
  • Del av XSL (eXtensible Stylesheet Language)
  • Kan transformera XML till andra format (t.ex. HTML)
  • Stödjer programmeringskoncept som:
    • Loopar (for-each)
    • Villkor (if/choose)
    • Sortering

XSLT Grundstruktur

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="...">
	<xsl:template match="/">
		<!-- Transformationsregler här -->
	</xsl:template>
</xsl:stylesheet>

Säkerhetsaspekter

  • Webbläsare blockerar lokal XSLT-transformering av säkerhetsskäl
  • Lösningar:
    • Använd webbserver
    • Lightweight lokal server (t.ex. lighttpd)
    • Inaktivera säkerhetsbegränsningar (rekommenderas ej)
XML 3

XML 3 - XHTML och Validering

XHTML Regler

  1. Alla element måste stängas (även tomma element)
  2. Case-sensitive (små bokstäver för HTML-element)
  3. Korrekt ordningsföljd för element
  4. Attribut måste ha värden med citattecken
  5. HTML måste vara rotelement
  6. HTML elementet måste ha XML namespace attribut
  7. DOCTYPE måste vara första raden

Namespace (xmlns)

  • Definierar tillgängliga element
  • Exempel på namespace-deklaration:
<html xmlns="http://www.w3.org/1999/xhtml">
  • Namespace status i olika HTML-versioner:
    • XHTML: Obligatoriskt
    • HTML4: Ej tillåtet
    • HTML5: Valfritt

DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Validering

  • W3C Markup Validation Service
  • W3C CSS Validation Service
  • Validering möjlig via:
    • URL
    • Filuppladdning
    • Direktinmatning av kod
XML 4

XML 4 - DTD (Document Type Definition)

DTD Grundprinciper

  • Regelbok för XML-element
  • Definierar:
    • Tillåtna element
    • Elementens struktur
    • Obligatoriska element
    • Elementens innehållstyper

DTD Komponenter

  1. Element deklarationer
  2. Attribut deklarationer
  3. Innehållsdeklarationer
  4. Entiteter

DTD Syntax

<!DOCTYPE rootElement [
	<!ELEMENT elementName (innehåll)>
	<!ATTLIST elementName attributName type value>
]>

Innehållstyper

  • PCDATA (Parsed Character Data)
  • CDATA (Character Data)
  • EMPTY (tomt element)
  • Nästlade element

Frekvensmarkörer

  • * = noll eller flera
  • + = en eller flera
  • ? = noll eller en
  • (ingen markör) = exakt en

Koppling till XML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE rootElement SYSTEM "filename.dtd">

XSD

  • Modernare alternativ till DTD
  • Använder XML-syntax
  • Mer kraftfull validering
  • Bättre stöd för datatyper

JS (JavaScript)

https://www.w3schools.com/js/default.asp

JS Cheatsheet
Kurs Sammanfattning
JS 1 (del 1)

JS (del 1) - Grunder & Frontend

Mål

  • Komma igång med JavaScript-programmering
  • Lära sig grundprinciperna för JavaScript

Bakgrund & Kontext

  • Webbapplikation för Tricel
  • Behov av dynamisk funktionalitet
  • Frontend-del som förberedelse för större applikation

Funktionaliteter som ska byggas

  1. Inloggningsfunktion med säkerhetsnivåer (A, B, C)
  2. Personalregister med CRUD-operationer
  3. Integrerad kalkylator
  4. Virusdatabas med CRUD-funktionalitet
  5. Teamchattfunktion

JavaScript Grunder

  • Skapad 1995 av Brendan Eich (Netscape)
  • Skriptspråk som tolkas av webbläsaren
  • Kommunicerar med DOM (Document Object Model)
  • JIT (Just In Time) kompilering
  • Asynkron exekvering

Webbläsare & JavaScript Engines

  • Chrome: V8
  • Firefox: SpiderMonkey
  • Edge: Chakra
  • Safari: Nitro

Kodimplementering

  • Kan skrivas direkt i HTML via <script> taggar
  • Kan länkas som externa .js-filer
  • Kan testas i webbläsarens konsol
  • Exempel på grundläggande syntax:
console.log("Hello World");
alert("Meddelande");
prompt("Vad heter du?");
JS 1 (del 2)

JS (del 2) - Grundläggande Syntax

Variabeldeklaration

  • var - Global omfattning, kan tilldelas om
  • let - Blockomfattning, kan tilldelas om
  • const - Blockomfattning, kan inte tilldelas om

Funktioner

function exempel(param1, param2) {
	return param1 + param2;
}

Kontrollstrukturer

  • If-satser:
if (villkor) {
	// kod
} else if (villkor2) {
	// kod
} else {
	// kod
}
  • Switch-satser:
switch(uttryck) {
	case x:
		// kod
		break;
	default:
		// kod
}

Loopar

  • For-loop:
for (let i = 0; i < 10; i++) {
	// kod
}
  • Do-while-loop:
do {
	// kod
} while (villkor);
  • For-each:
array.forEach(item => {
	// kod
});

Händelser

  • Vanliga triggers:
    • onClick
    • onChange
    • onMouseOver
    • onKeyDown
    • onLoad

Objekt

const objekt = {
	egenskap: värde,
	metod: function() {
		return this.egenskap;
	}
};

Konstruktorfunktioner

function Konstruktor(param1, param2) {
	this.egenskap1 = param1;
	this.egenskap2 = param2;
}
JS 1 (del 3)

JS (del 3) - Kalkylatorimplementering

Grundläggande HTML-struktur

  • Form-element innehåller kalkylator
  • Tabellayout för knappgrid
  • Inmatningsfält för display och knappar

JavaScript-funktioner

// Rensa display
function resetDisplay() {
	document.calc.display.value = '';
}

// Uppdatera display med knappvärde
function updateDisplay(inValue) {
	document.calc.display.value = document.calc.display.value + inValue;
}

// Beräkna resultat
function calculate() {
	document.calc.display.value = eval(document.calc.display.value);
}

Händelsehanterare

  • onload: resetDisplay()
  • onClick: updateDisplay(value)
  • Likamed-knapp: calculate()

CSS-styling

.calc-cell {
	text-align: center;
	vertical-align: middle;
	padding: 3px;
}

.calc-button {
	width: 30px;
	height: 30px;
	background-color: #999;
	border: 1px solid black;
}

.display {
	width: 140px;
	height: 35px;
	background-color: #eee;
}

Säkerhetsanmärkning

  • Undvik att använda eval() i produktionskod
  • eval() kan exekvera skadlig kod
  • Använd säkrare beräkningsmetoder istället
JS 2 (del 1) - Formulärvalidering

JS 2 (del 1) - Formulärvalidering

Grunderna i formulärvalidering

  • Klient-sidig validering med JavaScript
  • Server-sidig validering krävs fortfarande
  • Förhindrar onödiga serverförfrågningar
  • Förbättrar användarupplevelsen

Vanliga valideringstyper

  • Obligatoriska fält
  • Formatvalidering (e-post, datum)
  • Längdbegränsningar
  • Mönstermatchning
  • Filtypsvalidering

Grundläggande exempel på formulärvalidering

function validateForm() {
	let form = document.forms["myForm"];
	if (form["name"].value === "") {
		alert("Namn måste fyllas i");
		return false;
	}
	return true;
}

Filuppladdningsvalidering

function validateFile() {
	let fileInput = document.getElementById("fileUpload");
	let filePath = fileInput.value;
	let allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
	
	if (!allowedExtensions.exec(filePath)) {
		alert("Ogiltig filtyp");
		fileInput.value = '';
		return false;
	}
	return true;
}

Formulärhändelser

  • onsubmit
  • onchange
  • onblur
  • onfocus
  • oninput

Säkerhetsöverväganden

  • Förlita dig aldrig enbart på klient-sidig validering
  • Rensa data server-side
  • Skydda mot XSS-attacker
  • Validera filtyper noggrant
JS 2 (del 2) - Formulärstyling & Layout

JS 2 (del 2) - Formulärstyling & Layout

Tabellstruktur

  • Matcha presentationslayout med formulärfält
  • Vänster kolumn: Etiketter
  • Höger kolumn: Inmatningsfält
  • Bakgrundsfält under tabellen
  • Åtgärdsknappar längst ner

Grundläggande CSS för formulärelement

input[type=text], input[type=file], input[type=date], select, textarea {
	padding: 5px;
	box-sizing: border-box;
	border: 1px solid black;
	background-color: #d7ecff;
	font-size: 16px;
}

input[type=file] {
	color: transparent;
	width: 166px;
}

select option {
	margin: 40px;
	color: #335566;
	background-color: rgba(0,0,0,0.4);
}

Layouttips

  • Använd container-div:ar för avstånd
  • Behåll konsekventa tabellcellbredder
  • Behåll unika ID:n för formulärelement
  • Prefixa formulärelement-ID:n med ‘f_’
  • Placera knappar inuti formuläret men utanför tabellen

Viktiga anmärkningar

  • Matcha befintlig webbplatsstyling
  • Behåll formulärvalidering intakt
  • Behåll korrekt element-nestning
  • Följ containerhierarkin
  • Använd korrekt CSS-arv
JS 3

JS 3 - Inloggningsautentisering & Säkerhet

Inloggningsformulärstruktur

  • Inmatningsfält för anställdskod
  • Inmatningsfält för lösenord
  • Skicka- och återställningsknappar
  • Centrerad på sidan
  • Grundläggande styling som matchar befintliga formulär

HTML-implementering

<form name="login" action="login.html" method="post" onsubmit="return formCheck()">
	<h1>Login</h1>
	<input type="text" name="employeeCode" maxlength="20">
	<br>
	<input type="password" name="password">
	<br>
	<input type="submit" value="Login">
	<input type="reset">
</form>

Formulärvalidering

function formCheck() {
	if (document.login.employeeCode.value === "" || 
		document.login.employeeCode.value.indexOf("-") === -1) {
		alert("Du måste ange en giltig anställdskod");
		return false;
	}
	if (document.login.password.value === "") {
		alert("Du måste ange ett lösenord");
		return false;
	}
	return true;
}

Säkerhetsöverväganden

  • Lösenordshashning krävs
  • HTTPS för dataöverföring
  • Kryptering av frågesträng
  • Skydd mot man-in-the-middle-attacker
  • Server-sidig validering är avgörande

Frågesträngsformat

  • employee_code=värde&password=krypterat_värde
  • POST-metoden rekommenderas framför GET
  • Data behöver fortfarande krypteras även med POST
JS 4 (del 1)

JS 4 (del 1) - Krypteringsalgoritm

Grunderna i Tricel-krypteringsalgoritmen

  • Baserad på Caesar-chifferhjulrotation
  • Slumpmässiga rotationssteg
  • Saltvärden läggs till före och efter meddelandet
  • Numerisk nyckelrepresentation
  • Teckenuppsättning begränsad till versaler och mellanslag

Implementeringssteg

  1. Skapa alfabetarray
  2. Generera slumpmässig rotationsnyckel
  3. Generera slumpmässiga saltvärden
  4. Kryptera meddelande med rotation
  5. Lägg till saltvärden
  6. Lägg till nycklar i början av meddelandet

Initiala variabler

var alphabet = ["A","B","C","D","E","F","G","H","H","I","J","K","L","M",
				"N","O","P","Q","R","S","T","U","V","W","X","Y","Z"," "];
var alphabetLength = alphabet.length;

Grundläggande formulärstruktur

<form name="password" action="login.html" method="get">
	<input type="text" name="password">
	<input type="button" value="Encrypt" onclick="encrypt()">
	<input type="reset">
</form>

Valideringsfunktion

function checkLegalLetters(password) {
	let passwordOK = true;
	let passwordArray = password.split("");
	
	for (let i = 0; i < passwordArray.length; i++) {
		if (!alphabet.includes(passwordArray[i])) {
			passwordOK = false;
		}
	}
	return passwordOK;
}

Säkerhetsanmärkningar

  • Begränsad teckenuppsättning ökar förutsägbarheten
  • Saltvärden ökar komplexiteten
  • Rotationsnyckeln måste överföras säkert
  • Inte lämplig för känslig data
  • Endast i utbildningssyfte
JS 4 (del 2)

JS 4 (del 2) - Krypteringsimplementering

Generering av lösenordsnyckel

// Generera slumpmässig nyckel
let passwordKey = Math.floor(Math.random() * alphabet.length);

// Hämta bokstav för slumpmässig nyckel
let keyLetter = alphabet[passwordKey];

// Visa nyckel i formuläret
document.password.form.password_key.value = keyLetter;

Skapande av roterat alfabet

// Skapa roterad alfabetarray
let rotatedAlphabet = [];

// Loopa genom alfabetet och skifta med nyckel
for (let i = 0; i < alphabet.length; i++) {
	let newLetter = i + passwordKey;
	
	// Om newLetter går bortom alfabetet, börja från början
	if (newLetter >= alphabet.length) {
		newLetter = newLetter - alphabet.length;
	}
	
	rotatedAlphabet[i] = alphabet[newLetter];
}

Krypteringsprocess

// Dela upp lösenordet i en array
let passwordOld = document.password.form.password.value.split("");
let passwordNew = [];

// Kryptera varje bokstav
for (let i = 0; i < passwordOld.length; i++) {
	let passwordIndex = alphabet.indexOf(passwordOld[i]);
	passwordNew[i] = rotatedAlphabet[passwordIndex];
}

// Sammanfoga krypterat lösenord
let passwordBody = passwordNew.join("");

// Generera saltvärden
let salt = Math.floor(Math.random() * alphabet.length);
let saltLetter = alphabet[salt];
let salt1 = "";
let salt2 = "";

// Lägg till slumpmässiga salttecken
for (let i = 0; i < salt; i++) {
	salt1 += alphabet[Math.floor(Math.random() * alphabet.length)];
	salt2 += alphabet[Math.floor(Math.random() * alphabet.length)];
}

// Kombinera alla krypterade delar
let passwordEncrypted = saltLetter + salt1 + keyLetter + passwordBody + salt2;
document.password.form.password_encrypted.value = passwordEncrypted;

Säkerhetsanmärkningar

  • Grundläggande kryptering för utbildningsändamål
  • Inte lämplig för produktionsanvändning
  • Saltvärden ökar komplexiteten
  • Slumpmässig nyckelgenerering varje gång
  • Rotation baserad på alfabetposition
JS 5

JS 5 - Dekrypteringsalgoritm

Bearbetning av frågesträng

let query = window.location.search.substring(1);
let vars = query.split('&');
for (let i = 0; i < vars.length; i++) {
	let pairs = vars[i].split('=');
	if (pairs[0] === 'password') {
		document.getElementById('password').value = pairs[1];
	}
}

Dekrypteringssteg

  1. Extrahera krypterad text från frågesträngen
  2. Avkoda URL-kodade tecken
  3. Extrahera saltvärden och rotationssteg
  4. Omvänd rotation baserad på algoritm
  5. Ta bort saltvärden
  6. Konvertera tillbaka till vanlig text

Säkerhetsöverväganden

  • Hantera dekrypteringsfel på ett smidigt sätt
  • Validera inmatningsformat
  • Kontrollera om data är felaktig
  • Logga dekrypteringsförsök
  • Skydda mot brute force-attacker

Formulärstruktur

  • Inmatningsruta för krypterad text
  • Visningsområde för dekrypterat resultat
  • Steg-för-steg-visning av dekrypteringsprocessen
  • Felmeddelandeområde

Implementeringsanmärkningar

  • Matcha krypteringsalgoritmen exakt
  • Använd samma teckenuppsättning som krypteringen
  • Upprätthåll alla säkerhetsåtgärder
  • Dokumentera dekrypteringsprocessen
JS 6

Inlämningsuppgift 2

JS 7

JS 7 - Hashning & Säkerhet

Skillnader mellan kryptering och hashning

  • Kryptering:

    • Reversibel process
    • Data kan dekrypteras tillbaka till originalet
    • Använder nycklar för kryptering/dekryptering
    • Bra för meddelandeöverföring

  • Hashning:

    • Envägsprocess
    • Kan inte återställa originaldata
    • Samma inmatning ger alltid samma hash
    • Bra för lösenordslagring

Säkerhetsöverväganden

  • Lagra aldrig lösenord i klartext
  • Frontend-kryptering är synlig i källkoden
  • Hashning är säkrare för frontend-användning
  • Hasha alltid lösenord innan lagring

MD5-hashning

  • Skapad 1991 av Ronald Rivest
  • 128-bitars hashvärde (32 tecken)
  • Betraktas som trasig sedan 2008
  • Inte lämplig för modern säkerhet
  • Fortfarande användbar för filintegritetskontroller

Vanliga MD5-verktyg

  • MD5-hashgeneratorer
  • Regnbågsbord
  • Hash-knäckare
  • Brute Force-verktyg

SHA-256

  • Säkrare än MD5
  • 256-bitars hashvärde (64 tecken)
  • Rekommenderas för närvarande för säkerhet
  • Krävs för moderna applikationer

Implementeringsexempel

function hashPassword() {
		let password = document.loginForm.password.value;
		document.loginForm.password.value = hexMD5(password);
		return true;
}

Bästa säkerhetspraxis

  • Använd moderna hashalgoritmer (SHA-256+)
  • Lagra aldrig lösenord i klartext
  • Hasha alltid på serversidan
  • Implementera saltvärden
  • Regelbundna säkerhetsrevisioner
JS 8 (del 1)

JS 8 (del 1) - AJAX

Vad är AJAX?

  • Asynchronous JavaScript And XML
  • Upprätthåller klient-server-kommunikation
  • Uppdaterar sidinnehåll utan uppdatering
  • Baserad på XMLHttpRequest-objektet
  • Kan uppdatera DOM-objekt baserat på händelser

Hur AJAX fungerar

  1. Händelse inträffar (onClick, onChange, onLoad)
  2. XMLHttpRequest-objekt skapas
  3. Begäran skickas till webbservern
  4. Servern bearbetar begäran
  5. Servern skickar tillbaka svar
  6. JavaScript läser svaret
  7. Sidinnehållet uppdateras

Grundläggande AJAX-struktur

// Skapa XMLHttpRequest-objekt
const xhttp = new XMLHttpRequest();

// Definiera onload-funktion
xhttp.onload = function() {
	document.getElementById("demo").innerHTML = this.responseText;
}

// Öppna och skicka begäran
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

XMLHttpRequest-egenskaper

  • onload
  • responseText
  • responseXML
  • status
  • statusText

XMLHttpRequest-metoder

  • open()
  • send()
  • abort()
  • getAllResponseHeaders()
  • getResponseHeader()

CORS-säkerhet

  • Cross-Origin Resource Sharing
  • Begränsar webbläsaren från att läsa lokala filer
  • Säkerhetsåtgärd mot skadliga skript
  • Kräver korrekt serverkonfiguration
  • Lokal utveckling kräver lösningar

Utvecklingslösningar

  • Använd lokal webbserver
  • Chrome-tillägg för CORS
  • Inaktivera webbsäkerhet (endast utveckling)
  • Server-sidiga CORS-headers
  • Åsidosätt aldrig i produktion
JS 8 (del 2)

JS 8 (del 2) - JQuery

Grundläggande JQuery-struktur

  • Dokumentets redo-funktion
  • Händelsehantering
  • AJAX-anrop
  • DOM-manipulation

Vanliga JQuery-metoder

$(document).ready(function() {
	$("#button").click(function() {
		$("#div").load("ajax_info.txt", function(response, status, xhr) {
			if (status === "success") {
				alert("Innehållet laddades framgångsrikt");
			} else {
				alert("Fel: " + xhr.status + ": " + xhr.statusText);
			}
		});
	});
});

Exempel på databasladdning

function loadDoc() {
	const xhttp = new XMLHttpRequest();
	xhttp.onload = function() {
		document.getElementById("infoLastLogin").innerHTML = this.responseText;
	}
	xhttp.open("GET", "login_db.txt", true);
	xhttp.send();
}

Datum- och tidsfunktioner

function loadDateTime() {
	let today = new Date();
	let date = today.getDate() + "." + (today.getMonth() + 1) + "." + today.getFullYear();
	let time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
	let weekDayNumber = today.getDay();
	let weekDayName;

	switch(weekDayNumber) {
		case 0: weekDayName = "Sunday"; break;
		case 1: weekDayName = "Monday"; break;
		case 2: weekDayName = "Tuesday"; break;
		case 3: weekDayName = "Wednesday"; break;
		case 4: weekDayName = "Thursday"; break;
		case 5: weekDayName = "Friday"; break;
		case 6: weekDayName = "Saturday"; break;
	}

	let htmlText = weekDayName + " " + date + " " + time;
	document.getElementById("infoDateTime").innerHTML = htmlText;
	setInterval(loadDateTime, 1000);
}

Bearbetning av inloggningsdata

function getQueryString(name) {
	let vars = window.location.search.substring(1).split("&");
	for (let i = 0; i < vars.length; i++) {
		let temp = vars[i].split("=");
		if (temp[0] === name) {
			return temp[1];
		}
	}
	return false;
}

function updateContainer() {
	let employeeCode = getQueryString("employee_code");
	let htmlText = "Välkommen tillbaka " + employeeCode;
	document.getElementById("info").innerHTML = htmlText;
}

Databassträngbearbetning

let loginDBstring = loginDBstring.replace(/[\n\r\t]/g, "");
let loginDBarray = loginDBstring.split(",");

if (loginDBarray.includes(employeeCode)) {
	let employeeIndex = loginDBarray.indexOf(employeeCode);
	let numberOfLogins = loginDBarray[employeeIndex + 1];
	let lastLoginDate = loginDBarray[employeeIndex + 2];
	let lastLoginTime = loginDBarray[employeeIndex + 3];
}
JS 9 (del 1)

JS 9 (del 1) - XML & AJAX

XML-strukturregler

  • Ett och endast ett rotelement
  • Alla element måste stängas
  • Element måste vara korrekt kapslade
  • Elementnamn är skiftlägeskänsliga
  • Attribut måste vara citerade

DOM-trädstruktur

  • Document object model
  • Trädliknande datastruktur
  • Element som noder
  • Förälder-barn-relationer
  • Syskonrelationer

XML-parsning med JavaScript

// Skapa parser
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(text, "text/xml");

// Åtkomst till element
const elements = xmlDoc.getElementsByTagName("element");
const value = elements[0].childNodes[0].nodeValue;

XML AJAX-exempel

function loadXMLDoc() {
	const xhttp = new XMLHttpRequest();
	xhttp.onload = function() {
		let xmlDoc = this.responseXML;
		let elements = xmlDoc.getElementsByTagName("book");
		let html = "";
		for (let i = 0; i < elements.length; i++) {
			html += elements[i].childNodes[0].nodeValue + "<br>";
		}
		document.getElementById("demo").innerHTML = html;
	}
	xhttp.open("GET", "books.xml", true);
	xhttp.send();
}

Säkerhetsöverväganden

  • Begränsningar för lokal filåtkomst
  • CORS-policyer
  • Serverkonfiguration krävs
  • Datavalidering behövs
  • Säker överföring
JS 9 (del 2)

JS 9 (del 2) - JSON

Vad är JSON

  • JavaScript Object Notation
  • Modernt datalagringsformat
  • Ersätter XML i många applikationer
  • Baserad på nyckel-värde-par
  • Stöder kapslade strukturer

JSON-struktur

  • Liknar JavaScript-objekt
  • Använder krullparenteser {}
  • Nyckel-värde-par separerade med kolon
  • Objekt separerade med kommatecken
  • Kan kapslas flera nivåer

Exempel på JSON-struktur

{
	"personnelRegistry": {
		"employees": [
			{
				"employee_code": "001",
				"name": "Hulk",
				"signature_date": "2023-01-01"
			}
		]
	}
}

JSON-metoder

// Parsa JSON-sträng till objekt
const jsonArray = JSON.parse(textString);

// Konvertera JSON-objekt till sträng
const textString = JSON.stringify(jsonObject);

Fördelar jämfört med XML

  • Enklare syntax
  • Inbyggt JavaScript-stöd
  • Direkt åtkomst till egenskaper
  • Mindre verbose
  • Bättre prestanda

Enkelt JSON-exempel

// Skapa JSON-sträng
let text = '{"cars":["Ford","Audi","Fiat"]}';

// Parsa till JSON-objekt
let myArr = JSON.parse(text);

// Åtkomst till data
document.getElementById("demo").innerHTML = myArr.cars[0];

Säkerhetsanmärkningar

  • Validera JSON innan parsning
  • Använd try-catch med JSON.parse
  • Rensa data innan användning
  • Undvik eval() med JSON
  • Kontrollera datatyper