Kode 2 Oversikt over innholdet i læreboka

 

<01> Kom i gang med HTML5 og CSS   8

1.1 Hva er HTML5?   8

HTML – Hyper Text Markup Language   8

HTML + CSS3 + JavaScript = HTML5   9

Fordelene med HTML5   10

1.2 Kom i gang med HTML-koding   12

Filformatet til et HTML-dokument   12

Strukturering med tagger   12

HTML-elementer   14

Sette inn bilder og lenker   14

Attributter   15

DOM – strukturen i HTML-kode   16

1.3 Strukturering med semantiske HTML-elementer   17

Semantiske HTML-elementer   17

Koden til en blogg   18

1.4 Lister og tabeller   19

Lister   19

Tabeller   21

HTML-elementene <div> og <span>   22

1.5 Formateringsspråket CSS   22

Å endre utseendet på HTML-elementer   23

CSS-selektorer med attributtene id og class   25

Sammendrag   27

 

<02> JavaScript   28

2.1 Programmeringsspråket JavaScript   28

Kva er kode?   28

Metoder i JavaScript   29

String og HTML-tagger i metoder   31

2.2 Sammenhengen mellom HTML-elementer og JavaScript-kode   32

Reserverte ord og dot-notasjon   32

Egenskaper til window og navigator   33

Ta kontroll over nettsiden med JavaScript og innerHTML   34

2.3 Metoden getElementById   37

Bruke JavaScript-kode til å referere til HTML-elementer   37

Hente ut attributtene til et HTML-element   40

Endre attributtene til et HTML-element   40

2.4 Når noe går galt   42

Hva kan gå galt?   42

Feilmeldinger i konsollen   43

Forskjellige typer advarsler og feilmeldinger i konsollen   44

Sammendrag   45

 

<03> Variabler   46

3.1 Definere og bruke variabler   46

Variabler, variabelnavn og variabelverdi   46

Deklarere, tilordne og definere variabler   46

Valg av variabelnavn   48

Å sette sammen tekstvariabler – konkatenering   48

La brukeren tilordne variabelverdi   50

3.2 Tallvariabler   53

Variabel med datatypen number   53

Å regne med tallvariabler   54

Avrunding av desimaler   55

Å øke og minke variabelverdien   56

Math   57

3.3 Andre datatyper   60

Å endre datatype – casting   60

Datatypen array   62

Datatypen objekt   63

Datatypen boolean   64

3.4 Referere til HTML-elementer   65

Referere til et HTML-element med document.getElementByld   65

Å sette innhold i et HTML-element med innerHTML   65

Endre attributt til et HTML-element   67

Relative og absolutte adresser   68

3.5 Tegning med JavaScript   69

Tegne en firkant i canvas   69

Tegne rette linjer i canvas 70

Tegne ved hjelp av variabler   71

Sammendrag   73

 

<04> If-setninger og løkker   74

4.1 If-setninger   74

If-setning og if else-setning   74

Betingelser   76

4.2 Flere betingelser   79

else if-setning   79

Flere if-setninger   81

Nøstede if-setninger   83

4.3 Switch-setning   84

Switch-setning med flere case-setninger   84

Flere case-setninger som utløser den samme koden   85

4.4 While-løkke   87

While-løkker gjentar en kode   87

Inkrementere og dekrementere   88

4.5 For-løkke   91

For-løkke gjentar en kode et bestemt antall ganger   91

Dobbel for-løkke   93

For-løkke med flere variabler   94

Sammendrag   95

 

<05> Funksjoner   96

5.1 Funksjoner i JavaScript   96

Å lage egne funksjoner   96

5.2 Funksjoner med parametere   100

Funksjon med én parameter   100

Funksjoner med flere parametere   102

Endre HTML-elementer og CSS-stiler med funksjoner 102

5.3 Globale og lokale variabler   105

Deklarere lokale og globale variabler   105

Når bruker vi lokale variabler?   107

5.4 Anonyme funksjoner   109

Anonyme funksjoner er funksjoner uten funksjonsnavn   109

Automatiske funksjoner   109

Hendelsesstyrte funksjoner   110

Hendelsen som parameter   112

5.5 Funksjoner med returverdi   114

Alle funksjoner returnerer en verdi   114

Funksjonen avsluttes etter return   115

Funksjoner som returnerer HTML   116

Sammendrag 118

 

<06> Interaktivitet og brukergrensesnitt   119

6.1 Button-elementet   119

Hva er interaktivitet og brukergrensesnitt?   119

Button-elementet og hendelsesstyrte funksjoner   119

En funksjon til flere knapper   123

Data-attributter   126

6.2 Input-elementet 128

Input-element for tekst   128

Attributter i input-elementet for tekst   130

Input-element for tall 132

Andre input-elementer   134

6.3 Valg med radio, checkbox og select-elementet   137

Radioknapper – type= «radio»   137

Radioknapper med data-attributter   139

Avkryssingsboks – type= «checkbox»   141

Nedtrekksliste – select-element   142

6.4 Skjemaer   144

Form-elementet   144

Validering av inndata   145

Bruk av skjemaer og Single Page Applications   146

Sammendrag   153

 

<07> Multimedier – tekst, bilde, video og lyd   154

7.1 Multimedier   154

Multimedieapplikasjoner 154

7.2 Tekst   155

Multimedietype tekst 155

Skrifttyper 155

Utseendet på avsnittene 156

Webfonter   156

Universell utforming   157

7.3 Bilder   158

Punktgrafikkbilder består av piksler   158

Visning av bilder på skjerm   159

Bilderedigering for å endre filstørrelsen   151

Komprimering av bilder   162

Bruk av filformatet JPG   163

Valg av filformat   163

7.4 Bilder med JavaScript   165

Skalering av punktgrafikkbilder med CSS   165

Bilde med tekst som ligger over et bilde   166

Skalering av bilder med JavaScript   168

Farge og gjennomsiktighet for punktgrafikk   170

La nettleseren velge det bildet som passer best   172

Informasjon om hvordan bildet blir brukt   174

7.5 Vektorgrafikk med SVG   175

SVG – Scalable Vector Graphics   175

Enkle geometriske figurer   175

Å tegne rektangler og sirkler   176

Å tegne polygoner og polylinjer   177

Å gruppere elementer med <g>   178

7.6 Video med HTML   179

Filformat for video   179

Video-elementet 180

Attributter til video-elementet   181

Teksting av video   181

7.7 Video med JavaScript   183

Koding av video-elementet med JavaScript   183

Egenskapene til video-elementet   184

Forflytte oss til et bestemt tidspunkt i videoen   185

Interaktive multimedier med video   186

7.8 Lyd   190

Audio-elementet   190

Filformater for lyd   191

Web Audio API   194

Sammendrag   197

 

<08> Kolleksjonene array, set, map og nodelist … 198

8.1 Array   198

Kolleksjoner er samlinger av data   198

Kolleksjonen array   198

Referere til verdiene i array   199

Metoder til array   201

Fylle array fra input- eller select-element   202

Å sortere et array   204

8.2 Å traversere array   206

Å traversere et array med en for of-løkke   206

Å traversere et array med en for-løkke   208

Å traversere et array som har objekter   209

8.3 Set   211

Kolleksjonen set har unike verdier 211

Å opprette et set med verdier fra et array   212

Konvertere mellom kolleksjonene array og set   213

Traversere et set med en for of-løkke   214

8.4 Map   215

Kolleksjonen map har verdier og nøkler   215

Map med objekter   216

Traversere map med for of-løkke og map.forEach()-løkke   218

Metoden forEach()   219

8.5 NodeList   221

Kolleksjonen nodelist har elementer   221

8.6 Diagrammer   224

Stolpediagram med HTML, CSS og JavaScript   224

Stolpediagrammer med flexbox   226

Prosentvise høyder i stolpediagram med flexbox   228

Sirkeldiagram  230

Interaktivt sirkeldiagram   232

Linjediagram med SVG   234

Tegne rutenett med SVG   235

Sette på tekster med SVG   236

JavaScript og SVG   238

8.7 JSON og lagring av data   240

JSON er et dataformat for lagring og utveksling av data   240

Bruk av eksterne data på nettsider   241

Sammendrag   245

 

<09> Multimedier – animasjon   246

9.1 Animering med CSS Transitions   246

Hva er en animasjon?   246

CSS Transitions – animere overganger mellom CSS-stiler   246

Hvordan skal vi starte animasjonen?   248

CSS Transforms – rotere, skalere, flytte, forskyve   250

Transformasjonspunkt   252

Animere en CSS Transform med CSS Transitions   252

9.2 Animering av bilde som erstattes av en tekst   254

Overgang med transform: scale()   254

Overgang med gjennomsiktighet   257

9.3 Animering med CSS Transitions og JavaScript   258

JavaScript endrer CSS-stiler   258

Input-elementer – brukeren starter og styrer animasjonen   258

Brukeren roterer et element   260

9.4 Animering med CSS Animations   262

@keyframes med from og to 262

Ulike CSS-stiler til animation   263

@keyframes med tidslinje i prosenter   265

Flere @keyframes i samme animasjon   267

9.5 Animering med Web Animations API   270

WAAPI kombinerer CSS og JavaScript   270

Kom i gang med WAAPI og koden animate(…)   270

La brukeren starte animasjonen   271

Et objekt for å angi tidsangivelsen   271

Å styre en animasjon med Animation Player   273

Hastighet og tid i en animasjon   274

Å animere flere elementer 276

9.6 WAAPI med nodelist, hendelsesstyrt animasjon og stop-motion   278

Å animere elementer i en nodeliste og document.timeline   278

Hendelsesstyrt animasjon   279

Stop-motion-animasjon   281

Sammendrag   284

 

<10> Spillprogrammering   285

10.1 Et enkelt spill   285

Et klikk oppdaterer spillet   285

Endrer plasseringen av et img-element   286

Game loop – spillet oppdateres kontinuerlig   287

Forsinkelse i Game loopen   289

10.2 Bevegelse i spill med canvas   291

Animere med HTML-elementer, canvas eller SVG?

Å animere i canvas   292

Kollisjoner   295

Å styre firkanten med piltaster   296

10.3 Veggtennis   298

Funksjonsdrevet spill   298

  1. Å tegne en firkantet bane   300
  2. Tegne en ball som flytter seg   300
  3. Snu retningen på ballen når den treffer en kant   301
  4. Tegne en racket og styre den med piltaster   302
  5. Sjekke om ballen treffer racketen   304
  6. Å telle poeng og ta vare på rekorden   304
  7. Sjekke om ballen er utenfor banen   306

Sammendrag   309

 

<11> Planlegging og dokumentasjon   310

11.1 Ulike arbeidsmetoder   310

Systemutvikling   310

Arbeidsmetoder   311

Vannfallsmetoden   312

Hva er utfordringene med vannfallsmetoden?   312

11.2 Smidig utvikling og Scrum-metoden   314

Smidig utvikling   314

Scrum har selvorganiserende team   314

Sprinter   315

Planlegging   316

Tidsbruk vises på scrum-tavle og burndown-graf   317

Hva oppnår vi med smidig utvikling?   319

11.3 Lean startup   320

Hva trenger vi lean startup til?   320

Lean canvas   322

Problemfokus   324

Løsingsfokus   325

11.4 Valg av arbeidsmetode   327

11.5 Dokumentasjon av funksjonelle krav   328

Dokumentasjon   328

Funksjonelle krav   328

Skisser og wireframes   330

Use case – bruksmønster   331

Brukerhistorier   332

11.6 Teknisk dokumentasjon av programkoden   333

Programkode   333

Kommentarer i koden   333

Pseudokode og flytdiagram   334

Brukerveiledninger   335

Universell utforming   336

Sammendrag   337

 

<12> Objektorientert programmering   338

12.1 Klasser og objekter   338

Opprette klasser og objekter i JavaScript   338

Hente ut fra og endre attributtverdier i objektene med dot-notasjon   340

Lage egne metoder   341

Get-metoder   342

Sammenheng mellom objekter   344

Subklasser og arv   345

Objektorientert utvikling og UML   346

12.2 Grafisk grensesnitt og kolleksjoner av objekter   348

Get-metoder som returnerer HTML   348

Kolleksjoner av objekter   352

Lagre data med localStorage   352

Kjendiser   353

Å lagre objekter med localStorage   353

Get-metoder som returnerer interaktive elementer   354

12.3 Strukturere koden i ulike filer   356

En kontaktliste med personer   356

HTML-filen index.html   357

Klassen Kontakt til kontaktlisten   358

JavaScript-filen main.js   359

12.4 Realtime-lagring og synkronisering av JSON-data i en database   360

Firebase   360

Chat-program med Firebase   361

Sammendrag   365

 

Stikkordregister   366