JS Klasse
class Zeichen { constructor(buchstabe) { //speichern und zur //Bearbeitung bereitstellen this.buchstabe = buchstabe; //default eigenschaften einstellen this.farbe = "red"; this.zeichen_grosse = "16px"; } //methode unwandeln_in_kleine_form(){ this.buchstabe = this.buchstabe.toLowerCase(); } unwandeln_in_groesse_form(){ this.buchstabe = this.buchstabe.toUpperCase(); } /* farbe eingeben als rgb-code, hex-code oder name auf englisch. z.B red, yellow, #000, #ffffff */ farbe_aendern(farbe){ this.farbe = farbe; } /* grosse eingeben in form z.B 16px, 12%, */ grosse_aendern(grosse){ this.zeichen_grosse = grosse; } in_html_darstellen(){ var ursprung_html = document.querySelector("body").innerHTML; var neue_html = "<div style='font-size:"+this.zeichen_grosse+ "; color:"+this.farbe+"'>"+this.buchstabe+"</div>"; document.querySelector("body").innerHTML = ursprung_html + neue_html; } }
Nutzungsbeispiel
//klasse initialisieren var zeichen = new Zeichen("b"); //methode aufrufen zeichen.unwandeln_in_groesse_form(); zeichen.in_html_darstellen(); zeichen.unwandeln_in_kleine_form(); zeichen.in_html_darstellen(); zeichen.farbe_aendern("#333"); zeichen.in_html_darstellen(); zeichen.grosse_aendern("60px"); zeichen.in_html_darstellen();
JS OBJEKT
var person = { name: "Max Mustermann", alter: 32, geschlecht: 'maennlich', hobby: ['musik', 'tanzen'] };