%Schriftgröße, Layout, Papierformat, Art des Dokumentes
\documentclass[10pt,oneside,a4paper]{scrartcl}

%Einstellungen der Seitenränder
\usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry}

%neue Rechtschreibung
\usepackage[ngerman]{babel}

%Umlaute ermöglichen
\usepackage[utf8]{inputenc}

%Gesamtseitenzahl
\usepackage{lastpage}

% Kopf- und Fußzeile
% Funktioniert nicht \usepackage[automark]{scrpage2}%
\usepackage[automark]{scrlayer-scrpage}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}

% Backticks
\usepackage{upquote}




%Kopfzeile
\ihead{Webentwicklung}
\chead{}
\ohead{http://kohnlehome.de/js/svelte-grundlagen.pdf}
\setheadsepline{0.5pt}

%Fußzeile
\setfootsepline{0.5pt}
\ifoot{Franz Kohnle}
\cfoot{Seite \thepage\ von  \pageref{LastPage}}
\ofoot{\today}

\pagestyle{scrheadings}

\begin{document}

% Überschrift 
\begin{center}
\LARGE % Schriftgröße
\bfseries % Fettdruck
\sffamily % Serifenlose Schrift
Svelte-Grundlagen
\end{center}


\section*{HTML}

\subsection*{Text}
\begin{verbatim}
{ textVariable }
\end{verbatim}

\subsection*{Attribut}
\begin{verbatim}
<span title={ titleVariable }> ... </span>
\end{verbatim}

\subsection*{Textfeld}
\begin{verbatim}
<input bind:value={ inputVariable }>
\end{verbatim}

\subsection*{Checkbox}
\begin{verbatim}
<input type="checkbox" bind:checked={ checkedVariable }>
\end{verbatim}

\subsection*{Radiobutton}
\begin{verbatim}
<input type="radio" value={option1} bind:group={ gruppenVariable }>
<input type="radio" value={option2} bind:group={ gruppenVariable }>
\end{verbatim}

\subsection*{Select}
\begin{verbatim}
<select bind:value={ selectVariable }>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
\end{verbatim}

\subsection*{Schleife}
\begin{verbatim}
<ul>
  {#each personen as person, index}
    <li> { index + 1 }: { person.vorname } </li>
  {/each}
</ul>
\end{verbatim}

\subsection*{Verzweigung}
\begin{verbatim}
{#if ifVariable}
  <p>Ja</p>
{:else}
  <p>Nein</p>
{/if}  
\end{verbatim}

\subsection*{Event}
\begin{verbatim}
<button on:click={ clickMethode }> ... </buttonon>
\end{verbatim}

\newpage

\section*{JavaScript}
\begin{verbatim}
<script>
    import { onMount } from 'svelte';

    let textVariable = 'Ich bin ein Text.';
    let titleVariable ='Das ist der Titel';
    let inputVariable = 'Das steht im Eingabefeld';
    let checkedVariable = true;
    let radioVariable = 'option1';
    let selectVariable = 'A';
    let ifVariable = true;
    let personen =  [
        { vorname: 'Anna' },
        { vorname: 'Berta' },
        { vorname: 'Carla' }
    ];        

    onMount( () => {
        console.log('Los gehts!');
    });
</script>
\end{verbatim}


\end{document}
