Inhalt

JavaScript und CSS

Die CSS-Eigenschaften von Elementen im HTML können einfach per JavaScript verändert werden.

Zugreifen auf Elemente und Verändern von CSS-Eigenschaften

<!-- HTML -->
<h1 id="headline">Styling mit JavaScript</h1>

/* JavaScript */
// 1. Auf die Überschrift zugreifen
let hl = document.getElementById("headline");

// 2. Aussehen verändern
hl.style.color = "blue";
hl.style.backgroundColor = "yellow";

Die CSS-Anweisungen werden dann per Inline-Style in das style-Attribut geschrieben und vom Browser sofort interpretiert und dargestellt:

<!-- HTML -->
<h1 id="headline" style="color:blue; background-color:yellow;">Styling mit JavaScript</h1>

CamelCased-Notation

Die Schreibweise der unterschiedlichen Eigenschaften (Attribute) unterscheidet sich von der Schreibweise in CSS.

Es werden die Bindestriche weggelassen und stattdessen die Anfangsbuchstaben danach groß geschrieben.

CSS-Schreibweise

 background-color

JavaScript-Schreibweise:

backgroundColor

Setzen von Styles mittels Klasse

Um das Aussehen von der Funktionalität trennen zu können, empfiehlt es sich Klassen in CSS zu definieren und diese per JavaScript zu setzen bzw. wieder zu nehmen.

/* CSS */
.active {
	color: red;
}

// JavaScript

// Klasse setzen
ele.classList.add ("active");

// Klasse wegnehmen
ele.classList.remove ("active");

Aufgabe 1 - Überschrift anpassen

Aufgabe Überschrift anpassen

Beispielhafte Umsetzung

Setzen von Styles

Es soll das Aussehen eines <h1>-Tags verändert werden.

Erweiterungen Styles

Aufgabe 2 - Tastatursteuerung

Aufgabe Tastatursteuerung Beispielhafte Umsetzung

Es soll die Position eines Elements mittels CSS-Anpassungen mit JavaScript verändert werden können.

// Event anlegen und auf den Tastendruck reagieren
document.addEventListener("keypress", function onPress(event) {
		console.log ( "Key:" + event.key );
});

Aufgabe 3 - Zusatz: Einfaches Game

Game Beispielhafte Umsetzung

Erweitere die Tastatursteuerung so, dass ein einfaches Spiel entsteht:

a. Spielfläche anlegen

Lege ein <div>-Element an, das das Spielfeld darstellt und passe das Aussehen per CSS an

Verwende globale Variablen, um die Spielfeldabmessungen festzulegen. Das Schlüsselwort const erzeugt eine Variable, die im Gegensatz zu let im Anschluss nicht mehr verändert werden darf.

const universWidth = 400;
const universHeight = 200;

b. Raumschiff per Tastensteuerung bewegen

Style das zu bewegende Objekt so, dass ein Raumschiff angezeigt wird.

Begrenze die Bewegung des Raumschiffs auf die Abmessungen der Spielfläche.

c. Asteroid

Füge ein weiteres <div>-Element ein und bewege es kontinuierlich mittels einer setIntervall()-Funktion.

d. Collision detection

Implementiere die Kollisionserkennung und starte das Spiel erneut, wenn eine Kollision auftritt.

e. Score und Highscore

Implementiere Score und Highscore und zeige sie am oberen Spielfeldrand an.

f. Beliebige weitere Erweiterungen

Ressourcen

JavaScript - Teil 1