Beispiel:JS-OOP-4.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<script>
document.addEventListener('DOMContentLoaded', function () {
function Person(vorname, nachname, alter) {
this.vorname = vorname;
this.nachname = nachname;
this.alter = alter;
this.getBeschreibung = function() {
return `Mein Name ist ${this.vorname} ${this.nachname} und ich bin ${this.alter} Jahre alt!`;
};
}
// Creating a new person with the `new` keyword
const anna = new Person('Anna', 'Mustermann', 31);
const björn = new Person('Björn', 'Mustermann', 29);
const cem = new Person('Cem', 'Mustermann', 2);
console.log(anna.getBeschreibung());
console.log(cem.getBeschreibung());
});
</script>
<style>
kbd {
background: #f9f9f9 linear-gradient(to bottom, #eee, #f9f9f9, #eee) repeat scroll 0 0;
border: thin solid #aaa;
border-radius: 2px;
box-shadow: 1px 2px 2px #ddd;
font-family: inherit;
font-size: 0.9em;
padding: 0 0.5em;
}
</style>
<title>OOP in JS - 4</title>
</head>
<body>
<h1>Konstruktor-Funktion zur Erzeugung beliebig vieler Personen</h1>
<p>Öffnen Sie die Konsole mit <kbd>F12</kbd> und beobachten Sie die Ausgabe.<br>Erweitern Sie die Ausgabe mit einem Klick auf das Dreieck!</p>
</body>
</html>
