Gå til hovedinnhold

Grunnleggende JavaScript

  • JavaScript er brukt for å legge til interaktivitet til en nettside.
  • JavaScript er verdens mest brukte programmeringsspråk.
  • JavaScript brukes ofte sammen med HTML og CSS, men kan også bli brukt i andre sammenhenger.

JavaScript brukes eksempelvis til å utføre en oppgave når en knapp blir trykket inn, eller til å hente informasjon om klokken, for å endre på HTML-elementer, og mye mer. Med JavaScript kan du til og med lage et helt spill, eller animere 3D objekter.

Hvordan bruke JavaScript?​

Det finnes i hovedsak to måter å legge JavaScript på en HTML-side:

Intern JavaScript​

Intern JavaScript er lagt i <script>-elementet som regel i slutten av <body>-elementet, men kan også legges i <head>-elementet.

Eksempel

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <p>Hei</p>

    <script>
      let x = 2;
    </script>
  </body>
</html>

Ekstern JavaScript​

Ekstern JavaScript, er mer oversiktlig, fordi all JavaScript-koden kan legges i en eller flere egne filer. Disse filene kan så lenkes til HTML-dokumentet ved å legge til attributten src="" til <script>-elementet. Alle JavaScript-filene som er lagt til i samme HTML-dokumentet har tilgang til de globale funksjonene i hverandre.

Eksempel

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <p>Hei</p>

    <script src="skript.js"></script>
  </body>
</html>

Nøkkelord​

Alle programmeringsspråk har noen nøkkelord som har en spesifikk oppgave, en del av disse bør du vite om, slik at du ikke møter på konflikter med variabel-navn.

Variabler​

En variabel er en beholder for en verdi. Denne verdien kan endres, og brukes flere steder i koden. Hvor du kan bruke en variabel, avhenger av hvor den er definert. Dette kalles scope.

Opprette variabler​

Det fins tre måter å lage en variabler på:

  • var: Tidligere den eneste måten å lage en variabel. Denne bør du ikke bruke lenger.
  • let: Denne brukes for å lage en variabel som kan re-defineres senere
  • const: Denne brukes for å lage en variabel som ikke kan re-defineres senere

Syntaksen for å lage en variabel er:

let / const / var variabelnavn = verdi

Eksempel​

let x = 2;
const y = "ola nordmann";
// re-definer variabel:
x = 3;
x = "hei";

Hvilken verdi tror du y har?

const x = 4;
const y = x * 2;

Hvilken verdi tror du b har?

const a = 5;
const b = a + "1";

String​

En string er en tekst. Den kan inneholde bokstaver, tall, symboler, og mellomrom.

const tekst = "Hei, jeg er en tekst";
const tekst2 = `Her er forrgje tekst: ${tekst}`;

Det fins mange funksjoner du kan bruke på en string. Her er noen eksempler:

// Hente ut en del av teksten:
const delAvTekst = tekst.substring(0, 3); // = "Hei"

// Hente ut lengden på teksten:
const lengde = tekst.length; // = 20

// Gjøre om til store bokstaver:
const storTekst = tekst.toUpperCase(); // = "HEI, JEG ER EN TEKST"

// Gjøre om til små bokstaver:
const litenTekst = tekst.toLowerCase(); // = "hei, jeg er en tekst"

Husk at en string er en tekst, og ikke et tall. Hva tror du verdien til verdi er?

const tall = 2;
const tekst = "2";
const verdi = tall + tekst;

Nummer​

Et nummer er et tall. Det kan være et heltall, eller et desimaltall.

const tall = 2;
const tall2 = 2.5;

Her er noen eksempler av operasjoner du kan gjøre med tall:

// Legge sammen to tall:
const sum = tall + tall2; // = 4.5

// Trekke fra to tall:
const differanse = tall - tall2; // = -0.5

// Multiplisere to tall:
const produkt = tall * tall2; // = 5

// Dele to tall:
const kvotient = tall / tall2; // = 0.8

// Hente ut resten av en divisjon:
const rest = tall % tall2; // = 2

Array​

En array er en liste som kan inneholde ulike verdier. Her er et eksempel:

const liste = ["a", "b", "c", 1, 2, 3];

Det går an å hente ut data fra en array, ved å bruke tall for en indeks. Hva tror du verdien til verdi er?

const verdi = liste[1];

Objekt​

Du kan også lage et objekt, som kan holde data på en mer oversiktlig måte:

let ola = {
  fornavn: "Ola",
  etternavn: "Nordmann",
  alder: 22,
  søsken: ["Lise", "Per"],
};

Her kan du hente verdiene med punktum (.), og bruke dem andre steder:

const navn = `${ola.fornavn} ${ola.etternavn}`;

Funksjoner​

For å organisere logikken på en oversiktlig måte brukes funksjoner. Se for deg en spesiallaget maskin, der du kan putte en ting inn, så gjør maskinen jobben sin og du får en ny ting ut. Eller hvis du har brukt Excel, kjenner du nok til =SUM() funksjonen, den fungerer litt på samme måte.

For å lage en funksjon bruker du nøkkelordet function, etterfølgt av et valgfritt navn som beskriver oppgaven til funksjonen, og deretter parentes (), som du kan hente verdier fra. Til slutt er all logikken i en funksjon samlet inne i krøllparenteser {}. Verdien kan sendes tilbake ved hjelp av nøkkelordet return.

Eksempel

function multiplisere(x, y) {
  let sum = x * y;
  return sum;
}

Den samme funksjonen kan også skrives til en variabel med => symbolet, det fører blant annet til at verdien returneres uten å bruke nøkkelordet return:

const multiplisere = (x, y) => x * y;
// eventuelt:
const multiplisere_alt = (x, y) => {
  return x * y;
};

En variabel kan bruke denne funksjonen. Hva tror du verdien til verdi er?

let tall = 9 + 1;
const verdi = multiplisere(tall, 5);

Samhandle med HTML​

Når en nettside lastes inn, lager nettleseren en datamodell av strukturen kalt Document Object Model, forkortet DOM. Dette gir JavaScript muligheten til å samhandle med, og endre innholdet på en nettside på en standardisert måte.

Her har vi en enkel liste i HTML:

<ul class="liste">
  <li>1</li>
  <li>2</li>
  <li id="nr3">3</li>
</ul>

For å hente hele listen fra DOM, bruker du objektet document, og skriver følgende i JavaScript:

let liste = document.querySelector("ul");

querySelector er en funksjon i DOM der vi kan sende inn en CSS selector. Den gir oss tilbake et element som matcher selectoren oppgitt. Her er flere eksempler:

let tredjeElement = document.querySelector("#nr3");
let liste = document.querySelector(".liste");
let alleListeElementer = liste.querySelectorAll("li");

Her brukte vi querySelectorAll for å hente alle <li></li> elementer under listen vår. Alle elementene ble returnert som en array. Vi kan nå bruke JavaScript til å gå over alle elementene og hente og endre tallene:

alleListeElementer.forEach((listeElement) => {
  let tall = Number(listeElement.textContent);
  listeElement.textContent = tall * 2;
});

Nå vil listen se slik ut:

  • 2
  • 4
  • 6

La oss fjerne det første elementet, og legge til ett nytt element i listen, ved bruk av de innebygde funksjonene remove() og append():

alleListeElementer[0].remove();

const nyttElement = document.createElement("li");
nyttElement.textContent = "Hei";
liste.append(nyttElement);

Test deg selv​

Nå er du klar for å prøve deg selv. Lag en TODO-liste, ved bruk av HTML og JavaScript, og gjerne bruk CSS til å gjøre den litt fin.

Dette skal du ha med:

  • En liste hvor du kan krysse av og fjerne ting.
  • En input hvor du kan skrive tekst.
  • En Legg til kapp for å legge til ting i listen.

Ekstra

  • Vis hvor mange prosent av listen som er fullført.
  • Legg til knapper for å krysse av alt, og fjerne alt.

Oppsummering​

Nå har du lært grunnleggende JavaScript. Det er enda mye å lære, men alle må starte et sted. Du lærer best av å gjøre det selv, så finn på noe kult eller nyttig å lage, og søk på nettet hvis du sitter fast.

Kompetansetest​

JavaScript - Kompetansetest (1/5)

Hva brukes JavaScript hovedsaklig til?