Modul 294
Frontend einer interaktiven Webapplikation realisieren
02 - DOM-Manipulation
Loops, Conditionals and more
Lernziele dieser Lektion
- Kennen der Operatoren
- Verstehen und Anwenden von Loops
- Grundlegende DOM-Manipulationen umsetzen
Operatoren
JavaScript umfasst die meisten Arithmetischen Operatoren welche Sie bereits aus anderen Programmiersprachen kennnen sollten
| Zuweisungen | = |
const a = 10; |
| Additionen / Subtraktion | + - |
const b = a + 10; |
| Multiplikation / Division | * / |
const c = b * 3; |
| Potenzierung | ** |
const d = 3 ** 3; |
| Modulo | % |
const e = 10 % 2; |
Operatoren
Auch die logischen Vergleichsoperatoren sollten bekannt sein.
| Grösser als | > |
| Grösser-gleich als | >= |
| Kleiner als | < |
| Kleiner-gleich als | <= |
| Gleich | == |
| Gleicher Wert und Typ | === |
| Ungleich | != |
| Wert oder Typ ungleich | !== |
Conditionals
Um Konditionen zu prüfen und so den Fluss ihres Codes zu steuern verwenden wir if/else, switch oder ein ternary
If / Else
Das Vergleichen von Werten mit if/else verhält sich intuitiv wie in den meisten anderen Programmiersprachen.
const userAge = 10;
const isVerified = true;
if( userAge >= 18 && isVerified) {
alert("You are an adult");
} else if ( userAge >= 13 ) {
alert("You are a teenager");
} else {
alert("You are a kid");
}
Switch
Um grosse if/else-Blöcke leserlicher zu machen, verwenden wir switch
let fruit = "apple";
switch (fruit) {
case "apple":
console.log("You have chosen an apple.");
break;
case "orange":
console.log("You have chosen an orange.");
break;
default:
console.log("Unknown fruit.");
break;
}
Ternary
Ein short-hand für if/else. ? :
// condition ? expression1 : expression2
const user = {
name: "Müller",
gender: "female"
}
const salutation = user.gender == 'male' ? 'Mr.' : 'Mrs.';
console.log("Hello " + salutation + " " + user.name);
Arrays
Wesentliche Merkmale von JavaScript-Arrays:
- Elemente: Eine Liste von Werten.
- Ordnung: Elemente sind nach Index geordnet.
- Nullbasiert: Indexierung startet bei 0
- Dynamische Grösse: Kann sich laufend ändern
- Heterogen: Erlaubt unterschiedliche Datentypen
Arrays
Einige Beispiele für Arrays
// Normale Arrays
const numbers = [1, 2, 4, 8, 16, 32];
const words = ["a", "hello", "example"];
// Heterogenes Array
const heterogene = [1, "sample", true, 15, true];
Arrays
JavaScript bietet viele Methoden um mit Arrays zu arbeiten
const numbers = [1, 2, 4, 8, 16, 32];
// Auslesen eines Elementes
alert(numbers[2]);
// Zuweisung eines neuen Elements
numbers[0] = 4;
// Länge eines Arrays auslesen
console.log(numbers.length);
Loops
Um durch eine Liste von Daten zu iterieren nutzen wir Schleifen. Hierfür gibt es mehrere Möglichkeiten.
While-LoopFor-LoopFor-Each-Loop
While-Loop
const numbers = [1, 2, 4, 8, 16, 32];
let i = 0;
// Klassisch
while(i < numbers.length){
console.log(numbers[i]);
i++;
}
// Oder mit direktem Inkrement
while(i < numbers.length){
console.log(numbers[i++]);
}
For-Loop
const numbers = [1, 2, 4, 8, 16, 32];
for( let i = 0; i < numbers.length; i++ ){
console.log(numbers[i]);
}
For-Each-Loop
const numbers = [1, 2, 4, 8, 16, 32];
numbers.forEach( function(num) {
console.log( num );
});
DOM-Manipulation
getElementById,querySelectoroderquerySelectorAllselektieren Elemente- Existieren alle in der document-root (
document) querySelector[All]kann ausserdem auf allen anderen DOM-Elementen ausgeführt werden
DOM-Manipulation
<section id='cart'>
<p>Warenkorb<p>
<article>
<p>Dyson Staubsauger<p>
<span>CHF 199<span>
</article>
<article>
<p>Sennheiser Kopfhörer<p>
<span>CHF 325<span>
</article>
</section>
const wrapper = document.getElementById("cart");
const allArticles = wrapper.querySelectorAll("article");
const firstPrice = allArticles[0].querySelector("span");
DOM-Manipulation
- Die Elemente welche Sie aus diesen Methoden erhalten werden als
Nodesbezeichnet - Für JavaScript handelt es sich um einfache Objekte
(typeofbestätigt das) - Diese
Nodesbieten enorm viele Attribute - Die meisten werden selten bis nie genutzt
DOM-Manipulation
Einige der meist genutzten
Attribute/Methoden von Nodes
classList |
Ein Objekt welches alle Klassen des Elements beinhaltet |
innerHTML |
Der gesamte Inhalt des Elements |
getAttribute('attr') |
Gibt den Wert des Attributes des Elements zurück |
setAttribute('attr', 'val') |
Setzt ein Attribut auf einem Element |
style |
Objekt in dem Stylings definiert und ausgelesen werden können |
DOM-Manipulation
<h1 class='big important'>Mein Titel</h1>
const title = document.getElementById("myTitle");
title.classList //-> DOMTokenList [ "big", "important" ]
title.innerHTML = "Der Titel"; //-> 'Mein Titel' nun 'Der Titel'
title.setAttribute("title", "Das ist mein Titel");
title.getAttribute("title")) //-> "Das ist mein Titel";
title.style.backgroundColor = "#ccff00";
TL;DR
- Nutzen Sie if/else, switch oder turnary als conditionals
- Arrays sind heterogen und in ihrer Grösse flexibel
- Nutzen Sie while-, for- oder forEach-Loops um Schleifen zu programmieren
- Aus dem DOM-Selektierte Elemente nennt man Nodes
- Auf Nodes können viele Methoden genutzt und Attribute gesetzt werden