Brückenkurs Websites und Webapps/Objekte

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
Ein Objekt ist in Javascript eine Liste von Eigenschaft-Wert-Paaren.

Javascript-Objekte repräsentieren in der Regel Objekte aus der realen Welt, wie z.B. Personen, Produkte, Geräte, Häuser usw.. 


'''Beispiel'''

Das Objekt ''person'' besitzt die Eigenschaften ''vorname'', ''name'', ''alter'' und ''geschlecht'' mit den Werten "Hans", "Müller", 45 und "m".

<code id="58e7d6545c79d">
var person = {vorname: "Hans", name: "Müller", alter: 45, geschlecht: "m"};
</code>


Es können beliebig viele Objekte mit den gleichen Eigenschaften, aber unterschiedlichen Werten definiert werden:

<code id="58e7d6545c812">
var person1 = {vorname: "Hans", name: "Müller", alter: 45, geschlecht: "m"};

var person2 = {vorname: "Igor", name: "Ochirov", alter: 25, geschlecht: "m"};

var person3 = {vorname: "Marta", name: "Kowalska", alter: 15, geschlecht: "w"};
</code>


Die allgemeine Notation zur Erstellung von Objekten lautet:

 var <Objektname> = { <Eigenschaft> : <Wert>, <Eigenschaft> : <Wert> ,..., <Eigenschaft> : <Wert> };

Der <Objektname> ist ein '''beliebiger Variablenname'''. Zwischen den Klammern { } können '''beliebig viele Eigenschaft-Wert-Paare''' definiert werden. Der Name einer <Eigenschaft> wird stets ohne Anführungszeichen "" notiert. 


'''Beispiel'''

Gegeben ist das Objekt "person" mit den Eigenschaften "name", "vorname", "alter" und "geschlecht". 

Der Name und der Vorname der Person sollen auf der Konsole ausgegeben werden.

<code id="58e7f328bad2b">
var person = {vorname: "Hans", name: "Müller", alter: 45, geschlecht: "m"};
</code>
<run id="58e7f328baf06">
console.log(person.name);
console.log(person.vorname);
</run>


'''Beispiel'''

Gegeben ist das Objekt "person" mit den Eigenschaften "name", "vorname", "alter" und "geschlecht". 

Wenn das Alter der Person > 18 ist, soll der Text "Die Person ist erwachsen." ausgegeben werden, ansonsten: "Die Person ist minderjährig."

<code id="58e7f328badae">
var person = {vorname: "Hans", name: "Müller", alter: 45, geschlecht: "m"};
</code>
<run id="58e7f328baf6e">
if(person.alter > 18){
   console.log("Die Person ist erwachsen.");
}else{
   console.log("Die Person ist minderjährig.");
}
</run>
Ändern Sie das Alter der Person und drücken Sie erneut auf "Ausführen".


'''Beispiel'''

Die Funktion "pruefeAlter" erwartet als Parameter ein Person-Objekt. Sie prüft, ob die Person erwachsen oder minderjährig ist.

<code id="58e7f8d914c23">
function pruefeAlter(person){
  
 if(person.alter > 18){
   console.log("Die Person ist erwachsen.");
 }else{
   console.log("Die Person ist minderjährig.");
 }
}
</code>
Die Funktion kann nun mit beliebigen Person-Objekten aufgerufen werden:
<run id="58e7f8d914d81">
var person1 = {vorname: "Hans", name: "Müller", alter: 45, geschlecht: "m"};
pruefeAlter(person1);

var person2 = {vorname: "Igor", name: "Ochirov", alter: 25, geschlecht: "m"};
pruefeAlter(person2);

var person3 = {vorname: "Marta", name: "Kowalska", alter: 15, geschlecht: "w"};
pruefeAlter(person3);
</run>



'''Beispiel'''

Gegeben ist das Objekt "person" mit den Eigenschaften "name", "vorname", "alter" und "geschlecht". 

Der Name der Person soll von "Meyer" zu "Schulze" geändert werden:

<code id="58e7f328bae1b">
var person = {vorname: "Susi", name: "Meyer", alter: 25, geschlecht: "w"};
</code>
<run id="58e7f328bafdb">
person.name = "Schulze";

//nur zum Prüfen:
console.log(person.name);
</run>



Wir arbeiten das Tutorial zum Thema "Javascript Objekte" bei W3Schools durch: [http://www.w3schools.com/js/js_objects.asp w3schools]



'''Aufgabe 1'''

Gegeben ist ein Objekt mit dem Namen "computer1". Geben Sie die Marke, die Bildschirmgröße und das Gewicht auf der Konsole aus!

<code id="58e7f328bae86">
var computer1 = {marke: "HP", betriebssystem: "Windows", bildschirmgroesse: 15.6, festplattengroesse: 1000, ram: 8, gewicht: 3}
</code>
<run id="58e7f328bb053">
</run>



'''Aufgabe 2'''

Die Funktion "gratulation" erwartet als Parameter ein Person-Objekt, welches so aufgebaut ist wie in den Beispielen oben. Wenn die Person männlich ist, soll die Ausgabe

 Hallo Herr <Nachname>, alles Gute zum <Alter>. Geburtstag!

erzeugt werden.

Wenn die Person weiblich ist, soll die Ausgabe

 Hallo Frau <Nachname>, alles Gute zum <Alter>. Geburtstag!

erzeugt werden. Anstelle von <Nachname> und <Alter> soll die konkreten Werte eingesetzt werden.
<code id="58e8aa734b0c8">
function gratulation(person){
  

}
</code>
<run id="58e8aa734b177">
var person1 = {vorname: "Hans", name: "Müller", alter: 45, geschlecht: "m"};
gratulation(person1);

var person2 = {vorname: "Igor", name: "Ochirov", alter: 25, geschlecht: "m"};
gratulation(person2);

var person3 = {vorname: "Marta", name: "Kowalska", alter: 15, geschlecht: "w"};
gratulation(person3);
</run>



'''Aufgabe 3'''

Die Funktion "vergleicheAlter" erwartet zwei Person-Objekte als Parameter. Wenn Person 1 älter ist als Person 2, soll die Ausgabe

 <Vorname1> ist älter als <Vorname2>

erscheinen. Wenn beide Personen gleich alt sind, soll die Ausgabe

 <Vorname1> ist genauso alt wie <Vorname2>

erscheinen.

Wenn Person 1 jünger ist ist, soll die Ausgabe

 <Vorname1> ist jünger als <Vorname2>

erscheinen. Anstelle von <Vorname1> und <Vorname2> sollen die konkreten Vornamen der beiden Personen eingesetzt werden.
<code id="58e8af4e750ba">
function vergleicheAlter(person1, person2){


}
</code>
<run id="58e8af4e75213">

var person1 = {vorname: "Hans", name: "Müller", alter: 45, geschlecht: "m"};
var person2 = {vorname: "Igor", name: "Ochirov", alter: 25, geschlecht: "m"};
var person3 = {vorname: "Marta", name: "Kowalska", alter: 15, geschlecht: "w"};
var person4 = {vorname: "Maria", name: "Walkowiak", alter: 15, geschlecht: "w"};

vergleicheAlter(person1, person2);
vergleicheAlter(person3, person2);
vergleicheAlter(person3, person4);
</run>



'''Aufgabe 4'''

Die Funktion "pruefeComputer" erwartet ein Computer-Objekt als Parameter. Vervollständigen Sie die Funktion so, dass die Ausgabe "Ultrabook" erscheint, wenn die Bildschirmgröße < 17 (Zoll) und das Gewicht < 2.5 (Kilogramm) ist. Ansonsten soll die Ausgabe "Notebook" erscheinen.
<code id="58e7f8d914cb5">
function pruefeComputer(computer){

  
}
</code>
<run id="58e7f8d914df5">
var computer1 = {marke: "HP", betriebssystem: "Windows", bildschirmgroesse: 15.6, festplattengroesse: 1000, ram: 8, gewicht: 3}
pruefeComputer(computer1);

var computer2 = {marke: "Lenovo", betriebssystem: "Windows", bildschirmgroesse: 14, festplattengroesse: 256, ram: 4, gewicht: 1.5}
pruefeComputer(computer2);
</run>



'''Aufgabe 5'''

Gegeben ist ein Objekt mit dem Namen "computer1". Ändern Sie die Marke von "HP" zu "Dell" und das Betriebssystem von "Windows" zu "Linux". Zeile 1 darf nicht verändert werden.

<code id="58e7fa46069b1">
var computer1 = {marke: "HP", betriebssystem: "Windows", bildschirmgroesse: 15.6, festplattengroesse: 1000, ram: 8, gewicht: 3}
</code>
<run id="58e7fa4606a6a">


//zum Prüfen:
console.log(computer1.marke);
console.log(computer1.betriebssystem);
</run>



'''Aufgabe 6'''

Definieren Sie ein Objekt Ihrer Wahl mit mindestens vier Eigenschaften. Den Namen des Objekts, die Eigenschaften und die Werte können Sie frei wählen!

Definieren Sie anschließend ein zweites Objekt mit den gleichen Eigenschaften, aber anderen Werten.
<code id="58e7fe4c39293">
</code>
<run id="58e8aa734b1f3">
</run>



'''Aufgabe 7'''

Studieren Sie die folgende Funktion "ausgabeHaus". Die Funktion erwartet ein Haus-Objekt als Parameter und gibt die Eigenschaften des Hauses auf der Konsole aus.

Erstellen Sie in der run-Box ein Haus-Objekt mit den passenden Eigenschaftsnamen und rufen Sie die Funktion "ausgabeHaus" auf.

Erstellen Sie anschließend zwei weitere Haus-Objekte mit den gleichen Eigenschaften, aber anderen Werten und rufen Sie die Funktion "ausgabeHaus" auf.
<code id="58e8af4e75158">
function ausgabeHaus(haus){

  console.log(haus.adresse);
  console.log(haus.groesse);
  console.log(haus.anzahlZimmer);
  console.log(haus.anzahlEtagen);
}
</code>
<run id="58e8af4e7529f">
</run>