Module 11: Frontend Flashcards

Question

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

Answer 1

Geeft aan hoe de browser de data uit het formulier encodeert

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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

Answer 6

- Required - Pattern - Minlength - Maxlength

Answer 7

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

Answer 8

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

Answer 9

- input type=“email” | - input type=“url”

Answer 10

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

Answer 11

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

Answer 12

- 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

Answer 13

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

Answer 14

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

Answer 15

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

Answer 16

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.

Answer 17

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.

Answer 18

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.

Answer 19

- ze communiceren het doel en functie van een class - ze communiceren de component structuur - er wordt gebruik gemaakt van consistente lage specificity voor selectors

Answer 20

- 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.

Answer 21

- 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.

Answer 22

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.

Answer 23

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

Answer 24

Variablen kunnen later nog een ander type aannemen.

Answer 25

Meer impliciete typeconversies.

Answer 26

Meer expliciete typeconversies.

Answer 27

- String - Number - Boolean - undefined - null - Symbol (nieuw in ES6)

Answer 28

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

Answer 29

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

Answer 30

- Origin - Access-Control-Request-Method - Access-Control-Request-Headers

Answer 31

- Access-Control-Allow-Origin - Access-Control-Allow-Credentials - Access-Control-Expose-Headers - Access-Control-Max-Age - Access-Control-Allow-Methods - Access-Control-Allow-Headers

Answer 32

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

Answer 33

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

Answer 34

nvm (Node Version Manager)

Answer 35

``` 4 = major 13 = minor 7 = patch alpha.1 = pre-release +meta = metadata ```

Answer 36

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.

Answer 37

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.

Answer 38

- Functions zijn objecten | - Functions zijn first class objects/citizens

Answer 39

``` - 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 () { }())

Answer 40

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

Answer 41

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.

Answer 42

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.

Answer 43

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.

Answer 44

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.

Answer 45

foo.isPrototypeOf(bar) // true if bar 'extends' foo

Answer 46

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.

Answer 47

Met callbacks.

Answer 48

Door gebruik te maken van promises.

Answer 49

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.

Answer 50

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

Answer 51

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

Module 11: Frontend Flashcards

(75 cards)