Intro JavaScript

Språket på webben

# Hello, world

Hello, world

JavaScript körs ofta i webbläsare. Det är i denna som "konsolen" finns.

JS-konsol

Python-konsol

Python är ofta tvunget att installeras, medan JavaScript finns direkt i webbläsaren.

let age = 42;
age += 1; // Tillåtet att ändra den deklarerade variabeln
# Variabler

Deklaration av identifierare / variabler

Två varianter

const pi = 3.14;
pi = 3.15; // Otillåtet!

Att deklarera något som inte förändras som en konstant rekommenderas!

Det går att deklarera med det reserverade ordet \(\texttt{var}\) också, men i korthet: gör inte det!

Datatyper

\(\texttt{String}\)

En sträng, helt motsvarande i Python.

\(\texttt{Object}\)

Kan representera lite olika saker. Till en början låter vi dessa vara "array:er", motsvarande listor i Python.

# Datatyper

\(\texttt{Boolean}\)

Kan anta värdena \(\texttt{true}\) och \(\texttt{false}\), på samma sätt som i Python.

\(\texttt{Number}\)

Ett tal, såväl heltal som flyttal. JavaScript gör, till skillnad från Python, ingen skillnad på dem.

De tre förstnämnda är primitiva datatyper och den sistnämnda är en sammansatt datatyp. Det finns ytterligare några datatyper, men vi börjar med de ovanstående.

Villkor

let myPoints = 45;
const maxPoints = 45;
if (myPoints > 42) {
  console.log("A grade");
  if (myPoints === maxPoints) {
    console.log("Top notch :-)");
  }
} else if (myPoints > 23) {
  console.log("C grade");
} else if (myPoints > 12) {
  console.log("E grade");
} else {
  console.log("F Grade");
}
# Villkor

Det finns en skillnad mellan "==" och "===", läs mer om det här (==) och här (===). 

for-loopar

for (let i = 0; i <= 4; i++) {
  console.log(i);
}
# Loopar

Loopen evalueras enligt uttrycket i huvudet och så länge det är uppfyllt. Läs mer om for-loopar här.

while-loopar

const maxNumber = 5;
let number = 0;
while (number < maxNumber) {
  console.log(number);
  number++;
}
# Loopar

While-loopar fungerar på ungefär samma sätt som i Python. Läs mer om while-loopar här.

Funktioner

function add(number_1, number_2) {
  let sum = number_1 + number_2;
  return sum;
}

let mySum = add(20, 22);
console.log(mySum);
# Funktioner

Det finns flera sätt att deklarera funktioner på; det här är nog det som är mest likt Python. Läs mer om funktioner här.

Arrays

let myNumbers = [41, 42, 43];
myNumbers.push(44, 45); // Lägger till i slutet
myNumbers.splice(2, 0, 1, 2); // Lägger till 1 och 2 fr o m position 2
for (let i = 0; i <= myNumbers.length; i++) {
  console.log(myNumbers[i]);
}
console.log(typeof(myNumbers));
# Arrays

Med metoden \(\texttt{splice}\) kan man lägga till och ta bort element på godtyckliga platser i array:en, läs om det här (se menylisten till vänster för alla möjliga metoder som \(\texttt{Array}\) erbjuder).

Vi ser också i utmatningen att \(\texttt{myNumbers}\) är av typen \(\texttt{Object}\).

Loopa genom en array

myArray = [10, 20, 30];
for (let i of myArray) {
  console.log(i);
}

# Arrays

Skriver ut \(\texttt{10 20 30}\) på varsin rad. Observera skillnaden mellan denna loop och en \(\texttt{for}\)-loop där en variabel räknas upp.

Inmatning

let myNumber = Number(prompt("Ange ett tal"));
console.log(`Du angav ${myNumber}`);
console.log(`myNumber är av typen "${typeof myNumber}"`);
# Inmatning

På samma sätt som i Python kommer en inmatning att bli en sträng om inte en typkovertering görs, vilket görs i exemplet ovan.

Utmatning

let myNumber = Number(prompt("Ange ett tal"));
alert(`Du angav ${myNumber}`);
alert(`myNumber är av typen "${typeof myNumber}"`);
# Utmatning

Utmatningen behöver inte vara till konsolen, här styrs den till ett separat fönster.

Vad behövs för att köra JS-filer?

Själva innehållet på sidan, kan i princip vara tomt, men det är i denna som själva länkningen ("anropet") av js-filen sker.

HTML-fil

CSS-fil

Stylingen av innehållet. Kan i princip vara tomt.

JS-fil

Själva programmet.

# Minimal miljö

Uppgifter

# Uppgifter
  • Installera VS Code och klona "start-repot".
  • Konfigurera VS Code genom att installera tillägget \(\texttt{Live Server}\). Det gör att man inte manuellt behöver ladda om sidan i webbläsaren efter varje ändring av programmet.
  • Installera och konfigurera tillägget \(\texttt{Prettier}\). Det är en kodformaterare som ger snyggt layoutad kod. Se denna instruktionsvideo för hur konfigurationen ska göras. (Denna installation kan även göras senare, det är inte akut.)
  • Pröva att köra programmet i filen \(\texttt{script.js}\). Det görs genom att gå till HTML-filen och trycka på \(\texttt{Go Live}\) och i webbläsaren trycka på \(\texttt{CTRL-Shift-J}\) (vilket visar konsolen).

Forts.

Uppgifter

# Uppgifter

  • I höstas så gjorde du ett program i Python där du matade in ett penningbelopp, varpå programmet svarade med om det räcker till att köpa ett guld-, silver- eller ett järnsmycke. Implementera detta i JavaScript, där resultatet skrivs ut i konsolen. Du ska inte göra en inmatning, utan definiera det tillgängliga beloppet som en variabel eller konstant. Resultatet ska skrivas ut i konsolen.

  • Du gjorde även ett program i Python som avgjorde om ett inmatat årtal är ett skottår eller inte. Implementera detta i JavaScript (med årtalet deklarerat som en variabel eller konstant), resultatet ska matas ut i en \(\texttt{alert}\)-box. 
  • Du gjorde även ett program som slumpade fram en stryktipsrad: 13 rader där varje rad består av något av en 1:a, ett x eller en 2:a. Implementera detta i JavaScript, utmatning till konsolen. Här finns information om hur det går till slumpa fram heltal i JavaScript.

Uppgifter

# Uppgifter

  • Skriv en funktion som omvandlar en vinkel given i radianer till grader, och returnerar storleken i grader. Inmatningen sker via en dialogbox som fås fram via \(\texttt{prompt()}\) (se information här) och utmatningen via en informationsbox \(\texttt{alert()}\). Använd Template literals för att bygga en mening med svaret. T ex "1.57 radianer är 89.95 grader".

  • Anpassa funktionen så att den returnerar vinkeln i intervallet
    \(0\leq v <360^\circ\). Om t ex vinkeln 14.14 anges så ska programmet svara: "14.14 radianer motsvarar 810.16 grader, vilket motsvarar en vinkel på 90.2 grader utritad i enhetscirkeln."

Intro JavaScript

By Nikodemus Karlsson

Intro JavaScript

JavaScript för Pythonprogrammerare

  • 492

More from Nikodemus Karlsson