%Teilweise Erzeugt mit dem LaTeX-Generator: http://latex.sehnot.de

%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]{scrpage2}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}




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


\section{Einbinden in HTML}
\subsection*{Im Quellcode}
\texttt{<script> ... </script>}

\subsection*{In extra Datei}
\texttt{<script src='datei.js'></script>}



\section{Ausgabe}
\subsection*{Konsole}
Firefox: Extras $\rightarrow$ Web-Entwickler $\rightarrow$ Web-Konsole\\
\texttt{console.log('Text');}

\subsection*{Popup-Fenster}
\texttt{alert('Text');}

\subsection*{Im HTML-Dokument}
\texttt{document.write('Text');}



\section{Grundlegende Datentypen}
JavaScript verwendet dynamische Typisierung: Der Datentyp einer Variablen wird bei Wertzuweisung festgelegt und kann sich bei Zuweisung eines anderen Wertes ändern.

\subsection*{Datentyp ermitteln}
\texttt{typeof(variable)} oder \texttt{typeof variable} ergibt \texttt{undefined}, \texttt{string}, \texttt{number}, \texttt{boolean}, \texttt{function}, \texttt{object} oder \texttt{symbol}.

\subsection*{undefined}
\texttt{let irgendwas; //}
Variablen, denen noch kein Wert zugewiesen wurde, haben den Datentyp \texttt{undefined}.

\subsection*{string}
\texttt{let text = 'Hallo';}\\
Text kann in Single-Quotes \texttt{'Text'} oder Double-Quotes \texttt{"Text"} angegeben werden. Es gibt keinen speziellen Datentyp für einzelne Zeichen.
\subsubsection*{Template literals mit Backticks}
\texttt{let zahl = 3;}\\
\texttt{let text = \`\$\string{zahl\string} hoch 2 = \$\string{zahl * zahl\string}\` \ ;}


\subsection*{number}
\texttt{let ganzZahl = 17;}\\
\texttt{let kommaZahl = -13.5;}\\
\texttt{let hexZahl = 0xff; // 255}\\
\texttt{let keineZahl = "text" / 3; // NaN}\\
\texttt{let unendlich = 3 / 0;  // Infinity}\\
\texttt{let minusUnendlich = -3 / 0; // -Infinity}\\
Es gibt keinen speziellen Datentyp für ganze Zahlen.

\subsection*{boolean}
\begin{verbatim}
let ok = true;
let wahrheit = false;
\end{verbatim} 


\section{Umwandlung von Datentypen}
Die Konvertierung von Datentypen erfolgt in vielen Fällen automatisch. Bestimmte Umwandlungen sind aber explizit möglich:
\subsection*{string $\rightarrow$ number}
\begin{verbatim}
let zahl = Number('42');
\end{verbatim}

\subsection*{number $\rightarrow$ string}
\begin{verbatim}
let text = String(42);
\end{verbatim}


\section{String: Methoden und Eigenschaften}
\begin{verbatim}
let zeichen = 'Text'.charAt(1); // 'e'
let laenge = 'Text'.length; // 4
\end{verbatim}


\section{Math: Methoden und Eigenschaften}
\begin{verbatim}
let zufall = Math.random(); // 0.00 - 0.99
let abgerundet = Math.floor(3.5); // 3
let pi = Math.PI;
\end{verbatim}

\newpage
\section{Array []}
Ein Array ist ein Object und damit eine Liste aus Schlüssel-Wert-Paaren. Die Schlüssel sind normalerweise die Zahlen 0, 1, 2, ..., die Werte eines Arrays können von verschiedenen Datentypen sein.
Es ist möglich, assoziative Arrays mit anderen Schlüsseln als 0, 1, 2, ... zu erstellen. Für assoziative Arrays sollten aber besser reine Objects verwendet werden.

\subsection*{Beispiel}
\begin{tabular}{l | l}
Schlüssel & Wert\\ \hline\hline
\texttt{0} & \texttt{'Anna'}\\
\texttt{1} & \texttt{45}\\
\texttt{2} & \texttt{'Berta'}\\
\end{tabular}

\subsection*{erstellen}
\begin{verbatim}
let feld = [];
feld[0] = 'Anna';
feld[1] = 45;
feld[2] = 'Berta';
\end{verbatim}
oder
\begin{verbatim}
let feld = [ 'Anna', 45, 'Berta' ];
\end{verbatim}

\subsection*{Anzahl der Elemente}
\begin{verbatim}
let anzahl = feld.length; // 3
\end{verbatim}



\section{Function ()}
Eine JavaScript-Funktion ist ein Objekt und kann deshalb in einer Variablen gespeichert werden.
\subsection*{Definition}
\subsubsection*{Function Declaration}
\begin{verbatim}
function quadrat(zahl) {
    return zahl * zahl;
}
\end{verbatim}
oder
\subsubsection*{Function Expression}
\begin{verbatim}
let quadrat = function (zahl) {
    return zahl * zahl;
}
\end{verbatim}
oder
\subsubsection*{Arrow Functions}
\begin{verbatim}
let quadrat = (zahl) => zahl * zahl;
\end{verbatim}

\subsection*{Aufruf}
\begin{verbatim}
let ergebnis = quadrat(3);
\end{verbatim}


\section{Object \{\}}
Ein Objekt ist eine Liste aus Schlüssel-Wert-Paaren. Werte können auch Funktionen sein, dann werden sie Methoden genannt. Die Eigenschaften und Methoden von Objekten können auch zur Laufzeit hinzugefügt werden. 
\subsection*{Beispiel: Object 'hund'}
\begin{tabular}{l | l}
Schlüssel & Wert\\ \hline\hline
\texttt{name} & \texttt{'Bello'}\\
\texttt{alter} & \texttt{5}\\
\texttt{wirdaelter} & \texttt{function (jahre) \{ this.alter += jahre; \}}\\
\end{tabular}

\subsection*{einzelnes Objekt erstellen}
\begin{verbatim}
const hund = {};
hund.name = 'Bello';
hund.alter = 5;
hund.wirdaelter = function (jahre) {
    this.alter += jahre;
}
\end{verbatim}
oder
\begin{verbatim}
const hund = {
    name : 'Bello',
    alter : 5,
    wirdaelter : function (jahre) {
        this.alter += jahre;
    }
};
\end{verbatim}
oder
\begin{verbatim}
const hund = {
    name : 'Bello',
    alter : 5,
    wirdaelter(jahre) {
        this.alter += jahre;
    }
};
\end{verbatim}

\subsubsection*{Objekt verwenden}
\begin{verbatim}
hund.wirdaelter(3);
const alter = hund.alter; // 8
\end{verbatim}

\newpage

\section{Mehrere gleichartige Objekte erstellen}
\subsection*{mit Konstruktorfunktion}
Es gibt in JavaScript keine Klassen. Als Schablonen für Objekte dienen Konstruktoren. Die Namen von Konstruktoren sollten mit einem Großbuchstaben beginnen. 
\begin{verbatim}
function Hund(name, alter) {
    this.name = name;
    this.alter = alter;
    this.wirdaelter = function (jahre) {
        this.alter += jahre;
    };
}
\end{verbatim}

\subsection*{mit class}
\begin{verbatim}
class Hund {
    constructor(name, alter) {
        this.name = name;
        this.alter = alter;
    }    

    wirdAelter(jahre) {
        this.alter += jahre;
    }
}
\end{verbatim}

\subsection*{Objekte erstellen}
\begin{verbatim}
const hund1 = new Hund('Bello', 3);
const hund2 = new Hund('Hasso', 7);
\end{verbatim}

\section{Module}
JavaScript-Code kann auf mehrere Module (= Dateien) aufgeteilt werden.
\subsection*{beispiel.js}
\begin{verbatim}
export class Beispiel {
  ...
}
\end{verbatim}

\subsection*{datei.js}
\begin{verbatim}
import { Beispiel } from './beispiel.js';

const beispiel = new Beispiel();
\end{verbatim}

\subsection*{datei.html}
\begin{verbatim}
<script type="module" src="datei.js"></script>
\end{verbatim}

\end{document}
