Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

JMC > Module 11: Frontend > Flashcards

Module 11: Frontend Flashcards

1
Q

Wat is HTML?

A

HTML staat voor Hypertext Markup Language en is een op SGML (ISO-standaard) gebaseerde opmaaktaal voor het bouwen van documenten. Dergelijke documenten bestaan uit een hiërarchische structuur van elementen.

Documenten in HTML kunnen worden ingelezen door een webbrowser om vervolgens als webpagina te worden weergegeven.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Een HTML document is opgebouwd uit genestelde elementen, waarvan het merendeel wordt aangeduid met een zogeheten ‘start tag’ en end ‘tag’. De meest voorkomende elementen bestaan uit…

A
  • html: duidt het begin en eind van een HTML document aan.
  • head: duidt het begin en het eind van de header aan, die metadata bevat zoals de titel van een document.
  • body: duidt het begin het eind aan van het deel van het HTML document dat wordt weergegeven door het browser.
  • div: bakent een logische sectie af van het document.
  • h1: bevat de de koptekst van een sectie in het document.
  • p: bakent een paragraaf af.
  • a: voor het invoegen van een link.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Naast deze elementen bestaan er ook nog elementen die geen content bevatten, deze worden ook wel void of empty genoemd. Voorbeelden zijn…

A
  • img: wordt gebruikt voor het weergeven van een afbeelding.
  • br: is een line break waarmee je naar een nieuwe regel kunt gaan.
  • input: geeft een input veld aan waarin een gebruiker informatie kan invullen.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Wat is het DOM?

A

Wanneer een webpagina wordt geladen, creëert de browser een Document Object Model. Een DOM definieert alle HTML elementen als objecten, die de eigenschappen, methodes en evenementen van de elementen bevat. Het DOM bestaat uit een boom van objecten die gelijk is aan de hiërarchische structuur van de elementen.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Welke root tags zijn niet verplicht omdat de browser ze automatisch toevoegt aan het DOM?

A

html, head en body

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Waarom zou je root tags die niet verplicht zijn alsnog niet weglaten?

A

Hoewel je HTML document valide kan zijn, het DOM toch anders kan zijn dan je verwacht.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Wat is character encoding bij HTTP?

A

Character encoding definieert de vertaling van binaire data naar karakters.

Hoewel velden in een HTTP GET request voor het grootste deel uit ASCII tekst bestaan, staat de encoding voor de HTTP message body (hierin staat het opgevraagde HTML document) niet vooraf vast. Als de browser het HTML document wil laten zien op het scherm, moet duidelijk zijn welke encoding gebruikt is voor het document.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Hoe kan de browser bepalen welke encoding is gebruikt voor het weergeven van een HTML document?

A
  • Default (geen aanduiding)
  • HTTP Header
  • Meta charset (html header)
  • Instellingen
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Wat is de default encoding algoritme voor HTML documenten?

A

UTF-8

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Wat is de character reference voor de volgende characters:

  • <
  • >
  • &
  • ”
A 
<   = <
>   = >
&  = &
" = "
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Wat zijn de stappen waarin een pagina in de browser wordt gerendered?

A
  1. De browser laad allereerst de resources zoals HTML, afbeeldingen, CSS en JavaScript in.
  2. Vervolgens wordt de encoding bepaald en hierna de HTML geparsed.
  3. Op basis van de geparsde HTML wordt het DOM opgebouwd.
  4. Dan wordt op basis van de CSS de CSSOM (CSS Object Model) opgebouwd. Dit is zoals HTML een hiërarchische structuur van de styles uit de stylesheet.
  5. Vanuit JavaScript kunnen beide modellen worden benaderd om hier bewerkingen op uit te voeren.
  6. Om te bepalen wat daadwerkelijk weergegeven gaat worden, wordt de Render Tree opgebouwd. Dit door op basis van DOM en CSSOM een nieuwe hiërarchische structuur op te bouwen met hierin alle zichtbare elementen.
  7. Vervolgens wordt de pagina weergegeven.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Wat zijn semantische elementen?

A

semantische elementen zijn elementen die iets over de inhoud van het document zeggen.

Voorbeeld is het img element, waaraan de browser kan herkennen dat het element een afbeelding bevat.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Wat zijn non-semantische elementen?

A

Non-semantische elementen zijn elementen die niets zeggen over de inhoud, voorbeelden hiervan zijn ‘div’ en ‘span’ elementen.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Traditioneel gezien werden websites vooral opgebouwd met div om aan te houden wat de header, nav, footer, etc is. Wat is het nadeel hiervan?

A

Het nadeel hiervan is dat dit voor een browser geen semantische betekenis heeft.​

Om dit op te lossen zijn er in HTML5 tags toegevoegd die ieder hun eigen betekenis hebben. In het voorbeeld hieronder zie je de HTML5 equivalent van het voorbeeld met non-semantische elementen.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Wat is het verschil tussen Block, inline & inline-block?

A
  • Block elementen krijgen standaard de volledige breedte van het bovenliggende element en worden altijd op een nieuwe regel weergegeven, tenzij de CSS property float wordt toegepast. (div, p, table, form. ul, nav)
  • Als er op een regel genoeg ruimte is, worden inline elementen naast elkaar geplaatst. De grootte van een inline element wordt door de inhoud bepaald. De hoogte en breedte van inline elementen zijn niet instelbaar en het is ook niet mogelijk om een margin of padding toe te passen. Elementen zonder ingestelde display property worden door de browser standaard als inline element gezien. (span, a, i, b, strong)
  • Het inline-block element is een combinatie van de inline en block elementen. Inline-block elementen kunnen naast elkaar worden weergegeven, maar kunnen ook van een aangepaste breedte en hoogte worden voorzien. Het is met een inline-block ook mogelijk om padding of margin toe te passen. (img, button, select, input)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Wat zijn globale attributen?

A

Globale attributen zijn attributen die op ieder element kunnen worden toegepast. De bekendste en meest gebruikte globale attributen zijn ‘class’ en ‘id’, maar er zijn er meer.

  • hidden:
  • tabindex
  • contenteditable: als dit attribuut gezet is kan de (tekst)inhoud van een element worden aangepast.​
  • draggable: dit attribuut maakt het mogelijk om het element te slepen met de muis.​
  • data-*: deze prefix kan worden gebruikt voor applicatie specifieke data, die gegarandeerd niet conflicteert met HTML eigen attributen.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Wat zijn Embedded inhoud elementen?

A

Embedded elementen maken het mogelijk om in een zogeheten container externe bronnen weer te geven.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Welke Embedded inhoud elementen zijn er?

A
  • audio/video/source/track: een audio- of videobestand/stream weergeven in de browser. De browser levert hiervoor zelf een implementatie van een player en codec.​
  • source elementen: zijn subelementen van een audio/video element. Het maakt meerdere bronnen mogelijk, bijvoorbeeld om een video in meerdere videoformaten aan te leveren.​
  • track elementen: zijn subelementen van een audio/video element: Kan worden gebruikt voor ondertitels.​
  • canvas: Een bitmap buffer waarin je met een low-level API kunt “tekenen”, of bijvoorbeeld WebGL naar toe kunt renderen.​
  • object/Embed: embedded content, specifiek bedoeld om een browser plugin (bv. Flash, Java, PDF) controle te geven over het element. Van de 2 is object de meest moderne, en tegenwoordig te prefereren boven embed.​
  • param elementen: zijn subelementen van object, en worden gebruikt om plugin specifieke informatie (key value pairs) door de geven aan het object element.​
  • iframe: wordt meestal gebruikt om een andere HTML pagina toe te voegen als onderdeel van een pagina. Wordt soms ook gebruikt voor andere content, bv. Pdf.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Wat is het verschil tussen async vs. defer?

A

Bij een standaard script block zonder defer of sync attribuut wordt er gewacht met parsen van de HTML tot dat het script gedownload is en volledig gedraaid is. Dit doet de browser omdat Javascript de DOM of CSSOM kan bewerken. Daarom wacht het totdat het script klaar is en gaat daarna pas verder.​​

Bij async wordt het downloaden van het script parallel aan het parsen van de HTML gedaan, op het moment dat het script volledig is ingeladen wordt het parsen gepauzeerd, dan wordt het script geraaid en vervolgens wordt het parsen afgerond.​​

Bij defer wordt downloaden van het script ook parallel aan het parsen van de html gedaan, alleen wordt er script uitgevoerd na dat het parsen van de html is afgerond. ​

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Wanneer gebruik je async?

A

Als het script modulair is en niet afhankelijk is van andere scripts, gebruik dan async.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Wanneer gebruik je defer?

A

Als het script afhankelijk is van, of een afhankelijkheid is van een ander script, gebruik dan defer.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Wanneer maakt je geen gebruik van defer of async?

A

Als het script klein is en wordt gebruikt door een async-script, gebruik dan een inline script zonder attributen die boven de async-scripts zijn geplaatst.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

De form tag, waarmee een formulier kan worden weergegeven, bestaat uit een aantal attributen. Wat doet de action attribuut?

A

Verwijst naar de url waarnaar de data wordt verstuurd

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

De form tag, waarmee een formulier kan worden weergegeven, bestaat uit een aantal attributen. Wat doet de method attribuut?

A

Omschrijft de HTTP methode die voor het versturen gebruikt wordt

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

De form tag, waarmee een formulier kan worden weergegeven, bestaat uit een aantal attributen. Wat doet de enctype attribuut?

A

Geeft aan hoe de browser de data uit het formulier encodeert

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

Wat is de fieldset tag?

​
  ​
      ...​
  ​
  ...
  ​
A

Om het formulier in logische onderdelen te verdelen. Dit maakt het voor de gebruiker duidelijker en verbeterd de toegankelijk van het formulier.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

Wat is het verschil tussen select en datalist?

A

Datalist is een uitbreiding op het input element en het resultaat lijkt enigszins op select, hier worden de voorgedefinieerde opties echter als suggestie gebruikt, de gebruiker heeft ook de mogelijkheid zelf iets in te vullen.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

Wat is de output element?

voorbeeld:

​
​
​

<p>​

​
​
0​
</p>

A

Output is een semantisch correcte manier om resultaten op basis van invoer van gebruiker te laten zien.​ Attributen:

  • name: Naam waarnaar gerefereerd kan worden binnen het formulier (bv. via een Javascript API)​
  • for: Hierin kunnen name waarden van form controls worden gespecificeerd waarop het resultaat is gebaseerd.​​

n.b: De data in een output element zal nooit onderdeel zijn van de formdata tijdens het submitten.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

Het button element is qua functionaliteit hetzelfde als input type=“button”. De standaard weergave van de elementen zijn op de meeste platforms hetzelfde.​​

Waarom zou je button gebruiken ipv input type=”button”?

A

Button is gemakkelijker te customizen: een button element kan naast tekst namelijk ook HTML bevatten (bijvoorbeeld een plaatje/icon).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

Welke form validatie attributen zijn er?

A
  • Required​
  • Pattern​
  • Minlength​
  • Maxlength​
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

Wanneer worden de standaard validatieberichten van de browser pas zichtbaar voor de gebruiker?

A

De standaard validatieberichten van de browser worden echter pas zichtbaar bij een submit (echter voordat het submit event wordt gegooid).

32
Q

Hoe kan je de standaard validatie mechanisme op een formulier uitzetten?

A

De standaard validatie mechanisme kan worden uitgezet door het novalidate attribuut te zetten op het formulier.

33
Q

Welke input types hebben ingebouwde validatieregels?

A
  • input type=“email”​

- input type=“url”​

34
Q

De ingebouwde browservalidatie zal niet in alle gevallen voldoen. Hoe kunnen we de validatie naar eigen wens aanpassen, bijvoorbeeld valideren op elk moment?

A

Door gebruik te maken van de constraint validation API in Javascript.

35
Q

Wat is ARIA?

A

ARIA is een set aan attributen die gebruikt worden om je web applicatie gebruiksvriendelijker te maken voor bijvoorbeeld blinden en slecht zienden.

36
Q

Wat zijn de regels van ARIA?

A
  • Gebruik semantische elementen boven ARIA
  • Geef elementen met bestaande semantiek geen andere ARIA-role​
  • Alle interactieve ARIA controls moeten te gebruiken zijn met het toetsenbord​
  • Gebruik geen role=”presentation” of aria-hidden=”true” op elementen die zichtbaar en te focussen zijn​
  • Alle interactieve ARIA controls moeten een accessible name hebben
37
Q

Wat doet de Role attribuut? (ARIA)

A

Met role=“” kan aangegeven worden wat het doel van een element zonder inherente semantiek​. Mogelijke waarden zijn o.a:​

  • menuitem​
  • alert​
  • tooltip​
  • cell
38
Q

Wat is CSS?

A

CSS staat voor Cascading Stylesheet en wordt gebruikt om de styling voor een HTML document extern op te slaan.

39
Q

Wat is het voordeel van het extern opslaan van HTML styling?

A

Een van de voordelen van het extern opslaan van styling, is de mogelijkheid om deze op meerdere elementen, documenten of applicaties toe te passen.

40
Q

Wat houdt de term cascading in, in CSS?

A

De term cascading geeft aan dat de stijl van elementen overerving vertoont: elk element neemt de stijl van zijn parent-element over, tenzij er een eigen stijl voor dat element gegeven is.

41
Q

Wat is CSS Specifity?

A

Met specificity wordt bedoeld hoe specifiek een selector is. Als er meerdere selectors van toepassing zijn, is de meest specifieke het belangrijkste. Specificity wordt berekend door middel van de volgende forumule: start met 0, een style attribuut is plus 100, plus 100 voor ieder ID, plus 10 for ieder attribuut of pseudo-class en plus 1 voor iedere element naam of pseudo-element.

42
Q

Wat is de CSS architectuur richtlijn BEM?

A

BEM heeft als doel om ontwikkelaars beter de relatie tussen hun HTML en CSS te laten begrijpen.​ Wanneer je BEM gebruikt, gebruik je geen geneste selectors. Ook selecteer je niet op basis van elementen, maar krijgt alles een eigen class. BEM staat staat voor Block Element Modifier en bestaat uit een set aan regels. Deze regels geven aan welke naam je CSS classes moet geven om naming conflicts te voorkomen.

43
Q

Welke voordelen hebben BEM naamconventies?

A
  • ze communiceren het doel en functie van een class
  • ​ ze communiceren de component structuur
  • er wordt gebruik gemaakt van consistente lage specificity voor selectors
44
Q

Wat zijn gelijkenissen tussen Java en JavaScript?

A
  • Object-georiënteerd: Beide talen maken gebruik van objecten, maar ook bijvoorbeeld polymorfisme en overerving.
  • Syntax: Veel van de syntax tussen Java en Javascript lijkt op elkaar.
  • Naamconventies: Zijn onderling ook veelal gelijk.
45
Q

Wat zijn verschillen tussen Java en JavaScript?

A
  • General purpose vs. Scripting: Java kan op meerdere vlakken worden ingezet, waar Javascript vooral als scriptingtaal voor web is bedoeld.
  • Compiled vs. Interpreted: Java moet gecompileerd worden voordat het uitgevoerd kan worden, terwijl Javascript interpreted is.
  • Static vs. Dynamic Type Checking: Java gebruikt static type checking, waardoor type fouten vooraf optreden. Javascript doet dit dynamisch, waardoor dit tijdens runtime pas optreedt.
  • Class vs. Prototype Based: Java maakt objecten op basis van klassen, Javascript doet dit met prototyping.
46
Q

Wat is het verschil tussen een statement en een expression?

A

Een statement is een stuk code dat een actie aanroept of iets uitvoert. Een expression daarentegen, evalueert een value. Dat wil zeggen dat er na de expressie een waarde wordt teruggegeven.

47
Q

Wat is static typing?

A

Variablen zijn van één type dat niet te veranderen is.

48
Q

Wat is dynamic typing?

A

Variablen kunnen later nog een ander type aannemen.

49
Q

Wat is weak typing?

A

Meer impliciete typeconversies.

50
Q

Wat is strong typing?

A

Meer expliciete typeconversies.

51
Q

Welke primitive types heeft JavaScript?

A
  • String
  • Number
  • Boolean
  • undefined
  • null
  • Symbol (nieuw in ES6)
52
Q

Wat is CORS?

A

CORS, Cross-Origin Resource Sharing, is een mechanisme om te bepalen of een server wel of niet aangeroepen mag worden vanaf de huidige website.

53
Q

Wanneer een stuk JavaScript een HTTP-call wilt uitvoeren, controleert de browser eerst of de server deze call wel accepteert. Welke twee manieren zijn er om CORS te controleren?

A
  • Simpele Ajax request en controleren op CORS-headers in repsonse.
  • Preflight request: een OPTIONS request sturen voor het daadwerkelijke request.
54
Q

Welke headers horen er bij CORS request headers?

A
  • Origin
  • Access-Control-Request-Method
  • Access-Control-Request-Headers
55
Q

Welke headers horen er bij CORS response headers?

A
  • Access-Control-Allow-Origin
  • Access-Control-Allow-Credentials
  • Access-Control-Expose-Headers
  • Access-Control-Max-Age
  • Access-Control-Allow-Methods
  • Access-Control-Allow-Headers
56
Q

Wat is TypeScript?

A

TypeScript is een open-source programmeertaal ontwikkeld en onderhouden door Microsoft. Het is een op JavaScript-gebaseerde programmeertaal die transpiled naar JavaScript-code.

TypeScript is een strikte syntactische superset van JavaScript wat ook statische typering aan de taal toevoegd. J

57
Q

Wat is Node.js

A

Node.js is een server-side implementatie van Javascript. Hiermee is het mogelijk om lokale applicaties te maken met JS.

58
Q

Met welke version manager kan Node.js geinstalleerd worden?

A

nvm (Node Version Manager)

59
Q

Node.js gebruikt een standaard voor versionering. Hoe is de volgende versie opgedeeld?

4.13.7-alpha.1+meta

A 
4 = major
13 = minor
7 = patch
alpha.1 = pre-release
\+meta = metadata
60
Q

Wat is Package Lock?

A

Ook is er het concept van Package Lock. Voor npm is dit package-lock.json en voor yarn is dit yarn.lock. In deze bestanden kunnen packages worden opgegeven welke daadwerkelijke versies zijn binnengehaald en geïnstalleerd. Dit is vooral nuttig wanneer in de package.json geen specifieke versies zijn gedefinieerd, maar je wel wil weten welke specifieke versie je gebruikt.

61
Q

Wat is Node Modules?

A

Uiteindelijk worden de packages binnengehaald naar de map node_modules. Hiervoor gebruikt je het commando npm install, en deze zal alle (onderliggende) dependencies binnen halen. Deze map wordt echter heel snel heel groot, dus let goed op wanneer je welke package gebruikt en of dit daadwerkelijk nodig is.

62
Q

Wat maakt functions speciaal in JavaScript ten opzichte van Java?

A
  • Functions zijn objecten

- Functions zijn first class objects/citizens

63
Q

Er zijn vier manieren om een functie in JavaScript te definiëren. Wat zijn deze manieren?

A 
- Function-klasse
new Function('a', 'b', 'return a + b')
- Statements
function funcStatement(a, b) { }
- Expressies
var funcExpression = function namedFuncExpression(a, b) {}

of

var funcExpression = function (a, b) {}

  • Immediately invoked function expression (IIFE)
    (function () { }())
64
Q

Wat is Hoisting in JavaScript?

A

Hoisting is JavaScript’s default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function).

example:

x = 5; // Assign 5 to x
log(x);
var x; // Declare x

65
Q

Wat is Context in JavaScript?

A

De context is wat anders dan de scope en verwijst naar het object waar een functie aan toebehoort.

Je kunt de huidige context van een functie opvragen met het keyword this.

66
Q

Wat is Binding in JavaScript?

A

Het is ook mogelijk om een functie expliciet aan een context te koppelen (binden). Dit kun je doen met de functie bind die je op iedere functie kunt aanroepen. Als argument kun je vervolgens het object meegeven wat je als context wilt koppelen.

67
Q

Hoe werkt overerving in JavaScript?

A

JavaScript kent maar één constructie op het gebied van overerving: Objecten. Elk object heeft een private property met daarin een verwijzing naar een ander object, zijn zogenaamde prototype. Dit object heeft zelf ook weer een prototype, etcetera. Een object kan ook null als prototype hebben en is dus het einde van een prototype chain.

68
Q

Wat is de output?

const b = { x: 5 }
const o = Object.create(b)
console.log(o.x, b.x)
o.x = 6
console.log(o.x, b.x)
A

5, 5
6, 5

o overerft de waarde x van b, maar overschrijft deze met de x = 6 assignment. de x in b blijft onaangetast.

69
Q

How can you see if the object bar extends the object foo?

A

foo.isPrototypeOf(bar) // true if bar ‘extends’ foo

70
Q

JavaScript kent geen interrupts. Wat houd dit in?

A

Als je bijvoorbeeld bezig bent met een zware computatie die twee minuten duurt, dan kan JavaScript gedurende die twee minuten niks anders doen. Events, network-calls, etc worden allemaal op de queue geplaatst en zijn pas aan de beurt zodra de computatie klaar is.

71
Q

JavaScript is single-threaded en kan daarmee maar één stuk code tegelijk uitvoeren. Hoe gaat JavaScript om met asynchroniteit?

A

Met callbacks.

72
Q

Hoe kan het probleem van callback hell worden opgelost?

A

Door gebruik te maken van promises.

73
Q

Wat is een Promise?

A

Dit is een object die het makkelijker maakt om callbacks te registreren. Hier kunnen namelijk twee callback op worden geregistreerd, de resolve en reject. Resolve wordt aangeroepen bij een succesvol afgeronde callback en de reject bij een gefaalde promise.

74
Q

Wat is ES6?

A

ES6 (ECMA Script 6) is een Javascript standaard uit 2015 waarin een aantal features zijn toegevoegd.

75
Q

Welke twee nieuwe variable typen zijn geïntroduceerd met ES6?

A

let en const

Eerstgenoemde duidt op een lokale variable en de ander op een lokale constante. Beide zijn block-scoped.

JMC (11 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions