Fyrirlestur – JavaScript forrit

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

---

Segðir (expressions)

• Segð er kóðabútur sem skilar gildi
  • Tala, stengur o.fl.
• Segðir geta innihaldið aðrar segðir
  • 1 + 1

---

Skipanir (statement)

• Skipanir eru samansöfn af segðum
• Forrit eru samansöfn af skipunum
• Einfaldasta skipunin (og segðin, og forritið) er segð með semíkommu
  • 1;

---

Semíkomma

• Semíkomma er statement terminator eins og í Java eða C
• Ekki krafa, Automatic Semicolon Insertion sér um að setja inn ef sleppt
• Þarf að passa, við ættum alltaf að setja inn semíkommu meðan við erum að læra JavaScript

---

return
  a+b

túlkað sem

return; a+b;

---

result = a + b
(d + 1)

túlkað sem

result = a + b(d + 1);

---

Breytur

• Skilgreinum breytur með lykilorðunum let, const eða var
  • let result;
  • var er „eldri“ leið til að skilgreina breytur sem við ættum ekki að nota í dag

---

• Getum aukalega gefið gildi úr segð
  • let result = 10;
  • const RESULT = 1; // breytunöfn eru hástafanæm

---

• Megum ekki skilgreina aftur breytu sem áður var skilgreind með let eða const
• Breytur innihalda ekki gildi, þau vísa í þau
• Breytur hafa ekki týpu, gildin hafa týpu

---

let result = 1;
let result = 2; // SyntaxError

---

Dýnamískar breytur

Þar sem breytur í JavaScript hafa ekki týpu getum við breytt gildum þeirra.

let a = 'halló heimur';

a = 1;

a = false;

a = undefined;

---

const

• const bannar endurskilgreiningu á grunngildi
• Megum ekki breyta const breytu eftir að hún er skilgreind, fáum villu

---

const FOO = 1;
FOO = 2; // Fáum TypeError

---

Breytunöfn

• Breytur geta heitið hvaða orði sem er
• Mega ekki byrja á tölustaf
• Mega byrja á og nota $ og _ en engin önnur tákn sem ekki eru stafir eða tölustafir
• Getum notað íslensku
  • let hæ = '😎';

---

Samsett orð í JavaScript

• JavaScript notar yfirleitt lowerCamelCase fyrir heiti á breytum og föllum
• Sá stíll er notaður í stöðluðum föllum

---

Frátekin orð

Megum ekki nota þessi orð sem breytu nöfn þar sem þau eru lykilorð, (samt ekki samræmi milli keyrsluumhverfa):

break case catch class const continue debugger default
delete do else enum export extends false finally for
function if implements import interface in instanceof let
new package private protected public return static super
switch this throw true try typeof var void while with yield

---

• variables dæmi

---

Umhverfi (environment)

• Þegar við keyrum JavaScript forritin okkar gerist það í ákveðnu umhverfi
• Inniheldur staðlaða hluti og föll sem eiga við umhverfið
  • Í vafra höfum við aðgerðir t.d. til að eiga við vefsíðuna, bundið við window
  • Í node.js höfum við aðgerðir t.d. til að eiga við skráarkerfið, bundið við process

---

Vafri

• Vafrar bjóða upp á föll til að birta og sækja upplýsingar frá notanda
• alert() birtir skilaboð sem notandi verður að samþykkja
• confirm('á að gera þetta?') birtir skilaboð sem notandi verður að samþykkja eða hafna, skilar boolean

---

• prompt('hvað heitir þú?') birtir skilaboð og línu fyrir notanda til að svara, skilar null eða string
• Ætti aldrei (eða afskaplega sjaldan) að vera notað
  • Höfum betri leiðir sem eru ekki jafn uppáþrengjandi
  • Notum samt í fyrsta JS verkefni!

---

• input dæmi

---

Staðlaðir hlutir

• Umhverfi inniheldur staðlaða hluti, t.d.
  • Primitive wrappers
  • Math
  • Date

---

Math

• Inniheldur stærðfræði fasta og föll
• Math.PI, Math.E o.fl.
• Math.cos(), Math.log() o.fl.
• Math.max(), Math.min(), Math.floor() o.fl

---

Date

• Date hluturinn leyfir okkur að vinna með dagsetningar í JavaScript
• Í grunninn byggt á millisekúndum síðan 1970-01-01 00:00:00 UTC (Unix time)
• Getum skilgreint með ári, mánuði, degi, klukku
  • Mánuður byrjar á 0!

---

const a = new Date();
// Núna

const b = new Date(2022, 0, 1, 0, 0, 0);
// 1. janúar 2022 kl. 00:00:00

---

• Getum reiknað með tveim Date hlutum
  • b - a; // fjöldi millisekúnda milli a og b
• get og set föll til að eiga við hluti, t.d.
  • getYear og setYear

---

• math dæmi
• date dæmi

---

Flæðistýringar & lykkjur

• Höfum aðgang að flæðistýringum og lykkjum
  • líkjast mjög mikið þeim sem eru í Java
• Stýrum flæði forrita og framkvæmum ítranir

---

• Í lykkjum getum við notað:
  • break til að brjótast út/hætta í lykkju
  • continue til að sleppa rest af lykkju og halda áfram í næstu

---

if

• if keyrir kóða aðeins ef segð skilar truthy gildi
• Getum keyrt annan kóða ef ekki truthy með else
• Eða skilgreint fleiri segðir með else if
• Kóði sem keyra á ætti að vera innan { og }

---

const a = 5;
if (a > 5) {
  console.log('stærri en 5');
} else if (a > 1) {
  console.log('stærri en 1');
} else {
  console.log('1 eða minni');
}

// stærri en 1

---

• if dæmi

---

while og do while lykkjur (loops)

• while og do .. while lykkjur leyfa okkur að endurtaka kóða svo lengi sem einhver segð er sönn
• do .. while mun alltaf keyra kóða einu sinni áður en segð er athuguð

---

let i = 1;

while (i++ < 5) {
  console.log(i);
}

// 2, 3, 4, 5

---

do .. while

while lykkja sem byrjar á að keyra einu sinni í gegn

let i = 1;
do {
  console.log(i);
} while (i++ < 5);

// 1, 2, 3, 4, 5

---

for

• for lykkjur eru sérhæfðari og nýta mjög algent form á lykkjum:
  • Setja byrjunargildi
  • Athuga núverandi gildi
  • Uppfæra gildi

---

• for (<byrjunargildi>;<athuga>;<uppfæra>)
• for (let i = 0; i < 10; i = i + 1)
• Getum notað break til að hætta í lykkju í miðjum klíðum

---

Breytur og virkjar

• Við getum beitt virkjum beint á breytu sem inniheldur tölu með ++ og --
  • Hækkuð um einn eða lækkuð um einn
• Getum stytt okkur leið þegar við notum virkja, t.d.
  • a += 1; í staðinn fyrir a = a + 1;
  • b /= 10; í staðinn fyrir a = a / 10;

---

for (let i = 0; i < 100; i++) {
  if (i % 2 === 1) {
    continue;
  }

  if (i > 5) {
    console.log('Yfir 5, hættum!');
    break;
  }

  console.log(i);
}

// 0, 2, 4, "Yfir 5, hættum!"

---

switch

• Ef við höfum kóða sem notar if og else if mikið getum við notað switch

---

const a = 2;
switch (a) {
  case 1:
    console.log('a = 1');
    break;
  case 2:
    console.log('a = 2');
    break;
  default:
    console.log('a = ???');
}

// a = 2

---

• loops dæmi