Vad är JavaScript och vad används det till?

01Vad är JavaScript?

Det mest praktiska svaret på frågan vad är JavaScript: språket bakom allt på en webbsida som reagerar när du klickar, skriver eller scrollar. Menyer som fälls ut, knappen lägg i varukorgen, sökförslag i realtid och zoomen på en karta drivs av JavaScript.

Språket uppstod för webbläsare i mitten av 1990-talet och definieras av en standard som heter ECMAScript. Trots likheten i namnet har det inget direkt samband med Java; syntax och arbetssätt skiljer sig ganska mycket.

Idag är JavaScript inte begränsat till webbläsaren. Det kan köras på servrar, i mobilappar, i skrivbordsprogram och till och med på små enheter. Den utbredningen gör det till ett av de mest givande språken för den som börjar med programmering.

JavaScript är ett tolkat och dynamiskt typat språk: något separat kompileringssteg behövs inte innan koden körs, och variablernas typ avgörs vid körning. Det gör det lätt att experimentera snabbt, men kan också leda till att typfel upptäcks sent i stora projekt.

02Hur samverkar HTML, CSS och JavaScript?

Du kan tänka dig en webbsida som ett hus. HTML är väggar och rum, CSS är färg och möbler, och JavaScript är elinstallationen: den tänder ljuset, öppnar dörren och startar larmet.

De tre ersätter inte varandra. Innehållet ska ligga i HTML och utseendet i CSS; JavaScript ska bara användas för beteende. Den uppdelningen underlättar underhållet och gör att innehållet syns även om JavaScript inte laddas.

När sidan öppnas i webbläsaren omvandlas HTML till en trädstruktur som kallas DOM. JavaScript når det här trädet; det hittar ett element, ändrar dess text, lägger till nya element eller lyssnar på en händelse.

<p id="mesaj">Merhaba!</p>
<button id="dugme">Ändra</button>

<script>
  const mesaj = document.getElementById("mesaj");
  document.getElementById("dugme").addEventListener("click", () => {
    mesaj.textContent = "JavaScript kördes.";
  });
</script>

03Vad används JavaScript till?

Svaret på frågan vad används JavaScript till breddas med miljön det används i. I webbläsaren bygger det användarupplevelsen, på servern affärslogiken och i mobil och på skrivbordet själva applikationen.

JavaScript i webbläsaren

JavaScript i webbläsaren används mest till: formulärvalidering, rullgardinsmenyer och flikar, bildgallerier, att hämta data utan att ladda om sidan, kartor och diagram samt varukorgs- och betalningssteg. I ett väl utformat gränssnitt leder de här beteendena användaren utan att tröttar; planeringen av det hör till UI/UX-design.

JavaScript på servern

Node.js är en miljö som kör JavaScript utanför webbläsaren. Med det skrivs API:er, realtidsmeddelandetjänster, skript för filhantering och kommandoradsverktyg. Att samma språk används både i frontend och backend underlättar för små team.

Mobil och skrivbord

Mobilappar kan utvecklas med JavaScript med verktyg som React Native och skrivbordsprogram med verktyg som Electron. Vissa kodeditorer och meddelandeappar du använder dagligen är gjorda på det sättet.

04Grundbegrepp och exempel

Den som börjar lära sig JavaScript behöver först få de här byggstenarna på plats. Följande JavaScript-exempel kan provas direkt i webbläsarens utvecklarkonsol (F12).

• Variabler: värden lagras med let och const; const föredras för värden som inte ska ändras.
• Datatyper: text (string), tal (number), logiskt värde (boolean), lista (array), objekt (object).
• Funktioner: samlar ett återkommande arbete under ett namn; pilfunktioner ger kortare skrivsätt.
• Arraymetoder: med map, filter, find och reduce bearbetas listor läsbart.
• Händelser: man reagerar på användarens handlingar som click, input och submit.
• Asynkron kod: med fetch, Promise och async/await fryser inte sidan medan man väntar på data.

const urunler = [
  { ad: "Olivolja", fiyat: 320 },
  { ad: "Sabun", fiyat: 90 },
  { ad: "Bal", fiyat: 410 }
];

const pahalilar = urunler.filter(u => u.fiyat > 300).map(u => u.ad);
console.log(pahalilar); // ["Olivolja", "Honung"]

async function kullaniciGetir() {
  const yanit = await fetch("https://jsonplaceholder.typicode.com/users/1");
  const veri = await yanit.json();
  console.log(veri.name);
}
kullaniciGetir();

05JavaScript och webbplatsens prestanda

JavaScript är kraftfullt men inte gratis. Webbläsaren måste ladda ner, tolka och köra varje skript. För mycket eller onödigt JavaScript gör att sidan svarar sent, särskilt på mobiler i mellanklassen.

Googles interaktionsmått INP mäter hur lång tid det tar för sidan att svara på ett klick, och under 200 ms räknas som bra. Tunga skript, oanvända bibliotek och många tredjepartstaggar är de främsta orsakerna till att värdet försämras.

De praktiska reglerna är enkla: ladda bara den kod som behövs, skjut upp skript som inte är kritiska och använd inte flera bibliotek som gör samma sak. Mätningen och förbättringen bör göras regelbundet inom hastighet och prestanda. För en smidig upplevelse på mobilen måste det ses tillsammans med mobilanpassad design.

06Vanliga misstag bland nybörjare

JavaScript är ett flexibelt språk, och den flexibiliteten gör det också lätt att göra fel i början. Att känna igen fällorna nedan sparar timmar av felsökning.

• Att inte använda === i stället för ==: Lös jämförelse konverterar typer av sig själv och ger oväntade resultat; strikt jämförelse är säkrare.
• Att deklarera variabler med var: Det ger problem med scope; i modern kod används let och const.
• Att inte vänta på asynkron kod: att försöka använda data innan fetch-svaret har kommit är den vanligaste orsaken till fel med odefinierade värden.
• Att ignorera felen i konsolen: Webbläsarens konsol anger ofta tydligt både rad och orsak till felet.
• Att lita på användarens indata: Valideringen i webbläsaren är till för bekvämlighet; för säkerhetens skull måste samma kontroll alltid göras även på servern.
• Att lägga till ett nytt paket för varje uppgift: Att lägga till ett bibliotek för saker som kan lösas med några rader gör sidan tyngre och ger underhållsbörda.

07JavaScript-ekosystemet: React, TypeScript, Node.js

Runt JavaScript finns ett mycket brett ekosystem av verktyg. Det är också det som förvirrar nybörjaren mest: vilket verktyg som används till vad.

Bibliotek som React delar upp gränssnittet i komponenter och gör stora projekt hanterbara; detaljer finns i texten vad är React. TypeScript lägger till ett typsystem i JavaScript och fångar fel innan koden körs; skillnaderna har vi förklarat i texten vad är TypeScript.

npm är pakethanteraren; den låter dig lägga till färdiga kodstycken som andra skrivit i projektet. För att göra gränsen mellan frontend och backend tydlig vägleder också texten om skillnaden mellan frontend och backend.

08Färdplan för att lära sig JavaScript

För att lära sig JavaScript behövs ingen dyr installation; en webbläsare och en kodeditor räcker. Det viktiga är att få ordningen rätt och att befästa varje begrepp med ett litet projekt.

1. Gör en enkel sida med HTML och CSS.
2. Prova variabler, villkor, loopar och funktioner i konsolen.
3. Lär dig att välja och ändra element på sidan med DOM.
4. Slutför ett litet projekt som en att göra-lista eller en miniräknare.
5. Hämta data från ett öppet API med fetch och async/await.
6. Bekanta dig med moduler, npm och ett byggverktyg; gå därefter vidare till ett bibliotek.

Pålitliga källor

Som referenskälla för språket är MDN Web Docs en av de mest pålitliga adresserna. Videor och kurser är användbara, men det verkliga lärandet sker i dina egna projekt där du gör fel och rättar dem.