From b01e37402ceb36e3dd70cb180987197f9a9508cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=93lafur=20Sverrir=20Kjartansson?= <kjarni@gmail.com>
Date: Mon, 18 Nov 2024 21:13:22 +0000
Subject: [PATCH] eftir fyrirlestur 14

---
 namsefni/42.upprifjun-samantekt/1.html.md     | 205 ++++++
 namsefni/42.upprifjun-samantekt/2.css.md      | 348 +++++++++
 namsefni/42.upprifjun-samantekt/3.tools.md    | 207 ++++++
 .../42.upprifjun-samantekt/4.javascript.md    | 668 ++++++++++++++++++
 namsefni/42.upprifjun-samantekt/5.verkefni.md |  89 +++
 .../42.upprifjun-samantekt/img/boxmodel.png   | Bin 0 -> 11002 bytes
 .../img/flex-direction-terms.svg              |  66 ++
 namsefni/42.upprifjun-samantekt/readme.md     |   7 +
 vikur/vika-14.md                              |  18 +
 9 files changed, 1608 insertions(+)
 create mode 100644 namsefni/42.upprifjun-samantekt/1.html.md
 create mode 100644 namsefni/42.upprifjun-samantekt/2.css.md
 create mode 100644 namsefni/42.upprifjun-samantekt/3.tools.md
 create mode 100644 namsefni/42.upprifjun-samantekt/4.javascript.md
 create mode 100644 namsefni/42.upprifjun-samantekt/5.verkefni.md
 create mode 100644 namsefni/42.upprifjun-samantekt/img/boxmodel.png
 create mode 100644 namsefni/42.upprifjun-samantekt/img/flex-direction-terms.svg
 create mode 100644 namsefni/42.upprifjun-samantekt/readme.md
 create mode 100644 vikur/vika-14.md

diff --git a/namsefni/42.upprifjun-samantekt/1.html.md b/namsefni/42.upprifjun-samantekt/1.html.md
new file mode 100644
index 0000000..0a7e5fa
--- /dev/null
+++ b/namsefni/42.upprifjun-samantekt/1.html.md
@@ -0,0 +1,205 @@
+---
+title: Upprifjun –  Almenn hugtök/HTML samantekt
+---
+
+# Upprifjun –  Almenn hugtök/HTML samantekt
+
+## Vefforritun 1 — TÖL107G
+
+### Ólafur Sverrir Kjartansson, [osk@hi.is](mailto:osk@hi.is)
+
+---
+
+## GUI vs CLI
+
+* _Graphical user interface_
+* Forrit með grafísku notendaviðmóti
+* _Command-line interface_
+* Texta viðmót á forrit, ólíkt _grafísku_ viðmóti
+
+***
+
+## Stafasett & utf-8
+
+* Þegar við vinnum með texta þurfum við að skilgreina í hvaða _stafasetti_ textinn er
+* Skilgreinir hvernig hver stafur er kóðaður og hve mikið pláss hann tekur
+[`utf-8`](https://en.wikipedia.org/wiki/UTF-8) stafasettið notar allt að fjögur byte til að skilgreina staf eða tákn
+
+***
+
+## Internetið & vefurinn
+
+* Alþjóðlegt netkerfi hundruð milljóna tölva tengdra saman yfir tugþúsundir neta yfir TCP/IP
+* Margskonar kerfi nýta internetið, t.d. vefurinn og tölvupóstur
+* World Wide Web, aðgengilegt yfir _internetið_
+* Byggir á _vefsíðum_ sem eiga sér _URL_ sóttar yfir _HTTP_
+
+***
+
+## HTTP
+
+* HyperText Transfer Protocol
+* Samskiptareglur sem skilgreina hvernig dreift kerfi tölva vinnur saman
+
+***
+
+## URL
+
+* Staðsetja og skilgreina hvernig við sækjum vefsíður yfir HTTP
+* Samanstanda af nokkrum pörtum
+* `http://example.org/example.html?start=true#kafli2`
+* Stundum er talað um `URI`, [en í nýjum staðli er `URL` og `URI` það sama](https://url.spec.whatwg.org/)
+
+***
+
+## Framendi
+
+* Framendi (e. front-end eða client-side) er sá partur vefsins sem notendur sjá og eiga við
+* Búinn til með HTML, CSS og JavaScript
+
+***
+
+## Bakendi
+
+* Bakendi (e. back-end eða server-side) er sá partur vefsins sem er sendur yfir HTTP til framenda
+* _full stack_ er oft notað fyrir forritara sem eru færir bæði í fram- og bakenda
+* Samanstendur yfirleitt af vefþjón, _forriti_ og gagnageymslu (t.d. gagnagrunn)
+
+---
+
+## HyperText & Markup Language
+
+* Hugtak um ólínulegan texta sem er tengdur við annan texta og hægt er að nálgast strax
+* Á einhverjum tímapunkti þurfum við leið til að ljá texta aukna dýpt
+* Markup language leyfir okkur það
+* Lýsing á skjali sem er setningarfræðilega aðgreind frá texta skjalsins
+
+***
+
+## Staðlar
+
+* Skilgreina _hvernig_ HTML á að virka
+* Fyrst reynt án árangurs fyrir HTML 1.0 hjá [IETF](https://en.wikipedia.org/wiki/Internet_Engineering_Task_Force) (Internet Engineering Task Force)
+* Tókst þó fyrir útgáfu 2.0 í [RFC 1866](https://tools.ietf.org/html/rfc1866) árið 1995
+* Tim Berners-Lee stofnaði W3C (World Wide Web Consortium) hjá MIT árið 1994 með stuðning frá Evrópusambandinu og [DARPA](https://en.wikipedia.org/wiki/DARPA)
+
+***
+
+## HTML
+
+* HyperText Markup Language
+* Kom fyrst fram á sjónarsviðið 1993, þróað af Tim Berners-Lee
+* Útgáfur 1.0–4.01 byggðar á SGML
+* Seinni útgáfur, XHTML og HTML5
+
+***
+
+## Elements
+
+* Einstakur hluti af vefsíðu og býr til tré með öðrum hlutum
+* Inniheldur önnur element eða texta nóðu, mynda _tré_
+* Hvert element táknar merkingu, hefur _merkingarfræðilegt gildi_ (e. semantic value)
+* `<p>Halló heimur</p>` er element sem skilgreinir setningu (paragraph) með texta nóðuna _„Halló heimur“_
+
+***
+
+## Tags
+
+* Element byrja á tagi, t.d. `<p>`
+* Element þurfa ekki, en ættu, að enda á loka tagi, t.d. `</p>`
+* Ef element hefur skilgreind _attribute_ eru þau sett á byrjunar tagið
+
+***
+
+## Attribute
+
+* Nafn-gildis par sem breytir elementi, t.d. `<p class="important">`
+* Gildið þarf ekki að vera umlukið gæsalöppum en það er æskilegt til gildið sé skýrt
+* Sum attribute þarf aðeins að skilgreina með nafni, t.d. `<option selected>`
+* Skrifum sem heiti í lástöfum, samasemmerki, gæsalappir opnast, gildi, gæsalappir lokast
+
+***
+
+## Element
+
+* Úr mörgum elementum að velja þegar við smíðum vefi: flow, sectioning, heading, phrasing, embedded, interactive
+* Form, töflur, listar
+
+***
+
+## HyperLink (tengill)
+
+* `<a>` element með `href` attribute skilgreinir tengil (e. hyperlink)
+* Grunnurinn að vefnum—tengir saman mismunandi vefi
+
+***
+
+## Merkingarfræði
+
+* Það er sterklega mælst til þess að markup í HTML skjali sé aðeins notað til að tjá merkingu en ekki framsetningu
+* Framsetning á gögnum er stýrt með CSS og fáum við því hreina skiptingu á milli efnis og útlits
+* Mörg element til sem skilgreina merkingu en annars er hægt að nota attributes
+
+***
+
+## HTML grunnur
+
+Öll HTML skjöl byggjá á grunn elementum:
+
+* `<html>` skilgreinir rót HTML vefs, skilgreinum tungumál með `lang` attribute
+* `<head>` er yfirleitt fyrsta barn `<html>` og heldur utan um lýsigögn vefsíðu
+* `<body>` skilgreinir meginmál vefs
+
+***
+
+## Minnsta HTML5 skjalið
+
+DOM tré.
+
+```html
+<!doctype html>
+<html lang="is">
+  <head>
+    <meta charset="utf-8">
+    <title>Halló heimur</title>
+  </head>
+  <body>
+    <p>Halló heimur</p>
+  </body>
+</html>
+```
+
+***
+
+## Að vísa í efni
+
+* Þegar við vísum í efni þurfum við að gefa upp slóð
+  * _Afstæð_ (relative) eða _nákvæm_ (absolute)
+* Á við `<img src="">`, `<a href="">` og önnur element sem vísa í efni
+
+***
+
+## Aðgengi
+
+* Aðgengi snýst ekki um að fatlað fólk geti notað vefina okkar
+* Aðgengi snýst um að _fólk_ geti notað vefina okkar
+* Við getum öll orðið „fötluð“ tímabundið
+
+***
+
+## WCAG 2.1
+
+* W3C staðall: [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/)
+* Listi af tilmælum og prinsippum til að gera vefi aðgengilegri
+* Þrjár tegundir:
+  * A, minnsta stig
+  * AA, það stig sem við ættum að stefna að
+  * AAA, öll skilyrði uppfyllt
+
+***
+
+## SEO
+
+* Meðhöndlun á efni til að það komi frekar fram í leitarniðurstöðum
+* Leitarvélar horfa á mörg hundruð breytur sem hafa áhrif
+* Í grunninn _skipulagt_, _læsilegt_ og _einstakt_ efni
diff --git a/namsefni/42.upprifjun-samantekt/2.css.md b/namsefni/42.upprifjun-samantekt/2.css.md
new file mode 100644
index 0000000..a546553
--- /dev/null
+++ b/namsefni/42.upprifjun-samantekt/2.css.md
@@ -0,0 +1,348 @@
+---
+title: Upprifjun – CSS samantekt
+---
+
+# Upprifjun – CSS samantekt
+
+## Vefforritun 1 — TÖL107G
+
+### Ólafur Sverrir Kjartansson, [osk@hi.is](mailto:osk@hi.is)
+
+---
+
+## Hvað er CSS?
+
+* [Cascading Style Sheets](http://en.wikipedia.org/wiki/Cascading_Style_Sheets)
+* CSS er style sheet language sem lýsir framsetningu á skjali skrifuðu í markup language, t.d. HTML, XHTML, XML og SVG
+* Hannað til að aðskilja efni frá útliti
+
+***
+
+## Tenging við html
+
+Í æskilegri röð:
+
+1. Vísa í skrá (`.css` ending): `<link rel="stylesheet" href="...">` í `<head>` – viðhöldum algjörum aðskilnaði
+2. `<style>` blokk í HTML skjali, helst í `<head>` – ekki alveg jafn hreint en aðskiljum þó frá markup
+3. `style` attribute á element – *alls ekki* æskilegt þar sem við erum að binda útlit við element í markup
+
+***
+
+## Málfræði
+
+* Vinnum með _reglusett_, samanstanda af
+  * _selectors_
+  * _yfirlýsingum_
+* Athugasemdir eru innan `/* comment */`
+
+***
+
+```css
+/* eftirfarandi er eitt reglusett */
+p /* selector */
+{ /* yfirlýsingar innan { } */
+  color: green; /* yfirlýsing */
+  margin: 1em; /* yfirlýsing */
+}
+```
+
+***
+
+## Selectors
+
+* Strengur sem lýsir því hvaða element við viljum að taki við _yfirlýsingum_
+  * Skiptast í sex flokka
+* Getum tengt saman
+  * Fjórar gerðir af samtengingum
+
+***
+
+## Villumeðhöndlun
+
+* CSS er hannað til að fyrirgefa minniháttar villur, t.d.
+  * Ef tvípunkt eða semíkommu vantar í yfirlýsingu
+  * Ef heiti eigindis er óþekkt er yfirlýsingin öll hunsuð og haldið áfram að næstu.
+* Meiriháttar villur stoppa lestur á skjali frá þeim stað sem þær eiga sér stað
+
+***
+
+## Yfirlýsingar
+
+* Reglusett inniheldur yfirlýsingar:
+* `eigindi: gildi;`
+* Mjög mörg eigindi, möguleg gildi færri
+
+***
+
+## Shorthand
+
+* Oft er hægt að skilgreina í einni yfirlýsingu mörg gildi fyrir svipaða virkni
+* Tvíeggja sverð: getur aukið lesanleika en líka falið möguleg gildi
+
+`margin: <top> <right> <bottom> <left>;`
+
+***
+
+## Gildi og einingar
+
+* CSS hefur nokkrar mismunandi tegundir af [gildum og einingum](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
+* Hvert eigindi tekur mismunandi gildi, verðum að vita hvert eða fletta því upp
+
+***
+
+## Letur-hlutfallslegar einingar
+
+* Horfa til `font-size` eigindsins
+* Yfirleitt `em` eða `rem`
+* Í grunninn er `1em == 16px` en getum breytt með að setja `font-size` á `html`
+
+***
+
+* Þegar reiknað er úr `em` gildum í elementum sem eiga sér foreldri með skilgreint `em` gildi eru þau _margfölduð_.
+* Á ekki við `rem`
+
+***
+
+## Skjá-prósentu einingar
+
+* Hlutfallslegar við stærð _viewports_ sem er yfirleitt stærð vafragluggans.
+* `vw` er ein eining á breiddina (_viewport width_) svo `100vw` myndi fylla upp í skjá á breiddina
+* `vh` er ein eining á hæðina (_viewport height_) svo `100vh` myndi fylla upp í skjá á hæðina
+
+***
+
+## Box model
+
+[Box módelið](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) er skilgreint í [CSS2.1 spec](https://www.w3.org/TR/CSS2/box.html) og lýsir því hvernig rétthyrnd box fyrir element eru mynduð.
+
+![Útskýringar mynd af box modelinu](img/boxmodel.png)
+
+***
+
+## Specificity – sértækni
+
+* Fernd á forminu `a,b,c,d`
+* `a`, 1 ef skilgreint í `style` attribute, annars 0
+* `b`, fjöldi `id` selectora
+* `c`, fjöldi attribute selectora og gervi-klasa
+* `d`, fjöldi elementa og gervi-elementa
+
+***
+
+* Skilgreinir gildi sem heitir _sértækni_
+* Getum hugsað sem tölu, en er í raun fernd
+
+***
+
+## Cascade – „flóðið“
+
+* Þegar útlit er birt þarf að komast að því _nákvæmlega_ hvaða skilgreiningar eigi við hvert element
+* Allar skilgreiningar fyrir element fundnar og raðað
+
+***
+
+Skilgreiningar geta komið frá þremur stöðum:
+
+* _User agent_, sjálfgefnir stílar frá tæki sem birtir
+* _Notanda_, notandi tækis, t.d. að allt sé stækkað
+* _Höfundi_, skilgreiningar frá höfundi vefs
+
+***
+
+## Visual formatting model
+
+* Gerð boxa
+  * `block` vs. `inline`; `display` eigindið
+* Eðlilegt flæði
+* Staðsetning með `position`
+* Float
+* Þriðja víddin
+
+***
+
+## Normal flow – eðlilegt flæði
+
+Ef við höfum ekki skilgreint hvernig element á að haga sér, er það í [_eðlilegu flæði_ (normal flow)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow) og er sjálfgefið annað hvort _block_ eða _inline_
+
+* _block_ element forma blokkir og **fylla upp í breidd foreldris**
+* _inline_ element forma ekki blokkir heldur dreifa sér í línur, fá **ekki** lárétt `margin`; `width` eða `height`
+
+***
+
+## Staðsetning
+
+[`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) eigindi stillir hvernig element hegðar sér:
+
+* `static` – eðlilegt flæði, sjálfgefið gildi
+* `relative` – _hlutfallslegt_ í eðlilegu flæði
+* `absolute` – skilgreinum algjörlega hvar box birtist
+* `fixed` – skilgreinum út frá glugga hvar box er fast
+* `sticky` – fast, hlutfallslega út frá foreldri
+
+***
+
+## Leturgerðir
+
+* Leturgerð (e. font) segir til um hvaða hönnun á letri við notum til að birta texta
+* Í grunninn höfum við aðgang að almennum leturgerðum
+* _Vef öruggar_ leturgerðir eru aðgengilegar á langflestum tækjum
+
+***
+
+* [`font-family`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) skilgreinir hvaða leturgerð við viljum nota, í röð
+* [`font-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) skásetur letur (`italic`) eða `normal`
+* [`font-weight`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) setur þyngd leturs, í tölum (t.d. `700`), heitum (t.d. `bold`), eða hlutfallslega (t.d. `bolder`)
+* [`font-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) setur stærð leturs, með nákvæmari einingu eða letur-hlutfallslegri einingu
+
+***
+
+## Bakgrunnur og litir
+
+* [`background-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) setur lit á bakgrunn, sjálfgefið gildi er gegnsætt (transparent)
+* [`background-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) setur mynd á bakgrunn eftir slóð, svona notum við myndir í CSS
+* [`background-repeat`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat) segir til um hvernig bakgrunnurinn endurtekur sig
+* [`background-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) skilgreinir hvar myndin birtist
+
+***
+
+## Progressive enhancement
+
+* Upplifun sem krefst minnstu mögulegrar tækni
+* Bætum virkni við eins og stuðningur er til staðar
+* Byrjum einfalt og bætum við virkni í lögum
+
+***
+
+## CSS custom properties / variables
+
+* [CSS custom properties / variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (eða custom properties) leyfa okkur að skilgreina breytur
+  * t.d. fyrir lit, ákveðna lengd eða eitthvað annað sem er mikið notað
+* Breytingar verða auðveldari og getur bætt lesanleika
+
+***
+
+## Fallback
+
+* Ný eigindi eða gildi leyfa okkur að gera eitthvað skemmtilegt
+* En hvað ef það eru ekki allir vafrar farnir að styðja eigindið?
+* Skilgreinum _fallback_ gildi sem við erum nokkuð viss um að sé stutt
+
+***
+
+## Flexbox
+
+* Segjum foreldri að raða börnum sínum með flexbox með [`display: flex`](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
+  * Eða `display: inline-flex` til að raða foreldri inline
+* Element með `display: flex` eru kölluð _flex containers_
+* Börn innan flexbox eru kölluð _flex items_
+
+***
+
+## Flexbox ásar
+
+![Skýringarmynd um flex ása](img/flex-direction-terms.svg)
+
+***
+
+## Logical properties
+
+* [Logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/) er þegar við notum _logical_ gildi en ekki _physical_ gildi til að skilgreina eigindi
+* _Physical_ gildi er t.d. `bottom` eða `left`, og takmarkast af samhengi—í flestum tilfellum er það samhengi að við séum að lesa frá vinstri til hægri
+* _Logical_ gildi eru ekki fest með nákvæmum gildum heldur vinna útfrá `block` og `inline`
+
+***
+
+## Skalanleg vefhönnun
+
+1. Sveigjanlegu umbroti, byggðu á grind
+2. Sveigjanlegum myndum og miðlum
+3. CSS media queries
+
+***
+
+### `<meta name="viewport">`
+
+Getum leiðbeint vafra hvernig síða birtist:
+
+* `width` setur breidd viewports:
+  * `tala` – föst breidd
+  * `device-width` — viewport er jafnt _logical resolution_ ekki _physical resolution_
+* Ef við skilgreinum ekki `width=device-width` í `<meta name="viewport">` og notum media queries mun vefurinn okkar ekki birtast eins og við höldum í tækjum með hærri raunupplausn.
+
+***
+
+## Mobile first
+
+* Byrjum á upplifun í minni tækjum
+* Neyðir þig til að taka ákvarðanir
+* Efnið í fyrirrúmi, ekki óþarfa „skraut”
+* Progressive enhancement!
+
+***
+
+## Sveigjanleg grind
+
+* __Notum hlutfallsleg gildi, ekki nákvæm__
+* Ef umgjörð minnkar, þá minnkar allt hlutfallslega innan hennar
+* Getum fest umgjörðina til að festa allt innihald
+* Notum yfirleitt `max-width` á umgjörð til að setja hámarksbreidd
+
+***
+
+## Umskipti (transition)
+
+* Látum eitt gildi breytast í annað á skilgreindum tíma
+* Brúað á milli upphafs- og endagildis
+
+***
+
+## Animation
+
+* Með `animation` eigindinu getum við útbúið flóknari hreyfingar án þess að nota JavaScript
+* Skilgreinum _keyframes_ fyrir hreyfinguna með `@keyframes` at-reglunni
+
+***
+
+* Skilgreinum:
+  * Hvaða eigindi breytist
+  * Á hve löngum tíma
+  * Með hvaða hröðun
+  * Hvort það sé töf
+
+***
+
+## CSS Grid
+
+* CSS grid er notað til að skilgreina skipulag (e. layout) á síðu
+* Skipuleggjum í röðum og dálkum
+* Svipað hugtak og þegar síður voru skipulagðar með `<table>`... en sérhannað til þess
+* Grid containers og grid items
+
+***
+
+* [`fr`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex_value), ný hlutfallsleg eining fyrir _fraction_ af plássi, hagar sér svipað og þegar við setjum `flex-grow`
+* [`minmax()`](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax()), fall sem velur min eða max gildi
+* [`repeat()`](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat()), fall sem leyfir að skilgreina mörg
+
+***
+
+## CSS viðmiðunarreglur
+
+Í stærri verkefnum ættum við að setja okkur viðmiðunarreglur (guidelines)
+
+* Hvernig nefnum við og skiptum upp hlutum?
+* Hvernig skrifum við selectora?
+* Hvernig högum við layout? Notum við grind?
+* o.s.fr.
+
+***
+
+## BEM
+
+Leið til að nota selectora
+
+* _Block_ - hæsta stig á _component_, foreldrið, t.d. `.button`
+* _Element_ - börn undir _block_, t.d. `.button__price`
+* _Modifier_ - breytir block án þess að hafa áhrif almennt, t.d. `.button--wide`
+
+[BEM Dæmi](daemi/1.css-verkefni/01.bem.html)
diff --git a/namsefni/42.upprifjun-samantekt/3.tools.md b/namsefni/42.upprifjun-samantekt/3.tools.md
new file mode 100644
index 0000000..4c86cd0
--- /dev/null
+++ b/namsefni/42.upprifjun-samantekt/3.tools.md
@@ -0,0 +1,207 @@
+---
+title: Upprifjun – Tæki og tól, Git
+---
+
+# Upprifjun – Tæki og tól, Git
+
+## Vefforritun 1 — TÖL107G
+
+### Ólafur Sverrir Kjartansson, [osk@hi.is](mailto:osk@hi.is)
+
+---
+
+## _Linting_
+
+* Almennt köllum við það _linting_ að lesa yfir kóða og benda á möguleg vandamál
+* Til fyrir langflest forritunarmál
+* Oftast tvenns konar villur
+  * Mögulegar villur við keyrslu
+  * Brot á kóðastíl
+
+***
+
+## Node.js
+
+* Verkvangur (platform) til að smíða hröð, skalanleg netforrit
+* Notað til að búa til allskonar forrit, bæði _bakenda_, _CLI_ o.fl.
+
+***
+
+* Ekki forritunarmál; JavaScript er forritunarmálið sem node notar
+* Samleðgaráhrif með framenda, _eitt mál fyrir framenda og bakenda_ getur heillað
+* Samt **ekki** sama keyrsluumhverfið! Node hefur t.d. möguleika á að lesa skrár af skáarkerfi
+
+***
+
+## npm
+
+* npm er _pakkastjóri_ (package manager) fyrir JavaScript
+* Sækjum _pakka_, eða módúla (module) sem innihalda virkni forritaða af öðrum
+* [*Mjög* mikið af pökkum](http://www.modulecounts.com/): yfir 1,7MM
+* Ákveðinn kostur, og ákveðinn galli...
+
+***
+
+## Pakkastjóri
+
+* Pakkastjóri sér um að sjálfvirknivæða það að setja upp, stilla, og fjarlægja hugbúnað
+* Ekki: leita að forriti á vefnum, finna download, keyra uppsetningarforrit, keyra forrit
+* Heldur: ein skipun til að sækja forrit og gera aðgengilegt
+* Vistar einnig _hvaða_ forrit verkefni notar svo aðrir geta sótt
+
+***
+
+## Tól í verkefnum
+
+* Viljum innifela tólin í verkefnunum okkar
+  * Vitum nákvæmlega hvaða _dependency_ við höfum
+  * Gefum öllum í teymi aðgang
+* Byrjum á að útbúa `package.json` skrá sem heldur utanum lýsigögn fyrir verkefni
+  * `npm init` í möppu verkefnis, svörum spurningum um verkefnið
+
+***
+
+## browser-sync
+
+* Getum núna notað `browser-sync` skipunina í skel
+* [`browser-sync`](https://www.browsersync.io/) er tól sem leyfir okkur að keyra lítinn vefþjón á okkar eigin vél
+* Endurhleður sjálfkrafa þegar við gerum breytingar
+* Samræmir scroll á milli vafra sem tengjast
+  * Auðveldar prófanir í mörgum tækjum
+
+***
+
+## Sass
+
+* Sass er töluvert mikið notað, notum það í verkefnum héðan í frá
+* Hefur þýðendur í mörgum umhverfum
+* Notar skráarendinguna `.scss`
+
+---
+
+## Version control
+
+* Geymum útgáfur af skrám sem við vinnum með
+* Leyfir okkur að:
+  * Treysta því að vinnan okkar sé örugg
+  * Fara fram og til baka í tíma
+  * Gera tilraunir án þess að skemma
+
+***
+
+## Distributed version control
+
+* Höfum miðlæga geymslu en hver client hefur einnig _öll gögn_
+  * T.d. Git, Mercurial
+* Ef eitthvað fer úrskeiðis getum við haldið áfram að vinna
+
+***
+
+## Repo
+
+* Staðurinn, geymslan, sem við geymum gögnin á—hvort sem það er á server eða client—heitir á ensku _repository_
+* Oftast kallað _repo_ eða _git repo_
+
+***
+
+## Þrjár stöður skráar í Git
+
+* **committed**, skrá er geymd í local gagnagrunni Git
+* **modified**, skrá hefur verið breytt en ekki geymd í gagnagrunni
+* **staged**, breytt skrá hefur verið merkt til að fara í næsta commit
+
+***
+
+## Git og skrár í verkefni
+
+* Git sér skrár á ferna vegu:
+  * _unmodified_, engar breytingar á skrá síðan seinasta commit
+  * _modified_, breytingar á skrá síðan seinasta commit, ekki _staged_
+  * _staged_, breytingar á skrá og staged
+  * _untracked_, allar aðrar
+
+***
+
+## git commit
+
+* `git commit` færir allt úr _staged_ í commit sem geymt er í Git
+* Gefum upp _commit message_ sem segir hvað breytist með commit, opnar textaritil
+* Getum gert í einu með
+  * `git commit -m "<commit message>"`
+
+***
+
+## Remotes
+
+* Græðum á því að vera bara með local repo, en...
+* Græðum meira á því að nota Git til að vinna saman
+* _remotes_ eru _remote repositories_, repos annarsstaðar, t.d. á internetinu
+
+***
+
+## Senda breytingar í remote
+
+* Þegar við klárum eitthvað verkefni viljum við deila því
+* _Pushum_ commitum frá local repo í _upstream_ repo
+  * Upstream er það/þau repo sem við clone'uðum frá
+  * Downstream væru repo sem clone'uðu frá okkar repo
+
+***
+
+## Sækja breytingar frá remote
+
+* Ef nýjar breytingar eru til staðar á remote getum við sótt þær
+* `git pull` keyrir `git fetch` og síðan `git merge` fyrir það _branch_ sem við erum að vinna á
+
+***
+
+## Branches
+
+* _Branch_ er þegar við víkjum frá meginlínu í kóðanum okkar
+  * Til að gera tilraun með tækni, breyta einhverju, vinna nýjan feature o.fl.
+* Ódýrt í Git útaf því hvernig gögn eru geymd sem snapshot
+
+***
+
+## Merge
+
+* `git merge` framkvæmir merge, samtvinnar eitt branch inn í annað
+* Ef bæði eiga sömu skrá sem er mismunandi þarf að leysa úr _merge conflicts_
+
+***
+
+## Merge conflicts
+
+* Ekkert hættulegt eða (yfirleitt) flókið, bara tímafrekt
+* Hlutir sem Git gat ekki leyst eru merktir með _conflict-resolution markers_
+* Getum notað tól til að aðstoða við að sjá breytingar betur
+
+***
+
+## GitHub
+
+* GitHub er stærsti hýsingaraðili Git repoa
+* Mjög mjög mörg verkefni hýst á GitHub, bæði open-source og ekki
+* Notum GitHub sem sameiginlegan stað sem við geymum repo á
+
+***
+
+## GitHub workflow
+
+Þegar við vinnum verkefni á GitHub er [flæðið yfirleitt](https://guides.github.com/introduction/flow/):
+
+1. Clone (eða fork) af repo
+2. Gera breytingar í branch
+3. _Ýta_  breytingum á GitHub
+4. Opna _pull request_ í upprunalega repo
+5. Ræða breytingar, laga o.s.fr.
+6. _merge_ á breytingum inn í aðal branch repo
+
+***
+
+## Netlify
+
+* „[Netlify](https://www.netlify.com/) is an all-in-one platform for automating modern web projects.“
+* Í grunninn hýsing fyrir _static_ vefi
+  * Vefir sem hafa ekki „bakenda“
+* Samt með stuðning fyrir [_serverless Lambda functions_](https://docs.netlify.com/functions/overview/)
diff --git a/namsefni/42.upprifjun-samantekt/4.javascript.md b/namsefni/42.upprifjun-samantekt/4.javascript.md
new file mode 100644
index 0000000..dfd88a1
--- /dev/null
+++ b/namsefni/42.upprifjun-samantekt/4.javascript.md
@@ -0,0 +1,668 @@
+---
+title: Upprifjun – JavaScript samantekt
+---
+
+# Upprifjun – JavaScript samantekt
+
+## Vefforritun 1 — TÖL107G
+
+### Ólafur Sverrir Kjartansson, [osk@hi.is](mailto:osk@hi.is)
+
+---
+
+> JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.
+>
+> – [MDN: JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
+
+***
+
+## Java VS. JavaScript
+
+Mörg atriði eru ólík, en það sem skiptir mestu máli í fyrstu:
+
+* Java er _þýtt_ en JavaScript er _túlkað_
+  * JavaScript kóði er túlkaður í hverri keyrslu, engin þýðandi
+* Breytur í Java hafa týpu, _gildi_ í JavaScript hafa týpu
+
+***
+
+## Týpur
+
+Breytur í JavaScript hafa ekki týpu, [_gildi_ hafa týpu](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures).
+
+Í grunninn höfum við [_primitive_](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) týpur
+
+* `string`, `number`, `bigint`
+* `boolean`, `undefined`, `null`, `symbol`
+
+***
+
+## `object`
+
+* Fyrir gildi sem eru _ekki_ primitive höfum við [`object`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#objects)
+* Möppun á milli _key_ og _value_ (nafn-gildis pör)
+
+***
+
+## Strengir – string
+
+* Skilgreinum strengi innan `'`, `"` eða `` ` ``
+  * `'Halló, heimur!'` eða `"Halló, heimur!"`
+* Notum `\` til að _escapea_ sérstaka stafi eða sérstök tákn (t.d. newline eða tab)
+  * `"Halló, \"heimur\""`
+
+***
+
+## Template literals
+
+* Betri strengjavinnsla, skilgreind í ECMAScript 6
+* Notar ` (backtick) til að skilgreina strengi
+* Getum sett inn _segð_ í strengi án `+`
+
+***
+
+## number
+
+* Notum mest eina týpa fyrir tölur í JavaScript, [`number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#number_type)
+* 64 bitar: 1 í sign, 11 bitar í brot, 52 bitar í gildi
+  * `1.25`
+
+***
+
+## Boolean
+
+* `true` eða `false`
+* Notum oft í flæðistýringu þegar við berum saman gildi
+
+***
+
+## undefined
+
+* Gildi á _breytum_ sem ekki hafa verið skilgreindar
+* Gildi á eigindum _hluta_ sem ekki hafa verið skilgreindir
+* `typeof hallo // "undefined", hér er hallo óskilgreind breyta`
+
+***
+
+## null
+
+* Gildi sem stendur fyrir að vísvitandi fjarveru gildis
+* Getum lent í að fá _null reference_ villur ef við höldum að eitthvað sé ekki null
+  * `null.length`
+  * `Uncaught TypeError: Cannot read property 'length' of null`
+
+***
+
+* Samanburður með `==` og `!=` mun byrja á að kasta báðum gildum
+  * Getur valdið rugling og vitlausum niðurstöðum
+* Samanburður með `===` og `!==` mun byrja á að bera saman týpur og passa uppá að þær passi (eða ekki)
+  * __Notum `===` fyrir allan samanburð!__
+
+***
+
+## Truthy & falsy
+
+* Þegar við erum með hluti sem haga sér eins og `boolean` án þess að vera það, tölum við um að þeir séu `truthy` eða `falsy`
+* Byggir á _type coercion_
+* _Type coercion_ þvingar týpur til að spila saman
+
+***
+
+## Lógískir virkjar
+
+* Getum unnið með boolean gildi með `and`, `or` og `not` virkjum
+* `&&`, tvístæður (binary) `and` virki sem skilar `true` þá og því aðeins að bæði stök séu `true`, annars `false`
+  * `true && false // false`
+  * `true && true // true`
+
+---
+
+## 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
+
+***
+
+## 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
+
+***
+
+## 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_
+
+***
+
+## 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
+
+***
+
+## 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 `}`
+
+***
+
+## 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ð
+
+***
+
+## 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
+
+---
+
+## Föll
+
+* [Föll](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions) eru _blokkir_ af kóða sem geta haft nafn
+* Notum til að skipuleggja kóða og draga úr endurtekningu
+* Engar eða fleiri færibreytur (viðföng, argument)
+* Hugsanlega með skilagildi, skilgreindu með `return`
+  * Ef ekki, þá skilar fall `undefined`
+
+***
+
+## Scope
+
+* Breytur eru skilgreindar með _lexical scope_ per fall
+  * Breytan er aðeins aðgengileg innan falls
+* En aðeins ef breyta er skilgreind með `let`, `const` eða `var`
+
+***
+
+* Ef ekki er breytan sett í _global scope_
+  * Getur valdið leiðinlegum böggum
+* Breytur skilgreindar utan falla eru í global scope
+
+***
+
+## var, let & const
+
+* Áður en `let` og `const` voru skilgreind var aðeins `var`
+* `var` er skilgreint fyrir global scope eða lexical scope falls
+* `let` og `const` eru skilgreind fyrir block, eru _block scoped_
+
+***
+
+## Arrow functions
+
+* Stuttur syntax fyrir föll með „fat arrow“: `() => {}`
+  * Megum sleppa sviga ef ein færibreyta
+  * Skila gildi ef eitt statement, annars `return`
+
+***
+
+## Færibreytur (parameters)
+
+* Færibreytur á föllum hafa ekki týpur heldur gildið
+* Fall getur því tekið inn færibreytur sem geta verið _hvaða gildi sem er_
+* Primitives (string, number, boolean, undefined) eru _pass by value_
+* Objects eru _pass by reference_
+
+***
+
+## Innri föll
+
+* Getum skilgreint föll _innan falls_
+* Innri föll eru aðeins í scope fyrir ytra fall
+* Innri föll hafa aðgang að scope ytra falls
+
+***
+
+## Lokanir – closures
+
+* Þegar við höfum innri föll þá myndum við _lokun_ um umhverfi þess
+* Innra fall hefur aðgang að ytra scope meðan það lifir
+* Breytu nöfn í innriföllum skrifa yfir ytri
+
+---
+
+## Array
+
+* Fylki leyfa okkur að safna hlutum í raðaða lista
+* Búum til array með `[]`
+  * `const list = [];`
+
+***
+
+* Nálgumst gildi innan fylkis með _bracket notation_
+  * Nálgumst eftir _index_, **byrjar frá 0**
+  * `array[0]` nálgast fyrsta stak í index 0, `array[1]` annað stak í index 1 o.s.fr.
+* `length` skilar fjölda staka í fylki, frá 0 til stærsta index
+
+***
+
+## Properties
+
+* Næstum öll JavaScript gildi hafa _property_ (eigindi)
+  * `'foo'.length`, `Math.min()`
+* Öll nema `null` og `undefined`
+* Property nálgumst við með:
+  * `.` – _dot notation_
+  * `['foo']` – _bracket notation_
+
+***
+
+## Object
+
+* Byrjum á að hugsa um object í JavaScript sem geymslu fyrir gildi þar sem gildi á sér nafn
+  * Skoðum síðan hvernig við vinnum með erfðir
+* Skilgreinum með `{}`, innan þess skilgreinum við eigindi hluts með `heiti: gildi`
+  * Ef heiti er óleyfilegt breytunafn skilgreinum við sem streng
+  * `gildi` eru öll leyfileg gildi
+
+***
+
+## HTML & JavaScript
+
+Í æskilegri röð:
+
+1. `<script src="scripts.js"></script>`
+2. Innan `<script>...</script>`
+3. Forðast að binda JavaScript við element með on* attributes (t.d. `onclick`)
+
+***
+
+## DOM
+
+* [Document Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
+* Leyfir forritum og skriptum að gera dýnamískar breytingar á efni, skipulagi og útliti skjala (oftast HTML eða XML) gegnum API
+* Hlutlaust á platform og mál
+* Staðlað af [W3C](http://www.w3.org/DOM/)
+
+***
+
+## DOM staðall
+
+* DOM forritunarskilin eru ekkert sérstaklega góð
+  * Ekki útbúin fyrir JavaScript heldur fyrir almenna vinnslu á XML
+* Einhverjir kostir að nota sömu skil en eiginlega ekki næg...
+
+***
+
+## Ferðast um DOM
+
+Hver nóða hefur vísanir í foreldri, börn og systkini:
+
+* `parentNode` – foreldri nóðu
+* `childNodes` – fylki af börnum nóðu
+* `lastChild` – seinasta barn nóðu
+* `previousSibling` –  fyrra systkini nóðu
+* o.fl.
+
+***
+
+## Finna element
+
+* Oftast þurfum við að finna ákveðin element, ekki ítra gegnum þau öll
+* `document` og `element` hafa föll sem leyfa okkur að leita eftir ýmsum leiðum
+
+***
+
+## querySelector
+
+* [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) leitar eftir **CSS selector** að _fyrsta_ elementi sem passar (dýpt fyrst)
+* `document.querySelector('.important')` til að leita á allri síðu
+* `element.querySelector('.important')` til að finna undir ákveðnu `element`
+
+***
+
+## querySelectorAll
+
+* [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) leitar eftir CSS selector að _öllum_ elementum sem passar
+* Skilar _statsískum_ `NodeList`, ekki lifandi
+* `document.querySelectorAll('div')` til að leita á allri síðu
+* `element.querySelectorAll('div')` til að finna undir ákveðnu `element`
+
+***
+
+## Að búa til element
+
+* `document.createElement(element)` – býr til nýtt element sem við getum átt við
+* `document.createTextNode(text)` – býr til texta nóðu
+* Notum síðan föll á node til að bæta við DOMið, t.d. `appendChild`
+
+***
+
+## Attributes
+
+* `setAttribute(attribute, value)` – setur attribute á elementi
+* `getAttribute(attribute)` – sækir attribute á element
+  * Virkar þó ekki fyrir öll attribute, t.d. `value` á input
+* Sum almenn attribute eru aðgengileg með property, t.d. `className` fyrir `class` (`class` er frátekið orð!)
+
+***
+
+## Classlist
+
+* Ef við viljum eiga við `class` á element er hentugast að nota [`classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)
+* Hefur aðferðir til að breyta `class` án þess að fara í strengjaleikfimi
+  * Getum nálgast `class` sem streng gegnum `className`
+
+---
+
+## Forrit sem bregðast við atburðum
+
+* Þegar við skrifum flóknari forrit tökum við yfirleitt við skipunum eða gögnum frá notendum
+* Hvernig getur forritið okkar vitað þegar slegið er á takka eða ýtt á músarhnapp?
+
+***
+
+* Notum _atburði_ (events) til að bregðast við hlutum sem gerast á einhverjum tímapunkti í framtíðinni
+* Atburðir gerast ósamstillt—eru _async_!
+
+***
+
+## Taka þátt í atburðum
+
+* Skráum að við viljum meðhöndla vissa tegund af atburð á ákveðnum nóðum
+* Þegar atburður gerist eru allir þeir sem skráð sig hafa látnir vita í (flestum tilfellum) FIFO (first–in, first–out) röð
+* Aðeins ein meðhöndlun á sér stað í einu
+
+***
+
+## Skrá meðhöndlun
+
+* Skráum meðhöndlun á nóðu með fallinu `element.addEventListener(name, listener)`
+  * `name` er nafn á atburð
+  * `listener` er **fall sem keyrir við atburð**
+
+***
+
+## Upplýsingar um atburð
+
+* Fáum hlut—[Event](https://developer.mozilla.org/en-US/docs/Web/API/Event)—með upplýsingum um atburð sem argument í fall
+  * Oftast kallað `e` eða `event`
+* Upplýsingar eru t.d. um hvaða lykil var slegið á lyklaborð, eða hvaða takka á mús
+
+***
+
+## Sjálfgefin hegðun
+
+* Sumir atburðir valda sjálfgefinni hegðun
+  * `<a href>` mun senda okkur þangað sem `href` bendir
+  * Að ýta á niður ör mun skruna síðu niður
+* `preventDefault()` á Event hlut stoppar sjálfgefna hegðun
+
+---
+
+## Einingar
+
+* Þegar við vinnum með forrit er þeim yfirleitt skipt upp í einingar
+* Safnar saman virkni á einum stað, inniheldur föll og breytur
+* Skilgreinum API (Application Programming Interface) fyrir einingu
+
+***
+
+## Einingar í JavaScript
+
+* Þurfum að geta búið til sérstakt scope fyrir hverja einingu
+* Einingar eru ekki studdar í ECMAScript 5 en getum notað _nafnlaus föll_
+* Einingar eru studdar í ECMAScript 6 með `import` og `export`
+
+***
+
+## JavaScript modules
+
+* ECMAScript 2015 skilgreinir [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
+* Notar _import_ og _export_ syntax
+* Stuðningur hefur hægt og rólega aukist í vöfrum, [getum notað í dag með ~94% stuðning](https://caniuse.com/es6-module)
+
+---
+
+## Ósamstillt forritun (async programming)
+
+* Þegar forritin okkar fara að nýta hluti sem eru ekki í minni þurfum við að beita öðrum aðferðum í forritun
+* Það er _hratt_ að sækja hluti í minni, _hægara_ að sækja á disk og (oftast) enn _hægara_ að sækja yfir net
+* Bíðum ekki eftir því að beiðni klárist, nýtum _ósamstillta forritun_ (asynchronous/async programming)
+
+***
+
+## Callbacks
+
+* Ein leið til að vinna með async kóða, t.d. í atburðum
+* Köllum í fall sem tekur langan tíma, eða verður kallað í seinna, með _callback_ argument
+* Fallið kallar í _callback_ fall með niðurstöðu þegar búið
+* Ef við köllum í annað fall sem tekur langan tíma úr _callback_ þurfum við annað callback o.s.fr. o.s.fr.
+
+***
+
+## Promises
+
+* [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) er hjúpun fyrir gildi sem _mun verða til_ í framtíðinni
+* Gerir asynchronous forritun auðveldari
+* Öðruvísi hugtak en callbacks, vinnum með hjúpuð gildi í staðinn fyrir eitthvað sem við köllum í framhaldi
+
+***
+
+* Þegar við vinnum með promise skilgreinum við
+  * `then` callback til að vinna með gildið, fær skilagildi sem argument
+  * `catch` callback til að vinna með villu, fær villu sem argument
+* `then` og `catch` eru föll á Promise
+
+***
+
+## async og await
+
+* [`async await`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await) er önnur leið til að vinna með async kóða
+* Leyfir okkur að _bíða_ eftir async aðgerð í línulegu flæði
+* Merkjum föll sem þarf að bíða eftir með `async`
+* Merkjum að við ætlum að bíða með `await`
+* Grípum villur með `try catch`
+
+***
+
+## Villumeðhöndlun í JavaScript
+
+* JavaScript hefur ekki eins villumeðhöndlun og HTML og CSS
+* Ef eitthvað brotnar eru líkur á að það hafi áhrif á _allt_
+* Verðum að hafa í huga
+
+***
+
+## Unobtrusive JavaScript
+
+Alveg eins og við aðskiljum útlit frá efni viljum við aðskilja forrit frá efni.
+
+Tengt progressive enhancement er hugtakið _unobtrusive JavaScript_.
+
+* Aðskilnaður hegðunar frá markupi
+* Sem minnst fótspor — ekki skilgreina í global scope
+* Athuga hvort virkni sé studd og þá bæta henni við
+
+---
+
+## Request—response
+
+* HTTP byggir á request—response milli client og server
+* Client sendir request á server
+* Server framkvæmir aðgerðir og sendir response á client
+
+***
+
+## HTTP aðferðir
+
+* HTTP Request þarf að hafa aðferð (method) tilgreinda
+  * Stundum kölluð _sögn_
+* HTTP 1.0 og 1.1 skilgreina þær flestar sem notaðar eru í dag
+
+***
+
+* `GET` – biður um síðu, lang mest notaða aðferðin!
+* `POST` – Biður server um að taka við gögnum í request sem nýrri einingu. T.d. nýtt svar við umræðuþræði eða ný gögn í gagnagrunni
+* `PUT`, `DELETE` o.fl. notað í vefþjónustum, ekki á vefnum
+
+***
+
+## Stöðukóðar — status codes
+
+Þegar þjónn svarar með response gefur hann upp stöðukóða, sem tölu og lesanlegan texta
+
+* `1xx` – Til upplýsinga
+* `2xx` – Gekk, success
+* `3xx` – Áframsending, redirection
+* `4xx` – Villa hjá client
+* `5xx` – Villa hjá server
+
+---
+
+## JSON
+
+* JavaScript Object Notation
+* Létt gagna format sem er auðvelt að lesa og skrifa, bæði fyrir menn og vélar
+* Byggir á almennum gagnastrúktúrum
+  * Heiti/gildi pörum (objects, dictionary, hash table o.s.fr.)
+  * Röðuðum listum (array, vector o.s.fr.)
+
+***
+
+## Ajax
+
+* _Asynchronous JavaScript and XML_
+* Skilgreint 2005
+  * [Ajax: A New Approach to Web Applications](https://immagic.com/eLibrary/ARCHIVES/GENERAL/ADTVPATH/A050218G.pdf)
+* Í dag ekki ein tækni heldur hugtakið að sækja gögn ósamstillt (async) til að koma í veg fyrir að hlaða allri síðunni aftur
+
+***
+
+## `fetch`
+
+* [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) er API til að eiga ajax samskipti
+* Einfalt fyrir einfaldar fyrirspurnir, en getum gert flóknari með góðu API
+* Notar promises
+
+***
+
+## Vefþjónustur
+
+* Margt fellur undir hugtakið _vefþjónusta_
+* Í grunninn einhver samskipti milli tölva yfir net
+* Verið til í einhverri mynd síðan farið var að tengja saman tölvur
+
+***
+
+## Að vinna með URL
+
+* [`url standard`](https://url.spec.whatwg.org/) skilgreinir hvernig URL virkar og API tengt því
+* Skilgreinir `URL` og `URLSearchParams` API
+
+***
+
+## Stöður
+
+Þegar gögn eru sótt yfir vefþjónustu getum við lent í mismumandi stöðum:
+
+* `loading`, hvað sýnum við meðan við erum að sækja gögn? Það getur tekið allt frá örfáfum `ms` uppí fleiri `sek`
+* `error`, hvað sýnum við ef þjónustan skilar villu?
+* `empty`, þjónustan svaraði en við fáum „tóma“ svarið
+* `data`, allt gekk upp
+
+---
+
+## eslint
+
+* [eslint](https://eslint.org/) er mest notaði JavaScript linter í dag og sá sem við munum nota
+* Skrifaður með það í huga að vera almennur og bjóða upp á _plugins_
+* Skilgreinum reglur í `.eslintrc` skrá í rót verkefnis
+
+***
+
+## prettier
+
+* [prettier](https://prettier.io/) er „opinionated code formatter“
+* Sér um að móta kóðann okkar skv. reglum
+* Getum notað þær sem við skilgreinum með eslint
+
+---
+
+## Villumeðhöndlun
+
+* JavaScript hefur stuðning við [`try catch`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) eða `exceptions`
+* Kóði getur _kastað_ villum: innbyggðum og okkar eigin
+* _Grípum_ villur og gerum eitthvað í þeim
+
+---
+
+## Fallaforritun
+
+* Ein leið til að vinna með flækjustig
+* Blöndum saman einföldum föllum til að gera flókna hluti
+* Búum til _abstraction_
+
+***
+
+## Æðri föll – Higher-order functions
+
+* Gera a.m.k. annað af:
+  * Taka inn eitt eða fleiri fall sem argument
+  * Skila falli
+* Önnur föll eru „á fyrstu stétt“
+
+***
+
+## Hrein föll – Pure Functions
+
+* Skila alltaf sama úttaki fyrir sama inntak
+* Úttak veltur ekki á stöðu eða upplýsingum fyrir utan fall—óháð umhverfi sínu
+* Fall veldur ekki breytingum á umhverfi—engar aukaverkanir
+
+---
+
+## Hlutir og hjúpun
+
+* Objects & [encapsulation](https://en.wikipedia.org/wiki/Encapsulation_(computer_programming))
+* Ein af aðal hugmyndum hlutbundinnar forritunar er að skipta forritum upp og láta hvern hluta bera ábyrgð á eigin stöðu
+* Hjúpum virkni og flækjustig, vinnum með í gegnum _interface_
diff --git a/namsefni/42.upprifjun-samantekt/5.verkefni.md b/namsefni/42.upprifjun-samantekt/5.verkefni.md
new file mode 100644
index 0000000..5085d5a
--- /dev/null
+++ b/namsefni/42.upprifjun-samantekt/5.verkefni.md
@@ -0,0 +1,89 @@
+---
+title: Upprifjun – Verkefni samantekt
+---
+
+# Upprifjun – Verkefni samantekt
+
+## Vefforritun 1 — TÖL107G
+
+### Ólafur Sverrir Kjartansson, [osk@hi.is](mailto:osk@hi.is)
+
+---
+
+## Verkefni 1
+
+- Setja upp textaritil og aðgang hjá Netlify.
+- Búa til möppur og skjöl.
+- Nota Netlify til að gera verkefni aðgengilegt á internetinu.
+
+***
+
+## Verkefni 2
+
+- Vinna með og velja HTML element.
+- Nota HTML validator og huga að því hvernig HTML er skrifað.
+- Huga að aðgengi og nota aXe tólið.
+
+***
+
+## Verkefni 3
+
+- Tengja CSS við HTML.
+- Aðlaganir á HTML fyrir CSS.
+- Notkun á grunn CSS með box model; visual formatting model og; letri og litum.
+
+***
+
+## Verkefni 4
+
+- Nota CSS custom properties (variables, breytur)
+- Nota flexbox til að stýra útliti
+- Útfæra „card“ viðmót
+
+***
+
+## Verkefni 5
+
+- Útfæra skalanlegann vef.
+- Nota grid til að stýra útliti.
+- Útfæra kvikun.
+
+***
+
+## Verkefni 6
+
+- Setja upp Node.js og NPM og nota til að sækja pakka.
+- Nota tól fengin af NPM.
+- Keyra tól í vinnuflæði með package.json.
+
+***
+
+## Verkefni 7
+
+- Búa til JavaScript forrit sem notar föll, flæðistýringar og ítranir.
+- Nota strengi og tölur í JavaScript.
+- Nota fylki og hluti í JavaScript.
+
+***
+
+## Verkefni 8
+
+- Skipta JavaScript forriti upp í einingar.
+- Forrita á móti DOM, Document Object Model.
+- Setja upp eslint.
+
+***
+
+## Verkefni 9
+
+- Forrita á móti DOM, Document Object Model.
+- Forrita á móti API með fetch.
+- Lesa gögn úr JSON.
+
+***
+
+## Verkefni 10
+
+- Útbúa eigið verkefni með HTML, CSS og JavaScript.
+- Nota Web API.
+- Nota JavaScript tól.
diff --git a/namsefni/42.upprifjun-samantekt/img/boxmodel.png b/namsefni/42.upprifjun-samantekt/img/boxmodel.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb3651d0932aac46a7d25d5f77c5d45a39564458
GIT binary patch
literal 11002
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

literal 0
HcmV?d00001

diff --git a/namsefni/42.upprifjun-samantekt/img/flex-direction-terms.svg b/namsefni/42.upprifjun-samantekt/img/flex-direction-terms.svg
new file mode 100644
index 0000000..70fde88
--- /dev/null
+++ b/namsefni/42.upprifjun-samantekt/img/flex-direction-terms.svg
@@ -0,0 +1,66 @@
+<svg xmlns="http://www.w3.org/2000/svg" width='665' height='277' viewBox='0 0 665 277'>
+	<style>
+		:root { fill: transparent; }
+		text,tspan { font-family: sans-serif; text-anchor: middle; font-size: 18px; fill: currentColor; }
+		.container { fill: #888; }
+		.item > rect { fill: #ddd; }
+		.item > text { font-size: 40px; font-weight: bold; fill: #f8f8f8; }
+		.arrow { color: hsl(0,80%,40%); stroke: currentColor; stroke-width: 3; }
+		.arrow > path + path { stroke: transparent; fill: currentColor; }
+		.bracket { color: hsl(120,80%,30%); }
+		.bracket > path { stroke: currentColor; stroke-width: 2; }
+		.side { color: hsl(240,80%,50%); }
+		.side > path { stroke-width: 3; stroke: currentColor; }
+		.display, .item > .display { font-size: 16px; font-weight: normal; font-style: italic; fill: #444; }
+	</style>
+	<g transform='translate(40,40)'>
+		<g class='side' transform="translate(503,1.5)">
+			<path d="M -10 0 h 30" stroke-dasharray="6"/>
+			<text x='25' y='4' style="text-anchor: start; ">cross start</text>
+		</g>
+		<g class='side' transform="translate(503,118.5)">
+			<path d="M -10 0 h 30" stroke-dasharray="6"/>
+			<text x='25' y='4' style="text-anchor: start; ">cross end</text>
+		</g>
+		<g class='side' transform="translate(1.5,120)">
+			<path d="M 0 -10 v 40" stroke-dasharray="5 5"/>
+			<text x='0' y='40'><tspan>main</tspan><tspan x='0' y='58'>start</tspan></text>
+		</g>
+		<g class='side' transform="translate(498.5,120)">
+			<path d="M 0 -10 v 40" stroke-dasharray="5 5"/>
+			<text x='0' y='40'><tspan>main</tspan><tspan x='0' y='58'>end</tspan></text>
+		</g>
+		<rect class='container' x='0' y='0' width='500' height='120' rx='10' ry='10' />
+		<text x='157.5' y='136' class='display'>flex container</text>
+		<g class='item' transform='translate(5,5)'>
+			<rect x='0' y='0' width='150' height='110' rx='5' ry='5' />
+			<text x='75' y='70'>1</text>
+			<text x='146' y='106' class='display' style="text-anchor: end;">flex item</text>
+		</g>
+		<g class='item' transform='translate(160,5)'>
+			<rect x='0' y='0' width='335' height='110' rx='5' ry='5' />
+			<text x='168' y='70'>2</text>
+			<text x='3' y='106' class='display' style="text-anchor: start;">flex item</text>
+		</g>
+		<g class='arrow' transform='translate(-1,60)'>
+			<circle cx='3.5' cy='0' r='5' />
+			<path d="M 8 0 h 600" />
+			<path d='M 608 0 v -5 l 10 5 l -10 5 v -5' />
+			<text x='550' y='-4' stroke='transparent' fill='black'>main axis</text>
+		</g>
+		<g class='arrow' transform='translate(250,222.5) rotate(-90)'>
+			<circle cx='220' cy='0' r='5' />
+			<path d="M 215 0 h -220" />
+			<path d='M -5 0 v -5 l -10 5 l 10 5 v -5' />
+			<text x='50' y='-4' stroke='transparent' fill='black'>cross axis</text>
+		</g>
+		<g class='bracket' transform='translate(1,-15)'>
+			<path d="M 0 10 v -10 h 498 v 10" />
+			<text x='249' y='-4'>main size</text>
+		</g>
+		<g class='bracket' transform='translate(-15,119) rotate(-90)'>
+			<path d="M 0 10 v -10 h 118 v 10" />
+			<text x='59' y='-4'>cross size</text>
+		</g>
+	</g>
+</svg>
\ No newline at end of file
diff --git a/namsefni/42.upprifjun-samantekt/readme.md b/namsefni/42.upprifjun-samantekt/readme.md
new file mode 100644
index 0000000..fc11ac7
--- /dev/null
+++ b/namsefni/42.upprifjun-samantekt/readme.md
@@ -0,0 +1,7 @@
+# Upprifjun og samantekt
+
+* [HTML](1.html.md)
+* [CSS](2.css.md)
+* [Tæki og tól](3.tools.md)
+* [JavaScript](4.javascript.md)
+* [Verkefni](5.verkefni.md)
diff --git a/vikur/vika-14.md b/vikur/vika-14.md
new file mode 100644
index 0000000..384a681
--- /dev/null
+++ b/vikur/vika-14.md
@@ -0,0 +1,18 @@
+# Vika 14, 18.–24. nóvember 2024
+
+## Fyrirlestrar
+
+- [Fyrirlestur 14.1, upprifjun: HTML (13:16)](https://youtu.be/xaI5WoV3VZQ)
+- [Fyrirlestur 14.2, upprifjun: CSS (31:10)](https://youtu.be/wjyAYq34ohk)
+- [Fyrirlestur 14.3, upprifjun: Tæki&tól (14:41)](https://youtu.be/ey7avh8aUE4)
+- [Fyrirlestur 14.4, upprifjun: JavaScript (28:03)](https://youtu.be/qi2Dnq5u_d0)
+- [Fyrirlestur 14.5, upprifjun: Verkefni (9:33)](https://youtu.be/h0kdPZrdPWo)
+
+## Námsefni
+
+- [Upprifjun og samantekt á námsefni](../namsefni/42.upprifjun-samantekt/)
+
+## Verkefni vikunnar
+
+- [ ] Skila [hópverkefni 2](https://github.com/vefforritun/vef1-2024-h2)
+- [ ] Læra fyrir lokapróf!