Oppsummering IT2

HTML

STRUKTUR	FORKLARING	EKSEMPEL
<!-- -->	Kommentar	Repetisjon - HTML - CSS kap 1
<DOCTYPE html>	Definerer er HTML5-dokument
<a >	Lenke
<article>	Seksjon med selvstendig innhold
<body>	Synlig del av nettsiden
<h1> ... <h6 >	Overskrifter
<head>	Informasjon om nettside
<html>	HTML- innhold
<link>	Hente inn ekstern CSS	Eksamen V2013 Energi (linje 6)
<script>	JavaScript
<section>	Inndeling av innhold
<style>	CSS
<title>	Tittel på siden

TEKST OG TABELL	FORKLARING	EKSEMPEL
<b>	Halvfet tekst	Et eksempel på bruk av ulike HTML-tagger
<br>	Linjeskift
<div >	Inndeling av innhold (lag)
<hr>	Horisontal linje
<li>	Listepunkt	1. Kap 3.4 Eks Meny s 67.html 2. Lister fra Array - Kap 8
<ol><ul >	Nummerert/unummerert liste
<p>	Tekstavsnitt
<section>	Inndeling av innhold
<span>	Inndeling av innhold uten linjeskift
<table>	Tabell
<tbody>	Innholdet i en tabell
<tr>	Rad i tabell
<th>	Overskrift i tabell
<td>	Celle i tabell

MEDIER	FORKLARING	EKSEMPEL
<audio>	Lyd - element	1. Lyd - Knapp og bilder Kap 6.1 s 127 2. Lyd - Knapper, bilder og lyd (Kinofilmer) 3. Lyd - Eksamen V2016 Feriereiser Oppgave 2 4. Eksamen V2010 Flystevne (slå lyd av/på) 5. Eksamen H2014 Biler Oppgave 1(slå lyd av/på)
<canvas>	Tegning og animasjon	Figurer i canvas Kap 3.4 s 72
<img>	Bilde	Plassere bilder, med ramme mm (Kap 2)
<svg>	Figur, vektorgrafikk	Figurer med svg - Kap 7.5 s 176
<track>	Undertekster av type WebVTT
<video>	Video - element	1. Sette inn video - Kap 7.6 s 180 (åpne i FF) 2. Spille av video med knapper - Kap 7.7 s 183 3. Attributter til videofilm - Kap 7.6 s181

SKJEMA	FORKLARING	EKSEMPEL
<button>	Knapp	Knapper med attributter - Kap 6.1 s 126
<form>	Skjema - element	Skjema - Kap 6.4 s 148
<input>	Input - felt (text, number, date, color, range)	Input elementer - Kap 6.2 s 35
<label>	Merkelapp for input- element	Input elementer - Kap 6.2 s 35
<option>	Valg av nedtrekksliste	Nedtrekk - Kap 6.3 s 143
<select>	Nedtrekksliste	Nedtrekk - Kap 6.3 s 143
<textarea>	Input over flere linjer

CSS

Selector: element, .klasseNavn, #idNavn

Egenskap	Forklaring	Verdi	Eksempel
align-items	Inni flexbox	flex-start, flex-end, center	Søyler - stående - liggende - Kap 8.6 s 277
bacground-color	Bakgrunnsfarge	red, #ff0000
border	Kantlinje	1px solid red
color	Tekstfarge	red, #333
cursor	Musepeker	pointer	Musepeker over tekst
flex	Flexbox	display:flex	Søyler - stående - liggende - Kap 8.6 s 277
font-family	Skrifttype	Georgia
font-size	Tekststørrelse	px, %
left	Abs. avstand venstre kant	px, %
line-height	Linjeavstand	px
margin	Margbredde	px, %, auto
margin-left	Venstremarg	px, %
max-width	Maks bredde	px, %
opacity	Gjennomsiktighet	0 til 1
position	Plassering	absolute, relative
top, bottom	Abs. avstand fra topp til bunn	px, %
transform	Rotere, skalere, flytte, forskyve	rotation(deg) scale(x,y)	Roterer et p-element - Kap 9.1 s 251
width, height	Bredde, høyde	px, %

ANIMASJON	FORKLARING	Eksempel
:active	Så lenge klikk varer	Roterer et p-element - Kap 9.1 s 251
.animate		1. Tekst som fader - Kap 9.5 s 271 2. Snøball som ruller - Kap 9.5 s 272 3. Firkant som beveger seg i skjermen - Kap 9.5 s 273
animation:	Animerer mellom tilstander
:focus	Input-element får fokus	Endre bredde på inputfelt - Kap
:hover	Musemarkør over element	1. Musepeker endrer størrelse - Kap 9.1 s 248 2. Animasjon - overganger (Løve/tekst) - Kap 9.2 s 257
@keyframes	Animering, from ... to %	1. Firkant som "vokser" - Kap 9.4 s 263 2. Bil som kjører - Kap 9.4 s 268 3. Eksamen V2010 Flystevne (slå lyd av/på) 4. Eksamen H2014 Biler Oppgave 1
transition:	Overgang i CSS-stiler	1. Klikke på figur - øke størrelsen Kap 6.1 s 121 2. Rotere figur (ugle) Kap 6.2 s 136 3. Eksamen H2014 Biler Oppgave 1

JAVA SCRIPT

KODE	FORKLARING	EKSEMPEL
[ ]	Array	1. Array og arraymetoder - Sette inn, endre, sortere osv 2. QUIZ - Array, legge inn verider med input, sortering mm 3. Array, summere og tegne sirkler i canvas 4. Legge til verdier i array fra select-element - Kap 8.1 s 203 Endimensjonale array: Lister, tabell, checkbox mm
{ }	Objekt	1. Objekter - enkelt eksempel Kap 3.3 s 63 2. Filmer - Knapper, bilder og lyd 3. Objekter i array - tabell med "planetverdier"
alert()	Varselboks, alert-boks
appendChild()		1. Søyler (terningkast) 2. Blinkende stjerner 3. Eksamen V2015 Sykkelturer Oppgave 3
class	Klasse
date	Tid og dato	Sjekker dagens dato og ukedag - new Date()
document.createElement()	Oppretter elementer	1. Søyler (terningkast) 2. Blinkende stjerner (linje 22)
document.getElementsByClassName()	En nodeList med elementer basert på klasse	Blinkende stjerner (linje 28)
document.getElementById()	Referanse til HTML-element
document.getElementsByTagName()	En nodeList med elementer	1. Liste med verdier Kap 8.5 s 221 2. Div - NodeList i array - Kap 8.5 s 221
document.querySelector()	En nodeList med element basert på CSS
document.querySelectorAll()	En nodeList med element basert på CSS	1. Checkbox - Eksamen v2015 Sykkelturer Oppgave 2 2. Flere figurer med ulik farge - Kap 8 3. Checkbox valg (linje 82)
document.write()	Skriver tekst
else	If else - setning
else if	Else if- setning	Sjekker dagens dato og ukedag
evt.target	Element som starter hendelsesfunksjon	Funksjon (evt) - Klikke på knapp og bilder
for	For - løkke	Summere tall i en for-sløyfe
for of	For of - løkke	1. Traversere et array - Kap 8.2 s 207 2. Array med objekter
forEach()	For each - løkke	forEach() - Array - Set - Map
function	Funksjon	1. Funksjon med parameter (sekunder og timer) Kap 5.3 s 108 2. Funksjons - knapp og bilde (onclick) 3. Funksjons - musepeker over tekst (mouseover) 4. Funksjon - skifte farge på bakgrunn (alert)
function(evt){}	Funksjon, hendelse er parameter	1. Funksjon (evt) Kap 6.1 s 126 (data-attributter) 2. Funksjon (evt) - Klikke på knapp og bilder
get	Get - metode	Get - (map) linje 211 - Eksamen V2016 Feriereiser Oppgave 3
i--	i minker med 1
i +=5	i øker med 5
i++	i øker med 1
if	If - setning	Sjekker dagens dato og ukedag
innerHTML	Innhold HTML - element
input.value	Verdi i input element	Legge til verdier i array fra select-element - Kap 8.1 s 203 (linje 26)
length	Lengde på array eller tekst
let	Variabel(ES2015)
localStorage	Lagring av data lokalt i nettleseren
Map	Map- kollekjson	1. Map - Kap 8.4 s 218 2. Map - Array - Legge til og slette - Kap 8.4 oppg 1 s 220 3. Map - Tabell/Slette rad Kap 8.4 oppg 4 s 220
Math.PI	3.14
Math.random()	Tilfeldig tall[0,1]	Lottorekke
Math.round()	Runder opp eller ned	Lottorekke
Math.floor()	Sletter desimale	Lottorekke
new Map()	Nøkkel og verdier	Map - Kap 8.4 s 218
new Set()	Unike verdier	Set- Stjerner i verdensrommet - Kap 8.3 s 211
Number()	Endrer til datatype tall
prompt()	Innskrivingsfelt
return	Returnerer en verdi	Return - funksjon - Kap 5.5 s 116
Set	Set - kolleksjon	Set- Stjerner i verdensrommet - Kap 8.3 s 211
String()	Endrer til datatypen tekst
switch	Valg	Switch case - QUIZ - Kap 4.3 s 84
var	Variabel
while	While - løkke	Summere tall med while - løkke - Kap 4.4 s 92

HENDELSE	FORKLARING	EKSEMPEL
onchange	Verdi endrer seg	Eksamen V2013 Energi Oppgave 2 (linje 48) (kobler til funskjon ved endring)
onclick	Klikk	Klikke på knapper - Kap 6.1 s 126
onfocus	Klikk i inputfeltet	Eksamen V2013 Energi Oppgave 2 (linje 44) (fjerner innhold i inputfelt)
oninput	Endre verdi i input-felt
onkeydown	Trykke ned tast
onkeyup	Slippe opp tast	Slippe opp tast - Kap 6.2 s 134
onload	Nettsiden lastes inn
onmousemove	Bevege musemarkør
onmouseout	Musemarkør fjernes
onmouseover	Musemarkør over	1. Musepeker over tekst (oversettelse) 2. Funksjon (evt) - Klikke på knapp og bilder og musepeker over tekst
onresize	Endre størrelse på nettleseren
onsubmit	Sende inn skjema	Skjema - Kap 6.4 s 148

SAMMENLIGNINGS OPERATOR	FORKLARING	EKSEMPEL
===	Lik verdi og datatype	Sjekker inntastet tallverdi - Kap 4
!==	Ikke lik verdi og datatype	Sjekker input-verdier - Kap 4.2
>	Større enn	Sjekker dagens dato og ukedag - Kap 4.1
<	Mindre enn
<=	Mindre eller lik
>=	Større enn eller lik

LOGISK OPERATOR	FORKLARING	EKSEMPEL
&&	Både og	Sjekker input-verdier - Kap 4.2
\|\|	Eller
!	Ikke

DATATYPE	FORKLARING	EKSEMPEL
string	Tekststreng
number	Alle tall
boolean	Logisk verdi (true, false)	Datatype boolean - Kap 3.3 s 64 Eksamen V2010 Flystevne Oppgave 1 (slå lyd av/på)

DIVERSE	FORKLARING	EKSEMPEL
Diagrammer		1. Liggende soyler (display: inline-block ) 2. Liggende soyler med #soyler>div (stolpediagram Sicilia s 225) 3. Stående og liggende søyler med #soyler>div (flexbox - flex-direction s 227) 4. Stående og liggende søyler med #soyler>div (flexbox - flex-direction oppg 1 s 240) 5. Stående søyler med canvas
disabled	Tilgjengelig - true/false	Spørrekonkurranse - Nesteknapp ikke tilgjengelig (linje 80)
style.display = "none" style.display = "inline"	Synlig - none/inline	Eksamen V2010 Flystevne Oppg 2(linje 67 - 68)
owerflow	:hidden - skjuler utenfor div	Eksamen V2010 Flystevne Oppg 1(slå lyd av/på)
this	"peker" tilbake på "det det angår"	1. Lister - finner valgt listepunkt med this (linje 74) 2. Tabeller - finner valgt rad - Eksamen V2013 Energi (linje 122) 3. Tabeller - finner valgt rad/celle - Eksamen H2014 Biler (linje 104)