Udviklingsværktøjer og karriere i JS

Computerspace · FGU · Programmering i JavaScript

🔧 Udviklingsværktøjer og karriere i JavaScript

JavaScript-udviklere bruger kraftfulde værktøjer til at skrive, debugge og optimere kode. Sproget åbner døre til mange karriereveje.

Browser DevTools (F12):

```

Console – Kør JavaScript direkte, se console.log output og fejl

Network – Se alle HTTP-kald: URL, headers, payload, response, timing

Elements – Inspekter og rediger HTML/CSS live

Sources – Debuggering: sæt breakpoints, step through kode

Performance – Profiler din app for flaskehalse

Application – Se cookies, localStorage, sessionStorage

```

Debugging i browser:

```javascript

// Console metoder

console.log("Basis output");

console.error("Fejl!");

console.warn("Advarsel!");

console.table([{ navn: "Anna" }, { navn: "Bo" }]); // Tabellvisning

console.time("loop"); / kode / console.timeEnd("loop"); // Tidtagning

// Debugger statement – stopper kode-eksekvering

function buggyFunktion(x) {

debugger; // Browser åbner Sources og stopper her

return x * 2;

}

```

VS Code extensions til JavaScript:

• ESLint – finder fejl og code style problemer automatisk
• Prettier – auto-formatterer din kode ved gem
• Live Server – auto-reload i browser ved filændring
• GitLens – avanceret Git integration
• Thunder Client – test API endpoints direkte i VS Code

Karriereveje i JavaScript:

| Rolle | Teknologier | Opgaver |

|-------|-------------|---------|

| Frontend-udvikler | HTML/CSS/JS, React/Vue | Brugergrænseflader |

| Backend-udvikler | Node.js, Express, Databaser | API'er og servere |

| Full-Stack-udvikler | Begge sider | Hele applikationen |

| React Native-udvikler | React Native | Mobilapps (iOS/Android) |

TypeScript – næste skridt:

```typescript

// TypeScript tilføjer statisk typning til JavaScript

function add(a: number, b: number): number {

return a + b;

}

interface Elev {

navn: string;

alder: number;

klasse?: string; // Optional felt

}

const elev: Elev = { navn: "Anna", alder: 19 };

```

---

🎓 Læringsmål for Udviklingsværktøjer og karriere i JS

Læringsmål

• Bruge Browser DevTools effektivt: Console, Network, Elements og Sources tabs
• Debugge JavaScript med breakpoints og debugger-statement
• Kende de vigtigste VS Code extensions til JavaScript-udvikling
• Forstå de verschillende karriereveje inden for JavaScript: frontend, backend, full-stack
• Have kendskab til TypeScript som det naturlige næste skridt efter JavaScript

Sådan kan du arbejde med emnet

• Hvad kan man bruge Browser DevTools til?
• Hvordan debugger man JavaScript kode?
• Hvad er ESLint og Prettier og hvorfor er de nyttige?
• Hvad er TypeScript og hvad er fordelen over JavaScript?

⚠️ Typiske fejl at undgå

• Bruger kun console.log til debugging – lær at bruge breakpoints for effektiv debugging
• Ignorerer browser-advarsler – deprecation warnings i console peger på fremtidige problemer
• Springer TypeScript over – de fleste professionelle JS-jobs bruger TypeScript i dag

---

💡 Tips til at komme i gang

• Sæt en breakpoint i Sources (F12) og step igennem din kode linje for linje
• Åbn Network tab og kig på hvad der sker bag kulisserne når du loader en hjemmeside
• Lær TypeScript – start med at tilføje typer til et eksisterende JS-projekt
• Byg din portfolio – 3-5 projekter på GitHub er vejen til dit første job