JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

<h1 id="toc_0">JS 1-on-1</h1>

<h2 id="toc_1">Indholdsfortegnelse</h2>

<ol>
  <li><a href="#variabler">Variabler</a></li>
  <li><a href="#kommentarer">Kommentarer</a></li>
  <li><a href="#typer">Intro til typer</a></li>
  <li><a href="#if">If else statements — hurtig gennemgang conditional kode og tenary operation</a></li>
  <li><a href="#funktioner">Funktioner og data på typer — hvor kan man lære mere?</a></li>
  <li><a href="#dissektion">Dissektion af en komponent — hvordan er typerne blevet brugt, og hvilke funktioner på typerne er der brugt og hvorfor?</a></li>
  <li><a href="#vi-bygger">Vi bygger en slider fra bunden af i Vue</a></li>
</ol>

<p>
  <div id='variabler' />
</p>

<h2 id="toc_2">Variabler</h2>

<p>En variabel er noget man gemmer, og senere kan refererer til. En variabel er det mest grundlæggende i programmering.</p>

<p>I ES5, den gamle version af Javascript, som nok er det du har skrevet førhen, skulle alle variabler laves med keywordet &quot;var&quot;:</p>

<div>
  <pre><code class="language-javascript">var variabelNavn = 1; // En variabel med et tal</code></pre>
</div>

<p>I ES6 skal man nu tage stilling til om det er en konstant (noget der ikke ændrer sig), eller noget der kan ændre sig. En konstant hedder <code>const</code> og en variabel hedder <code>let</code>. Hvis man har en slider, som skal holde styr på <code>currentSlide</code>  som er det aktuelle slide man er på, så er det naturligvis en variabel, fordi den ændre sig. Men hvor mange slides der er i slideren, er gerne fast, eller konstant, så derfor en const.</p>

<div>
  <pre><code class="language-javascript">const slideCount = 3;
let currentSlide = 0;</code></pre>
</div>

<p>
  <div id='kommentarer' />
</p>

<h2 id="toc_3">Kommentarer</h2>

<p>Undervejs vil jeg skrive kommentarer rundt omkring i koden. Kommentarer bliver ignoreret af browseren.</p>

<p>Man kan skrive kommentarer på 2 måder i Javascript:</p>

<div>
  <pre><code class="language-javascript">// Denne her er til...

CSS

body {
  font-family: Helvetica, arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: white;
  padding: 30px; }

body > *:first-child {
  margin-top: 0 !important; }
body > *:last-child {
  margin-bottom: 0 !important; }

a {
  color: #4183C4; }
a.absent {
  color: #cc0000; }
a.anchor {
  display: block;
  padding-left: 30px;
  margin-left: -30px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 20px 0 10px;
  padding: 0;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  cursor: text;
  position: relative; }

h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
  background:...