Achtung: Ich schreibe hier lediglich Notizen rein, die Seite ist im Aufbau.

Basics

"use strict";

let city = "Frankfurt"; // direkte Initialisierung
let age; //Deklarieren
age = 33; //Initialisieren

console.log(city)
console.log(age)

Variablen

Deklarieren & Initialisieren

let city = "Frankfurt"; // direkte Initialisierung
let age; //Deklarieren
age = 33; //Initialisieren

Variablen benennen

Variablen kennst du bereits aus anderen Programmiersprachen, ansonsten schaue dir den Python-Kurs an. Ähnliche Regeln gelten auch bei JavaScript (JS). Beachte folgende Regeln.

// Regel 1: Keine Leerzeichen
let mein name = "Ahmet"; //nicht erlaubt

// Regel 2: Nur Buchstaben und Zahlen
let name! = "Murat"; //nicht erlaubt

// Regel 3: Erstes Zeichen immer ein Buchstabe
let 1mensch = "Layla"; //nicht erlaubt
let mensch1 = "Layla"; //erlaubt

// Regel 4: Groß- und Kleinschreibung erlaubt, die Benennung ist aber case-sensitive Name ≠ name !!!
let halim; 
let Halim;
// halim und Halim sind zwei verschiedene Variablen.

// Regel 5: Umlaute umschreiben
// Regel 6: bei zweiteiligen Variablennamen CamelCase oder Unterstriche (einzig erlaubtes Sonderzeichen) verwenden
// Regel 7: Reservierte Schlüsselwörter nicht erlaubt, Beispiel: let
let meineVariable = "Meine Variable"; //ein erlaubter Variablenname

Primitive Datentypen

"use strict";

// strings
let name = "Ahmet";
let name2 = 'Murat'; // äquivalent zu oben

// numbers
let alter = 33;
let height = 1.82;

// booleans
let i_like_bananas = true;
let i_like_cinnamon = false;

Werte ändern

"use strict";

let best_friend = "Murat"; //set
best_friend = "Layla"; //change

console.log(best_friend)

"use strict";

const best_friend = "Murat"; //set directly, constants must be initialized immediately
best_friend = "Layla"; //change not possible! --> constant variable!


console.log(best_friend)

Basics 2

Benutzereingaben mit prompt

"use strict";

let name = prompt("Wie ist dein Name?", "Peter Parker"); //message, default answer

//important: prompts stop code execution until they get a value

// scenarios for interaction
// no entry: empty string
// cancel: null


console.log(name)

Kommentare

// single line comment

/*
multiline
comment
*/

/*
* variant of
* multiline 
* comment
*/

Logische und numerische Operatoren

Mathematische Operationen

// math operations

let a = 3;
let b = 2;

console.log(a + b);
console.log(a - b);
console.log(a * b); // multiply
console.log(a / b); // division
console.log(a % b); // modulo

Konkatenieren & mehrzeilige Strings

//concatenate
let vorname = "Ahmet";
let nachname = "Camuka";
let alter = 33;

let name = vorname + " " + nachname + " " + alter;

console.log(name);

let multiline_string = "start here " +
    "go on in next line with plus";

console.log(multiline_string);

Vergleichsoperatoren

== // equal
< // smaller
> // greater
<= // smaller or equal
>= // greater or equal
!= // inequal

Logische Operatoren

&& // and
|| // or

console.log(4 > 3 && 5 < 2) // false
console.log(4 > 3 && 5 < 12) // true

// combination
console.log(4 > 3 && 5 < 12) // true

// still true, because && binds stronger than ||, so this is evaluated first
console.log(4 < 3 && 5 > 12 || 2 < 3)

// brackets decide chronology 
console.log(4 < 3 && (5 > 12 || 2 < 3))

Template-Strings

let first_name = 'Ahmet';
let last_name = 'Camuka';

let text = `Hello ${first_name} ${last_name}!`
console.log(text);


let multiline_text = `Hello ${first_name} ${last_name}!
How are you doing?
Is it fun learning JS?`
console.log(multiline_text);

let multi_to_single_line_text =
    `Hello ${first_name} ${last_name}!`+
    `How are you doing? Is it fun learning JS?`
console.log(multi_to_single_line_text);

Grundkonzepte

Grundlagen wie Kontrollstrukturen, Schleifen etc. werden hier bisher nicht behandelt. Bis auf etwas Syntax sind die Ansätze sehr ähnlich zu anderen Programmiersprachen. Notation in JS gleichen mehr JAVA (hat “nichts” mit JavaScript zu tun!) als Python.

Wichtige Konzepte

Gültigkeitsbereiche

"use strict";

/*
The Scope of a function defines where it can be accessed or referenced to!
The blocks define the scope. vars are only rerenceable within a block at the same level or levels beneath it.
*/

let var_1 = "var 1";

const my_func = function() {
    let var_2 = "var 2";

    if (true) {
        let var_3 = "var 3";
        console.log(var_1);
        console.log(var_2);
        console.log(var_3);
    }

    console.log(var_1);
    console.log(var_2);
    //console.log(var_3);
};

my_func();

console.log(var_1);
//console.log(var_2);
//console.log(var_3);

if (true) {
    let var_4 = "var 4";
    //console.log(var_2);
}

Hosting und var-Deklarationen

Hier schreibe ich keine ausführlichen Beispiele. Merke nur, dass du nicht var verwenden solltest, um Variablen zu deklarieren und bei Funktionen entscheide wie hier beschrieben:

const guteFunktion = function () {
    console.log("That is the way. With const you can ensure that one can not change your function");
};

/*In some cases it may be helpful to declare your function with let. This way your function can be overwritten!*/

const okFunktion = function () {
    console.log("That is the way. With const you can ensure that one can not change your function");
};

function schlechteFunktion() {
    console.log("Do not use this implicit variant! Because this is the same as using var and hoisting which comes with it");
}

DOM (Document Object Model)

Das DOM-Api ermöglicht die Manipulation von HTML-Dateien durch JS-Code.

Link zum Wiki-Artikel: https://de.wikipedia.org/wiki/Document_Object_Model

Link zum Manual: https://developer.mozilla.org/en-US/docs/Web/API/Document

Selektoren: ID und Klassen

// console.log(document);
// console.log(document.head);
// console.log(document.body);
// console.log(document.location); // u.a. href --> aktuelle URL
// document.location.href = 'https://camuka.de'; // Weiterleitung

let el_by_id_1 = document.getElementById("navigation"); // single element, because id is unique
console.log(el_by_id_1);

let els_by_class_1 = document.getElementsByClassName("jumbotron"); // multiple elements --> html-collection (similar to an array, a list with all elements)
console.log(els_by_class_1);

let els_by_tag_1 = document.getElementsByTagName("p");
console.log(els_by_tag_1);

Selektoren: CSS-Query-Selector

"use strict";

let qs_1 = document.querySelector("body > #navigation > ul"); // parameters are css-selectors!
console.log(qs_1);

let qs_2 = document.querySelector(".jumbotron"); // gets only one (first) element
console.log(qs_2);
// this query selectors only return first element that fits the search query!

// NOTE!
    // null if nothing found
    // syntactic invalid selectors --> error (dom exception), e.g. document.querySelector("65!")

let qa_1 = document.querySelectorAll("body > #navigation > ul"); // has all elements that fit the query --> NodeList, similar to HTML-Collection or array
console.log(qa_1);

let qa_2 = document.querySelectorAll(".jumbotron");
console.log(qa_2)

let qa_3 = document.querySelectorAll("#navigation > ul > li");
console.log(qa_3)
console.log(qa_3.length); // get number of elements
console.log(qa_3[0]); // get 0th element
console.log(qa_3[1]); // get 1st element

Beispiel

HTML-Collection

Durchlaufe die Elemente mit Schleifen, da HTML-Collections keine foreach-Methode haben:

"use strict";

let html_coll1 = document.getElementsByClassName("jumbotron");
let html_coll2 = document.getElementsByTagName("p");


// simple for-loop
for (let i = 0; i < html_coll1.length; i++) {
    console.log(html_coll1[i]);
}

for (let i = 0; i < html_coll2.length; i++) {
    console.log(html_coll2[i]);
}

// forof-loop: iterate through all elements
for (let e1Element of html_coll1) { 
    console.log(e1Element);
}

Query-Selector im Detail: forEach-Methode

Query-Selektoren werden eingebauter Methoden gerne und häufiger verwendet. Das macht das Selektieren einfacher.

Im Zweifelsfall Browser-Kompatibilität prüfen (Beispiel): In diesem Fall (2023) sind alle relevanten Browser kompatibel.

let node_list1 = document.querySelectorAll("p");
node_list1.forEach(function (e){ // Call-Back-Function
    console.log(e);
});

HTML-Elemente wählen: Navigation durch die DOM

Tipp: Firefox und Chrome liefern im Vergleich zu Safari und Edge(?) bessere Entwickler-Tools, um beispielsweise Console-Logs genauer zu untersuchen. Unter anderem werden auch die Attribute der DOM-Objekte angezeigt. Im Zweifelsfall hilft hier auch die MDN-Seite: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement

"use strict";


// Kind-Elemente auswählen
let ul = document.querySelector("#navigation > ul");
let first_child = ul.firstChild; // erstes Kind-Element INKLUSIVE Text und Kommentar
let first_child_el = ul.firstElementChild; // erstes Kind-Element EXKLUSIVE Text und Kommentar
let last_child_el = ul.lastElementChild; // erstes Kind-Element EXKLUSIVE Text und Kommentar

// Geschwister-Elemente auswählen

let next_sib = ul.nextSibling; // Nächstes Geschwister-Element inklusive Text und Kommentar
let prev_sib = ul.previousSibling; // Vorheriges Geschwister-Element inklusive Text und Kommentar

// Method-Chaining, um Elemente von Elementen auszuwählen
// Nächstes Geschwister-Element exklusive Text und Kommentar DES ersten Kind-Elementes ohne Text u Kommentar
let next_el_sib = ul.firstElementChild.nextElementSibling;
// Vorheriges Geschwister-Element exklusive Text und Kommentar DES ersten Kind-Elementes ohne Text u Kommentar
let prev_el_sib = ul.lastElementChild.previousElementSibling;

// Eltern-Elemente
let parent_el = ul.parentElement;

/*  Navigation  */
let anchor = ul.querySelectorAll("li > a");


/*  Alle Logs   */
// console.log(first_child);
// console.log(first_child_el);
// console.log(last_child_el);
// console.log(next_sib);
// console.log(prev_sib);
// console.log(next_el_sib);
// console.log(prev_el_sib);
console.log(parent_el);
console.log(anchor);

Attribute, Elemente und Textknoten erstellen

"use strict";

// Element erstellen
let div = document.createElement("div");

// Attribut erstellen
let attr = document.createAttribute("id");

// Werte übergeben | umständliche Variante
attr.value = "new_id";

// Attribut einem Element hinzufügen
div.setAttributeNode(attr);

// KÜRZER: Attribut erstellen und direkt Element hinzufügen
div.setAttribute("class", "new_class");

// Text Node erstellen, Hinzufügen wird unten behandelt
let text = document.createTextNode("Irgendein random Text bla haha.");

// Logs
console.log(div);
console.log(text);

Elemente erstellen und Attribute hinzufügen

Neues Element erstellen

• Beim Anhängen wird das Element immer als letztes eingefügt.
• Falls das gleiche Element irgendwo im Elternelement bereits existiert, wird es ersetzt und an das Ende verschoben.

let div = document.createElement("div");    // create element
div.setAttribute("id", "my_id");    // set attribute
div.setAttribute("class", "my_class");  // set attribute
let text = document.createTextNode("Nietzsche: Fast überall wo es Glück giebt, giebt es Freude am Unsinn.");    // create text node
div.appendChild(text); // append text

Vorhandenes Element ändern

In diesem Beispiel wird einem vorhandenen Element ein text hinzugefügt.

// add text to an existing element
let jumbo = document.querySelector(".jumbotron > section");
jumbo.appendChild(div); // appendChild() checks if element already exists. If so, it will be replaced and inserted as last element.
div.appendChild(text);

// resort existing elements with appendChild() method
let li_el = document.querySelector("#navigation > ul > li");
// document.querySelector("#navigation > ul").appendChild(li_el); // direct way

// more readable way
let ul = document.querySelector("#navigation > ul");
ul.appendChild(li_el);

to be continued …

Events & Event-Listener

Es gibt mehr als 20 verschiedene Event-Arten. Die wichtigsten sind folgende:

• Maus-Events: Klicks (links/rechts/(mittig)), Scrollen
• Tastatur-Events: Bestimmte Tasten
• Formular-Events: absenden, füllen etc.
• Veränderung-Events: Elemente werden geändert
• Window-Events: Änderung des Fensters

Übersicht: https://developer.mozilla.org/en-US/docs/Web/API/Event

Grundlagen

Es wird pro EventListener immer ein passendes Event-Objekt ausgewählt, welches die Events speichert.

Simple Beispiele

"use strict";

let jumbo = document.querySelector(".jumbotron");

jumbo.addEventListener("click", function (e) { // the function uses the event object e
    console.log(e);
    console.log(e.clientX);
    console.log(e.clientY); //
    console.log(e.target); // element that is clicked
    // console.log(e.target.remove()); // remove element that is clicked
});

jumbo.addEventListener("dblclick", function (e) {
    console.log("Doppelklick");
});

Mouse-Events

let jumbo = document.querySelector(".jumbotron");

jumbo.addEventListener("click", function (e) { // the function uses the event object e
    console.log(e);
    console.log(e.clientX);
    console.log(e.clientY); //
});

jumbo.addEventListener("mousedown", function (e) {
    console.log("mouse down");
});

jumbo.addEventListener("mouseup", function (e) {
    console.log("mouse up");
});

jumbo.addEventListener("mouseover", function (e) {
    console.log("mouse over");
});

jumbo.addEventListener("mouseout", function (e) {
    console.log("mouse out");
});

let jumbo = document.querySelector(".jumbotron");

jumbo.addEventListener("click", function (e) { // the function uses the event object e
    console.log(e);
    console.log(e.clientX);
    console.log(e.clientY); //
});

Phasen beim Triggern von Events

Beispiel-Code (CSS ist hier unwichtig):

"use strict";


let el_1 = document.querySelector("#navigation > ul > li:nth-of-type(1) > a");
let el_1_parent = el_1.parentElement;
let el_2 = document.querySelector("#navigation > ul > li:nth-of-type(2) > a");
let el_2_parent = el_2.parentElement;

el_1.addEventListener("click", function (e) {
    e.preventDefault(); // standard action (in this case anchor will not open the link to the website) of this element is prevented
    // instead the following is done
    console.log("el_1 triggered");
});
/*use cases of preventDefault(): e.g. check form before sending */

el_2.addEventListener("click", function (e) {
    e.stopPropagation(); // prevents bubbling phase: other events are not triggered
    console.log("el_2 triggered");
});
/* stopPropagation() should only be used when needed not always */



el_1_parent.addEventListener("click", function (e) {
    console.log("el_1_parent triggered");
});
el_2_parent.addEventListener("click", function (e) {
    console.log("el_2_parent triggered");
});

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <link rel="stylesheet" href="styles.css">

</head>
<body>
<nav id="navigation">
    <ul>
        <li><a href="https://www.google.de/" target="_blank">prevent Default</a></li>
        <li><a href="https://www.google.de/" target="_blank">stop Propagation</a></li>
    </ul>
</nav>
<script src="main.js"></script>
</body>
</html>

Ebene 1

Ebene 2

Ebene 2