Recap: JavaScript

Digital design,

3. semester

JavaScript og UI

Tema 4

Recap

JavaScript

querySelector

function()

addEventListener

classList

Recap

JavaScript

querySelector()

function()

addEventListener()

classList

)

JavaScript

querySelector(

function()

addEventListener()

classList

)

<h1>Overskrift</h1>
h1

JavaScript

querySelector(

function()

addEventListener()

classList

)

<h1>Overskrift</h1>
h1

JavaScript

querySelector(

function()

addEventListener()

classList

)

<h1>Overskrift</h1>
h1

"        "

JavaScript

querySelector(

function()

addEventListener()

classList

)

<h1>Overskrift</h1>
h1

"        "

document.

Kig efter h1 i HTML-dokumentet

JavaScript

querySelector(

function()

addEventListener()

classList

)

h1

"        "

document.

const heading =

JavaScript

querySelector(

function()

addEventListener()

classList

)

h1

"        "

document.

const heading =

JavaScript

querySelector(

function()

addEventListener()

classList

)

h1

"        "

document.

const heading =

heading.

JavaScript

querySelector(

function()

addEventListener()

classList

)

h1

"        "

document.

const heading =

heading.

.add

("min-klasse")

.remove

JavaScript

querySelector(

function()

addEventListener()

classList

)

h1

"        "

document.

const heading =

heading.

.add

("min-klasse")

.remove

.toggle

JavaScript

querySelector(

function() {

addEventListener()

classList

)

h1

"        "

document.

const heading =

heading.

("min-klasse")

.remove

.toggle

JavaScript

querySelector(

function() {

addEventListener()

classList

)

h1

"        "

document.

const heading =

heading.

("min-klasse")

.remove

.toggle

}

JavaScript

querySelector(

function() {

addEventListener(

classList

)

h1

"        "

document.

const heading =

heading.

("min-klasse")

.remove

.toggle

}

querySelector(

)

button

"             "

document.

const btn =

)

JavaScript

querySelector(

function() {

addEventListener(

classList

)

h1

"        "

document.

const heading =

heading.

("min-klasse")

.remove

.toggle

}

querySelector(

)

button

"             "

document.

const btn =

)

JavaScript

querySelector(

function() {

addEventListener(

classList

)

h1

"        "

document.

const heading =

heading.

("min-klasse")

.remove

.toggle

}

querySelector(

)

button

"             "

document.

const btn =

btn.

)

JavaScript

querySelector(

function klikket () {

addEventListener(

classList

)

h1

"        "

document.

const heading =

heading.

("min-klasse")

.remove

.toggle

}

querySelector(

)

button

"             "

document.

const btn =

btn.

)

"click", klikket

JavaScript

querySelector(

function()

addEventListener()

classList

)

h1

"        "

document.

const btn = document.querySelector("button");
const heading = document.querySelector("h1");

function klikket() {
  heading.classList.toggle("min-klasse")
}

btn.addEventListener("click", klikket)

h1 {
  font-size: 3rem;
}

.min-klasse {
  background: red;
}

User Interface

JavaScript

Eksempel

JavaScript

Eksempel

JavaScript

Eksempel