top home

JavaScript-Intro

Was ist JavaScript?

HTML: Struktur, Gerüst
CSS: Gestaltung, Einrichtung
Javascript: Verhalten, Interaktion

Ähnlich wie bei CSS gibt es verschiedene Möglichkeiten, Javascript einzubinden: direkt im HTML-Code, innerhalb eines <script></script> oder in einer einen eigenen Datei. Wir verwenden die letzte Möglichkeit. Dafür erstellen wir eine neue Datei script.js und verlinken die Datei am Ende unseres <body>-Elements. 


<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML Einführung</title>
    </head>    
<body>

<script src="js/script.js" type="text/javascript"></script>
</html>

In diese Datei können wir nun unseren Javascript-Code schreiben und er wird automatisch ausgeführt.

Download JavaScript-Starter

Logging

Es gibt verschiedene Möglichkeiten, mit Javascript Inhalte anzuzeigen.

Eine Möglichkeit ist, ein Pop-Up zu öffnen: window.alert('Hello World')

Eine andere Möglichkeit ist, die Entwickler-Console zu verwenden: console.log('Hello World'). Drücke Option + ⌘ + I (Mac) oder Srg + I (Windows) und klicke anschließend auf „Console“ um den Inhalt zu sehen.

HTML-Elemente auswählen

Zunächst müssen wir das Element finden und auswählen, welches wir manipuliern möchten

Es gibt verschiedenste Wege, das zu erreichen. Einige Beispiele:


Selector Beispiel Beschreibung 
document.getElementById('')
 
document.getElementById('first-paragraph')
 wählt das Element mit der ID first-paragraph 
document.querySelectorAll('.')
 
document.querySelectorAll('.circle')
 wählt die Elemente mit der Klasse circle aus 
document.querySelectorAll('')
 
document.querySelectorAll('div')
 wählt die Elemente mit div Tag

Weil es mehrere Elemente mit einer Klasse oder einem Tag geben kann, wählen die jeweiligen Selektoren eine Gruppe von Elementen aus.

HTML-Manipulation

Wir können ein HTML-Element auf verschiedene Arten Manipulieren:


Beispiel Beschreibung 
document.getElementById('first-paragraph').innerHTML = 'Hello World!'
 wählt das Element mit der ID first-paragraph aus und ändert den darinstehenden Text 
document.getElementById('first-paragraph').style.color = 'red'
 wählt das Element mit der ID first-paragraph aus und ändert die Schriftfarbe 
document.getElementById('first-paragraph').classList.add('highlighted')
 wählt das Element mit der ID first-paragraph aus und fügt deine Klasse hinzu 
document.getElementById('first-paragraph').classList.remove('highlighted')
 wählt das Element mit der ID first-paragraph aus und entfernt eine Klasse

Wenn ich Elemente über Klasse oder Tag auswähle und deshalb eine Gruppe von Elementen erhalte, müssen diese Elemente etwas anders angesprochen werden: 


document.querySelectorAll('paragraph').forEach((element) => {
    element.innerHTML = 'Hello World!'
})

Event-Listeners

Javascript „events“ sind Ereignisse, die auf einer Webseite passieren. Häufig hängen sie mit einer User-Interaktion zusammen. Wir können mit Javascript HTML-Manipulationen an diese Ereignisse koppeln.


event Beispiel Beschreibung
click 
window.addEventListener('click', () => {
    document.getElementById('first-paragraph').classList.add('highlighted')
})
wenn der User auf das Fenster klickt, erhält das Element eine neue Klasse
resize 
window.addEventListener('resize', () => {
    document.getElementById('first-paragraph').classList.add('highlighted')
})
wenn der User die Fenstergröße verändert, erhält das Element eine neue Klasse
scroll 
window.addEventListener('scroll', () => {
    document.getElementById('first-paragraph').classList.add('highlighted')
})
wenn der User scrollt, erhält das Element eine neue Klasse

Der Code kann auf Events reagieren, die das gesamte Browser-Fenster betreffen (wie ein Scroll im Fenster), oder auf Events, die nur ein einzelnes Element betrifft. So wird z.B. nur auf ein Klick auf einen button reagiert: 


document.getElementById('my-button').addEventListener('scroll', () => {

})

Ressourcen