Hur skapar jag flashcards från mina anteckningar?

I Quiz Genius laddar du upp en bild av dina anteckningar, en PDF eller klistrar in text. AI:n analyserar innehållet och genererar en komplett uppsättning flashcards på några sekunder. Du kan sedan redigera, ta bort eller lägga till kort innan du börjar plugga.

Vad är spaced repetition, och hur använder Quiz Genius det?

Spaced repetition är en studiemetod som schemalägger repetitioner med ökande intervall. Quiz Genius håller reda på vilka flashcards du känner till och vilka du missar, och visar sedan svaga kort oftare så att du minns mer på kortare tid.

Kan AI:n skapa quiz från min lärobok eller föreläsningsbilder?

Ja. Ladda upp en bild, PDF eller text från valfri källa och Quiz Genius genererar automatiskt flervalsfrågor, sant/falskt-frågor och skriftliga frågor. Du kan köra dem som ett övningsquiz eller ett tidsbestämt prov.

Är Quiz Genius gratis?

Quiz Genius är gratis att ladda ner och använda på både iOS och Android. Ett premiumabonnemang finns tillgängligt med fler funktioner.

Vilka plattformar stöder Quiz Genius?

Quiz Genius finns tillgängligt på iOS (iPhone och iPad) från App Store och på Android från Google Play. Appen fungerar offline när dina studieset har laddats ner.

Hur fungerar provläget i Quiz Genius?

Provläget låter dig göra ett tidsbestämt test från valfritt studieset. Du svarar på frågor under tidspress och får sedan en detaljerad poängsammanställning och en lista över alla frågor du svarade fel på, så att du vet exakt vad du behöver repetera.

CSS står för 'Cascading Style Sheets' och är en standard för att styla webbplatser.

Vad händer om CSS-regeln 'color: blue;' tillämpas på en -tagg?

Regeln 'color: blue;' gör att texten i -taggen blir blå.

frontend komponenter sammanfattning

En sammanfattning av frontend komponenter som är viktiga för webbprogrammering på universitetsnivå. Frågor och svar om centrala begrepp och tekniker.

LeoA9·48 flashcards·48 frågor

universitetcomputer_scienceweb

Kan

1 / 48

Övar

Framsida

Vad är en komponent?

Tryck för att vända

Baksida

En komponent är en återanvändbar enhet inom frontend som innehåller HTML, CSS och JavaScript.

Tryck för att vända

Kan

Övar fortfarande

Quiz(48 frågor)

Fråga 1 av 48

1. Vad står CSS för?

Begrepp i det här studiesetet(48)

Grundläggande Frontend Komponenter(16)

Vad är en komponent?

En komponent är en återanvändbar enhet inom frontend som innehåller HTML, CSS och JavaScript.

Vad används en knappkomponent till?

En knappkomponent används för att utlösa åtgärder när användaren klickar på den, exempelvis skicka formulär.

True or False: Komponenter kan ha interna tillstånd.

True. Komponenter kan hantera eget tillstånd för att styra deras beteende och rendering.

Vad är skillnaden mellan state och props?

State är internt för en komponent, medan props är externa och skickas ner från föräldern.

Fyll i det tomma: En __________ är en struktur som representerar komponentens layout.

HTML-struktur.

Vad är syftet med en formulärkomponent?

Att samla in och validera användardata innan den skickas till servern.

Ge ett exempel på en visningskomponent.

En komponent som bara renderar data, exempelvis en lista med produkter utan interaktivitet.

Vad gör en navigationskomponent?

Den möjliggör användarnavigering genom olika sidor eller vyer i applikationen.

Vad är en högre ordning komponent?

En komponent som tar andra komponenter som argument och returnerar en ny komponent.

True or False: Komponenter kan inte ha livscykelmetoder.

False. Komponenter kan ha livscykelmetoder för att hantera uppdateringar och rendering.

Vad är en CSS-modul?

CSS-moduler är lokalt scoping för stilregler, vilket förhindrar stilkollisioner mellan komponenter.

Vad är en lista komponent?

Den används för att rendera upprepade element baserat på en datakälla, exempelvis en array.

Nämn ett användningsområde för en kortkomponent.

Att visa sammanfattad information som bilder, rubriker och beskrivningar i ett enhetligt format.

Vad gör en modalkomponent?

Den visar innehåll i ett överlägg ovanpå huvudgränssnittet för att fånga användarens uppmärksamhet.

Ge ett exempel på en interaktiv komponent.

En komponent som tillåter användare att välja datum i en kalender.

Vad är en fallback-komponent?

En komponent som visas när huvudkomponenten inte kan laddas eller renderas, ofta med ett felmeddelande.

CSS och Styling(12)

Vad är CSS?

CSS står för Cascading Style Sheets och används för att styla och layouta webbplatser.

Vad gör en CSS-klass?

En CSS-klass applicerar stil på HTML-element med samma klassnamn, t.ex. .exempel { color: red; }.

True or False: CSS kan endast appliceras på HTML.

True. CSS används främst för att styla HTML-element.

Hur tillämpar du en extern CSS-fil?

Jämför inline CSS och extern CSS.

Inline CSS är styrt direkt i HTML-elementet. Extern CSS är separat och återanvänds.

Fyll i luckan: För att centrera text i CSS, använd ______.

text-align: center;

Vad är en CSS-selector?

En CSS-selector identifierar vilket HTML-element som ska stylas, t.ex. element, klass, eller ID.

Orsak → Effekt: Vad sker om du använder 'float: left;'?

Elementet flyttas till vänster, vilket kan påverka layouten av andra element.

Ge ett exempel på en CSS-mediaquery.

@media (max-width: 600px) { body { background-color: lightblue; } }

Vad betyder 'box model' i CSS?

Box modellen beskriver hur marginaler, gränser, padding och innehåll interagerar med varandra.

Vad gör 'z-index'?

'z-index' bestämmer staplingsordningen av element, högre värden täcker lägre.

Vad är skillnaden mellan 'margin' och 'padding'?

Margin är utrymmet utanför ett element, medan padding är utrymmet inuti ett element.

JavaScript och Interaktivitet(12)

Vad är DOM?

Document Object Model (DOM) är en programmeringsgränssnitt som representerar dokumentets struktur i ett trädformat format. Det gör att JavaScript kan manipulera HTML och XML-dokument.

True or False: JavaScript kan inte manipulera DOM.

False. JavaScript kan manipulera DOM och ändra innehållet, stilen och strukturen på webbsidan dynamiskt.

Hur kan man dölja ett element med JavaScript?

Använd följande kod: ```javascript document.getElementById('elementId').style.display = 'none'; ```

Vad är event bubbling?

Event bubbling är när ett event som inträffar på ett barn-element först propagaterar uppåt till dess förälder-element, vilket gör att föräldern också kan reagera på eventet.

Vad används 'addEventListener' för?

'addEventListener' används för att registrera en händelsebehandlare för ett specifikt event på ett element. Det möjliggör flera händelsehanterare för samma event.

Fyll i blank: 'JavaScript kan skapa ________ för att förnya en webbsida utan att ladda om den.'

Asynkrona förfrågningar (AJAX) gör att JavaScript kan hämta data och uppdatera webbsidan utan att ladda om den.

Skillnad mellan 'onclick' och 'addEventListener'?

'onclick' kan endast registrera en händelsehanterare, medan 'addEventListener' kan registrera flera hanterare för samma händelse.

Vad gör funktionen 'preventDefault()'?

Funktionen 'preventDefault()' förhindrar standardåtgärden för en händelse, som att förhindra en länk från att navigera.

Vad är en closure?

En closure är en funktion som har tillgång till sina egna variabler, de yttre variablerna från sin omgivning och globala variabler. Detta gör det möjligt att skapa privata variabler.

Ge ett exempel på en callback-funktion.

Exempel: ```javascript function fetchData(callback) { // hämta data callback(data); } ```

True or False: 'let' och 'const' är funktioner i JavaScript.

False. 'let' och 'const' är deklarationer för variabler, inte funktioner.

Vad gör 'this' i JavaScript?

'this' refererar till det aktuella objektet i kontexten där det används. Dess värde kan förändras beroende på hur funktionen anropas.

Verktyg och Ramverk(8)

Vad är React?

Ett populärt JavaScript-bibliotek för att bygga användargränssnitt. - Komponentbaserat - Effektiv uppdatering av DOM - Stort ekosystem

Vad används Angular till?

Ett ramverk för att bygga dynamiska webbsidor. - Tvåvägs datbindning - Moduler - Tjänster och beroendeinjektion

Är Vue.js ett ramverk eller bibliotek?

Vue.js är ett progressivt ramverk för att bygga användargränssnitt. Det är flexibelt och kan integreras med andra projekt.

Skillnaden mellan Bootstrap och Tailwind CSS?

Bootstrap är ett CSS-ramverk med färdiga komponenter. Tailwind CSS är ett utility-first ramverk som erbjuder anpassning.

Fyll i blank: jQuery används för ______.

att förenkla DOM-manipulation och hantering av händelser.

Vad är ett SPA?

Single Page Application (SPA) är en webbapplikation som laddar en enda HTML-sida och uppdaterar innehållet dynamiskt.

Är Svelte ett kompilat eller ett ramverk?

Svelte är ett kompilat som översätter komponenter till effektiv JavaScript-kod, vilket ger snabbare prestanda.

Exempel på verktyg för frontend-utveckling?

- Webpack: modulbundlare - Babel: JavaScript kompilator - ESLint: kodkvalitetsverktyg

Frågor i det här studiesetet(48)

1. Vad står CSS för?

A.Cascading Style Sheets

B.Cascading Script Sheets

C.Computer Style Sheets

D.Creative Style Sheets

2. Vad är en frontendkomponent?

A.En återanvändbar enhet som samlar HTML, CSS och JavaScript.

B.En serverbaserad enhet för att hantera databaser.

C.En typ av backend-funktion för att bearbeta användarinformation.

D.En stilguide för att designa webbplatser.

3. Vad är syftet med Document Object Model (DOM)?

A.Att representera och manipulera dokumentets struktur i ett trädformat.

B.Att optimera prestandan av JavaScript-kod.

C.Att hantera serverkommunikation.

D.Att definiera CSS-regler.

4. Vad beskriver bäst syftet med React?

A.Ett bibliotek för att bygga användargränssnitt med komponenter.

B.Ett ramverk för server-side rendering.

C.Ett verktyg för databasinteraktion.

D.En designmetod för responsiva webbplatser.

5. Vilken av följande är en giltig klassselektor i CSS?

A..klassnamn

B.#klassnamn

C.klassnamn

D.klass-namn

6. Vad gör en knappkomponent?

A.Den visar statistik till användaren.

B.Den utlöser åtgärder när användaren interagerar med den.

C.Den laddar data från servern.

D.Den formaterar text på sidan.

7. Vilket av följande påståenden är sant angående 'addEventListener'?

A.Det kan registrera flera händelsehanterare för samma event.

B.Det kan endast registrera en händelsehanterare.

C.Det används för att dölja HTML-element.

D.Det är en funktion för att skapa variabler.

8. Vilken teknik används av Angular för att synkronisera modell och vy?

A.Tvåvägs datbindning.

B.Enkel datbindning.

C.REST API-anrop.

D.Observer pattern.

9. Vad gör 'display: none;' med ett element?

A.Elementet visas inte

B.Elementet visas som en block

C.Elementet visas som en rad

D.Elementet visas med transparens

10. Sant eller falskt: Komponenter kan ha interna tillstånd.

A.Sant

B.Falskt

C.Bara i vissa programmeringsspråk

D.Bara om de är högre ordning komponenter

11. Vad gör funktionen 'preventDefault()'?

A.Förhindrar standardåtgärden för en händelse.

B.Registrerar en ny händelse.

C.Skapar ett nytt DOM-element.

D.Tar bort en händelsehanterare.

12. Vilket av följande är INTE en egenskap hos Vue.js?

A.Progressivt ramverk.

B.Kan integreras med andra projekt.

C.Endast server-side rendering.

D.Reaktiv datamodellering.

13. Vad händer om CSS-regeln 'color: blue;' tillämpas på en <p>-tagg?

A.Texten blir blå

B.Bakgrunden blir blå

C.Texten blir svart

D.Inga förändringar görs

14. Vad är skillnaden mellan state och props?

A.State är internt, medan props är externa.

B.State kan inte ändras, medan props kan.

C.Props representerar användarinteraktion, medan state inte gör det.

D.State och props är samma sak.

15. Vad innebär event bubbling?

A.Att ett event först fångas av det innersta elementet och sedan propagaterar uppåt.

B.Att ett event omedelbart försvinner.

C.Att alla händelser utförs samtidigt.

D.Att ett event inte kan registreras.

16. Vad är en huvudskillnad mellan Bootstrap och Tailwind CSS?

A.Bootstrap levererar färdiga UI-komponenter, medan Tailwind CSS är utility-first.

B.Tailwind CSS använder färdiga komponenter, medan Bootstrap är utility-first.

C.Bootstrap är helt beroende av JavaScript, medan Tailwind CSS inte är det.

D.Tailwind CSS är ett bibliotek, medan Bootstrap är ett ramverk.

17. Vilken egenskap används för att styra avståndet mellan element?

A.margin

B.spacing

C.padding

D.border

18. Fyll i det tomma: En __________ representerar komponentens layout.

A.HTML-struktur

B.CSS-stil

C.JavaScript-logik

D.API-anrop

19. Vilken av följande är en korrekt användning av 'this' i JavaScript?

A.Refererar till det aktuella objektet i den aktuella kontexten.

B.Är alltid global.

C.Är alltid 'undefined'.

D.Refererar enbart till fönstret.

20. Vad används jQuery främst till?

A.DOM-manipulation och händelsehantering.

B.Server-side rendering.

C.Databasinteraktion.

D.Skapa grafiska användargränssnitt.

21. Vilken av följande metoder är INTE en typ av CSS-integration?

A.Inline

B.Extern

C.Intern

D.Kombinerad

22. Vad är syftet med en formulärkomponent?

A.Att rendera visuell information.

B.Att möjliggöra användardatahantering och validering.

C.Att styra navigering mellan sidor.

D.Att animera övergångar.

23. Vilket av följande är inte en korrekt definition av en closure?

A.En funktion med tillgång till sina egna och yttre variabler.

B.En funktion som inte kan fånga variabler.

C.En funktion som kan returnera andra funktioner.

D.En funktion som skapas inom en annan funktion.

24. Vad är en typisk egenskap hos en Single Page Application (SPA)?

A.Laddar en enda HTML-sida och uppdaterar innehållet dynamiskt.

B.Använder flera HTML-sidor för varje vy.

C.Är alltid en desktop-applikation.

D.Kräver ständig serveranslutning.

25. Vad gör 'position: absolute;'?

A.Elementet positioneras relativt sitt föräldraelement

B.Elementet positioneras relativt till dokumentet

C.Elementet blir statiskt

D.Elementet flyter med texten

26. Ge ett exempel på en visningskomponent.

A.En komponent som visar en lista med produkter.

B.En komponent som samlar in användarens e-postadress.

C.En komponent som navigerar mellan sidor.

D.En komponent som hanterar användarens autentisering.

27. Hur kan man dölja ett HTML-element med JavaScript?

A.Genom att sätta display-stilen till 'none'.

B.Genom att ta bort elementet från DOM.

C.Genom att byta dess klass.

D.Genom att lägga till en händelsehanterare.

28. Är Svelte ett ramverk eller ett kompilat?

A.Ett kompilat som översätter komponenter till JavaScript.

B.Ett ramverk för server-side rendering.

C.Ett bibliotek för UI-design.

D.Ett verktyg för testning av användargränssnitt.

29. Vad innebär 'flexbox' i CSS?

A.Ett sätt att skapa flytande kolumner

B.Ett effektivt sätt att layouta och styla element

C.En typ av CSS-animation

D.Ett sätt att styla text

30. Vad gör en navigationskomponent?

A.Den visar data i tabeller.

B.Den tillåter användare att navigera mellan olika sidor.

C.Den validerar användarens input.

D.Den hanterar komponenters livscykel.

31. Vad är en callback-funktion?

A.En funktion som skickas som argument till en annan funktion.

B.En funktion som aldrig anropas.

C.En funktion som används för att skapa nya variabler.

D.En funktion som returnerar ett värde.

32. Vilket av följande är ett verktyg för modulbundling inom frontend-utveckling?

A.Webpack.

B.Babel.

C.ESLint.

D.jQuery.

33. Vilken av följande värden kan 'z-index' inte ta?

A.Positiva heltal

B.Negativa heltal

C.Decimals

D.Textsträngar

34. Vad är en högre ordning komponent?

A.En komponent som hanterar API-anrop.

B.En komponent som tar andra komponenter som argument.

C.En komponent som renderar barnkomponenter.

D.En komponent som styr stilregler.

35. Vilket påstående är falskt angående 'let' och 'const'?

A.'let' och 'const' används för att deklarera variabler.

B.'const' kan ändras efter deklaration.

C.'let' tillåter block-scoping.

D.'const' skapar konstant variabler.

36. Vad gör en CSS-mediaquery?

A.Anpassar stilar efter enhetens skärmstorlek

B.Ändrar färger på hover

C.Definierar variabler

D.Skapar animationer

37. Sant eller falskt: Komponenter kan inte ha livscykelmetoder.

A.Sant

B.Falskt

C.Bara för visningskomponenter

D.Bara för formulärkomponenter

38. Vilket av följande alternativ beskriver asynkrona förfrågningar (AJAX)?

A.Möjliggör att hämta data utan att ladda om webbsidan.

B.Förbättrar hastigheten på serverkommunikation.

C.Använder endast synkrona metoder.

D.Skapar nya DOM-element.

39. Hur kan du ändra bakgrundsfärgen på ett element i CSS?

A.background-color: red;

B.bgcolor: red;

C.color: red;

D.background: red;

40. Vad är en CSS-modul?

A.En typ av JavaScript-bibliotek.

B.En metod för att organisera CSS-regler med lokalt scoping.

C.En komponent som renderar CSS.

D.En teknik för att optimera bilder.

41. Vad sker när en funktion anropas med en annan kontext i JavaScript?

A.'this' refererar till det objekt som funktionen anropas med.

B.'this' förblir alltid konstant.

C.'this' är alltid samma som globalt objekt.

D.'this' kan aldrig ändras.

42. Vad är skillnaden mellan 'padding' och 'border'?

A.Padding är innanför gränsen, medan border är själva gränsen

B.De är samma sak

C.Padding är utanför gränsen, medan border är innanför

D.Border används för textformattering

43. Vad är en lista komponent?

A.En komponent som skapar knappar.

B.En komponent som renderar upprepade element från en datakälla.

C.En komponent för att navigera mellan sidor.

D.En komponent som visar felmeddelanden.

44. Vilken av följande funktioner används för att registrera en händelsehanterare för flera händelser på ett element?

A.addEventListener

B.onclick

C.removeEventListener

D.setAttribute

45. Nämn ett användningsområde för en kortkomponent.

A.Att visa detaljerad information om produkter.

B.Att sammanfatta information i ett enhetligt format.

C.Att navigera mellan olika sidor.

D.Att visa användarens inloggningsstatus.

46. Vad gör en modalkomponent?

A.Den renderar bakgrundsanimationer.

B.Den visar innehåll i ett överlägg för användarinteraktion.

C.Den hanterar användardata.

D.Den skapar knappar för navigering.

47. Ge ett exempel på en interaktiv komponent.

A.En komponent som visar text.

B.En komponent som låter användare välja ett datum.

C.En komponent för att rendera bilder.

D.En komponent som listar statiska element.

48. Vad är en fallback-komponent?

A.En komponent som lastar externa resurser.

B.En komponent som visas om huvudkomponenten inte kan laddas.

C.En komponent som renderar animationer.

D.En komponent som samlar in användardata.

Relaterade studieset

DatavetenskapWeb

Skapa ditt eget studieset

Ladda upp en PDF, klistra in dina anteckningar eller beskriv ett ämne – AI genererar flashcards, quiz och mer på några sekunder.

Prova gratis Ladda ner appen

frontend komponenter sammanfattning

Quiz(48 frågor)

Begrepp i det här studiesetet(48)

Grundläggande Frontend Komponenter(16)

CSS och Styling(12)

JavaScript och Interaktivitet(12)

Verktyg och Ramverk(8)

Frågor i det här studiesetet(48)

Relaterade studieset

Wiederholung: Browser lädt eine Seite

Wiederholung: HTML CSS JavaScript Rollen

JavaScript DOM and events notes

REST APIs and HTTP methods exam review

How a browser loads a page

HTML vs CSS vs JavaScript step by step

What a URL is

Test: Was eine URL ist

Skapa ditt eget studieset