%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
\usepackage[automark]{scrlayer-scrpage}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}

% Mehrere Spalten
\usepackage{multicol}

% UML-Diagramme
\usepackage{tikz-uml}


%Kopfzeile
\ihead{JavaScript}
\chead{}
\ohead{https://kohnlehome.de/js/html-javascript.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
  HTML und JavaScript
\end{center}

\section*{HTML}
\begin{verbatim}
<button id="buttonTuwas"> Tuwas </button>
\end{verbatim}

\section*{JavaScript}

\subsection*{JavaScript-Variablen für HTML-Elemente}
\begin{verbatim}
const buttonTuwas = document.querySelector('#buttonTuwas');
\end{verbatim}
  
  

\subsection*{Eigenschaften von HTML-Elementen (lesen / ändern)}
\subsubsection*{Text}
\begin{itemize}
  \item \texttt{innerHTML}
  \item \texttt{innerText}
  \item \texttt{textContent}   
\end{itemize}

\subsubsection*{Formularelemente}
\begin{itemize}  
  \item \texttt{value}
  \item \texttt{checked}  
\end{itemize}

\subsubsection*{Attribute}
\begin{itemize}
  \item z.B. \texttt{img.src} 
\end{itemize}

\subsubsection*{CSS}
\begin{itemize}  
  \item Klasse: \texttt{className}
  \item einzelne CSS-Eigenschafte: z.B. \texttt{div.style.color}  
\end{itemize}


\subsection*{Events}
\subsubsection*{Eventlistener registrieren}
\begin{verbatim}
buttonTuwas.addEventListener('click', nameDerFunktion);
\end{verbatim}

\subsubsection*{Events}
\begin{itemize}
  \item click
  \item input
  \item change
\end{itemize}


\end{document}
