Komponentdriven webbdesign

Instuderingsfrågor

• Hur många sätt finns det att deklarera variabler i JavaScript och vilka är de?
  Det finns tre sätt att deklarera variabler i JavaScript: automatiskt, med var, med let och med const.
• Vad är en identifierare i JavaScript och vilka regler gäller för att namnge dem?
  En identifierare är ett unikt namn som används för att identifiera variabler. Reglerna för att namnge dem är att de kan innehålla bokstäver, siffror, understreck och dollartecken, måste börja med en bokstav, $ eller _ , är skiftlägeskänsliga och kan inte vara reserverade ord.
• Vad är skillnaden mellan en variabel deklarerad med const och en med let
  En variabel deklarerad med const kan inte ändras efter att den har tilldelats ett värde, medan en variabel deklarerad med let kan ändras.
• Hur definieras en JavaScript-funktion?
  En JavaScript-funktion definieras med nyckelordet function, följt av ett funktionsnamn och parenteser () samt {} för funktionens kropp med
• Vad är skillnaden mellan funktionsparametrar och funktionsargument?
  Funktionsparametrar är de namn som anges i funktionsdefinitionen inom parenteserna, medan funktionsargument är de värden som skickas med till funktionen när den anropas.
• Vad händer när JavaScript når ett return-uttalande i en funktion?
  När JavaScript når ett return-uttalande, slutar funktionen att exekvera och returnerar ett värde till den kod som anropade funktionen.
• Vad är Bootstrap?
  Bootstrap är ett gratis front-end ramverk för snabbare och enklare webbutveckling. Det inkluderar HTML- och CSS-baserade designmallar för typografi, formulär, knappar, tabeller, navigation, modaler, bildkaruseller och mycket mer, samt valfria JavaScript-plugins.
• Vilka är de två huvudsakliga container-klasserna i Bootstrap 5?
  De två huvudsakliga container-klasserna är .container, som ger en responsiv fast bredd container, och .container-fluid, som ger en fullbredd container som sträcker sig över hela visningsportens bredd.
• Vad är en fördel med att använda Bootstrap 5 från en CDN?
  En fördel med att använda Bootstrap 5 från en CDN är att många användare redan har laddat ner Bootstrap 5 från jsDelivr när de besöker en annan webbplats. Som ett resultat kommer det att laddas från cache när de besöker din webbplats, vilket leder till snabbare laddningstid.
• Hur skapar man randiga rader i en tabell med Bootstrap 5? Hur lägger man till en hovringseffekt på tabellrader i Bootstrap 5? Hur gör man en tabell mindre i Bootstrap 5?
  .table-striped för att lägga till zebra-ränder i en tabell. .table-hover för att lägga till en hovringseffekt (grå bakgrundsfärg) på tabellrader. .table-sm för att göra tabellen mindre genom att halvera cellens padding.
• Hur gör man en tabell responsiv i Bootstrap 5?
  .table-responsive för att lägga till en scrollbar till tabellen när det behövs (när den är för stor horisontellt).
• Vad är Bootstrap 5:s grid-system byggt med?
  Bootstrap 5:s grid-system är byggt med flexbox och tillåter upp till 12 kolumner över sidan.
• Hur kan man gruppera kolumner i Bootstrap 5:s grid-system?
  Om man inte vill använda alla 12 kolumner individuellt kan man gruppera kolumnerna tillsammans för att skapa bredare kolumner, till exempel: span 4 och span 8, eller span 4 och span 6 och span 2 med flera varianter. Viktig att de blir 12 tillsammans kolumnerna
• Vilka är de sex grid-klasserna i Bootstrap 5?
  De sex grid-klasserna är: 1) .col- (extra små enheter - skärmbredd mindre än 576px) 2) .col-sm- (små enheter - skärmbredd lika med eller större än 576px) 3) .col-md- (medelstora enheter - skärmbredd lika med eller större än 768px) 4) .col-lg- (stora enheter - skärmbredd lika med eller större än 992px) 5) .col-xl- (extra stora enheter - skärmbredd lika med eller större än 1200px) 6) .col-xxl- (xx-stora enheter - skärmbredd lika med eller större än 1400px)
• Vad är skillnaden mellan att använda specifika kolumnklasser i bootstrap jämfört med att låta Bootstrap hantera layouten automatiskt?
  Om man använder specifika kolumnklasser, kontrollerar man kolumnbredden och hur de ska visas på olika enheter. Om man låter Bootstrap hantera layouten automatiskt, skapar man lika breda kolumner:
• Hur kan man kontrollera hur många kolumner som ska visas bredvid varandra med Bootstrap 5?
  Man kan kontrollera hur många kolumner som ska visas bredvid varandra med .row-cols-*-klasserna. Tex class='row row-cols-3' skapar tre kolumner

Instuderingsfrågor

Instuderingsfrågor

Instuderingsfrågor

Instuderingsfrågor

• What is the purpose of Web Components?
  The purpose of Web Components is to provide a standardized way to create reusable, encapsulated, and modular components in web development. These components are self-contained, meaning they include their own HTML, CSS, and JavaScript, and can be easily reused across different projects and pages without worrying about conflicts with other parts of the codebase.
• Why is reusing custom markup structures traditionally difficult?
  Traditional HTML, CSS, and JavaScript don't naturally provide a way to encapsulate and isolate components. This means that when you reuse a custom markup structure, there is a risk of styles or scripts conflicting with other parts of the page. For example, CSS selectors can accidentally apply styles to unintended elements, and JavaScript can inadvertently modify or interfere with other scripts or parts of the DOM.
• What are the three main technologies that Web Components consist of?
  1 Custom Elements: Define custom HTML elements with their own behavior. 2 Shadow DOM: Encapsulates styles and structure to prevent conflicts with the rest of the page. 3 HTML Templates: Define reusable, non-rendered HTML structures and slots for content insertion.
• What do Custom Elements enable developers to do?
  Developers can create their own custom HTML tags (elements) with unique names and behaviors. This means that the logic, styles, and behavior of the component are self-contained, making it easier to manage and reuse across different parts of an application or even in different projects.
• What is the Shadow DOM used for in Web Components?
  Encapsulation of Styles and Markup: Styles and markup defined within the Shadow DOM are scoped to that component only. This means that styles applied inside the Shadow DOM will not leak out and affect the global styles of the web page. Avoiding Naming Conflicts: By encapsulating the component's DOM, the Shadow DOM prevents naming conflicts. For example, if you have CSS classes or IDs inside the Shadow DOM, they won't clash with other elements in the main document. Maintaining Component Integrity: The Shadow DOM keeps the internal structure of a component hidden from the outside world. This ensures that the component's internal workings remain intact, even if the external environment changes. Creating Reusable Components: Because the Shadow DOM provides isolation, you can create reusable components without worrying about their internal styles or structure conflicting with other parts of the application.
• What is the first step in creating a web component?
  This involves creating a new class that extends from HTMLElement (or another built-in element like HTMLButtonElement), and then associating this class with a new custom tag name using the customElements.define() method.
• How do you register a new custom element?
  You register a new custom element using the CustomElementRegistry.define() method.
• What method is used to attach a shadow DOM to a custom element?
  The Element.attachShadow() method is used to attach a shadow DOM to a custom element.
• How do you define a custom element named my-custom-element?
  You define it using customElements.define('my-custom-element', MyCustomElement).
• Which lifecycle callback is called each time the custom element is added to the document?
  The connectedCallback() method is called.

Instuderingsfrågor

Instuderingsfrågor