ECMAScript (DOM)

Nächste Frage Vorherige Frage Zeige Lösung an Gesamtpunktzahl

ECMAScript definiert keine Daten-Operationen für Ein-/Ausgaben. Bei der Verwendung von ECMAcript in HTML-Dokumenten wird oft das window - Objekt mit dem Dokument-Elementen-Baum (DOM) verwendet. Bitte richtige Aussagen ankreuzen.
Nach W3C (HTML 5) gibt window.window das window - Objekt zurück.
Nach W3C (HTML 5) gibt window.frames das window - Objekt zurück.
Nach W3C (HTML 5) gibt window.self das window - Objekt zurück.
Nach W3C (HTML 5) gibt window.document das aktive document - Objekt zurück.
Nach W3C (HTML 5) gibt document.defaultView das window - Objekt vom aktiven document - Objekt zurück. [mehr]
Das folgende Code-Schnipsel soll, ausgehend von einem Element el das oberste Objekt ermitteln. Richtige Aussagen bitte ankreuzen.
<script>
function get_root(el) {
  while (el && el.parentNode) { el = el.parentNode; }; 
  return el;
}
</script>

<a id="MY_A_TAG" href="javascript:alert(this)"
   onclick="alert(get_root(document.getElementById('MY_A_TAG')))">
   zeige an 
</a>
Das Script-Tag steht vor dem a-Tag, dadurch gibt es stets einen Auführungsfehler.
Es wird erst etwa [object HTMLDocument] und danach etwa [object Window] angezeigt.
Bei einem Klick auf das a-Tag wird nur onclick ausgeführt ohne das href.
Das folgende Code-Fragment enthält drei a-Tags. Es geht um die onclick-href-Eventfolge. Richtige Antworten bitte ankreuzen.
<style>
.center { display: block; text-align: center; }
.blau   { background-color: #009; color: #fff; }
.border { border: 1px solid #ccc; }
.w100  { float: left; width: 100px; margin: 0 1px; }
.clear  { clear: both; }
</style>

<div class="center">
  <a class="w100 blau border" href="#"
     onclick="alert('Button 1');"> Button 1
  </a>
  <a class="w100 blau border" href="javascript:alert('href');"
     onclick="alert('Button 2'); return false;"> Button 2
  </a>
  <a class="w100 blau border" href="javascript:void(0);"
     onclick="alert('Button 3');"> Button 3
  </a>
</div><br class="clear" />
Wegen <div class="center"> werden die 4 a-Tags seitenzentriert angezeigt.
Wegen <div class="center"> wird der innerHTML-Text jedes a-Tags zentriert innerhalb der class="w100"-Breite angezeigt.
Bei einem Klick auf Button 1 wird nach der alert('Button 1')-Anzeige href="#" ausgeführt und dadurch zur aktuellen a-Tag-Stelle gescrollt.
Bei einem Klick auf Button 2 wird erst alert('Button 2') und dann alert('href') angezeigt.
Bei einem Klick auf Button 3 wird nach alert('Button 3')-Anzeige href="javascript:void(0);" ausgeführt.
Es geht um zwei a-Tags, die wie Buttons aussehen sollen. Bei entsprechenden Ereignissen werden mit Hilfe von CSS und ECMAScript Hintergrundfarben geändert. Richtige Antworten bitte ankreuzen.
<style>
.button { display: inline; text-decoration: none;
 font-size: 80%;     border-width: 3px;    
 font-style: normal; border-style: outset;
 color: #fff;        background-color: #99a;
 padding: 0px 4px;   margin: 0px 4px; 
}
a                { background-color: #999;}
a.button:link    { background-color: #999;}
a.button:visited { background-color: #999;}
a.button:hover   { background-color: #ccc;}
a.button:active  { background-color: #999;}
</style>

<a class="button"
   href="javascript:alert('Button1-Test')"> Button1
</a>

<a class="button" href="javascript:alert('Button2-Test')"
   onmouseover = "this.style.backgroundColor='#ccc';"
   onmouseout  = "this.style.backgroundColor='#f00';"
   onmousedown = "this.style.backgroundColor='#00f';"
   onclick     = "this.style.backgroundColor='#0f0'; return false;">
   Button2
</a>
Die border-Styles der CSS-Klasse button bewirken, daß die beiden a-Tags etwa wie Buttons aussehen.
Bei onmouse-hover wird der Button1-Hintergrund Hellgrau (#ccc).
Bei onmouseover wird der Button2-Hintergrund hellgrau (#ccc)
Bei onmouseout wird der Button1-Hintergrund grau (#999)
Bei onmouseout wird der Button2-Hintergrund grau (#f00)
Bei onmousedown wird der Button1-Hintergrund grau (#999)
Bei onmousedown wird der Button2-Hintergrund blau (#00f)
Bei einem Maus-Klick auf den Button1 wird der Hintergrund grau (#999) und in einer alert-Box wird 'Button1-Test' angezeigt.
Bei einem Maus-Klick auf den Button2 wird der Hintergrund grün (#0f0) und es wird keine alert-Box angezeigt.
Es geht um das Setzen und Abfragen der Hintergrundfarbe eines a-Tag bei verschiedene Maus-Ereignissen. Richtige Antworten bitte ankreuzen.
<script>
function get_style(that, ev, cssprop){ 
  var doc = document, style, 
      ev = ev || window.event; /* 1 */ 

  if (doc.defaultView && doc.defaultView.getComputedStyle) { 
    style = doc.defaultView.getComputedStyle(that, null);
  } else { //IE < 9
    style = that.currentStyle || that.style;
  } 
  return style[cssprop] || style.getPropertyValue(cssprop);
}
</script>

<a href="javascript:alert('Button-Test')"
   onmouseover = "this.style.backgroundColor='#f00';"
   onmouseout  = "this.style.backgroundColor='#0f0';"
   onmousedown = "this.style.backgroundColor='#00f';"
   onclick     = "alert(get_style(this,event,'backgroundColor'));return true"> 
   Button
</a>
Mit element.style.backgroundColor='#f00' kann die Hintergrundfarbe von element gesetzt werden, aber mit element.style.backgroundColor kann keine element Abfrage durchgeführt werden.
Bei einem Aufruf von get_style(this,event,'backgroundColor') entspricht ev an der Stelle /* 1 */ einem [object MouseEvent]
Die obigen ||-Verknüpfungen dienen der cross-browser-Kompaktibilität.
Bei onmouseover wird der a-Tag-Hintergrund rot ('#f00') und nach dem onmouseout (ohne Maustaste zu drücken) wird in einer alert-Box etwa rgb(255,0,0) angezeigt.
Bei Bei gedrückter Maustaste (onmousedown) wird der a-Tag-Hintergrund blau ('#00f'). Bei einem nachfolgenden Loslassen der gedrückten Maustaste tritt onclick ein und es wird in einer alert-Box etwa rgb(0,0,255) angezeigt. Dann wird eine weitere alert-Box mit dem Text 'Button-Test' angezeigt.
Das folgende Code-Fragment schreibt Tagnamen in das Dokument. Richtige Antworten bitte ankreuzen.
<div id="mydom"> <b>Hallo</b> <i>Welt</i> </div>
<script>
var win = window, doc = win.document;

var s="", br = " ", child, par = doc.getElementById('mydom');
for (child = par.firstChild; child; child = child.nextSibling) {
  s += child.nodeName + br;
} doc.write(s);
</script>
Die Ausgabe ist: #text B #text I #text
Wird das obige div-Tag ersetzt durch
<div id="mydom"><b>Hallo</b><i>Welt</i></div>
dann ist die Ausgabe: B I
Wird das obige div-Tag ersetzt durch
<div id="mydom"><b> Hallo </b><i> Welt </i></div> dann ist die Ausgabe: B I
Wird das obige div-Tag ersetzt durch
<div id="Div1"><b></b>Hallo</b><i>Welt</i></div> Dann ist die Ausgabe: B #text I
Hier geht es um Zugriffe auf Objekt-Properties, insbesondere um das try{...} catch() {...}-Konstrukt. Richtige Aussagen bitte anhaken.
<div id="myid" title="hallo welt" ></div>
<script>
  var id = "myid",
  el = document.getElementById(id) || {innerHTML:''};
  el.innerHTML = el.title || 'zugriffsfehler';
  if (!el.nodeName) { alert(el.innerHTML); }
</script>
Ist der id-String korrekt und im div kein title-attribut vorhanden, so zeigt der div-innerHTML "zugriffsfehler" an
Ist der id-String korrekt und div title="hallo welt", so zeigt der div-innerHTML "hallo welt" an
Ist der id-String nicht korrekt, so wird in einer alert-Box "zugriffsfehler" angezeigt
Hier geht es um Zugriffe auf Objekt-Properties, insbesondere das Vermeiden von fehlerhaften Zugriffen und Abbrüchen. Richtige Aussagen bitte anhaken.
<div id="my_id" title="nachher">vorher</div>
<script>
 var el, id = " my_id";
 try{
   el = document.getElementById(id);
   el.innerHTML = el.title || 'zugriffsfehler';
 } catch(e) {
   alert(e);
 }
</script>
Ist der id-String korrekt und div title="nachher", so zeigt nach der Code-Ausführung das div-Tag "nachher" an.
Ist der id-String korrekt und im div kein title-attribut vorhanden, so zeigt so zeigt nach der Code-Ausführung das div-Tag "zugriffsfehler" an
Ist der id-String nicht korrekt, so wird in einer alert-Box eine Fehlermeldung (etwa "TypeError: Cannot convert 'el' to object") angezeigt.
Jedes img-Tag einer Seite kann ein name-Property haben. Durch den folgenden Code sollen die Indizes von window.document.images im Objekt sav gesammelt werden, die einen nicht-trivialen String vom name-Property haben. Richtige Aussagen bitte ankreuzen.
<img name="meineVornamen" ... />
<img name="Walter Manfed" ... />
<script>
var img = window.document.images, sav = { }, name, i, erg;
for (i = 0; i < img.length; i += 1 ) {
  name = img[i].name;
  if ( name && name.length > 0 ) { 
    sav.name = i; /** 1 **/
  } 
}
erg = sav.meineVornamen + ' ';
erg += sav['Walter Manfed']; alert(erg);
</script>
Weil name = img[i].name; existiert, liegt bei /** 1 **/ kein ECMAScript-Syntaxfehler vor.
Bei der Ausführung tritt bei /** 1 **/ ein Syntax-Fehler auf.
Die Anzeige alert(erg) liefert undefined undefined
Jedes img-Tag einer Seite kann ein name-Property haben. Durch den folgenden Code sollen die Indizes von window.document.images im Objekt sav gesammelt werden, die einen nicht-trivialen String vom name-Property haben. Richtige Aussagen bitte ankreuzen.
<img name="meineVornamen" ... />
<img name="Walter Manfed" ... />
<script>
var img = window.document.images, sav = { }, name, i,erg;

for (i = 0; i < img.length; i += 1 ) {
  name = img[i].name;
  if ( name && name.length > 0 ) { 
    sav[name] = i; /** 1 **/
  } 
}
erg = sav.meineVornamen;
erg += ' ';
erg += sav['Walter Manfed']; alert(erg);
</script>
Die Anzeige alert(erg) liefert "meineVornamen Walter Manfed"
Die Anzeige alert(erg) liefert 0 1
Betrachten sie bitte das folgende HTML5-Dokument. Die richtigen Aussagen bitte ankreuzen.
  1. <!doctype html>
  2. <html lang="de">
  3. <head>
  4. <title> Seite mit .lastModified-Datum </title>
  5. <meta charset="UTF-8" />
  6. </head>
  7. <body>
  8. <h1>document.lastModified-Datum</h1>
  9. <p>
  10. Schreibe mit ECMAScript das
  11. .lastModified-Datum in das HTML-Dokument.
  12. </p>
  13. <script>
  14. var str, doc = window.document,
  15. t = new Date(doc.lastModified), YYYY = t.getUTCFullYear(),
  16. MM = String('0' + (1+t.getUTCMonth())).slice(-2),
  17. DD = String('0' + t.getUTCDate()).slice(-2),
  18. hh = String('0' + t.getUTCHours()).slice(-2),
  19. mm = String('0' + t.getUTCMinutes()).slice(-2),
  20. ss = String('0' + t.getUTCSeconds()).slice(-2);
  21. str = 'Stand: YYYY-MM-DD-hh-mm-ss';
  22. str = str.replace(/YYYY/g, YYYY).replace(/MM/g, MM);
  23. str = str.replace("DD", DD).replace(/hh/g, hh);
  24. str = str.replace(/mm/g, mm).replace(/ss/g, ss);
  25. window.document.write(str);
  26. </script>
  27. </body>
  28. </html>
Durch Zeile 29 wird durch window.document.write(str); beim Laden der Seite ein String der äußeren Form nach "Stand: 1970-01-01-00-00-00" in das HTML-Dokument geschrieben und angezeigt.
var s = "myString".slice(-2) ergibt s="ng";
Obwohl in der Zeile 26 der reguläre Ausdruck für .replace(/DD/g, DD) fehlt, ist dies dennoch richtig, weil anstelle des reguläre Ausdruckes auch ein String verwendet werden kann und dann die erste Fundstelle verwendet wird.
In den Zeilen 18-22 können die Worte String weggelassen werden, weil die .getUTC...()-Funktionen jeweils einen Wert vom Typ 'number' liefern und dann eine string-number-Verkettung erfolgt.
Die .replace().Funktionen (siehe Zeilen 25-29) ersetzen in "YYYY-MM-DD-hh-mm-ss" die Strings "YYYY", "MM", "DD", "hh", "mm", "ss" durch die aktuellen Werte.