Objekte

Zu Objekten gibt es eine Menge zu lernen. ;-)
Am besten fangen wir erst einmal an, alle in der Seite enthaltenen Tags als Objekte zu betrachten - insbesondere z.B. das div-Tag.
Bei den Ausgaben von Texten in eine HTML-Seite haben Sie gelernt, die Funktion getElementById zu verwenden, z.B. in folgender Form:
document.getElementById("ausgabefeld").innerHTML="Hallihallo";
"ausgabefeld" steht dabei z.B. für die ID eines div-Tags.
<div id="ausgabefeld">
  und hier wird nach Aufruf des obigen Befehls die neue Ausgabe stehen
</div>
Im folgenden Beispiel wird auf ähnliche Weise ein div-Tag mit der id "schein" formatiert.
function formatiereAusgabe()
{
    var obj=document.getElementById("schein");
    obj.style.fontSize       ="20px";
    obj.style.backgroundColor="lightpink";
    obj.style.color          ="red";
    obj.style.border         ="1px solid #333333";
    obj.style.opacity        ="0.8";
}
Bei den CSS-Formatierungen dieses "Objekts" könnten sich im Header der Seite zusätzliche Formatierungen befinden:
#schein
{
    width:             400px;
    height:            360px;
    margin:            auto;
}
Erkennen Sie die Gemeinsamkeiten der Beispiele? Genauso gut kann man natürlich auch auf jeden anderen Bestandteil der Seite zugreifen.

Löschen von Objekten in der HTML-Seite

z.B.
<html>
 
<head>
    <style>
        #loeschmich
        {
            background-color: blue;
            width: 100px;
            height: 100px;
        }
    </style>
 
    <script>
        function loeschen(obj)
        {
            obj.parentNode.removeChild(obj);
        }
    </script>
</head>
 
<body>
 
    <div id="loeschmich" onclick="loeschen(this)">weg damit</div>
 
</body>
 
</html>

Objekte hinzufügen

Sie können beliebige Objekte in bereits existierende "Container" (siehe div-Tag mit id 'content') einfügen, z.B. wie folgt:
<!DOCTYPE html>
<html>
<head>
    <title>Neue Objekte hinzufügen</title>
    <meta charset="utf-8">
    <!-- Following Meta-Tag fixes scaling-issues on mobile devices -->
    <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"
          name="viewport">
 
    <style type="text/css">
        body
        {
            height:         100%;
            width:          100%;
            margin:         0;
            padding:        0;
            border:         0;
            outline:        0;
            font-family:    Verdana, Arial, Helvetica, sans-serif;
            font-size:      100%;
            vertical-align: baseline;
        }
        div
        {
            width:            50px;
            height:           50px;
            background-color: green;
            text-align:       center;
            font-size:        32px;
            margin:           10px;
        }
    </style>
 
    <script type="text/javascript">
        var elemente=new Array();
        var nr=0;
 
        function neuesDivTagErzeugen()
        {
           var tmp="";
           tmp="<div id='"+nr+"'>"+nr+"</div>";
           nr++;
           return tmp;
        }
 
        function textInBodyHinzufuegen( text )
        {
           document.getElementById("container").innerHTML+=text;
        }
 
    </script>
 
</head>
 
<body id="container">
 
  <input type="button"
         value="neu"
         onclick="textInBodyHinzufuegen( neuesDivTagErzeugen() )">
 
</body>
 
</html>
... oder so ...
...
        #zielobjekt
        {
          background-color: blue;
          width: 100px;
          height: 100px;
        }
        .flugobjekt
        {
          position: absolute;
          background-color: red;
          width: 100px;
          height: 100px;
        }
...
...
        var i=0;
 
        function neuesObjekt()
        {
          document.getElementById("content").innerHTML +=
                         "<div class='flugobjekt' id='flugobjekt"
                       + i
                       + "'>Alien</div>";
          document.getElementById("flugobjekt"+i).style.top =
                         startAlienY() + "px";
          document.getElementById("flugobjekt"+i).style.left =
                         startAlienX() + "px";
          i++;
        }
...
...
    <div id="zielobjekt" onclick="neuesObjekt">Ziel</div>
        <div id="content"></div>
...

Objekte verwalten (anlegen, vermerken, entfernen)

<!DOCTYPE html>
<html>
<head>
    <title>Neue Objekte hinzufügen</title>
    <meta charset="utf-8">
    <!-- Following Meta-Tag fixes scaling-issues on mobile devices -->
    <meta content="width=device-width; initial-scale=1.0;
          maximum-scale=1.0; user-scalable=0;" name="viewport">
 
    <style type="text/css">
        body
        {
            height:         100%;
            width:          100%;
            margin:         0;
            padding:        0;
            border:         0;
            outline:        0;
            font-family:    Verdana, Arial, Helvetica, sans-serif;
            font-size:      100%;
            vertical-align: baseline;
        }
        div
        {
            width:            50px;
            height:           50px;
            background-color: green;
            text-align:       center;
            font-size:        32px;
            margin:           10px;
        }
    </style>
 
    <script type="text/javascript">
 
        var nr=0;
        var objekte=new Array();
 
        function neuesDivTagErzeugen()
        {
           var tmp="";
           tmp="<div id='nr"+nr+"' onmouseover='merkeObjekt(this)'"
              +" onclick='loescheObjekt(this)'>"+nr+"</div>";
           nr++;
           return tmp;
        }
 
        function textInBodyHinzufuegen( text )
        {
           document.getElementById("container").innerHTML+=text;
        }
 
        function merkeObjekt( obj )
        {
           if( findeObjekt(obj) == false )
           {
               objekte.push(obj);
               console.log(objekte);
           }
        }
 
        function findeObjekt( obj )
        {
           var gefunden=false;
 
           for( var i=0; i<objekte.length; i++ )
           {
              if( objekte[i] == obj )
              {
                 console.log( "Element " + obj + " bereits vorhanden" );
                 gefunden=true;
              }
           }
           return gefunden;
        }
 
        function loescheObjekt( obj )
        {
           for( var i=0; i<objekte.length; i++ )
           {
              if( objekte[i] == obj )
              {
                 console.log( "Element " + obj + " gefunden" );
                 objekte.splice(i,1);
                 console.log(objekte);
              }
           }
        }
 
        function test()
        {
           loescheObjekt( document.getElementById("nr1") );
           console.log(objekte+ " Länge des Arrays: " + objekte.length);
        }
 
    </script>
 
</head>
 
<body id="container">
 
  <input type="button"
         value="neu"
         onclick="textInBodyHinzufuegen( neuesDivTagErzeugen() )">
 
 <input type="button"
         value="test"
         onclick="test()">
</body>
 
</html>

Objekte bewegen

<!DOCTYPE html>
<html>
<head>
    <title>Objekt bewegen</title>
    <meta charset="utf-8">
    <!-- Following Meta-Tag fixes scaling-issues on mobile devices -->
    <meta content="width=device-width; initial-scale=1.0;
          maximum-scale=1.0; user-scalable=0;" name="viewport">
 
    <style type="text/css">
 
        div#obj1
        {
            position:         absolute;
        width:            50px;
            height:           50px;
            background-color: green;
            text-align:       center;
            font-size:        32px;
            margin:           10px;
        }
 
    </style>
 
    <script type="text/javascript">
 
        function neu( text )
        {
           var tmp = "<div id='obj1' onclick='bewegen(this)'>1</div>";
           document.getElementById("container").innerHTML = tmp;
        }
 
        function bewegen( obj )
        {
            var rect = obj.getBoundingClientRect();
            var x = rect.left + 25;
            obj.style.left = x + "px";
        }
 
    </script>
 
</head>
 
<body id="container">
 
    <input type="button"
           value="neu"
           onclick="neu()">
 
</body>
 
</html>

Objektkoordinaten abfragen

Folgende Funktionen können Sie verwenden zum Abfragen der absoluten X- und Y-Koordinate eines Objekts bzw. Elements:
function getAbsX(obj)
{
   var x = 0;
   if (obj && typeof obj.offsetParent != "undefined")
   {
     while (obj && typeof obj.offsetLeft == "number")
     {
       x += obj.offsetLeft;
       obj = obj.offsetParent;
     }
   }
   return x;
}
 
function getAbsY(obj)
{
   var y = 0;
   if (obj && typeof obj.offsetParent != "undefined")
   {
     while (obj && typeof obj.offsetTop == "number")
     {
       y += obj.offsetTop;
       obj = obj.offsetParent;
     }
   }
   return y;
}
oder:

Objekte am Beispiel der String-Klasse

String = Zeichenkette. Überall in Ihren Programmen kommen Zeichenketten vor. Sie werden meistens in Form von einfachen Bezeichnern von Personen oder Gegenständen genutzt und in Anführungszeichen geschrieben, z.B. "Bernd", "Hausfrauenpanzer", "11.02.2016", usw.
Zeichenketten muss man manchmal auswerten, ändern, ergänzen usw.
Dieses alles kann man in Javascript sehr komfortabel mit der so genannten String-Klasse tun.
Sobald Sie mit der String-Klasse arbeiten, haben Sie es mit "String-Objekten" zu tun, die Sie im Speicher Ihres Computers bearbeiten können.
Siehe z.B. :

Anwendungsfälle

Anwendung:
Beispiel:
Wie geht das?
Suchen eines Wortes in einem Satz
Der Geheimdienst könnte z.B. alle Emails durchsuchen nach dem Wort "Bombe"
...
Aufteilen von Sätzen in einzelne Wörter
Ein Eintrag in einem Formularfeld soll ausgewertet werden, z.B. die aufeinander folgenden Namen einer Fußballmannschaft.
Mit der Funktion split() können die Namen voneinander getrennt werden, indem man sie mit split automatisch in ein Array schreibt.
Alle Zeichen in Groß- bzw. Kleinschreibung wandeln
...
...
Ersetzen von Text in einer Zeichenkette
...
...
...
...
...
siehe auch z.B.
https://wiki.selfhtml.org/wiki/JavaScript/Objekte/String
http://www.w3schools.com/jsref/jsref_obj_string.asp
http://www.mediaevent.de/javascript/Javascript-Objekte-3.html
http://www.mediaevent.de/javascript/Javascript-String-Methoden.html
https://msdn.microsoft.com/de-de/library/89t1khd2%28v=vs.94%29.aspx