JavaScript Cheat Sheet

Inhalt Elemente auswählen Elemente hinzufügen, ändern und löschen Events auslösen First Class Functions Objektorientiertes JavaScript Objekte modifizieren/a> This Allgemeines JavaScript lässt sich genau wie HTML und CSS direkt im Browser manipulieren. In Chrome geht das über die Developer Tools (F12) unter Console (Esc). Elemente auswählen Mit Javascript lassen sich einzelne HTML-Elemente einer Seite auswählen und …

Inhalt

  1. Elemente auswählen
  2. Elemente hinzufügen, ändern und löschen
  3. Events auslösen
  4. First Class Functions
  5. Objektorientiertes JavaScript

Allgemeines

JavaScript lässt sich genau wie HTML und CSS direkt im Browser manipulieren. In Chrome geht das über die Developer Tools (F12) unter Console (Esc).

Elemente auswählen

Mit Javascript lassen sich einzelne HTML-Elemente einer Seite auswählen und dann beliebig manipulieren, löschen etc.

Beispielcode:

<div id="wrapper">
  <h1 id="caption">Ich bin eine Überschrift</h1>
  <p class="paragraph">Dies ist ein Fließtext.</p>

  <input id="input-field" value="99">

  <ul class="argument-list">
    <li class="argument">Argument 1 <a href="link.html">mit einem Link</a></li>
    <li class="argument">Argument 2</li>
    <li class="argument">Argument 3</li>
  </ul>

  <p class="second-paragraph">Dies ist noch ein Fließtext.</p>
</div>

In diesem Code lassen sich die Element so auswählen und ausgeben:

document.getElementById('caption');
<h1 id="caption">Ich bin eine Überschrift</h1>

Gibt immer nur ein Element zurück. Das Element verfügt über eine einmalige ID.

const mainElement = document.getElementById('wrapper');
mainElement.querySelector('#caption');
<h1 id="caption">Ich bin eine Überschrift</h1>

Funktioniert genau wie das Beispiel oben, sucht allerdings nur nach dem Element in einem anderen Element und nicht im gesamten document.

document.querySelector('.argument');
<li class="argument">Argument 1</li>

Selektiert Elemente, die mehr als ein Mal vorkommen können, davon aber immer nur das erste.

document.querySelectorAll('.argument');
NodeList(3) [li.argument, li.argument, li.argument]
0:li.argument
1:li.argument
2:li.argument
length:3
__proto__:NodeList

Selektiert nicht nur das erste, sondern alle Element und gibt eine Node-Liste aus, über die man im Gegensatz zu getElementsByClassName und getElementsByTagName loopen kann:

const element = document.querySelectorAll('.argument');
for(let i = 0; i < element; i++){
    console.dir(element[i]);
}
document.getElementsByClassName('argument');
HTMLCollection(3) [li.argument, li.argument, li.argument]
0:li.argument
1:li.argument
2:li.argument
length:3
__proto__:HTMLCollection

Selektiert im Gegensatz zu querySelector alle Elemente und gibt sie als Liste aus.

document.getElementsByTagName('p');
HTMLCollection(2) [p.paragraph, p.second-paragraph]
0:p.paragraph
1:p.second-paragraph
length:2
__proto__:HTMLCollection

Gibt eine Liste aller vorkommenden Tags (und ihrer Klassen) aus.

document.querySelector('.argument').innerHTML;
"Argument 1 <a href="link.html">mit einem Link</a>"

Ausgewählt wurde das erste Listenelement mit der Klasse .argument. Alles, was sich innerhalb dieses Tags befindet, wird als String ausgegeben.

document.querySelector('.argument').outerHTML;
"<li class="argument">Argument 1 <a href="link.html">mit einem Link</a></li>"

Die Auswahl ist dieselbe wie beiinnerHTML, es wird allerdings auch der umschließende Tag mitgegeben.

document.querySelector('.argument').textContent;
"Argument 1 mit einem Link"

Gibt nur den Text innerhalb des Tags wieder und entfernt alle HTML-Tags innerhalb des Textes. (Wichtig: Übergibt man textContent, der HTML-Content enthält, wird dieser natürlich auch nur als String, nicht als HTML dargestellt!)

document.querySelector('.argument').innerText;
"<li class="argument">Argument 1 <a href="link.html">mit einem Link</a></li>"

InnerText funktioniert fast genauso wie textContent – mit einem Unterschied: Der Text wird bei innerText so ausgegeben, wie er durch das CSS gestyled wurde. Wird beispielsweise ein Teil des Textes auf display:none gesetzt, wird dieser mit innerText nicht ausgegeben.

document.querySelector('.argument-list').firstElementChild;
<li class="argument">
   "Argument 1 "
   <a href="link.html">mit einem Link</a>
</li>
document.getElementById('input-field').value;
"99"

Gibt nur den Value des Input-Feldes aus

document.querySelector('#input-field').className;

document.querySelector('#input-field').className.split(' ')
"super cool classnames"

(3) ["super", "cool", "classnames"]
0:"super"
1:"cool"
2:"classnames"
length:3
__proto__:Array(0)

Gibt die Klassennamen eines elements als String aus. Über Split kann daraus ein Array gemacht werden.

document.querySelector('#input-field').classList;
DOMTokenList(3) ["super", "cool", "classnames", value: "super cool classnames"]
0:"super"
1:"cool"
2:"classnames"
length:3
value:"super cool classnames"
__proto__:DOMTokenList

Möglich bei classList sind folgende Aktionen:

  • .add()
  • .remove()
  • .toggle()
  • .contains()

Elemente hinzufügen, ändern und löschen

Beispielcode:

<div id="wrapper">
  <h1 id="caption">Ich bin eine Überschrift</h1>
  <p class="paragraph">Dies ist ein Fließtext.</p>

  <input id="input-field" value="99">

  <ul class="argument-list">
    <li class="argument">Argument 1 <a href="link.html">mit einem Link</a></li>
    <li class="argument">Argument 2</li>
    <li class="argument">Argument 3</li>
  </ul>

  <p class="second-paragraph">Dies ist noch ein Fließtext.</p>
</div>

Hinzufügen

const newParagraph = document.createElement('p');
newParagraph.textContent = "ABCD";
document.querySelector('.paragraph').appendChild(newParagraph);
<p class="paragraph">Dies ist ein Fließtext.</p>
<p>ABCD</p> // neu hinzugefügt!

Ein Element wird mit createElement erstellt, mit textContent mit Inhalt gefüllt und mit appendChild hinter dem ersten p-Tag eingefügt.

const mainHeading = document.querySelector('#caption');
const textToAdd = '<h2>Unterüberschrift</h2>';

mainHeading.insertAdjacentHTML('afterend', textToAdd);

Mit insertAdjacentHTML lassen sich Element und Inhalt flexibler als mit appendChild hinzufügen. Es gibt vier verschiedenen Parameter, die gesetzt werden können:

  • beforebegin: vor dem h2-Tag
  • afterbegin: nach dem h2-Tag
  • beforeend: vor dem /h2-Tag
  • afterend: nach dem /h2-Tag

Verändern

document.querySelector('h1').style.color = 'red';
document.querySelector('h1').style.textDecoration = 'underline';
<h1 id="caption" style="color: red; text-decoration: underline;">Ich bin eine Überschrift</h1>

Über style kann das Styling verändert werden (nur ein Wert pro Aufruf).

document.querySelector('h1').style.cssText = 'color: red; text-decoration: underline;';
<h1 id="caption" style="color: red; text-decoration: underline;">Ich bin eine Überschrift</h1>

Mit cssText dagegen können mehrere Werte pro Aufruf verändert werden. Während oben für Werte wie text-decoration die lowerCamelCase-Schreibvariante verwendet wird, kann man hier die aus CSS gewohnte Schreibweise nutzen.

document.querySelector('h1').setAttribute('id', 'new-caption');
document.querySelector('h1').setAttribute('style', 'new-style');
<h1 id="caption">Ich bin eine Überschrift</h1>  // vorher
<h1 id="new-caption" class="new-style">Ich bin eine Überschrift</h1>  // nachher 

Entfernen

const firstElement = document.querySelector('.argument-list').firstElementChild;
document.querySelector('.argument-list').removeChild(firstElement);

Zunächst wird das erste Unterelement der Liste ausgewählt und anschließend entfernt. Einfacher geht es aber so:

const firstElement = document.querySelector('.argument');
document.querySelector('.argument').parentElement.removeChild(firstElement);

Erst wird das zu entfernende Element direkt ausgewählt und dann direkt entfernt. Und am einfachsten geht es so:

document.querySelector('.argument').remove();

Events

Eine Liste mit allen verfügbaren Events gibt es auf der Seite von Mozilla. Events können in den Developer Tools (in Chrome) untersucht werden, indem ein Element ausgewählt wird. Unter Event Listeners findet man alle vorhandenen Events.

document.querySelector('h1').addEventListener('click', function () {
  console.log('The heading was clicked!');
});

Fügt der Konsole „The heading was clicked hinzu“, sobald die H1 angeklickt wird.

function headingClickFunction() {
console.log('The heading was clicked');
}

document.querySelector('h1').addEventListener('click', headingClickFunction);
document.querySelector('h1').removeEventListener('click', headingClickFunction);

Entfernt einen hinzugefügten EventListener. Wichtig dabei: Beide Aktionen, sowohl add als auch remove müssen auf dieselbe Funktion verweisen.

First Class Functions

Funktionen in JavaScript sind First-Class-Funktionen. Das bedeutet:

1. Sie können in Variablen gespeichert werden:

const variable = myFunction();

2. Sie können von einer anderen Funktion zurückgegeben werden:

const higherOrderFunction = function () {
    return function () {
        return 8;
    }
}

3. Sie können als Argument an eine andere Funktion übergeben werden.

Eine Funktion, die an eine andere Funktion übergeben wird, nennt man Callback Function. Die Funktion, die die Callback Function ausführt, heißt Higher-Order Function.

Objektorientiertes JavaScript

Literal notation – empfohlen:

const myObject = {};

Constructor function:

const myObject = new Object();

Beispiel für ein Objekt:

const oma = {
  age: 82,
  name: 'Elfriede',
  greet: function () {
    console.log('Guten Tag');
  }
};

Gibt einen Array aller Keys / Values aus:

const oma = {
  name: 'Elfriede',
};


Object.keys(oma);    // name

Object.values(oma);  // Elfriede

Values ist erst seit 2017 Standard, wird also noch nicht von jedem Browser unterstützt.

Objekte modifizieren

Zugreifen oder verändern einzelner Elemente:

oma.age = 82;
oma.greet;
oma[‚greet‘]();

… oder erstellen ganz neuer Elemente:

oma.haircut = 'Dauerwelle';  // oder
oma['haircut'] = 'Dauerwelle';

Entfernen einer Property:

delete oma.haircut;

Funktionen ansprechen:

const oma = {
  greet: function () {
    console.log('Guten Tag');
  }
};
const oma = {
  greet: function gutenTag() {
    console.log('Guten Tag');
  }
};

… geht bei beiden gleich:

oma.greet();

This

Mit this können Methoden direkt das Objekt adressieren:

const oma = {
  name: 'Elfriede',
  greet: function () {
    console.log(`Ich heiße ${this.name}.`);
  }
};
oma.greet();

Achtung: Die Art und Weise, wie Funktionen aufgerufen werden, hat einen Einfluss darauf, auf was sich this bezieht!

a. Funktion als Methode in einem Objekt -> das Objekt selbst *
b. „Normale“ Funktion -> das window Objekt
c. …

* Wird eine Funktion aus einem Objekt aber in einer Variablen gespeichert, ist die Referenz das window Objekt:

const oma = {
  name: 'Elfriede',
  greet: function () {
    console.log(`Ich heiße ${this.name}.`);
  }
};

const talk = oma.greet;
talk();

Schreibe einen Kommentar